feat: festival/series model with sub-events, cross-event sections, tab navigation, SectionsShiftsPanel extraction

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/app/src/components/sections/CreateSectionDialog.vue

@@ -1,19 +1,34 @@
 <script setup lang="ts">
 import { VForm } from 'vuetify/components/VForm'
-import { useCreateSection } from '@/composables/api/useSections'
+import { useCreateSection, useSectionCategories } from '@/composables/api/useSections'
+import { useAuthStore } from '@/stores/useAuthStore'
 import { requiredValidator } from '@core/utils/validators'
 import type { SectionType } from '@/types/section'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   eventId: string
+  isSubEvent?: boolean
+  nextSortOrder?: number
+}>(), {
+  isSubEvent: false,
+  nextSortOrder: 0,
+})
+
+const emit = defineEmits<{
+  created: [payload: { name: string; redirectedToParent: boolean; parentEventName?: string }]
 }>()
 
 const modelValue = defineModel<boolean>({ required: true })
 
 const eventIdRef = computed(() => props.eventId)
+const authStore = useAuthStore()
+const orgId = computed(() => authStore.currentOrganisation?.id ?? '')
+const { data: categorySuggestions } = useSectionCategories(orgId)
 
 const form = ref({
   name: '',
+  category: null as string | null,
+  icon: null as string | null,
   type: 'standard' as SectionType,
   crew_auto_accepts: false,
   responder_self_checkin: true,
@@ -29,9 +44,15 @@ const typeOptions = [
   { title: 'Overkoepelend', value: 'cross_event' },
 ]
 
+const showCrossEventHint = computed(() =>
+  props.isSubEvent && form.value.type === 'cross_event',
+)
+
 function resetForm() {
   form.value = {
     name: '',
+    category: null,
+    icon: null,
     type: 'standard',
     crew_auto_accepts: false,
     responder_self_checkin: true,
@@ -49,13 +70,21 @@ function onSubmit() {
     createSection(
       {
         name: form.value.name,
+        category: form.value.category || null,
+        icon: form.value.icon || null,
         type: form.value.type,
+        sort_order: props.nextSortOrder,
         crew_auto_accepts: form.value.crew_auto_accepts,
         responder_self_checkin: form.value.responder_self_checkin,
       },
       {
-        onSuccess: () => {
+        onSuccess: (result) => {
           modelValue.value = false
+          emit('created', {
+            name: result.section.name,
+            redirectedToParent: result.redirectedToParent,
+            parentEventName: result.parentEventName,
+          })
           resetForm()
         },
         onError: (err: any) => {
@@ -65,6 +94,9 @@ function onSubmit() {
               Object.entries(data.errors).map(([k, v]) => [k, (v as string[])[0]]),
             )
           }
+          else if (data?.message) {
+            errors.value = { type: data.message }
+          }
         },
       },
     )
@@ -79,11 +111,11 @@ function onSubmit() {
     @after-leave="resetForm"
   >
     <VCard title="Sectie aanmaken">
-      <VCardText>
-        <VForm
-          ref="refVForm"
-          @submit.prevent="onSubmit"
-        >
+      <VForm
+        ref="refVForm"
+        @submit.prevent="onSubmit"
+      >
+        <VCardText>
           <VRow>
             <VCol cols="12">
               <AppTextField
@@ -92,8 +124,38 @@ function onSubmit() {
                 :rules="[requiredValidator]"
                 :error-messages="errors.name"
                 autofocus
+                autocomplete="one-time-code"
               />
             </VCol>
+            <VCol cols="12">
+              <VCombobox
+                v-model="form.category"
+                label="Categorie"
+                :items="categorySuggestions ?? []"
+                placeholder="Bijv. Bar, Podium, Operationeel..."
+                clearable
+                :error-messages="errors.category"
+                autocomplete="one-time-code"
+              />
+            </VCol>
+            <VCol cols="12">
+              <div class="d-flex align-center gap-x-2">
+                <AppTextField
+                  v-model="form.icon"
+                  label="Icoon"
+                  placeholder="tabler-beer"
+                  clearable
+                  :error-messages="errors.icon"
+                  class="flex-grow-1"
+                  autocomplete="one-time-code"
+                />
+                <VIcon
+                  v-if="form.icon"
+                  :icon="form.icon"
+                  size="24"
+                />
+              </div>
+            </VCol>
             <VCol cols="12">
               <AppSelect
                 v-model="form.type"
@@ -101,6 +163,15 @@ function onSubmit() {
                 :items="typeOptions"
                 :error-messages="errors.type"
               />
+              <VAlert
+                v-if="showCrossEventHint"
+                type="info"
+                variant="tonal"
+                density="compact"
+                class="mt-2"
+              >
+                Deze sectie wordt automatisch aangemaakt op festival-niveau en is zichtbaar in alle programmaonderdelen.
+              </VAlert>
             </VCol>
             <VCol cols="12">
               <VSwitch
@@ -119,24 +190,24 @@ function onSubmit() {
               />
             </VCol>
           </VRow>
-        </VForm>
-      </VCardText>
-      <VCardActions>
-        <VSpacer />
-        <VBtn
-          variant="text"
-          @click="modelValue = false"
-        >
-          Annuleren
-        </VBtn>
-        <VBtn
-          color="primary"
-          :loading="isPending"
-          @click="onSubmit"
-        >
-          Aanmaken
-        </VBtn>
-      </VCardActions>
+        </VCardText>
+        <VCardActions>
+          <VSpacer />
+          <VBtn
+            variant="text"
+            @click="modelValue = false"
+          >
+            Annuleren
+          </VBtn>
+          <VBtn
+            type="submit"
+            color="primary"
+            :loading="isPending"
+          >
+            Aanmaken
+          </VBtn>
+        </VCardActions>
+      </VForm>
     </VCard>
   </VDialog>
 </template>