Meduse Vue frontend

This page identifies the maintained Vue application, its navigation and request boundary, and the source entry points to follow when changing a screen. The linked interface map traces active menu actions to their frontend services and Laravel route handlers. These are source findings at the cited commits; no browser session, API, or deployed environment was exercised.

Application boundary

The application UI lives in axelites/menzzo-meduse-front. Its package.json declares Vue 3, Vue Router 4, Vuex 4, PrimeVue, TypeScript, and Vue CLI scripts. src/main.ts creates the app, installs the router and store, initializes ApiService, and mounts the root wrapper. src/AppWrapper.vue provides the outer layout; src/App.vue owns the current menu model and renders the route view.

The Laravel repository has a separate root package.json that declares Laravel Mix and Vue 2. That is an asset scaffold inside the backend repository, not the separately maintained Vue 3 catalog UI. Dependency declarations describe intended constraints, not the packages installed in any environment.

The root menu currently exposes category management, the product grid, Vimeo Stories, tracked processes, attributes, families, ASIR mapping (processed and unprocessed), and ASIR synchronization. The users menu entry and several template/demo entries are commented out. src/AppSubmenu.vue renders the model supplied by App.vue; a router record by itself does not make a page a visible navigation item. See the route and interface inventory for route-only and internally linked pages.

Login, API, channel, and tenant

ApiService uses process.env.VUE_APP_API_URL as the Axios base URL. Its wrappers send relative API paths; the Laravel route service provider adds the /api prefix. The frontend stores the login token under local-storage key id_token, then sends it as Authorization: Bearer …. The login screen posts credentials to login; on later navigation, the router guard runs VERIFY_AUTH, which calls me and purges the saved token when verification fails. A failed login is shown inline as a generic email/password message. The requested path is saved in redirectAfterLogin before the user is sent to /login.

The top breadcrumb has a channel selector. It loads the static channel list through GET /api/list-channels-static, stores channel_id and tenant_id in local storage, then reloads the page. The product grid and channel-aware category/menu-manager calls pass channel or store context in request data or route parameters. One exception is the category administration tree at /administrer-categories: it calls GET /api/get-categories-to-administrate without channel context, and the matching backend handler hard-codes channelId = 3. The channel and tenant are different scopes: the channel selects catalog/store data where the caller supplies it, while the tenant selects the backend tenant.

During auth verification, ApiService.setHeader() adds AX-Tenant when the stored tenant value is neither empty nor the literal null. It has no branch that removes an existing default header when the tenant is empty or null. For the direct product-grid route, the router dispatches VERIFY_AUTH first; that action calls setHeader() using the previously stored tenant, and only afterward does the route guard write channel_id = 1 and tenant_id = 'null'. The header can therefore remain set to the previous tenant through that guard. Products2.vue later updates the channel/tenant state and reloads the page; whether an intervening request uses the old header was not runtime-tested. The Laravel API group applies auth:sanctum and TenantMiddleware to protected routes; the middleware reads AX-Tenant, initializes a matching tenant, and returns 404 when a supplied tenant ID is unknown. Login is outside that protected group. Do not copy or publish API environment values when diagnosing the frontend.

The router permits the Vimeo route only for the Menzzo tenant according to its own tenantOnly guard. App.vue separately decides whether to show that menu item. The two predicates differ for empty-string and menzzo tenant values; see the interface gaps. Runtime impact depends on the value actually persisted by the channel record and has not been tested here.

Loading, errors, and asynchronous status

App.vue displays the shared preloader when Vuex state loader is set, but most feedback is owned by each page. Login uses an inline message; category and attribute screens use Toast or SweetAlert dialogs; the ASIR sync screen displays a progress bar while polling; the job detail page shows a translated status and refreshes every 20 seconds until it sees finished. The API service has simple request wrappers and no shared response interceptor in the inspected source, so error conversion and success wording vary by component.

A green message or HTTP 200 records the frontend's response handling. Laravel's configured queue connection determines whether a Queue::push runs inline (sync is the source default) or is handed to a worker; the runtime setting is not established here. A successful response alone does not prove job completion or that another system consumed an export. Follow the returned job/progress state where available and verify the destination at its owning boundary; see Meduse workflows and queues.

Source entry points

Change area	Start here
App creation, plugins, API setup	src/main.ts
Main layout, menu model, tenant-based visibility	src/App.vue, src/AppMenu.vue, src/AppSubmenu.vue
Paths, login guard, route-only screens	src/router.ts
API URL and request headers	src/service/ApiService.ts, src/service/JwtService.ts
Channel selection and persisted IDs	src/AppBreadcrumb.vue, src/service/ChannelService.ts
Screen-to-request mapping	Interface map, then the named page, service, and Vuex module in that table

Evidence boundary

The frontend and backend references point to immutable source commits. This page documents declared dependencies and statically traced code paths; it does not establish an installed toolchain, configured API URL, account access, live tenant, queue state, connector readiness, or end-to-end acceptance. No application was started and no API or production command was run for this source review.