feat: companies CRUD with person dialog integration and navigation

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

api/app/Http/Controllers/Api/V1/CompanyController.php

@@ -20,7 +20,10 @@ final class CompanyController extends Controller
     {
         Gate::authorize('viewAny', [Company::class, $organisation]);
 
-        $companies = $organisation->companies()->get();
+        $companies = $organisation->companies()
+            ->withCount('persons')
+            ->ordered()
+            ->get();
 
         return CompanyResource::collection($companies);
     }
@@ -34,6 +37,15 @@ final class CompanyController extends Controller
         return $this->created(new CompanyResource($company));
     }
 
+    public function show(Organisation $organisation, Company $company): JsonResponse
+    {
+        Gate::authorize('view', [$company, $organisation]);
+
+        $company->loadCount('persons');
+
+        return $this->success(new CompanyResource($company));
+    }
+
     public function update(UpdateCompanyRequest $request, Organisation $organisation, Company $company): JsonResponse
     {
         Gate::authorize('update', [$company, $organisation]);

api/app/Http/Requests/Api/V1/StoreCompanyRequest.php

@@ -17,10 +17,10 @@ final class StoreCompanyRequest extends FormRequest
     public function rules(): array
     {
         return [
-            'name' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:100'],
             'type' => ['required', 'in:supplier,partner,agency,venue,other'],
-            'contact_name' => ['nullable', 'string', 'max:255'],
+            'contact_name' => ['nullable', 'string', 'max:100'],
-            'contact_email' => ['nullable', 'email', 'max:255'],
+            'contact_email' => ['nullable', 'email', 'max:100'],
             'contact_phone' => ['nullable', 'string', 'max:30'],
         ];
     }

api/app/Http/Requests/Api/V1/UpdateCompanyRequest.php

@@ -17,10 +17,10 @@ final class UpdateCompanyRequest extends FormRequest
     public function rules(): array
     {
         return [
-            'name' => ['sometimes', 'string', 'max:255'],
+            'name' => ['sometimes', 'string', 'max:100'],
             'type' => ['sometimes', 'in:supplier,partner,agency,venue,other'],
-            'contact_name' => ['nullable', 'string', 'max:255'],
+            'contact_name' => ['nullable', 'string', 'max:100'],
-            'contact_email' => ['nullable', 'email', 'max:255'],
+            'contact_email' => ['nullable', 'email', 'max:100'],
             'contact_phone' => ['nullable', 'string', 'max:30'],
         ];
     }

api/app/Http/Resources/Api/V1/CompanyResource.php

@@ -19,6 +19,7 @@ final class CompanyResource extends JsonResource
             'contact_name' => $this->contact_name,
             'contact_email' => $this->contact_email,
             'contact_phone' => $this->contact_phone,
+            'persons_count' => $this->whenCounted('persons'),
             'created_at' => $this->created_at->toIso8601String(),
         ];
     }

api/app/Models/Company.php

@@ -7,6 +7,7 @@ namespace App\Models;
 use Illuminate\Database\Eloquent\Concerns\HasUlids;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Database\Eloquent\SoftDeletes;
@@ -35,4 +36,10 @@ final class Company extends Model
     {
         return $this->hasMany(Person::class);
     }
+
+    /** @param Builder<self> $query */
+    public function scopeOrdered(Builder $query): Builder
+    {
+        return $query->orderBy('name');
+    }
 }

api/app/Policies/CompanyPolicy.php

@@ -16,6 +16,16 @@ final class CompanyPolicy
             || $organisation->users()->where('user_id', $user->id)->exists();
     }
 
