feat(app): auth, orgs/events UI, router guards, and dev tooling

- Add Sanctum auth flow (store, composables, login, axios interceptors) - Add dashboard, organisation list/detail, events CRUD dialogs - Wire router guards, navigation, organisation switcher in layout - Replace Vuexy @db types in NavSearchBar; add @iconify/types; themeConfig title typing - Vuetify settings.scss + resolve configFile via fileURLToPath; drop dead path aliases - Root index redirects to dashboard; fix events table route name - API: DevSeeder + DatabaseSeeder updates; docs TEST_SCENARIO; corporate identity assets Made-with: Cursor
2026-04-07 21:51:10 +02:00
parent 0d24506c89
commit c417a6647a
45 changed files with 11554 additions and 832 deletions
--- a/api/database/seeders/DatabaseSeeder.php
+++ b/api/database/seeders/DatabaseSeeder.php
@@ -31,5 +31,9 @@ class DatabaseSeeder extends Seeder
        ]);

        $admin->organisations()->attach($organisation->id, ['role' => 'org_admin']);
+
+        if (app()->environment('local')) {
+            $this->call(DevSeeder::class);
+        }
    }
 }
--- a/api/database/seeders/DevSeeder.php
+++ b/api/database/seeders/DevSeeder.php
@@ -0,0 +1,80 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Database\Seeders;
+
+use App\Models\Organisation;
+use App\Models\User;
+use Illuminate\Database\Seeder;
+use Illuminate\Support\Facades\Hash;
+
+class DevSeeder extends Seeder
+{
+    public function run(): void
+    {
+        $this->call(RoleSeeder::class);
+
+        // 1. Super Admin
+        $admin = User::firstOrCreate(
+            ['email' => 'admin@crewli.test'],
+            [
+                'name' => 'Dev Admin',
+                'password' => Hash::make('password'),
+            ],
+        );
+        $admin->assignRole('super_admin');
+
+        // Test organisation
+        $org = Organisation::firstOrCreate(
+            ['slug' => 'test-festival-bv'],
+            [
+                'name' => 'Test Festival BV',
+                'billing_status' => 'active',
+                'settings' => [],
+            ],
+        );
+
+        // 2. Org Admin
+        $orgAdmin = User::firstOrCreate(
+            ['email' => 'orgadmin@crewli.test'],
+            [
+                'name' => 'Org Admin',
+                'password' => Hash::make('password'),
+            ],
+        );
+        if (!$org->users()->where('user_id', $orgAdmin->id)->exists()) {
+            $org->users()->attach($orgAdmin, ['role' => 'org_admin']);
+        }
+
+        // Second test organisation (for testing the organisation switcher)
+        $org2 = Organisation::firstOrCreate(
+            ['slug' => 'zomerfest-nederland'],
+            [
+                'name' => 'Zomerfest Nederland',
+                'billing_status' => 'trial',
+                'settings' => [],
+            ],
+        );
+
+        // Attach admin and orgAdmin to second org too
+        if (!$org2->users()->where('user_id', $admin->id)->exists()) {
+            $org2->users()->attach($admin, ['role' => 'org_admin']);
+        }
+        if (!$org2->users()->where('user_id', $orgAdmin->id)->exists()) {
+            $org2->users()->attach($orgAdmin, ['role' => 'org_member']);
+        }
+
+        // 3. Org Member
+        $member = User::firstOrCreate(
+            ['email' => 'crew@crewli.test'],
+            [
+                'name' => 'Crew Member',
+                'password' => Hash::make('password'),
+            ],
+        );
+        if (!$org->users()->where('user_id', $member->id)->exists()) {
+            $org->users()->attach($member, ['role' => 'org_member']);
+        }
+    }
+}
--- a/apps/app/auto-imports.d.ts
+++ b/apps/app/auto-imports.d.ts
@@ -564,7 +564,6 @@ declare module 'vue' {
    readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>
    readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
    readonly useCurrentElement: UnwrapRef<typeof import('@vueuse/core')['useCurrentElement']>
-    readonly useCurrentOrganisationId: UnwrapRef<typeof import('./src/composables/useOrganisationContext')['useCurrentOrganisationId']>
    readonly useCycleList: UnwrapRef<typeof import('@vueuse/core')['useCycleList']>
    readonly useDark: UnwrapRef<typeof import('@vueuse/core')['useDark']>
    readonly useDateFormat: UnwrapRef<typeof import('@vueuse/core')['useDateFormat']>
@@ -587,7 +586,6 @@ declare module 'vue' {
    readonly useEventBus: UnwrapRef<typeof import('@vueuse/core')['useEventBus']>
    readonly useEventListener: UnwrapRef<typeof import('@vueuse/core')['useEventListener']>
    readonly useEventSource: UnwrapRef<typeof import('@vueuse/core')['useEventSource']>
-    readonly useEvents: UnwrapRef<typeof import('./src/composables/useEvents')['useEvents']>
    readonly useEyeDropper: UnwrapRef<typeof import('@vueuse/core')['useEyeDropper']>
    readonly useFavicon: UnwrapRef<typeof import('@vueuse/core')['useFavicon']>
    readonly useFetch: UnwrapRef<typeof import('@vueuse/core')['useFetch']>
--- a/apps/app/components.d.ts
+++ b/apps/app/components.d.ts
@@ -7,11 +7,9 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
  export interface GlobalComponents {
-    AddAuthenticatorAppDialog: typeof import('./src/components/dialogs/AddAuthenticatorAppDialog.vue')['default']
    AddEditAddressDialog: typeof import('./src/components/dialogs/AddEditAddressDialog.vue')['default']
    AddEditPermissionDialog: typeof import('./src/components/dialogs/AddEditPermissionDialog.vue')['default']
    AddEditRoleDialog: typeof import('./src/components/dialogs/AddEditRoleDialog.vue')['default']
-    AddPaymentMethodDialog: typeof import('./src/components/dialogs/AddPaymentMethodDialog.vue')['default']
    AppAutocomplete: typeof import('./src/@core/components/app-form-elements/AppAutocomplete.vue')['default']
    AppBarSearch: typeof import('./src/@core/components/AppBarSearch.vue')['default']
    AppCardActions: typeof import('./src/@core/components/cards/AppCardActions.vue')['default']
@@ -26,13 +24,12 @@ declare module 'vue' {
    AppStepper: typeof import('./src/@core/components/AppStepper.vue')['default']
    AppTextarea: typeof import('./src/@core/components/app-form-elements/AppTextarea.vue')['default']
    AppTextField: typeof import('./src/@core/components/app-form-elements/AppTextField.vue')['default']
-    BuyNow: typeof import('./src/@core/components/BuyNow.vue')['default']
-    CardAddEditDialog: typeof import('./src/components/dialogs/CardAddEditDialog.vue')['default']
    CardStatisticsHorizontal: typeof import('./src/@core/components/cards/CardStatisticsHorizontal.vue')['default']
    CardStatisticsVertical: typeof import('./src/@core/components/cards/CardStatisticsVertical.vue')['default']
    CardStatisticsVerticalSimple: typeof import('./src/@core/components/CardStatisticsVerticalSimple.vue')['default']
    ConfirmDialog: typeof import('./src/components/dialogs/ConfirmDialog.vue')['default']
    CreateAppDialog: typeof import('./src/components/dialogs/CreateAppDialog.vue')['default']
+    CreateEventDialog: typeof import('./src/components/events/CreateEventDialog.vue')['default']
    CustomCheckboxes: typeof import('./src/@core/components/app-form-elements/CustomCheckboxes.vue')['default']
    CustomCheckboxesWithIcon: typeof import('./src/@core/components/app-form-elements/CustomCheckboxesWithIcon.vue')['default']
    CustomCheckboxesWithImage: typeof import('./src/@core/components/app-form-elements/CustomCheckboxesWithImage.vue')['default']
@@ -40,356 +37,27 @@ declare module 'vue' {
    CustomRadios: typeof import('./src/@core/components/app-form-elements/CustomRadios.vue')['default']
    CustomRadiosWithIcon: typeof import('./src/@core/components/app-form-elements/CustomRadiosWithIcon.vue')['default']
    CustomRadiosWithImage: typeof import('./src/@core/components/app-form-elements/CustomRadiosWithImage.vue')['default']
-    DemoAlertBasic: typeof import('./src/views/demos/components/alert/DemoAlertBasic.vue')['default']
-    DemoAlertBorder: typeof import('./src/views/demos/components/alert/DemoAlertBorder.vue')['default']
-    DemoAlertClosable: typeof import('./src/views/demos/components/alert/DemoAlertClosable.vue')['default']
-    DemoAlertColoredBorder: typeof import('./src/views/demos/components/alert/DemoAlertColoredBorder.vue')['default']
-    DemoAlertColors: typeof import('./src/views/demos/components/alert/DemoAlertColors.vue')['default']
-    DemoAlertDensity: typeof import('./src/views/demos/components/alert/DemoAlertDensity.vue')['default']
-    DemoAlertElevation: typeof import('./src/views/demos/components/alert/DemoAlertElevation.vue')['default']
-    DemoAlertIcons: typeof import('./src/views/demos/components/alert/DemoAlertIcons.vue')['default']
-    DemoAlertOutlined: typeof import('./src/views/demos/components/alert/DemoAlertOutlined.vue')['default']
-    DemoAlertProminent: typeof import('./src/views/demos/components/alert/DemoAlertProminent.vue')['default']
-    DemoAlertTonal: typeof import('./src/views/demos/components/alert/DemoAlertTonal.vue')['default']
-    DemoAlertType: typeof import('./src/views/demos/components/alert/DemoAlertType.vue')['default']
-    DemoAlertVModelSupport: typeof import('./src/views/demos/components/alert/DemoAlertVModelSupport.vue')['default']
-    DemoAutocompleteAsyncItems: typeof import('./src/views/demos/forms/form-elements/autocomplete/DemoAutocompleteAsyncItems.vue')['default']
-    DemoAutocompleteBasic: typeof import('./src/views/demos/forms/form-elements/autocomplete/DemoAutocompleteBasic.vue')['default']
-    DemoAutocompleteChips: typeof import('./src/views/demos/forms/form-elements/autocomplete/DemoAutocompleteChips.vue')['default']
-    DemoAutocompleteClearable: typeof import('./src/views/demos/forms/form-elements/autocomplete/DemoAutocompleteClearable.vue')['default']
-    DemoAutocompleteCustomFilter: typeof import('./src/views/demos/forms/form-elements/autocomplete/DemoAutocompleteCustomFilter.vue')['default']
-    DemoAutocompleteDensity: typeof import('./src/views/demos/forms/form-elements/autocomplete/DemoAutocompleteDensity.vue')['default']
-    DemoAutocompleteMultiple: typeof import('./src/views/demos/forms/form-elements/autocomplete/DemoAutocompleteMultiple.vue')['default']
-    DemoAutocompleteSlots: typeof import('./src/views/demos/forms/form-elements/autocomplete/DemoAutocompleteSlots.vue')['default']
-    DemoAutocompleteStateSelector: typeof import('./src/views/demos/forms/form-elements/autocomplete/DemoAutocompleteStateSelector.vue')['default']
-    DemoAutocompleteValidation: typeof import('./src/views/demos/forms/form-elements/autocomplete/DemoAutocompleteValidation.vue')['default']
-    DemoAutocompleteVariant: typeof import('./src/views/demos/forms/form-elements/autocomplete/DemoAutocompleteVariant.vue')['default']
-    DemoAvatarColors: typeof import('./src/views/demos/components/avatar/DemoAvatarColors.vue')['default']
-    DemoAvatarGroup: typeof import('./src/views/demos/components/avatar/DemoAvatarGroup.vue')['default']
-    DemoAvatarIcons: typeof import('./src/views/demos/components/avatar/DemoAvatarIcons.vue')['default']
-    DemoAvatarImages: typeof import('./src/views/demos/components/avatar/DemoAvatarImages.vue')['default']
-    DemoAvatarRounded: typeof import('./src/views/demos/components/avatar/DemoAvatarRounded.vue')['default']
-    DemoAvatarSizes: typeof import('./src/views/demos/components/avatar/DemoAvatarSizes.vue')['default']
-    DemoAvatarTonal: typeof import('./src/views/demos/components/avatar/DemoAvatarTonal.vue')['default']
-    DemoBadgeAvatarStatus: typeof import('./src/views/demos/components/badge/DemoBadgeAvatarStatus.vue')['default']
-    DemoBadgeColor: typeof import('./src/views/demos/components/badge/DemoBadgeColor.vue')['default']
-    DemoBadgeDynamicNotifications: typeof import('./src/views/demos/components/badge/DemoBadgeDynamicNotifications.vue')['default']
-    DemoBadgeIcon: typeof import('./src/views/demos/components/badge/DemoBadgeIcon.vue')['default']
-    DemoBadgeMaximumValue: typeof import('./src/views/demos/components/badge/DemoBadgeMaximumValue.vue')['default']
-    DemoBadgePosition: typeof import('./src/views/demos/components/badge/DemoBadgePosition.vue')['default']
-    DemoBadgeShowOnHover: typeof import('./src/views/demos/components/badge/DemoBadgeShowOnHover.vue')['default']
-    DemoBadgeStyle: typeof import('./src/views/demos/components/badge/DemoBadgeStyle.vue')['default']
-    DemoBadgeTabs: typeof import('./src/views/demos/components/badge/DemoBadgeTabs.vue')['default']
-    DemoBadgeTonal: typeof import('./src/views/demos/components/badge/DemoBadgeTonal.vue')['default']
-    DemoButtonBlock: typeof import('./src/views/demos/components/button/DemoButtonBlock.vue')['default']
-    DemoButtonColors: typeof import('./src/views/demos/components/button/DemoButtonColors.vue')['default']
-    DemoButtonFlat: typeof import('./src/views/demos/components/button/DemoButtonFlat.vue')['default']
-    DemoButtonGroup: typeof import('./src/views/demos/components/button/DemoButtonGroup.vue')['default']
-    DemoButtonIcon: typeof import('./src/views/demos/components/button/DemoButtonIcon.vue')['default']
-    DemoButtonIconOnly: typeof import('./src/views/demos/components/button/DemoButtonIconOnly.vue')['default']
-    DemoButtonLink: typeof import('./src/views/demos/components/button/DemoButtonLink.vue')['default']
-    DemoButtonLoaders: typeof import('./src/views/demos/components/button/DemoButtonLoaders.vue')['default']
-    DemoButtonOutlined: typeof import('./src/views/demos/components/button/DemoButtonOutlined.vue')['default']
-    DemoButtonPlain: typeof import('./src/views/demos/components/button/DemoButtonPlain.vue')['default']
-    DemoButtonRounded: typeof import('./src/views/demos/components/button/DemoButtonRounded.vue')['default']
-    DemoButtonRouter: typeof import('./src/views/demos/components/button/DemoButtonRouter.vue')['default']
-    DemoButtonSizing: typeof import('./src/views/demos/components/button/DemoButtonSizing.vue')['default']
-    DemoButtonText: typeof import('./src/views/demos/components/button/DemoButtonText.vue')['default']
-    DemoButtonTonal: typeof import('./src/views/demos/components/button/DemoButtonTonal.vue')['default']
-    DemoCheckboxBasic: typeof import('./src/views/demos/forms/form-elements/checkbox/DemoCheckboxBasic.vue')['default']
-    DemoCheckboxCheckboxValue: typeof import('./src/views/demos/forms/form-elements/checkbox/DemoCheckboxCheckboxValue.vue')['default']
-    DemoCheckboxColors: typeof import('./src/views/demos/forms/form-elements/checkbox/DemoCheckboxColors.vue')['default']
-    DemoCheckboxDensity: typeof import('./src/views/demos/forms/form-elements/checkbox/DemoCheckboxDensity.vue')['default']
-    DemoCheckboxIcon: typeof import('./src/views/demos/forms/form-elements/checkbox/DemoCheckboxIcon.vue')['default']
-    DemoCheckboxInlineTextField: typeof import('./src/views/demos/forms/form-elements/checkbox/DemoCheckboxInlineTextField.vue')['default']
-    DemoCheckboxLabelSlot: typeof import('./src/views/demos/forms/form-elements/checkbox/DemoCheckboxLabelSlot.vue')['default']
-    DemoCheckboxModelAsArray: typeof import('./src/views/demos/forms/form-elements/checkbox/DemoCheckboxModelAsArray.vue')['default']
-    DemoCheckboxStates: typeof import('./src/views/demos/forms/form-elements/checkbox/DemoCheckboxStates.vue')['default']
-    DemoChipClosable: typeof import('./src/views/demos/components/chip/DemoChipClosable.vue')['default']
-    DemoChipColor: typeof import('./src/views/demos/components/chip/DemoChipColor.vue')['default']
-    DemoChipElevated: typeof import('./src/views/demos/components/chip/DemoChipElevated.vue')['default']
-    DemoChipExpandable: typeof import('./src/views/demos/components/chip/DemoChipExpandable.vue')['default']
-    DemoChipInSelects: typeof import('./src/views/demos/components/chip/DemoChipInSelects.vue')['default']
-    DemoChipOutlined: typeof import('./src/views/demos/components/chip/DemoChipOutlined.vue')['default']
-    DemoChipRounded: typeof import('./src/views/demos/components/chip/DemoChipRounded.vue')['default']
-    DemoChipSizes: typeof import('./src/views/demos/components/chip/DemoChipSizes.vue')['default']
-    DemoChipWithAvatar: typeof import('./src/views/demos/components/chip/DemoChipWithAvatar.vue')['default']
-    DemoChipWithIcon: typeof import('./src/views/demos/components/chip/DemoChipWithIcon.vue')['default']
-    DemoComboboxBasic: typeof import('./src/views/demos/forms/form-elements/combobox/DemoComboboxBasic.vue')['default']
-    DemoComboboxClearable: typeof import('./src/views/demos/forms/form-elements/combobox/DemoComboboxClearable.vue')['default']
-    DemoComboboxDensity: typeof import('./src/views/demos/forms/form-elements/combobox/DemoComboboxDensity.vue')['default']
-    DemoComboboxMultiple: typeof import('./src/views/demos/forms/form-elements/combobox/DemoComboboxMultiple.vue')['default']
-    DemoComboboxNoDataWithChips: typeof import('./src/views/demos/forms/form-elements/combobox/DemoComboboxNoDataWithChips.vue')['default']
-    DemoComboboxVariant: typeof import('./src/views/demos/forms/form-elements/combobox/DemoComboboxVariant.vue')['default']
-    DemoCustomInputCustomCheckboxes: typeof import('./src/views/demos/forms/form-elements/custom-input/DemoCustomInputCustomCheckboxes.vue')['default']
-    DemoCustomInputCustomCheckboxesWithIcon: typeof import('./src/views/demos/forms/form-elements/custom-input/DemoCustomInputCustomCheckboxesWithIcon.vue')['default']
-    DemoCustomInputCustomCheckboxesWithImage: typeof import('./src/views/demos/forms/form-elements/custom-input/DemoCustomInputCustomCheckboxesWithImage.vue')['default']
-    DemoCustomInputCustomRadios: typeof import('./src/views/demos/forms/form-elements/custom-input/DemoCustomInputCustomRadios.vue')['default']
-    DemoCustomInputCustomRadiosWithIcon: typeof import('./src/views/demos/forms/form-elements/custom-input/DemoCustomInputCustomRadiosWithIcon.vue')['default']
-    DemoCustomInputCustomRadiosWithImage: typeof import('./src/views/demos/forms/form-elements/custom-input/DemoCustomInputCustomRadiosWithImage.vue')['default']
-    DemoDataTableBasic: typeof import('./src/views/demos/forms/tables/data-table/DemoDataTableBasic.vue')['default']
-    DemoDataTableCellSlot: typeof import('./src/views/demos/forms/tables/data-table/DemoDataTableCellSlot.vue')['default']
-    DemoDataTableDense: typeof import('./src/views/demos/forms/tables/data-table/DemoDataTableDense.vue')['default']
-    DemoDataTableExpandableRows: typeof import('./src/views/demos/forms/tables/data-table/DemoDataTableExpandableRows.vue')['default']
-    DemoDataTableExternalPagination: typeof import('./src/views/demos/forms/tables/data-table/DemoDataTableExternalPagination.vue')['default']
-    DemoDataTableFixedHeader: typeof import('./src/views/demos/forms/tables/data-table/DemoDataTableFixedHeader.vue')['default']
-    DemoDataTableGroupingRows: typeof import('./src/views/demos/forms/tables/data-table/DemoDataTableGroupingRows.vue')['default']
-    DemoDataTableKitchenSink: typeof import('./src/views/demos/forms/tables/data-table/DemoDataTableKitchenSink.vue')['default']
-    DemoDataTableRowEditingViaDialog: typeof import('./src/views/demos/forms/tables/data-table/DemoDataTableRowEditingViaDialog.vue')['default']
-    DemoDataTableRowSelection: typeof import('./src/views/demos/forms/tables/data-table/DemoDataTableRowSelection.vue')['default']
-    DemoDateTimePickerBasic: typeof import('./src/views/demos/forms/form-elements/date-time-picker/DemoDateTimePickerBasic.vue')['default']
-    DemoDateTimePickerDateAndTime: typeof import('./src/views/demos/forms/form-elements/date-time-picker/DemoDateTimePickerDateAndTime.vue')['default']
-    DemoDateTimePickerDisabledRange: typeof import('./src/views/demos/forms/form-elements/date-time-picker/DemoDateTimePickerDisabledRange.vue')['default']
-    DemoDateTimePickerHumanFriendly: typeof import('./src/views/demos/forms/form-elements/date-time-picker/DemoDateTimePickerHumanFriendly.vue')['default']
-    DemoDateTimePickerInline: typeof import('./src/views/demos/forms/form-elements/date-time-picker/DemoDateTimePickerInline.vue')['default']
-    DemoDateTimePickerMultipleDates: typeof import('./src/views/demos/forms/form-elements/date-time-picker/DemoDateTimePickerMultipleDates.vue')['default']
-    DemoDateTimePickerRange: typeof import('./src/views/demos/forms/form-elements/date-time-picker/DemoDateTimePickerRange.vue')['default']
-    DemoDateTimePickerTimePicker: typeof import('./src/views/demos/forms/form-elements/date-time-picker/DemoDateTimePickerTimePicker.vue')['default']
-    DemoDialogBasic: typeof import('./src/views/demos/components/dialog/DemoDialogBasic.vue')['default']
-    DemoDialogForm: typeof import('./src/views/demos/components/dialog/DemoDialogForm.vue')['default']
-    DemoDialogFullscreen: typeof import('./src/views/demos/components/dialog/DemoDialogFullscreen.vue')['default']
-    DemoDialogLoader: typeof import('./src/views/demos/components/dialog/DemoDialogLoader.vue')['default']
-    DemoDialogNesting: typeof import('./src/views/demos/components/dialog/DemoDialogNesting.vue')['default']
-    DemoDialogOverflowed: typeof import('./src/views/demos/components/dialog/DemoDialogOverflowed.vue')['default']
-    DemoDialogPersistent: typeof import('./src/views/demos/components/dialog/DemoDialogPersistent.vue')['default']
-    DemoDialogScrollable: typeof import('./src/views/demos/components/dialog/DemoDialogScrollable.vue')['default']
-    DemoEditorBasicEditor: typeof import('./src/views/demos/forms/form-elements/editor/DemoEditorBasicEditor.vue')['default']
-    DemoEditorCustomEditor: typeof import('./src/views/demos/forms/form-elements/editor/DemoEditorCustomEditor.vue')['default']
-    DemoExpansionPanelAccordion: typeof import('./src/views/demos/components/expansion-panel/DemoExpansionPanelAccordion.vue')['default']
-    DemoExpansionPanelBasic: typeof import('./src/views/demos/components/expansion-panel/DemoExpansionPanelBasic.vue')['default']
-    DemoExpansionPanelCustomIcon: typeof import('./src/views/demos/components/expansion-panel/DemoExpansionPanelCustomIcon.vue')['default']
-    DemoExpansionPanelInset: typeof import('./src/views/demos/components/expansion-panel/DemoExpansionPanelInset.vue')['default']
-    DemoExpansionPanelModel: typeof import('./src/views/demos/components/expansion-panel/DemoExpansionPanelModel.vue')['default']
-    DemoExpansionPanelPopout: typeof import('./src/views/demos/components/expansion-panel/DemoExpansionPanelPopout.vue')['default']
-    DemoExpansionPanelWithBorder: typeof import('./src/views/demos/components/expansion-panel/DemoExpansionPanelWithBorder.vue')['default']
-    DemoFileInputAccept: typeof import('./src/views/demos/forms/form-elements/file-input/DemoFileInputAccept.vue')['default']
-    DemoFileInputBasic: typeof import('./src/views/demos/forms/form-elements/file-input/DemoFileInputBasic.vue')['default']
-    DemoFileInputChips: typeof import('./src/views/demos/forms/form-elements/file-input/DemoFileInputChips.vue')['default']
-    DemoFileInputCounter: typeof import('./src/views/demos/forms/form-elements/file-input/DemoFileInputCounter.vue')['default']
-    DemoFileInputDensity: typeof import('./src/views/demos/forms/form-elements/file-input/DemoFileInputDensity.vue')['default']
-    DemoFileInputLoading: typeof import('./src/views/demos/forms/form-elements/file-input/DemoFileInputLoading.vue')['default']
-    DemoFileInputMultiple: typeof import('./src/views/demos/forms/form-elements/file-input/DemoFileInputMultiple.vue')['default']
-    DemoFileInputPrependIcon: typeof import('./src/views/demos/forms/form-elements/file-input/DemoFileInputPrependIcon.vue')['default']
-    DemoFileInputSelectionSlot: typeof import('./src/views/demos/forms/form-elements/file-input/DemoFileInputSelectionSlot.vue')['default']
-    DemoFileInputShowSize: typeof import('./src/views/demos/forms/form-elements/file-input/DemoFileInputShowSize.vue')['default']
-    DemoFileInputValidation: typeof import('./src/views/demos/forms/form-elements/file-input/DemoFileInputValidation.vue')['default']
-    DemoFileInputVariant: typeof import('./src/views/demos/forms/form-elements/file-input/DemoFileInputVariant.vue')['default']
-    DemoFormLayoutCollapsible: typeof import('./src/views/demos/forms/form-layout/DemoFormLayoutCollapsible.vue')['default']
-    DemoFormLayoutFormHint: typeof import('./src/views/demos/forms/form-layout/DemoFormLayoutFormHint.vue')['default']
-    DemoFormLayoutFormSticky: typeof import('./src/views/demos/forms/form-layout/DemoFormLayoutFormSticky.vue')['default']
-    DemoFormLayoutFormValidation: typeof import('./src/views/demos/forms/form-layout/DemoFormLayoutFormValidation.vue')['default']
-    DemoFormLayoutFormWithTabs: typeof import('./src/views/demos/forms/form-layout/DemoFormLayoutFormWithTabs.vue')['default']
-    DemoFormLayoutHorizontalForm: typeof import('./src/views/demos/forms/form-layout/DemoFormLayoutHorizontalForm.vue')['default']
-    DemoFormLayoutHorizontalFormWithIcons: typeof import('./src/views/demos/forms/form-layout/DemoFormLayoutHorizontalFormWithIcons.vue')['default']
-    DemoFormLayoutMultipleColumn: typeof import('./src/views/demos/forms/form-layout/DemoFormLayoutMultipleColumn.vue')['default']
-    DemoFormLayoutSticky: typeof import('./src/views/demos/forms/form-layout/DemoFormLayoutSticky.vue')['default']
-    DemoFormLayoutVerticalForm: typeof import('./src/views/demos/forms/form-layout/DemoFormLayoutVerticalForm.vue')['default']
-    DemoFormLayoutVerticalFormWithIcons: typeof import('./src/views/demos/forms/form-layout/DemoFormLayoutVerticalFormWithIcons.vue')['default']
-    DemoFormValidationSimpleFormValidation: typeof import('./src/views/demos/forms/form-validation/DemoFormValidationSimpleFormValidation.vue')['default']
-    DemoFormValidationValidatingMultipleRules: typeof import('./src/views/demos/forms/form-validation/DemoFormValidationValidatingMultipleRules.vue')['default']
-    DemoFormValidationValidationTypes: typeof import('./src/views/demos/forms/form-validation/DemoFormValidationValidationTypes.vue')['default']
-    DemoFormWizardIconsBasic: typeof import('./src/views/demos/forms/form-wizard/form-wizard-icons/DemoFormWizardIconsBasic.vue')['default']
-    DemoFormWizardIconsModernBasic: typeof import('./src/views/demos/forms/form-wizard/form-wizard-icons/DemoFormWizardIconsModernBasic.vue')['default']
-    DemoFormWizardIconsModernVertical: typeof import('./src/views/demos/forms/form-wizard/form-wizard-icons/DemoFormWizardIconsModernVertical.vue')['default']
-    DemoFormWizardIconsValidation: typeof import('./src/views/demos/forms/form-wizard/form-wizard-icons/DemoFormWizardIconsValidation.vue')['default']
-    DemoFormWizardIconsVertical: typeof import('./src/views/demos/forms/form-wizard/form-wizard-icons/DemoFormWizardIconsVertical.vue')['default']
-    DemoFormWizardNumberedBasic: typeof import('./src/views/demos/forms/form-wizard/form-wizard-numbered/DemoFormWizardNumberedBasic.vue')['default']
-    DemoFormWizardNumberedModernBasic: typeof import('./src/views/demos/forms/form-wizard/form-wizard-numbered/DemoFormWizardNumberedModernBasic.vue')['default']
-    DemoFormWizardNumberedModernVertical: typeof import('./src/views/demos/forms/form-wizard/form-wizard-numbered/DemoFormWizardNumberedModernVertical.vue')['default']
-    DemoFormWizardNumberedValidation: typeof import('./src/views/demos/forms/form-wizard/form-wizard-numbered/DemoFormWizardNumberedValidation.vue')['default']
-    DemoFormWizardNumberedVertical: typeof import('./src/views/demos/forms/form-wizard/form-wizard-numbered/DemoFormWizardNumberedVertical.vue')['default']
-    DemoListActionAndItemGroup: typeof import('./src/views/demos/components/list/DemoListActionAndItemGroup.vue')['default']
-    DemoListBasic: typeof import('./src/views/demos/components/list/DemoListBasic.vue')['default']
-    DemoListDensity: typeof import('./src/views/demos/components/list/DemoListDensity.vue')['default']
-    DemoListNav: typeof import('./src/views/demos/components/list/DemoListNav.vue')['default']
-    DemoListProgressList: typeof import('./src/views/demos/components/list/DemoListProgressList.vue')['default']
-    DemoListRounded: typeof import('./src/views/demos/components/list/DemoListRounded.vue')['default']
-    DemoListShaped: typeof import('./src/views/demos/components/list/DemoListShaped.vue')['default']
-    DemoListSubGroup: typeof import('./src/views/demos/components/list/DemoListSubGroup.vue')['default']
-    DemoListThreeLine: typeof import('./src/views/demos/components/list/DemoListThreeLine.vue')['default']
-    DemoListTwoLinesAndSubheader: typeof import('./src/views/demos/components/list/DemoListTwoLinesAndSubheader.vue')['default']
-    DemoListUserList: typeof import('./src/views/demos/components/list/DemoListUserList.vue')['default']
-    DemoMenuActivatorAndTooltip: typeof import('./src/views/demos/components/menu/DemoMenuActivatorAndTooltip.vue')['default']
-    DemoMenuBasic: typeof import('./src/views/demos/components/menu/DemoMenuBasic.vue')['default']
-    DemoMenuCustomTransitions: typeof import('./src/views/demos/components/menu/DemoMenuCustomTransitions.vue')['default']
-    DemoMenuLocation: typeof import('./src/views/demos/components/menu/DemoMenuLocation.vue')['default']
-    DemoMenuOpenOnHover: typeof import('./src/views/demos/components/menu/DemoMenuOpenOnHover.vue')['default']
-    DemoMenuPopover: typeof import('./src/views/demos/components/menu/DemoMenuPopover.vue')['default']
-    DemoOtpInputBasic: typeof import('./src/views/demos/forms/form-elements/otp-input/DemoOtpInputBasic.vue')['default']
-    DemoOtpInputFinish: typeof import('./src/views/demos/forms/form-elements/otp-input/DemoOtpInputFinish.vue')['default']
-    DemoOtpInputHidden: typeof import('./src/views/demos/forms/form-elements/otp-input/DemoOtpInputHidden.vue')['default']
-    DemoPaginationBasic: typeof import('./src/views/demos/components/pagination/DemoPaginationBasic.vue')['default']
-    DemoPaginationCircle: typeof import('./src/views/demos/components/pagination/DemoPaginationCircle.vue')['default']
-    DemoPaginationColor: typeof import('./src/views/demos/components/pagination/DemoPaginationColor.vue')['default']
-    DemoPaginationDisabled: typeof import('./src/views/demos/components/pagination/DemoPaginationDisabled.vue')['default']
-    DemoPaginationIcons: typeof import('./src/views/demos/components/pagination/DemoPaginationIcons.vue')['default']
-    DemoPaginationLength: typeof import('./src/views/demos/components/pagination/DemoPaginationLength.vue')['default']
-    DemoPaginationOutline: typeof import('./src/views/demos/components/pagination/DemoPaginationOutline.vue')['default']
-    DemoPaginationOutlineCircle: typeof import('./src/views/demos/components/pagination/DemoPaginationOutlineCircle.vue')['default']
-    DemoPaginationSize: typeof import('./src/views/demos/components/pagination/DemoPaginationSize.vue')['default']
-    DemoPaginationTotalVisible: typeof import('./src/views/demos/components/pagination/DemoPaginationTotalVisible.vue')['default']
-    DemoProgressCircularColor: typeof import('./src/views/demos/components/progress-circular/DemoProgressCircularColor.vue')['default']
-    DemoProgressCircularIndeterminate: typeof import('./src/views/demos/components/progress-circular/DemoProgressCircularIndeterminate.vue')['default']
-    DemoProgressCircularRotate: typeof import('./src/views/demos/components/progress-circular/DemoProgressCircularRotate.vue')['default']
-    DemoProgressCircularSize: typeof import('./src/views/demos/components/progress-circular/DemoProgressCircularSize.vue')['default']
-    DemoProgressLinearBuffering: typeof import('./src/views/demos/components/progress-linear/DemoProgressLinearBuffering.vue')['default']
-    DemoProgressLinearColor: typeof import('./src/views/demos/components/progress-linear/DemoProgressLinearColor.vue')['default']
-    DemoProgressLinearIndeterminate: typeof import('./src/views/demos/components/progress-linear/DemoProgressLinearIndeterminate.vue')['default']
-    DemoProgressLinearReversed: typeof import('./src/views/demos/components/progress-linear/DemoProgressLinearReversed.vue')['default']
-    DemoProgressLinearRounded: typeof import('./src/views/demos/components/progress-linear/DemoProgressLinearRounded.vue')['default']
-    DemoProgressLinearSlots: typeof import('./src/views/demos/components/progress-linear/DemoProgressLinearSlots.vue')['default']
-    DemoProgressLinearStriped: typeof import('./src/views/demos/components/progress-linear/DemoProgressLinearStriped.vue')['default']
-    DemoRadioBasic: typeof import('./src/views/demos/forms/form-elements/radio/DemoRadioBasic.vue')['default']
-    DemoRadioColors: typeof import('./src/views/demos/forms/form-elements/radio/DemoRadioColors.vue')['default']
-    DemoRadioDensity: typeof import('./src/views/demos/forms/form-elements/radio/DemoRadioDensity.vue')['default']
-    DemoRadioIcon: typeof import('./src/views/demos/forms/form-elements/radio/DemoRadioIcon.vue')['default']
-    DemoRadioInline: typeof import('./src/views/demos/forms/form-elements/radio/DemoRadioInline.vue')['default']
-    DemoRadioLabelSlot: typeof import('./src/views/demos/forms/form-elements/radio/DemoRadioLabelSlot.vue')['default']
-    DemoRadioValidation: typeof import('./src/views/demos/forms/form-elements/radio/DemoRadioValidation.vue')['default']
-    DemoRangeSliderBasic: typeof import('./src/views/demos/forms/form-elements/range-slider/DemoRangeSliderBasic.vue')['default']
-    DemoRangeSliderColor: typeof import('./src/views/demos/forms/form-elements/range-slider/DemoRangeSliderColor.vue')['default']
-    DemoRangeSliderDisabled: typeof import('./src/views/demos/forms/form-elements/range-slider/DemoRangeSliderDisabled.vue')['default']
-    DemoRangeSliderStep: typeof import('./src/views/demos/forms/form-elements/range-slider/DemoRangeSliderStep.vue')['default']
-    DemoRangeSliderThumbLabel: typeof import('./src/views/demos/forms/form-elements/range-slider/DemoRangeSliderThumbLabel.vue')['default']
-    DemoRangeSliderVertical: typeof import('./src/views/demos/forms/form-elements/range-slider/DemoRangeSliderVertical.vue')['default']
-    DemoRatingBasic: typeof import('./src/views/demos/forms/form-elements/rating/DemoRatingBasic.vue')['default']
-    DemoRatingClearable: typeof import('./src/views/demos/forms/form-elements/rating/DemoRatingClearable.vue')['default']
-    DemoRatingColors: typeof import('./src/views/demos/forms/form-elements/rating/DemoRatingColors.vue')['default']
-    DemoRatingDensity: typeof import('./src/views/demos/forms/form-elements/rating/DemoRatingDensity.vue')['default']
-    DemoRatingHover: typeof import('./src/views/demos/forms/form-elements/rating/DemoRatingHover.vue')['default']
-    DemoRatingIncremented: typeof import('./src/views/demos/forms/form-elements/rating/DemoRatingIncremented.vue')['default']
-    DemoRatingItemSlot: typeof import('./src/views/demos/forms/form-elements/rating/DemoRatingItemSlot.vue')['default']
-    DemoRatingLength: typeof import('./src/views/demos/forms/form-elements/rating/DemoRatingLength.vue')['default']
-    DemoRatingReadonly: typeof import('./src/views/demos/forms/form-elements/rating/DemoRatingReadonly.vue')['default']
-    DemoRatingSize: typeof import('./src/views/demos/forms/form-elements/rating/DemoRatingSize.vue')['default']
-    DemoSelectBasic: typeof import('./src/views/demos/forms/form-elements/select/DemoSelectBasic.vue')['default']
-    DemoSelectChips: typeof import('./src/views/demos/forms/form-elements/select/DemoSelectChips.vue')['default']
-    DemoSelectCustomTextAndValue: typeof import('./src/views/demos/forms/form-elements/select/DemoSelectCustomTextAndValue.vue')['default']
-    DemoSelectDensity: typeof import('./src/views/demos/forms/form-elements/select/DemoSelectDensity.vue')['default']
-    DemoSelectIcons: typeof import('./src/views/demos/forms/form-elements/select/DemoSelectIcons.vue')['default']
-    DemoSelectMenuProps: typeof import('./src/views/demos/forms/form-elements/select/DemoSelectMenuProps.vue')['default']
-    DemoSelectMultiple: typeof import('./src/views/demos/forms/form-elements/select/DemoSelectMultiple.vue')['default']
-    DemoSelectSelectionSlot: typeof import('./src/views/demos/forms/form-elements/select/DemoSelectSelectionSlot.vue')['default']
-    DemoSelectVariant: typeof import('./src/views/demos/forms/form-elements/select/DemoSelectVariant.vue')['default']
-    DemoSimpleTableBasic: typeof import('./src/views/demos/forms/tables/simple-table/DemoSimpleTableBasic.vue')['default']
-    DemoSimpleTableDensity: typeof import('./src/views/demos/forms/tables/simple-table/DemoSimpleTableDensity.vue')['default']
-    DemoSimpleTableFixedHeader: typeof import('./src/views/demos/forms/tables/simple-table/DemoSimpleTableFixedHeader.vue')['default']
-    DemoSimpleTableHeight: typeof import('./src/views/demos/forms/tables/simple-table/DemoSimpleTableHeight.vue')['default']
-    DemoSimpleTableTheme: typeof import('./src/views/demos/forms/tables/simple-table/DemoSimpleTableTheme.vue')['default']
-    DemoSliderAppendAndPrepend: typeof import('./src/views/demos/forms/form-elements/slider/DemoSliderAppendAndPrepend.vue')['default']
-    DemoSliderAppendTextField: typeof import('./src/views/demos/forms/form-elements/slider/DemoSliderAppendTextField.vue')['default']
-    DemoSliderBasic: typeof import('./src/views/demos/forms/form-elements/slider/DemoSliderBasic.vue')['default']
-    DemoSliderColors: typeof import('./src/views/demos/forms/form-elements/slider/DemoSliderColors.vue')['default']
-    DemoSliderDisabledAndReadonly: typeof import('./src/views/demos/forms/form-elements/slider/DemoSliderDisabledAndReadonly.vue')['default']
-    DemoSliderIcons: typeof import('./src/views/demos/forms/form-elements/slider/DemoSliderIcons.vue')['default']
-    DemoSliderMinAndMax: typeof import('./src/views/demos/forms/form-elements/slider/DemoSliderMinAndMax.vue')['default']
-    DemoSliderSize: typeof import('./src/views/demos/forms/form-elements/slider/DemoSliderSize.vue')['default']
-    DemoSliderStep: typeof import('./src/views/demos/forms/form-elements/slider/DemoSliderStep.vue')['default']
-    DemoSliderThumb: typeof import('./src/views/demos/forms/form-elements/slider/DemoSliderThumb.vue')['default']
-    DemoSliderTicks: typeof import('./src/views/demos/forms/form-elements/slider/DemoSliderTicks.vue')['default']
-    DemoSliderValidation: typeof import('./src/views/demos/forms/form-elements/slider/DemoSliderValidation.vue')['default']
-    DemoSliderVertical: typeof import('./src/views/demos/forms/form-elements/slider/DemoSliderVertical.vue')['default']
-    DemoSnackbarBasic: typeof import('./src/views/demos/components/snackbar/DemoSnackbarBasic.vue')['default']
-    DemoSnackbarMultiLine: typeof import('./src/views/demos/components/snackbar/DemoSnackbarMultiLine.vue')['default']
-    DemoSnackbarPosition: typeof import('./src/views/demos/components/snackbar/DemoSnackbarPosition.vue')['default']
-    DemoSnackbarTimeout: typeof import('./src/views/demos/components/snackbar/DemoSnackbarTimeout.vue')['default']
-    DemoSnackbarTransition: typeof import('./src/views/demos/components/snackbar/DemoSnackbarTransition.vue')['default']
-    DemoSnackbarVariants: typeof import('./src/views/demos/components/snackbar/DemoSnackbarVariants.vue')['default']
-    DemoSnackbarVertical: typeof import('./src/views/demos/components/snackbar/DemoSnackbarVertical.vue')['default']
-    DemoSnackbarWithAction: typeof import('./src/views/demos/components/snackbar/DemoSnackbarWithAction.vue')['default']
-    DemoSwiperAutoplay: typeof import('./src/views/demos/components/swiper/DemoSwiperAutoplay.vue')['default']
-    DemoSwiperBasic: typeof import('./src/views/demos/components/swiper/DemoSwiperBasic.vue')['default']
-    DemoSwiperCenteredSlidesOption1: typeof import('./src/views/demos/components/swiper/DemoSwiperCenteredSlidesOption1.vue')['default']
-    DemoSwiperCenteredSlidesOption2: typeof import('./src/views/demos/components/swiper/DemoSwiperCenteredSlidesOption2.vue')['default']
-    DemoSwiperCoverflowEffect: typeof import('./src/views/demos/components/swiper/DemoSwiperCoverflowEffect.vue')['default']
-    DemoSwiperCubeEffect: typeof import('./src/views/demos/components/swiper/DemoSwiperCubeEffect.vue')['default']
-    DemoSwiperFade: typeof import('./src/views/demos/components/swiper/DemoSwiperFade.vue')['default']
-    DemoSwiperGallery: typeof import('./src/views/demos/components/swiper/DemoSwiperGallery.vue')['default']
-    DemoSwiperGrid: typeof import('./src/views/demos/components/swiper/DemoSwiperGrid.vue')['default']
-    DemoSwiperLazyLoading: typeof import('./src/views/demos/components/swiper/DemoSwiperLazyLoading.vue')['default']
-    DemoSwiperMultipleSlidesPerView: typeof import('./src/views/demos/components/swiper/DemoSwiperMultipleSlidesPerView.vue')['default']
-    DemoSwiperNavigation: typeof import('./src/views/demos/components/swiper/DemoSwiperNavigation.vue')['default']
-    DemoSwiperPagination: typeof import('./src/views/demos/components/swiper/DemoSwiperPagination.vue')['default']
-    DemoSwiperProgress: typeof import('./src/views/demos/components/swiper/DemoSwiperProgress.vue')['default']
-    DemoSwiperResponsiveBreakpoints: typeof import('./src/views/demos/components/swiper/DemoSwiperResponsiveBreakpoints.vue')['default']
-    DemoSwiperVirtualSlides: typeof import('./src/views/demos/components/swiper/DemoSwiperVirtualSlides.vue')['default']
-    DemoSwitchBasic: typeof import('./src/views/demos/forms/form-elements/switch/DemoSwitchBasic.vue')['default']
-    DemoSwitchColors: typeof import('./src/views/demos/forms/form-elements/switch/DemoSwitchColors.vue')['default']
-    DemoSwitchInset: typeof import('./src/views/demos/forms/form-elements/switch/DemoSwitchInset.vue')['default']
-    DemoSwitchLabelSlot: typeof import('./src/views/demos/forms/form-elements/switch/DemoSwitchLabelSlot.vue')['default']
-    DemoSwitchModelAsArray: typeof import('./src/views/demos/forms/form-elements/switch/DemoSwitchModelAsArray.vue')['default']
-    DemoSwitchStates: typeof import('./src/views/demos/forms/form-elements/switch/DemoSwitchStates.vue')['default']
-    DemoSwitchTrueAndFalseValue: typeof import('./src/views/demos/forms/form-elements/switch/DemoSwitchTrueAndFalseValue.vue')['default']
-    DemoTabsAlignment: typeof import('./src/views/demos/components/tabs/DemoTabsAlignment.vue')['default']
-    DemoTabsBasic: typeof import('./src/views/demos/components/tabs/DemoTabsBasic.vue')['default']
-    DemoTabsBasicPill: typeof import('./src/views/demos/components/tabs/DemoTabsBasicPill.vue')['default']
-    DemoTabsCustomIcons: typeof import('./src/views/demos/components/tabs/DemoTabsCustomIcons.vue')['default']
-    DemoTabsDynamic: typeof import('./src/views/demos/components/tabs/DemoTabsDynamic.vue')['default']
-    DemoTabsFixed: typeof import('./src/views/demos/components/tabs/DemoTabsFixed.vue')['default']
-    DemoTabsGrow: typeof import('./src/views/demos/components/tabs/DemoTabsGrow.vue')['default']
-    DemoTabsPagination: typeof import('./src/views/demos/components/tabs/DemoTabsPagination.vue')['default']
-    DemoTabsProgrammaticNavigation: typeof import('./src/views/demos/components/tabs/DemoTabsProgrammaticNavigation.vue')['default']
-    DemoTabsStacked: typeof import('./src/views/demos/components/tabs/DemoTabsStacked.vue')['default']
-    DemoTabsVertical: typeof import('./src/views/demos/components/tabs/DemoTabsVertical.vue')['default']
-    DemoTabsVerticalPill: typeof import('./src/views/demos/components/tabs/DemoTabsVerticalPill.vue')['default']
-    DemoTextareaAutoGrow: typeof import('./src/views/demos/forms/form-elements/textarea/DemoTextareaAutoGrow.vue')['default']
-    DemoTextareaBasic: typeof import('./src/views/demos/forms/form-elements/textarea/DemoTextareaBasic.vue')['default']
-    DemoTextareaBrowserAutocomplete: typeof import('./src/views/demos/forms/form-elements/textarea/DemoTextareaBrowserAutocomplete.vue')['default']
-    DemoTextareaClearable: typeof import('./src/views/demos/forms/form-elements/textarea/DemoTextareaClearable.vue')['default']
-    DemoTextareaCounter: typeof import('./src/views/demos/forms/form-elements/textarea/DemoTextareaCounter.vue')['default']
-    DemoTextareaIcons: typeof import('./src/views/demos/forms/form-elements/textarea/DemoTextareaIcons.vue')['default']
-    DemoTextareaNoResize: typeof import('./src/views/demos/forms/form-elements/textarea/DemoTextareaNoResize.vue')['default']
-    DemoTextareaRows: typeof import('./src/views/demos/forms/form-elements/textarea/DemoTextareaRows.vue')['default']
-    DemoTextareaStates: typeof import('./src/views/demos/forms/form-elements/textarea/DemoTextareaStates.vue')['default']
-    DemoTextareaValidation: typeof import('./src/views/demos/forms/form-elements/textarea/DemoTextareaValidation.vue')['default']
-    DemoTextareaVariant: typeof import('./src/views/demos/forms/form-elements/textarea/DemoTextareaVariant.vue')['default']
-    DemoTextfieldBasic: typeof import('./src/views/demos/forms/form-elements/textfield/DemoTextfieldBasic.vue')['default']
-    DemoTextfieldClearable: typeof import('./src/views/demos/forms/form-elements/textfield/DemoTextfieldClearable.vue')['default']
-    DemoTextfieldCounter: typeof import('./src/views/demos/forms/form-elements/textfield/DemoTextfieldCounter.vue')['default']
-    DemoTextfieldCustomColors: typeof import('./src/views/demos/forms/form-elements/textfield/DemoTextfieldCustomColors.vue')['default']
-    DemoTextfieldDensity: typeof import('./src/views/demos/forms/form-elements/textfield/DemoTextfieldDensity.vue')['default']
-    DemoTextfieldIconEvents: typeof import('./src/views/demos/forms/form-elements/textfield/DemoTextfieldIconEvents.vue')['default']
-    DemoTextfieldIcons: typeof import('./src/views/demos/forms/form-elements/textfield/DemoTextfieldIcons.vue')['default']
-    DemoTextfieldIconSlots: typeof import('./src/views/demos/forms/form-elements/textfield/DemoTextfieldIconSlots.vue')['default']
-    DemoTextfieldLabelSlot: typeof import('./src/views/demos/forms/form-elements/textfield/DemoTextfieldLabelSlot.vue')['default']
-    DemoTextfieldPasswordInput: typeof import('./src/views/demos/forms/form-elements/textfield/DemoTextfieldPasswordInput.vue')['default']
-    DemoTextfieldPrefixesAndSuffixes: typeof import('./src/views/demos/forms/form-elements/textfield/DemoTextfieldPrefixesAndSuffixes.vue')['default']
-    DemoTextfieldSingleLine: typeof import('./src/views/demos/forms/form-elements/textfield/DemoTextfieldSingleLine.vue')['default']
-    DemoTextfieldState: typeof import('./src/views/demos/forms/form-elements/textfield/DemoTextfieldState.vue')['default']
-    DemoTextfieldValidation: typeof import('./src/views/demos/forms/form-elements/textfield/DemoTextfieldValidation.vue')['default']
-    DemoTextfieldVariant: typeof import('./src/views/demos/forms/form-elements/textfield/DemoTextfieldVariant.vue')['default']
-    DemoTooltipDelayOnHover: typeof import('./src/views/demos/components/tooltip/DemoTooltipDelayOnHover.vue')['default']
-    DemoTooltipEvents: typeof import('./src/views/demos/components/tooltip/DemoTooltipEvents.vue')['default']
-    DemoTooltipLocation: typeof import('./src/views/demos/components/tooltip/DemoTooltipLocation.vue')['default']
-    DemoTooltipTooltipOnVariousElements: typeof import('./src/views/demos/components/tooltip/DemoTooltipTooltipOnVariousElements.vue')['default']
-    DemoTooltipTransition: typeof import('./src/views/demos/components/tooltip/DemoTooltipTransition.vue')['default']
-    DemoTooltipVModelSupport: typeof import('./src/views/demos/components/tooltip/DemoTooltipVModelSupport.vue')['default']
    DialogCloseBtn: typeof import('./src/@core/components/DialogCloseBtn.vue')['default']
    DropZone: typeof import('./src/@core/components/DropZone.vue')['default']
+    EditEventDialog: typeof import('./src/components/events/EditEventDialog.vue')['default']
+    EditOrganisationDialog: typeof import('./src/components/organisations/EditOrganisationDialog.vue')['default']
    EnableOneTimePasswordDialog: typeof import('./src/components/dialogs/EnableOneTimePasswordDialog.vue')['default']
    ErrorHeader: typeof import('./src/components/ErrorHeader.vue')['default']
    I18n: typeof import('./src/@core/components/I18n.vue')['default']
    MoreBtn: typeof import('./src/@core/components/MoreBtn.vue')['default']
    Notifications: typeof import('./src/@core/components/Notifications.vue')['default']
+    OrganisationSwitcher: typeof import('./src/components/layout/OrganisationSwitcher.vue')['default']
    PaymentProvidersDialog: typeof import('./src/components/dialogs/PaymentProvidersDialog.vue')['default']
-    PricingPlanDialog: typeof import('./src/components/dialogs/PricingPlanDialog.vue')['default']
    ProductDescriptionEditor: typeof import('./src/@core/components/ProductDescriptionEditor.vue')['default']
-    ReferAndEarnDialog: typeof import('./src/components/dialogs/ReferAndEarnDialog.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
    ScrollToTop: typeof import('./src/@core/components/ScrollToTop.vue')['default']
    ShareProjectDialog: typeof import('./src/components/dialogs/ShareProjectDialog.vue')['default']
    Shortcuts: typeof import('./src/@core/components/Shortcuts.vue')['default']
    TablePagination: typeof import('./src/@core/components/TablePagination.vue')['default']
-    TheCustomizer: typeof import('./src/@core/components/TheCustomizer.vue')['default']
    ThemeSwitcher: typeof import('./src/@core/components/ThemeSwitcher.vue')['default']
-    TimelineBasic: typeof import('./src/views/demos/components/timeline/TimelineBasic.vue')['default']
-    TimelineOutlined: typeof import('./src/views/demos/components/timeline/TimelineOutlined.vue')['default']
-    TimelineWithIcons: typeof import('./src/views/demos/components/timeline/TimelineWithIcons.vue')['default']
    TiptapEditor: typeof import('./src/@core/components/TiptapEditor.vue')['default']
    TwoFactorAuthDialog: typeof import('./src/components/dialogs/TwoFactorAuthDialog.vue')['default']
    UserInfoEditDialog: typeof import('./src/components/dialogs/UserInfoEditDialog.vue')['default']
-    UserUpgradePlanDialog: typeof import('./src/components/dialogs/UserUpgradePlanDialog.vue')['default']
-    VueApexCharts: typeof import('vue3-apexcharts')['default']
  }
 }
--- a/apps/app/package.json
+++ b/apps/app/package.json
@@ -72,6 +72,7 @@
    "@iconify-json/mdi": "1.2.3",
    "@iconify-json/tabler": "1.2.23",
    "@iconify/tools": "4.1.4",
+    "@iconify/types": "^2.0.0",
    "@iconify/utils": "2.3.0",
    "@iconify/vue": "4.1.2",
    "@intlify/unplugin-vue-i18n": "11.0.1",
--- a/apps/app/pnpm-lock.yaml
+++ b/apps/app/pnpm-lock.yaml
@@ -181,6 +181,9 @@ importers:
      '@iconify/tools':
        specifier: 4.1.4
        version: 4.1.4
+      '@iconify/types':
+        specifier: ^2.0.0
+        version: 2.0.0
      '@iconify/utils':
        specifier: 2.3.0
        version: 2.3.0
--- a/apps/app/src/App.vue
+++ b/apps/app/src/App.vue
@@ -4,6 +4,7 @@ import ScrollToTop from '@core/components/ScrollToTop.vue'
 import initCore from '@core/initCore'
 import { initConfigStore, useConfigStore } from '@core/stores/config'
 import { hexToRgb } from '@core/utils/colorConverter'
+import { useMe } from '@/composables/api/useAuth'

 const { global } = useTheme()

@@ -12,6 +13,9 @@ initCore()
 initConfigStore()

 const configStore = useConfigStore()
+
+// Hydrate auth store on page load (token survives in localStorage, user data does not)
+useMe()
 </script>

 <template>
--- a/apps/app/src/components/events/CreateEventDialog.vue
+++ b/apps/app/src/components/events/CreateEventDialog.vue
@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { VForm } from 'vuetify/components/VForm'
+import { useCreateEvent } from '@/composables/api/useEvents'
+import { requiredValidator } from '@core/utils/validators'
+
+const props = defineProps<{
+  orgId: string
+}>()
+
+const modelValue = defineModel<boolean>({ required: true })
+
+const orgIdRef = computed(() => props.orgId)
+
+const form = ref({
+  name: '',
+  slug: '',
+  start_date: '',
+  end_date: '',
+  timezone: 'Europe/Amsterdam',
+})
+
+const errors = ref<Record<string, string>>({})
+const refVForm = ref<VForm>()
+const showSuccess = ref(false)
+
+const { mutate: createEvent, isPending } = useCreateEvent(orgIdRef)
+
+const timezoneOptions = [
+  { title: 'Europe/Amsterdam', value: 'Europe/Amsterdam' },
+  { title: 'Europe/London', value: 'Europe/London' },
+  { title: 'Europe/Paris', value: 'Europe/Paris' },
+  { title: 'UTC', value: 'UTC' },
+]
+
+watch(() => form.value.name, (name) => {
+  form.value.slug = name
+    .toLowerCase()
+    .replace(/[^a-z0-9\s-]/g, '')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '')
+})
+
+const endDateRule = (v: string) => {
+  if (!v) return 'Einddatum is verplicht'
+  if (form.value.start_date && v < form.value.start_date) {
+    return 'Einddatum moet op of na startdatum liggen'
+  }
+  return true
+}
+
+function resetForm() {
+  form.value = { name: '', slug: '', start_date: '', end_date: '', timezone: 'Europe/Amsterdam' }
+  errors.value = {}
+  refVForm.value?.resetValidation()
+}
+
+function onSubmit() {
+  refVForm.value?.validate().then(({ valid }) => {
+    if (!valid) return
+
+    errors.value = {}
+
+    createEvent(form.value, {
+      onSuccess: () => {
+        modelValue.value = false
+        showSuccess.value = true
+        resetForm()
+      },
+      onError: (err: any) => {
+        const data = err.response?.data
+        if (data?.errors) {
+          errors.value = Object.fromEntries(
+            Object.entries(data.errors).map(([k, v]) => [k, (v as string[])[0]]),
+          )
+        }
+        else if (data?.message) {
+          errors.value = { name: data.message }
+        }
+      },
+    })
+  })
+}
+</script>
+
+<template>
+  <VDialog
+    v-model="modelValue"
+    max-width="550"
+    @after-leave="resetForm"
+  >
+    <VCard title="Nieuw evenement">
+      <VCardText>
+        <VForm
+          ref="refVForm"
+          @submit.prevent="onSubmit"
+        >
+          <VRow>
+            <VCol cols="12">
+              <AppTextField
+                v-model="form.name"
+                label="Naam"
+                :rules="[requiredValidator]"
+                :error-messages="errors.name"
+                autofocus
+              />
+            </VCol>
+            <VCol cols="12">
+              <AppTextField
+                v-model="form.slug"
+                label="Slug"
+                :rules="[requiredValidator]"
+                :error-messages="errors.slug"
+                hint="Wordt gebruikt in de URL"
+                persistent-hint
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-model="form.start_date"
+                label="Startdatum"
+                type="date"
+                :rules="[requiredValidator]"
+                :error-messages="errors.start_date"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-model="form.end_date"
+                label="Einddatum"
+                type="date"
+                :rules="[requiredValidator, endDateRule]"
+                :error-messages="errors.end_date"
+              />
+            </VCol>
+            <VCol cols="12">
+              <AppSelect
+                v-model="form.timezone"
+                label="Tijdzone"
+                :items="timezoneOptions"
+                :error-messages="errors.timezone"
+              />
+            </VCol>
+          </VRow>
+        </VForm>
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn
+          variant="text"
+          @click="modelValue = false"
+        >
+          Annuleren
+        </VBtn>
+        <VBtn
+          color="primary"
+          :loading="isPending"
+          @click="onSubmit"
+        >
+          Aanmaken
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+
+  <VSnackbar
+    v-model="showSuccess"
+    color="success"
+    :timeout="3000"
+  >
+    Evenement aangemaakt
+  </VSnackbar>
+</template>
--- a/apps/app/src/components/events/EditEventDialog.vue
+++ b/apps/app/src/components/events/EditEventDialog.vue
@@ -0,0 +1,199 @@
+<script setup lang="ts">
+import { VForm } from 'vuetify/components/VForm'
+import { useUpdateEvent } from '@/composables/api/useEvents'
+import { requiredValidator } from '@core/utils/validators'
+import type { EventStatus, EventType } from '@/types/event'
+
+const props = defineProps<{
+  event: EventType
+  orgId: string
+}>()
+
+const modelValue = defineModel<boolean>({ required: true })
+
+const orgIdRef = computed(() => props.orgId)
+const eventIdRef = computed(() => props.event.id)
+
+const form = ref({
+  name: '',
+  slug: '',
+  start_date: '',
+  end_date: '',
+  timezone: '',
+  status: '' as EventStatus,
+})
+
+const errors = ref<Record<string, string>>({})
+const refVForm = ref<VForm>()
+const showSuccess = ref(false)
+
+const { mutate: updateEvent, isPending } = useUpdateEvent(orgIdRef, eventIdRef)
+
+const timezoneOptions = [
+  { title: 'Europe/Amsterdam', value: 'Europe/Amsterdam' },
+  { title: 'Europe/London', value: 'Europe/London' },
+  { title: 'Europe/Paris', value: 'Europe/Paris' },
+  { title: 'UTC', value: 'UTC' },
+]
+
+const statusOptions: { title: string; value: EventStatus }[] = [
+  { title: 'Draft', value: 'draft' },
+  { title: 'Published', value: 'published' },
+  { title: 'Registration Open', value: 'registration_open' },
+  { title: 'Build-up', value: 'buildup' },
+  { title: 'Show Day', value: 'showday' },
+  { title: 'Tear-down', value: 'teardown' },
+  { title: 'Closed', value: 'closed' },
+]
+
+const endDateRule = (v: string) => {
+  if (!v) return 'Einddatum is verplicht'
+  if (form.value.start_date && v < form.value.start_date) {
+    return 'Einddatum moet op of na startdatum liggen'
+  }
+  return true
+}
+
+watch(() => props.event, (ev) => {
+  form.value = {
+    name: ev.name,
+    slug: ev.slug,
+    start_date: ev.start_date,
+    end_date: ev.end_date,
+    timezone: ev.timezone,
+    status: ev.status,
+  }
+}, { immediate: true })
+
+function onSubmit() {
+  refVForm.value?.validate().then(({ valid }) => {
+    if (!valid) return
+
+    errors.value = {}
+
+    updateEvent(form.value, {
+      onSuccess: () => {
+        modelValue.value = false
+        showSuccess.value = true
+      },
+      onError: (err: any) => {
+        const data = err.response?.data
+        if (data?.errors) {
+          errors.value = Object.fromEntries(
+            Object.entries(data.errors).map(([k, v]) => [k, (v as string[])[0]]),
+          )
+        }
+        else if (data?.message) {
+          errors.value = { name: data.message }
+        }
+      },
+    })
+  })
+}
+</script>
+
+<template>
+  <VDialog
+    v-model="modelValue"
+    max-width="550"
+  >
+    <VCard title="Evenement bewerken">
+      <VCardText>
+        <VForm
+          ref="refVForm"
+          @submit.prevent="onSubmit"
+        >
+          <VRow>
+            <VCol cols="12">
+              <AppTextField
+                v-model="form.name"
+                label="Naam"
+                :rules="[requiredValidator]"
+                :error-messages="errors.name"
+                autofocus
+              />
+            </VCol>
+            <VCol cols="12">
+              <AppTextField
+                v-model="form.slug"
+                label="Slug"
+                :rules="[requiredValidator]"
+                :error-messages="errors.slug"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-model="form.start_date"
+                label="Startdatum"
+                type="date"
+                :rules="[requiredValidator]"
+                :error-messages="errors.start_date"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-model="form.end_date"
+                label="Einddatum"
+                type="date"
+                :rules="[requiredValidator, endDateRule]"
+                :error-messages="errors.end_date"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppSelect
+                v-model="form.timezone"
+                label="Tijdzone"
+                :items="timezoneOptions"
+                :error-messages="errors.timezone"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppSelect
+                v-model="form.status"
+                label="Status"
+                :items="statusOptions"
+                :error-messages="errors.status"
+              />
+            </VCol>
+          </VRow>
+        </VForm>
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn
+          variant="text"
+          @click="modelValue = false"
+        >
+          Annuleren
+        </VBtn>
+        <VBtn
+          color="primary"
+          :loading="isPending"
+          @click="onSubmit"
+        >
+          Opslaan
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+
+  <VSnackbar
+    v-model="showSuccess"
+    color="success"
+    :timeout="3000"
+  >
+    Evenement bijgewerkt
+  </VSnackbar>
+</template>
--- a/apps/app/src/components/layout/OrganisationSwitcher.vue
+++ b/apps/app/src/components/layout/OrganisationSwitcher.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { useAuthStore } from '@/stores/useAuthStore'
+
+const authStore = useAuthStore()
+
+const hasMultipleOrgs = computed(() => authStore.organisations.length > 1)
+const currentOrgName = computed(() => authStore.currentOrganisation?.name ?? 'Geen organisatie')
+</script>
+
+<template>
+  <div class="organisation-switcher mx-4 mb-2">
+    <!-- Single org: just show the name -->
+    <div
+      v-if="!hasMultipleOrgs"
+      class="d-flex align-center gap-x-2 pa-2"
+    >
+      <VIcon
+        icon="tabler-building"
+        size="20"
+        color="primary"
+      />
+      <span class="text-body-2 font-weight-medium text-truncate">
+        {{ currentOrgName }}
+      </span>
+    </div>
+
+    <!-- Multiple orgs: dropdown -->
+    <VBtn
+      v-else
+      variant="tonal"
+      color="primary"
+      block
+      class="text-none justify-start"
+      prepend-icon="tabler-building"
+    >
+      <span class="text-truncate">{{ currentOrgName }}</span>
+
+      <VMenu
+        activator="parent"
+        width="250"
+        location="bottom start"
+      >
+        <VList density="compact">
+          <VListItem
+            v-for="org in authStore.organisations"
+            :key="org.id"
+            :active="org.id === authStore.currentOrganisation?.id"
+            @click="authStore.setActiveOrganisation(org.id)"
+          >
+            <VListItemTitle>{{ org.name }}</VListItemTitle>
+            <template #append>
+              <VChip
+                size="x-small"
+                variant="text"
+              >
+                {{ org.role }}
+              </VChip>
+            </template>
+          </VListItem>
+        </VList>
+      </VMenu>
+    </VBtn>
+  </div>
+</template>
--- a/apps/app/src/components/organisations/EditOrganisationDialog.vue
+++ b/apps/app/src/components/organisations/EditOrganisationDialog.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { VForm } from 'vuetify/components/VForm'
+import { useUpdateOrganisation } from '@/composables/api/useOrganisations'
+import { requiredValidator } from '@core/utils/validators'
+import type { Organisation } from '@/types/organisation'
+
+const props = defineProps<{
+  organisation: Organisation
+}>()
+
+const modelValue = defineModel<boolean>({ required: true })
+
+const name = ref('')
+const errors = ref<Record<string, string>>({})
+const refVForm = ref<VForm>()
+const showSuccess = ref(false)
+
+const { mutate: updateOrganisation, isPending } = useUpdateOrganisation()
+
+watch(() => props.organisation, (org) => {
+  name.value = org.name
+}, { immediate: true })
+
+function onSubmit() {
+  refVForm.value?.validate().then(({ valid }) => {
+    if (!valid) return
+
+    errors.value = {}
+
+    updateOrganisation(
+      { id: props.organisation.id, name: name.value },
+      {
+        onSuccess: () => {
+          modelValue.value = false
+          showSuccess.value = true
+        },
+        onError: (err: any) => {
+          const data = err.response?.data
+          if (data?.errors) {
+            errors.value = { name: data.errors.name?.[0] ?? '' }
+          }
+          else if (data?.message) {
+            errors.value = { name: data.message }
+          }
+        },
+      },
+    )
+  })
+}
+</script>
+
+<template>
+  <VDialog
+    v-model="modelValue"
+    max-width="450"
+  >
+    <VCard title="Naam bewerken">
+      <VCardText>
+        <VForm
+          ref="refVForm"
+          @submit.prevent="onSubmit"
+        >
+          <AppTextField
+            v-model="name"
+            label="Organisatienaam"
+            :rules="[requiredValidator]"
+            :error-messages="errors.name"
+            autofocus
+          />
+        </VForm>
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn
+          variant="text"
+          @click="modelValue = false"
+        >
+          Annuleren
+        </VBtn>
+        <VBtn
+          color="primary"
+          :loading="isPending"
+          @click="onSubmit"
+        >
+          Opslaan
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+
+  <VSnackbar
+    v-model="showSuccess"
+    color="success"
+    :timeout="3000"
+  >
+    Naam bijgewerkt
+  </VSnackbar>
+</template>
--- a/apps/app/src/composables/api/useAuth.ts
+++ b/apps/app/src/composables/api/useAuth.ts
@@ -0,0 +1,54 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import { apiClient } from '@/lib/axios'
+import { useAuthStore } from '@/stores/useAuthStore'
+import type { LoginCredentials, LoginResponse, MeResponse } from '@/types/auth'
+
+export function useLogin() {
+  const authStore = useAuthStore()
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (credentials: LoginCredentials) => {
+      const { data } = await apiClient.post<LoginResponse>('/auth/login', credentials)
+      return data
+    },
+    onSuccess: (data) => {
+      authStore.setToken(data.data.token)
+      authStore.setUser(data.data.user)
+      queryClient.setQueryData(['auth', 'me'], data.data.user)
+    },
+  })
+}
+
+export function useMe() {
+  const authStore = useAuthStore()
+
+  return useQuery({
+    queryKey: ['auth', 'me'],
+    queryFn: async () => {
+      const { data } = await apiClient.get<{ success: boolean; data: MeResponse }>('/auth/me')
+      return data.data
+    },
+    staleTime: Infinity,
+    enabled: () => authStore.isAuthenticated,
+    select: (data) => {
+      authStore.setUser(data)
+      return data
+    },
+  })
+}
+
+export function useLogout() {
+  const authStore = useAuthStore()
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async () => {
+      await apiClient.post('/auth/logout')
+    },
+    onSettled: () => {
+      authStore.logout()
+      queryClient.clear()
+    },
+  })
+}
--- a/apps/app/src/composables/api/useEvents.ts
+++ b/apps/app/src/composables/api/useEvents.ts
@@ -0,0 +1,86 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import type { Ref } from 'vue'
+import { apiClient } from '@/lib/axios'
+import type {
+  CreateEventPayload,
+  EventType,
+  UpdateEventPayload,
+} from '@/types/event'
+
+interface ApiResponse<T> {
+  success: boolean
+  data: T
+  message?: string
+}
+
+interface PaginatedResponse<T> {
+  data: T[]
+  links: Record<string, string | null>
+  meta: {
+    current_page: number
+    per_page: number
+    total: number
+    last_page: number
+  }
+}
+
+export function useEventList(orgId: Ref<string>) {
+  return useQuery({
+    queryKey: ['events', orgId],
+    queryFn: async () => {
+      const { data } = await apiClient.get<PaginatedResponse<EventType>>(
+        `/organisations/${orgId.value}/events`,
+      )
+      return data.data
+    },
+    enabled: () => !!orgId.value,
+  })
+}
+
+export function useEventDetail(orgId: Ref<string>, id: Ref<string>) {
+  return useQuery({
+    queryKey: ['events', orgId, id],
+    queryFn: async () => {
+      const { data } = await apiClient.get<ApiResponse<EventType>>(
+        `/organisations/${orgId.value}/events/${id.value}`,
+      )
+      return data.data
+    },
+    enabled: () => !!orgId.value && !!id.value,
+  })
+}
+
+export function useCreateEvent(orgId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (payload: CreateEventPayload) => {
+      const { data } = await apiClient.post<ApiResponse<EventType>>(
+        `/organisations/${orgId.value}/events`,
+        payload,
+      )
+      return data.data
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['events', orgId.value] })
+    },
+  })
+}
+
+export function useUpdateEvent(orgId: Ref<string>, id: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (payload: UpdateEventPayload) => {
+      const { data } = await apiClient.put<ApiResponse<EventType>>(
+        `/organisations/${orgId.value}/events/${id.value}`,
+        payload,
+      )
+      return data.data
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['events', orgId.value] })
+      queryClient.invalidateQueries({ queryKey: ['events', orgId.value, id.value] })
+    },
+  })
+}
--- a/apps/app/src/composables/api/useOrganisations.ts
+++ b/apps/app/src/composables/api/useOrganisations.ts
@@ -0,0 +1,75 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import { computed, type Ref } from 'vue'
+import { apiClient } from '@/lib/axios'
+import { useAuthStore } from '@/stores/useAuthStore'
+import type {
+  Organisation,
+  UpdateOrganisationPayload,
+} from '@/types/organisation'
+
+interface ApiResponse<T> {
+  success: boolean
+  data: T
+  message?: string
+}
+
+interface PaginatedResponse<T> {
+  data: T[]
+  links: Record<string, string | null>
+  meta: {
+    current_page: number
+    per_page: number
+    total: number
+    last_page: number
+  }
+}
+
+export function useOrganisationList() {
+  return useQuery({
+    queryKey: ['organisations'],
+    queryFn: async () => {
+      const { data } = await apiClient.get<PaginatedResponse<Organisation>>('/organisations')
+      return data.data
+    },
+  })
+}
+
+export function useOrganisationDetail(id: Ref<string>) {
+  return useQuery({
+    queryKey: ['organisations', id],
+    queryFn: async () => {
+      const { data } = await apiClient.get<ApiResponse<Organisation>>(`/organisations/${id.value}`)
+      return data.data
+    },
+    enabled: () => !!id.value,
+  })
+}
+
+export function useMyOrganisation() {
+  const authStore = useAuthStore()
+  const id = computed(() => authStore.currentOrganisation?.id ?? '')
+
+  return useQuery({
+    queryKey: ['organisations', id],
+    queryFn: async () => {
+      const { data } = await apiClient.get<ApiResponse<Organisation>>(`/organisations/${id.value}`)
+      return data.data
+    },
+    enabled: () => !!id.value,
+  })
+}
+
+export function useUpdateOrganisation() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async ({ id, ...payload }: UpdateOrganisationPayload & { id: string }) => {
+      const { data } = await apiClient.put<ApiResponse<Organisation>>(`/organisations/${id}`, payload)
+      return data.data
+    },
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['organisations'] })
+      queryClient.invalidateQueries({ queryKey: ['organisations', variables.id] })
+    },
+  })
+}
--- a/apps/app/src/composables/useEvents.ts
+++ b/apps/app/src/composables/useEvents.ts
@@ -1,91 +0,0 @@
-import { computed, ref } from 'vue'
-import { apiClient } from '@/lib/axios'
-import { useCurrentOrganisationId } from '@/composables/useOrganisationContext'
-import type { ApiResponse, Event, Pagination } from '@/types/events'
-
-interface LaravelPaginatedEventsBody {
-  data: Event[]
-  meta: {
-    current_page: number
-    per_page: number
-    total: number
-    last_page: number
-    from: number | null
-    to: number | null
-  }
-}
-
-function requireOrganisationId(organisationId: string | null): string {
-  if (!organisationId) {
-    throw new Error('No organisation in session. Log in again.')
-  }
-  return organisationId
-}
-
-export function useEvents() {
-  const { organisationId } = useCurrentOrganisationId()
-  const events = ref<Event[]>([])
-  const currentEvent = ref<Event | null>(null)
-  const pagination = ref<Pagination | null>(null)
-  const isLoading = ref(false)
-  const error = ref<Error | null>(null)
-
-  function eventsPath(): string {
-    const id = requireOrganisationId(organisationId.value)
-    return `/organisations/${id}/events`
-  }
-
-  async function fetchEvents(params?: { page?: number; per_page?: number }) {
-    isLoading.value = true
-    error.value = null
-
-    try {
-      const { data } = await apiClient.get<LaravelPaginatedEventsBody>(eventsPath(), { params })
-      events.value = data.data
-      pagination.value = {
-        current_page: data.meta.current_page,
-        per_page: data.meta.per_page,
-        total: data.meta.total,
-        last_page: data.meta.last_page,
-        from: data.meta.from,
-        to: data.meta.to,
-      }
-    }
-    catch (err) {
-      error.value = err instanceof Error ? err : new Error('Failed to fetch events')
-      throw error.value
-    }
-    finally {
-      isLoading.value = false
-    }
-  }
-
-  async function fetchEvent(id: string) {
-    isLoading.value = true
-    error.value = null
-
-    try {
-      const { data } = await apiClient.get<ApiResponse<Event>>(`${eventsPath()}/${id}`)
-      currentEvent.value = data.data
-      return data.data
-    }
-    catch (err) {
-      error.value = err instanceof Error ? err : new Error('Failed to fetch event')
-      throw error.value
-    }
-    finally {
-      isLoading.value = false
-    }
-  }
-
-  return {
-    organisationId: computed(() => organisationId.value),
-    events: computed(() => events.value),
-    currentEvent: computed(() => currentEvent.value),
-    pagination: computed(() => pagination.value),
-    isLoading: computed(() => isLoading.value),
-    error: computed(() => error.value),
-    fetchEvents,
-    fetchEvent,
-  }
-}
--- a/apps/app/src/composables/useOrganisationContext.ts
+++ b/apps/app/src/composables/useOrganisationContext.ts
@@ -1,25 +0,0 @@
-import { useCookie } from '@core/composable/useCookie'
-import { computed } from 'vue'
-
-export interface AuthOrganisationSummary {
-  id: string
-  name: string
-  slug: string
-  role: string
-}
-
-export interface AuthUserCookie {
-  id: string
-  name: string
-  email: string
-  roles?: string[]
-  organisations?: AuthOrganisationSummary[]
-}
-
-export function useCurrentOrganisationId() {
-  const userData = useCookie<AuthUserCookie | null>('userData')
-
-  const organisationId = computed(() => userData.value?.organisations?.[0]?.id ?? null)
-
-  return { organisationId }
-}
--- a/apps/app/src/layouts/components/DefaultLayoutWithVerticalNav.vue
+++ b/apps/app/src/layouts/components/DefaultLayoutWithVerticalNav.vue
@@ -6,6 +6,7 @@ import { themeConfig } from '@themeConfig'
 import Footer from '@/layouts/components/Footer.vue'
 import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue'
 import UserProfile from '@/layouts/components/UserProfile.vue'
