Replace the per-field `section` text property with a dedicated HEADING field type that
organizers add as a separate block for visual grouping. Also fixes duplicate heading bug
on portal radio fields, replaces cramped VBtnToggle with VSelect for field width, and
adds grouped field type dropdown with structure/input categories.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add configurable column widths (full/half) and optional descriptions
for radio/select/checkbox options on registration form fields.
- Migration adds display_width column to both tables
- FieldDisplayWidth enum with smart defaults per field type
- normalized_options accessor for backwards-compatible option format
- Portal form renderer uses display_width for VRow/VCol grid layout
- Radio/select/checkbox options render with descriptions
- Admin field editor supports display_width toggle and description input
- System templates updated with appropriate widths and descriptions
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace position:fixed VSystemBar + fragile :deep() CSS overrides
with a normal-flow div inside the Vuexy content area. The banner
renders in VerticalNavLayout's default slot (layout-page-content)
so it sits naturally below the navbar without fighting the layout
system. Sidebar and navbar are no longer affected.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The previous :deep() overrides had equal specificity to Vuexy's
unscoped styles in VerticalNavLayout.vue. Since child component
styles are injected after parent styles, Vuexy's inset-block-start: 0
won by source order. Add !important and simplify the navbar selector
to target .layout-navbar directly.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The previous paddingTop on a wrapper div didn't affect the Vuexy
layout's fixed-position sidebar or sticky navbar. Replace with
scoped :deep() CSS overrides that shift both elements down 48px
when impersonation is active.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Banner: white elevated button for contrast, fixed 48px height,
layout top padding offset so content isn't obscured
- Middleware: allow GET me/profile (viewing), block mutations only;
add auth/refresh to blocked routes
- Navigation: hide Platform section during impersonation; hide
org-dependent items when impersonated user has no organisation
- Test: add read-only routes allowed test, auth/refresh blocked test
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace horizontal tabs with VList-based vertical sidebar following the
Vuexy ecommerce settings pattern. Consolidate Tags, Crowd Types, Members,
and Registration Fields pages into the settings page as sidebar tabs.
Add SettingsGeneral panel with org details form and danger zone.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
After successful MFA code verification, onMfaVerified() called
authStore.initialize() which returned immediately (isInitialized
was already true from the initial page load). The auth store was
never populated with user data, so the router guard saw
isAuthenticated === false and redirected back to /login — leaving
the user stuck on the MFA challenge screen with a consumed session.
Fix: use authStore.refreshUser() instead of initialize(). This
always calls GET /auth/me (using the new auth cookie from the MFA
verify response), populates the store, and then navigation to the
dashboard succeeds.
The portal login already uses authStore.fetchUser() which has no
isInitialized guard, so it was not affected.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Moves "Huidig wachtwoord" to a full-width row so "Nieuw wachtwoord"
and "Bevestig nieuw wachtwoord" sit together on the second row.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The "Annuleren" button served no purpose — there's no prior state to
revert to in a password change form. The fields are already empty on
load and the type="reset" just cleared them to the same empty state.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Redesigns the MFA method cards and supporting sections for better
visual hierarchy and professional styling:
Method cards (organizer):
- Vertical layout with large icon (VAvatar 44px) at top
- Description text explaining each method
- Status chip with check icon when configured
- VCardActions with primary chip/button + "Opnieuw instellen"
- Primary method card highlighted with 2px primary border
- Proper h-100 for equal height side-by-side
Backup codes:
- Separate outlined VCard with key icon, progress bar, refresh button
- Cleaner spacing and visual grouping
Disable MFA:
- Replaced heavy danger-zone card with subtle text button
(tabler-shield-off icon, error color) — less visual weight for a
rarely-used destructive action
Portal:
- Per-method rows with VAvatar icons and stacked status chips
- Matching text-button style for disable action
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Adds the ability for users to change their preferred/primary MFA method
when both TOTP and email are available.
Backend:
- Add PUT /auth/mfa/preferred-method endpoint with validation
(method must be totp/email, MFA must be enabled, TOTP must be
configured if selecting totp)
- Add totp_configured and email_configured fields to MFA status
endpoint (totp = has secret + enabled, email = always when enabled)
- Fix setupEmail() to preserve mfa_secret so TOTP config survives
when email is set up as a second method
Frontend (organizer + portal):
- Add useSetPreferredMethod() composable to useMfa.ts
- Add totp_configured/email_configured to MfaStatus type
- SecurityTab method cards now show "Primaire methode" chip on the
preferred method and "Als primair instellen" button on the other
- Portal security section shows per-method rows with status chips
and primary switching
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Root cause: the MFA status endpoint returned `mfa_enabled` as the JSON
key but the TypeScript MfaStatus interface expected `enabled`. At
runtime, `mfaStatus.value?.enabled` was always `undefined`, so
`isEnabled` was always false — the banner never hid and the method
cards never showed "Geconfigureerd".
Additionally, the auth store had no way to re-fetch /auth/me after
initialization, so `mfaSetupRequired` was never properly refreshed
from the backend after MFA setup.
Fixes:
- Rename `mfa_enabled` → `enabled` in the MFA status endpoint response
to match the TypeScript type (and the /auth/me MeResource which
already used `enabled`)
- Add `refreshUser()` to the auth store for post-initialization
re-fetching of /auth/me
- Call `refreshUser()` in onSetupCompleted so the store reflects the
backend state without a full page reload
- Update backend tests to match the renamed response key
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace 24 `err: any` error handler types with proper `AxiosError<ApiErrorResponse>`
typing. Fix additional `as any` casts and `Record<string, any>` patterns in registration
field components, event settings, and portal layout. Create shared `ApiErrorResponse`
type for portal app.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Adds three new tabs to the organisation settings page:
- E-mail opmaak: replaces old EmailBrandingTab to use the new
organisation_email_settings API (logo, colors, footer, reply-to)
- E-mail templates: list/edit/preview/test/reset all 6 template types
with variable hints, defaults comparison, and iframe preview
- E-mail log: server-side paginated table with filters (search, status,
type, date range), status chips, and expandable row details
Supporting files:
- types/email.ts: TypeScript interfaces for settings, templates, logs
- composables/api/useEmail.ts: TanStack Query hooks for all email endpoints
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add "Nieuwe organisatie" button to the platform organisations list page.
Dialog with name field (auto-generates slug) and slug field. Uses the
existing POST /organisations endpoint. On success, navigates to the
new organisation's detail page.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Both org pages now use the same VDataTable with:
- Search field (name/email filter)
- Sortable columns (Naam, E-mail, Rol) with default sort on name
- Pagination (10 per page)
- Avatar with initials, role chips with color mapping
- Consistent empty state with icon
Platform page: replaced VTable with VDataTable, added role chips
(replacing inline AppSelect), role editing via menu on edit button.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace custom text-caption span with the standard
<p class="text-body-1 text-disabled mb-0"> pattern used across
all other pages in the codebase.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Both organisation pages: slug wrapped in parentheses, billing status
label capitalized, timestamps use text-disabled for lighter appearance,
edit button labeled "Bewerken" consistently.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Both organisation pages now use the same date format:
"14 april 2026 om 01:11 uur". Added missing "Gewijzigd op" timestamp
to the organizer organisation page header.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Match the header structure of /organisation to /platform/organisations/[id]:
wrap name+chip in a flex row with gap-x-2, place timestamp as span
below it inside the same container div.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Display the organisation slug in small muted text directly after the
organisation name on both the organizer page (/organisation) and the
platform admin detail page (/platform/organisations/[id]).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Display the event slug in small muted text directly after the event
name in the EventTabsNav header.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Platform org detail:
- KPI cards (events, users, persons) moved inside Algemeen tab
- Danger Zone moved from below tabs into a dedicated "Danger Zone" tab
with red-colored tab icon
- Tab bar now shows: Algemeen | Leden | Danger Zone
Platform user detail:
- Added VTabs with Algemeen (profile info) and Organisaties tabs
- Timestamps moved below title as muted caption
- Content reorganised into tab structure matching org detail pattern
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Organizer org page (/organisation):
- Timestamps moved below title as muted caption
- VTabs with Algemeen (details) and Leden (members) tabs
- Members content embedded from separate page with full functionality:
invite, edit role, change email, remove, pending invitations
Platform org detail (/platform/organisations/[id]):
- Timestamps moved below title alongside slug
- VTabs with Algemeen and Leden tabs
- Danger zone redesigned: type-to-confirm delete dialog, disabled
Transfer Ownership button with "Nog niet beschikbaar" tooltip
Navigation:
- Removed standalone "Leden" menu item (now a tab on org page)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add member management to the platform admin organisation detail page:
- Backend: invite (creates invitation or directly adds existing user),
remove member, update member role endpoints on AdminOrganisationController
- Backend: show endpoint now returns members alongside organisation data
- Frontend: members table with inline role editing, invite dialog,
remove confirmation dialog on /platform/organisations/[id]
- Tests: 7 new tests covering happy paths and edge cases (self-removal,
existing member, non-super_admin denied)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Build the frontend for platform admin in apps/app/:
- TypeScript types (admin.ts) and API composable (useAdmin.ts) with
TanStack Query for all admin endpoints
- ImpersonationStore (Pinia) + ImpersonationBanner component integrated
in the main layout, with token-based session management
- Platform navigation section (conditionally shown for super_admin users)
- Route guard blocking /platform/* for non-super_admin users
- 6 pages: dashboard with stats cards, organisations list/detail,
users list/detail with impersonation, activity log with expandable rows
- All pages implement loading/error/empty states per conventions
- Vite build passes cleanly
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
v-tooltip renders a forced-dark background unsuitable for multi-line
help content. Switch to v-menu + v-card which follows the app theme.
Use surface-variant background for the "Tip:" block.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
VAutocomplete renders its dropdown list in a teleported overlay outside
the component DOM tree. Scoped :deep() CSS cannot reach teleported
content. Switch from class-based opacity to inline style on VListItem.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
VAutocomplete ignores interleaved fake header items — they were filtered
out before reaching the template. Replace with Approach A: keep only
real selectable items sorted by group, detect group boundaries in the
#item template by comparing adjacent groupName values, and render
VListSubheader before each new group.
- Remove _isGroupHeader from TimeSlotDropdownItem interface
- Rename groupTimeSlots → sortedItems (returns only selectable items)
- Add hasGroups computed for conditional header rendering
- Add isNewGroup(index) boundary detection in CreateShiftDialog
- Add scoped .time-slot-dimmed CSS class (opacity: 0.65)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace separate status chips/buttons with one status dropdown next to
edit, move dates under the title, add share dialog for registration URL,
and remove RegistrationLinkCard.
Made-with: Cursor
Restructure the festival hierarchy end-to-end:
Seeder: Remove duplicate festival-level VOLUNTEER time slots, keep only CREW
operational slots. Rename sub-events to "Dag 1/2/3 — ..." pattern. Change
Nachtsecurity to Security (cross_event). EHBO/Security shifts now use sub-event
time slots via cross_event exception. Add flat event "Braderie Dorpstown 2026".
API: Add ?include_children=true to TimeSlotController for festivals, returning
all sub-event time slots with source and event_name fields. Update
StoreShiftRequest and UpdateShiftRequest to accept child time slots for
cross_event sections.
Frontend: Create useTimeSlotDropdown composable with 4-scenario dropdown logic.
Replace AppSelect with VAutocomplete in CreateShiftDialog with grouped items,
dimmed festival slots, and info tooltips. Add InfoTooltip reusable component.
Show festival context labels on cross_event sections in sub-event section lists.
Add read-only festival time slots on sub-event time-slots page. Add cross_event
context banner with "Bekijk alle diensten" link.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