+    public function view(User $user, Company $company, Organisation $organisation): bool
+    {
+        if ($company->organisation_id !== $organisation->id) {
+            return false;
+        }
+
+        return $user->hasRole('super_admin')
+            || $organisation->users()->where('user_id', $user->id)->exists();
+    }
+
     public function create(User $user, Organisation $organisation): bool
     {
         return $this->canManageOrganisation($user, $organisation);

api/tests/Feature/Company/CompanyTest.php

@@ -0,0 +1,252 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tests\Feature\Company;
+
+use App\Models\Company;
+use App\Models\Organisation;
+use App\Models\User;
+use Database\Seeders\RoleSeeder;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Laravel\Sanctum\Sanctum;
+use Tests\TestCase;
+
+class CompanyTest extends TestCase
+{
+    use RefreshDatabase;
+
+    private User $orgAdmin;
+    private User $outsider;
+    private Organisation $organisation;
+    private Organisation $otherOrganisation;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+        $this->seed(RoleSeeder::class);
+
+        $this->organisation = Organisation::factory()->create();
+        $this->otherOrganisation = Organisation::factory()->create();
+
+        $this->orgAdmin = User::factory()->create();
+        $this->organisation->users()->attach($this->orgAdmin, ['role' => 'org_admin']);
+
+        $this->outsider = User::factory()->create();
+        $this->otherOrganisation->users()->attach($this->outsider, ['role' => 'org_admin']);
+    }
+
+    public function test_index_returns_companies_for_organisation(): void
+    {
+        Company::factory()->count(3)->create(['organisation_id' => $this->organisation->id]);
+
+        // Company on other org should not appear
+        Company::factory()->create(['organisation_id' => $this->otherOrganisation->id]);
+
+        Sanctum::actingAs($this->orgAdmin);
+
+        $response = $this->getJson("/api/v1/organisations/{$this->organisation->id}/companies");
+
+        $response->assertOk();
+        $this->assertCount(3, $response->json('data'));
+    }
+
+    public function test_index_returns_companies_ordered_by_name(): void
+    {
+        Company::factory()->create(['organisation_id' => $this->organisation->id, 'name' => 'Zebra BV']);
+        Company::factory()->create(['organisation_id' => $this->organisation->id, 'name' => 'Alpha BV']);
+
+        Sanctum::actingAs($this->orgAdmin);
+
+        $response = $this->getJson("/api/v1/organisations/{$this->organisation->id}/companies");
+
+        $response->assertOk();
+        $names = collect($response->json('data'))->pluck('name')->all();
+        $this->assertSame(['Alpha BV', 'Zebra BV'], $names);
+    }
+
+    public function test_index_includes_persons_count(): void
+    {
+        $company = Company::factory()->create(['organisation_id' => $this->organisation->id]);
+
+        Sanctum::actingAs($this->orgAdmin);
+
+        $response = $this->getJson("/api/v1/organisations/{$this->organisation->id}/companies");
+
+        $response->assertOk();
+        $this->assertArrayHasKey('persons_count', $response->json('data.0'));
+    }
+
+    public function test_index_unauthenticated_returns_401(): void
+    {
+        $response = $this->getJson("/api/v1/organisations/{$this->organisation->id}/companies");
+
+        $response->assertUnauthorized();
+    }
+
+    public function test_index_cross_org_returns_403(): void
+    {
+        Sanctum::actingAs($this->outsider);
+
+        $response = $this->getJson("/api/v1/organisations/{$this->organisation->id}/companies");
+
+        $response->assertForbidden();
+    }
+
+    public function test_store_creates_company(): void
+    {
+        Sanctum::actingAs($this->orgAdmin);
+
+        $response = $this->postJson("/api/v1/organisations/{$this->organisation->id}/companies", [
+            'name' => 'Catering Janssen',
+            'type' => 'supplier',
+            'contact_name' => 'Jan Janssen',
+            'contact_email' => 'jan@janssen.nl',
+            'contact_phone' => '+31612345678',
+        ]);
+
+        $response->assertCreated()
+            ->assertJson(['data' => ['name' => 'Catering Janssen', 'type' => 'supplier']]);
+
+        $this->assertDatabaseHas('companies', [
+            'organisation_id' => $this->organisation->id,
+            'name' => 'Catering Janssen',
+            'type' => 'supplier',
+        ]);
+    }
+
+    public function test_store_unauthenticated_returns_401(): void
+    {
+        $response = $this->postJson("/api/v1/organisations/{$this->organisation->id}/companies", [
+            'name' => 'Test BV',
+            'type' => 'supplier',
+        ]);
+
+        $response->assertUnauthorized();
+    }
+
+    public function test_store_cross_org_returns_403(): void
+    {
+        Sanctum::actingAs($this->outsider);
+
+        $response = $this->postJson("/api/v1/organisations/{$this->organisation->id}/companies", [
+            'name' => 'Test BV',
+            'type' => 'supplier',
+        ]);
+
+        $response->assertForbidden();
+    }
+
+    public function test_store_missing_name_returns_422(): void
+    {
+        Sanctum::actingAs($this->orgAdmin);
+
+        $response = $this->postJson("/api/v1/organisations/{$this->organisation->id}/companies", [
+            'type' => 'supplier',
+        ]);
+
+        $response->assertUnprocessable()
+            ->assertJsonValidationErrors('name');
+    }
+
+    public function test_store_invalid_type_returns_422(): void
+    {
+        Sanctum::actingAs($this->orgAdmin);
+
+        $response = $this->postJson("/api/v1/organisations/{$this->organisation->id}/companies", [
+            'name' => 'Test BV',
+            'type' => 'invalid_type',
+        ]);
+
+        $response->assertUnprocessable()
+            ->assertJsonValidationErrors('type');
+    }
+
+    public function test_show_returns_company(): void
+    {
+        $company = Company::factory()->create([
+            'organisation_id' => $this->organisation->id,
+            'name' => 'Test BV',
+        ]);
+
+        Sanctum::actingAs($this->orgAdmin);
+
+        $response = $this->getJson("/api/v1/organisations/{$this->organisation->id}/companies/{$company->id}");
+
+        $response->assertOk()
+            ->assertJson(['data' => ['name' => 'Test BV']]);
+    }
+
+    public function test_show_cross_org_returns_403(): void
+    {
+        $company = Company::factory()->create([
+            'organisation_id' => $this->organisation->id,
+        ]);
+
+        Sanctum::actingAs($this->outsider);
+
+        $response = $this->getJson("/api/v1/organisations/{$this->organisation->id}/companies/{$company->id}");
+
+        $response->assertForbidden();
+    }
+
+    public function test_update_company(): void
+    {
+        $company = Company::factory()->create([
+            'organisation_id' => $this->organisation->id,
+            'name' => 'Old Name',
+        ]);
+
+        Sanctum::actingAs($this->orgAdmin);
+
+        $response = $this->putJson("/api/v1/organisations/{$this->organisation->id}/companies/{$company->id}", [
+            'name' => 'New Name',
+            'type' => 'partner',
+        ]);
+
+        $response->assertOk()
+            ->assertJson(['data' => ['name' => 'New Name', 'type' => 'partner']]);
+    }
+
+    public function test_update_cross_org_returns_403(): void
+    {
+        $company = Company::factory()->create([
+            'organisation_id' => $this->organisation->id,
+        ]);
+
+        Sanctum::actingAs($this->outsider);
+
+        $response = $this->putJson("/api/v1/organisations/{$this->organisation->id}/companies/{$company->id}", [
+            'name' => 'Hacked',
+        ]);
+
+        $response->assertForbidden();
+    }
+
+    public function test_destroy_soft_deletes_company(): void
+    {
+        $company = Company::factory()->create([
+            'organisation_id' => $this->organisation->id,
+        ]);
+
+        Sanctum::actingAs($this->orgAdmin);
+
+        $response = $this->deleteJson("/api/v1/organisations/{$this->organisation->id}/companies/{$company->id}");
+
+        $response->assertNoContent();
+        $this->assertSoftDeleted('companies', ['id' => $company->id]);
+    }
+
+    public function test_destroy_cross_org_returns_403(): void
+    {
+        $company = Company::factory()->create([
+            'organisation_id' => $this->organisation->id,
+        ]);
+
+        Sanctum::actingAs($this->outsider);
+
+        $response = $this->deleteJson("/api/v1/organisations/{$this->organisation->id}/companies/{$company->id}");
+
+        $response->assertForbidden();
+    }
+}

