Initial commit

2026-07-06 08:50:52 +02:00
commit ba3f227361
153 changed files with 18116 additions and 0 deletions
@@ -0,0 +1,75 @@
+# 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/
+```