Overview

Overview (C4 Component)

Routing

Aspect	Explanation
Router instance	createRouter() + createWebHistory() with linkActiveClass: 'active'.
Structural decomposition	One file (src/router/index.js) centralises • route table definition • global navigation guard • export of the router instance.
Dynamic root redirect	The / route computes the target at run-time: if role === 'PROVIDER' → /providers/{opsCode} else `/home``.
Public vs. protected routes	Routes carry meta.requiresAuth. The guard checks authStore.accessToken and authStore.user.
Role-based access control (RBAC)	Each protected route lists allowed roles in meta.roles. The guard compares the user’s first role (roles[0]) and rejects with a root redirect otherwise.
Login / Register bypass	If an authenticated user navigates to /login or /register, the guard forwards them to their role landing page.
Logout edge case	authStore.isLoggingOut short-circuits the guard to avoid redirect loops during sign-out.
Lazy evaluation of params	Dynamic segments for business identifiers /rfq/:year/:sequence /providers/:operationalCode/sngs/edit/:id Pass props: true where the page expects typed params.
Wildcard fallback	/:pathMatch(.*)* → /login ensures unknown URLs go to the login page.

Site Structure

Route name	Path pattern	Allowed roles (checked in meta.roles)	Responsibility / key behaviour
Root	/ (redirect)	n/a	Computes landing page at run-time: PROVIDER → /providers/{opsCode}; internal users → /home.
LoginPage	/login	Public	Email + password sign-in, loads user profile & pushes role dashboard. Bounces authenticated users away.
RegisterPage	/register	Public	Self-registration; optional provider flag + company name. Shows validation and “user exists” 409 handling.
HomePage	/home	ES_ADMIN, ES_USER	Internal dashboard → provider discovery & RFQ creation wizard. Includes rich filter panel, Pinia filter persistence, base64-encoded tech-spec search.
AdminPanelPage	/admin	ES_ADMIN	Back-office for pending user registrations. Fetches users & provider codes; embeds UsersTable.
EditProfile	/edit-profile	Authenticated	Allows any logged-in user to change password (client-side validation via passwordService).
MyRfqPage	/rfqs	ES_ADMIN, ES_USER, PROVIDER	List + filter switch (“My requests”) over all RFQs. Delegates to RequestForQuotationsTable.
RfqCreationPage	/rfq/create	ES_ADMIN, ES_USER	Multi-step form that assembles RFQ payload (items table, tech-spec badges). Uses ConfirmationModal before POST.
RFQViewEditPageES	/rfq/:year/:sequence	ES_ADMIN, ES_USER, PROVIDER	Full RFQ CRUD & quoting portal. • Internal users: edit, withdraw, award quotes • Providers: create/view/withdraw own quote.
ProviderCompanyProfile	/providers/:operationalCode	all auth	Company master-data page (address, contact, countries of operation). Offers navigation to SNG list & evaluations.
SngPage	/providers/:code/sngs	ES_ADMIN, ES_USER, PROVIDER	Shows all SNG trucks of provider, plus add / edit / soft-delete via SngCard.
SngCreationPage	/providers/:code/sngs/create /providers/:code/sngs/edit/:id	same as above	Large form for truck details, antennas & tech specs. Re-used for create and update.
EvaluationPage	/providers/:code/evaluation	ES_ADMIN, ES_USER	Displays average ratings & trend icons; modal to submit new evaluation.

Services & Stores

#	Service module	Core responsibility (wrapped backend end-points)	Coupled Pinia store(s)	Typical lifecycle in UI	Why it is important
1	auth.service.js	POST /auth/login, POST /registrationRequests, POST /auth/logout	─	Used only from auth.store actions login/register/logout.	Single source for OAuth2/JWT exchange; keeps page code ignorant of REST details.
2	common.service.js	GET /common/countries	─	Called ad-hoc by Home, Provider, RFQ & SNG pages for drop-downs. Caches nowhere.	Pure utility; no token header → public call so the app still renders unauthenticated screens.
3	evaluation.service.js	GET …/evaluations/categories `GET	POST /providers/{code}/evaluations\	auth.store (for token)	Fetch on EvaluationPage mount; POST inside modal.	Encapsulates complex authorization header logic and hides URL stitching.
4	notification.service.js	GET /notifications (+ query) PATCH /notifications/{id}	auth.store	Used only by notifications.store.	Keeps websocket store “thin”: store focuses on state & STOMP, service on REST persistence.
5	password.service.js	local regex validation helpers	─	Used client-side only in Register & EditProfile pages.	Business rule centralisation (min 8 chars, 1 upper, etc.) – avoids duplication in several forms.
6	providers.service.js	CRUD + list/filter for providers (/providers)	auth.store	• HomePage filter panel → getSortedProviders • ProviderProfile edit → updateProvider	Bridges backend “provider” bounded context; injects token and query params assembling.
7	quote.service.js	Quote CRUD, award / withdraw (/quotes & sub-resources)	auth.store	• RFQViewEditPage (provider view) uses create/update/withdraw • Same page (ES user) uses awardQuote	Implements full quote state machine on client; pages only deal with returned DTO.
8	requestForQuotation.service.js	RFQ CRUD (/requestForQuotations) incl. status PATCH	auth.store	• RfqCreationPage → createRfq • MyRfqPage list → getAllRFQs • RFQViewEditPage edit / withdraw	Front-end counterpart of your RFQ backend module; responsible for versioned URL construction.
9	sng.service.js	CRUD trucks (/trucks, /providers/{code}/trucks)	auth.store	• SngPage list • SngCreationPage create/update/delete	Masks slightly different provider-scoped & global URLs; enforces auth header.
10	specifications.service.js	GET /technicalSpecifications	auth.store	Fetched once by HomePage and SngCreationPage then stored in local component state.	Provides master-data for all spec drop-downs ⇒ single call instead of scattering constants.
11	users.service.js	Pending registration list, PATCH user, GET /users/me	auth.store & users.store	• AdminPanel polls getPendingRegistrations • auth.store.loadUserProfile() uses getMe	Gives both admin screens and auth-boot sequence the same user DTO source.