apps/app/src/components/organisation/CompanyDialog.vue

@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import { VForm } from 'vuetify/components/VForm'
+import { useCreateCompany, useUpdateCompany } from '@/composables/api/useCompanies'
+import { requiredValidator, emailValidator } from '@core/utils/validators'
+import type { Company } from '@/types/organisation'
+
+const props = defineProps<{
+  orgId: string
+  company?: Company | null
+}>()
+
+const modelValue = defineModel<boolean>({ required: true })
+
+const orgIdRef = computed(() => props.orgId)
+
+const isEdit = computed(() => !!props.company)
+
+const form = ref({
+  name: '',
+  type: 'supplier' as Company['type'],
+  contact_name: '',
+  contact_email: '',
+  contact_phone: '',
+})
+
+const errors = ref<Record<string, string>>({})
+const refVForm = ref<VForm>()
+
+const { mutate: createCompany, isPending: isCreating } = useCreateCompany(orgIdRef)
+const { mutate: updateCompany, isPending: isUpdating } = useUpdateCompany(orgIdRef)
+
+const isPending = computed(() => isCreating.value || isUpdating.value)
+
+const typeOptions = [
+  { title: 'Leverancier', value: 'supplier' },
+  { title: 'Partner', value: 'partner' },
+  { title: 'Bureau', value: 'agency' },
+  { title: 'Locatie', value: 'venue' },
+  { title: 'Overig', value: 'other' },
+]
+
+watch(() => props.company, (c) => {
+  if (c) {
+    form.value = {
+      name: c.name,
+      type: c.type,
+      contact_name: c.contact_name ?? '',
+      contact_email: c.contact_email ?? '',
+      contact_phone: c.contact_phone ?? '',
+    }
+  }
+}, { immediate: true })
+
+function resetForm() {
+  form.value = {
+    name: '',
+    type: 'supplier',
+    contact_name: '',
+    contact_email: '',
+    contact_phone: '',
+  }
+  errors.value = {}
+  refVForm.value?.resetValidation()
+}
+
+const emit = defineEmits<{
+  saved: []
+}>()
+
+function onSubmit() {
+  refVForm.value?.validate().then(({ valid }) => {
+    if (!valid) return
+
+    errors.value = {}
+
+    const payload = {
+      name: form.value.name,
+      type: form.value.type,
+      contact_name: form.value.contact_name || null,
+      contact_email: form.value.contact_email || null,
+      contact_phone: form.value.contact_phone || null,
+    }
+
+    const onSuccess = () => {
+      modelValue.value = false
+      emit('saved')
+      resetForm()
+    }
+
+    const 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 }
+      }
+    }
+
+    if (isEdit.value && props.company) {
+      updateCompany({ id: props.company.id, ...payload }, { onSuccess, onError })
+    }
+    else {
+      createCompany(payload, { onSuccess, onError })
+    }
+  })
+}
+</script>
+
+<template>
+  <VDialog
+    v-model="modelValue"
+    max-width="550"
+    @after-leave="resetForm"
+  >
+    <VCard :title="isEdit ? 'Bedrijf bewerken' : 'Bedrijf toevoegen'">
+      <VForm
+        ref="refVForm"
+        @submit.prevent="onSubmit"
+      >
+        <VCardText>
+          <VRow>
+            <VCol cols="12">
+              <AppTextField
+                v-model="form.name"
+                label="Naam"
+                :rules="[requiredValidator]"
+                :error-messages="errors.name"
+                autofocus
+                autocomplete="one-time-code"
+              />
+            </VCol>
+            <VCol cols="12">
+              <AppSelect
+                v-model="form.type"
+                label="Type"
+                :items="typeOptions"
+                :rules="[requiredValidator]"
+                :error-messages="errors.type"
+              />
+            </VCol>
+            <VCol cols="12">
+              <AppTextField
+                v-model="form.contact_name"
+                label="Contactpersoon"
+                :error-messages="errors.contact_name"
+                autocomplete="one-time-code"
+              />
+            </VCol>
+            <VCol cols="12">
+              <AppTextField
+                v-model="form.contact_email"
+                label="E-mail"
+                type="email"
+                :rules="form.contact_email ? [emailValidator] : []"
+                :error-messages="errors.contact_email"
+              />
+            </VCol>
+            <VCol cols="12">
+              <AppTextField
+                v-model="form.contact_phone"
+                label="Telefoon"
+                type="tel"
+                :error-messages="errors.contact_phone"
+              />
+            </VCol>
+          </VRow>
+        </VCardText>
+        <VCardActions>
+          <VSpacer />
+          <VBtn
+            variant="text"
+            @click="modelValue = false"
+          >
+            Annuleren
+          </VBtn>
+          <VBtn
+            type="submit"
+            color="primary"
+            :loading="isPending"
+          >
+            {{ isEdit ? 'Opslaan' : 'Toevoegen' }}
+          </VBtn>
+        </VCardActions>
+      </VForm>
+    </VCard>
+  </VDialog>
+</template>

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,12 +36,30 @@ const successName = ref('')
 const { mutate: createPerson, isPending } = useCreatePerson(eventIdRef)
 
 const crowdTypeItems = computed(() =>
-  crowdTypes.value?.map(ct => ({
+  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,
+  })) ?? [],
+)
+
 const statusOptions: { title: string; value: PersonStatus }[] = [
   { title: 'Pending', value: 'pending' },
   { title: 'Uitgenodigd', value: 'invited' },
@@ -104,11 +124,11 @@ function onSubmit() {
     @after-leave="resetForm"
   >
     <VCard title="Persoon toevoegen">
-      <VCardText>
       <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=""
+                v-model="form.company_id"
                 label="Bedrijf"
-                      :items="[]"
+                :items="companyItems"
-                      disabled
+                clearable
+                :no-data-text="'Nog geen bedrijven'"
               />
-                  </div>
-                </template>
-                Komt beschikbaar zodra bedrijven zijn aangemaakt
-              </VTooltip>
             </VCol>
             <VCol cols="12">
               <AppSelect
@@ -168,7 +182,6 @@ function onSubmit() {
               />
             </VCol>
           </VRow>
-        </VForm>
         </VCardText>
         <VCardActions>
           <VSpacer />
@@ -179,13 +192,14 @@ function onSubmit() {
             Annuleren
           </VBtn>
           <VBtn
+            type="submit"
             color="primary"
             :loading="isPending"
-          @click="onSubmit"
           >
             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,12 +50,30 @@ watch(() => props.person, (p) => {
 }, { immediate: true })
 
 const crowdTypeItems = computed(() =>
-  crowdTypes.value?.map(ct => ({
+  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,
+  })) ?? [],
+)
+
 const statusOptions: { title: string; value: PersonStatus }[] = [
   { title: 'Pending', value: 'pending' },
   { title: 'Uitgenodigd', value: 'invited' },
@@ -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"
       >
+        <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,10 +203,10 @@ function onSubmit() {
                 variant="outlined"
                 rows="3"
                 :error-messages="errors.admin_notes"
+                autocomplete="one-time-code"
               />
             </VCol>
           </VRow>
-        </VForm>
         </VCardText>
         <VCardActions>
           <VSpacer />
@@ -185,13 +217,14 @@ function onSubmit() {
             Annuleren
           </VBtn>
           <VBtn
+            type="submit"
             color="primary"
             :loading="isPending"
-          @click="onSubmit"
           >
             Opslaan
           </VBtn>
         </VCardActions>
+      </VForm>
     </VCard>
   </VDialog>
 

apps/app/src/composables/api/useCompanies.ts

@@ -0,0 +1,74 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import type { Ref } from 'vue'
+import { apiClient } from '@/lib/axios'
+import type { Company, CreateCompanyPayload, UpdateCompanyPayload } from '@/types/organisation'
+
+interface ApiResponse<T> {
+  success: boolean
+  data: T
+  message?: string
+}
+
+export function useCompanies(orgId: Ref<string>) {
+  return useQuery({
+    queryKey: ['companies', orgId],
+    queryFn: async () => {
+      const { data } = await apiClient.get<{ data: Company[] }>(
+        `/organisations/${orgId.value}/companies`,
+      )
+
+      return data.data
+    },
+    enabled: () => !!orgId.value,
+    staleTime: Infinity,
+  })
+}
+
+export function useCreateCompany(orgId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (payload: CreateCompanyPayload) => {
+      const { data } = await apiClient.post<ApiResponse<Company>>(
+        `/organisations/${orgId.value}/companies`,
+        payload,
+      )
+
+      return data.data
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['companies', orgId] })
+    },
+  })
+}
+
+export function useUpdateCompany(orgId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async ({ id, ...payload }: UpdateCompanyPayload & { id: string }) => {
+      const { data } = await apiClient.put<ApiResponse<Company>>(
+        `/organisations/${orgId.value}/companies/${id}`,
+        payload,
+      )
+
+      return data.data
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['companies', orgId] })
+    },
+  })
+}
+
+export function useDeleteCompany(orgId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (id: string) => {
+      await apiClient.delete(`/organisations/${orgId.value}/companies/${id}`)
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['companies', orgId] })
+    },
+  })
+}

