diff --git a/components/XDataTable.vue b/components/XDataTable.vue
index fb15aa6e..6416518c 100644
--- a/components/XDataTable.vue
+++ b/components/XDataTable.vue
@@ -3,13 +3,21 @@ import type Dialog from 'primevue/dialog'
 import type DataTable from 'primevue/datatable'
 import { FilterMatchMode } from 'primevue/api';
 import camelCaseToTitle from '~/utils/camelCaseToTitle.js';
-import { AuditLog } from '~/domain/application/index.js';
 
 export type ViewFieldType = 'text' | 'textarea' | 'number' | 'date' | 'boolean' | 'hidden' | 'object'
 
 export type FormFieldType = 'text' | 'textarea' | { type: 'number', min: number, max: number } | 'date' | 'boolean' | 'hidden' | string[]
     | { type: 'requirement', options: { id: string, name: string }[] }
 
+interface AuditLogViewModel {
+    id: string;
+    entityId: string;
+    entityName: string;
+    entity: string;
+    organizationSlug: string;
+    createdAt: Date;
+}
+
 const props = defineProps<{
     datasource: RowType[] | null,
     entityName: string,
@@ -60,7 +68,7 @@ const openEditDialog = (item: RowType) => {
 const openRecycleDialog = async () => {
     recycleDialogLoading.value = true
     recycleDialogVisible.value = true
-    const recycleBinItems = (await $fetch<AuditLog[]>(`/api/audit-log/deleted`, {
+    const recycleBinItems = (await $fetch<AuditLogViewModel[]>(`/api/audit-log/deleted`, {
         method: 'GET',
         query: {
             entityName: props.entityName,
@@ -78,7 +86,7 @@ const openRecycleDialog = async () => {
 const openHistoryDialog = async (item: RowType) => {
     historyDialogLoading.value = true
     historyDialogVisible.value = true
-    const auditLog = (await $fetch<AuditLog[]>(`/api/audit-log`, {
+    const auditLog = (await $fetch<AuditLogViewModel[]>(`/api/audit-log`, {
         method: 'GET',
         query: {
             entityId: item.id,
diff --git a/package-lock.json b/package-lock.json
index d83d7bec..53b54a4b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@final-hill/cathedral",
-    "version": "0.17.0",
+    "version": "0.18.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@final-hill/cathedral",
-            "version": "0.17.0",
+            "version": "0.18.0",
             "hasInstallScript": true,
             "license": "AGPL-3.0-only",
             "dependencies": {
diff --git a/package.json b/package.json
index b9694a33..737f9bf3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@final-hill/cathedral",
-    "version": "0.17.0",
+    "version": "0.18.0",
     "description": "Requirements management system",
     "keywords": [],
     "private": true,
diff --git a/pages/o/[organization-slug]/[solution-slug]/environment/assumptions.client.vue b/pages/o/[organization-slug]/[solution-slug]/environment/assumptions.client.vue
index 3e62c75c..014f88c8 100644
--- a/pages/o/[organization-slug]/[solution-slug]/environment/assumptions.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/environment/assumptions.client.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { useFetch } from 'nuxt/app';
-import { Assumption } from '~/domain/requirements/Assumption.js';
 
 useHead({ title: 'Assumptions' })
 definePageMeta({ name: 'Assumptions' })
@@ -18,18 +17,25 @@ const { $eventBus } = useNuxtApp(),
 if (getSolutionError.value)
     $eventBus.$emit('page-error', getSolutionError.value);
 
-const { data: assumptions, refresh, status, error: getAssumptionsError } = await useFetch<Assumption[]>(`/api/assumption`, {
+interface AssumptionViewModel {
+    id: string,
+    name: string,
+    description: string,
+    lastModified: Date
+};
+
+const { data: assumptions, refresh, status, error: getAssumptionsError } = await useFetch<AssumptionViewModel[]>(`/api/assumption`, {
     query: { solutionId },
-    transform: (data) => data.map((item) => {
-        item.lastModified = new Date(item.lastModified)
-        return item
-    })
+    transform: (data) => data.map((item) => ({
+        ...item,
+        lastModified: new Date(item.lastModified)
+    }))
 })
 
 if (getAssumptionsError.value)
     $eventBus.$emit('page-error', getAssumptionsError.value);
 
-const onCreate = async (data: Assumption) => {
+const onCreate = async (data: AssumptionViewModel) => {
     await $fetch(`/api/assumption`, {
         method: 'post',
         body: {
@@ -52,7 +58,7 @@ const onDelete = async (id: string) => {
     refresh()
 }
 
-const onUpdate = async (data: Assumption) => {
+const onUpdate = async (data: AssumptionViewModel) => {
     await $fetch(`/api/assumption/${data.id}`, {
         method: 'put',
         body: {
diff --git a/pages/o/[organization-slug]/[solution-slug]/environment/components.client.vue b/pages/o/[organization-slug]/[solution-slug]/environment/components.client.vue
index 25958c3a..466fffcb 100644
--- a/pages/o/[organization-slug]/[solution-slug]/environment/components.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/environment/components.client.vue
@@ -1,9 +1,16 @@
 <script lang="ts" setup>
-import { EnvironmentComponent } from '~/domain/requirements/EnvironmentComponent.js';
+import { useHead, useRoute, useNuxtApp, useFetch } from '#imports';
 
 useHead({ title: 'Components' })
 definePageMeta({ name: 'Environment Components' })
 
+interface EnvironmentComponentViewModel {
+    id: string;
+    name: string;
+    description: string;
+    lastModified: Date;
+}
+
 const { $eventBus } = useNuxtApp(),
     { solutionslug, organizationslug } = useRoute('Environment Components').params,
     { data: solutions, error: getSolutionError } = await useFetch('/api/solution', {
@@ -13,7 +20,7 @@ const { $eventBus } = useNuxtApp(),
         }
     }),
     solutionId = solutions.value?.[0].id,
-    { data: environmentComponents, status, refresh, error: getEnvironmentComponentsError } = await useFetch<EnvironmentComponent[]>(`/api/environment-component`, {
+    { data: environmentComponents, status, refresh, error: getEnvironmentComponentsError } = await useFetch<EnvironmentComponentViewModel[]>(`/api/environment-component`, {
         query: { solutionId },
         transform: (data) => data.map((item) => {
             item.lastModified = new Date(item.lastModified)
@@ -27,7 +34,7 @@ if (getSolutionError.value)
 if (getEnvironmentComponentsError.value)
     $eventBus.$emit('page-error', getEnvironmentComponentsError.value)
 
-const onCreate = async (data: EnvironmentComponent) => {
+const onCreate = async (data: EnvironmentComponentViewModel) => {
     await $fetch(`/api/environment-component`, {
         method: 'POST',
         body: {
@@ -48,7 +55,7 @@ const onDelete = async (id: string) => {
     refresh()
 }
 
-const onUpdate = async (data: EnvironmentComponent) => {
+const onUpdate = async (data: EnvironmentComponentViewModel) => {
     await $fetch(`/api/environment-component/${data.id}`, {
         method: 'PUT',
         body: {
diff --git a/pages/o/[organization-slug]/[solution-slug]/environment/constraints.client.vue b/pages/o/[organization-slug]/[solution-slug]/environment/constraints.client.vue
index a4a3e598..fb1931ef 100644
--- a/pages/o/[organization-slug]/[solution-slug]/environment/constraints.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/environment/constraints.client.vue
@@ -1,11 +1,18 @@
 <script lang="ts" setup>
 import { useFetch } from 'nuxt/app';
-import { Constraint } from '~/domain/requirements/Constraint.js';
 import { ConstraintCategory } from '~/domain/requirements/ConstraintCategory.js';
 
 useHead({ title: 'Constraints' })
 definePageMeta({ name: 'Constraints' })
 
+interface ConstraintViewModel {
+    id: string;
+    name: string;
+    description: string;
+    category: ConstraintCategory;
+    lastModified: Date;
+}
+
 const { $eventBus } = useNuxtApp(),
     { solutionslug, organizationslug } = useRoute('Constraints').params,
     { data: solutions, error: getSolutionError } = await useFetch('/api/solution', {
@@ -16,7 +23,7 @@ const { $eventBus } = useNuxtApp(),
     }),
     solution = (solutions.value ?? [])[0],
     solutionId = solution.id,
-    { data: constraints, status, refresh, error: getConstraintsError } = await useFetch<Constraint[]>(`/api/constraint`, {
+    { data: constraints, status, refresh, error: getConstraintsError } = await useFetch<ConstraintViewModel[]>(`/api/constraint`, {
         query: { solutionId },
         transform: (data) => data.map((item) => {
             item.lastModified = new Date(item.lastModified)
@@ -30,7 +37,7 @@ if (getSolutionError.value)
 if (getConstraintsError.value)
     $eventBus.$emit('page-error', getConstraintsError.value)
 
-const onCreate = async (data: Constraint) => {
+const onCreate = async (data: ConstraintViewModel) => {
     await $fetch(`/api/constraint`, {
         method: 'POST',
         body: {
@@ -52,7 +59,7 @@ const onDelete = async (id: string) => {
     refresh()
 }
 
-const onUpdate = async (data: Constraint) => {
+const onUpdate = async (data: ConstraintViewModel) => {
     await $fetch(`/api/constraint/${data.id}`, {
         method: 'PUT',
         body: {
diff --git a/pages/o/[organization-slug]/[solution-slug]/environment/effects.client.vue b/pages/o/[organization-slug]/[solution-slug]/environment/effects.client.vue
index 638b519a..331c7d5d 100644
--- a/pages/o/[organization-slug]/[solution-slug]/environment/effects.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/environment/effects.client.vue
@@ -1,5 +1,11 @@
 <script lang="ts" setup>
-import { Effect } from '~/domain/requirements/Effect.js';
+
+interface EffectViewModel {
+    id: string;
+    name: string;
+    description: string;
+    lastModified: Date;
+};
 
 useHead({ title: 'Effects' })
 definePageMeta({ name: 'Effects' })
@@ -17,18 +23,18 @@ const { $eventBus } = useNuxtApp(),
 if (getSolutionError.value)
     $eventBus.$emit('page-error', getSolutionError.value)
 
-const { data: effects, refresh, status, error: getEffectsError } = await useFetch<Effect[]>(`/api/effect`, {
+const { data: effects, refresh, status, error: getEffectsError } = await useFetch<EffectViewModel[]>(`/api/effect`, {
     query: { solutionId },
-    transform: (data) => data.map((item) => {
-        item.lastModified = new Date(item.lastModified)
-        return item
-    })
+    transform: (data) => data.map((item) => ({
+        ...item,
+        lastModified: new Date(item.lastModified)
+    }))
 })
 
 if (getEffectsError.value)
     $eventBus.$emit('page-error', getEffectsError.value)
 
-const onCreate = async (data: Effect) => {
+const onCreate = async (data: EffectViewModel) => {
     await $fetch(`/api/effect`, {
         method: 'POST',
         body: {
@@ -40,7 +46,7 @@ const onCreate = async (data: Effect) => {
     refresh()
 }
 
-const onUpdate = async (data: Effect) => {
+const onUpdate = async (data: EffectViewModel) => {
     await $fetch(`/api/effect/${data.id}`, {
         method: 'PUT',
         body: {
diff --git a/pages/o/[organization-slug]/[solution-slug]/environment/glossary.client.vue b/pages/o/[organization-slug]/[solution-slug]/environment/glossary.client.vue
index 9fc7fd02..5e0ce422 100644
--- a/pages/o/[organization-slug]/[solution-slug]/environment/glossary.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/environment/glossary.client.vue
@@ -1,5 +1,10 @@
 <script lang="ts" setup>
-import { GlossaryTerm } from '~/domain/requirements/GlossaryTerm.js';
+type GlossaryTermViewModel = {
+    id: string;
+    name: string;
+    description: string;
+    lastModified: Date;
+};
 
 useHead({ title: 'Glossary' })
 definePageMeta({ name: 'Glossary' })
@@ -17,7 +22,7 @@ const { $eventBus } = useNuxtApp(),
 if (getSolutionError.value)
     $eventBus.$emit('page-error', getSolutionError.value);
 
-const { data: glossaryTerms, refresh, status, error: getGlossaryTermsError } = await useFetch<GlossaryTerm[]>(`/api/glossary-term`, {
+const { data: glossaryTerms, refresh, status, error: getGlossaryTermsError } = await useFetch<GlossaryTermViewModel[]>(`/api/glossary-term`, {
     query: { solutionId },
     transform: (data) => data.map((item) => {
         item.lastModified = new Date(item.lastModified)
@@ -28,7 +33,7 @@ const { data: glossaryTerms, refresh, status, error: getGlossaryTermsError } = a
 if (getGlossaryTermsError.value)
     $eventBus.$emit('page-error', getGlossaryTermsError.value)
 
-const onCreate = async (data: GlossaryTerm) => {
+const onCreate = async (data: GlossaryTermViewModel) => {
     await $fetch(`/api/glossary-term`, {
         method: 'POST',
         body: {
@@ -41,7 +46,7 @@ const onCreate = async (data: GlossaryTerm) => {
     refresh()
 }
 
-const onUpdate = async (data: GlossaryTerm) => {
+const onUpdate = async (data: GlossaryTermViewModel) => {
     await $fetch(`/api/glossary-term/${data.id}`, {
         method: 'PUT',
         body: {
diff --git a/pages/o/[organization-slug]/[solution-slug]/environment/invariants.client.vue b/pages/o/[organization-slug]/[solution-slug]/environment/invariants.client.vue
index ef74e2c1..12e8794d 100644
--- a/pages/o/[organization-slug]/[solution-slug]/environment/invariants.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/environment/invariants.client.vue
@@ -1,5 +1,10 @@
 <script lang="ts" setup>
-import { Invariant } from '~/domain/requirements/Invariant.js';
+interface InvariantViewModel {
+    id: string;
+    name: string;
+    description: string;
+    lastModified: Date;
+}
 
 useHead({ title: 'Invariants' })
 definePageMeta({ name: 'Invariants' })
@@ -17,7 +22,7 @@ const { $eventBus } = useNuxtApp(),
 if (getSolutionError.value)
     $eventBus.$emit('page-error', getSolutionError.value)
 
-const { data: invariants, refresh, status, error: getInvariantsError } = await useFetch<Invariant[]>(`/api/invariant`, {
+const { data: invariants, refresh, status, error: getInvariantsError } = await useFetch<InvariantViewModel[]>(`/api/invariant`, {
     query: { solutionId },
     transform: (data) => data.map((item) => {
         item.lastModified = new Date(item.lastModified)
@@ -28,7 +33,7 @@ const { data: invariants, refresh, status, error: getInvariantsError } = await u
 if (getInvariantsError.value)
     $eventBus.$emit('page-error', getInvariantsError.value)
 
-const onCreate = async (data: Invariant) => {
+const onCreate = async (data: InvariantViewModel) => {
     await useFetch(`/api/invariant`, {
         method: 'POST',
         body: {
@@ -41,7 +46,7 @@ const onCreate = async (data: Invariant) => {
     refresh()
 }
 
-const onUpdate = async (data: Invariant) => {
+const onUpdate = async (data: InvariantViewModel) => {
     await useFetch(`/api/invariant/${data.id}`, {
         method: 'PUT', body: {
             id: data.id,
diff --git a/pages/o/[organization-slug]/[solution-slug]/goals/functionality.client.vue b/pages/o/[organization-slug]/[solution-slug]/goals/functionality.client.vue
index 5df51e72..d75b4bf7 100644
--- a/pages/o/[organization-slug]/[solution-slug]/goals/functionality.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/goals/functionality.client.vue
@@ -1,10 +1,16 @@
 <script lang="ts" setup>
-import { FunctionalBehavior } from '~/domain/requirements/FunctionalBehavior.js';
 import { MoscowPriority } from '~/domain/requirements/MoscowPriority.js';
 
 useHead({ title: 'Functionality' })
 definePageMeta({ name: 'Goals Functionality' })
 
+interface FunctionalBehaviorViewModel {
+    id: string;
+    name: string;
+    description: string;
+    lastModified: Date;
+}
+
 const { $eventBus } = useNuxtApp(),
     { solutionslug, organizationslug } = useRoute('Functionality').params,
     { data: solutions, error: getSolutionError } = await useFetch(`/api/solution`, {
@@ -18,7 +24,7 @@ const { $eventBus } = useNuxtApp(),
 if (getSolutionError.value)
     $eventBus.$emit('page-error', getSolutionError.value)
 
-const { data: functionalBehaviors, refresh, status, error: getFunctionalBehaviorsError } = await useFetch<FunctionalBehavior[]>(`/api/functional-behavior`, {
+const { data: functionalBehaviors, refresh, status, error: getFunctionalBehaviorsError } = await useFetch<FunctionalBehaviorViewModel[]>(`/api/functional-behavior`, {
     query: { solutionId },
     transform: (data) => data.map((item) => {
         item.lastModified = new Date(item.lastModified)
@@ -29,7 +35,7 @@ const { data: functionalBehaviors, refresh, status, error: getFunctionalBehavior
 if (getFunctionalBehaviorsError.value)
     $eventBus.$emit('page-error', getFunctionalBehaviorsError.value);
 
-const onCreate = async (data: FunctionalBehavior) => {
+const onCreate = async (data: FunctionalBehaviorViewModel) => {
     await $fetch(`/api/functional-behavior`, {
         method: 'POST',
         body: {
@@ -42,7 +48,7 @@ const onCreate = async (data: FunctionalBehavior) => {
     refresh()
 }
 
-const onUpdate = async (data: FunctionalBehavior) => {
+const onUpdate = async (data: FunctionalBehaviorViewModel) => {
     await $fetch(`/api/functional-behavior/${data.id}`, {
         method: 'PUT',
         body: {
diff --git a/pages/o/[organization-slug]/[solution-slug]/goals/limitations.client.vue b/pages/o/[organization-slug]/[solution-slug]/goals/limitations.client.vue
index a26cd5b3..388f0349 100644
--- a/pages/o/[organization-slug]/[solution-slug]/goals/limitations.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/goals/limitations.client.vue
@@ -1,5 +1,10 @@
 <script lang="ts" setup>
-import { Limit } from '~/domain/requirements/Limit.js';
+type LimitViewModel = {
+    id: string;
+    name: string;
+    description: string;
+    lastModified: Date;
+};
 
 useHead({ title: 'Limitations' })
 definePageMeta({ name: 'Limitations' })
@@ -17,7 +22,7 @@ const { $eventBus } = useNuxtApp(),
 if (getSolutionError.value)
     $eventBus.$emit('page-error', getSolutionError.value)
 
-const { data: limits, status, refresh, error: getLimitsError } = await useFetch<Limit[]>(`/api/limit`, {
+const { data: limits, status, refresh, error: getLimitsError } = await useFetch<LimitViewModel[]>(`/api/limit`, {
     query: { solutionId },
     transform: (data) => data.map((item) => {
         item.lastModified = new Date(item.lastModified)
@@ -28,7 +33,7 @@ const { data: limits, status, refresh, error: getLimitsError } = await useFetch<
 if (getLimitsError.value)
     $eventBus.$emit('page-error', getLimitsError.value)
 
-const onCreate = async (data: Limit) => {
+const onCreate = async (data: LimitViewModel) => {
     await $fetch(`/api/limit`, {
         method: 'POST',
         body: {
@@ -41,7 +46,7 @@ const onCreate = async (data: Limit) => {
     refresh()
 }
 
-const onUpdate = async (data: Limit) => {
+const onUpdate = async (data: LimitViewModel) => {
     await $fetch(`/api/limit/${data.id}`, {
         method: 'PUT', body: {
             solutionId,
diff --git a/pages/o/[organization-slug]/[solution-slug]/goals/obstacles.client.vue b/pages/o/[organization-slug]/[solution-slug]/goals/obstacles.client.vue
index 1df0bbfa..b7450609 100644
--- a/pages/o/[organization-slug]/[solution-slug]/goals/obstacles.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/goals/obstacles.client.vue
@@ -1,5 +1,10 @@
 <script lang="ts" setup>
-import { Obstacle } from '~/domain/requirements/Obstacle.js';
+type ObstacleViewModel = {
+    id: string;
+    name: string;
+    description: string;
+    lastModified: Date;
+};
 
 useHead({ title: 'Obstacles' })
 definePageMeta({ name: 'Obstacles' })
@@ -17,7 +22,7 @@ const { $eventBus } = useNuxtApp(),
 if (getSolutionError.value)
     $eventBus.$emit('page-error', getSolutionError.value);
 
-const { data: obstacles, refresh, status, error: getObstaclesError } = await useFetch<Obstacle[]>(`/api/obstacle`, {
+const { data: obstacles, refresh, status, error: getObstaclesError } = await useFetch<ObstacleViewModel[]>(`/api/obstacle`, {
     query: { solutionId },
     transform: (data) => data.map((item) => {
         item.lastModified = new Date(item.lastModified)
@@ -25,7 +30,7 @@ const { data: obstacles, refresh, status, error: getObstaclesError } = await use
     })
 })
 
-const onCreate = async (data: Obstacle) => {
+const onCreate = async (data: ObstacleViewModel) => {
     await $fetch(`/api/obstacle`, {
         method: 'POST',
         body: {
@@ -38,7 +43,7 @@ const onCreate = async (data: Obstacle) => {
     refresh()
 }
 
-const onUpdate = async (data: Obstacle) => {
+const onUpdate = async (data: ObstacleViewModel) => {
     await $fetch(`/api/obstacle/${data.id}`, {
         method: 'PUT',
         body: {
diff --git a/pages/o/[organization-slug]/[solution-slug]/goals/outcomes.client.vue b/pages/o/[organization-slug]/[solution-slug]/goals/outcomes.client.vue
index d439d992..e14beaa2 100644
--- a/pages/o/[organization-slug]/[solution-slug]/goals/outcomes.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/goals/outcomes.client.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { Outcome } from '~/domain/requirements/Outcome.js';
-
 useHead({ title: 'Outcomes' })
 definePageMeta({ name: 'Outcomes' })
 
@@ -17,7 +15,14 @@ const { $eventBus } = useNuxtApp(),
 if (getSolutionError.value)
     $eventBus.$emit('page-error', getSolutionError.value);
 
-const { data: outcomes, refresh, status, error: getOutcomesError } = await useFetch<Outcome[]>(`/api/outcome`, {
+interface OutcomeViewModel {
+    id: string;
+    name: string;
+    description: string;
+    lastModified: Date;
+}
+
+const { data: outcomes, refresh, status, error: getOutcomesError } = await useFetch<OutcomeViewModel[]>(`/api/outcome`, {
     query: { solutionId },
     transform: (data) => data.map((item) => {
         item.lastModified = new Date(item.lastModified)
@@ -28,7 +33,7 @@ const { data: outcomes, refresh, status, error: getOutcomesError } = await useFe
 if (getOutcomesError.value)
     $eventBus.$emit('page-error', getOutcomesError.value);
 
-const onCreate = async (data: Outcome) => {
+const onCreate = async (data: OutcomeViewModel) => {
     await $fetch(`/api/outcome`, {
         method: 'POST',
         body: {
@@ -41,7 +46,7 @@ const onCreate = async (data: Outcome) => {
     refresh()
 }
 
-const onUpdate = async (data: Outcome) => {
+const onUpdate = async (data: OutcomeViewModel) => {
     await $fetch(`/api/outcome/${data.id}`, {
         method: 'PUT',
         body: {
diff --git a/pages/o/[organization-slug]/[solution-slug]/goals/rationale.client.vue b/pages/o/[organization-slug]/[solution-slug]/goals/rationale.client.vue
index d061516e..180e2c17 100644
--- a/pages/o/[organization-slug]/[solution-slug]/goals/rationale.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/goals/rationale.client.vue
@@ -1,5 +1,9 @@
 <script lang="ts" setup>
-import type { Justification } from '~/domain/requirements/Justification.js'
+type JustificationViewModel = {
+    id: string;
+    name: string;
+    description: string;
+};
 
 useHead({ title: 'Rationale' })
 definePageMeta({ name: 'Rationale' })
@@ -23,10 +27,10 @@ const [
     { data: situationJustifications, error: getSituationError },
     { data: objectiveJustifications, error: getObjectiveError }
 ] = await Promise.all([
-    useFetch<Justification[]>(`/api/justification`, { query: { name: 'Vision', solutionId } }),
-    useFetch<Justification[]>(`/api/justification`, { query: { name: 'Mission', solutionId } }),
-    useFetch<Justification[]>(`/api/justification`, { query: { name: 'Situation', solutionId } }),
-    useFetch<Justification[]>(`/api/justification`, { query: { name: 'Objective', solutionId } })
+    useFetch<JustificationViewModel[]>(`/api/justification`, { query: { name: 'Vision', solutionId } }),
+    useFetch<JustificationViewModel[]>(`/api/justification`, { query: { name: 'Mission', solutionId } }),
+    useFetch<JustificationViewModel[]>(`/api/justification`, { query: { name: 'Situation', solutionId } }),
+    useFetch<JustificationViewModel[]>(`/api/justification`, { query: { name: 'Objective', solutionId } })
 ]);
 
 if (getVisionError.value)
@@ -43,7 +47,7 @@ const visionDescription = ref(visionJustifications.value?.[0].description!),
     situationDescription = ref(situationJustifications.value?.[0].description!),
     objectiveDescription = ref(objectiveJustifications.value?.[0].description!);
 
-const fieldTriple: [Ref<string>, Justification, string][] = [
+const fieldTriple: [Ref<string>, JustificationViewModel, string][] = [
     [visionDescription, visionJustifications.value![0], 'Vision'],
     [missionDescription, missionJustifications.value![0], 'Mission'],
     [situationDescription, situationJustifications.value![0], 'Situation'],
diff --git a/pages/o/[organization-slug]/[solution-slug]/goals/scenarios.client.vue b/pages/o/[organization-slug]/[solution-slug]/goals/scenarios.client.vue
index 0ef85aab..1f8f30c6 100644
--- a/pages/o/[organization-slug]/[solution-slug]/goals/scenarios.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/goals/scenarios.client.vue
@@ -1,9 +1,5 @@
 <script lang="ts" setup>
-import { FunctionalBehavior } from '~/domain/requirements/FunctionalBehavior.js'
 import { MoscowPriority } from '~/domain/requirements/MoscowPriority.js'
-import { Outcome } from '~/domain/requirements/Outcome.js'
-import { Stakeholder } from '~/domain/requirements/Stakeholder.js'
-import { UserStory } from '~/domain/requirements/UserStory.js';
 
 useHead({ title: 'Scenarios' })
 definePageMeta({ name: 'Goal Scenarios' })
@@ -21,22 +17,46 @@ const { $eventBus } = useNuxtApp(),
 if (getSolutionError.value)
     $eventBus.$emit('page-error', getSolutionError.value);
 
+interface UserStoryViewModel {
+    id: string;
+    name: string;
+    primaryActor: StakeholderViewModel;
+    functionalBehavior: FunctionalBehaviorViewModel;
+    outcome: OutcomeViewModel;
+    lastModified: Date;
+}
+
+interface StakeholderViewModel {
+    id: string;
+    name: string;
+}
+
+interface FunctionalBehaviorViewModel {
+    id: string;
+    name: string;
+}
+
+interface OutcomeViewModel {
+    id: string;
+    name: string;
+}
+
 const [
     { data: userStories, refresh, status, error: getUserStoriesError },
     { data: roles, error: getRolesError },
     { data: functionalBehaviors, error: getFunctionalBehaviorsError },
     { data: outcomes, error: getOutcomesError },
 ] = await Promise.all([
-    useFetch<UserStory[]>(`/api/user-story`, {
+    useFetch<UserStoryViewModel[]>(`/api/user-story`, {
         query: { solutionId },
         transform: (data) => data.map((item) => {
             item.lastModified = new Date(item.lastModified)
             return item
         })
     }),
-    useFetch<Stakeholder[]>(`/api/stakeholder`, { query: { solutionId } }),
-    useFetch<FunctionalBehavior[]>(`/api/functional-behavior`, { query: { solutionId } }),
-    useFetch<Outcome[]>(`/api/outcome`, { query: { solutionId } })
+    useFetch<StakeholderViewModel[]>(`/api/stakeholder`, { query: { solutionId } }),
+    useFetch<FunctionalBehaviorViewModel[]>(`/api/functional-behavior`, { query: { solutionId } }),
+    useFetch<OutcomeViewModel[]>(`/api/outcome`, { query: { solutionId } })
 ])
 
 if (getUserStoriesError.value)
@@ -48,7 +68,7 @@ if (getFunctionalBehaviorsError.value)
 if (getOutcomesError.value)
     $eventBus.$emit('page-error', getOutcomesError.value);
 
-const onUserStoryCreate = async (userStory: UserStory) => {
+const onUserStoryCreate = async (userStory: UserStoryViewModel) => {
     await $fetch(`/api/user-story`, {
         method: 'POST',
         body: {
@@ -62,7 +82,7 @@ const onUserStoryCreate = async (userStory: UserStory) => {
     refresh();
 }
 
-const onUserStoryUpdate = async (userStory: UserStory) => {
+const onUserStoryUpdate = async (userStory: UserStoryViewModel) => {
     await $fetch(`/api/user-story/${userStory.id}`, {
         method: 'PUT',
         body: {
diff --git a/pages/o/[organization-slug]/[solution-slug]/goals/stakeholders.client.vue b/pages/o/[organization-slug]/[solution-slug]/goals/stakeholders.client.vue
index 8883d7e0..63e9cdaa 100644
--- a/pages/o/[organization-slug]/[solution-slug]/goals/stakeholders.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/goals/stakeholders.client.vue
@@ -1,9 +1,19 @@
 <script lang="ts" setup>
 import mermaid from 'mermaid';
-import { Stakeholder } from '~/domain/requirements/Stakeholder.js';
 import { StakeholderCategory } from '~/domain/requirements/StakeholderCategory.js';
 import { StakeholderSegmentation } from '~/domain/requirements/StakeholderSegmentation.js';
 
+interface StakeholderViewModel {
+    id: string;
+    name: string;
+    description: string;
+    category: string;
+    segmentation: string;
+    availability: number;
+    influence: number;
+    lastModified: Date;
+}
+
 useHead({ title: 'Stakeholders' })
 definePageMeta({ name: 'Stakeholders' })
 
@@ -21,7 +31,7 @@ const config = useAppConfig(),
 if (getSolutionError.value)
     $eventBus.$emit('page-error', getSolutionError.value);
 
-const { data: stakeholders, refresh: refreshStakeholders, status, error: getStakeholdersError } = await useFetch<Stakeholder[]>(`/api/stakeholder`, {
+const { data: stakeholders, refresh: refreshStakeholders, status, error: getStakeholdersError } = await useFetch<StakeholderViewModel[]>(`/api/stakeholder`, {
     query: { solutionId },
     transform: (data) => data.map((item) => {
         item.lastModified = new Date(item.lastModified)
@@ -42,7 +52,7 @@ mermaid.initialize({
     theme: themeMap[config.darkMode]
 });
 
-const chartDefinition = (stakeholders: Stakeholder[], category: StakeholderSegmentation) => `
+const chartDefinition = (stakeholders: StakeholderViewModel[], category: StakeholderSegmentation) => `
     quadrantChart
     title ${category}
     x-axis Low Availability --> High Availability
@@ -74,7 +84,7 @@ const renderChart = async () => {
 
 watch(stakeholders, renderChart);
 
-const onCreate = async (data: Stakeholder) => {
+const onCreate = async (data: StakeholderViewModel) => {
     await $fetch(`/api/stakeholder`, {
         method: 'POST',
         body: {
@@ -91,7 +101,7 @@ const onCreate = async (data: Stakeholder) => {
     refreshStakeholders()
 }
 
-const onUpdate = async (data: Stakeholder) => {
+const onUpdate = async (data: StakeholderViewModel) => {
     await $fetch(`/api/stakeholder/${data.id}`, {
         method: 'PUT',
         body: {
diff --git a/pages/o/[organization-slug]/[solution-slug]/project/roles-personnel.client.vue b/pages/o/[organization-slug]/[solution-slug]/project/roles-personnel.client.vue
index 819f1034..4ec9c7d1 100644
--- a/pages/o/[organization-slug]/[solution-slug]/project/roles-personnel.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/project/roles-personnel.client.vue
@@ -1,5 +1,10 @@
 <script lang="ts" setup>
-import { Person } from '~/domain/requirements/Person.js';
+type PersonViewModel = {
+    id: string;
+    name: string;
+    email: string;
+    lastModified: Date;
+};
 
 useHead({ title: 'Roles & Personnel' })
 definePageMeta({ name: 'Roles & Personnel' })
@@ -17,7 +22,7 @@ const { $eventBus } = useNuxtApp(),
 if (getSolutionError.value)
     $eventBus.$emit('page-error', getSolutionError.value)
 
-const { data: personnel, refresh, status, error: getPersonnelError } = await useFetch<Person[]>(`/api/person`, {
+const { data: personnel, refresh, status, error: getPersonnelError } = await useFetch<PersonViewModel[]>(`/api/person`, {
     query: { solutionId },
     transform: (data) => data.map((item) => {
         item.lastModified = new Date(item.lastModified)
@@ -28,7 +33,7 @@ const { data: personnel, refresh, status, error: getPersonnelError } = await use
 if (getPersonnelError.value)
     $eventBus.$emit('page-error', getPersonnelError.value)
 
-const onCreate = async (data: Person) => {
+const onCreate = async (data: PersonViewModel) => {
     await $fetch(`/api/person`, {
         method: 'POST',
         body: {
@@ -42,7 +47,7 @@ const onCreate = async (data: Person) => {
     refresh();
 }
 
-const onUpdate = async (data: Person) => {
+const onUpdate = async (data: PersonViewModel) => {
     await $fetch(`/api/person/${data.id}`, {
         method: 'PUT',
         body: {
diff --git a/pages/o/[organization-slug]/[solution-slug]/system/components.client.vue b/pages/o/[organization-slug]/[solution-slug]/system/components.client.vue
index e6ada188..96abd58a 100644
--- a/pages/o/[organization-slug]/[solution-slug]/system/components.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/system/components.client.vue
@@ -1,10 +1,16 @@
 <script lang="ts" setup>
-import { SystemComponent } from '~/domain/requirements/SystemComponent.js';
-import { type ReqRelModel } from '~/domain/types/index.js'
-
 useHead({ title: 'Components' })
 definePageMeta({ name: 'System Components' })
 
+interface SystemComponentViewModel {
+    id: string;
+    name: string;
+    description: string;
+    parentComponent?: string;
+    solutionId: string;
+    lastModified: Date;
+}
+
 const { $eventBus } = useNuxtApp(),
     { solutionslug, organizationslug } = useRoute('System Components').params,
     { data: solutions, error: getSolutionError } = await useFetch(`/api/solution`, {
@@ -18,7 +24,7 @@ const { $eventBus } = useNuxtApp(),
 if (getSolutionError.value)
     $eventBus.$emit('page-error', getSolutionError.value);
 
-const { data: systemComponents, refresh, status, error: getSystemComponentsError } = await useFetch<ReqRelModel<SystemComponent>[]>(`/api/system-component`, {
+const { data: systemComponents, refresh, status, error: getSystemComponentsError } = await useFetch<SystemComponentViewModel[]>(`/api/system-component`, {
     query: { solutionId },
     transform: (data) => data.map((item) => {
         item.lastModified = new Date(item.lastModified)
@@ -29,7 +35,7 @@ const { data: systemComponents, refresh, status, error: getSystemComponentsError
 if (getSystemComponentsError.value)
     $eventBus.$emit('page-error', getSystemComponentsError.value);
 
-const onCreate = async (data: ReqRelModel<SystemComponent>) => {
+const onCreate = async (data: SystemComponentViewModel) => {
     await $fetch(`/api/system-component`, {
         method: 'POST',
         body: {
@@ -43,7 +49,7 @@ const onCreate = async (data: ReqRelModel<SystemComponent>) => {
     refresh()
 }
 
-const onUpdate = async (data: ReqRelModel<SystemComponent>) => {
+const onUpdate = async (data: SystemComponentViewModel) => {
     await $fetch(`/api/system-component/${data.id}`, {
         method: 'PUT',
         body: {
diff --git a/pages/o/[organization-slug]/[solution-slug]/system/functionality.client.vue b/pages/o/[organization-slug]/[solution-slug]/system/functionality.client.vue
index 69f48278..ebfb2a9a 100644
--- a/pages/o/[organization-slug]/[solution-slug]/system/functionality.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/system/functionality.client.vue
@@ -1,7 +1,31 @@
 <script lang="ts" setup>
-import { FunctionalBehavior } from '~/domain/requirements/FunctionalBehavior.js';
-import { NonFunctionalBehavior } from '~/domain/requirements/NonFunctionalBehavior.js';
-import { SystemComponent } from '~/domain/requirements/SystemComponent.js';
+type FunctionalBehaviorViewModel = {
+    id: string;
+    name: string;
+    description: string;
+    solutionId: string;
+    componentId: string;
+    priority: string;
+    lastModified: Date;
+};
+
+type NonFunctionalBehaviorViewModel = {
+    id: string;
+    name: string;
+    description: string;
+    solutionId: string;
+    componentId: string;
+    priority: string;
+    lastModified: Date;
+};
+
+type SystemComponentViewModel = {
+    id: string;
+    name: string;
+    description: string;
+    parent: string | null;
+    lastModified: Date;
+};
 
 useHead({ title: 'Functionality' })
 definePageMeta({ name: 'Functionality' })
@@ -20,7 +44,7 @@ const { $eventBus } = useNuxtApp(),
 if (getSolutionError.value)
     $eventBus.$emit('page-error', getSolutionError.value)
 
-const { data: components, status, refresh, error: getComponentsError } = await useFetch<SystemComponent[]>(`/api/system-component`, {
+const { data: components, status, refresh, error: getComponentsError } = await useFetch<SystemComponentViewModel[]>(`/api/system-component`, {
     query: { solutionId },
     transform: (data) => data.map((item) => {
         item.lastModified = new Date(item.lastModified)
@@ -33,12 +57,12 @@ if (getComponentsError.value)
     $eventBus.$emit('page-error', getComponentsError.value)
 
 const fnFunctionalBehaviors = async (componentId: string) =>
-    await $fetch<FunctionalBehavior[]>(`/api/functional-behavior`, {
+    await $fetch<FunctionalBehaviorViewModel[]>(`/api/functional-behavior`, {
         query: { solutionId, componentId }
     }).catch((e) => $eventBus.$emit('page-error', e));
 
 const fnNonFunctionalBehaviors = async (componentId: string) =>
-    await $fetch<NonFunctionalBehavior[]>(`/api/non-functional-behavior`, {
+    await $fetch<NonFunctionalBehaviorViewModel[]>(`/api/non-functional-behavior`, {
         query: { solutionId, componentId }
     }).catch((e) => $eventBus.$emit('page-error', e))
 
diff --git a/pages/o/[organization-slug]/[solution-slug]/system/scenarios.client.vue b/pages/o/[organization-slug]/[solution-slug]/system/scenarios.client.vue
index ef0ce3d2..7d1a37b0 100644
--- a/pages/o/[organization-slug]/[solution-slug]/system/scenarios.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/system/scenarios.client.vue
@@ -1,12 +1,67 @@
 <script lang="ts" setup>
-import { Assumption } from '~/domain/requirements/Assumption.js';
-import { Effect } from '~/domain/requirements/Effect.js';
-import { FunctionalBehavior } from '~/domain/requirements/FunctionalBehavior.js';
 import { MoscowPriority } from '~/domain/requirements/MoscowPriority.js';
-import { Outcome } from '~/domain/requirements/Outcome.js';
-import { Stakeholder } from '~/domain/requirements/Stakeholder.js';
-import { UseCase } from '~/domain/requirements/UseCase.js';
-import { UserStory } from '~/domain/requirements/UserStory.js';
+
+type AssumptionViewModel = {
+    id: string;
+    name: string;
+    description: string;
+    lastModified: Date;
+};
+
+type EffectViewModel = {
+    id: string;
+    name: string;
+    description: string;
+    lastModified: Date;
+};
+
+type FunctionalBehaviorViewModel = {
+    id: string;
+    name: string;
+    description: string;
+    lastModified: Date;
+};
+
+type OutcomeViewModel = {
+    id: string;
+    name: string;
+    description: string;
+    lastModified: Date;
+};
+
+type StakeholderViewModel = {
+    id: string;
+    name: string;
+    description: string;
+    lastModified: Date;
+};
+
+type UseCaseViewModel = {
+    id: string;
+    name: string;
+    priority: MoscowPriority;
+    scope: string;
+    level: string;
+    primaryActor: string;
+    goalInContext: string;
+    precondition: string;
+    triggerId: string;
+    mainSuccessScenario: string;
+    successGuarantee: string;
+    extensions: string;
+    lastModified: Date;
+};
+
+type UserStoryViewModel = {
+    id: string;
+    name: string;
+    primaryActor: string;
+    functionalBehavior: string;
+    outcome: string;
+    priority: string;
+    lastModified: Date;
+};
+
 
 useHead({ title: 'Scenarios' })
 definePageMeta({ name: 'Scenarios' })
@@ -24,25 +79,25 @@ const { $eventBus } = useNuxtApp(),
 if (getSolutionError.value)
     $eventBus.$emit('page-error', getSolutionError.value);
 
-const { data: userStories, refresh: refreshUserStories, error: getUserStoriesError, status: userStoryStatus } = await useFetch<UserStory[]>(`/api/user-story`, {
+const { data: userStories, refresh: refreshUserStories, error: getUserStoriesError, status: userStoryStatus } = await useFetch<UserStoryViewModel[]>(`/api/user-story`, {
     query: { solutionId },
     transform: (data) => data.map((item) => {
         item.lastModified = new Date(item.lastModified)
         return item
     })
 }),
-    { data: useCases, refresh: refreshUseCases, error: getUseCasesError, status: useCaseStatus } = await useFetch<UseCase[]>(`/api/use-case`, {
+    { data: useCases, refresh: refreshUseCases, error: getUseCasesError, status: useCaseStatus } = await useFetch<UseCaseViewModel[]>(`/api/use-case`, {
         query: { solutionId },
         transform: (data) => data.map((item) => {
             item.lastModified = new Date(item.lastModified)
             return item
         })
     }),
-    { data: roles, error: getRolesError } = await useFetch<Stakeholder[]>(`/api/stakeholder`, { query: { solutionId } }),
-    { data: functionalBehaviors, error: getFunctionalBehaviorsError } = await useFetch<FunctionalBehavior[]>(`/api/functional-behavior`, { query: { solutionId } }),
-    { data: outcomes, error: getOutcomesError } = await useFetch<Outcome[]>(`/api/outcome`, { query: { solutionId } }),
-    { data: assumptions, error: getAssumptionsError } = await useFetch<Assumption[]>(`/api/assumption`, { query: { solutionId } }),
-    { data: effects, error: getEffectsError } = await useFetch<Effect[]>(`/api/effect`, { query: { solutionId } }),
+    { data: roles, error: getRolesError } = await useFetch<StakeholderViewModel[]>(`/api/stakeholder`, { query: { solutionId } }),
+    { data: functionalBehaviors, error: getFunctionalBehaviorsError } = await useFetch<FunctionalBehaviorViewModel[]>(`/api/functional-behavior`, { query: { solutionId } }),
+    { data: outcomes, error: getOutcomesError } = await useFetch<OutcomeViewModel[]>(`/api/outcome`, { query: { solutionId } }),
+    { data: assumptions, error: getAssumptionsError } = await useFetch<AssumptionViewModel[]>(`/api/assumption`, { query: { solutionId } }),
+    { data: effects, error: getEffectsError } = await useFetch<EffectViewModel[]>(`/api/effect`, { query: { solutionId } }),
     triggerIds = ref<{ id: string, name: string }[]>([])
 
 if (getUserStoriesError.value)
@@ -58,7 +113,7 @@ if (getAssumptionsError.value)
 if (getEffectsError.value)
     $eventBus.$emit('page-error', getEffectsError.value);
 
-const onUserStoryCreate = async (userStory: UserStory) => {
+const onUserStoryCreate = async (userStory: UserStoryViewModel) => {
     await $fetch(`/api/user-story`, {
         method: 'POST',
         body: {
@@ -75,7 +130,7 @@ const onUserStoryCreate = async (userStory: UserStory) => {
     refreshUserStories();
 }
 
-const onUserStoryUpdate = async (userStory: UserStory) => {
+const onUserStoryUpdate = async (userStory: UserStoryViewModel) => {
     await $fetch(`/api/user-story/${userStory.id}`, {
         method: 'PUT',
         body: {
@@ -92,7 +147,7 @@ const onUserStoryUpdate = async (userStory: UserStory) => {
     refreshUserStories();
 }
 
-const onUseCaseCreate = async (useCase: UseCase) => {
+const onUseCaseCreate = async (useCase: UseCaseViewModel) => {
     await $fetch(`/api/use-case`, {
         method: 'POST',
         body: {
@@ -115,7 +170,7 @@ const onUseCaseCreate = async (useCase: UseCase) => {
     refreshUseCases();
 }
 
-const onUseCaseUpdate = async (useCase: UseCase) => {
+const onUseCaseUpdate = async (useCase: UseCaseViewModel) => {
     await $fetch(`/api/use-case/${useCase.id}`, {
         method: 'PUT',
         body: {
diff --git a/pages/o/[organization-slug]/[solution-slug]/workbox.client.vue b/pages/o/[organization-slug]/[solution-slug]/workbox.client.vue
index 817402ad..a05efc56 100644
--- a/pages/o/[organization-slug]/[solution-slug]/workbox.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/workbox.client.vue
@@ -2,7 +2,21 @@
 import snakeCaseToTitle from '~/utils/snakeCaseToTitle.js';
 import camelCaseToTitle from '~/utils/camelCaseToTitle.js';
 import type { DataTableRowExpandEvent, DataTableRowCollapseEvent, DataTableExpandedRows } from 'primevue/datatable';
-import type { ParsedRequirement, Requirement, ReqType } from '~/domain/requirements/index.js';
+import type { ReqType } from '~/domain/requirements/ReqType.js';
+
+interface RequirementViewModel {
+    id: number;
+    name: string;
+    description: string;
+    lastModified: Date;
+    modifiedBy: { name: string };
+    follows: RequirementViewModel[];
+    solution: { id: number };
+    req_type: ReqType;
+    isSilence: boolean;
+}
+
+interface ParsedRequirementViewModel extends RequirementViewModel { }
 
 useHead({ title: 'Workbox' });
 definePageMeta({ name: 'Workbox' });
@@ -17,10 +31,10 @@ const { $eventBus } = useNuxtApp(),
     }),
     solution = solutions.value![0];
 
-const { data: parsedRequirements, error: parsedRequirementsError, refresh } = await useFetch<ParsedRequirement[]>('/api/parse-requirement', {
+const { data: parsedRequirements, error: parsedRequirementsError, refresh } = await useFetch<ParsedRequirementViewModel[]>('/api/parse-requirement', {
     method: 'get',
     query: { solutionId: solution.id },
-    transform: (data: ParsedRequirement[]) => data.map((parsedRequirement) => {
+    transform: (data: ParsedRequirementViewModel[]) => data.map((parsedRequirement) => {
         parsedRequirement.lastModified = new Date(parsedRequirement.lastModified)
         return parsedRequirement;
     })
@@ -32,12 +46,12 @@ if (solutionError.value)
 if (parsedRequirementsError.value)
     $eventBus.$emit('page-error', parsedRequirementsError.value);
 
-type DataRows = Record<string, { isLoading: boolean, data: Partial<Record<ReqType, Requirement[]>> }>
+type DataRows = Record<string, { isLoading: boolean, data: Partial<Record<ReqType, RequirementViewModel[]>> }>
 
 const expandedRows = ref<DataTableExpandedRows>({}),
     dataRows = ref<DataRows>({})
 
-const onItemApprove = async (item: Requirement) => {
+const onItemApprove = async (item: RequirementViewModel) => {
     await $fetch(`/api/${snakeCaseToSlug(item.req_type)}/${item.id}`, {
         // @ts-ignore: method not recognized
         method: 'put',
@@ -46,7 +60,7 @@ const onItemApprove = async (item: Requirement) => {
     await refresh();
 }
 
-const onItemDelete = async (item: Requirement) => {
+const onItemDelete = async (item: RequirementViewModel) => {
     if (!confirm(`Are you sure you want to delete "${item.name}"?`))
         return
     await $fetch(`/api/${snakeCaseToSlug(item.req_type)}/${item.id}`, {
@@ -57,7 +71,7 @@ const onItemDelete = async (item: Requirement) => {
     await refresh();
 }
 
-const onItemUpdate = async (item: Requirement) => {
+const onItemUpdate = async (item: RequirementViewModel) => {
     alert(`UPDATE ${item.req_type} not implemented`)
 }
 
diff --git a/pages/o/[organization-slug]/users.vue b/pages/o/[organization-slug]/users.vue
index 6d514b4c..434756ff 100644
--- a/pages/o/[organization-slug]/users.vue
+++ b/pages/o/[organization-slug]/users.vue
@@ -1,6 +1,21 @@
 <script setup lang="ts">
-import { AppUser, AppRole } from '~/domain/application/index.js'
-import { Organization } from '~/domain/requirements';
+import { AppRole } from '~/domain/application/AppRole.js'
+
+interface OrganizationViewModel {
+    id: string;
+    name: string;
+    slug: string;
+}
+
+interface AppUserViewModel {
+    id: string;
+    name: string
+    email: string;
+    role: AppRole;
+    isSystemAdmin: boolean;
+    creationDate: Date;
+    lastLoginDate?: Date;
+}
 
 useHead({ title: 'Users' })
 definePageMeta({ name: 'Organization Users' })
@@ -8,7 +23,7 @@ definePageMeta({ name: 'Organization Users' })
 const { $eventBus } = useNuxtApp()
 
 const { organizationslug } = useRoute('Organization Users').params,
-    { data: organizations, error: getOrgError } = await useFetch<Organization[]>(`/api/organization/`, {
+    { data: organizations, error: getOrgError } = await useFetch<OrganizationViewModel[]>(`/api/organization/`, {
         query: { slug: organizationslug }
     }),
     organization = ref(organizations.value?.[0]!)
@@ -16,11 +31,11 @@ const { organizationslug } = useRoute('Organization Users').params,
 if (getOrgError.value)
     $eventBus.$emit('page-error', getOrgError.value)
 
-const { data: users, status, refresh, error: getUserError } = await useFetch<(AppUser)[]>('/api/appusers', {
+const { data: users, status, refresh, error: getUserError } = await useFetch<AppUserViewModel[]>('/api/appusers', {
     query: {
         organizationId: organization.value?.id
     },
-    transform: (data: any[]) => data.map<AppUser>((user) => {
+    transform: (data: any[]) => data.map<AppUserViewModel>((user) => {
         user.creationDate = new Date(user.creationDate)
         user.lastLoginDate = user.lastLoginDate ? new Date(user.lastLoginDate) : undefined
         return user
@@ -30,7 +45,7 @@ const { data: users, status, refresh, error: getUserError } = await useFetch<(Ap
 if (getUserError.value)
     $eventBus.$emit('page-error', getUserError.value)
 
-const onCreate = async (data: AppUser) => {
+const onCreate = async (data: AppUserViewModel) => {
     await $fetch(`/api/appusers/`, {
         method: 'POST',
         body: {
@@ -58,7 +73,7 @@ const onDelete = async (id: string) => {
     refresh()
 }
 
-const onUpdate = async (data: AppUser) => {
+const onUpdate = async (data: AppUserViewModel) => {
     await $fetch(`/api/appusers/${data.id}`, {
         method: 'PUT',
         body: {