Kiến trúc tổng quan

System Architecture

Layer Responsibilities

Vue Frontend (src/)

• Hiển thị UI, thu thập user input
• Composables quản lý shared state (singleton pattern)
• Gọi gRPC server qua ConnectRPC
• Không chứa business logic

Tauri Rust (src-tauri/)

• Window management
• SQLite migrations (local DB)
• iOS-specific fixes (WKWebView content inset)
• Plugin setup (SQL, logging)

gRPC Server (server/)

• Toàn bộ business logic
• JWT authentication (per-service interceptor)
• CRUD operations qua sqlx → SQLite
• AI features (parse spending text)
• Domain logic trong domain/*.rs, service layer trong services/*.rs

Auth Flow

Data Flow

User Input → Vue Component → Composable → gRPC Client → Server → DB
                                                          ↓
User sees  ← Vue Component ← Composable ← gRPC Response ←

Composables đóng vai trò boundary layer:

• Gọi gRPC client với proto types
• Map response về internal TypeScript types
• Quản lý reactive state (Vue ref())

Proto Type Conversion

Hướng	Conversion	Ví dụ
Đọc (server → client)	Number(bigint)	Number(res.config.totalCash)
Ghi (client → server)	BigInt(number)	BigInt(amount)
Field naming	camelCase → snake_case	totalCash → total_cash

int64 / bigint

Proto int64 trở thành bigint trong TypeScript. Phải convert khi đọc/ghi. Quên convert sẽ gây runtime error.