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/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/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;
+}