copilot-cli
copilot-cli copied to clipboard
github
Create rongshu-web
<!-- 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>