+import OrganisationSwitcher from '@/components/layout/OrganisationSwitcher.vue'
 import NavBarI18n from '@core/components/I18n.vue'

 // @layouts plugin
@@ -14,6 +15,12 @@ import { VerticalNavLayout } from '@layouts'

 <template>
  <VerticalNavLayout :nav-items="navItems">
+    <!-- 👉 Organisation switcher -->
+    <template #before-vertical-nav-items>
+      <OrganisationSwitcher />
+      <div class="vertical-nav-items-shadow" />
+    </template>
+
    <!-- 👉 navbar -->
    <template #navbar="{ toggleVerticalOverlayNavActive }">
      <div class="d-flex h-100 align-center">
--- a/apps/app/src/layouts/components/Footer.vue
+++ b/apps/app/src/layouts/components/Footer.vue
@@ -1,41 +1,7 @@
 <template>
-  <div class="h-100 d-flex align-center justify-md-space-between justify-center">
-    <!-- 👉 Footer: left content -->
-    <span class="d-flex align-center text-medium-emphasis">
-      &copy;
-      {{ new Date().getFullYear() }}
-      Made With
-      <VIcon
-        icon="tabler-heart-filled"
-        color="error"
-        size="1.25rem"
-        class="mx-1"
-      />
-      By <a
-        href="https://pixinvent.com"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="text-primary ms-1"
-      >Pixinvent</a>
-    </span>
-    <!-- 👉 Footer: right content -->
-    <span class="d-md-flex gap-x-4 text-primary d-none">
-      <a
-        href="https://themeforest.net/licenses/standard"
-        target="noopener noreferrer"
-      >License</a>
-      <a
-        href="https://1.envato.market/pixinvent_portfolio"
-        target="noopener noreferrer"
-      >More Themes</a>
-      <a
-        href="https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/"
-        target="noopener noreferrer"
-      >Documentation</a>
-      <a
-        href="https://pixinvent.ticksy.com/"
-        target="noopener noreferrer"
-      >Support</a>
+  <div class="h-100 d-flex align-center justify-center">
+    <span class="text-medium-emphasis">
+      &copy; {{ new Date().getFullYear() }} Crewli
    </span>
  </div>
 </template>
