# DriverVault — Web App Vue 3 + Vite + Tailwind CSS v4 maintenance tracker. Talks **only** to the API Server (never to PocketBase directly). Built from `Car Service.xlsx`. Plain JS (not TS). Vue calls the central API Server directly — there is no separate web backend. ## Run ```powershell npm install npm run dev # http://localhost:5173 ``` The dev server proxies `/api/*` to the API Server (default `http://localhost:8080`, override with `VITE_API_TARGET`), so the client uses same-origin relative URLs and avoids CORS. The **API Server must be running** — see `../API Server/README.md`. The dev server also listens on all interfaces (`host: true`) so it's reachable on the LAN (e.g. `http://10.2.1.101:5173`). At runtime, users can override the API base URL from the login screen's **Server settings** (persisted in `localStorage` as `cc_server_url`); resolution order is that override → `VITE_API_BASE` → `/api`. ## Features - **Dashboard** — one card per car: last service, odometer, next-due date/km, and a status badge (OK / due soon ≤30d / overdue) from the Excel formulas. Add a car; shared cars are labelled and gated by your access level. - **Car detail** — full service history (date, km, computed next date/km, and the changed-parts flags) plus the per-car parts catalog and all car spec fields (engine / transmission / differential oil, brake fluid, coolant, VIN, …). Add/edit/delete service records, parts, and the car; **share** the car with other users (read/write, owner only). Edit/delete controls are hidden for read-only shares. - **Settings** — account (name / email verification / password), appearance (theme light/dark/system, locale, date format, font size), profile (avatar, bio), data **export/import**, active sessions with remote logout, and the account-deletion state machine. - **Admin** — `/admin` user management (list / create / role / reset password / delete), gated by the admin role via a router guard + nav link. - **Theming** — light/dark/system app-wide (Tailwind v4 class strategy); `prefs.js` toggles `.dark` on `` and applies the saved theme/locale/date/font. ## Auth & access Login gets a JWT from the API Server (stored client-side) and creates a server session. `auth.js` exposes `isAdmin` and the current profile; the router guards `public` / `admin` routes. Cars are per-user (owned + shared), and the UI mirrors the server's read / write / owner access levels. ## Structure ``` src/ ├── main.js # app bootstrap ├── router.js # /login, / (dashboard), /cars/:id, /settings, /admin ├── api.js # the only place that calls the API Server (base URL resolution) ├── auth.js # session/profile state, isAdmin ├── prefs.js # theme/locale/date/font preferences → ├── lib/format.js # date/km formatting + next-service status badges ├── style.css # Tailwind v4 entry (+ dark custom-variant) ├── App.vue # layout shell + nav (Admin link when admin) ├── components/ │ ├── Modal.vue CarFormModal.vue ServiceFormModal.vue PartFormModal.vue ShareModal.vue └── views/ ├── Login.vue Dashboard.vue CarDetail.vue └── Settings.vue AdminUsers.vue ``` ## Build ```powershell npm run build # -> dist/ ```