Create rongshu-web

[dream9532]

No description provided.

[dream9532]

rongshu-web

[dream9532]

<title>Rongshu 榕樹 | 智能財務永續平台</title>

<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&display=swap" rel="stylesheet">

<style>
    body { font-family: 'Noto Sans TC', sans-serif; background-color: #F3F6F8; }
    
    /* Brand Colors - Based on 'generate_report.py' but refined for Web */
    :root {
        --color-primary: #003B73;   /* 榕樹深藍 - 專業、穩重 */
        --color-accent: #FFBF00;    /* 陽光金 - 希望、財富 */
        --color-growth: #10B981;    /* 生長綠 - 永續、健康 */
        --color-alert: #FF4D4D;     /* 警示紅 */
    }

    .bg-primary { background-color: var(--color-primary); }
    .text-primary { color: var(--color-primary); }
    .border-primary { border-color: var(--color-primary); }
    
    .bg-accent { background-color: var(--color-accent); }
    .text-accent { color: var(--color-accent); }
    
    /* Layout & Components */
    .glass-panel {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.5);
    }
    
    .nav-item.active {
        background-color: rgba(255, 191, 0, 0.15);
        color: var(--color-accent);
        border-right: 3px solid var(--color-accent);
    }

    .chart-container { position: relative; height: 260px; width: 100%; }
    .gauge-wrapper { position: relative; height: 180px; width: 100%; display: flex; justify-content: center; }
    
    /* Animations */
    .animate-enter { animation: slideIn 0.4s ease-out forwards; }
    @keyframes slideIn { 
        from { opacity: 0; transform: translateY(15px); } 
        to { opacity: 1; transform: translateY(0); } 
    }

    .gantt-bar-fill { transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1); }
    
    /* Scrollbar */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
</style>

<!-- ========== SIDEBAR (ROOTS) ========== -->
<aside class="w-64 bg-primary text-slate-300 flex flex-col flex-shrink-0 transition-all duration-300 z-20 hidden md:flex shadow-2xl">
    <!-- Brand Logo -->
    <div class="h-20 flex items-center px-6 bg-[#002a52] border-b border-[#004080]">
        <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-accent to-yellow-600 flex items-center justify-center text-primary font-bold mr-3 shadow-lg">
            <i class="fas fa-tree text-lg"></i>
        </div>
        <div>
            <h1 class="text-white font-bold text-lg tracking-wide leading-none">Rongshu</h1>
            <span class="text-xs text-accent font-medium tracking-wider">智能財務系統</span>
        </div>
    </div>

    <!-- Navigation Menu -->
    <div class="flex-1 overflow-y-auto py-6 space-y-1">
        <div class="px-6 mb-2 text-xs font-bold text-slate-400 uppercase tracking-wider">指揮中心</div>
        <button onclick="switchView('dashboard')" id="nav-dashboard" class="nav-item w-full flex items-center space-x-3 px-6 py-3 hover:bg-white/5 hover:text-white transition-all active">
            <i class="fas fa-chart-pie w-5 text-center"></i>
            <span>財務總覽儀表</span>
        </button>
        
        <div class="px-6 mt-8 mb-2 text-xs font-bold text-slate-400 uppercase tracking-wider">永續經營</div>
        <button onclick="switchView('strategy')" id="nav-strategy" class="nav-item w-full flex items-center space-x-3 px-6 py-3 hover:bg-white/5 hover:text-white transition-all">
            <i class="fas fa-book w-5 text-center"></i>
            <span>策略白皮書</span>
        </button>
        <button onclick="switchView('gantt')" id="nav-gantt" class="nav-item w-full flex items-center space-x-3 px-6 py-3 hover:bg-white/5 hover:text-white transition-all">
            <i class="fas fa-stream w-5 text-center"></i>
            <span>執行進度 (Gantt)</span>
        </button>

        <div class="px-6 mt-8 mb-2 text-xs font-bold text-slate-400 uppercase tracking-wider">工具與輸出</div>
        <button onclick="switchView('reports')" id="nav-reports" class="nav-item w-full flex items-center space-x-3 px-6 py-3 hover:bg-white/5 hover:text-white transition-all">
            <i class="fas fa-print w-5 text-center"></i>
            <span>報告生成引擎</span>
        </button>
    </div>

    <!-- User Profile -->
    <div class="p-4 bg-[#002a52] border-t border-[#004080]">
        <div class="flex items-center space-x-3">
            <img src="https://ui-avatars.com/api/?name=Admin&background=FFBF00&color=003B73" class="w-9 h-9 rounded-full border-2 border-primary">
            <div class="flex-1 min-w-0">
                <p class="text-sm font-medium text-white truncate">Admin User</p>
                <p class="text-xs text-slate-400 truncate">Pro License</p>
            </div>
            <i class="fas fa-cog text-slate-400 hover:text-white cursor-pointer transition-colors"></i>
        </div>
    </div>
