# Finance Dashboard — Claude Code Context

## Project
Flask-based personal finance dashboard at `/home/debian/Projects/finance-dashboard/`

## Stack
- Backend: Flask (app.py, port 38423)
- Frontend: Single HTML template at `templates/index.html`
- DB: SQLite at `~/.hermes/profiles/finance-butler/finance.db`
- Systemd service: `finance-dashboard`

## Task: Full UI Redesign

Rebuild `templates/index.html` into a beautiful, modern dashboard with:

### Design Requirements
- **Dark theme** — similar to current (#0f1117 bg) but more polished
- **Tailwind CSS** via CDN (no build step)
- **Chart.js** via CDN for visualizations
- **Mobile-first RWD** — must work on phone

### Feature Requirements

1. **Header** — "💰 Finance Butler" + last update time + 儀表板連結按鈕

2. **Quick Add Expense** (top, always visible)
   - Amount input (number, large font)
   - Category select (grouped by parent — populated from /api/categories)
   - Account select (現金, 玉山拍兔信用卡, Street Voice 信用卡, 悠遊付, LINE Pay, 轉帳)
   - Note input
   - Date picker (default today)
   - Submit button → POST /api/add_expense → auto refresh data

3. **Summary Cards Row** (responsive grid)
   - 💰 本月支出 (big number, with month label)
   - 📈 投資損益 (big number, green/red, with total market value + return %)
   - 🏦 總資產 (market value + estimated savings if available)

4. **Charts Section**
   - Left: Doughnut chart — 本月支出 by parent category (食/衣/住/行/育/樂/醫/其他)
   - Right: Bar chart — 近6個月支出趨勢 (monthly totals)

5. **Holdings Table** — 持股明細
   - Columns: 股票名稱, 股數, 現價, 漲跌, 漲跌幅%, 市值
   - Color: orange/red for gains (▲), green for losses (▼) — Taiwan convention
   - Footer row: 總計 market value
   - Show "今日股價未更新" when no price data

6. **Recent Expenses Table** — 本月明細
   - Columns: 日期, 分類 (parent + category), 備註, 金額, 帳戶
   - Max 50 rows, sorted by date desc
   - Smooth entry animation when new expense added

### UX Polish
- Loading skeleton states while fetching
- Toast notification "✓ 已記帳！NT$XX" after adding expense
- Auto-refresh every 5 minutes
- Smooth transitions on data update
- Error states (no data, API failure)

## API Endpoints (already working)
- GET /api/summary — returns: display_month, month_total, by_parent[], months_trend[], holdings[], total_market_value, total_cost
- GET /api/expenses?month=current — returns expense rows
- POST /api/add_expense — body: {amount, category, account, note, date, month}
- GET /api/categories — returns: [{subcategory, parent, type}]

## Important
- Keep app.py UNCHANGED — only modify templates/index.html
- Use inline CSS/JS (no separate files needed)
- Test that the page loads and API calls work after changes
- After finishing, restart the systemd service: `sudo systemctl restart finance-dashboard`