Dashboard Frontend

Vue 3 + Vite frontend for device and company management.

This repository contains two independent parts:

• the Vue application
• a local Keycloak setup for development (Docker Compose)
• a Dockerized frontend service served by Nginx

1) Vue App

Requirements

• Node.js 20+
• pnpm (recommended) or npm

Install

pnpm install

Environment

Use .env / .env.local for runtime configuration.

Example:

VITE_API_BASE_URL=http://localhost:8000
VITE_CUSTOMER_API_BASE_URL=http://localhost:8080

Run

pnpm dev

The app runs on http://localhost:5173.

Build

pnpm build
pnpm preview

Run With Docker Compose

The repository root docker-compose.yml can now run the frontend too.

docker compose up --build frontend keycloak

The frontend is exposed on http://localhost:5173 by default and serves the Vite production build through Nginx. Set FRONTEND_PORT in .env if you want a different host port.

Frontend variables are injected at container startup (runtime) from environment variables, notably:

FRONTEND_PORT=5173
VITE_API_BASE_URL=http://localhost:8000
VITE_CUSTOMER_API_BASE_URL=http://localhost:8080
VITE_KEYCLOAK_URL=http://localhost:8888
VITE_KEYCLOAK_REALM=dev
VITE_KEYCLOAK_CLIENT_ID=vue-spa

Lint

pnpm lint

Project Structure

• src/main.js: app bootstrap
• src/router/index.js: routes
• src/views/pages/devices/: device pages
• src/views/pages/companies/: company pages
• src/views/pages/usersCompany/: company user pages
• src/api/: HTTP API calls
• src/layout/: shared layout components

Main Routes

• /devices -> devices.list -> ListDevice.vue
• /devices/new -> devices.new -> CreateDevice.vue
• /devices/:id -> devices.show -> ShowDevice.vue
• /devices/:id/edit -> devices.edit -> EditDevice.vue
• /companies -> companies.list -> ListCompany.vue
• /companies/new -> companies.new -> CreateCompany.vue
• /companies/:id -> companies.show -> ShowCompany.vue
• /companies/:id/edit -> companies.edit -> EditCompany.vue
• /companies/:companyId/users-company/new -> usersCompany.new -> CreateUserCompany.vue
• /users-company/:id/edit -> usersCompany.edit -> EditUserCompany.vue

Admin Area

The company and users-company pages are admin-only in the frontend.

• The Administration section appears in the sidebar only when the authenticated user resolves to role admin through:

GET /users-company/keycloak/:keycloak_id/role

• The frontend uses the Keycloak subject (sub) as the lookup key for users-company.
• If the user is not an admin, navigation to /companies is redirected to the access-denied page.

Customer Service API

The company and users-company CRUD uses the customer-service base URL:

VITE_CUSTOMER_API_BASE_URL=http://localhost:8080

This is separate from the device API base URL:

VITE_API_BASE_URL=http://localhost:8000

API Quick Checks (Companies / Users-Company)

Frontend pages:

http://localhost:5173/companies
http://localhost:5173/companies/new
http://localhost:5173/companies/<company_id>
http://localhost:5173/companies/<company_id>/edit
http://localhost:5173/companies/<company_id>/users-company/new
http://localhost:5173/users-company/<user_id>/edit

Customer service API base URL:

export CUSTOMER_API_BASE_URL="http://localhost:8080"

List companies:

curl -X GET "$CUSTOMER_API_BASE_URL/companies"

Get one company:

curl -X GET "$CUSTOMER_API_BASE_URL/companies/<company_id>"

List users for one company:

curl -X GET "$CUSTOMER_API_BASE_URL/companies/<company_id>/users-company"

Get the connected user role by Keycloak ID:

curl -X GET "$CUSTOMER_API_BASE_URL/users-company/keycloak/<keycloak_id>/role"

Users-Company Creation

When creating a company user, the frontend now prefers a dropdown sourced from:

GET /companies/:id/available-keycloak-users

Important:

• This backend endpoint is optional from the frontend point of view.
• If it is missing, fails, or returns no usable users, the form falls back to manual id_auth_kc entry.
• Edit mode still uses manual id_auth_kc, because the linked user already exists.

API Quick Checks (Devices CRUD)

Frontend pages:

http://localhost:5173/devices
http://localhost:5173/devices/new
http://localhost:5173/devices/<device_id>
http://localhost:5173/devices/<device_id>/edit

Backend API base URL:

export API_BASE_URL="http://localhost:8000"

List active devices:

curl -X GET "$API_BASE_URL/devices/"

List all devices (including deleted):

curl -X GET "$API_BASE_URL/devices/all"

Get one device:

curl -X GET "$API_BASE_URL/devices/<device_id>"

2) Keycloak (Development)

Run Keycloak locally via Docker Compose with:

• a frontend service for the Vue app
• a Keycloak service (start-dev)
• a dedicated Postgres database
• optional realm import via --import-realm

docker-compose.yml already contains these services.

Development setup only (HTTP + dev mode). Do not use as-is in production.

Requirements

• Docker Desktop running
• Docker Compose

Expected Structure

At repository root:

.
├─ docker-compose.yml
├─ .env
└─ keycloak/
   └─ import/
      └─ realm-dev.json   (optional)

Environment Variables

In root .env:

VITE_KEYCLOAK_URL=http://localhost:8888
VITE_KEYCLOAK_REALM=dev
VITE_KEYCLOAK_CLIENT_ID=vue-spa

KC_ADMIN_USER=admin
KC_ADMIN_PASSWORD=admin
KC_PORT=8888

KC_PORT is the host port. Inside the container Keycloak listens on 8080. Docker maps ${KC_PORT} -> 8080.

Start Keycloak

From repository root:

docker compose up -d keycloak-db keycloak

Follow logs:

docker compose logs -f keycloak

Access:

• Admin Console: http://localhost:${KC_PORT}/admin
• Example with KC_PORT=8888: http://localhost:8888/admin
• Credentials: ${KC_ADMIN_USER} / ${KC_ADMIN_PASSWORD}

Check exposed port:

docker compose ps

Stop / Restart

Stop:

docker compose down

Restart:

docker compose up -d

Full Reset (removes Keycloak DB data)

docker compose down -v

First connection

Please check documentation in docs/create_user_keycloak.md and follow it.