refactor(app): unify settings tab design for tags, templates & crowd types

Move crowd types management to organisation settings as a new tab and
align all three settings tabs (Tags, Registration Field Templates, Crowd
Types) to the same layout pattern: header with title/subtitle, VDataTable
for active items, and a separate inactive section with VList. Also fix
the API to return inactive records for person tags and registration field
templates so the frontend can display them.

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

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

@@ -20,7 +20,7 @@ final class PersonTagController extends Controller
     {
         Gate::authorize('viewAny', [PersonTag::class, $organisation]);
 
-        $tags = $organisation->personTags()->active()->ordered()->get();
+        $tags = $organisation->personTags()->ordered()->get();
 
         return PersonTagResource::collection($tags);
     }

api/app/Services/RegistrationFieldTemplateService.php

@@ -16,7 +16,6 @@ final class RegistrationFieldTemplateService
     public function listForOrganisation(Organisation $organisation): Collection
     {
         return $organisation->registrationFieldTemplates()
-            ->active()
             ->ordered()
             ->get();
     }

api/tests/Feature/PersonTag/PersonTagTest.php

@@ -51,7 +51,7 @@ class PersonTagTest extends TestCase
         $response = $this->getJson("/api/v1/organisations/{$this->organisation->id}/person-tags");
 
         $response->assertOk();
-        $this->assertCount(3, $response->json('data'));
+        $this->assertCount(4, $response->json('data'));
     }
 
     public function test_store_creates_tag(): void

api/tests/Feature/RegistrationFieldTemplate/RegistrationFieldTemplateTest.php

@@ -39,7 +39,7 @@ class RegistrationFieldTemplateTest extends TestCase
         $this->otherOrganisation->users()->attach($this->outsider, ['role' => 'org_admin']);
     }
 
-    public function test_index_returns_active_templates(): void
+    public function test_index_returns_all_templates(): void
     {
         RegistrationFieldTemplate::factory()->count(3)->create([
             'organisation_id' => $this->organisation->id,
@@ -53,7 +53,7 @@ class RegistrationFieldTemplateTest extends TestCase
         $response = $this->getJson("/api/v1/organisations/{$this->organisation->id}/registration-field-templates");
 
         $response->assertOk();
-        $this->assertCount(3, $response->json('data'));
+        $this->assertCount(4, $response->json('data'));
     }
 
     public function test_store_creates_template(): void

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

@@ -25,12 +25,14 @@ const { mutate: deleteTemplate, isPending: isDeleting } = useDeleteRegistrationF
 
 const fieldTypeOptions = Object.entries(FIELD_TYPE_LABELS).map(([value, title]) => ({ title, value }))
 
+const activeTemplates = computed(() => templates.value?.filter(t => t.is_active) ?? [])
+const inactiveTemplates = computed(() => templates.value?.filter(t => !t.is_active) ?? [])
+
 const headers = [
   { title: 'Label', key: 'label' },
   { title: 'Type', key: 'field_type' },
   { title: 'Sectie', key: 'section' },
   { title: 'Systeem', key: 'is_system', sortable: false },
-  { title: 'Status', key: 'is_active', sortable: false },
   { title: 'Acties', key: 'actions', sortable: false, align: 'end' as const },
 ]
 
@@ -199,18 +201,16 @@ function onDeleteExecute() {
   })
 }
 
