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

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 <html> 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 → <html>
├── 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

npm run build      # -> dist/

3.3 KiB Raw Permalink Blame History

DriverVault — Web App

Run

Features

Auth & access

Structure

Build

3.3 KiB

Raw Permalink Blame History