diff --git a/dev-docs/VUEXY_COMPONENTS.md b/dev-docs/VUEXY_COMPONENTS.md index dd07289b..f84477e5 100644 --- a/dev-docs/VUEXY_COMPONENTS.md +++ b/dev-docs/VUEXY_COMPONENTS.md @@ -8,7 +8,7 @@ Generated from Vuexy template v10.11.1 (`resources/vuexy-admin-v10.11.1/vue-vers ## 1. @core Components Source: `resources/vuexy-admin-v10.11.1/vue-version/typescript-version/full-version/src/@core/components/` -Copied into: `apps/app/src/@core/components/` and `apps/portal/src/@core/components/` +Copied into: `apps/app/src/@core/components/` ### Form Element Wrappers (`@core/components/app-form-elements/`) @@ -128,15 +128,15 @@ Computed: `_layoutClasses`, `isLessThanOverlayNavBreakpoint`, `isVerticalNavMini |--------|------|---------|---------| | **default** | `layouts/default.vue` | All authenticated pages | Switches between vertical/horizontal nav based on config store | | **blank** | `layouts/blank.vue` | Login, error pages | Minimal layout — no navigation | -| **OrganizerLayout** | `layouts/OrganizerLayout.vue` | _Not yet wired_ | Organizer experience — thin wrapper around `DefaultLayoutWithVerticalNav` | -| **PortalLayout** | `layouts/PortalLayout.vue` | _Not yet wired_ | Volunteer/crew portal scaffold — top bar + main + footer regions, content TBD | -| **PublicLayout** | `layouts/PublicLayout.vue` | _Not yet wired_ | Unauthenticated scaffold for login / password-reset / public form viewer | +| **OrganizerLayout** | `layouts/OrganizerLayout.vue` | All pages under `pages/{events,members,organisation,account-settings,dashboard,invitations}/**` | Organizer experience — thin wrapper around `DefaultLayoutWithVerticalNav` | +| **PortalLayout** | `layouts/PortalLayout.vue` | All pages under `pages/portal/**` | Volunteer/crew portal — custom navbar with two modes (platform / event) + mobile drawer; container max-width 1440px, navbar height 64px | +| **PublicLayout** | `layouts/PublicLayout.vue` | All pages under `pages/register/**` | Unauthenticated scaffold for public form viewer / registration flow | -The three `*Layout.vue` files were added as foundation skeletons in -WS-3 session 1a (2026-04-29). They exist so the upcoming router -consolidation has stable, semantically named targets to point -`meta.layout` at; they are NOT yet referenced by any route. Content -migration into `PortalLayout.vue` happens in a later WS-3 session. +`PortalLayout` is a **custom implementation** — it does NOT use @layouts VerticalNavLayout. Modes (set via route `meta.navMode`): +- **Platform mode** (`navMode: 'platform'`): Crewli logo + optional page title + UserAvatarMenu +- **Event mode** (`navMode: 'event'`): Org name + event name + back link +- Mobile: VNavigationDrawer hamburger menu with user info + nav links + logout +- Desktop: UserAvatarMenu component in navbar **default** delegates to: - `layouts/components/DefaultLayoutWithVerticalNav.vue` — Vertical sidebar (default) @@ -150,21 +150,6 @@ migration into `PortalLayout.vue` happens in a later WS-3 session. - `NavbarThemeSwitcher.vue` — Light/Dark/System switcher - `Footer.vue` — Copyright footer -### Portal Layouts (`apps/portal/src/layouts/`) - -| Layout | File | Used In | Purpose | -|--------|------|---------|---------| -| **portal** | `layouts/portal.vue` | All authenticated portal pages | Custom navbar with two modes + mobile drawer | -| **blank** | `layouts/blank.vue` | Login, registration, password reset | Minimal layout | -| **default** | `layouts/default.vue` | Fallback (delegates to portal) | Wrapper | - -**Portal layout** is a **custom implementation** — does NOT use @layouts VerticalNavLayout. Features: -- **Platform mode** (`navMode: 'platform'`): Crewli logo + optional page title + UserAvatarMenu -- **Event mode** (`navMode: 'event'`): Org name + event name + back link -- Mobile: VNavigationDrawer hamburger menu with user info + nav links + logout -- Desktop: UserAvatarMenu component in navbar -- Container max-width: 1440px, navbar height: 64px - ### Route Meta for Layout Selection ```typescript @@ -433,27 +418,27 @@ Two approaches from Vuexy: ### 3.9 Portal Page Patterns #### Event List (Card Grid) -**Reference:** `apps/portal/src/pages/evenementen/index.vue` +**Reference:** `apps/app/src/pages/portal/evenementen/index.vue` - VRow + VCol (cols="12" sm="6" md="4") responsive grid - Custom EventCard component per event (gradient banner, status chip, hover animation) - VSkeletonLoader for loading, VAlert for empty state #### Event Detail (Hash-based Tabs) -**Reference:** `apps/portal/src/pages/evenementen/[eventId].vue` +**Reference:** `apps/app/src/pages/portal/evenementen/[eventId].vue` - VTabs with hash-based routing (#overzicht, #rooster, #claimen, #informatie) - VWindow + VWindowItem per tab with dedicated tab components - StatusCard shows different UI per approval status (pending/approved/rejected) - Conditional tab visibility based on approval status #### Registration (Multi-step Form with VeeValidate + Zod) -**Reference:** `apps/portal/src/pages/register/[eventSlug].vue` +**Reference:** `apps/app/src/pages/register/[public_token].vue` - VForm with VeeValidate field binding + Zod schemas from `@/schemas/` - Conditional form fields based on event configuration - Real-time email duplicate checking - Password creation for new users #### Auth Pages (Centered Card) -**Reference:** `apps/portal/src/pages/login.vue` +**Reference:** `apps/app/src/pages/login.vue` - VCard centered on blank layout - VTextField with password visibility toggle - VAlert for error messages, VBtn with loading state @@ -673,7 +658,7 @@ Options // { page, itemsPerPage, sortBy, groupBy, search } for data t |-----------|---------|---------| | **OrganisationSwitcher** | Switch between organisations | Navigation sidebar | -### Portal Components (`apps/portal/src/components/`) +### Portal Components (`apps/app/src/components/portal/`) | Component | Purpose | Used By | |-----------|---------|---------|