apps/app/src/navigation/vertical/index.ts

@@ -24,4 +24,9 @@ export default [
     action: 'read',
     subject: 'members',
   },
+  {
+    title: 'Bedrijven',
+    to: { name: 'organisation-companies' },
+    icon: { icon: 'tabler-building' },
+  },
 ]

apps/app/src/pages/organisation/companies.vue

@@ -0,0 +1,301 @@
+<script setup lang="ts">
+import { useCompanies, useDeleteCompany } from '@/composables/api/useCompanies'
+import { useAuthStore } from '@/stores/useAuthStore'
+import { useOrganisationStore } from '@/stores/useOrganisationStore'
+import CompanyDialog from '@/components/organisation/CompanyDialog.vue'
+import type { Company } from '@/types/organisation'
+
+const authStore = useAuthStore()
+const orgStore = useOrganisationStore()
+
+const orgId = computed(() => orgStore.activeOrganisationId ?? '')
+
+const { data: companies, isLoading, isError, refetch } = useCompanies(orgId)
+const { mutate: deleteCompany, isPending: isDeleting } = useDeleteCompany(orgId)
+
+// Search & filter
+const search = ref('')
+const filterType = ref('')
+
+const typeOptions = [
+  { title: 'Alle types', value: '' },
+  { title: 'Leverancier', value: 'supplier' },
+  { title: 'Partner', value: 'partner' },
+  { title: 'Bureau', value: 'agency' },
+  { title: 'Locatie', value: 'venue' },
+  { title: 'Overig', value: 'other' },
+]
+
+const typeLabel: Record<string, string> = {
+  supplier: 'Leverancier',
+  partner: 'Partner',
+  agency: 'Bureau',
+  venue: 'Locatie',
+  other: 'Overig',
+}
+
+const typeColor: Record<string, string> = {
+  supplier: 'info',
+  partner: 'success',
+  agency: 'purple',
+  venue: 'warning',
+  other: 'default',
+}
+
+const filteredCompanies = computed(() => {
+  let result = companies.value ?? []
+
+  if (filterType.value) {
+    result = result.filter(c => c.type === filterType.value)
+  }
+
+  if (search.value) {
+    const q = search.value.toLowerCase()
+    result = result.filter(c => c.name.toLowerCase().includes(q))
+  }
+
+  return result
+})
+
+const headers = [
+  { title: 'Naam', key: 'name' },
+  { title: 'Type', key: 'type' },
+  { title: 'Contactpersoon', key: 'contact_name' },
+  { title: 'E-mail', key: 'contact_email' },
+  { title: 'Telefoon', key: 'contact_phone' },
+  { title: 'Acties', key: 'actions', sortable: false, align: 'end' as const },
+]
+
+// Dialogs
+const isDialogOpen = ref(false)
+const editingCompany = ref<Company | null>(null)
+
+const isDeleteDialogOpen = ref(false)
+const deletingCompany = ref<Company | null>(null)
+
+const showSuccess = ref(false)
+const successMessage = ref('')
+
+function onAdd() {
+  editingCompany.value = null
+  isDialogOpen.value = true
+}
+
+function onEdit(company: Company) {
+  editingCompany.value = company
+  isDialogOpen.value = true
+}
+
+function onDeleteConfirm(company: Company) {
+  deletingCompany.value = company
+  isDeleteDialogOpen.value = true
+}
+
+function onDeleteExecute() {
+  if (!deletingCompany.value) return
+  const name = deletingCompany.value.name
+
+  deleteCompany(deletingCompany.value.id, {
+    onSuccess: () => {
+      isDeleteDialogOpen.value = false
+      deletingCompany.value = null
+      successMessage.value = `${name} verwijderd`
+      showSuccess.value = true
+    },
+  })
+}
+
+function onSaved() {
+  successMessage.value = editingCompany.value ? 'Bedrijf bijgewerkt' : 'Bedrijf toegevoegd'
+  showSuccess.value = true
+}
+</script>
+
+<template>
+  <div>
+    <!-- Loading -->
+    <VSkeletonLoader
+      v-if="isLoading"
+      type="card"
+    />
+
+    <!-- Error -->
+    <VAlert
+      v-else-if="isError"
+      type="error"
+      class="mb-4"
+    >
+      Kon bedrijven niet laden.
+      <template #append>
+        <VBtn
+          variant="text"
+          @click="refetch()"
+        >
+          Opnieuw proberen
+        </VBtn>
+      </template>
+    </VAlert>
+
+    <template v-else>
+      <!-- Header -->
+      <div class="d-flex justify-space-between align-center mb-6">
+        <div>
+          <h4 class="text-h4">
+            Bedrijven
+          </h4>
+          <p class="text-body-1 text-disabled mb-0">
+            Leveranciers, partners en andere organisaties
+          </p>
+        </div>
+        <VBtn
+          prepend-icon="tabler-plus"
+          @click="onAdd"
+        >
+          Bedrijf toevoegen
+        </VBtn>
+      </div>
+
+      <!-- Filters -->
+      <div class="d-flex gap-x-4 mb-4">
+        <AppTextField
+          v-model="search"
+          prepend-inner-icon="tabler-search"
+          placeholder="Zoek op naam..."
+          clearable
+          style="max-inline-size: 300px;"
+        />
+        <AppSelect
+          v-model="filterType"
+          label="Type"
+          :items="typeOptions"
+          clearable
+          style="min-inline-size: 180px;"
+        />
+      </div>
+
+      <!-- Empty state -->
+      <VCard
+        v-if="!companies?.length"
+        class="text-center pa-8"
+      >
+        <VIcon
+          icon="tabler-building"
+          size="48"
+          class="mb-4 text-disabled"
+        />
+        <p class="text-body-1 text-disabled">
+          Nog geen bedrijven. Voeg je eerste bedrijf toe.
+        </p>
+      </VCard>
+
+      <!-- No results after filter -->
+      <VCard
+        v-else-if="!filteredCompanies.length"
+        class="text-center pa-8"
+      >
+        <p class="text-body-1 text-disabled">
+          Geen bedrijven gevonden voor deze zoekopdracht.
+        </p>
+      </VCard>
+
+      <!-- Data table -->
+      <VCard v-else>
+        <VDataTable
+          :headers="headers"
+          :items="filteredCompanies"
+          item-value="id"
+          :items-per-page="-1"
+          hide-default-footer
+          hover
+          @click:row="(_e: Event, row: { item: Company }) => onEdit(row.item)"
+        >
+          <template #item.type="{ item }">
+            <VChip
+              :color="typeColor[item.type] ?? 'default'"
+              size="small"
+            >
+              {{ typeLabel[item.type] ?? item.type }}
+            </VChip>
+          </template>
+
+          <template #item.contact_name="{ item }">
+            {{ item.contact_name ?? '-' }}
+          </template>
+
+          <template #item.contact_email="{ item }">
+            {{ item.contact_email ?? '-' }}
+          </template>
+
+          <template #item.contact_phone="{ item }">
+            {{ item.contact_phone ?? '-' }}
+          </template>
+
+          <template #item.actions="{ item }">
+            <div class="d-flex justify-end gap-x-1">
+              <VBtn
+                icon="tabler-edit"
+                variant="text"
+                size="small"
+                title="Bewerken"
+                @click.stop="onEdit(item)"
+              />
+              <VBtn
+                icon="tabler-trash"
+                variant="text"
+                size="small"
+                color="error"
+                title="Verwijderen"
+                @click.stop="onDeleteConfirm(item)"
+              />
+            </div>
+          </template>
+        </VDataTable>
+      </VCard>
+    </template>
+
+    <!-- Create/Edit dialog -->
+    <CompanyDialog
+      v-model="isDialogOpen"
+      :org-id="orgId"
+      :company="editingCompany"
+      @saved="onSaved"
+    />
+
+    <!-- Delete confirmation -->
+    <VDialog
+      v-model="isDeleteDialogOpen"
+      max-width="400"
+    >
+      <VCard title="Bedrijf verwijderen">
+        <VCardText>
+          Weet je zeker dat je <strong>{{ deletingCompany?.name }}</strong> wilt verwijderen?
+        </VCardText>
+        <VCardActions>
+          <VSpacer />
+          <VBtn
+            variant="text"
+            @click="isDeleteDialogOpen = false"
+          >
+            Annuleren
+          </VBtn>
+          <VBtn
+            color="error"
+            :loading="isDeleting"
+            @click="onDeleteExecute"
+          >
+            Verwijderen
+          </VBtn>
+        </VCardActions>
+      </VCard>
+    </VDialog>
+
+    <!-- Success snackbar -->
+    <VSnackbar
+      v-model="showSuccess"
+      color="success"
+      :timeout="3000"
+    >
+      {{ successMessage }}
+    </VSnackbar>
+  </div>
+</template>

apps/app/src/types/organisation.ts

@@ -33,7 +33,19 @@ export interface CrowdType {
 export interface Company {
   id: string
   name: string
-  type: string
+  type: 'supplier' | 'partner' | 'agency' | 'venue' | 'other'
   contact_name: string | null
   contact_email: string | null
+  contact_phone: string | null
+  persons_count?: number
 }
+
+export interface CreateCompanyPayload {
+  name: string
+  type: Company['type']
+  contact_name?: string | null
+  contact_email?: string | null
+  contact_phone?: string | null
+}
+
+export interface UpdateCompanyPayload extends Partial<CreateCompanyPayload> {}