feat: companies CRUD with person dialog integration and navigation

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

apps/app/src/components/persons/CreatePersonDialog.vue

@@ -2,6 +2,7 @@
 import { VForm } from 'vuetify/components/VForm'
 import { useCreatePerson } from '@/composables/api/usePersons'
 import { useCrowdTypeList } from '@/composables/api/useCrowdTypes'
+import { useCompanies } from '@/composables/api/useCompanies'
 import { requiredValidator, emailValidator } from '@core/utils/validators'
 import type { PersonStatus } from '@/types/person'
 
@@ -16,6 +17,7 @@ const eventIdRef = computed(() => props.eventId)
 const orgIdRef = computed(() => props.orgId)
 
 const { data: crowdTypes } = useCrowdTypeList(orgIdRef)
+const { data: companies } = useCompanies(orgIdRef)
 
 const form = ref({
   crowd_type_id: '',
@@ -34,9 +36,27 @@ const successName = ref('')
 const { mutate: createPerson, isPending } = useCreatePerson(eventIdRef)
 
 const crowdTypeItems = computed(() =>
-  crowdTypes.value?.map(ct => ({
-    title: ct.name,
-    value: ct.id,
+  crowdTypes.value
+    ?.filter(ct => ct.is_active)
+    .map(ct => ({
+      title: ct.name,
+      value: ct.id,
+    })) ?? [],
+)
+
+const typeLabel: Record<string, string> = {
+  supplier: 'Leverancier',
+  partner: 'Partner',
+  agency: 'Bureau',
+  venue: 'Locatie',
+  other: 'Overig',
+}
+
+const companyItems = computed(() =>
+  companies.value?.map(c => ({
+    title: c.name,
+    value: c.id,
+    subtitle: typeLabel[c.type] ?? c.type,
   })) ?? [],
 )
 
@@ -104,11 +124,11 @@ function onSubmit() {
     @after-leave="resetForm"
   >
     <VCard title="Persoon toevoegen">
-      <VCardText>
-        <VForm
-          ref="refVForm"
-          @submit.prevent="onSubmit"
-        >
+      <VForm
+        ref="refVForm"
+        @submit.prevent="onSubmit"
+      >
+        <VCardText>
           <VRow>
             <VCol cols="12">
               <AppSelect
@@ -145,19 +165,13 @@ function onSubmit() {
               />
             </VCol>
             <VCol cols="12">
-              <VTooltip location="top">
-                <template #activator="{ props: tooltipProps }">
-                  <div v-bind="tooltipProps">
-                    <AppSelect
-                      model-value=""
-                      label="Bedrijf"
-                      :items="[]"
-                      disabled
-                    />
-                  </div>
-                </template>
-                Komt beschikbaar zodra bedrijven zijn aangemaakt
-              </VTooltip>
+              <AppSelect
+                v-model="form.company_id"
+                label="Bedrijf"
+                :items="companyItems"
+                clearable
+                :no-data-text="'Nog geen bedrijven'"
+              />
             </VCol>
             <VCol cols="12">
               <AppSelect
@@ -168,24 +182,24 @@ function onSubmit() {
               />
             </VCol>
           </VRow>
-        </VForm>
-      </VCardText>
-      <VCardActions>
-        <VSpacer />
-        <VBtn
-          variant="text"
-          @click="modelValue = false"
-        >
-          Annuleren
-        </VBtn>
-        <VBtn
-          color="primary"
-          :loading="isPending"
-          @click="onSubmit"
-        >
-          Toevoegen
-        </VBtn>
-      </VCardActions>
+        </VCardText>
+        <VCardActions>
+          <VSpacer />
+          <VBtn
+            variant="text"
+            @click="modelValue = false"
+          >
+            Annuleren
+          </VBtn>
+          <VBtn
+            type="submit"
+            color="primary"
+            :loading="isPending"
+          >
+            Toevoegen
+          </VBtn>
+        </VCardActions>
+      </VForm>
     </VCard>
   </VDialog>
 

apps/app/src/components/persons/EditPersonDialog.vue

@@ -2,6 +2,7 @@
 import { VForm } from 'vuetify/components/VForm'
 import { useUpdatePerson } from '@/composables/api/usePersons'
 import { useCrowdTypeList } from '@/composables/api/useCrowdTypes'
+import { useCompanies } from '@/composables/api/useCompanies'
 import { requiredValidator, emailValidator } from '@core/utils/validators'
 import type { Person, PersonStatus } from '@/types/person'
 
@@ -17,6 +18,7 @@ const eventIdRef = computed(() => props.eventId)
 const orgIdRef = computed(() => props.orgId)
 
 const { data: crowdTypes } = useCrowdTypeList(orgIdRef)
+const { data: companies } = useCompanies(orgIdRef)
 const { mutate: updatePerson, isPending } = useUpdatePerson(eventIdRef)
 
 const form = ref({
@@ -24,6 +26,7 @@ const form = ref({
   name: '',
   email: '',
   phone: '',
+  company_id: '',
   status: 'pending' as PersonStatus,
   admin_notes: '',
   is_blacklisted: false,
@@ -39,6 +42,7 @@ watch(() => props.person, (p) => {
     name: p.name,
     email: p.email,
     phone: p.phone ?? '',
+    company_id: p.company?.id ?? '',
     status: p.status,
     admin_notes: p.admin_notes ?? '',
     is_blacklisted: p.is_blacklisted,
@@ -46,9 +50,27 @@ watch(() => props.person, (p) => {
 }, { immediate: true })
 
 const crowdTypeItems = computed(() =>
-  crowdTypes.value?.map(ct => ({
-    title: ct.name,
-    value: ct.id,
+  crowdTypes.value
+    ?.filter(ct => ct.is_active)
+    .map(ct => ({
+      title: ct.name,
+      value: ct.id,
+    })) ?? [],
+)
+
+const typeLabel: Record<string, string> = {
+  supplier: 'Leverancier',
+  partner: 'Partner',
+  agency: 'Bureau',
+  venue: 'Locatie',
+  other: 'Overig',
+}
+
+const companyItems = computed(() =>
+  companies.value?.map(c => ({
+    title: c.name,
+    value: c.id,
+    subtitle: typeLabel[c.type] ?? c.type,
   })) ?? [],
 )
 
@@ -73,6 +95,7 @@ function onSubmit() {
       name: form.value.name,
       email: form.value.email,
       phone: form.value.phone || undefined,
+      company_id: form.value.company_id || undefined,
       status: form.value.status,
       admin_notes: form.value.admin_notes || undefined,
       is_blacklisted: form.value.is_blacklisted,
@@ -103,11 +126,11 @@ function onSubmit() {
     max-width="550"
   >
     <VCard title="Persoon bewerken">
-      <VCardText>
-        <VForm
-          ref="refVForm"
-          @submit.prevent="onSubmit"
-        >
+      <VForm
+        ref="refVForm"
+        @submit.prevent="onSubmit"
+      >
+        <VCardText>
           <VRow>
             <VCol cols="12">
               <AppSelect
@@ -143,6 +166,15 @@ function onSubmit() {
                 :error-messages="errors.phone"
               />
             </VCol>
+            <VCol cols="12">
+              <AppSelect
+                v-model="form.company_id"
+                label="Bedrijf"
+                :items="companyItems"
+                clearable
+                :no-data-text="'Nog geen bedrijven'"
+              />
+            </VCol>
             <VCol
               cols="12"
               md="6"
@@ -171,27 +203,28 @@ function onSubmit() {
                 variant="outlined"
                 rows="3"
                 :error-messages="errors.admin_notes"
+                autocomplete="one-time-code"
               />
             </VCol>
           </VRow>
-        </VForm>
-      </VCardText>
-      <VCardActions>
-        <VSpacer />
-        <VBtn
-          variant="text"
-          @click="modelValue = false"
-        >
-          Annuleren
-        </VBtn>
-        <VBtn
-          color="primary"
-          :loading="isPending"
-          @click="onSubmit"
-        >
-          Opslaan
-        </VBtn>
-      </VCardActions>
+        </VCardText>
+        <VCardActions>
+          <VSpacer />
+          <VBtn
+            variant="text"
+            @click="modelValue = false"
+          >
+            Annuleren
+          </VBtn>
+          <VBtn
+            type="submit"
+            color="primary"
+            :loading="isPending"
+          >
+            Opslaan
+          </VBtn>
+        </VCardActions>
+      </VForm>
     </VCard>
   </VDialog>