-function toggleActive(template: RegistrationFieldTemplate) {
+function deactivate(template: RegistrationFieldTemplate) {
-  if (template.is_system) {
-    // System templates: toggle via DELETE (deactivate) or UPDATE (activate)
-    if (template.is_active) {
   deleteTemplate(template.id, {
     onSuccess: () => {
       successMessage.value = `${template.label} gedeactiveerd`
       showSuccess.value = true
     },
   })
-    }
+}
-    else {
+
+function activate(template: RegistrationFieldTemplate) {
   updateTemplate(
     { id: template.id, is_active: true },
     {
@@ -220,8 +220,6 @@ function toggleActive(template: RegistrationFieldTemplate) {
       },
     },
   )
-    }
-  }
 }
 </script>
 
@@ -267,11 +265,11 @@ function toggleActive(template: RegistrationFieldTemplate) {
         </p>
       </VCard>
 
-      <!-- Data table -->
+      <!-- Active templates table -->
-      <VCard v-else>
+      <VCard v-else-if="activeTemplates.length">
         <VDataTable
           :headers="headers"
-          :items="templates"
+          :items="activeTemplates"
           item-value="id"
           :items-per-page="-1"
           hide-default-footer
@@ -308,16 +306,6 @@ function toggleActive(template: RegistrationFieldTemplate) {
             </VChip>
           </template>
 
-          <template #item.is_active="{ item }">
-            <VChip
-              :color="item.is_active ? 'success' : 'default'"
-              size="small"
-              variant="tonal"
-            >
-              {{ item.is_active ? 'Actief' : 'Inactief' }}
-            </VChip>
-          </template>
-
           <template #item.actions="{ item }">
             <div class="d-flex justify-end gap-x-1">
               <VBtn
@@ -329,12 +317,12 @@ function toggleActive(template: RegistrationFieldTemplate) {
               />
               <VBtn
                 v-if="item.is_system"
-                :icon="item.is_active ? 'tabler-eye-off' : 'tabler-eye'"
+                icon="tabler-eye-off"
                 variant="text"
                 size="small"
-                :color="item.is_active ? 'warning' : 'success'"
+                color="warning"
-                :title="item.is_active ? 'Deactiveren' : 'Activeren'"
+                title="Deactiveren"
-                @click="toggleActive(item)"
+                @click="deactivate(item)"
               />
               <VBtn
                 v-else
@@ -349,6 +337,39 @@ function toggleActive(template: RegistrationFieldTemplate) {
           </template>
         </VDataTable>
       </VCard>
+
+      <!-- Inactive templates -->
+      <template v-if="inactiveTemplates.length">
+        <p class="text-body-2 text-disabled mt-6 mb-2">
+          Inactief
+        </p>
+        <VCard class="opacity-60">
+          <VList lines="one">
+            <VListItem
+              v-for="template in inactiveTemplates"
+              :key="template.id"
+            >
+              <VListItemTitle class="text-disabled">
+                {{ template.label }}
+              </VListItemTitle>
+              <VListItemSubtitle>
+                {{ FIELD_TYPE_LABELS[template.field_type] ?? template.field_type }}
+              </VListItemSubtitle>
+
+              <template #append>
+                <VBtn
+                  variant="tonal"
+                  size="small"
+                  color="success"
+                  @click="activate(template)"
+                >
+                  Activeren
+                </VBtn>
+              </template>
+            </VListItem>
+          </VList>
+        </VCard>
+      </template>
     </template>
 
     <!-- Create / Edit dialog -->

apps/app/src/components/organisations/CrowdTypesManager.vue

@@ -57,6 +57,14 @@ const inactiveCrowdTypes = computed(() =>
   crowdTypes.value?.filter(ct => !ct.is_active) ?? [],
 )
 
+const headers = [
+  { title: 'Naam', key: 'name' },
+  { title: 'Systeemtype', key: 'system_type' },
+  { title: 'Icoon', key: 'icon', sortable: false },
+  { title: 'Kleur', key: 'color', sortable: false },
+  { title: 'Acties', key: 'actions', sortable: false, align: 'end' as const },
+]
+
 const dialogTitle = computed(() =>
   editingCrowdType.value ? 'Crowd type bewerken' : 'Crowd type aanmaken',
 )
@@ -155,130 +163,139 @@ function activate(ct: CrowdType) {
 </script>
 
 <template>
-  <VCard>
+  <div>
-    <VCardItem>
+    <!-- Loading -->
-      <VCardTitle>Crowd types</VCardTitle>
+    <VSkeletonLoader
-      <VCardSubtitle>Definieer de deelnemertypes voor je organisatie</VCardSubtitle>
+      v-if="isLoading"
-      <template #append>
+      type="card"
+    />
+
+    <template v-else>
+      <!-- Header -->
+      <div class="d-flex justify-space-between align-center mb-6">
+        <div>
+          <h5 class="text-h5">
+            Crowd types
+          </h5>
+          <p class="text-body-2 text-disabled mb-0">
+            Definieer de deelnemertypes voor je organisatie
+          </p>
+        </div>
         <VBtn
           prepend-icon="tabler-plus"
           @click="openCreateDialog"
         >
           Crowd type toevoegen
         </VBtn>
-      </template>
+      </div>
-    </VCardItem>
 
-    <VCardText>
-      <!-- Loading -->
-      <VSkeletonLoader
-        v-if="isLoading"
-        type="list-item@3"
-      />
-
-      <template v-else>
       <!-- Empty state -->
-        <VAlert
+      <VCard
         v-if="!crowdTypes?.length"
-          type="info"
+        class="text-center pa-8"
-          variant="tonal"
-        >
-          Nog geen crowd types aangemaakt. Maak er een aan om personen te categoriseren.
-        </VAlert>
-
-        <!-- Active crowd types -->
-        <VList
-          v-if="activeCrowdTypes.length"
-          lines="one"
-        >
-          <VListItem
-            v-for="ct in activeCrowdTypes"
-            :key="ct.id"
-          >
-            <template #prepend>
-              <VAvatar
-                :color="ct.color"
-                size="32"
-                variant="flat"
       >
         <VIcon
-                  v-if="ct.icon"
+          icon="tabler-users-group"
-                  :icon="ct.icon"
+          size="48"
-                  size="18"
+          class="mb-4 text-disabled"
-                  color="white"
         />
-              </VAvatar>
+        <p class="text-body-1 text-disabled">
+          Nog geen crowd types aangemaakt. Maak er een aan om personen te categoriseren.
+        </p>
+      </VCard>
+
+      <!-- Active crowd types table -->
+      <VCard v-else-if="activeCrowdTypes.length">
+        <VDataTable
+          :headers="headers"
+          :items="activeCrowdTypes"
+          item-value="id"
+          :items-per-page="-1"
+          hide-default-footer
+          hover
+        >
+          <template #item.name="{ item }">
+            <span class="font-weight-medium">{{ item.name }}</span>
           </template>
 
-            <VListItemTitle>{{ ct.name }}</VListItemTitle>
+          <template #item.system_type="{ item }">
-            <VListItemSubtitle>
             <VChip
-                size="x-small"
+              size="small"
               variant="tonal"
-                class="mt-1"
             >
-                {{ systemTypeLabels[ct.system_type] ?? ct.system_type }}
+              {{ systemTypeLabels[item.system_type] ?? item.system_type }}
             </VChip>
-            </VListItemSubtitle>
+          </template>
 
-            <template #append>
+          <template #item.icon="{ item }">
+            <VIcon
+              v-if="item.icon"
+              :icon="item.icon"
+              size="20"
+            />
+            <span
+              v-else
+              class="text-disabled"
+            >-</span>
+          </template>
+
+          <template #item.color="{ item }">
+            <div class="d-flex align-center gap-x-2">
+              <div
+                class="rounded-circle"
+                :style="{ backgroundColor: item.color, width: '20px', height: '20px' }"
+              />
+              <span class="text-body-2 text-disabled">{{ item.color }}</span>
+            </div>
+          </template>
+
+          <template #item.actions="{ item }">
+            <div class="d-flex justify-end gap-x-1">
               <VBtn
                 icon="tabler-edit"
                 variant="text"
                 size="small"
-                @click="openEditDialog(ct)"
+                title="Bewerken"
+                @click="openEditDialog(item)"
               />
               <VBtn
                 icon="tabler-eye-off"
                 variant="text"
                 size="small"
                 color="warning"
-                @click="deactivate(ct)"
+                title="Deactiveren"
+                @click="deactivate(item)"
               />
+            </div>
           </template>
-          </VListItem>
+        </VDataTable>
-        </VList>
+      </VCard>
 
       <!-- Inactive crowd types -->
       <template v-if="inactiveCrowdTypes.length">
-          <VDivider class="my-4" />
+        <p class="text-body-2 text-disabled mt-6 mb-2">
-          <p class="text-body-2 text-disabled mb-2">
           Inactief
         </p>
-          <VList
+        <VCard class="opacity-60">
-            lines="one"
+          <VList lines="one">
-            class="opacity-60"
-          >
             <VListItem
               v-for="ct in inactiveCrowdTypes"
               :key="ct.id"
             >
               <template #prepend>
-                <VAvatar
-                  :color="ct.color"
-                  size="32"
-                  variant="flat"
-                >
                 <VIcon
                   v-if="ct.icon"
                   :icon="ct.icon"
-                    size="18"
+                  size="20"
-                    color="white"
+                  class="me-2"
                 />
-                </VAvatar>
               </template>
 
               <VListItemTitle class="text-disabled">
                 {{ ct.name }}
               </VListItemTitle>
               <VListItemSubtitle>
-                <VChip
-                  size="x-small"
-                  variant="tonal"
-                  class="mt-1"
-                >
                 {{ systemTypeLabels[ct.system_type] ?? ct.system_type }}
-                </VChip>
               </VListItemSubtitle>
 
               <template #append>
@@ -293,10 +310,9 @@ function activate(ct: CrowdType) {
               </template>
             </VListItem>
           </VList>
-        </template>
-      </template>
-    </VCardText>
         </VCard>
+      </template>
+    </template>
 
     <!-- Create / Edit dialog -->
     <VDialog
@@ -390,4 +406,5 @@ function activate(ct: CrowdType) {
     >
       {{ successMessage }}
     </VSnackbar>
+  </div>
 </template>

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

@@ -2,7 +2,6 @@
 import { useMyOrganisation } from '@/composables/api/useOrganisations'
 import { useAuthStore } from '@/stores/useAuthStore'
 import EditOrganisationDialog from '@/components/organisations/EditOrganisationDialog.vue'
-import CrowdTypesManager from '@/components/organisations/CrowdTypesManager.vue'
 import type { Organisation } from '@/types/organisation'
 
 const authStore = useAuthStore()
@@ -124,13 +123,6 @@ function formatDate(iso: string) {
         </VCardText>
       </VCard>
 
-      <!-- Crowd Types -->
-      <CrowdTypesManager
-        v-if="isOrgAdmin"
-        :org-id="organisation.id"
-        class="mt-6"
-      />
-
       <EditOrganisationDialog
         v-model="isEditDialogOpen"
         :organisation="organisation"

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

@@ -2,6 +2,7 @@
 import { useOrganisationStore } from '@/stores/useOrganisationStore'
 import PersonTagsTab from '@/components/organisation/PersonTagsTab.vue'
 import RegistrationFieldTemplatesTab from '@/components/organisation/RegistrationFieldTemplatesTab.vue'
+import CrowdTypesManager from '@/components/organisations/CrowdTypesManager.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -12,6 +13,7 @@ const orgId = computed(() => orgStore.activeOrganisationId ?? '')
 const tabs = [
   { value: 'tags', label: 'Tags & Vaardigheden', icon: 'tabler-tag' },
   { value: 'templates', label: 'Registratieveld-templates', icon: 'tabler-forms' },
+  { value: 'crowd-types', label: 'Crowd types', icon: 'tabler-users-group' },
 ]
 
 const activeTab = computed({
@@ -62,6 +64,9 @@ const activeTab = computed({
       <VWindowItem value="templates">
         <RegistrationFieldTemplatesTab :org-id="orgId" />
       </VWindowItem>
+      <VWindowItem value="crowd-types">
+        <CrowdTypesManager :org-id="orgId" />
+      </VWindowItem>
     </VWindow>
   </div>
 </template>