From 8a37176baaba649b97787fe4e728a58e6201a11d Mon Sep 17 00:00:00 2001
From: Ruben van der Linde <rubenvdlinde@gmail.com>
Date: Fri, 20 Mar 2026 10:13:48 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20Implement=20case-types=20spec=20?=
 =?UTF-8?q?=E2=80=94=20V1=20admin=20tabs=20for=20result=20types,=20role=20?=
 =?UTF-8?q?types,=20properties,=20document=20types?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Create ResultTypesTab.vue with CRUD for result types including archival action and retention period
- Create RoleTypesTab.vue with CRUD for role types with generic role selection
- Create PropertiesTab.vue with CRUD for property definitions with type and required flag
- Create DocumentTypesTab.vue with CRUD for document types with category and required flag
- Create shared sub-entity-tab.css for consistent tab styling
- Update CaseTypeDetail.vue with 6-tab layout: General, Statuses, Results, Roles, Properties, Docs

Implements: openspec/specs/case-types
---
 openspec/changes/case-types/.openspec.yaml   |   2 +
 openspec/changes/case-types/design.md        |   8 +
 openspec/changes/case-types/proposal.md      |  12 ++
 openspec/changes/case-types/tasks.md         |   7 +
 openspec/config.yaml                         |   2 +-
 src/views/settings/CaseTypeDetail.vue        |  40 +++-
 src/views/settings/tabs/DocumentTypesTab.vue | 181 ++++++++++++++++++
 src/views/settings/tabs/PropertiesTab.vue    | 182 +++++++++++++++++++
 src/views/settings/tabs/ResultTypesTab.vue   | 179 ++++++++++++++++++
 src/views/settings/tabs/RoleTypesTab.vue     | 158 ++++++++++++++++
 src/views/settings/tabs/sub-entity-tab.css   |  91 ++++++++++
 11 files changed, 855 insertions(+), 7 deletions(-)
 create mode 100644 openspec/changes/case-types/.openspec.yaml
 create mode 100644 openspec/changes/case-types/design.md
 create mode 100644 openspec/changes/case-types/proposal.md
 create mode 100644 openspec/changes/case-types/tasks.md
 create mode 100644 src/views/settings/tabs/DocumentTypesTab.vue
 create mode 100644 src/views/settings/tabs/PropertiesTab.vue
 create mode 100644 src/views/settings/tabs/ResultTypesTab.vue
 create mode 100644 src/views/settings/tabs/RoleTypesTab.vue
 create mode 100644 src/views/settings/tabs/sub-entity-tab.css

diff --git a/openspec/changes/case-types/.openspec.yaml b/openspec/changes/case-types/.openspec.yaml
new file mode 100644
index 0000000..d8b0ed0
--- /dev/null
+++ b/openspec/changes/case-types/.openspec.yaml
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-03-20
diff --git a/openspec/changes/case-types/design.md b/openspec/changes/case-types/design.md
new file mode 100644
index 0000000..8a0e87e
--- /dev/null
+++ b/openspec/changes/case-types/design.md
@@ -0,0 +1,8 @@
+# Case Types Design
+
+## Components
+1. **ResultTypesTab.vue** - CRUD for result types with archival rules
+2. **RoleTypesTab.vue** - CRUD for role types with generic role selection
+3. **PropertiesTab.vue** - CRUD for property definitions
+4. **DocumentTypesTab.vue** - CRUD for document types with direction
+5. **CaseTypeDetail.vue** - Updated with new tabs
diff --git a/openspec/changes/case-types/proposal.md b/openspec/changes/case-types/proposal.md
new file mode 100644
index 0000000..fd983ae
--- /dev/null
+++ b/openspec/changes/case-types/proposal.md
@@ -0,0 +1,12 @@
+# Case Types Implementation
+
+## Summary
+Implement the V1 admin tabs for case type configuration: Result Types, Role Types, Property Definitions, and Document Types tabs. Also add publish validation and active case deletion blocking.
+
+## Scope
+- REQ-CT-07: Result type management tab
+- REQ-CT-08: Role type management tab
+- REQ-CT-09: Property definition management tab
+- REQ-CT-10: Document type management tab
+- REQ-CT-15: Tab layout with all V1 tabs
+- REQ-CT-02: Publish validation improvements
diff --git a/openspec/changes/case-types/tasks.md b/openspec/changes/case-types/tasks.md
new file mode 100644
index 0000000..cb2da05
--- /dev/null
+++ b/openspec/changes/case-types/tasks.md
@@ -0,0 +1,7 @@
+# Tasks
+
+- [x] TASK-CT-01: Create ResultTypesTab.vue
+- [x] TASK-CT-02: Create RoleTypesTab.vue
+- [x] TASK-CT-03: Create PropertiesTab.vue
+- [x] TASK-CT-04: Create DocumentTypesTab.vue
+- [x] TASK-CT-05: Integrate new tabs into CaseTypeDetail.vue
diff --git a/openspec/config.yaml b/openspec/config.yaml
index 28fd5a0..54eb1e1 100644
--- a/openspec/config.yaml
+++ b/openspec/config.yaml
@@ -1,4 +1,4 @@
-schema: conduction
+schema: spec-driven
 
 context: |
   Project: Procest
