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>

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,29 +201,25 @@ function onDeleteExecute() {
   })
 }
 
-function toggleActive(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 {
-      updateTemplate(
-        { id: template.id, is_active: true },
-        {
-          onSuccess: () => {
-            successMessage.value = `${template.label} geactiveerd`
-            showSuccess.value = true
-          },
-        },
-      )
-    }
-  }
+function deactivate(template: RegistrationFieldTemplate) {
+  deleteTemplate(template.id, {
+    onSuccess: () => {
+      successMessage.value = `${template.label} gedeactiveerd`
+      showSuccess.value = true
+    },
+  })
+}
+
+function activate(template: RegistrationFieldTemplate) {
+  updateTemplate(
+    { id: template.id, is_active: true },
+    {
+      onSuccess: () => {
+        successMessage.value = `${template.label} geactiveerd`
+        showSuccess.value = true
+      },
+    },
+  )
 }
 </script>
 
@@ -267,11 +265,11 @@ function toggleActive(template: RegistrationFieldTemplate) {
         </p>
       </VCard>
 
-      <!-- Data table -->
-      <VCard v-else>
+      <!-- Active templates table -->
+      <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'"
-                :title="item.is_active ? 'Deactiveren' : 'Activeren'"
-                @click="toggleActive(item)"
+                color="warning"
+                title="Deactiveren"
+                @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 -->