</aside>

<!-- ========== MAIN CONTENT (CANOPY) ========== -->
<main class="flex-1 flex flex-col min-w-0 h-screen overflow-hidden relative bg-[#F3F6F8]">
    
    <!-- Top Header -->
    <header class="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6 z-10 shadow-sm sticky top-0">
        <div class="flex items-center">
            <button class="md:hidden text-slate-500 hover:text-primary mr-4"><i class="fas fa-bars text-xl"></i></button>
            <h2 class="text-lg font-bold text-slate-800 flex items-center" id="page-title">
                <span class="w-2 h-6 bg-accent rounded-full mr-3"></span>
                財務總覽儀表 (FHI Analysis)
            </h2>
        </div>
        <div class="flex items-center space-x-4">
            <div class="hidden md:flex items-center text-xs text-slate-500 bg-slate-100 px-3 py-1.5 rounded-full">
                <span class="w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse"></span>
                數據同步：2025-11-26
            </div>
            <button class="p-2 text-slate-400 hover:text-primary transition-colors relative">
                <i class="far fa-bell text-lg"></i>
                <span class="absolute top-1.5 right-2 w-2 h-2 bg-red-500 rounded-full"></span>
            </button>
        </div>
    </header>

    <!-- Dynamic Content Views -->
    <div class="flex-1 overflow-y-auto p-4 md:p-8 custom-scroll relative">
        
        <!-- ==================== VIEW 1: DASHBOARD ==================== -->
        <div id="view-dashboard" class="animate-enter space-y-6">
            <!-- KPIs -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 relative overflow-hidden group hover:shadow-md transition-all">
                    <div class="absolute right-0 top-0 w-24 h-24 bg-blue-50 rounded-bl-full -mr-4 -mt-4 transition-transform group-hover:scale-110"></div>
                    <p class="text-xs font-bold text-slate-400 uppercase tracking-wider relative z-10">Total Debt (總負債)</p>
                    <div class="flex items-end justify-between mt-2 relative z-10">
                        <h3 class="text-2xl font-bold text-slate-800">NT$ 2,450,000</h3>
                        <span class="text-xs font-bold text-red-500 bg-red-50 px-2 py-1 rounded"><i class="fas fa-arrow-up mr-1"></i> 2.5%</span>
                    </div>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 relative overflow-hidden group hover:shadow-md transition-all">
                    <div class="absolute right-0 top-0 w-24 h-24 bg-green-50 rounded-bl-full -mr-4 -mt-4 transition-transform group-hover:scale-110"></div>
                    <p class="text-xs font-bold text-slate-400 uppercase tracking-wider relative z-10">Cashflow (月結餘)</p>
                    <div class="flex items-end justify-between mt-2 relative z-10">
                        <h3 class="text-2xl font-bold text-slate-800">NT$ +6,000</h3>
                        <span class="text-xs font-bold text-green-600 bg-green-50 px-2 py-1 rounded"><i class="fas fa-check mr-1"></i> 健康</span>
                    </div>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 relative overflow-hidden group hover:shadow-md transition-all">
                    <div class="absolute right-0 top-0 w-24 h-24 bg-yellow-50 rounded-bl-full -mr-4 -mt-4 transition-transform group-hover:scale-110"></div>
                    <p class="text-xs font-bold text-slate-400 uppercase tracking-wider relative z-10">Credit Score (預測)</p>
                    <div class="flex items-end justify-between mt-2 relative z-10">
                        <h3 class="text-2xl font-bold text-slate-800">680 <span class="text-sm text-slate-400 font-normal">/ 800</span></h3>
                        <span class="text-xs font-bold text-primary bg-blue-50 px-2 py-1 rounded">Rising</span>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- FHI Gauge -->
                <div class="lg:col-span-1 bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex flex-col items-center justify-center">
                    <h3 class="text-sm font-bold text-primary mb-4">FHI 財務健康指數</h3>
                    <div class="gauge-wrapper">
                        <canvas id="chartFHI"></canvas>
                        <div class="absolute top-[60%] left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center">
                            <span class="text-5xl font-bold text-primary block leading-none">72</span>
                            <span class="text-xs font-bold text-accent uppercase bg-yellow-50 px-2 py-0.5 rounded mt-1 inline-block">Moderate</span>
                        </div>
                    </div>
                    <p class="text-xs text-center text-slate-400 mt-4 max-w-[200px]">您的評分優於 65% 的用戶，建議優先處理高利債務。</p>
                </div>

                <!-- Cashflow Chart -->
                <div class="lg:col-span-2 bg-white p-6 rounded-xl shadow-sm border border-slate-100">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-sm font-bold text-primary">月度現金流壓力分析</h3>
                        <button class="text-xs text-slate-400 hover:text-primary"><i class="fas fa-download"></i></button>
                    </div>
                    <div class="chart-container">
                        <canvas id="chartCashflow"></canvas>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- Radar Chart -->
                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
                    <h3 class="text-sm font-bold text-primary mb-4">六維財務雷達</h3>
                    <div class="chart-container">
                        <canvas id="chartRadar"></canvas>
                    </div>
                </div>
                <!-- Debt Structure -->
                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
                    <h3 class="text-sm font-bold text-primary mb-4">負債結構分佈</h3>
                    <div class="chart-container">
                        <canvas id="chartDebt"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- ==================== VIEW 2: STRATEGY PLAN (Text Content) ==================== -->
        <div id="view-strategy" class="hidden animate-enter space-y-6">
            <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
                <div class="bg-primary px-6 py-4 border-b border-blue-800 flex justify-between items-center">
                    <h3 class="text-white font-bold text-lg flex items-center"><i class="fas fa-chess-queen text-accent mr-3"></i> 1. 策略構面分析</h3>
                    <span class="text-xs bg-white/20 text-white px-2 py-1 rounded">Strategic Dimension</span>
                </div>
                <div class="p-8 space-y-8">
                    <!-- Values -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div>
                            <h4 class="font-bold text-primary text-lg mb-3">核心價值 (Core Values)</h4>
                            <p class="text-sm text-slate-600 leading-relaxed bg-blue-50 p-4 rounded-lg border-l-4 border-accent">
                                數位平台/科技新創應建立一套與永續發展原則一致的核心價值觀，例如：<span class="font-bold text-primary">創新驅動、數據倫理、用戶賦權、社會共好、環境友善</span>。
                            </p>
                        </div>
                        <div>
                            <h4 class="font-bold text-primary text-lg mb-3">願景 (Vision)</h4>
                            <p class="text-sm text-slate-600 leading-relaxed bg-blue-50 p-4 rounded-lg border-l-4 border-accent">
                                描繪未來希望達成的永續狀態，例如：成為推動金融科技領域數位轉型與永續發展的領導者，或透過科技解決債務社會問題。
                            </p>
                        </div>
                    </div>
                    
                    <div class="border-t border-slate-100 pt-6">
                        <h4 class="font-bold text-primary text-lg mb-4">競爭策略與 ESG 整合</h4>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div class="p-4 border border-slate-200 rounded-lg hover:border-accent transition-colors">
                                <div class="text-green-500 mb-2"><i class="fas fa-leaf text-2xl"></i></div>
                                <h5 class="font-bold text-slate-800 mb-2">環境 (E)</h5>
                                <p class="text-xs text-slate-500">提升雲端運算效率，減少碳足跡；開發綠色科技解決方案。</p>
                            </div>
                            <div class="p-4 border border-slate-200 rounded-lg hover:border-accent transition-colors">
                                <div class="text-blue-500 mb-2"><i class="fas fa-users text-2xl"></i></div>
                                <h5 class="font-bold text-slate-800 mb-2">社會 (S)</h5>
                                <p class="text-xs text-slate-500">數據隱私保護、數位無障礙設計、普惠金融、員工福祉。</p>
                            </div>
                            <div class="p-4 border border-slate-200 rounded-lg hover:border-accent transition-colors">
                                <div class="text-purple-500 mb-2"><i class="fas fa-balance-scale text-2xl"></i></div>
                                <h5 class="font-bold text-slate-800 mb-2">治理 (G)</h5>
                                <p class="text-xs text-slate-500">透明的數據治理框架、穩健的風險管理機制、反貪腐政策。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tech & Financial -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
                    <h3 class="font-bold text-primary text-lg mb-4 border-b pb-2"><i class="fas fa-coins text-accent mr-2"></i> 財務構面 (ROI)</h3>
                    <ul class="space-y-4 text-sm text-slate-600">
                        <li class="flex items-start">
                            <span class="w-6 h-6 bg-yellow-100 text-yellow-600 rounded-full flex items-center justify-center mr-3 flex-shrink-0 text-xs font-bold">1</span>
                            <span><strong class="text-slate-800">直接財務效益：</strong> 採用綠色雲端與自動化程式碼，預計降低 30% 營運成本。</span>
                        </li>
                        <li class="flex items-start">
                            <span class="w-6 h-6 bg-yellow-100 text-yellow-600 rounded-full flex items-center justify-center mr-3 flex-shrink-0 text-xs font-bold">2</span>
                            <span><strong class="text-slate-800">品牌溢價：</strong> 永續形象有助於吸引 Z 世代用戶，預期提升 15% 用戶留存率。</span>
                        </li>
                        <li class="flex items-start">
                            <span class="w-6 h-6 bg-yellow-100 text-yellow-600 rounded-full flex items-center justify-center mr-3 flex-shrink-0 text-xs font-bold">3</span>
                            <span><strong class="text-slate-800">資金來源：</strong> 鎖定綠色債券與影響力投資基金 (Impact Investing)。</span>
                        </li>
                    </ul>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
                    <h3 class="font-bold text-primary text-lg mb-4 border-b pb-2"><i class="fas fa-microchip text-accent mr-2"></i> 技術構面</h3>
                    <ul class="space-y-4 text-sm text-slate-600">
                        <li class="flex items-start">
                            <span class="w-6 h-6 bg-blue-100 text-primary rounded-full flex items-center justify-center mr-3 flex-shrink-0 text-xs font-bold"><i class="fas fa-check"></i></span>
                            <span><strong class="text-slate-800">演算法倫理：</strong> 建立審查機制，確保 AI 信貸評分無性別或種族歧視。</span>
                        </li>
                        <li class="flex items-start">
                            <span class="w-6 h-6 bg-blue-100 text-primary rounded-full flex items-center justify-center mr-3 flex-shrink-0 text-xs font-bold"><i class="fas fa-check"></i></span>
                            <span><strong class="text-slate-800">數據隱私：</strong> 符合 GDPR 與台灣個資法，實施端對端加密。</span>
                        </li>
                        <li class="flex items-start">
                            <span class="w-6 h-6 bg-blue-100 text-primary rounded-full flex items-center justify-center mr-3 flex-shrink-0 text-xs font-bold"><i class="fas fa-check"></i></span>
                            <span><strong class="text-slate-800">綠色編碼：</strong> 優化軟體架構，減少算力消耗與碳排放。</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- ==================== VIEW 3: GANTT CHART ==================== -->
        <div id="view-gantt" class="hidden animate-enter space-y-6">
            <div class="flex justify-between items-center mb-2">
                <h2 class="text-2xl font-bold text-primary">專案執行時間軸 (2025)</h2>
                <div class="flex space-x-3 text-xs">
                    <span class="flex items-center"><span class="w-3 h-3 bg-primary rounded mr-1"></span> 策略 (Strategy)</span>
                    <span class="flex items-center"><span class="w-3 h-3 bg-green-500 rounded mr-1"></span> 技術 (Tech)</span>
                    <span class="flex items-center"><span class="w-3 h-3 bg-accent rounded mr-1"></span> 財務 (Finance)</span>
                </div>
            </div>

            <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="w-full text-sm text-left">
                        <thead class="bg-slate-50 text-slate-600 font-bold border-b border-slate-200">
                            <tr>
                                <th class="px-6 py-4 w-5/12">任務名稱 (Task)</th>
                                <th class="px-6 py-4 w-2/12">負責人</th>
                                <th class="px-6 py-4 w-2/12">截止日期</th>
                                <th class="px-6 py-4 w-3/12">進度 (Progress)</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100" id="gantt-body">
                            <!-- JS Generated Rows -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- ==================== VIEW 4: REPORT GENERATOR ==================== -->
        <div id="view-reports" class="hidden animate-enter space-y-6">
            <div class="bg-gradient-to-br from-primary to-[#002a52] rounded-2xl p-10 text-center text-white shadow-xl relative overflow-hidden">
                <div class="absolute top-0 left-0 w-full h-full bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10"></div>
                <div class="relative z-10">
                    <div class="w-20 h-20 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-6 backdrop-blur-sm border border-white/20 shadow-lg">
                        <i class="fas fa-file-invoice-dollar text-4xl text-accent"></i>
                    </div>
                    <h2 class="text-3xl font-bold mb-2">Rongshu 財務報告引擎</h2>
                    <p class="text-blue-200 mb-8 max-w-lg mx-auto">
                        系統將整合您的 FHI 分數 (72)、負債結構與現金流數據，自動生成符合銀行標準的專業財務健診報告 (PDF)。
                    </p>
                    
                    <button onclick="simulateReportGen()" id="gen-btn" class="bg-accent hover:bg-yellow-400 text-primary px-8 py-4 rounded-full font-bold shadow-lg transition-all transform hover:scale-105 flex items-center mx-auto">
                        <i class="fas fa-magic mr-2"></i> 開始生成報告
                    </button>

                    <!-- Progress Bar -->
                    <div id="gen-progress" class="hidden mt-10 max-w-md mx-auto">
                        <div class="flex justify-between text-xs text-blue-200 mb-2 font-mono">
                            <span id="gen-status">Initializing...</span>
                            <span id="gen-percent">0%</span>
                        </div>
                        <div class="w-full bg-black/30 rounded-full h-3 overflow-hidden">
                            <div id="gen-bar" class="bg-accent h-full rounded-full transition-all duration-200" style="width: 0%"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- History -->
            <div class="bg-white rounded-xl border border-slate-200 overflow-hidden shadow-sm">
                <div class="px-6 py-4 border-b border-slate-100 font-bold text-slate-700 bg-slate-50/50">
                    <i class="fas fa-history mr-2 text-slate-400"></i> 最近生成的報告
                </div>
                <div class="divide-y divide-slate-100">
                    <div class="px-6 py-4 flex items-center justify-between hover:bg-slate-50 transition-colors">
                        <div class="flex items-center">
                            <i class="far fa-file-pdf text-red-500 text-xl mr-4"></i>
                            <div>
                                <p class="font-bold text-slate-700 text-sm">2025_Q3_Financial_Health_Report.pdf</p>
                                <p class="text-xs text-slate-400">2025-10-15 • 2.4 MB</p>
                            </div>
                        </div>
                        <button class="text-primary hover:text-accent text-sm font-medium">下載</button>
                    </div>
                    <div class="px-6 py-4 flex items-center justify-between hover:bg-slate-50 transition-colors">
                        <div class="flex items-center">
                            <i class="far fa-file-pdf text-red-500 text-xl mr-4"></i>
                            <div>
                                <p class="font-bold text-slate-700 text-sm">Debt_Consolidation_Plan_v2.pdf</p>
                                <p class="text-xs text-slate-400">2025-09-20 • 1.8 MB</p>
                            </div>
                        </div>
                        <button class="text-primary hover:text-accent text-sm font-medium">下載</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</main>