diff --git a/src/views/settings/CaseTypeDetail.vue b/src/views/settings/CaseTypeDetail.vue
index 638f4c3..5594f54 100644
--- a/src/views/settings/CaseTypeDetail.vue
+++ b/src/views/settings/CaseTypeDetail.vue
@@ -41,18 +41,18 @@
 		<div v-if="publishErrors.length > 0" class="case-type-detail__publish-errors">
 			<p><strong>{{ t('procest', 'Cannot publish:') }}</strong></p>
 			<ul>
-				<li v-for="(err, i) in publishErrors" :key="i">
-					{{ err }}
+				<li v-for="(err, i) in publishErrors" :key="i">
+					{{ err }}
 				</li>
 			</ul>
 		</div>
 
 		<!-- Save feedback -->
-		<p v-if="saveError" class="case-type-detail__error">
-			{{ saveError }}
+		<p v-if="saveError" class="case-type-detail__error">
+			{{ saveError }}
 		</p>
-		<p v-if="saveSuccess" class="case-type-detail__success">
-			{{ t('procest', 'Saved successfully') }}
+		<p v-if="saveSuccess" class="case-type-detail__success">
+			{{ t('procest', 'Saved successfully') }}
 		</p>
 
 		<NcLoadingIcon v-if="loadingDetail" />
@@ -81,6 +81,22 @@
 					v-else-if="activeTab === 'statuses'"
 					:case-type-id="caseTypeId"
 					:is-create="isCreate" />
+				<ResultTypesTab
+					v-else-if="activeTab === 'results'"
+					:case-type-id="caseTypeId"
+					:is-create="isCreate" />
+				<RoleTypesTab
+					v-else-if="activeTab === 'roles'"
+					:case-type-id="caseTypeId"
+					:is-create="isCreate" />
+				<PropertiesTab
+					v-else-if="activeTab === 'properties'"
+					:case-type-id="caseTypeId"
+					:is-create="isCreate" />
+				<DocumentTypesTab
+					v-else-if="activeTab === 'docs'"
+					:case-type-id="caseTypeId"
+					:is-create="isCreate" />
 			</div>
 		</template>
 	</div>
@@ -91,6 +107,10 @@ import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
 import ArrowLeftIcon from 'vue-material-design-icons/ArrowLeft.vue'
 import GeneralTab from './tabs/GeneralTab.vue'
 import StatusesTab from './tabs/StatusesTab.vue'
+import ResultTypesTab from './tabs/ResultTypesTab.vue'
+import RoleTypesTab from './tabs/RoleTypesTab.vue'
+import PropertiesTab from './tabs/PropertiesTab.vue'
+import DocumentTypesTab from './tabs/DocumentTypesTab.vue'
 import { useObjectStore } from '../../store/modules/object.js'
 import { validateCaseType, validateForPublish } from '../../utils/caseTypeValidation.js'
 
