tajniak81
76 lines
3.3 KiB
Markdown
76 lines
3.3 KiB
Markdown
# 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 `<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
|
|
|
|
```powershell
|
|
npm run build # -> dist/
|
|
```
|