<!-- Notification -->
<div id="notification" class="fixed bottom-6 right-6 bg-slate-800 text-white px-6 py-4 rounded-lg shadow-xl transform translate-y-20 opacity-0 transition-all duration-500 z-50 flex items-center border-l-4 border-accent">
    <div class="mr-4 text-accent"><i class="fas fa-check-circle text-xl"></i></div>
    <div>
        <h4 class="font-bold text-sm">操作成功</h4>
        <p class="text-xs text-slate-400" id="notif-msg">資料已更新</p>
    </div>
</div>

<script>
    // --- DATA CONFIGURATION (Imported from Python) ---
    const chartConfig = {
        colors: {
            bg: '#003B73',
            accent: '#FFBF00',
            danger: '#FF4D4D',
            growth: '#10B981',
            slate: '#E2E8F0'
        },
        fhi: 72,
        debt: [35, 40, 15, 10], // Card, Personal, Car, Student
        cashflow: [52000, 31000, 15000], // In, Out, Debt
        radar: [80, 40, 30, 90, 60, 50] // Income, Savings, Debt, Credit, Risk, Growth
    };

    const ganttTasks = [
        { task: "定義核心價值與願景", owner: "Leadership", end: "2025-01-15", progress: 100, type: "strategy" },
        { task: "市場定位與永續價值分析", owner: "Strategy Team", end: "2025-02-15", progress: 90, type: "strategy" },
        { task: "數據隱私與資安策略 (GDPR)", owner: "CTO, Legal", end: "2025-02-28", progress: 95, type: "tech" },
        { task: "永續專案 ROI 評估", owner: "CFO", end: "2025-03-15", progress: 90, type: "finance" },
        { task: "綠色雲端技術導入", owner: "Infra Team", end: "2025-06-30", progress: 60, type: "tech" },
        { task: "多元資金來源策略開發", owner: "Investor Rel.", end: "2025-05-15", progress: 85, type: "finance" },
        { task: "數位包容性功能優化", owner: "Product Team", end: "2025-08-31", progress: 50, type: "tech" }
    ];

    // --- APP LOGIC ---
    
    function switchView(viewId) {
        // Nav Logic
        document.querySelectorAll('.nav-item').forEach(el => {
            el.classList.remove('active', 'bg-white/10', 'text-accent', 'border-r-4', 'border-accent');
            el.classList.add('text-slate-300');
        });
        const activeNav = document.getElementById('nav-' + viewId);
        if(activeNav) {
            activeNav.classList.add('active', 'text-accent');
            activeNav.classList.remove('text-slate-300');
        }

        // View Logic
        ['dashboard', 'strategy', 'gantt', 'reports'].forEach(id => {
            const el = document.getElementById('view-' + id);
            if(el) el.classList.add('hidden');
        });
        
        const target = document.getElementById('view-' + viewId);
        target.classList.remove('hidden');
        target.classList.remove('animate-enter'); 
        void target.offsetWidth; // Trigger reflow
        target.classList.add('animate-enter');

        // Dynamic Titles
        const titles = {
            'dashboard': '財務總覽儀表 (FHI Analysis)',
            'strategy': '永續經營策略白皮書',
            'gantt': '專案執行進度 (Gantt Chart)',
            'reports': 'Rongshu 報告生成引擎'
        };
        document.getElementById('page-title').innerHTML = `<span class="w-2 h-6 bg-accent rounded-full mr-3"></span> ${titles[viewId]}`;

        if(viewId === 'dashboard') initCharts();
    }

    // --- CHARTS ---
    let charts = {};
    function initCharts() {
        if(charts.fhi) return; // Already initialized

        // 1. FHI Gauge
        charts.fhi = new Chart(document.getElementById('chartFHI'), {
            type: 'doughnut',
            data: {
                labels: ['Score', 'Gap'],
                datasets: [{
                    data: [chartConfig.fhi, 100 - chartConfig.fhi],
                    backgroundColor: [chartConfig.colors.accent, chartConfig.colors.slate],
                    borderWidth: 0,
                    circumference: 180,
                    rotation: 270,
                    cutout: '85%',
                    borderRadius: 5
                }]
            },
            options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, tooltip: { enabled: false } } }
        });

        // 2. Cashflow Bar
        charts.cashflow = new Chart(document.getElementById('chartCashflow'), {
            type: 'bar',
            data: {
                labels: ['收入 (Income)', '支出 (Expense)', '債務 (Debt)'],
                datasets: [{
                    data: chartConfig.cashflow,
                    backgroundColor: ['#3B82F6', '#94A3B8', chartConfig.colors.danger],
                    borderRadius: 6,
                    barThickness: 50
                }]
            },
            options: {
                responsive: true, maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: { y: { beginAtZero: true, grid: { borderDash: [4, 4] } }, x: { grid: { display: false } } }
            }
        });

        // 3. Radar
        charts.radar = new Chart(document.getElementById('chartRadar'), {
            type: 'radar',
            data: {
                labels: ['收入', '儲蓄', '負債', '信用', '風險', '成長'],
                datasets: [{
                    label: '財務狀態',
                    data: chartConfig.radar,
                    backgroundColor: 'rgba(255, 191, 0, 0.2)',
                    borderColor: chartConfig.colors.accent,
                    pointBackgroundColor: chartConfig.colors.accent,
                    pointBorderColor: '#fff'
                }]
            },
            options: {
                responsive: true, maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: { r: { min: 0, max: 100, ticks: { display: false }, grid: { color: '#E2E8F0' } } }
            }
        });

        // 4. Debt Donut
        charts.debt = new Chart(document.getElementById('chartDebt'), {
            type: 'doughnut',
            data: {
                labels: ['信用卡', '信貸', '車貸', '學貸'],
                datasets: [{
                    data: chartConfig.debt,
                    backgroundColor: [chartConfig.colors.danger, chartConfig.colors.accent, '#3B82F6', '#1E40AF'],
                    borderWidth: 0
                }]
            },
            options: { 
                responsive: true, maintainAspectRatio: false, 
                plugins: { legend: { position: 'right', labels: { boxWidth: 12, usePointStyle: true } } },
                layout: { padding: 10 }
            }
        });
    }

    // --- GANTT RENDER ---
    function renderGantt() {
        const tbody = document.getElementById('gantt-body');
        tbody.innerHTML = ganttTasks.map(t => {
            let colorClass = t.type === 'strategy' ? 'bg-primary' : (t.type === 'tech' ? 'bg-green-500' : 'bg-accent');
            return `
            <tr class="hover:bg-slate-50 transition-colors">
                <td class="px-6 py-4">
                    <span class="font-bold text-slate-700 text-sm block">${t.task}</span>
                    <span class="text-xs text-slate-400 uppercase font-bold">${t.type}</span>
                </td>
                <td class="px-6 py-4 text-xs text-slate-500 font-mono bg-slate-50 rounded-lg mx-2 w-fit text-center">${t.owner}</td>
                <td class="px-6 py-4 text-xs text-slate-500 font-mono">${t.end}</td>
                <td class="px-6 py-4">
                    <div class="flex items-center">
                        <div class="w-full bg-slate-200 rounded-full h-2 mr-3">
                            <div class="h-2 rounded-full ${colorClass} gantt-bar-fill" style="width: ${t.progress}%"></div>
                        </div>
                        <span class="text-xs font-bold text-slate-600">${t.progress}%</span>
                    </div>
                </td>
            </tr>`;
        }).join('');
    }

    // --- SIMULATION ---
    function simulateReportGen() {
        const btn = document.getElementById('gen-btn');
        const progress = document.getElementById('gen-progress');
        const bar = document.getElementById('gen-bar');
        const percent = document.getElementById('gen-percent');
        const status = document.getElementById('gen-status');

        btn.classList.add('hidden');
        progress.classList.remove('hidden');

        let w = 0;
        const interval = setInterval(() => {
            w += Math.floor(Math.random() * 15);
            if(w > 100) w = 100;
            
            bar.style.width = w + '%';
            percent.innerText = w + '%';
            
            if(w < 30) status.innerText = "匯入 FHI 數據...";
            else if(w < 60) status.innerText = "分析負債結構...";
            else if(w < 90) status.innerText = "排版 PDF 頁面...";
            else status.innerText = "完成！";

            if(w === 100) {
                clearInterval(interval);
                setTimeout(() => {
                    showNotify("報告生成成功！");
                    progress.classList.add('hidden');
                    btn.classList.remove('hidden');
                    bar.style.width = '0%';
                }, 800);
            }
        }, 200);
    }

    function showNotify(msg) {
        const notif = document.getElementById('notification');
        document.getElementById('notif-msg').innerText = msg;
        notif.classList.remove('translate-y-20', 'opacity-0');
        setTimeout(() => notif.classList.add('translate-y-20', 'opacity-0'), 3000);
    }

    // Init
    renderGantt();
    
</script>