diff --git a/docs/modernization-plan.md b/docs/modernization-plan.md index 5dd3528..5dbf58c 100644 --- a/docs/modernization-plan.md +++ b/docs/modernization-plan.md @@ -42,19 +42,20 @@ graph TB end subgraph "Admin UI" - react[React 19 + TanStack] - shadcn[Shadcn/ui + Tailwind] + vue_admin[Vue 3 + PrimeVue] + tailwind[Tailwind CSS] end subgraph "lamassu-machine" tauri[Tauri 2.x Rust Core] + vue_machine[Vue 3 + Pinia] xstate[XState v5] hal[Rust HAL napi-rs] hw[Hardware Drivers] end - react -->|tRPC| fastify - tauri -->|GraphQL| fastify + vue_admin -->|tRPC| fastify + tauri -->|WebSocket| fastify fastify --> pg fastify --> otel otel --> jaeger @@ -154,16 +155,26 @@ graph LR ### Frontend (Admin UI) -> [!decision] Keep React, Modernize Patterns -> React's ecosystem dominance (190M weekly downloads) makes migration unnecessary for admin dashboards. +> [!decision] React → Vue 3 +> Unify on Vue 3 across all UIs (admin + machine) for consistency and shared code. -**Modernization:** -- [ ] Upgrade to React 19 (Server Components) -- [ ] Replace MUI with Shadcn/ui + Tailwind -- [ ] TanStack Query for data fetching -- [ ] TanStack Router for type-safe routing +| Aspect | Before (React) | After (Vue 3) | +|--------|---------------|---------------| +| Framework | React 18 | Vue 3 | +| UI Library | MUI (~300kb) | PrimeVue (tree-shake) | +| State | Zustand | Pinia | +| API | Apollo GraphQL | tRPC | +| Bundle | ~400kb | ~120kb | -#frontend #react #tailwind +**Benefits:** +- Single framework across all UIs +- Shared composables between admin and machine +- 70% bundle size reduction +- End-to-end type safety with tRPC + +See [[admin-ui-modernization]] for detailed migration plan. + +#frontend #vue #tailwind --- @@ -189,8 +200,19 @@ graph LR ### Machine UI Framework -> [!decision] Vanilla JS → Tauri 2.x -> Security-first design critical for financial kiosk applications. +> [!decision] Vanilla JS → Vue 3 + Tauri 2.x +> Vue 3 for UI consistency, Tauri for security-first kiosk shell. + +**UI Layer: Vue 3** + +| Aspect | Before | After | +|--------|--------|-------| +| Framework | Vanilla JS + jQuery | Vue 3 | +| State | Global variables | Pinia | +| Build | Babel 6 | Vite | +| File | 80KB monolith | Component-based | + +**Shell: Tauri 2.x** | Aspect | Electron | Tauri | |--------|----------|-------| @@ -199,13 +221,15 @@ graph LR | Startup | 1-2s | **<0.5s** | | Security | Full Node access | **Explicit allowlist** | -**Why Tauri for ATMs:** -- Security by default (restrictive API model) -- Lower resource usage on embedded hardware -- Rust backend integrates with hardware drivers -- 35% adoption increase in 2024 +**Benefits:** +- Same Vue 3 skills as admin UI +- Shared ui-shared package +- Tauri's Rust core for hardware drivers +- Security by default -#tauri #kiosk #security +See [[machine-ui-modernization]] for detailed migration plan. + +#tauri #vue #kiosk #security --- @@ -458,6 +482,7 @@ test('user can complete transaction', async ({ page }) => { | Node.js over Bun | Stability, ecosystem | Raw performance | | Fastify over Hono | Mature plugins | Minimal bundle | | Drizzle over Prisma | Bundle size, speed | DX features | +| Vue 3 over React | Unified UI, smaller bundle | React ecosystem | | Tauri over Electron | Security, efficiency | Ecosystem maturity | | XState over simple FSM | Visualization, debugging | Simplicity | @@ -489,5 +514,9 @@ test('user can complete transaction', async ({ page }) => { ## Related Notes - [[CLAUDE]] - Claude Code guidance +- [[admin-ui-modernization]] - Vue 3 migration for admin dashboard +- [[machine-ui-modernization]] - Vue 3 migration for kiosk UI +- [[membership-lightning-integration]] - Membership & LNbits feature +- [[lnbits-integration]] - Lightning backend integration - [[Architecture Decision Records]] - ADRs for each decision - [[NixOS Configuration]] - Production NixOS setup