From a2b9c75afcd342aac61668c4f129233b8e69a8f0 Mon Sep 17 00:00:00 2001
From: Michael Haufe <tno@thenewobjective.com>
Date: Thu, 10 Oct 2024 16:49:09 -0500
Subject: [PATCH] Implemented Recycle Bin feature (#392)

---
 components/XDataTable.vue                     |  71 +++++--
 migrations/.snapshot-cathedral.json           | 180 ++++++++----------
 migrations/Migration20241010185435.ts         |  20 ++
 .../environment/assumptions.client.vue        |   4 +-
 .../environment/components.client.vue         |   2 +-
 .../environment/constraints.client.vue        |   3 +-
 .../environment/effects.client.vue            |   4 +-
 .../environment/glossary.client.vue           |   4 +-
 .../environment/invariants.client.vue         |   4 +-
 .../goals/functionality.client.vue            |   2 +-
 .../goals/limitations.client.vue              |   4 +-
 .../goals/obstacles.client.vue                |   4 +-
 .../[solution-slug]/goals/outcomes.client.vue |   4 +-
 .../goals/scenarios.client.vue                |   4 +-
 .../goals/stakeholders.client.vue             |   3 +-
 .../project/roles-personnel.client.vue        |   4 +-
 .../system/components.client.vue              |   3 +-
 .../system/functionality.client.vue           |   2 +-
 .../system/scenarios.client.vue               |   8 +-
 pages/o/[organization-slug]/users.vue         |   3 +-
 server/api/audit-log/deleted.get.ts           |  65 +++++++
 server/data/subscribers/AuditSubscriber.ts    |   4 +-
 server/domain/AuditLog.ts                     |  14 +-
 23 files changed, 271 insertions(+), 145 deletions(-)
 create mode 100644 migrations/Migration20241010185435.ts
 create mode 100644 server/api/audit-log/deleted.get.ts

diff --git a/components/XDataTable.vue b/components/XDataTable.vue
index b7074fc1..1556a718 100644
--- a/components/XDataTable.vue
+++ b/components/XDataTable.vue
@@ -12,11 +12,12 @@ export type FormFieldType = 'text' | 'textarea' | { type: 'number', min: number,
 
 const props = defineProps<{
     datasource: RowType[] | null,
+    entityName: string,
+    showRecycleBin: boolean,
     viewModel: { [K in keyof RowType]?: ViewFieldType },
     createModel: { [K in keyof RowType]?: FormFieldType },
     editModel: { [K in keyof RowType]?: FormFieldType },
     loading: boolean,
-    showHistory: boolean,
     organizationSlug: string,
     onCreate: (data: RowType) => Promise<void>,
     onDelete: (id: string) => Promise<void>,
@@ -43,7 +44,12 @@ const dataTable = ref<DataTable>(),
     historyDialogVisible = ref(false),
     historyItems = ref<{ date: string, entity: Record<string, any> }[]>([]),
     selectedHistoryItem = ref<{ date: string, entity: Record<string, any> }>({ date: '', entity: {} }),
-    historyDialogLoading = ref(false)
+    historyDialogLoading = ref(false),
+    recycleDialog = ref<Dialog>(),
+    recycleDialogVisible = ref(false),
+    recycleDialogLoading = ref(false),
+    recycleItems = ref<{ date: string, entity: Record<string, any> }[]>([]),
+    recycleBin = ref<DataTable>()
 
 const filters = ref<Record<string, { value: any, matchMode: string }>>({
     'global': { value: null, matchMode: FilterMatchMode.CONTAINS }
@@ -57,23 +63,41 @@ const openEditDialog = (item: RowType) => {
     editDialogItem.value = { ...item }
 }
 
+const openRecycleDialog = async () => {
+    recycleDialogLoading.value = true
+    recycleDialogVisible.value = true
+    const recycleBinItems = (await $fetch<AuditLog[]>(`/api/audit-log/deleted`, {
+        method: 'GET',
+        query: {
+            entityName: props.entityName,
+            organizationSlug: props.organizationSlug
+        }
+    })).map(log => ({
+        date: new Date(log.createdAt).toLocaleString(),
+        entity: JSON.parse(log.entity)
+    }))
+
+    recycleItems.value = recycleBinItems
+    recycleDialogLoading.value = false
+}
+
 const openHistoryDialog = async (item: RowType) => {
     historyDialogLoading.value = true
     historyDialogVisible.value = true
-    const auditLog = await $fetch<AuditLog[]>(`/api/audit-log`, {
+    const auditLog = (await $fetch<AuditLog[]>(`/api/audit-log`, {
         method: 'GET',
         query: {
             entityId: item.id,
             organizationSlug: props.organizationSlug
         }
-    })
+    })).map(log => ({
+        date: new Date(log.createdAt).toLocaleString(),
+        entity: JSON.parse(log.entity)
+    }))
 
     historyItems.value = [
         { date: 'Current', entity: item },
-        ...auditLog.map(log => ({
-            date: new Date(log.createdAt).toLocaleString(),
-            entity: JSON.parse(log.entity)
-        }))
+        ...auditLog
     ]
 
     selectedHistoryItem.value = historyItems.value[0]
@@ -155,7 +179,9 @@ const onEditDialogCancel = () => {
         <ConfirmDialog></ConfirmDialog>
         <Toolbar>
             <template #start>
-                <Button label="'Create" severity="info" @click="openCreateDialog" :disabled="createDisabled" />
+                <Button label="Create" severity="info" class="mr-2" @click="openCreateDialog"
+                    :disabled="createDisabled" />
+                <Button v-if="props.showRecycleBin" label="Recycle Bin" severity="help" @click="openRecycleDialog" />
             </template>
             <template #end>
                 <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
@@ -188,8 +214,7 @@ const onEditDialogCancel = () => {
             <Column frozen align-frozen="right">
                 <template #body="{ data }">
                     <Button icon="pi pi-pencil" text rounded @click="openEditDialog(data)" title="Edit" />
-                    <Button v-if="props.showHistory" icon="pi pi-clock" text rounded @click="openHistoryDialog(data)"
-                        title="History" />
+                    <Button icon="pi pi-clock" text rounded @click="openHistoryDialog(data)" title="History" />
                     <Button icon="pi pi-trash" text rounded severity="danger" @click="onDelete(data)" title="Delete" />
                 </template>
             </Column>
@@ -301,6 +326,30 @@ const onEditDialogCancel = () => {
         </template>
     </Dialog>
 
+    <Dialog ref="recycleDialog" v-model:visible="recycleDialogVisible" :modal="true" class="p-fluid">
+        <template #header>Recycle Bin</template>
+        <section>
+            <DataTable ref="recycleBin" :value="recycleItems" dataKey="date" :loading="recycleDialogLoading">
+                <Column field="date" header="Date" sortable />
+                <Column v-for="key of Object.keys(recycleItems?.[0]?.entity ?? {})" :key="key" :field="key"
+                    :header="camelCaseToTitle(key)">
+                    <template #body="{ data, field }">
+                        <span v-if="data.entity[field] instanceof Date">{{ data.entity[field].toLocaleString() }}</span>
+                        <span v-else-if="typeof data.entity[field] === 'object'">
+                            {{ data.entity[field]?.name ?? JSON.stringify(data.entity[field]) }}
+                        </span>
+                        <span v-else>{{ data.entity[field] }}</span>
+                    </template>
+                </Column>
+                <template #empty>The Recycle Bin is empty</template>
+                <template #loading>Loading data...</template>
+            </DataTable>
+        </section>
+        <template #footer>
+            <Button label="Close" icon="pi pi-times" class="p-button-text" @click="recycleDialogVisible = false" />
+        </template>
+    </Dialog>
+
     <Dialog ref="historyDialog" v-model:visible="historyDialogVisible" :modal="true" class="p-fluid">
         <template #header>
             <div class="flex flex-row gap-5 w-full">
diff --git a/migrations/.snapshot-cathedral.json b/migrations/.snapshot-cathedral.json
index 5e0a05c1..f7e7153e 100644
--- a/migrations/.snapshot-cathedral.json
+++ b/migrations/.snapshot-cathedral.json
@@ -83,6 +83,90 @@
       "foreignKeys": {},
       "nativeEnums": {}
     },
+    {
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "unsigned": false,
+          "autoincrement": false,
+          "primary": false,
+          "nullable": false,
+          "mappedType": "uuid"
+        },
+        "entity_id": {
+          "name": "entity_id",
+          "type": "uuid",
+          "unsigned": false,
+          "autoincrement": false,
+          "primary": false,
+          "nullable": false,
+          "mappedType": "uuid"
+        },
+        "entity_name": {
+          "name": "entity_name",
+          "type": "varchar(255)",
+          "unsigned": false,
+          "autoincrement": false,
+          "primary": false,
+          "nullable": false,
+          "length": 255,
+          "mappedType": "string"
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "unsigned": false,
+          "autoincrement": false,
+          "primary": false,
+          "nullable": false,
+          "enumItems": [
+            "create",
+            "update",
+            "delete",
+            "update_early",
+            "delete_early"
+          ],
+          "mappedType": "enum"
+        },
+        "entity": {
+          "name": "entity",
+          "type": "jsonb",
+          "unsigned": false,
+          "autoincrement": false,
+          "primary": false,
+          "nullable": true,
+          "mappedType": "json"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamptz",
+          "unsigned": false,
+          "autoincrement": false,
+          "primary": false,
+          "nullable": false,
+          "length": 6,
+          "mappedType": "datetime"
+        }
+      },
+      "name": "audit_log",
+      "schema": "public",
+      "indexes": [
+        {
+          "keyName": "audit_log_pkey",
+          "columnNames": [
+            "id"
+          ],
+          "composite": false,
+          "constraint": true,
+          "primary": true,
+          "unique": true
+        }
+      ],
+      "checks": [],
+      "foreignKeys": {},
+      "nativeEnums": {}
+    },
     {
       "columns": {
         "id": {
@@ -2872,102 +2956,6 @@
       },
       "nativeEnums": {}
     },
-    {
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "uuid",
-          "unsigned": false,
-          "autoincrement": false,
-          "primary": false,
-          "nullable": false,
-          "mappedType": "uuid"
-        },
-        "solution_id": {
-          "name": "solution_id",
-          "type": "uuid",
-          "unsigned": false,
-          "autoincrement": false,
-          "primary": false,
-          "nullable": false,
-          "mappedType": "uuid"
-        },
-        "entity_id": {
-          "name": "entity_id",
-          "type": "uuid",
-          "unsigned": false,
-          "autoincrement": false,
-          "primary": false,
-          "nullable": false,
-          "mappedType": "uuid"
-        },
-        "type": {
-          "name": "type",
-          "type": "text",
-          "unsigned": false,
-          "autoincrement": false,
-          "primary": false,
-          "nullable": false,
-          "enumItems": [
-            "create",
-            "update",
-            "delete",
-            "update_early",
-            "delete_early"
-          ],
-          "mappedType": "enum"
-        },
-        "entity": {
-          "name": "entity",
-          "type": "jsonb",
-          "unsigned": false,
-          "autoincrement": false,
-          "primary": false,
-          "nullable": true,
-          "mappedType": "json"
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamptz",
-          "unsigned": false,
-          "autoincrement": false,
-          "primary": false,
-          "nullable": false,
-          "length": 6,
-          "mappedType": "datetime"
-        }
-      },
-      "name": "audit_log",
-      "schema": "public",
-      "indexes": [
-        {
-          "keyName": "audit_log_pkey",
-          "columnNames": [
-            "id"
-          ],
-          "composite": false,
-          "constraint": true,
-          "primary": true,
-          "unique": true
-        }
-      ],
-      "checks": [],
-      "foreignKeys": {
-        "audit_log_solution_id_foreign": {
-          "constraintName": "audit_log_solution_id_foreign",
-          "columnNames": [
-            "solution_id"
-          ],
-          "localTableName": "public.audit_log",
-          "referencedColumnNames": [
-            "id"
-          ],
-          "referencedTableName": "public.solution",
-          "updateRule": "cascade"
-        }
-      },
-      "nativeEnums": {}
-    },
     {
       "columns": {
         "id": {
diff --git a/migrations/Migration20241010185435.ts b/migrations/Migration20241010185435.ts
new file mode 100644
index 00000000..e0963cc8
--- /dev/null
+++ b/migrations/Migration20241010185435.ts
@@ -0,0 +1,20 @@
+import { Migration } from '@mikro-orm/migrations';
+
+export class Migration20241010185435 extends Migration {
+
+  override async up(): Promise<void> {
+    this.addSql(`alter table "audit_log" drop constraint "audit_log_solution_id_foreign";`);
+
+    this.addSql(`alter table "audit_log" drop column "solution_id";`);
+
+    this.addSql(`alter table "audit_log" add column "entity_name" varchar(255) not null;`);
+  }
+
+  override async down(): Promise<void> {
+    this.addSql(`alter table "audit_log" drop column "entity_name";`);
+
+    this.addSql(`alter table "audit_log" add column "solution_id" uuid not null;`);
+    this.addSql(`alter table "audit_log" add constraint "audit_log_solution_id_foreign" foreign key ("solution_id") references "solution" ("id") on update cascade;`);
+  }
+
+}
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 7b613bc3..b7ff95d2 100644
--- a/pages/o/[organization-slug]/[solution-slug]/environment/assumptions.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/environment/assumptions.client.vue
@@ -75,7 +75,7 @@ const onUpdate = async (data: Assumption) => {
     </p>
     <XDataTable :viewModel="{ name: 'text', statement: 'text' }" :createModel="{ name: 'text', statement: 'text' }"
         :editModel="{ id: 'hidden', name: 'text', statement: 'text' }" :datasource="assumptions" :on-create="onCreate"
-        :on-delete="onDelete" :on-update="onUpdate" :loading="status === 'pending'" :show-history="true"
-        :organizationSlug="organizationslug">
+        :on-delete="onDelete" :on-update="onUpdate" :loading="status === 'pending'" :organizationSlug="organizationslug"
+        entityName="Assumption" :showRecycleBin="true">
     </XDataTable>
 </template>
\ No newline at end of file
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 5989c323..0d05c5fe 100644
--- a/pages/o/[organization-slug]/[solution-slug]/environment/components.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/environment/components.client.vue
@@ -69,6 +69,6 @@ const onUpdate = async (data: EnvironmentComponent) => {
     <XDataTable :viewModel="{ name: 'text', statement: 'text' }" :createModel="{ name: 'text', statement: 'text' }"
         :editModel="{ id: 'hidden', name: 'text', statement: 'text' }" :datasource="environmentComponents"
         :on-create="onCreate" :on-delete="onDelete" :on-update="onUpdate" :loading="status === 'pending'"
-        :show-history="true" :organizationSlug="organizationslug">
+        :organizationSlug="organizationslug" entityName="EnvironmentComponent" :showRecycleBin="true">
     </XDataTable>
 </template>
\ No newline at end of file
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 914520d7..37464f71 100644
--- a/pages/o/[organization-slug]/[solution-slug]/environment/constraints.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/environment/constraints.client.vue
@@ -75,6 +75,7 @@ const onUpdate = async (data: Constraint) => {
         :createModel="{ name: 'text', category: Object.values(ConstraintCategory), statement: 'text' }"
         :editModel="{ id: 'hidden', name: 'text', category: Object.values(ConstraintCategory), statement: 'text' }"
         :datasource="constraints" :on-create="onCreate" :on-delete="onDelete" :on-update="onUpdate"
-        :loading="status === 'pending'" :show-history="true" :organizationSlug="organizationslug">
+        :loading="status === 'pending'" :organizationSlug="organizationslug" entityName="Constraint"
+        :showRecycleBin="true">
     </XDataTable>
 </template>
\ No newline at end of file
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 aecc3889..244e313d 100644
--- a/pages/o/[organization-slug]/[solution-slug]/environment/effects.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/environment/effects.client.vue
@@ -70,7 +70,7 @@ const onDelete = async (id: string) => {
     </p>
     <XDataTable :viewModel="{ name: 'text', statement: 'text' }" :createModel="{ name: 'text', statement: 'text' }"
         :editModel="{ id: 'hidden', name: 'text', statement: 'text' }" :datasource="effects" :on-create="onCreate"
-        :on-delete="onDelete" :on-update="onUpdate" :loading="status === 'pending'" :show-history="true"
-        :organizationSlug="organizationslug">
+        :on-delete="onDelete" :on-update="onUpdate" :loading="status === 'pending'" :organizationSlug="organizationslug"
+        entityName="Effect" :showRecycleBin="true">
     </XDataTable>
 </template>
\ No newline at end of file
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 d81fb0e1..8c57e99a 100644
--- a/pages/o/[organization-slug]/[solution-slug]/environment/glossary.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/environment/glossary.client.vue
@@ -70,7 +70,7 @@ const onDelete = async (id: string) => {
     </p>
     <XDataTable :viewModel="{ name: 'text', statement: 'text' }" :createModel="{ name: 'text', statement: 'text' }"
         :editModel="{ id: 'hidden', name: 'text', statement: 'text' }" :datasource="glossaryTerms" :on-create="onCreate"
-        :on-delete="onDelete" :on-update="onUpdate" :loading="status === 'pending'" :show-history="true"
-        :organizationSlug="organizationslug">
+        :on-delete="onDelete" :on-update="onUpdate" :loading="status === 'pending'" :organizationSlug="organizationslug"
+        entityName="GlossaryTerm" :showRecycleBin="true">
     </XDataTable>
 </template>
\ No newline at end of file
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 950e3d7a..7472073d 100644
--- a/pages/o/[organization-slug]/[solution-slug]/environment/invariants.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/environment/invariants.client.vue
@@ -72,7 +72,7 @@ const onDelete = async (id: string) => {
 
     <XDataTable :viewModel="{ name: 'text', statement: 'text' }" :createModel="{ name: 'text', statement: 'text' }"
         :editModel="{ id: 'hidden', name: 'text', statement: 'text' }" :datasource="invariants" :on-create="onCreate"
-        :on-update="onUpdate" :on-delete="onDelete" :loading="status === 'pending'" :show-history="true"
-        :organizationSlug="organizationslug">
+        :on-update="onUpdate" :on-delete="onDelete" :loading="status === 'pending'" :organizationSlug="organizationslug"
+        entityName="Invariant" :showRecycleBin="true">
     </XDataTable>
 </template>
\ No newline at end of file
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 fade1150..29ba3c8b 100644
--- a/pages/o/[organization-slug]/[solution-slug]/goals/functionality.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/goals/functionality.client.vue
@@ -75,6 +75,6 @@ const onDelete = async (id: string) => {
     <XDataTable :viewModel="{ name: 'text', statement: 'text' }" :createModel="{ name: 'text', statement: 'text' }"
         :editModel="{ id: 'hidden', name: 'text', statement: 'text' }" :datasource="functionalBehaviors"
         :on-create="onCreate" :on-update="onUpdate" :on-delete="onDelete" :loading="status === 'pending'"
-        :show-history="true" :organizationSlug="organizationslug">
+        :organizationSlug="organizationslug" entityName="FunctionalBehavior" :showRecycleBin="true">
     </XDataTable>
 </template>
\ No newline at end of file
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 e437091c..3a5bfff9 100644
--- a/pages/o/[organization-slug]/[solution-slug]/goals/limitations.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/goals/limitations.client.vue
@@ -71,7 +71,7 @@ const onDelete = async (id: string) => {
 
     <XDataTable :viewModel="{ name: 'text', statement: 'text' }" :createModel="{ name: 'text', statement: 'text' }"
         :editModel="{ id: 'hidden', name: 'text', statement: 'text' }" :datasource="limits" :on-create="onCreate"
-        :on-update="onUpdate" :on-delete="onDelete" :loading="status === 'pending'" :show-history="true"
-        :organizationSlug="organizationslug">
+        :on-update="onUpdate" :on-delete="onDelete" :loading="status === 'pending'" :organizationSlug="organizationslug"
+        entityName="Limit" :showRecycleBin="true">
     </XDataTable>
 </template>
\ No newline at end of file
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 085bf4a5..0f6f1d27 100644
--- a/pages/o/[organization-slug]/[solution-slug]/goals/obstacles.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/goals/obstacles.client.vue
@@ -68,7 +68,7 @@ const onDelete = async (id: string) => {
 
     <XDataTable :viewModel="{ name: 'text', statement: 'text' }" :createModel="{ name: 'text', statement: 'text' }"
         :editModel="{ id: 'hidden', name: 'text', statement: 'text' }" :datasource="obstacles" :on-create="onCreate"
-        :on-update="onUpdate" :on-delete="onDelete" :loading="status === 'pending'" :show-history="true"
-        :organizationSlug="organizationslug">
+        :on-update="onUpdate" :on-delete="onDelete" :loading="status === 'pending'" :organizationSlug="organizationslug"
+        entityName="Obstacle" :showRecycleBin="true">
     </XDataTable>
 </template>
\ No newline at end of file
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 db478df6..9d16139c 100644
--- a/pages/o/[organization-slug]/[solution-slug]/goals/outcomes.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/goals/outcomes.client.vue
@@ -72,7 +72,7 @@ const onDelete = async (id: string) => {
 
     <XDataTable :viewModel="{ name: 'text', statement: 'text' }" :createModel="{ name: 'text', statement: 'text' }"
         :editModel="{ id: 'hidden', name: 'text', statement: 'text' }" :datasource="outcomes" :onCreate="onCreate"
-        :onUpdate="onUpdate" :onDelete="onDelete" :loading="status === 'pending'" :show-history="true"
-        :organizationSlug="organizationslug">
+        :onUpdate="onUpdate" :onDelete="onDelete" :loading="status === 'pending'" :organizationSlug="organizationslug"
+        entityName="Outcome" :showRecycleBin="true">
     </XDataTable>
 </template>
\ No newline at end of file
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 f534ee24..462eef87 100644
--- a/pages/o/[organization-slug]/[solution-slug]/goals/scenarios.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/goals/scenarios.client.vue
@@ -119,7 +119,7 @@ const onUserStoryDelete = async (id: string) => {
         functionalBehavior: { type: 'requirement', options: functionalBehaviors ?? [] },
         outcome: { type: 'requirement', options: outcomes ?? [] }
     }" :datasource="userStories" :onCreate="onUserStoryCreate" :onUpdate="onUserStoryUpdate"
-        :onDelete="onUserStoryDelete" :loading="status === 'pending'" :show-history="true"
-        :organizationSlug="organizationslug">
+        :onDelete="onUserStoryDelete" :loading="status === 'pending'" :organizationSlug="organizationslug"
+        entityName="UserStory" :showRecycleBin="true">
     </XDataTable>
 </template>
\ No newline at end of file
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 bf17aae2..158b0342 100644
--- a/pages/o/[organization-slug]/[solution-slug]/goals/stakeholders.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/goals/stakeholders.client.vue
@@ -139,7 +139,8 @@ const onDelete = async (id: string) => {
                 category: Object.values(StakeholderCategory),
                 segmentation: Object.values(StakeholderSegmentation)
             }" :datasource="stakeholders" :on-create="onCreate" :on-update="onUpdate" :on-delete="onDelete"
-                :loading="status === 'pending'" :show-history="true" :organizationSlug="organizationslug">
+                :loading="status === 'pending'" :organizationSlug="organizationslug" entityName="Stakeholder"
+                :showRecycleBin="true">
             </XDataTable>
         </TabPanel>
         <TabPanel header="Stakeholder Map">
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 3d5bdbde..03c3cd6a 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
@@ -72,7 +72,7 @@ const onDelete = async (id: string) => {
 
     <XDataTable :viewModel="{ name: 'text', email: 'text' }" :createModel="{ name: 'text', email: 'text' }"
         :editModel="{ id: 'hidden', name: 'text', email: 'text' }" :datasource="personnel" :on-create="onCreate"
-        :on-update="onUpdate" :on-delete="onDelete" :loading="status === 'pending'" :show-history="true"
-        :organizationSlug="organizationslug">
+        :on-update="onUpdate" :on-delete="onDelete" :loading="status === 'pending'" :organizationSlug="organizationslug"
+        entityName="Person" :showRecycleBin="true">
     </XDataTable>
 </template>
\ No newline at end of file
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 1cb2efc3..5f7ae1f2 100644
--- a/pages/o/[organization-slug]/[solution-slug]/system/components.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/system/components.client.vue
@@ -83,6 +83,7 @@ const onDelete = async (id: string) => {
         statement: 'text',
         parentComponent: { type: 'requirement', options: systemComponents ?? [] }
     }" :datasource="systemComponents" :onCreate="onCreate" :onUpdate="onUpdate" :onDelete="onDelete"
-        :loading="status === 'pending'" :show-history="true" :organizationSlug="organizationslug">
+        :loading="status === 'pending'" :organizationSlug="organizationslug" entityName="SystemComponent"
+        :showRecycleBin="true">
     </XDataTable>
 </template>
\ No newline at end of file
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 8d3949c1..464a5706 100644
--- a/pages/o/[organization-slug]/[solution-slug]/system/functionality.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/system/functionality.client.vue
@@ -105,7 +105,7 @@ const componentSortField = ref<string | undefined>('name')
     <pre> { This section is disabled temporarily. } </pre>
     <!--
     <XDataTable :datasource="components" :sortField="componentSortField" :sortOrder="1"
-        v-model:expandedRows="expandedRows" :show-history="true" :organizationId="organization.id">
+        v-model:expandedRows="expandedRows" :organizationId="organization.id">
         <template #rows>
             <Column expander />
             <Column field="name" header="Name" sortable>
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 9d9d3b75..5221e515 100644
--- a/pages/o/[organization-slug]/[solution-slug]/system/scenarios.client.vue
+++ b/pages/o/[organization-slug]/[solution-slug]/system/scenarios.client.vue
@@ -188,8 +188,8 @@ const onUseCaseDelete = async (id: string) => {
                 outcome: { type: 'requirement', options: outcomes ?? [] },
                 priority: Object.values(MoscowPriority)
             }" :datasource="userStories" :onCreate="onUserStoryCreate" :onUpdate="onUserStoryUpdate"
-                :onDelete="onUserStoryDelete" :loading="userStoryStatus === 'pending'" :show-history="true"
-                :organizationSlug="organizationslug">
+                :onDelete="onUserStoryDelete" :loading="userStoryStatus === 'pending'"
+                :organizationSlug="organizationslug" entityName="UserStory" :showRecycleBin="true">
             </XDataTable>
         </TabPanel>
         <TabPanel header="Use Cases">
@@ -235,8 +235,8 @@ const onUseCaseDelete = async (id: string) => {
                 successGuarantee: { type: 'requirement', options: effects ?? [] },
                 extensions: 'text'
             }" :datasource="useCases!" :onCreate="onUseCaseCreate" :onUpdate="onUseCaseUpdate"
-                :onDelete="onUseCaseDelete" :loading="useCaseStatus === 'pending'" :show-history="true"
-                :organizationSlug="organizationslug">
+                :onDelete="onUseCaseDelete" :loading="useCaseStatus === 'pending'" :organizationSlug="organizationslug"
+                entityName="UseCase" :showRecycleBin="true">
             </XDataTable>
         </TabPanel>
     </TabView>
diff --git a/pages/o/[organization-slug]/users.vue b/pages/o/[organization-slug]/users.vue
index 208a151e..022c369b 100644
--- a/pages/o/[organization-slug]/users.vue
+++ b/pages/o/[organization-slug]/users.vue
@@ -95,6 +95,7 @@ const onUpdate = async (data: AppUser) => {
         role: Object.values(AppRole),
         isSystemAdmin: 'boolean'
     }" :datasource="users" :on-create="onCreate" :on-delete="onDelete" :on-update="onUpdate"
-        :loading="status === 'pending'" :show-history="true" :organizationSlug="organizationslug">
+        :loading="status === 'pending'" :organizationSlug="organizationslug" entityName="AppUser"
+        :showRecycleBin="false">
     </XDataTable>
 </template>
\ No newline at end of file
diff --git a/server/api/audit-log/deleted.get.ts b/server/api/audit-log/deleted.get.ts
new file mode 100644
index 00000000..4e736cbc
--- /dev/null
+++ b/server/api/audit-log/deleted.get.ts
@@ -0,0 +1,65 @@
+import { ChangeSetType, QueryOrder } from "@mikro-orm/core"
+import { QueryBuilder } from "@mikro-orm/postgresql"
+import { z } from "zod"
+import { fork } from "~/server/data/orm.js"
+import { AuditLog, Organization } from "~/server/domain"
+
+const querySchema = z.object({
+    entityName: z.string(),
+    organizationSlug: z.string()
+})
+
+/**
+ * Returns from the audit history all the deleted entities
+ * ordered by the date and time when they were deleted in descending order.
+ */
+export default defineEventHandler(async (event) => {
+    const { entityName, organizationSlug } = await validateEventQuery(event, querySchema),
+        em = fork()
+
+    const organization = await em.findOne(Organization, { slug: organizationSlug })
+
+    if (!organization)
+        throw createError({
+            statusCode: 404,
+            statusMessage: `Organization not found with the given slug: ${organizationSlug}`
+        })
+
+    await assertOrgReader(event, organization.id)
+
+    type RowType = {
+        id: string,
+        type: ChangeSetType,
+        created_at: string,
+        entity_id: string,
+        entity_name: string,
+        entity: string
+    }
+
+    const conn = em.getConnection(),
+        res: RowType[] = await conn.execute(`
+            SELECT d.id, d.type, d.created_at, a.entity_id, a.entity_name, a.entity
+            FROM audit_log AS d
+            JOIN audit_log AS a
+                ON a.entity_id = d.entity_id
+                AND a.created_at = (
+                    SELECT MAX(a2.created_at)
+                    FROM audit_log AS a2
+                    WHERE a2.entity_id = d.entity_id
+                    AND a2.type IN ('create', 'update')
+                    AND a2.created_at < d.created_at
+                )
+            WHERE d.type = 'delete'
+            AND a.entity_name = ?;
+    `, [entityName]),
+        auditLogs = res.map((row) => ({
+            id: row.id,
+            createdAt: new Date(row.created_at),
+            type: row.type,
+            entityId: row.entity_id,
+            entityName: row.entity_name,
+            entity: row.entity
+        }))
+
+    return auditLogs
+})
\ No newline at end of file
diff --git a/server/data/subscribers/AuditSubscriber.ts b/server/data/subscribers/AuditSubscriber.ts
index 76c2d926..644ae940 100644
--- a/server/data/subscribers/AuditSubscriber.ts
+++ b/server/data/subscribers/AuditSubscriber.ts
@@ -1,4 +1,4 @@
-import { type EventSubscriber, type FlushEventArgs } from "@mikro-orm/core";
+import { ChangeSetType, type EventArgs, type EventSubscriber, type FlushEventArgs } from "@mikro-orm/core";
 import { AuditLog } from "../../domain/AuditLog.js";
 
 /**
@@ -17,7 +17,7 @@ export default class AuditSubscriber implements EventSubscriber {
                     const auditLog = new AuditLog({
                         type: changeSet.type,
                         entityId: changeSet.entity.id,
-                        solution: changeSet.entity.solution,
+                        entityName: changeSet.name,
                         entity: JSON.stringify(changeSet.entity)
                     });
 
diff --git a/server/domain/AuditLog.ts b/server/domain/AuditLog.ts
index 4e94ce1e..b1413368 100644
--- a/server/domain/AuditLog.ts
+++ b/server/domain/AuditLog.ts
@@ -11,7 +11,7 @@ export class AuditLog {
         this.type = props.type;
         this.entity = props.entity;
         this.entityId = props.entityId;
-        this.solution = props.solution;
+        this.entityName = props.entityName;
     }
 
     /**
@@ -20,18 +20,18 @@ export class AuditLog {
     @Property({ type: 'uuid', primary: true })
     id: string = uuidv7();
 
-    /**
-     * The solution that owns this AuditLog
-     */
-    @ManyToOne({ entity: () => Solution, nullable: false })
-    solution: Solution;
-
     /**
      * The unique identifier of the entity that was changed
      */
     @Property({ type: 'uuid' })
     entityId: string
 
+    /**
+     * The name of the entity that was changed
+     */
+    @Property({ type: 'string' })
+    entityName: string
+
     /**
      * The type of change that was made
      */