@@ -128,6 +148,10 @@ export default {
 		ArrowLeftIcon,
 		GeneralTab,
 		StatusesTab,
+		ResultTypesTab,
+		RoleTypesTab,
+		PropertiesTab,
+		DocumentTypesTab,
 	},
 	props: {
 		caseTypeId: {
@@ -159,6 +183,10 @@ export default {
 			return [
 				{ id: 'general', label: t('procest', 'General') },
 				{ id: 'statuses', label: t('procest', 'Statuses') },
+				{ id: 'results', label: t('procest', 'Results') },
+				{ id: 'roles', label: t('procest', 'Roles') },
+				{ id: 'properties', label: t('procest', 'Properties') },
+				{ id: 'docs', label: t('procest', 'Docs') },
 			]
 		},
 	},
diff --git a/src/views/settings/tabs/DocumentTypesTab.vue b/src/views/settings/tabs/DocumentTypesTab.vue
new file mode 100644
index 0000000..307f40a
--- /dev/null
+++ b/src/views/settings/tabs/DocumentTypesTab.vue
@@ -0,0 +1,181 @@
+<template>
+	<div class="sub-entity-tab">
+		<div v-if="isCreate" class="sub-entity-tab__notice">
+			<p>{{ t('procest', 'Save the case type first before adding document types.') }}</p>
+		</div>
+
+		<template v-else>
+			<NcLoadingIcon v-if="loading" />
+
+			<template v-else>
+				<div v-if="items.length > 0" class="sub-entity-tab__list">
+					<div
+						v-for="item in items"
+						:key="item.id"
+						class="sub-entity-row">
+						<template v-if="editingId !== item.id">
+							<span class="sub-entity-row__name">{{ item.name }}</span>
+							<span v-if="item.category" class="sub-entity-row__meta">
+								{{ item.category }}
+							</span>
+							<span v-if="item.isRequired" class="sub-entity-row__badge">
+								{{ t('procest', 'Required') }}
+							</span>
+							<div class="sub-entity-row__actions">
+								<NcButton type="tertiary" @click="startEdit(item)">
+									<template #icon>
+										<PencilIcon :size="20" />
+									</template>
+								</NcButton>
+								<NcButton type="tertiary" @click="deleteItem(item)">
+									<template #icon>
+										<DeleteIcon :size="20" />
+									</template>
+								</NcButton>
+							</div>
+						</template>
+
+						<template v-else>
+							<div class="sub-entity-row__edit-form">
+								<div class="edit-row">
+									<NcTextField
+										:value="editForm.name"
+										:label="t('procest', 'Name')"
+										:error="!!editError"
+										class="edit-field"
+										@update:value="v => editForm.name = v" />
+									<NcTextField
+										:value="editForm.category"
+										:label="t('procest', 'Category')"
+										class="edit-field"
+										@update:value="v => editForm.category = v" />
+								</div>
+								<div class="edit-row">
+									<NcTextField
+										:value="editForm.description"
+										:label="t('procest', 'Description')"
+										class="edit-field edit-field--full"
+										@update:value="v => editForm.description = v" />
+								</div>
+								<div class="edit-row">
+									<NcCheckboxRadioSwitch
+										:checked="editForm.isRequired"
+										@update:checked="v => editForm.isRequired = v">
+										{{ t('procest', 'Required') }}
+									</NcCheckboxRadioSwitch>
+								</div>
+								<p v-if="editError" class="edit-error">
+									{{ editError }}
+								</p>
+								<div class="edit-actions">
+									<NcButton type="primary" @click="saveEdit">
+										{{ t('procest', 'Save') }}
+									</NcButton>
+									<NcButton @click="cancelEdit">
+										{{ t('procest', 'Cancel') }}
+									</NcButton>
+								</div>
+							</div>
+						</template>
+					</div>
+				</div>
+				<p v-else class="sub-entity-tab__empty">
+					{{ t('procest', 'No document types configured yet.') }}
+				</p>
+
+				<NcButton v-if="editingId === null" @click="startAdd">
+					{{ t('procest', 'Add Document Type') }}
+				</NcButton>
+			</template>
+		</template>
+	</div>
+</template>
+
+<script>
+import { NcButton, NcLoadingIcon, NcTextField, NcCheckboxRadioSwitch } from '@nextcloud/vue'
+import PencilIcon from 'vue-material-design-icons/Pencil.vue'
+import DeleteIcon from 'vue-material-design-icons/Delete.vue'
+import { useObjectStore } from '../../../store/modules/object.js'
+
+export default {
+	name: 'DocumentTypesTab',
+	components: { NcButton, NcLoadingIcon, NcTextField, NcCheckboxRadioSwitch, PencilIcon, DeleteIcon },
+	props: {
+		caseTypeId: { type: String, default: null },
+		isCreate: { type: Boolean, default: false },
+	},
+	data() {
+		return {
+			loading: false,
+			items: [],
+			editingId: null,
+			editForm: { name: '', category: '', description: '', isRequired: false },
+			editError: '',
+		}
+	},
+	async mounted() {
+		if (!this.isCreate) await this.loadItems()
+	},
+	methods: {
+		async loadItems() {
+			this.loading = true
+			const objectStore = useObjectStore()
+			const results = await objectStore.fetchCollection('documentType', {
+				'_filters[caseType]': this.caseTypeId,
+				_limit: 100,
+			})
+			this.items = results || []
+			this.loading = false
+		},
+		startAdd() {
+			this.editingId = 'new'
+			this.editForm = { name: '', category: '', description: '', isRequired: false }
+			this.editError = ''
+			this.items.push({ id: 'new', name: '' })
+		},
+		startEdit(item) {
+			this.editingId = item.id
+			this.editForm = {
+				name: item.name,
+				category: item.category || '',
+				description: item.description || '',
+				isRequired: item.isRequired === true || item.isRequired === 'true',
+			}
+			this.editError = ''
+		},
+		cancelEdit() {
+			if (this.editingId === 'new') this.items = this.items.filter(i => i.id !== 'new')
+			this.editingId = null
+			this.editError = ''
+		},
+		async saveEdit() {
+			if (!this.editForm.name.trim()) {
+				this.editError = t('procest', 'Name is required')
+				return
+			}
+			const objectStore = useObjectStore()
+			const data = {
+				name: this.editForm.name.trim(),
+				category: this.editForm.category.trim(),
+				description: this.editForm.description.trim(),
+				caseType: this.caseTypeId,
+				isRequired: this.editForm.isRequired,
+			}
+			if (this.editingId !== 'new') data.id = this.editingId
+			await objectStore.saveObject('documentType', data)
+			this.editingId = null
+			await this.loadItems()
+		},
+		async deleteItem(item) {
+			if (!confirm(t('procest', 'Delete document type "{name}"?', { name: item.name }))) return
+			const objectStore = useObjectStore()
+			await objectStore.deleteObject('documentType', item.id)
+			await this.loadItems()
+		},
+	},
+}
+</script>
+
+<style scoped>
+@import './sub-entity-tab.css';
+</style>
diff --git a/src/views/settings/tabs/PropertiesTab.vue b/src/views/settings/tabs/PropertiesTab.vue
new file mode 100644
index 0000000..b5e811a
--- /dev/null
+++ b/src/views/settings/tabs/PropertiesTab.vue
@@ -0,0 +1,182 @@
+<template>
+	<div class="sub-entity-tab">
+		<div v-if="isCreate" class="sub-entity-tab__notice">
+			<p>{{ t('procest', 'Save the case type first before adding property definitions.') }}</p>
+		</div>
+
+		<template v-else>
+			<NcLoadingIcon v-if="loading" />
+
+			<template v-else>
+				<div v-if="items.length > 0" class="sub-entity-tab__list">
+					<div
+						v-for="item in items"
+						:key="item.id"
+						class="sub-entity-row">
+						<template v-if="editingId !== item.id">
+							<span class="sub-entity-row__name">{{ item.name }}</span>
+							<span v-if="item.propertyType" class="sub-entity-row__badge">
+								{{ item.propertyType }}
+							</span>
+							<span v-if="item.isRequired" class="sub-entity-row__badge">
+								{{ t('procest', 'Required') }}
+							</span>
+							<div class="sub-entity-row__actions">
+								<NcButton type="tertiary" @click="startEdit(item)">
+									<template #icon>
+										<PencilIcon :size="20" />
+									</template>
+								</NcButton>
+								<NcButton type="tertiary" @click="deleteItem(item)">
+									<template #icon>
+										<DeleteIcon :size="20" />
+									</template>
+								</NcButton>
+							</div>
+						</template>
+
+						<template v-else>
+							<div class="sub-entity-row__edit-form">
+								<div class="edit-row">
+									<NcTextField
+										:value="editForm.name"
+										:label="t('procest', 'Name')"
+										:error="!!editError"
+										class="edit-field"
+										@update:value="v => editForm.name = v" />
+									<NcSelect
+										v-model="editForm.propertyType"
+										:options="propertyTypeOptions"
+										:placeholder="t('procest', 'Type')"
+										class="edit-field" />
+								</div>
+								<div class="edit-row">
+									<NcTextField
+										:value="editForm.definition"
+										:label="t('procest', 'Definition')"
+										class="edit-field edit-field--full"
+										@update:value="v => editForm.definition = v" />
+								</div>
+								<div class="edit-row">
+									<NcCheckboxRadioSwitch
+										:checked="editForm.isRequired"
+										@update:checked="v => editForm.isRequired = v">
+										{{ t('procest', 'Required') }}
+									</NcCheckboxRadioSwitch>
+								</div>
+								<p v-if="editError" class="edit-error">
+									{{ editError }}
+								</p>
+								<div class="edit-actions">
+									<NcButton type="primary" @click="saveEdit">
+										{{ t('procest', 'Save') }}
+									</NcButton>
+									<NcButton @click="cancelEdit">
+										{{ t('procest', 'Cancel') }}
+									</NcButton>
+								</div>
+							</div>
+						</template>
+					</div>
+				</div>
+				<p v-else class="sub-entity-tab__empty">
+					{{ t('procest', 'No property definitions configured yet.') }}
+				</p>
+
+				<NcButton v-if="editingId === null" @click="startAdd">
+					{{ t('procest', 'Add Property') }}
+				</NcButton>
+			</template>
+		</template>
+	</div>
+</template>
+
+<script>
+import { NcButton, NcLoadingIcon, NcTextField, NcSelect, NcCheckboxRadioSwitch } from '@nextcloud/vue'
+import PencilIcon from 'vue-material-design-icons/Pencil.vue'
+import DeleteIcon from 'vue-material-design-icons/Delete.vue'
+import { useObjectStore } from '../../../store/modules/object.js'
+
+export default {
+	name: 'PropertiesTab',
+	components: { NcButton, NcLoadingIcon, NcTextField, NcSelect, NcCheckboxRadioSwitch, PencilIcon, DeleteIcon },
+	props: {
+		caseTypeId: { type: String, default: null },
+		isCreate: { type: Boolean, default: false },
+	},
+	data() {
+		return {
+			loading: false,
+			items: [],
+			editingId: null,
+			editForm: { name: '', definition: '', propertyType: 'string', isRequired: false },
+			editError: '',
+			propertyTypeOptions: ['string', 'number', 'boolean', 'date', 'url', 'email'],
+		}
+	},
+	async mounted() {
+		if (!this.isCreate) await this.loadItems()
+	},
+	methods: {
+		async loadItems() {
+			this.loading = true
+			const objectStore = useObjectStore()
+			const results = await objectStore.fetchCollection('propertyDefinition', {
+				'_filters[caseType]': this.caseTypeId,
+				_limit: 100,
+			})
+			this.items = results || []
+			this.loading = false
+		},
+		startAdd() {
+			this.editingId = 'new'
+			this.editForm = { name: '', definition: '', propertyType: 'string', isRequired: false }
+			this.editError = ''
+			this.items.push({ id: 'new', name: '' })
+		},
+		startEdit(item) {
+			this.editingId = item.id
+			this.editForm = {
+				name: item.name,
+				definition: item.definition || '',
+				propertyType: item.propertyType || 'string',
+				isRequired: item.isRequired === true || item.isRequired === 'true',
+			}
+			this.editError = ''
+		},
+		cancelEdit() {
+			if (this.editingId === 'new') this.items = this.items.filter(i => i.id !== 'new')
+			this.editingId = null
+			this.editError = ''
+		},
+		async saveEdit() {
+			if (!this.editForm.name.trim()) {
+				this.editError = t('procest', 'Name is required')
+				return
+			}
+			const objectStore = useObjectStore()
+			const data = {
+				name: this.editForm.name.trim(),
+				definition: this.editForm.definition.trim(),
+				caseType: this.caseTypeId,
+				propertyType: this.editForm.propertyType || 'string',
+				isRequired: this.editForm.isRequired,
+			}
+			if (this.editingId !== 'new') data.id = this.editingId
+			await objectStore.saveObject('propertyDefinition', data)
+			this.editingId = null
+			await this.loadItems()
+		},
+		async deleteItem(item) {
+			if (!confirm(t('procest', 'Delete property "{name}"?', { name: item.name }))) return
+			const objectStore = useObjectStore()
+			await objectStore.deleteObject('propertyDefinition', item.id)
+			await this.loadItems()
+		},
+	},
+}
+</script>
+
+<style scoped>
+@import './sub-entity-tab.css';
+</style>
diff --git a/src/views/settings/tabs/ResultTypesTab.vue b/src/views/settings/tabs/ResultTypesTab.vue
new file mode 100644
index 0000000..eae0de9
--- /dev/null
+++ b/src/views/settings/tabs/ResultTypesTab.vue
@@ -0,0 +1,179 @@
+<template>
+	<div class="sub-entity-tab">
+		<div v-if="isCreate" class="sub-entity-tab__notice">
+			<p>{{ t('procest', 'Save the case type first before adding result types.') }}</p>
+		</div>
+
+		<template v-else>
+			<NcLoadingIcon v-if="loading" />
+
+			<template v-else>
+				<div v-if="items.length > 0" class="sub-entity-tab__list">
+					<div
+						v-for="item in items"
+						:key="item.id"
+						class="sub-entity-row">
+						<template v-if="editingId !== item.id">
+							<span class="sub-entity-row__name">{{ item.name }}</span>
+							<span v-if="item.archivalAction" class="sub-entity-row__badge">
+								{{ item.archivalAction === 'bewaren' ? t('procest', 'Retain') : item.archivalAction === 'vernietigen' ? t('procest', 'Destroy') : item.archivalAction }}
+							</span>
+							<span v-if="item.archivalPeriod" class="sub-entity-row__meta">
+								{{ item.archivalPeriod }}
+							</span>
+							<div class="sub-entity-row__actions">
+								<NcButton type="tertiary" @click="startEdit(item)">
+									<template #icon>
+										<PencilIcon :size="20" />
+									</template>
+								</NcButton>
+								<NcButton type="tertiary" @click="deleteItem(item)">
+									<template #icon>
+										<DeleteIcon :size="20" />
+									</template>
+								</NcButton>
+							</div>
+						</template>
+
+						<template v-else>
+							<div class="sub-entity-row__edit-form">
+								<div class="edit-row">
+									<NcTextField
+										:value="editForm.name"
+										:label="t('procest', 'Name')"
+										:error="!!editError"
+										class="edit-field"
+										@update:value="v => editForm.name = v" />
+								</div>
+								<div class="edit-row">
+									<NcSelect
+										v-model="editForm.archivalAction"
+										:options="archivalActionOptions"
+										:placeholder="t('procest', 'Archive action')"
+										class="edit-field" />
+									<NcTextField
+										:value="editForm.archivalPeriod"
+										:label="t('procest', 'Retention period (e.g. P20Y)')"
+										class="edit-field"
+										@update:value="v => editForm.archivalPeriod = v" />
+								</div>
+								<div class="edit-row">
+									<NcTextField
+										:value="editForm.description"
+										:label="t('procest', 'Description')"
+										class="edit-field edit-field--full"
+										@update:value="v => editForm.description = v" />
+								</div>
+								<p v-if="editError" class="edit-error">
+									{{ editError }}
+								</p>
+								<div class="edit-actions">
+									<NcButton type="primary" @click="saveEdit">
+										{{ t('procest', 'Save') }}
+									</NcButton>
+									<NcButton @click="cancelEdit">
+										{{ t('procest', 'Cancel') }}
+									</NcButton>
+								</div>
+							</div>
+						</template>
+					</div>
+				</div>
+				<p v-else class="sub-entity-tab__empty">
+					{{ t('procest', 'No result types configured yet.') }}
+				</p>
+
+				<NcButton v-if="editingId === null" @click="startAdd">
+					{{ t('procest', 'Add Result Type') }}
+				</NcButton>
+			</template>
+		</template>
+	</div>
+</template>
+
+<script>
+import { NcButton, NcLoadingIcon, NcTextField, NcSelect } from '@nextcloud/vue'
+import PencilIcon from 'vue-material-design-icons/Pencil.vue'
+import DeleteIcon from 'vue-material-design-icons/Delete.vue'
+import { useObjectStore } from '../../../store/modules/object.js'
+
+export default {
+	name: 'ResultTypesTab',
+	components: { NcButton, NcLoadingIcon, NcTextField, NcSelect, PencilIcon, DeleteIcon },
+	props: {
+		caseTypeId: { type: String, default: null },
+		isCreate: { type: Boolean, default: false },
+	},
+	data() {
+		return {
+			loading: false,
+			items: [],
+			editingId: null,
+			editForm: { name: '', description: '', archivalAction: '', archivalPeriod: '' },
+			editError: '',
+			archivalActionOptions: ['bewaren', 'vernietigen', 'blijvend_bewaren'],
+		}
+	},
+	async mounted() {
+		if (!this.isCreate) await this.loadItems()
+	},
+	methods: {
+		async loadItems() {
+			this.loading = true
+			const objectStore = useObjectStore()
+			const results = await objectStore.fetchCollection('resultType', {
+				'_filters[caseType]': this.caseTypeId,
+				_limit: 100,
+			})
+			this.items = results || []
+			this.loading = false
+		},
+		startAdd() {
+			this.editingId = 'new'
+			this.editForm = { name: '', description: '', archivalAction: '', archivalPeriod: '' }
+			this.editError = ''
+			this.items.push({ id: 'new', name: '' })
+		},
+		startEdit(item) {
+			this.editingId = item.id
+			this.editForm = { name: item.name, description: item.description || '', archivalAction: item.archivalAction || '', archivalPeriod: item.archivalPeriod || '' }
+			this.editError = ''
+		},
+		cancelEdit() {
+			if (this.editingId === 'new') {
+				this.items = this.items.filter(i => i.id !== 'new')
+			}
+			this.editingId = null
+			this.editError = ''
+		},
+		async saveEdit() {
+			if (!this.editForm.name.trim()) {
+				this.editError = t('procest', 'Name is required')
+				return
+			}
+			const objectStore = useObjectStore()
+			const data = {
+				name: this.editForm.name.trim(),
+				description: this.editForm.description.trim(),
+				caseType: this.caseTypeId,
+				archivalAction: this.editForm.archivalAction || null,
+				archivalPeriod: this.editForm.archivalPeriod || null,
+			}
+			if (this.editingId !== 'new') data.id = this.editingId
+			await objectStore.saveObject('resultType', data)
+			this.editingId = null
+			await this.loadItems()
+		},
+		async deleteItem(item) {
+			if (!confirm(t('procest', 'Delete result type "{name}"?', { name: item.name }))) return
+			const objectStore = useObjectStore()
+			await objectStore.deleteObject('resultType', item.id)
+			await this.loadItems()
+		},
+	},
+}
+</script>
+
+<style scoped>
+@import './sub-entity-tab.css';
+</style>
diff --git a/src/views/settings/tabs/RoleTypesTab.vue b/src/views/settings/tabs/RoleTypesTab.vue
new file mode 100644
index 0000000..c47ef5d
--- /dev/null
+++ b/src/views/settings/tabs/RoleTypesTab.vue
@@ -0,0 +1,158 @@
+<template>
+	<div class="sub-entity-tab">
+		<div v-if="isCreate" class="sub-entity-tab__notice">
+			<p>{{ t('procest', 'Save the case type first before adding role types.') }}</p>
+		</div>
+
+		<template v-else>
+			<NcLoadingIcon v-if="loading" />
+
+			<template v-else>
+				<div v-if="items.length > 0" class="sub-entity-tab__list">
+					<div
+						v-for="item in items"
+						:key="item.id"
+						class="sub-entity-row">
+						<template v-if="editingId !== item.id">
+							<span class="sub-entity-row__name">{{ item.name }}</span>
+							<span v-if="item.genericRole" class="sub-entity-row__badge">
+								{{ item.genericRole }}
+							</span>
+							<div class="sub-entity-row__actions">
+								<NcButton type="tertiary" @click="startEdit(item)">
+									<template #icon>
+										<PencilIcon :size="20" />
+									</template>
+								</NcButton>
+								<NcButton type="tertiary" @click="deleteItem(item)">
+									<template #icon>
+										<DeleteIcon :size="20" />
+									</template>
+								</NcButton>
+							</div>
+						</template>
+
+						<template v-else>
+							<div class="sub-entity-row__edit-form">
+								<div class="edit-row">
+									<NcTextField
+										:value="editForm.name"
+										:label="t('procest', 'Name')"
+										:error="!!editError"
+										class="edit-field"
+										@update:value="v => editForm.name = v" />
+									<NcSelect
+										v-model="editForm.genericRole"
+										:options="genericRoleOptions"
+										:placeholder="t('procest', 'Generic role')"
+										class="edit-field" />
+								</div>
+								<p v-if="editError" class="edit-error">
+									{{ editError }}
+								</p>
+								<div class="edit-actions">
+									<NcButton type="primary" @click="saveEdit">
+										{{ t('procest', 'Save') }}
+									</NcButton>
+									<NcButton @click="cancelEdit">
+										{{ t('procest', 'Cancel') }}
+									</NcButton>
+								</div>
+							</div>
+						</template>
+					</div>
+				</div>
+				<p v-else class="sub-entity-tab__empty">
+					{{ t('procest', 'No role types configured yet.') }}
+				</p>
+
+				<NcButton v-if="editingId === null" @click="startAdd">
+					{{ t('procest', 'Add Role Type') }}
+				</NcButton>
+			</template>
+		</template>
+	</div>
+</template>
+
+<script>
+import { NcButton, NcLoadingIcon, NcTextField, NcSelect } from '@nextcloud/vue'
+import PencilIcon from 'vue-material-design-icons/Pencil.vue'
+import DeleteIcon from 'vue-material-design-icons/Delete.vue'
+import { useObjectStore } from '../../../store/modules/object.js'
+
+export default {
+	name: 'RoleTypesTab',
+	components: { NcButton, NcLoadingIcon, NcTextField, NcSelect, PencilIcon, DeleteIcon },
+	props: {
+		caseTypeId: { type: String, default: null },
+		isCreate: { type: Boolean, default: false },
+	},
+	data() {
+		return {
+			loading: false,
+			items: [],
+			editingId: null,
+			editForm: { name: '', genericRole: '' },
+			editError: '',
+			genericRoleOptions: ['initiator', 'handler', 'advisor', 'decision_maker', 'stakeholder', 'coordinator', 'contact', 'co_initiator'],
+		}
+	},
+	async mounted() {
+		if (!this.isCreate) await this.loadItems()
+	},
+	methods: {
+		async loadItems() {
+			this.loading = true
+			const objectStore = useObjectStore()
+			const results = await objectStore.fetchCollection('roleType', {
+				'_filters[caseType]': this.caseTypeId,
+				_limit: 100,
+			})
+			this.items = results || []
+			this.loading = false
+		},
+		startAdd() {
+			this.editingId = 'new'
+			this.editForm = { name: '', genericRole: '' }
+			this.editError = ''
+			this.items.push({ id: 'new', name: '' })
+		},
+		startEdit(item) {
+			this.editingId = item.id
+			this.editForm = { name: item.name, genericRole: item.genericRole || '' }
+			this.editError = ''
+		},
+		cancelEdit() {
+			if (this.editingId === 'new') this.items = this.items.filter(i => i.id !== 'new')
+			this.editingId = null
+			this.editError = ''
+		},
+		async saveEdit() {
+			if (!this.editForm.name.trim()) {
+				this.editError = t('procest', 'Name is required')
+				return
+			}
+			const objectStore = useObjectStore()
+			const data = {
+				name: this.editForm.name.trim(),
+				caseType: this.caseTypeId,
+				genericRole: this.editForm.genericRole || null,
+			}
+			if (this.editingId !== 'new') data.id = this.editingId
+			await objectStore.saveObject('roleType', data)
+			this.editingId = null
+			await this.loadItems()
+		},
+		async deleteItem(item) {
+			if (!confirm(t('procest', 'Delete role type "{name}"?', { name: item.name }))) return
+			const objectStore = useObjectStore()
+			await objectStore.deleteObject('roleType', item.id)
+			await this.loadItems()
+		},
+	},
+}
+</script>
+
+<style scoped>
+@import './sub-entity-tab.css';
+</style>
diff --git a/src/views/settings/tabs/sub-entity-tab.css b/src/views/settings/tabs/sub-entity-tab.css
new file mode 100644
index 0000000..cc23b30
--- /dev/null
+++ b/src/views/settings/tabs/sub-entity-tab.css
@@ -0,0 +1,91 @@
+.sub-entity-tab__notice {
+	color: var(--color-text-maxcontrast);
+	padding: 12px;
+	background: var(--color-background-dark);
+	border-radius: var(--border-radius);
+}
+
+.sub-entity-tab__list {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	margin-bottom: 16px;
+}
+
+.sub-entity-tab__empty {
+	color: var(--color-text-maxcontrast);
+	padding: 16px;
+	text-align: center;
+}
+
+.sub-entity-row {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 8px 12px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	flex-wrap: wrap;
+}
+
+.sub-entity-row__name {
+	font-weight: 500;
+	flex: 1;
+	min-width: 120px;
+}
+
+.sub-entity-row__badge {
+	display: inline-block;
+	padding: 2px 8px;
+	border-radius: var(--border-radius-pill);
+	font-size: 11px;
+	font-weight: 500;
+	background: var(--color-background-dark);
+	color: var(--color-text-maxcontrast);
+}
+
+.sub-entity-row__meta {
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+}
+
+.sub-entity-row__actions {
+	display: flex;
+	gap: 4px;
+	margin-left: auto;
+}
+
+.sub-entity-row__edit-form {
+	width: 100%;
+}
+
+.edit-row {
+	display: flex;
+	gap: 12px;
+	margin-bottom: 8px;
+}
+
+.edit-field {
+	flex: 1;
+	min-width: 140px;
+}
+
+.edit-field--full {
+	flex: 1 1 100%;
+}
+
+.edit-field--small {
+	max-width: 100px;
+}
+
+.edit-error {
+	color: var(--color-error);
+	font-size: 13px;
+	margin: 4px 0;
+}
+
+.edit-actions {
+	display: flex;
+	gap: 8px;
+	margin-top: 8px;
+}