--- a/apps/app/src/layouts/components/NavSearchBar.vue
+++ b/apps/app/src/layouts/components/NavSearchBar.vue
@@ -2,9 +2,21 @@
 import Shepherd from 'shepherd.js'
 import { withQuery } from 'ufo'
 import type { RouteLocationRaw } from 'vue-router'
-import type { SearchResults } from '@db/app-bar-search/types'
+import AppBarSearch from '@core/components/AppBarSearch.vue'
 import { useConfigStore } from '@core/stores/config'

+/** App bar API search group (replaces Vuexy @db mock types). */
+interface AppBarSearchResultChild {
+  title: string
+  icon: string
+  url: RouteLocationRaw
+}
+
+interface SearchResults {
+  title: string
+  children: AppBarSearchResultChild[]
+}
+
 interface Suggestion {
  icon: string
  title: string
@@ -117,7 +129,6 @@ const redirectToSuggestedPage = (selected: Suggestion) => {
  closeSearchBar()
 }

-const LazyAppBarSearch = defineAsyncComponent(() => import('@core/components/AppBarSearch.vue'))
 </script>

 <template>
@@ -144,7 +155,7 @@ const LazyAppBarSearch = defineAsyncComponent(() => import('@core/components/App
  </div>

  <!-- 👉 App Bar Search -->
-  <LazyAppBarSearch
+  <AppBarSearch
    v-model:is-dialog-visible="isAppSearchBarVisible"
    :search-results="searchResult"
    :is-loading="isLoading"
@@ -238,7 +249,7 @@ const LazyAppBarSearch = defineAsyncComponent(() => import('@core/components/App
        </VListItemTitle>
      </VListItem>
    </template>
-  </LazyAppBarSearch>
+  </AppBarSearch>
 </template>

 <style lang="scss">
--- a/apps/app/src/layouts/components/UserProfile.vue
+++ b/apps/app/src/layouts/components/UserProfile.vue
@@ -1,5 +1,19 @@
 <script setup lang="ts">
 import avatar1 from '@images/avatars/avatar-1.png'
+import { useLogout } from '@/composables/api/useAuth'
+import { useAuthStore } from '@/stores/useAuthStore'
+
+const router = useRouter()
+const authStore = useAuthStore()
+const { mutate: logout, isPending: isLoggingOut } = useLogout()
+
+function handleLogout() {
+  logout(undefined, {
+    onSettled: () => {
+      router.replace('/login')
+    },
+  })
+}
 </script>

 <template>
@@ -48,9 +62,9 @@ import avatar1 from '@images/avatars/avatar-1.png'
            </template>

            <VListItemTitle class="font-weight-semibold">
-              John Doe
+              {{ authStore.user?.name ?? 'User' }}
            </VListItemTitle>
-            <VListItemSubtitle>Admin</VListItemSubtitle>
+            <VListItemSubtitle>{{ authStore.currentOrganisation?.role ?? '' }}</VListItemSubtitle>
          </VListItem>

          <VDivider class="my-2" />
@@ -81,37 +95,14 @@ import avatar1 from '@images/avatars/avatar-1.png'
            <VListItemTitle>Settings</VListItemTitle>
          </VListItem>

-          <!-- 👉 Pricing -->
-          <VListItem link>
-            <template #prepend>
-              <VIcon
-                class="me-2"
-                icon="tabler-currency-dollar"
-                size="22"
-              />
-            </template>
-
-            <VListItemTitle>Pricing</VListItemTitle>
-          </VListItem>
-
-          <!-- 👉 FAQ -->
-          <VListItem link>
-            <template #prepend>
-              <VIcon
-                class="me-2"
-                icon="tabler-help"
-                size="22"
-              />
-            </template>
-
-            <VListItemTitle>FAQ</VListItemTitle>
-          </VListItem>
-
          <!-- Divider -->
          <VDivider class="my-2" />

          <!-- 👉 Logout -->
-          <VListItem to="/login">
+          <VListItem
+            :disabled="isLoggingOut"
+            @click="handleLogout"
+          >
            <template #prepend>
              <VIcon
                class="me-2"
--- a/apps/app/src/lib/axios.ts
+++ b/apps/app/src/lib/axios.ts
@@ -1,31 +1,29 @@
 import axios from 'axios'
-import { parse } from 'cookie-es'
 import type { AxiosInstance, InternalAxiosRequestConfig } from 'axios'
+import { useAuthStore } from '@/stores/useAuthStore'

 const apiClient: AxiosInstance = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
+  withCredentials: true,
  headers: {
-    'Content-Type': 'application/json',
    Accept: 'application/json',
+    'Content-Type': 'application/json',
  },
  timeout: 30000,
 })

-function getAccessToken(): string | null {
-  if (typeof document === 'undefined') return null
-  const cookies = parse(document.cookie)
-  return cookies.accessToken ?? null
-}
-
 apiClient.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
-    const token = getAccessToken()
-    if (token) {
-      config.headers.Authorization = `Bearer ${token}`
+    const authStore = useAuthStore()
+
+    if (authStore.token) {
+      config.headers.Authorization = `Bearer ${authStore.token}`
    }
+
    if (import.meta.env.DEV) {
      console.log(`🚀 ${config.method?.toUpperCase()} ${config.url}`, config.data)
    }
+
    return config
  },
  error => Promise.reject(error),
@@ -36,20 +34,24 @@ apiClient.interceptors.response.use(
    if (import.meta.env.DEV) {
      console.log(`✅ ${response.status} ${response.config.url}`, response.data)
    }
+
    return response
  },
  error => {
    if (import.meta.env.DEV) {
      console.error(`❌ ${error.response?.status} ${error.config?.url}`, error.response?.data)
    }
+
    if (error.response?.status === 401) {
-      document.cookie = 'accessToken=; path=/; max-age=0'
-      document.cookie = 'userData=; path=/; max-age=0'
-      document.cookie = 'userAbilityRules=; path=/; max-age=0'
+      const authStore = useAuthStore()
+
+      authStore.logout()
+
      if (typeof window !== 'undefined' && window.location.pathname !== '/login') {
        window.location.href = '/login'
      }
    }
+
    return Promise.reject(error)
  },
 )
--- a/apps/app/src/navigation/horizontal/index.ts
+++ b/apps/app/src/navigation/horizontal/index.ts
@@ -1,7 +1,17 @@
 export default [
  {
-    title: 'Home',
-    to: { name: 'root' },
+    title: 'Dashboard',
+    to: { name: 'dashboard' },
    icon: { icon: 'tabler-smart-home' },
  },
+  {
+    title: 'Events',
+    to: { name: 'events' },
+    icon: { icon: 'tabler-calendar-event' },
+  },
+  {
+    title: 'Organisaties',
+    to: { name: 'organisations' },
+    icon: { icon: 'tabler-building' },
+  },
 ]
--- a/apps/app/src/navigation/vertical/index.ts
+++ b/apps/app/src/navigation/vertical/index.ts
@@ -1,7 +1,7 @@
 export default [
  {
-    title: "Home",
-    to: { name: "root" },
+    title: "Dashboard",
+    to: { name: "dashboard" },
    icon: { icon: "tabler-smart-home" },
  },
  {
@@ -9,4 +9,12 @@ export default [
    to: { name: "events" },
    icon: { icon: "tabler-calendar-event" },
  },
+  {
+    heading: "Beheer",
+  },
+  {
+    title: "Mijn Organisatie",
+    to: { name: "organisation" },
+    icon: { icon: "tabler-building" },
+  },
 ];
--- a/apps/app/src/pages/dashboard/index.vue
+++ b/apps/app/src/pages/dashboard/index.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { useAuthStore } from '@/stores/useAuthStore'
+
+const authStore = useAuthStore()
+
+const stats = [
+  { title: 'Evenementen', value: 0, icon: 'tabler-calendar-event', color: 'primary' },
+  { title: 'Personen', value: 0, icon: 'tabler-users', color: 'success' },
+  { title: 'Shifts', value: 0, icon: 'tabler-clock', color: 'warning' },
+  { title: 'Briefings', value: 0, icon: 'tabler-mail', color: 'info' },
+]
+</script>
+
+<template>
+  <div>
+    <VCard class="mb-6">
+      <VCardText>
+        <h4 class="text-h4 mb-1">
+          Welkom, {{ authStore.user?.name ?? 'gebruiker' }}! 👋
+        </h4>
+        <p class="text-body-1 mb-0">
+          {{ authStore.currentOrganisation?.name ?? 'Geen organisatie geselecteerd' }}
+        </p>
+      </VCardText>
+    </VCard>
+
+    <VRow>
+      <VCol
+        v-for="stat in stats"
+        :key="stat.title"
+        cols="12"
+        sm="6"
+        md="3"
+      >
+        <VCard>
+          <VCardText class="d-flex align-center gap-x-4">
+            <VAvatar
+              :color="stat.color"
+              variant="tonal"
+              size="44"
+              rounded
+            >
+              <VIcon
+                :icon="stat.icon"
+                size="28"
+              />
+            </VAvatar>
+            <div>
+              <p class="text-body-1 mb-0">
+                {{ stat.title }}
+              </p>
+              <h4 class="text-h4">
+                {{ stat.value }}
+              </h4>
+            </div>
+          </VCardText>
+        </VCard>
+      </VCol>
+    </VRow>
+  </div>
+</template>
--- a/apps/app/src/pages/events/[id].vue
+++ b/apps/app/src/pages/events/[id].vue
@@ -1,99 +1,241 @@
 <script setup lang="ts">
-import { useEvents } from '@/composables/useEvents'
-import { useRoute } from 'vue-router'
+import { useEventDetail } from '@/composables/api/useEvents'
+import { useAuthStore } from '@/stores/useAuthStore'
+import { useOrganisationStore } from '@/stores/useOrganisationStore'
+import EditEventDialog from '@/components/events/EditEventDialog.vue'
+import type { EventStatus } from '@/types/event'
+
+definePage({
+  meta: {
+    navActiveLink: 'events',
+  },
+})

 const route = useRoute()
-const { currentEvent, fetchEvent, isLoading } = useEvents()
+const authStore = useAuthStore()
+const orgStore = useOrganisationStore()

-const eventId = computed(() => route.params.id as string)
+const orgId = computed(() => authStore.currentOrganisation?.id ?? '')
+const eventId = computed(() => String((route.params as { id: string }).id))

-watch(() => eventId.value, async () => {
-  if (eventId.value) {
-    await fetchEvent(eventId.value)
-  }
+const { data: event, isLoading, isError, refetch } = useEventDetail(orgId, eventId)
+
+const isEditDialogOpen = ref(false)
+const activeTab = ref('details')
+
+// Set active event in store
+watch(eventId, (id) => {
+  if (id) orgStore.setActiveEvent(id)
 }, { immediate: true })

-function getStatusColor(status: string): string {
-  const colors: Record<string, string> = {
-    draft: 'secondary',
-    published: 'info',
-    registration_open: 'success',
-    buildup: 'warning',
-    showday: 'primary',
-    teardown: 'warning',
-    closed: 'secondary',
-  }
-  return colors[status] || 'secondary'
+const statusColor: Record<EventStatus, string> = {
+  draft: 'default',
+  published: 'info',
+  registration_open: 'cyan',
+  buildup: 'warning',
+  showday: 'success',
+  teardown: 'warning',
+  closed: 'error',
 }

-function formatStatusLabel(status: string): string {
-  return status.replaceAll('_', ' ')
+const dateFormatter = new Intl.DateTimeFormat('nl-NL', {
+  day: '2-digit',
+  month: '2-digit',
+  year: 'numeric',
+})
+
+function formatDate(iso: string) {
+  return dateFormatter.format(new Date(iso))
 }
+
+const tiles = [
+  { title: 'Secties & Shifts', value: 0, icon: 'tabler-layout-grid', color: 'primary' },
+  { title: 'Personen', value: 0, icon: 'tabler-users', color: 'success' },
+  { title: 'Artiesten', value: 0, icon: 'tabler-music', color: 'warning' },
+  { title: 'Briefings', value: 0, icon: 'tabler-mail', color: 'info' },
+]
 </script>

 <template>
  <div>
-    <VCard v-if="currentEvent">
-      <VCardTitle class="d-flex align-center gap-2">
-        <RouterLink
-          :to="{ name: 'events' }"
-          class="text-decoration-none"
+    <!-- Loading -->
+    <VSkeletonLoader
+      v-if="isLoading"
+      type="card"
+    />
+
+    <!-- Error -->
+    <VAlert
+      v-else-if="isError"
+      type="error"
+      class="mb-4"
+    >
+      Kon evenement niet laden.
+      <template #append>
+        <VBtn
+          variant="text"
+          @click="refetch()"
        >
-          <VIcon icon="tabler-arrow-left" />
-        </RouterLink>
-        <span class="text-h5">{{ currentEvent.name }}</span>
-        <VChip
-          :color="getStatusColor(currentEvent.status)"
-          size="small"
+          Opnieuw proberen
+        </VBtn>
+      </template>
+    </VAlert>
+
+    <template v-else-if="event">
+      <!-- Header -->
+      <div class="d-flex justify-space-between align-center mb-6">
+        <div class="d-flex align-center gap-x-3">
+          <VBtn
+            icon="tabler-arrow-left"
+            variant="text"
+            :to="{ name: 'events' }"
+          />
+          <h4 class="text-h4">
+            {{ event.name }}
+          </h4>
+          <VChip
+            :color="statusColor[event.status]"
+            size="small"
+          >
+            {{ event.status }}
+          </VChip>
+          <span class="text-body-1 text-disabled">
+            {{ formatDate(event.start_date) }} – {{ formatDate(event.end_date) }}
+          </span>
+        </div>
+        <VBtn
+          prepend-icon="tabler-edit"
+          @click="isEditDialogOpen = true"
        >
-          {{ formatStatusLabel(currentEvent.status) }}
-        </VChip>
-      </VCardTitle>
+          Bewerken
+        </VBtn>
+      </div>

-      <VDivider />
-
-      <VCardText>
-        <div class="mb-4">
-          <div class="text-body-2 text-medium-emphasis mb-1">
-            Dates
-          </div>
-          <div class="text-body-1">
-            {{ new Date(currentEvent.start_date).toLocaleDateString() }}
-            –
-            {{ new Date(currentEvent.end_date).toLocaleDateString() }}
-          </div>
-        </div>
-
-        <div class="mb-4">
-          <div class="text-body-2 text-medium-emphasis mb-1">
-            Timezone
-          </div>
-          <div class="text-body-1">
-            {{ currentEvent.timezone }}
-          </div>
-        </div>
-
-        <div
-          v-if="currentEvent.organisation"
-          class="mb-4"
+      <!-- Stat tiles -->
+      <VRow class="mb-6">
+        <VCol
+          v-for="tile in tiles"
+          :key="tile.title"
+          cols="12"
+          sm="6"
+          md="3"
        >
-          <div class="text-body-2 text-medium-emphasis mb-1">
-            Organisation
-          </div>
-          <div class="text-body-1">
-            {{ currentEvent.organisation.name }}
-          </div>
-        </div>
-      </VCardText>
-    </VCard>
+          <VCard>
+            <VCardText class="d-flex align-center gap-x-4">
+              <VAvatar
+                :color="tile.color"
+                variant="tonal"
+                size="44"
+                rounded
+              >
+                <VIcon
+                  :icon="tile.icon"
+                  size="28"
+                />
+              </VAvatar>
+              <div>
+                <p class="text-body-1 mb-0">
+                  {{ tile.title }}
+                </p>
+                <h4 class="text-h4">
+                  {{ tile.value }}
+                </h4>
+              </div>
+            </VCardText>
+          </VCard>
+        </VCol>
+      </VRow>

-    <VCard v-else-if="isLoading">
-      <VCardText class="text-center py-12">
-        <VProgressCircular
-          indeterminate
-          color="primary"
-        />
-      </VCardText>
-    </VCard>
+      <!-- Tabs -->
+      <VTabs
+        v-model="activeTab"
+        class="mb-6"
+      >
+        <VTab value="details">
+          Details
+        </VTab>
+        <VTab value="settings">
+          Instellingen
+        </VTab>
+      </VTabs>
+
+      <VTabsWindow v-model="activeTab">
+        <!-- Tab: Details -->
+        <VTabsWindowItem value="details">
+          <VCard>
+            <VCardText>
+              <VRow>
+                <VCol
+                  cols="12"
+                  md="3"
+                >
+                  <h6 class="text-h6 mb-1">
+                    Slug
+                  </h6>
+                  <p class="text-body-1 text-disabled mb-0">
+                    {{ event.slug }}
+                  </p>
+                </VCol>
+                <VCol
+                  cols="12"
+                  md="3"
+                >
+                  <h6 class="text-h6 mb-1">
+                    Tijdzone
+                  </h6>
+                  <p class="text-body-1 text-disabled mb-0">
+                    {{ event.timezone }}
+                  </p>
+                </VCol>
+                <VCol
+                  cols="12"
+                  md="3"
+                >
+                  <h6 class="text-h6 mb-1">
+                    Organisatie
+                  </h6>
+                  <p class="text-body-1 text-disabled mb-0">
+                    {{ authStore.currentOrganisation?.name ?? '–' }}
+                  </p>
+                </VCol>
+                <VCol
+                  cols="12"
+                  md="3"
+                >
+                  <h6 class="text-h6 mb-1">
+                    Aangemaakt op
+                  </h6>
+                  <p class="text-body-1 text-disabled mb-0">
+                    {{ formatDate(event.created_at) }}
+                  </p>
+                </VCol>
+              </VRow>
+            </VCardText>
+          </VCard>
+        </VTabsWindowItem>
+
+        <!-- Tab: Instellingen -->
+        <VTabsWindowItem value="settings">
+          <VCard>
+            <VCardText class="text-center pa-8">
+              <VIcon
+                icon="tabler-settings"
+                size="48"
+                class="mb-4 text-disabled"
+              />
+              <p class="text-body-1 text-disabled">
+                Komt in een volgende fase
+              </p>
+            </VCardText>
+          </VCard>
+        </VTabsWindowItem>
+      </VTabsWindow>
+
+      <EditEventDialog
+        v-model="isEditDialogOpen"
+        :event="event"
+        :org-id="orgId"
+      />
+    </template>
  </div>
 </template>
--- a/apps/app/src/pages/events/index.vue
+++ b/apps/app/src/pages/events/index.vue
@@ -1,158 +1,163 @@
 <script setup lang="ts">
-import { useEvents } from '@/composables/useEvents'
+import { useEventList } from '@/composables/api/useEvents'
+import { useAuthStore } from '@/stores/useAuthStore'
+import CreateEventDialog from '@/components/events/CreateEventDialog.vue'
+import type { EventStatus, EventType } from '@/types/event'

-const { events, pagination, organisationId, isLoading, error, fetchEvents } = useEvents()
+const router = useRouter()
+const authStore = useAuthStore()

-const page = ref(1)
-const itemsPerPage = ref(10)
+const orgId = computed(() => authStore.currentOrganisation?.id ?? '')

-watch([page, itemsPerPage, organisationId], () => {
-  if (!organisationId.value) {
-    return
-  }
-  fetchEvents({
-    page: page.value,
-    per_page: itemsPerPage.value,
-  })
-}, { immediate: true })
+const { data: events, isLoading, isError, refetch } = useEventList(orgId)

-function getStatusColor(status: string): string {
-  const colors: Record<string, string> = {
-    draft: 'secondary',
-    published: 'info',
-    registration_open: 'success',
-    buildup: 'warning',
-    showday: 'primary',
-    teardown: 'warning',
-    closed: 'secondary',
-  }
-  return colors[status] || 'secondary'
+const isCreateDialogOpen = ref(false)
+
+const headers = [
+  { title: 'Naam', key: 'name' },
+  { title: 'Status', key: 'status' },
+  { title: 'Startdatum', key: 'start_date' },
+  { title: 'Einddatum', key: 'end_date' },
+  { title: 'Acties', key: 'actions', sortable: false, align: 'end' as const },
+]
+
+const statusColor: Record<EventStatus, string> = {
+  draft: 'default',
+  published: 'info',
+  registration_open: 'cyan',
+  buildup: 'warning',
+  showday: 'success',
+  teardown: 'warning',
+  closed: 'error',
 }

-function formatStatusLabel(status: string): string {
-  return status.replaceAll('_', ' ')
+const dateFormatter = new Intl.DateTimeFormat('nl-NL', {
+  day: '2-digit',
+  month: '2-digit',
+  year: 'numeric',
+})
+
+function formatDate(iso: string) {
+  return dateFormatter.format(new Date(iso))
+}
+
+function navigateToDetail(_event: Event, row: { item: EventType }) {
+  router.push({ name: 'events-id', params: { id: row.item.id } })
 }
 </script>

 <template>
  <div>
+    <!-- No org selected -->
    <VAlert
-      v-if="!organisationId"
+      v-if="!orgId"
      type="warning"
      class="mb-4"
    >
-      You need to belong to an organisation to see events. Ask an administrator to invite you.
+      Selecteer eerst een organisatie.
+      <template #append>
+        <VBtn
+          variant="text"
+          :to="{ name: 'organisation' }"
+        >
+          Naar organisatie
+        </VBtn>
+      </template>
    </VAlert>

-    <VCard>
-      <VCardTitle>
-        <h4 class="text-h4 mb-1">
-          Events
+    <template v-else>
+      <div class="d-flex justify-space-between align-center mb-6">
+        <h4 class="text-h4">
+          Evenementen
        </h4>
-        <p class="text-body-2 text-medium-emphasis">
-          Events for your organisation
-        </p>
-      </VCardTitle>
-
-      <VDivider />
-
-      <div
-        v-if="isLoading"
-        class="d-flex justify-center align-center py-12"
-      >
-        <VProgressCircular
-          indeterminate
-          color="primary"
-        />
+        <VBtn
+          prepend-icon="tabler-plus"
+          @click="isCreateDialogOpen = true"
+        >
+          Nieuw evenement
+        </VBtn>
      </div>

+      <!-- Loading -->
+      <VSkeletonLoader
+        v-if="isLoading"
+        type="table"
+      />
+
+      <!-- Error -->
      <VAlert
-        v-else-if="error"
+        v-else-if="isError"
        type="error"
-        class="ma-4"
+        class="mb-4"
      >
-        {{ error.message }}
+        Kon evenementen niet laden.
+        <template #append>
+          <VBtn
+            variant="text"
+            @click="refetch()"
+          >
+            Opnieuw proberen
+          </VBtn>
+        </template>
      </VAlert>

-      <div
-        v-else-if="events.length > 0"
-        class="pa-4"
-      >
-        <VRow>
-          <VCol
-            v-for="event in events"
-            :key="event.id"
-            cols="12"
-            md="6"
-            lg="4"
-          >
-            <VCard>
-              <VCardTitle>
-                <RouterLink
-                  :to="{ name: 'events-view-id', params: { id: event.id } }"
-                  class="text-decoration-none text-high-emphasis"
-                >
-                  {{ event.name }}
-                </RouterLink>
-              </VCardTitle>
-
-              <VCardText>
-                <div class="mb-2">
-                  <VChip
-                    :color="getStatusColor(event.status)"
-                    size="small"
-                    class="mr-2"
-                  >
-                    {{ formatStatusLabel(event.status) }}
-                  </VChip>
-                </div>
-                <div class="text-body-2">
-                  {{ new Date(event.start_date).toLocaleDateString() }}
-                  –
-                  {{ new Date(event.end_date).toLocaleDateString() }}
-                </div>
-                <div class="text-body-2 text-medium-emphasis">
-                  {{ event.timezone }}
-                </div>
-              </VCardText>
-
-              <VCardActions>
-                <VBtn
-                  :to="{ name: 'events-view-id', params: { id: event.id } }"
-                  variant="text"
-                >
-                  View details
-                </VBtn>
-              </VCardActions>
-            </VCard>
-          </VCol>
-        </VRow>
-
-        <div
-          v-if="pagination && pagination.last_page > 1"
-          class="d-flex justify-center mt-4"
-        >
-          <VPagination
-            v-model="page"
-            :length="pagination.last_page"
-            :total-visible="7"
-          />
-        </div>
-      </div>
-
-      <VCardText
-        v-else
-        class="text-center py-12"
+      <!-- Empty -->
+      <VCard
+        v-else-if="!events?.length"
+        class="text-center pa-8"
      >
        <VIcon
-          icon="tabler-calendar-off"
-          size="64"
-          class="text-medium-emphasis mb-4"
+          icon="tabler-calendar-event"
+          size="48"
+          class="mb-4 text-disabled"
        />
-        <p class="text-h6 text-medium-emphasis">
-          No events yet
+        <p class="text-body-1 text-disabled">
+          Nog geen evenementen
        </p>
-      </VCardText>
-    </VCard>
+      </VCard>
+
+      <!-- Data table -->
+      <VCard v-else>
+        <VDataTable
+          :headers="headers"
+          :items="events"
+          item-value="id"
+          hover
+          @click:row="navigateToDetail"
+        >
+          <template #item.status="{ item }">
+            <VChip
+              :color="statusColor[item.status]"
+              size="small"
+            >
+              {{ item.status }}
+            </VChip>
+          </template>
+
+          <template #item.start_date="{ item }">
+            {{ formatDate(item.start_date) }}
+          </template>
+
+          <template #item.end_date="{ item }">
+            {{ formatDate(item.end_date) }}
+          </template>
+
+          <template #item.actions="{ item }">
+            <VBtn
+              icon="tabler-eye"
+              variant="text"
+              size="small"
+              :to="{ name: 'events-id', params: { id: item.id } }"
+              @click.stop
+            />
+          </template>
+        </VDataTable>
+      </VCard>
+
+      <CreateEventDialog
+        v-model="isCreateDialogOpen"
+        :org-id="orgId"
+      />
+    </template>
  </div>
 </template>
--- a/apps/app/src/pages/index.vue
+++ b/apps/app/src/pages/index.vue
@@ -1,25 +1,10 @@
-<template>
-  <div>
-    <VCard
-      class="mb-6"
-      title="Kick start your project 🚀"
-    >
-      <VCardText>All the best for your new project.</VCardText>
-      <VCardText>
-        Please make sure to read our <a
-          href="https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="text-decoration-none"
-        >
-          Template Documentation
-        </a> to understand where to go from here and how to use our template.
-      </VCardText>
-    </VCard>
+<script setup lang="ts">
+import { useRouter } from 'vue-router'

-    <VCard title="Want to integrate JWT? 🔒">
-      <VCardText>We carefully crafted JWT flow so you can implement JWT with ease and with minimum efforts.</VCardText>
-      <VCardText>Please read our  JWT Documentation to get more out of JWT authentication.</VCardText>
-    </VCard>
-  </div>
+const router = useRouter()
+router.replace({ name: 'dashboard' })
+</script>
+
+<template>
+  <div />
 </template>
--- a/apps/app/src/pages/login.vue
+++ b/apps/app/src/pages/login.vue
@@ -10,8 +10,9 @@ import authV2MaskDark from '@images/pages/misc-mask-dark.png'
 import authV2MaskLight from '@images/pages/misc-mask-light.png'
 import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
 import { themeConfig } from '@themeConfig'
-import { apiClient } from '@/lib/axios'
+import { useLogin } from '@/composables/api/useAuth'
 import { emailValidator, requiredValidator } from '@core/utils/validators'
+import type { LoginCredentials } from '@/types/auth'

 definePage({
  meta: {
@@ -23,17 +24,18 @@ definePage({
 const route = useRoute()
 const router = useRouter()

-const form = ref({
+const form = ref<LoginCredentials & { remember: boolean }>({
  email: '',
  password: '',
  remember: false,
 })

 const isPasswordVisible = ref(false)
-const isLoading = ref(false)
 const errors = ref<Record<string, string>>({})
 const refVForm = ref<VForm>()

+const { mutate: login, isPending } = useLogin()
+
 const authThemeImg = useGenerateImageVariant(
  authV2LoginIllustrationLight,
  authV2LoginIllustrationDark,
@@ -43,62 +45,35 @@ const authThemeImg = useGenerateImageVariant(

 const authThemeMask = useGenerateImageVariant(authV2MaskLight, authV2MaskDark)

-async function handleLogin() {
+function handleLogin() {
  errors.value = {}
-  isLoading.value = true

-  try {
-    const { data } = await apiClient.post('/auth/login', {
-      email: form.value.email,
-      password: form.value.password,
-    })
+  login(
+    { email: form.value.email, password: form.value.password },
+    {
+      onSuccess: () => {
+        const redirectTo = route.query.to ? String(route.query.to) : '/dashboard'

-    if (data.success && data.data) {
-      // Store token in cookie (axios interceptor reads from accessToken cookie)
-      document.cookie = `accessToken=${data.data.token}; path=/`
-
-      // Store user data in cookie if needed
-      if (data.data.user) {
-        document.cookie = `userData=${JSON.stringify(data.data.user)}; path=/`
-      }
-
-      // Redirect to home or the 'to' query parameter
-      await nextTick(() => {
-        const redirectTo = route.query.to ? String(route.query.to) : '/'
        router.replace(redirectTo)
-      })
-    }
-  } catch (err: any) {
-    console.error('Login error:', err)
-    
-    // Handle API errors
-    if (err.response?.data) {
-      const errorData = err.response.data
-      
-      if (errorData.errors) {
-        // Validation errors
-        errors.value = {
-          email: errorData.errors.email?.[0],
-          password: errorData.errors.password?.[0],
+      },
+      onError: (err: any) => {
+        const errorData = err.response?.data
+
+        if (errorData?.errors) {
+          errors.value = {
+            email: errorData.errors.email?.[0] ?? '',
+            password: errorData.errors.password?.[0] ?? '',
+          }
        }
-      } else if (errorData.message) {
-        // General error message
-        errors.value = {
-          email: errorData.message,
+        else if (errorData?.message) {
+          errors.value = { email: errorData.message }
        }
-      } else {
-        errors.value = {
-          email: 'Invalid email or password',
+        else {
+          errors.value = { email: 'An error occurred. Please try again.' }
        }
-      }
-    } else {
-      errors.value = {
-        email: 'An error occurred. Please try again.',
-      }
-    }
-  } finally {
-    isLoading.value = false
-  }
+      },
+    },
+  )
 }

 function onSubmit() {
@@ -218,7 +193,7 @@ function onSubmit() {
                <VBtn
                  block
                  type="submit"
-                  :loading="isLoading"
+                  :loading="isPending"
                >
                  Login
                </VBtn>
--- a/apps/app/src/pages/organisation/index.vue
+++ b/apps/app/src/pages/organisation/index.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { useMyOrganisation } from '@/composables/api/useOrganisations'
+import { useAuthStore } from '@/stores/useAuthStore'
+import EditOrganisationDialog from '@/components/organisations/EditOrganisationDialog.vue'
+import type { Organisation } from '@/types/organisation'
+
+const authStore = useAuthStore()
+
+const { data: organisation, isLoading, isError, refetch } = useMyOrganisation()
+
+const isEditDialogOpen = ref(false)
+
+const isOrgAdmin = computed(() => {
+  const role = authStore.currentOrganisation?.role
+  return role === 'org_admin' || authStore.isSuperAdmin
+})
+
+const statusColor: Record<Organisation['billing_status'], string> = {
+  trial: 'info',
+  active: 'success',
+  suspended: 'warning',
+  cancelled: 'error',
+}
+
+function formatDate(iso: string) {
+  return new Date(iso).toLocaleDateString('nl-NL', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+}
+</script>
+
+<template>
+  <div>
+    <!-- Loading -->
+    <VSkeletonLoader
+      v-if="isLoading"
+      type="card"
+    />
+
+    <!-- Error -->
+    <VAlert
+      v-else-if="isError"
+      type="error"
+      class="mb-4"
+    >
+      Kon organisatie niet laden.
+      <template #append>
+        <VBtn
+          variant="text"
+          @click="refetch()"
+        >
+          Opnieuw proberen
+        </VBtn>
+      </template>
+    </VAlert>
+
+    <template v-else-if="organisation">
+      <!-- Header -->
+      <div class="d-flex justify-space-between align-center mb-6">
+        <div class="d-flex align-center gap-x-3">
+          <h4 class="text-h4">
+            {{ organisation.name }}
+          </h4>
+          <VChip
+            :color="statusColor[organisation.billing_status]"
+            size="small"
+          >
+            {{ organisation.billing_status }}
+          </VChip>
+        </div>
+        <VBtn
+          v-if="isOrgAdmin"
+          prepend-icon="tabler-edit"
+          @click="isEditDialogOpen = true"
+        >
+          Naam bewerken
+        </VBtn>
+      </div>
+
+      <!-- Info card -->
+      <VCard>
+        <VCardText>
+          <VRow>
+            <VCol
+              cols="12"
+              md="4"
+            >
+              <h6 class="text-h6 mb-1">
+                Slug
+              </h6>
+              <p class="text-body-1 text-disabled mb-0">
+                {{ organisation.slug }}
+              </p>
+            </VCol>
+            <VCol
+              cols="12"
+              md="4"
+            >
+              <h6 class="text-h6 mb-1">
+                Aangemaakt op
+              </h6>
+              <p class="text-body-1 text-disabled mb-0">
+                {{ formatDate(organisation.created_at) }}
+              </p>
+            </VCol>
+            <VCol
+              cols="12"
+              md="4"
+            >
+              <h6 class="text-h6 mb-1">
+                Status
+              </h6>
+              <VChip
+                :color="statusColor[organisation.billing_status]"
+                size="small"
+              >
+                {{ organisation.billing_status }}
+              </VChip>
+            </VCol>
+          </VRow>
+        </VCardText>
+      </VCard>
+
+      <EditOrganisationDialog
+        v-model="isEditDialogOpen"
+        :organisation="organisation"
+      />
+    </template>
+  </div>
+</template>
--- a/apps/app/src/plugins/1.router/guards.ts
+++ b/apps/app/src/plugins/1.router/guards.ts
@@ -0,0 +1,19 @@
+import type { Router } from 'vue-router'
+import { useAuthStore } from '@/stores/useAuthStore'
+
+export function setupGuards(router: Router) {
+  router.beforeEach((to) => {
+    const authStore = useAuthStore()
+    const isPublic = to.meta.public === true
+
+    // Guest-only pages (login): redirect to home if already authenticated
+    if (isPublic && authStore.isAuthenticated) {
+      return { name: 'dashboard' }
+    }
+
+    // Protected pages: redirect to login if not authenticated
+    if (!isPublic && !authStore.isAuthenticated) {
+      return { path: '/login', query: { to: to.fullPath } }
+    }
+  })
+}
--- a/apps/app/src/plugins/1.router/index.ts
+++ b/apps/app/src/plugins/1.router/index.ts
@@ -4,6 +4,7 @@ import type { App } from 'vue'
 import type { RouteRecordRaw } from 'vue-router/auto'

 import { createRouter, createWebHistory } from 'vue-router/auto'
+import { setupGuards } from './guards'

 function recursiveLayouts(route: RouteRecordRaw): RouteRecordRaw {
  if (route.children) {
@@ -29,6 +30,8 @@ const router = createRouter({
  ],
 })

+setupGuards(router)
+
 export { router }

 export default function (app: App) {
--- a/apps/app/src/stores/useAuthStore.ts
+++ b/apps/app/src/stores/useAuthStore.ts
@@ -0,0 +1,81 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+import { useOrganisationStore } from '@/stores/useOrganisationStore'
+import type { MeResponse, Organisation, User } from '@/types/auth'
+
+const TOKEN_KEY = 'crewli_token'
+
+export const useAuthStore = defineStore('auth', () => {
+  const token = ref<string | null>(localStorage.getItem(TOKEN_KEY))
+  const user = ref<User | null>(null)
+  const organisations = ref<Organisation[]>([])
+  const appRoles = ref<string[]>([])
+  const permissions = ref<string[]>([])
+
+  const isAuthenticated = computed(() => !!token.value)
+  const isSuperAdmin = computed(() => appRoles.value?.includes('super_admin') ?? false)
+
+  const currentOrganisation = computed(() => {
+    const orgStore = useOrganisationStore()
+    return organisations.value.find(o => o.id === orgStore.activeOrganisationId)
+      ?? organisations.value[0]
+      ?? null
+  })
+
+  function setToken(newToken: string) {
+    token.value = newToken
+    localStorage.setItem(TOKEN_KEY, newToken)
+  }
+
+  function setUser(me: MeResponse) {
+    user.value = {
+      id: me.id,
+      name: me.name,
+      email: me.email,
+      timezone: me.timezone,
+      locale: me.locale,
+      avatar: me.avatar,
+    }
+    organisations.value = me.organisations
+    appRoles.value = me.app_roles
+    permissions.value = me.permissions
+
+    // Auto-select first organisation if none is active
+    const orgStore = useOrganisationStore()
+    if (!orgStore.activeOrganisationId && me.organisations.length > 0) {
+      orgStore.setActiveOrganisation(me.organisations[0].id)
+    }
+  }
+
+  function setActiveOrganisation(id: string) {
+    const orgStore = useOrganisationStore()
+    orgStore.setActiveOrganisation(id)
+  }
+
+  function logout() {
+    token.value = null
+    user.value = null
+    organisations.value = []
+    appRoles.value = []
+    permissions.value = []
+    localStorage.removeItem(TOKEN_KEY)
+
+    const orgStore = useOrganisationStore()
+    orgStore.clear()
+  }
+
+  return {
+    token,
+    user,
+    organisations,
+    appRoles,
+    permissions,
+    isAuthenticated,
+    isSuperAdmin,
+    currentOrganisation,
+    setToken,
+    setUser,
+    setActiveOrganisation,
+    logout,
+  }
+})
--- a/apps/app/src/stores/useOrganisationStore.ts
+++ b/apps/app/src/stores/useOrganisationStore.ts
@@ -0,0 +1,35 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+const ACTIVE_ORG_KEY = 'crewli_active_org'
+const ACTIVE_EVENT_KEY = 'crewli_active_event'
+
+export const useOrganisationStore = defineStore('organisation', () => {
+  const activeOrganisationId = ref<string | null>(localStorage.getItem(ACTIVE_ORG_KEY))
+  const activeEventId = ref<string | null>(localStorage.getItem(ACTIVE_EVENT_KEY))
+
+  function setActiveOrganisation(id: string) {
+    activeOrganisationId.value = id
+    localStorage.setItem(ACTIVE_ORG_KEY, id)
+  }
+
+  function setActiveEvent(id: string) {
+    activeEventId.value = id
+    localStorage.setItem(ACTIVE_EVENT_KEY, id)
+  }
+
+  function clear() {
+    activeOrganisationId.value = null
+    activeEventId.value = null
+    localStorage.removeItem(ACTIVE_ORG_KEY)
+    localStorage.removeItem(ACTIVE_EVENT_KEY)
+  }
+
+  return {
+    activeOrganisationId,
+    activeEventId,
+    setActiveOrganisation,
+    setActiveEvent,
+    clear,
+  }
+})
--- a/apps/app/src/styles/settings.scss
+++ b/apps/app/src/styles/settings.scss
@@ -0,0 +1,3 @@
+// Vuetify variable entry (vite-plugin-vuetify `styles.configFile`).
+// Re-exports Vuexy overrides from the standard assets location.
+@forward "../assets/styles/variables/vuetify";
--- a/apps/app/src/types/auth.ts
+++ b/apps/app/src/types/auth.ts
@@ -0,0 +1,47 @@
+export interface User {
+  id: string
+  name: string
+  email: string
+  timezone: string
+  locale: string
+  avatar: string | null
+}
+
+export interface Organisation {
+  id: string
+  name: string
+  slug: string
+  role: string
+}
+
+export interface MeResponse {
+  id: string
+  name: string
+  email: string
+  timezone: string
+  locale: string
+  avatar: string | null
+  organisations: Organisation[]
+  app_roles: string[]
+  permissions: string[]
+}
+
+export interface LoginCredentials {
+  email: string
+  password: string
+}
+
+export interface LoginResponse {
+  success: boolean
+  data: {
+    user: MeResponse
+    token: string
+  }
+  message: string
+}
+
+export interface ApiErrorResponse {
+  success: false
+  message: string
+  errors?: Record<string, string[]>
+}
--- a/apps/app/src/types/event.ts
+++ b/apps/app/src/types/event.ts
@@ -0,0 +1,32 @@
+export type EventStatus =
+  | 'draft'
+  | 'published'
+  | 'registration_open'
+  | 'buildup'
+  | 'showday'
+  | 'teardown'
+  | 'closed'
+
+export interface EventType {
+  id: string
+  organisation_id: string
+  name: string
+  slug: string
+  status: EventStatus
+  start_date: string
+  end_date: string
+  timezone: string
+  created_at: string
+}
+
+export interface CreateEventPayload {
+  name: string
+  slug: string
+  start_date: string
+  end_date: string
+  timezone: string
+}
+
+export interface UpdateEventPayload extends Partial<CreateEventPayload> {
+  status?: EventStatus
+}
--- a/apps/app/src/types/organisation.ts
+++ b/apps/app/src/types/organisation.ts
@@ -0,0 +1,22 @@
+export interface Organisation {
+  id: string
+  name: string
+  slug: string
+  billing_status: 'trial' | 'active' | 'suspended' | 'cancelled'
+  settings: Record<string, unknown> | null
+  created_at: string
+}
+
+export interface OrganisationMember {
+  id: string
+  name: string
+  email: string
+  role: string
+}
+
+export interface UpdateOrganisationPayload {
+  name?: string
+  slug?: string
+  billing_status?: Organisation['billing_status']
+  settings?: Record<string, unknown>
+}
--- a/apps/app/themeConfig.ts
+++ b/apps/app/themeConfig.ts
@@ -10,7 +10,7 @@ import { AppContentLayoutNav, ContentWidth, FooterType, NavbarType } from '@layo

 export const { themeConfig, layoutConfig } = defineThemeConfig({
  app: {
-    title: 'Organizer',
+    title: 'Organizer' as Lowercase<string>,
    logo: h('div', { innerHTML: logo, style: 'line-height:0; color: rgb(var(--v-global-theme-primary))' }),
    contentWidth: ContentWidth.Boxed,
    contentLayoutNav: AppContentLayoutNav.Vertical,
--- a/apps/app/tsconfig.json
+++ b/apps/app/tsconfig.json
@@ -39,12 +39,6 @@
      ],
      "@validators": [
        "./src/@core/utils/validators"
-      ],
-      "@db/*": [
-        "./src/plugins/fake-api/handlers/*"
-      ],
-      "@api-utils/*": [
-        "./src/plugins/fake-api/utils/*"
      ]
    },
    "lib": [
--- a/apps/app/typed-router.d.ts
+++ b/apps/app/typed-router.d.ts
@@ -20,8 +20,10 @@ declare module 'vue-router/auto-routes' {
  export interface RouteNamedMap {
    'root': RouteRecordInfo<'root', '/', Record<never, never>, Record<never, never>>,
    '$error': RouteRecordInfo<'$error', '/:error(.*)', { error: ParamValue<true> }, { error: ParamValue<false> }>,
+    'dashboard': RouteRecordInfo<'dashboard', '/dashboard', Record<never, never>, Record<never, never>>,
    'events': RouteRecordInfo<'events', '/events', Record<never, never>, Record<never, never>>,
    'events-id': RouteRecordInfo<'events-id', '/events/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
    'login': RouteRecordInfo<'login', '/login', Record<never, never>, Record<never, never>>,
+    'organisation': RouteRecordInfo<'organisation', '/organisation', Record<never, never>, Record<never, never>>,
  }
 }
--- a/apps/app/vite.config.ts
+++ b/apps/app/vite.config.ts
@@ -38,7 +38,8 @@ export default defineConfig({
    // Docs: https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin
    vuetify({
      styles: {
-        configFile: 'src/assets/styles/variables/_vuetify.scss',
+        // Absolute URL so resolution does not depend on process cwd (fixes common SASS 404s).
+        configFile: fileURLToPath(new URL('./src/styles/settings.scss', import.meta.url)),
      },
    }),

@@ -90,8 +91,6 @@ export default defineConfig({
      '@images': fileURLToPath(new URL('./src/assets/images/', import.meta.url)),
      '@styles': fileURLToPath(new URL('./src/assets/styles/', import.meta.url)),
      '@configured-variables': fileURLToPath(new URL('./src/assets/styles/variables/_template.scss', import.meta.url)),
-      '@db': fileURLToPath(new URL('./src/plugins/fake-api/handlers/', import.meta.url)),
-      '@api-utils': fileURLToPath(new URL('./src/plugins/fake-api/utils/', import.meta.url)),
    },
  },
  server: {
--- a/docs/TEST_SCENARIO.md
+++ b/docs/TEST_SCENARIO.md
@@ -0,0 +1,112 @@
+# Crewli — End-to-End Testscenario Fase 2
+
+## Scenario: "Test Festival BV organiseert Echt Feesten 2026"
+
+Dit scenario valideert de complete operationele kern van Crewli.
+Voer dit uit na elke Fase 2 module om regressie te voorkomen.
+
+---
+
+## Stap 1 — Voorbereiding (al werkend na Fase 1)
+
+- [ ] Login als orgadmin@crewli.test / password
+- [ ] Organisatie "Test Festival BV" is automatisch actief
+- [ ] Navigeer naar Evenementen
+- [ ] Maak aan: "Echt Feesten 2026" | slug: echt-feesten-2026
+      start: 10-07-2026 | eind: 12-07-2026 | timezone: Europe/Amsterdam
+- [ ] Evenement verschijnt in lijst met status "draft"
+- [ ] Klik door naar detail pagina — header toont naam, datum, status
+
+---
+
+## Stap 2 — Festival Secties (Fase 2 Module 1)
+
+- [ ] Navigeer naar evenement detail > tab "Secties"
+- [ ] Maak sectie aan: "Bar" (sort_order: 1)
+- [ ] Maak sectie aan: "Security" (sort_order: 2)
+- [ ] Maak sectie aan: "Hospitality" (sort_order: 3)
+- [ ] Drie secties zichtbaar in lijst, correct gesorteerd
+
+---
+
+## Stap 3 — Time Slots (Fase 2 Module 1)
+
+- [ ] Navigeer naar evenement detail > tab "Time Slots"
+- [ ] Maak time slot aan:
+      Naam: "Vrijdag Avond" | type: VOLUNTEER
+      datum: 10-07-2026 | start: 18:00 | eind: 02:00
+- [ ] Maak time slot aan:
+      Naam: "Zaterdag Dag" | type: VOLUNTEER
+      datum: 11-07-2026 | start: 10:00 | eind: 18:00
+- [ ] Maak time slot aan:
+      Naam: "Zaterdag Avond" | type: VOLUNTEER
+      datum: 11-07-2026 | start: 18:00 | eind: 02:00
+- [ ] Maak time slot aan:
+      Naam: "Zondag" | type: CREW
+      datum: 12-07-2026 | start: 10:00 | eind: 20:00
+- [ ] Vier time slots zichtbaar, correct gesorteerd op datum/tijd
+
+---
+
+## Stap 4 — Shifts aanmaken (Fase 2 Module 2)
+
+- [ ] Navigeer naar sectie "Bar"
+- [ ] Maak shift aan: Time Slot "Vrijdag Avond" | slots_total: 4
+      slots_open_for_claiming: 3
+- [ ] Maak shift aan: Time Slot "Zaterdag Dag" | slots_total: 5
+      slots_open_for_claiming: 4
+- [ ] Maak shift aan: Time Slot "Zaterdag Avond" | slots_total: 4
+      slots_open_for_claiming: 3
+- [ ] Navigeer naar sectie "Security"
+- [ ] Maak shift aan: Time Slot "Vrijdag Avond" | slots_total: 3
+      slots_open_for_claiming: 2
+- [ ] Maak shift aan: Time Slot "Zaterdag Avond" | slots_total: 3
+      slots_open_for_claiming: 2
+- [ ] Shifts tonen fill_rate: 0/4, 0/5, etc.
+
+---
+
+## Stap 5 — Personen aanmaken (Fase 2 Module 3)
+
+- [ ] Navigeer naar Personen (event-scoped)
+- [ ] Maak 5 personen aan als crowd_type "Volunteer": 1. Jan de Vries | jan@test.nl 2. Lisa Bakker | lisa@test.nl 3. Ahmed Hassan | ahmed@test.nl 4. Sara Jansen | sara@test.nl 5. Tom Visser | tom@test.nl
+- [ ] Vijf personen zichtbaar in lijst, status "pending"
+
+---
+
+## Stap 6 — Shift toewijzing (Fase 2 Module 2)
+
+- [ ] Wijs Jan de Vries toe aan: Bar > Vrijdag Avond
+- [ ] Wijs Jan de Vries toe aan: Bar > Zaterdag Dag
+- [ ] Wijs Lisa Bakker toe aan: Bar > Vrijdag Avond
+- [ ] Wijs Ahmed Hassan toe aan: Security > Vrijdag Avond
+- [ ] Fill rate Bar > Vrijdag Avond: 2/4 ✓
+
+---
+
+## Stap 7 — Conflictdetectie (Fase 2 Module 2)
+
+- [ ] Probeer Jan de Vries toe te wijzen aan:
+      Security > Vrijdag Avond (zelfde time slot!)
+- [ ] Systeem weigert met foutmelding:
+      "Jan de Vries is al ingepland voor Vrijdag Avond"
+- [ ] Conflictdetectie werkt op DB-niveau (UNIQUE constraint)
+
+---
+
+## Stap 8 — Overzicht validatie
+
+- [ ] Event dashboard tiles tonen correcte aantallen:
+      Secties: 3 | Shifts: 5 | Personen: 5
+- [ ] Sectie "Bar" toont 3 shifts, totaal 13 slots
+- [ ] Persoon "Jan de Vries" toont 2 shift-toewijzingen
+- [ ] Geen console errors in browser DevTools
+
+---
+
+## Regressie — controleer na elke nieuwe module
+
+- [ ] Login werkt nog (admin@crewli.test en orgadmin@crewli.test)
+- [ ] Organisatie switcher werkt nog
+- [ ] Events lijst laadt zonder errors
+- [ ] php artisan test → alle tests groen
--- a/resources/corporate-identity/Favicon.png
+++ b/resources/corporate-identity/Favicon.png
--- a/resources/corporate-identity/Logo
+++ b/resources/corporate-identity/Logo
--- a/resources/corporate-identity/Logo.ai
+++ b/resources/corporate-identity/Logo.ai