Add Vue 3 migration plan for admin UI
Migrate from React 18 + MUI to Vue 3 for consistency with machine UI: - PrimeVue for components (tree-shakeable vs MUI's 300kb) - tRPC replacing Apollo GraphQL (~5kb vs ~50kb) - Pinia for state (same as machine UI) - Shared ui-shared package for common components Benefits: - Single framework across all UIs - ~70% bundle size reduction (400kb → 120kb) - End-to-end type safety with tRPC - Shared composables between admin and machine Includes: - Complete project structure - PrimeVue integration with Tailwind - tRPC client setup - Passkey authentication flow - 4-phase migration strategy Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Patrick Mulligan
parent
775c847c23
commit
efddb0db5f
1 changed files with 957 additions and 0 deletions
957
docs/features/admin-ui-modernization.md
Normal file
957
docs/features/admin-ui-modernization.md
Normal file
|
|
@ -0,0 +1,957 @@
|
|||
---
|
||||
title: Admin UI Modernization
|
||||
created: 2026-01-22
|
||||
updated: 2026-01-22
|
||||
tags:
|
||||
- feature
|
||||
- vue
|
||||
- admin
|
||||
- ui
|
||||
- refactor
|
||||
status: planning
|
||||
priority: high
|
||||
---
|
||||
|
||||
# Admin UI Modernization
|
||||
|
||||
> [!abstract] Summary
|
||||
> Migrate the admin dashboard from **React 18 + MUI** to **Vue 3** for consistency with the machine UI, using PrimeVue for components and tRPC for type-safe API communication.
|
||||
|
||||
## Quick Links
|
||||
|
||||
- [[#Current State]]
|
||||
- [[#Why Unify on Vue]]
|
||||
- [[#Architecture]]
|
||||
- [[#Migration Strategy]]
|
||||
- [[#Implementation]]
|
||||
|
||||
---
|
||||
|
||||
## Current State
|
||||
|
||||
### Existing Tech Stack
|
||||
|
||||
```
|
||||
packages/admin-ui/
|
||||
├── src/
|
||||
│ ├── pages/ # React page components
|
||||
│ ├── components/ # Reusable React components
|
||||
│ ├── hooks/ # Custom React hooks
|
||||
│ └── ...
|
||||
├── package.json # React 18, MUI, Apollo Client
|
||||
└── vite.config.js
|
||||
```
|
||||
|
||||
| Component | Current | Notes |
|
||||
|-----------|---------|-------|
|
||||
| Framework | React 18.3 | Functional components + hooks |
|
||||
| UI Library | MUI v7.1 | Heavy bundle (~300kb) |
|
||||
| State | Zustand | Lightweight |
|
||||
| API Client | Apollo Client | GraphQL |
|
||||
| Styling | Tailwind CSS v4 | Already modern |
|
||||
| Build | Vite + SWC | Already modern |
|
||||
| Charts | D3 | Keep |
|
||||
| Tables | Material React Table | Replace |
|
||||
|
||||
### Problems
|
||||
|
||||
> [!warning] Issues with Current Setup
|
||||
|
||||
1. **Two frameworks** - React (admin) + Vanilla JS (machine) = different mental models
|
||||
2. **Heavy bundle** - MUI adds ~300kb to bundle
|
||||
3. **GraphQL complexity** - Apollo Client is powerful but heavy
|
||||
4. **Inconsistent patterns** - Different state management approaches
|
||||
5. **Developer context switching** - Between React and future Vue machine UI
|
||||
|
||||
#currentstate
|
||||
|
||||
---
|
||||
|
||||
## Why Unify on Vue
|
||||
|
||||
> [!decision] Single Framework Strategy
|
||||
|
||||
### Benefits of Vue Everywhere
|
||||
|
||||
| Aspect | Two Frameworks | Single Framework (Vue) |
|
||||
|--------|---------------|------------------------|
|
||||
| Learning curve | High | Lower |
|
||||
| Code sharing | None | Components, composables |
|
||||
| Hiring | React + Vue devs | Vue devs only |
|
||||
| Maintenance | 2x patterns | 1x patterns |
|
||||
| Bundle optimization | Separate | Shared chunks possible |
|
||||
|
||||
### Vue 3 vs React 19 for Admin
|
||||
|
||||
| Feature | Vue 3 | React 19 |
|
||||
|---------|-------|----------|
|
||||
| Bundle size | ~33kb | ~42kb |
|
||||
| DevTools | Excellent | Excellent |
|
||||
| TypeScript | First-class | First-class |
|
||||
| Learning curve | Lower | Medium |
|
||||
| Component syntax | SFC (cleaner) | JSX |
|
||||
| State management | Pinia (simpler) | Context/Zustand |
|
||||
|
||||
> [!tip] Strategic Alignment
|
||||
> With machine UI moving to Vue 3, unifying admin UI reduces cognitive load and enables shared utilities.
|
||||
|
||||
#vue #consistency
|
||||
|
||||
---
|
||||
|
||||
## Architecture
|
||||
|
||||
### Target Stack
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ Admin Dashboard │
|
||||
├─────────────────────────────────────────────────────────┤
|
||||
│ Vue 3 + TypeScript │
|
||||
│ ┌─────────────────────────────────────────────────────┐│
|
||||
│ │ Pages (Vue Router) ││
|
||||
│ │ ├── DashboardPage.vue ││
|
||||
│ │ ├── TransactionsPage.vue ││
|
||||
│ │ ├── MachinesPage.vue ││
|
||||
│ │ ├── CustomersPage.vue ││
|
||||
│ │ ├── MembershipsPage.vue (new) ││
|
||||
│ │ └── SettingsPage.vue ││
|
||||
│ └─────────────────────────────────────────────────────┘│
|
||||
│ ┌─────────────────────────────────────────────────────┐│
|
||||
│ │ UI Components (PrimeVue) ││
|
||||
│ │ ├── DataTable, Charts, Forms ││
|
||||
│ │ └── Custom components ││
|
||||
│ └─────────────────────────────────────────────────────┘│
|
||||
│ ┌─────────────────────────────────────────────────────┐│
|
||||
│ │ State (Pinia) ││
|
||||
│ │ ├── useAuthStore ││
|
||||
│ │ ├── useMachinesStore ││
|
||||
│ │ └── useSettingsStore ││
|
||||
│ └─────────────────────────────────────────────────────┘│
|
||||
│ ┌─────────────────────────────────────────────────────┐│
|
||||
│ │ API Layer (tRPC Client) ││
|
||||
│ │ └── Type-safe server communication ││
|
||||
│ └─────────────────────────────────────────────────────┘│
|
||||
├─────────────────────────────────────────────────────────┤
|
||||
│ Tailwind CSS v4 (keep) │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Project Structure
|
||||
|
||||
```
|
||||
packages/admin-ui/
|
||||
├── src/
|
||||
│ ├── main.ts # Entry point
|
||||
│ ├── App.vue # Root component
|
||||
│ ├── router/
|
||||
│ │ └── index.ts # Vue Router config
|
||||
│ │
|
||||
│ ├── pages/ # Route-level components
|
||||
│ │ ├── DashboardPage.vue
|
||||
│ │ ├── transactions/
|
||||
│ │ │ ├── TransactionsPage.vue
|
||||
│ │ │ └── TransactionDetailPage.vue
|
||||
│ │ ├── machines/
|
||||
│ │ │ ├── MachinesPage.vue
|
||||
│ │ │ └── MachineDetailPage.vue
|
||||
│ │ ├── customers/
|
||||
│ │ │ ├── CustomersPage.vue
|
||||
│ │ │ └── CustomerDetailPage.vue
|
||||
│ │ ├── memberships/
|
||||
│ │ │ ├── MembershipsPage.vue
|
||||
│ │ │ ├── MembershipDetailPage.vue
|
||||
│ │ │ └── TiersConfigPage.vue
|
||||
│ │ ├── settings/
|
||||
│ │ │ ├── SettingsPage.vue
|
||||
│ │ │ ├── WalletSettingsPage.vue
|
||||
│ │ │ └── LightningSettingsPage.vue
|
||||
│ │ └── auth/
|
||||
│ │ ├── LoginPage.vue
|
||||
│ │ └── SetupPasskeyPage.vue
|
||||
│ │
|
||||
│ ├── components/ # Reusable components
|
||||
│ │ ├── layout/
|
||||
│ │ │ ├── AppSidebar.vue
|
||||
│ │ │ ├── AppHeader.vue
|
||||
│ │ │ └── AppBreadcrumb.vue
|
||||
│ │ ├── common/
|
||||
│ │ │ ├── DataTable.vue # Wrapper around PrimeVue
|
||||
│ │ │ ├── StatusBadge.vue
|
||||
│ │ │ ├── CryptoAmount.vue
|
||||
│ │ │ ├── FiatAmount.vue
|
||||
│ │ │ └── DateTimeDisplay.vue
|
||||
│ │ ├── charts/
|
||||
│ │ │ ├── TransactionChart.vue
|
||||
│ │ │ ├── VolumeChart.vue
|
||||
│ │ │ └── MachineStatusChart.vue
|
||||
│ │ ├── machines/
|
||||
│ │ │ ├── MachineCard.vue
|
||||
│ │ │ ├── MachineStatusIndicator.vue
|
||||
│ │ │ └── CassetteStatus.vue
|
||||
│ │ └── memberships/
|
||||
│ │ ├── MembershipCard.vue
|
||||
│ │ ├── TierBadge.vue
|
||||
│ │ └── QRCodeGenerator.vue
|
||||
│ │
|
||||
│ ├── stores/ # Pinia stores
|
||||
│ │ ├── auth.ts
|
||||
│ │ ├── machines.ts
|
||||
│ │ ├── transactions.ts
|
||||
│ │ ├── customers.ts
|
||||
│ │ ├── memberships.ts
|
||||
│ │ └── settings.ts
|
||||
│ │
|
||||
│ ├── composables/ # Reusable logic
|
||||
│ │ ├── useAuth.ts
|
||||
│ │ ├── usePagination.ts
|
||||
│ │ ├── useFilters.ts
|
||||
│ │ ├── useExport.ts
|
||||
│ │ └── useNotifications.ts
|
||||
│ │
|
||||
│ ├── api/ # tRPC client
|
||||
│ │ ├── client.ts
|
||||
│ │ └── types.ts # Shared types from server
|
||||
│ │
|
||||
│ ├── types/ # TypeScript types
|
||||
│ │ ├── machine.ts
|
||||
│ │ ├── transaction.ts
|
||||
│ │ ├── customer.ts
|
||||
│ │ └── membership.ts
|
||||
│ │
|
||||
│ ├── utils/ # Utility functions
|
||||
│ │ ├── formatters.ts
|
||||
│ │ ├── validators.ts
|
||||
│ │ └── constants.ts
|
||||
│ │
|
||||
│ └── styles/ # Global styles
|
||||
│ ├── main.css # Tailwind imports
|
||||
│ └── primevue-theme.css # PrimeVue customization
|
||||
│
|
||||
├── index.html
|
||||
├── vite.config.ts
|
||||
├── tsconfig.json
|
||||
├── tailwind.config.ts
|
||||
└── package.json
|
||||
```
|
||||
|
||||
#architecture #structure
|
||||
|
||||
---
|
||||
|
||||
## UI Component Library
|
||||
|
||||
### PrimeVue vs Alternatives
|
||||
|
||||
| Library | Bundle | Components | Vue 3 | Tailwind |
|
||||
|---------|--------|------------|-------|----------|
|
||||
| **PrimeVue** | Tree-shakeable | 90+ | Yes | Yes |
|
||||
| Naive UI | ~80kb | 80+ | Yes | Manual |
|
||||
| Vuetify 3 | ~300kb | 80+ | Yes | No |
|
||||
| Element Plus | ~200kb | 70+ | Yes | No |
|
||||
| Headless UI | ~10kb | 10 | Yes | Yes |
|
||||
|
||||
> [!decision] PrimeVue
|
||||
> - **Tree-shakeable** - Only import what you use
|
||||
> - **Tailwind integration** - PrimeVue + Tailwind preset
|
||||
> - **Rich data table** - Critical for admin dashboards
|
||||
> - **Chart components** - Built-in Chart.js integration
|
||||
> - **Accessibility** - WCAG compliant
|
||||
> - **Unstyled mode** - Full control with Tailwind
|
||||
|
||||
### PrimeVue Setup
|
||||
|
||||
```typescript
|
||||
// src/main.ts
|
||||
import { createApp } from 'vue'
|
||||
import PrimeVue from 'primevue/config'
|
||||
import Aura from '@primeuix/themes/aura'
|
||||
import ToastService from 'primevue/toastservice'
|
||||
import ConfirmationService from 'primevue/confirmationservice'
|
||||
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import { pinia } from './stores'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(PrimeVue, {
|
||||
theme: {
|
||||
preset: Aura,
|
||||
options: {
|
||||
darkModeSelector: '.dark',
|
||||
cssLayer: {
|
||||
name: 'primevue',
|
||||
order: 'tailwind-base, primevue, tailwind-utilities',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
app.use(ToastService)
|
||||
app.use(ConfirmationService)
|
||||
app.use(router)
|
||||
app.use(pinia)
|
||||
|
||||
app.mount('#app')
|
||||
```
|
||||
|
||||
### Component Examples
|
||||
|
||||
#### Data Table Wrapper
|
||||
|
||||
```vue
|
||||
<!-- src/components/common/DataTable.vue -->
|
||||
<script setup lang="ts" generic="T">
|
||||
import DataTable from 'primevue/datatable'
|
||||
import Column from 'primevue/column'
|
||||
import InputText from 'primevue/inputtext'
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
interface Props {
|
||||
data: T[]
|
||||
columns: ColumnDef<T>[]
|
||||
loading?: boolean
|
||||
paginator?: boolean
|
||||
rows?: number
|
||||
globalFilter?: boolean
|
||||
}
|
||||
|
||||
interface ColumnDef<T> {
|
||||
field: keyof T
|
||||
header: string
|
||||
sortable?: boolean
|
||||
filterable?: boolean
|
||||
body?: (row: T) => VNode
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
loading: false,
|
||||
paginator: true,
|
||||
rows: 20,
|
||||
globalFilter: true,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
rowClick: [row: T]
|
||||
rowSelect: [rows: T[]]
|
||||
}>()
|
||||
|
||||
const filters = ref({
|
||||
global: { value: null, matchMode: 'contains' },
|
||||
})
|
||||
|
||||
const selectedRows = ref<T[]>([])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card">
|
||||
<div v-if="globalFilter" class="flex justify-end mb-4">
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
<InputText
|
||||
v-model="filters.global.value"
|
||||
placeholder="Search..."
|
||||
class="w-64"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
:value="data"
|
||||
:loading="loading"
|
||||
:paginator="paginator"
|
||||
:rows="rows"
|
||||
:filters="filters"
|
||||
v-model:selection="selectedRows"
|
||||
dataKey="id"
|
||||
stripedRows
|
||||
showGridlines
|
||||
class="p-datatable-sm"
|
||||
@row-click="(e) => emit('rowClick', e.data)"
|
||||
>
|
||||
<Column
|
||||
v-for="col in columns"
|
||||
:key="String(col.field)"
|
||||
:field="String(col.field)"
|
||||
:header="col.header"
|
||||
:sortable="col.sortable"
|
||||
>
|
||||
<template v-if="col.body" #body="{ data: row }">
|
||||
<component :is="col.body(row)" />
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
#### Transaction List Page
|
||||
|
||||
```vue
|
||||
<!-- src/pages/transactions/TransactionsPage.vue -->
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { useTransactionsStore } from '@/stores/transactions'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import DataTable from '@/components/common/DataTable.vue'
|
||||
import StatusBadge from '@/components/common/StatusBadge.vue'
|
||||
import CryptoAmount from '@/components/common/CryptoAmount.vue'
|
||||
import FiatAmount from '@/components/common/FiatAmount.vue'
|
||||
import DateTimeDisplay from '@/components/common/DateTimeDisplay.vue'
|
||||
|
||||
const store = useTransactionsStore()
|
||||
const { transactions, loading } = storeToRefs(store)
|
||||
|
||||
const columns = [
|
||||
{ field: 'id', header: 'ID', sortable: true },
|
||||
{
|
||||
field: 'status',
|
||||
header: 'Status',
|
||||
sortable: true,
|
||||
body: (row) => h(StatusBadge, { status: row.status }),
|
||||
},
|
||||
{ field: 'direction', header: 'Type', sortable: true },
|
||||
{
|
||||
field: 'fiatAmount',
|
||||
header: 'Fiat',
|
||||
sortable: true,
|
||||
body: (row) => h(FiatAmount, { amount: row.fiatAmount, currency: row.fiatCode }),
|
||||
},
|
||||
{
|
||||
field: 'cryptoAmount',
|
||||
header: 'Crypto',
|
||||
sortable: true,
|
||||
body: (row) => h(CryptoAmount, { amount: row.cryptoAmount, coin: row.cryptoCode }),
|
||||
},
|
||||
{
|
||||
field: 'created',
|
||||
header: 'Date',
|
||||
sortable: true,
|
||||
body: (row) => h(DateTimeDisplay, { date: row.created }),
|
||||
},
|
||||
]
|
||||
|
||||
function handleRowClick(transaction: Transaction) {
|
||||
router.push(`/transactions/${transaction.id}`)
|
||||
}
|
||||
|
||||
// Load on mount
|
||||
onMounted(() => store.fetchTransactions())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h1 class="text-2xl font-bold">Transactions</h1>
|
||||
<div class="flex gap-2">
|
||||
<Button label="Export CSV" icon="pi pi-download" outlined />
|
||||
<Button label="Refresh" icon="pi pi-refresh" @click="store.fetchTransactions" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
:data="transactions"
|
||||
:columns="columns"
|
||||
:loading="loading"
|
||||
@row-click="handleRowClick"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
#primevue #components
|
||||
|
||||
---
|
||||
|
||||
## API Layer: tRPC
|
||||
|
||||
### Why tRPC over GraphQL
|
||||
|
||||
| Aspect | GraphQL (Apollo) | tRPC |
|
||||
|--------|------------------|------|
|
||||
| Bundle size | ~50kb | ~5kb |
|
||||
| Type safety | Codegen required | Automatic |
|
||||
| Learning curve | Higher | Lower |
|
||||
| Caching | Built-in | TanStack Query |
|
||||
| Boilerplate | Schema + resolvers | Just functions |
|
||||
|
||||
> [!decision] tRPC for Admin API
|
||||
> Since both server and admin-ui are TypeScript, tRPC provides end-to-end type safety without code generation.
|
||||
|
||||
### tRPC Client Setup
|
||||
|
||||
```typescript
|
||||
// src/api/client.ts
|
||||
import { createTRPCClient, httpBatchLink } from '@trpc/client'
|
||||
import type { AppRouter } from '@lamassu/server/trpc'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
export const trpc = createTRPCClient<AppRouter>({
|
||||
links: [
|
||||
httpBatchLink({
|
||||
url: `${import.meta.env.VITE_API_URL}/trpc`,
|
||||
headers() {
|
||||
const auth = useAuthStore()
|
||||
return {
|
||||
Authorization: auth.token ? `Bearer ${auth.token}` : '',
|
||||
}
|
||||
},
|
||||
}),
|
||||
],
|
||||
})
|
||||
```
|
||||
|
||||
### Using tRPC in Stores
|
||||
|
||||
```typescript
|
||||
// src/stores/memberships.ts
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
import { trpc } from '@/api/client'
|
||||
import type { Membership, CreateMembershipInput } from '@/types/membership'
|
||||
|
||||
export const useMembershipsStore = defineStore('memberships', () => {
|
||||
const memberships = ref<Membership[]>([])
|
||||
const loading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
async function fetchMemberships(filters?: { tierId?: string; search?: string }) {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
// Fully typed! IDE knows exact return type
|
||||
memberships.value = await trpc.membership.list.query(filters)
|
||||
} catch (e) {
|
||||
error.value = e instanceof Error ? e.message : 'Unknown error'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function createMembership(input: CreateMembershipInput) {
|
||||
// TypeScript ensures input matches server expectations
|
||||
const newMembership = await trpc.membership.create.mutate(input)
|
||||
memberships.value.push(newMembership)
|
||||
return newMembership
|
||||
}
|
||||
|
||||
async function deleteMembership(id: string) {
|
||||
await trpc.membership.delete.mutate({ id })
|
||||
memberships.value = memberships.value.filter(m => m.id !== id)
|
||||
}
|
||||
|
||||
return {
|
||||
memberships,
|
||||
loading,
|
||||
error,
|
||||
fetchMemberships,
|
||||
createMembership,
|
||||
deleteMembership,
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### TanStack Query Integration (Optional)
|
||||
|
||||
```typescript
|
||||
// For more advanced caching/refetching
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/vue-query'
|
||||
import { trpc } from '@/api/client'
|
||||
|
||||
export function useMemberships(filters?: { tierId?: string }) {
|
||||
return useQuery({
|
||||
queryKey: ['memberships', filters],
|
||||
queryFn: () => trpc.membership.list.query(filters),
|
||||
})
|
||||
}
|
||||
|
||||
export function useCreateMembership() {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
return useMutation({
|
||||
mutationFn: (input: CreateMembershipInput) =>
|
||||
trpc.membership.create.mutate(input),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['memberships'] })
|
||||
},
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
#trpc #api
|
||||
|
||||
---
|
||||
|
||||
## Authentication
|
||||
|
||||
### Passkey-First Auth Flow
|
||||
|
||||
```vue
|
||||
<!-- src/pages/auth/LoginPage.vue -->
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { startAuthentication } from '@simplewebauthn/browser'
|
||||
|
||||
const router = useRouter()
|
||||
const auth = useAuthStore()
|
||||
|
||||
const email = ref('')
|
||||
const loading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
async function handlePasskeyLogin() {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
// Get challenge from server
|
||||
const options = await trpc.auth.getPasskeyOptions.query({ email: email.value })
|
||||
|
||||
// Trigger browser passkey UI
|
||||
const credential = await startAuthentication(options)
|
||||
|
||||
// Verify with server
|
||||
const result = await trpc.auth.verifyPasskey.mutate({
|
||||
email: email.value,
|
||||
credential,
|
||||
})
|
||||
|
||||
auth.setToken(result.token)
|
||||
auth.setUser(result.user)
|
||||
|
||||
router.push('/dashboard')
|
||||
} catch (e) {
|
||||
error.value = e instanceof Error ? e.message : 'Authentication failed'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
|
||||
<Card class="w-full max-w-md">
|
||||
<template #title>
|
||||
<div class="text-center">
|
||||
<img src="/logo.svg" alt="Lamassu" class="h-12 mx-auto mb-4" />
|
||||
<h1 class="text-2xl font-bold">Admin Login</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #content>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium mb-1">Email</label>
|
||||
<InputText
|
||||
id="email"
|
||||
v-model="email"
|
||||
type="email"
|
||||
class="w-full"
|
||||
placeholder="admin@example.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Message v-if="error" severity="error" :closable="false">
|
||||
{{ error }}
|
||||
</Message>
|
||||
|
||||
<Button
|
||||
label="Sign in with Passkey"
|
||||
icon="pi pi-key"
|
||||
class="w-full"
|
||||
:loading="loading"
|
||||
@click="handlePasskeyLogin"
|
||||
/>
|
||||
|
||||
<Divider align="center">or</Divider>
|
||||
|
||||
<Button
|
||||
label="Sign in with Password"
|
||||
icon="pi pi-lock"
|
||||
class="w-full"
|
||||
severity="secondary"
|
||||
outlined
|
||||
@click="router.push('/auth/password')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
#auth #passkey
|
||||
|
||||
---
|
||||
|
||||
## Shared Code with Machine UI
|
||||
|
||||
### Shared Package Structure
|
||||
|
||||
```
|
||||
packages/
|
||||
├── admin-ui/ # Vue 3 admin dashboard
|
||||
├── machine-ui/ # Vue 3 kiosk UI (moved from lamassu-machine)
|
||||
└── ui-shared/ # Shared Vue components & utilities
|
||||
├── src/
|
||||
│ ├── components/
|
||||
│ │ ├── QRCode.vue
|
||||
│ │ ├── CryptoIcon.vue
|
||||
│ │ └── LoadingSpinner.vue
|
||||
│ ├── composables/
|
||||
│ │ ├── useCrypto.ts
|
||||
│ │ ├── useFormatters.ts
|
||||
│ │ └── useValidators.ts
|
||||
│ ├── types/
|
||||
│ │ ├── coin.ts
|
||||
│ │ ├── transaction.ts
|
||||
│ │ └── membership.ts
|
||||
│ └── index.ts
|
||||
└── package.json
|
||||
```
|
||||
|
||||
### Shared Composables
|
||||
|
||||
```typescript
|
||||
// packages/ui-shared/src/composables/useFormatters.ts
|
||||
import { computed } from 'vue'
|
||||
|
||||
export function useFormatters(locale = 'en-US') {
|
||||
const formatFiat = (amount: number, currency: string) => {
|
||||
return new Intl.NumberFormat(locale, {
|
||||
style: 'currency',
|
||||
currency,
|
||||
}).format(amount)
|
||||
}
|
||||
|
||||
const formatCrypto = (sats: number, coin: string) => {
|
||||
if (coin === 'BTC') {
|
||||
return `${(sats / 100_000_000).toFixed(8)} BTC`
|
||||
}
|
||||
return `${sats} sats`
|
||||
}
|
||||
|
||||
const formatDate = (date: Date | string) => {
|
||||
return new Intl.DateTimeFormat(locale, {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'short',
|
||||
}).format(new Date(date))
|
||||
}
|
||||
|
||||
return {
|
||||
formatFiat,
|
||||
formatCrypto,
|
||||
formatDate,
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```typescript
|
||||
// Usage in both admin-ui and machine-ui
|
||||
import { useFormatters } from '@lamassu/ui-shared'
|
||||
|
||||
const { formatFiat, formatCrypto } = useFormatters()
|
||||
```
|
||||
|
||||
#shared #monorepo
|
||||
|
||||
---
|
||||
|
||||
## Migration Strategy
|
||||
|
||||
### Phase 1: Setup & Infrastructure
|
||||
|
||||
> [!todo] Phase 1 Tasks
|
||||
|
||||
- [ ] Create new Vue 3 project in `packages/admin-ui-v2/`
|
||||
- [ ] Set up Vite + Vue + TypeScript
|
||||
- [ ] Configure PrimeVue with Tailwind
|
||||
- [ ] Set up Vue Router with auth guards
|
||||
- [ ] Set up Pinia stores
|
||||
- [ ] Configure tRPC client
|
||||
- [ ] Create layout components (Sidebar, Header)
|
||||
|
||||
### Phase 2: Core Pages Migration
|
||||
|
||||
> [!todo] Phase 2 Tasks
|
||||
|
||||
Migrate pages in order of complexity:
|
||||
|
||||
1. [ ] Login / Auth pages
|
||||
2. [ ] Dashboard (overview)
|
||||
3. [ ] Machines list & detail
|
||||
4. [ ] Transactions list & detail
|
||||
5. [ ] Customers list & detail
|
||||
6. [ ] Settings pages
|
||||
|
||||
### Phase 3: New Features
|
||||
|
||||
> [!todo] Phase 3 Tasks
|
||||
|
||||
- [ ] Memberships management (new)
|
||||
- [ ] Discount tiers configuration (new)
|
||||
- [ ] Lightning/LNbits settings (new)
|
||||
- [ ] Enhanced analytics dashboard
|
||||
|
||||
### Phase 4: Polish & Cutover
|
||||
|
||||
> [!todo] Phase 4 Tasks
|
||||
|
||||
- [ ] Dark mode support
|
||||
- [ ] Responsive design review
|
||||
- [ ] Accessibility audit
|
||||
- [ ] Performance optimization
|
||||
- [ ] E2E tests with Playwright
|
||||
- [ ] Remove old React admin-ui
|
||||
- [ ] Update deployment configs
|
||||
|
||||
#migration #phases
|
||||
|
||||
---
|
||||
|
||||
## Build & Deployment
|
||||
|
||||
### Vite Config
|
||||
|
||||
```typescript
|
||||
// packages/admin-ui/vite.config.ts
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import { resolve } from 'path'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
import { PrimeVueResolver } from '@primevue/auto-import-resolver'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
Components({
|
||||
resolvers: [PrimeVueResolver()],
|
||||
}),
|
||||
],
|
||||
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve(__dirname, 'src'),
|
||||
},
|
||||
},
|
||||
|
||||
build: {
|
||||
target: 'es2022',
|
||||
outDir: 'dist',
|
||||
sourcemap: true,
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks: {
|
||||
vue: ['vue', 'vue-router', 'pinia'],
|
||||
primevue: ['primevue'],
|
||||
charts: ['chart.js', 'vue-chartjs'],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
server: {
|
||||
port: 3001,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:3000',
|
||||
changeOrigin: true,
|
||||
},
|
||||
'/trpc': {
|
||||
target: 'http://localhost:3000',
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
### Package.json
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "@lamassu/admin-ui",
|
||||
"version": "2.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc --noEmit && vite build",
|
||||
"preview": "vite preview",
|
||||
"test": "vitest",
|
||||
"test:e2e": "playwright test",
|
||||
"lint": "eslint src --ext .vue,.ts --fix",
|
||||
"typecheck": "vue-tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.5.0",
|
||||
"vue-router": "^4.4.0",
|
||||
"pinia": "^2.2.0",
|
||||
"@primevue/themes": "^4.2.0",
|
||||
"primevue": "^4.2.0",
|
||||
"primeicons": "^7.0.0",
|
||||
"@trpc/client": "^11.0.0",
|
||||
"@tanstack/vue-query": "^5.60.0",
|
||||
"@vueuse/core": "^11.0.0",
|
||||
"@simplewebauthn/browser": "^10.0.0",
|
||||
"chart.js": "^4.4.0",
|
||||
"vue-chartjs": "^5.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.1.0",
|
||||
"vite": "^6.0.0",
|
||||
"typescript": "^5.6.0",
|
||||
"vue-tsc": "^2.1.0",
|
||||
"vitest": "^2.1.0",
|
||||
"@vue/test-utils": "^2.4.0",
|
||||
"@playwright/test": "^1.48.0",
|
||||
"tailwindcss": "^4.0.0",
|
||||
"autoprefixer": "^10.4.0",
|
||||
"eslint": "^9.14.0",
|
||||
"eslint-plugin-vue": "^9.30.0",
|
||||
"unplugin-vue-components": "^0.27.0",
|
||||
"@primevue/auto-import-resolver": "^4.2.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#build #deployment
|
||||
|
||||
---
|
||||
|
||||
## Comparison Summary
|
||||
|
||||
| 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 |
|
||||
| Styling | Tailwind | Tailwind (keep) |
|
||||
| Build | Vite | Vite (keep) |
|
||||
| Types | TypeScript | TypeScript (keep) |
|
||||
| Machine UI | Different (Vanilla) | Same (Vue 3) |
|
||||
|
||||
### Bundle Size Targets
|
||||
|
||||
| Chunk | Before | After |
|
||||
|-------|--------|-------|
|
||||
| Framework | ~42kb | ~33kb |
|
||||
| UI Library | ~300kb | ~80kb* |
|
||||
| API Client | ~50kb | ~5kb |
|
||||
| **Total** | **~400kb** | **~120kb** |
|
||||
|
||||
*PrimeVue with tree-shaking, only used components
|
||||
|
||||
#comparison #summary
|
||||
|
||||
---
|
||||
|
||||
## Related Documents
|
||||
|
||||
- [[machine-ui-modernization]] - Kiosk UI Vue migration
|
||||
- [[modernization-plan]] - Overall modernization roadmap
|
||||
- [[membership-lightning-integration]] - New membership feature
|
||||
- [[lnbits-integration]] - Lightning backend
|
||||
Loading…
Add table
Add a link
Reference in a new issue