From 4d177a38effb8d9e227539aa8919e5d98a1a260a Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <90701924+Mohamed-Hacene@users.noreply.github.com>
Date: Thu, 12 Dec 2024 22:30:21 +0100
Subject: [PATCH] Ca 701 workshop 1 ux (#1170)

---
 backend/core/serializers.py                   |   8 +
 frontend/messages/en.json                     |   8 +
 .../src/lib/components/Forms/ModelForm.svelte |   5 +-
 .../Forms/ModelForm/AssetForm.svelte          |  12 +
 .../Forms/ModelForm/EbiosRmForm.svelte        |  84 +++++--
 .../Forms/ModelForm/FearedEventForm.svelte    |   2 +
 .../Forms/ModelForm/RoToForm.svelte           |   1 -
 .../lib/components/Modals/CreateModal.svelte  |   2 +
 .../lib/components/Modals/UpdateModal.svelte  |  67 ++++++
 .../components/ModelTable/ModelTable.svelte   |   9 +-
 frontend/src/lib/utils/crud.ts                |  11 +-
 frontend/src/lib/utils/load.ts                |   2 +-
 frontend/src/lib/utils/schemas.ts             |   6 +-
 .../[id=uuid]/edit/+layout.server.ts          |   5 +-
 .../(app)/(internal)/ebios-rm/+page.svelte    |   3 +-
 .../ebios-rm/[id=uuid]/+page.svelte           |   4 +-
 .../workshop-one/baseline/+page.server.ts     |  30 ++-
 .../workshop-one/baseline/+page.svelte        |  51 +++++
 .../ebios-rm-study/+page.server.ts            |  71 ++----
 .../workshop-one/ebios-rm-study/+page.svelte  | 211 +++++++++++++++++-
 .../ebios-rm-study/edit/+page.server.ts       |  65 ++++++
 .../ebios-rm-study/edit/+page.svelte          |  17 ++
 .../feared-events/+page.server.ts             |   6 +-
 23 files changed, 582 insertions(+), 98 deletions(-)
 create mode 100644 frontend/src/lib/components/Modals/UpdateModal.svelte
 create mode 100644 frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/ebios-rm-study/edit/+page.server.ts
 create mode 100644 frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/ebios-rm-study/edit/+page.svelte

diff --git a/backend/core/serializers.py b/backend/core/serializers.py
index 3fd17dcb7..43332b224 100644
--- a/backend/core/serializers.py
+++ b/backend/core/serializers.py
@@ -216,6 +216,14 @@ class Meta:
 
 
 class AssetWriteSerializer(BaseModelSerializer):
+    ebios_rm_studies = serializers.PrimaryKeyRelatedField(
+        many=True,
+        queryset=EbiosRMStudy.objects.all(),
+        required=False,
+        allow_null=True,
+        write_only=True,
+    )
+
     class Meta:
         model = Asset
         fields = "__all__"
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index 50fd4a9b8..e32bcdeea 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -980,5 +980,13 @@
 	"attackPaths": "Attack paths",
 	"currentCriticality": "Current criticality",
 	"residualCriticality": "Residual criticality",
+	"ebiosRm": "Ebios RM",
+	"workshopOne": "Workshop 1",
+	"refIdSemiColon": "Refence ID:",
+	"addFearedEvent": "Add feared event",
+	"addEbiosRMstudy": "Add Ebios RM Study",
+	"noAuthor": "No author assigned",
+	"noReviewer": "No reviewer assigned",
+	"selectAudit": "Select audit",
 	"errorAssetGraphMustNotContainCycles": "The asset graph must not contain cycles."
 }
diff --git a/frontend/src/lib/components/Forms/ModelForm.svelte b/frontend/src/lib/components/Forms/ModelForm.svelte
index c4b150cde..e30978a25 100644
--- a/frontend/src/lib/components/Forms/ModelForm.svelte
+++ b/frontend/src/lib/components/Forms/ModelForm.svelte
@@ -58,6 +58,7 @@
 	export let suggestions: { [key: string]: any } = {};
 	export let cancelButton = true;
 	export let duplicate = false;
+	export let customNameDescription = false;
 
 	const URLModel = model.urlModel as urlModel;
 	export let schema = modelSchema(URLModel);
@@ -163,7 +164,7 @@
 			}}
 		/>
 	{/if}
-	{#if shape.name}
+	{#if shape.name && !customNameDescription}
 		<TextField
 			{form}
 			field="name"
@@ -173,7 +174,7 @@
 			data-focusindex="0"
 		/>
 	{/if}
-	{#if shape.description}
+	{#if shape.description && !customNameDescription}
 		<TextArea
 			{form}
 			field="description"
diff --git a/frontend/src/lib/components/Forms/ModelForm/AssetForm.svelte b/frontend/src/lib/components/Forms/ModelForm/AssetForm.svelte
index 6f3ad3e8e..4e924356b 100644
--- a/frontend/src/lib/components/Forms/ModelForm/AssetForm.svelte
+++ b/frontend/src/lib/components/Forms/ModelForm/AssetForm.svelte
@@ -187,3 +187,15 @@
 	label={m.labels()}
 	allowUserOptions="append"
 />
+{#if initialData.ebios_rm_studies}
+	<AutocompleteSelect
+		{form}
+		field="ebios_rm_studies"
+		multiple
+		cacheLock={cacheLocks['ebios_rm_studies']}
+		bind:cachedValue={formDataCache['ebios_rm_studies']}
+		label={m.ebiosRmStudies()}
+		options={getOptions({ objects: model.foreignKeys['ebios_rm_studies'] })}
+		hidden
+	/>
+{/if}
diff --git a/frontend/src/lib/components/Forms/ModelForm/EbiosRmForm.svelte b/frontend/src/lib/components/Forms/ModelForm/EbiosRmForm.svelte
index 9a96e0eb8..d85c44fc0 100644
--- a/frontend/src/lib/components/Forms/ModelForm/EbiosRmForm.svelte
+++ b/frontend/src/lib/components/Forms/ModelForm/EbiosRmForm.svelte
@@ -3,10 +3,10 @@
 	import type { ModelInfo, CacheLock } from '$lib/utils/types';
 	import TextField from '$lib/components/Forms/TextField.svelte';
 	import AutocompleteSelect from '$lib/components/Forms/AutocompleteSelect.svelte';
-	import Select from '$lib/components/Forms/Select.svelte';
 	import * as m from '$paraglide/messages.js';
 	import { getOptions } from '$lib/utils/crud';
 	import TextArea from '../TextArea.svelte';
+	import { page } from '$app/stores';
 
 	export let form: SuperValidated<any>;
 	export let model: ModelInfo;
@@ -14,9 +14,29 @@
 	export let formDataCache: Record<string, any> = {};
 	export let initialData: Record<string, any> = {};
 	export let context: string;
+
+	let activeActivity: string | null = null;
+
+	$page.url.searchParams.forEach((value, key) => {
+		if (key === 'activity' && value === 'one') {
+			activeActivity = 'one';
+		} else if (key === 'activity' && value === 'two') {
+			activeActivity = 'two';
+		}
+	});
 </script>
 
-{#if context !== 'ebiosRmStudy'}
+{#if context != 'selectAudit'}
+	<TextField
+		{form}
+		field="name"
+		label={m.name()}
+		cacheLock={cacheLocks['name']}
+		bind:cachedValue={formDataCache['name']}
+		data-focusindex="0"
+	/>
+{/if}
+{#if context !== 'ebiosRmStudy' && context !== 'selectAudit'}
 	<TextField
 		{form}
 		field="version"
@@ -50,8 +70,26 @@
 		helpText={m.ebiosRmMatrixHelpText()}
 	/>
 {:else if context === 'ebiosRmStudy'}
-	<div class="relative p-2 space-y-2 border rounded-md">
-		<p class="absolute -top-3 bg-white font-bold">{m.activityOne()}</p>
+	<div
+		class="relative p-2 space-y-2 rounded-md {activeActivity === 'one'
+			? 'border-2 border-primary-500'
+			: 'border-2 border-gray-300 border-dashed'}"
+	>
+		<p
+			class="absolute -top-3 bg-white font-bold {activeActivity === 'one'
+				? 'text-primary-500'
+				: 'text-gray-500'}"
+		>
+			{m.activityOne()}
+		</p>
+		<TextArea
+			{form}
+			field="description"
+			label={m.description()}
+			cacheLock={cacheLocks['description']}
+			bind:cachedValue={formDataCache['description']}
+			data-focusindex="1"
+		/>
 		<TextField
 			{form}
 			field="version"
@@ -66,13 +104,6 @@
 			cacheLock={cacheLocks['ref_id']}
 			bind:cachedValue={formDataCache['ref_id']}
 		/>
-		<TextArea
-			{form}
-			field="observation"
-			label={m.observation()}
-			cacheLock={cacheLocks['observation']}
-			bind:cachedValue={formDataCache['observation']}
-		/>
 		<AutocompleteSelect
 			multiple
 			{form}
@@ -92,8 +123,18 @@
 			label={m.reviewers()}
 		/>
 	</div>
-	<div class="relative p-2 space-y-2 border rounded-md">
-		<p class="absolute -top-3 bg-white font-bold">{m.activityTwo()}</p>
+	<div
+		class="relative p-2 space-y-2 rounded-md {activeActivity === 'two'
+			? 'border-2 border-primary-500'
+			: 'border-2 border-gray-300 border-dashed'}"
+	>
+		<p
+			class="absolute -top-3 bg-white font-bold {activeActivity === 'two'
+				? 'text-primary-500'
+				: 'text-gray-500'}"
+		>
+			{m.activityTwo()}
+		</p>
 		<AutocompleteSelect
 			multiple
 			{form}
@@ -106,4 +147,21 @@
 			label={m.assets()}
 		/>
 	</div>
+	<TextArea
+		{form}
+		field="observation"
+		label={m.observation()}
+		cacheLock={cacheLocks['observation']}
+		bind:cachedValue={formDataCache['observation']}
+	/>
+{:else}
+	<AutocompleteSelect
+		multiple
+		{form}
+		options={getOptions({ objects: model.foreignKeys['compliance_assessments'] })}
+		field="compliance_assessments"
+		cacheLock={cacheLocks['compliance_assessments']}
+		bind:cachedValue={formDataCache['compliance_assessments']}
+		label={m.complianceAssessment()}
+	/>
 {/if}
diff --git a/frontend/src/lib/components/Forms/ModelForm/FearedEventForm.svelte b/frontend/src/lib/components/Forms/ModelForm/FearedEventForm.svelte
index d979b3524..8a077d8db 100644
--- a/frontend/src/lib/components/Forms/ModelForm/FearedEventForm.svelte
+++ b/frontend/src/lib/components/Forms/ModelForm/FearedEventForm.svelte
@@ -7,6 +7,7 @@
 	import * as m from '$paraglide/messages.js';
 	import { getOptions } from '$lib/utils/crud';
 	import TextArea from '../TextArea.svelte';
+	import Checkbox from '$lib/components/Forms/Checkbox.svelte';
 
 	export let form: SuperValidated<any>;
 	export let model: ModelInfo;
@@ -66,3 +67,4 @@
 	field="qualifications"
 	label={m.qualifications()}
 />
+<Checkbox {form} field="is_selected" label={m.isSelected()} />
diff --git a/frontend/src/lib/components/Forms/ModelForm/RoToForm.svelte b/frontend/src/lib/components/Forms/ModelForm/RoToForm.svelte
index 683e6accd..eee24fba6 100644
--- a/frontend/src/lib/components/Forms/ModelForm/RoToForm.svelte
+++ b/frontend/src/lib/components/Forms/ModelForm/RoToForm.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { SuperValidated } from 'sveltekit-superforms';
 	import type { ModelInfo, CacheLock } from '$lib/utils/types';
-	import TextField from '$lib/components/Forms/TextField.svelte';
 	import Checkbox from '$lib/components/Forms/Checkbox.svelte';
 	import AutocompleteSelect from '$lib/components/Forms/AutocompleteSelect.svelte';
 	import Select from '$lib/components/Forms/Select.svelte';
diff --git a/frontend/src/lib/components/Modals/CreateModal.svelte b/frontend/src/lib/components/Modals/CreateModal.svelte
index 57b8faa11..82772a30e 100644
--- a/frontend/src/lib/components/Modals/CreateModal.svelte
+++ b/frontend/src/lib/components/Modals/CreateModal.svelte
@@ -11,6 +11,7 @@
 	const modalStore: ModalStore = getModalStore();
 
 	export let form: SuperValidated<AnyZodObject>;
+	export let customNameDescription = false;
 	export let model: ModelInfo;
 	export let duplicate = false;
 	export let invalidateAll = true; // set to false to keep form data using muliple forms on a page
@@ -47,6 +48,7 @@
 		</div>
 		<ModelForm
 			{form}
+			{customNameDescription}
 			{suggestions}
 			{parent}
 			{invalidateAll}
diff --git a/frontend/src/lib/components/Modals/UpdateModal.svelte b/frontend/src/lib/components/Modals/UpdateModal.svelte
new file mode 100644
index 000000000..596a2745d
--- /dev/null
+++ b/frontend/src/lib/components/Modals/UpdateModal.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+	// Props
+	/** Exposes parent props to this component. */
+	export let parent: any;
+
+	// Stores
+	import type { ModelInfo } from '$lib/utils/types';
+	import type { ModalStore } from '@skeletonlabs/skeleton';
+	import { getModalStore } from '@skeletonlabs/skeleton';
+
+	const modalStore: ModalStore = getModalStore();
+
+	export let form: SuperValidated<AnyZodObject>;
+	export let model: ModelInfo;
+	export let invalidateAll = true; // set to false to keep form data using muliple forms on a page
+	export let formAction = '?/update';
+	export let context = 'default';
+	export let object: Record<string, any> = {};
+	let closeModal = true;
+	export let suggestions: { [key: string]: any } = {};
+	export let selectOptions: Record<string, any> = {};
+	export let foreignKeys: Record<string, any> = {};
+
+	// Base Classes
+	const cBase = 'card p-4 w-modal shadow-xl space-y-4';
+	const cHeader = 'text-2xl font-bold';
+	export let debug = false;
+
+	import ModelForm from '$lib/components/Forms/ModelForm.svelte';
+	import type { SuperValidated } from 'sveltekit-superforms';
+	import type { AnyZodObject } from 'zod';
+</script>
+
+{#if $modalStore[0]}
+	<div class="modal-example-form {cBase}">
+		<div class="flex items-center justify-between">
+			<header class={cHeader} data-testid="modal-title">
+				{$modalStore[0].title ?? '(title missing)'}
+			</header>
+			<div
+				role="button"
+				tabindex="0"
+				class="flex items-center hover:text-primary-500 cursor-pointer"
+				on:click={parent.onClose}
+				on:keydown={parent.onClose}
+			>
+				<i class="fa-solid fa-xmark" />
+			</div>
+		</div>
+		<ModelForm
+			customNameDescription
+			{form}
+			{object}
+			{suggestions}
+			{parent}
+			action={formAction}
+			{invalidateAll}
+			{model}
+			{closeModal}
+			{context}
+			caching={true}
+			{selectOptions}
+			{foreignKeys}
+			{debug}
+		/>
+	</div>
+{/if}
diff --git a/frontend/src/lib/components/ModelTable/ModelTable.svelte b/frontend/src/lib/components/ModelTable/ModelTable.svelte
index bf9ecab79..6cd242326 100644
--- a/frontend/src/lib/components/ModelTable/ModelTable.svelte
+++ b/frontend/src/lib/components/ModelTable/ModelTable.svelte
@@ -259,9 +259,12 @@
 		{#if pagination && rowsPerPage}
 			<RowsPerPage {handler} />
 		{/if}
-		{#if canCreateObject}
-			<slot name="addButton" />
-		{/if}
+		<div class="flex space-x-2 items-center">
+			<slot name="optButton" />
+			{#if canCreateObject}
+				<slot name="addButton" />
+			{/if}
+		</div>
 	</header>
 	<!-- Table -->
 	<table
diff --git a/frontend/src/lib/utils/crud.ts b/frontend/src/lib/utils/crud.ts
index 24e7cba8f..6bbdd4862 100644
--- a/frontend/src/lib/utils/crud.ts
+++ b/frontend/src/lib/utils/crud.ts
@@ -385,7 +385,8 @@ export const URL_MODEL_MAP: ModelMap = {
 			{ field: 'parent_assets', urlModel: 'assets' },
 			{ field: 'owner', urlModel: 'users' },
 			{ field: 'folder', urlModel: 'folders', urlParams: 'content_type=DO&content_type=GL' },
-			{ field: 'filtering_labels', urlModel: 'filtering-labels' }
+			{ field: 'filtering_labels', urlModel: 'filtering-labels' },
+			{ field: 'ebios_rm_studies', urlModel: 'ebios-rm', endpointUrl: 'ebios-rm/studies' }
 		],
 		selectFields: [{ field: 'type' }],
 		filters: [
@@ -609,8 +610,10 @@ export const URL_MODEL_MAP: ModelMap = {
 			{ field: 'assets', urlModel: 'assets' },
 			{ field: 'authors', urlModel: 'users', urlParams: 'is_third_party=false' },
 			{ field: 'reviewers', urlModel: 'users', urlParams: 'is_third_party=false' },
-			{ field: 'folder', urlModel: 'folders', urlParams: 'content_type=DO' }
-		]
+			{ field: 'folder', urlModel: 'folders', urlParams: 'content_type=DO' },
+			{ field: 'compliance_assessments', urlModel: 'compliance-assessments' }
+		],
+		reverseForeignKeyFields: [{ field: 'ebios_rm_studies', urlModel: 'assets' }]
 	},
 	'feared-events': {
 		endpointUrl: 'ebios-rm/feared-events',
@@ -621,7 +624,7 @@ export const URL_MODEL_MAP: ModelMap = {
 		verboseNamePlural: 'Feared events',
 		foreignKeyFields: [
 			{ field: 'ebios_rm_study', urlModel: 'ebios-rm', endpointUrl: 'ebios-rm/studies' },
-			{ field: 'assets', urlModel: 'assets' },
+			{ field: 'assets', urlModel: 'assets', urlParams: 'ebios_rm_studies=' },
 			{ field: 'qualifications', urlModel: 'qualifications' }
 		],
 		selectFields: [{ field: 'gravity', valueType: 'number', detail: true }]
diff --git a/frontend/src/lib/utils/load.ts b/frontend/src/lib/utils/load.ts
index b4a42ec11..bc4b2838d 100644
--- a/frontend/src/lib/utils/load.ts
+++ b/frontend/src/lib/utils/load.ts
@@ -88,7 +88,7 @@ export const loadDetail = async ({ event, model, id }) => {
 				if (info.foreignKeyFields) {
 					for (const keyField of info.foreignKeyFields) {
 						const queryParams = keyField.urlParams ? `?${keyField.urlParams}` : '';
-						const url = `${BASE_API_URL}/${keyField.urlModel}/${queryParams}`;
+						const url = `${BASE_API_URL}/${keyField.endpointUrl || keyField.urlModel}/${queryParams}`;
 						const response = await event.fetch(url);
 						if (response.ok) {
 							foreignKeys[keyField.field] = await response.json().then((data) => data.results);
diff --git a/frontend/src/lib/utils/schemas.ts b/frontend/src/lib/utils/schemas.ts
index c3aab8653..c26536b1e 100644
--- a/frontend/src/lib/utils/schemas.ts
+++ b/frontend/src/lib/utils/schemas.ts
@@ -207,7 +207,8 @@ export const AssetSchema = z.object({
 		.optional(),
 	reference_link: z.string().url().optional().or(z.literal('')),
 	owner: z.string().uuid().optional().array().optional(),
-	filtering_labels: z.string().optional().array().optional()
+	filtering_labels: z.string().optional().array().optional(),
+	ebios_rm_studies: z.string().uuid().optional().array().optional()
 });
 
 export const FilteringLabelSchema = z.object({
@@ -400,7 +401,8 @@ export const ebiosRMSchema = z.object({
 	reviewers: z.array(z.string().optional()).optional(),
 	observation: z.string().optional().nullable(),
 	assets: z.string().uuid().optional().array().optional(),
-	folder: z.string()
+	folder: z.string(),
+	compliance_assessments: z.string().uuid().optional().array().optional()
 });
 
 export const fearedEventsSchema = z.object({
diff --git a/frontend/src/routes/(app)/(internal)/[model=urlmodel]/[id=uuid]/edit/+layout.server.ts b/frontend/src/routes/(app)/(internal)/[model=urlmodel]/[id=uuid]/edit/+layout.server.ts
index 918df2f18..10341dc6a 100644
--- a/frontend/src/routes/(app)/(internal)/[model=urlmodel]/[id=uuid]/edit/+layout.server.ts
+++ b/frontend/src/routes/(app)/(internal)/[model=urlmodel]/[id=uuid]/edit/+layout.server.ts
@@ -49,9 +49,12 @@ export const load: LayoutServerLoad = async (event) => {
 		for (const keyField of foreignKeyFields) {
 			const queryParams = keyField.urlParams ? `?${keyField.urlParams}` : '';
 			const keyModel = getModelInfo(keyField.urlModel);
-			const url = keyModel.endpointUrl
+			let url = keyModel.endpointUrl
 				? `${BASE_API_URL}/${keyModel.endpointUrl}/${queryParams}`
 				: `${BASE_API_URL}/${keyModel.urlModel}/${queryParams}`;
+			if (keyModel.urlModel === 'assets' && event.params.model === 'feared-events') {
+				url = `${BASE_API_URL}/${keyModel.urlModel}/${queryParams}${object.ebios_rm_study}`;
+			}
 			const response = await event.fetch(url);
 			if (response.ok) {
 				foreignKeys[keyField.field] = await response.json().then((data) => data.results);
diff --git a/frontend/src/routes/(app)/(internal)/ebios-rm/+page.svelte b/frontend/src/routes/(app)/(internal)/ebios-rm/+page.svelte
index 4d1ae36d4..5d1c1a5ca 100644
--- a/frontend/src/routes/(app)/(internal)/ebios-rm/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/ebios-rm/+page.svelte
@@ -19,7 +19,8 @@
 			ref: CreateModal,
 			props: {
 				form: data.createForm,
-				model: data.model
+				model: data.model,
+				customNameDescription: true
 			}
 		};
 		let modal: ModalSettings = {
diff --git a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/+page.svelte
index 12a02f6b9..105e5989c 100644
--- a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/+page.svelte
@@ -23,12 +23,12 @@
 			{
 				title: safeTranslate(m.ebiosWs1_1()),
 				status: 'done',
-				href: `${$page.url.pathname}/workshop-one/ebios-rm-study?next=${$page.url.pathname}`
+				href: `${$page.url.pathname}/workshop-one/ebios-rm-study?activity=one&next=${$page.url.pathname}`
 			},
 			{
 				title: safeTranslate(m.ebiosWs1_2()),
 				status: 'done',
-				href: `${$page.url.pathname}/workshop-one/ebios-rm-study?next=${$page.url.pathname}`
+				href: `${$page.url.pathname}/workshop-one/ebios-rm-study?activity=two&next=${$page.url.pathname}`
 			},
 			{
 				title: safeTranslate(m.ebiosWs1_3()),
diff --git a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/baseline/+page.server.ts b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/baseline/+page.server.ts
index 2d907c25f..96e05da6d 100644
--- a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/baseline/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/baseline/+page.server.ts
@@ -20,12 +20,19 @@ export const load: PageServerLoad = async ({ params, fetch }) => {
 	const deleteForm = await superValidate(zod(schema));
 	const URLModel = 'compliance-assessments';
 	const createSchema = modelSchema(URLModel);
+	const updateSchema = modelSchema('ebios-rm');
 	const initialData = {
 		ebios_rm_studies: [params.id]
 	};
+	const updatedModel: ModelInfo = getModelInfo('ebios-rm');
 	const createForm = await superValidate(initialData, zod(createSchema), { errors: false });
+	const objectEndpoint = `${BASE_API_URL}/${updatedModel.endpointUrl}/${params.id}/object/`;
+	const objectResponse = await fetch(objectEndpoint);
+	const object = await objectResponse.json();
+	const updateForm = await superValidate(object, zod(updateSchema), { errors: false });
 	const model: ModelInfo = getModelInfo(URLModel);
 	const foreignKeyFields = urlParamModelForeignKeyFields(URLModel);
+	const updateForeignKeyFields = urlParamModelForeignKeyFields('ebios-rm');
 	const selectFields = model.selectFields;
 
 	const foreignKeys: Record<string, any> = {};
@@ -46,6 +53,24 @@ export const load: PageServerLoad = async ({ params, fetch }) => {
 
 	model['foreignKeys'] = foreignKeys;
 
+	const updateForeignKeys: Record<string, any> = {};
+
+	for (const keyField of updateForeignKeyFields) {
+		const model = getModelInfo(keyField.urlModel);
+		const queryParams = keyField.urlParams ? `?${keyField.urlParams}` : '';
+		const url = model.endpointUrl
+			? `${BASE_API_URL}/${model.endpointUrl}/${queryParams}`
+			: `${BASE_API_URL}/${model.urlModel}/${queryParams}`;
+		const response = await fetch(url);
+		if (response.ok) {
+			updateForeignKeys[keyField.field] = await response.json().then((data) => data.results);
+		} else {
+			console.error(`Failed to fetch data for ${keyField.field}: ${response.statusText}`);
+		}
+	}
+
+	updatedModel['foreignKeys'] = updateForeignKeys;
+
 	const selectOptions: Record<string, any> = {};
 
 	if (selectFields) {
@@ -91,7 +116,7 @@ export const load: PageServerLoad = async ({ params, fetch }) => {
 		meta: data // metaData
 	};
 
-	return { createForm, deleteForm, model, URLModel, table };
+	return { createForm, deleteForm, model, URLModel, table, updateForm, updatedModel, object };
 };
 
 export const actions: Actions = {
@@ -106,5 +131,8 @@ export const actions: Actions = {
 	},
 	delete: async (event) => {
 		return defaultDeleteFormAction({ event, urlModel: 'compliance-assessments' });
+	},
+	update: async (event) => {
+		return defaultWriteFormAction({ event, urlModel: 'ebios-rm', action: 'edit' });
 	}
 };
diff --git a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/baseline/+page.svelte b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/baseline/+page.svelte
index 08ebedae8..2106a8fe4 100644
--- a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/baseline/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/baseline/+page.svelte
@@ -8,6 +8,7 @@
 	import MissingConstraintsModal from '$lib/components/Modals/MissingConstraintsModal.svelte';
 	import { checkConstraints } from '$lib/utils/crud';
 	import * as m from '$paraglide/messages.js';
+	import UpdateModal from '$lib/components/Modals/UpdateModal.svelte';
 
 	const modalStore: ModalStore = getModalStore();
 
@@ -50,9 +51,59 @@
 		}
 		modalStore.trigger(modal);
 	}
+
+	function modalUpdateForm(): void {
+		let modalComponent: ModalComponent = {
+			ref: UpdateModal,
+			props: {
+				form: data.updateForm,
+				model: data.updatedModel,
+				object: data.object,
+				foreignKeys: data.updatedModel.foreignKeys,
+				context: 'selectAudit'
+			}
+		};
+		let modal: ModalSettings = {
+			type: 'component',
+			component: modalComponent,
+			// Data
+			title: m.selectAudit()
+		};
+		if (
+			checkConstraints(
+				data.updateForm.constraints,
+				Object.fromEntries(
+					Object.entries(data.updatedModel.foreignKeys).filter(([key]) => key !== 'risk_matrix')
+				)
+			).length > 0
+		) {
+			modalComponent = {
+				ref: MissingConstraintsModal
+			};
+			modal = {
+				type: 'component',
+				component: modalComponent,
+				title: m.warning(),
+				body: safeTranslate('add-' + data.updatedModel.localName).toLowerCase(),
+				value: checkConstraints(data.updateForm.constraints, data.updatedModel.foreignKeys)
+			};
+		}
+		modalStore.trigger(modal);
+	}
 </script>
 
 <ModelTable source={data.table} deleteForm={data.deleteForm} {URLModel}>
+	<div slot="optButton">
+		<span class="inline-flex overflow-hidden rounded-md border bg-white shadow-sm">
+			<button
+				class="inline-block border-e p-3 btn-mini-secondary w-12 focus:relative"
+				data-testid="opt-button"
+				title={m.selectAudit()}
+				on:click={modalUpdateForm}
+				><i class="fa-solid fa-hand-pointer"></i>
+			</button>
+		</span>
+	</div>
 	<div slot="addButton">
 		<span class="inline-flex overflow-hidden rounded-md border bg-white shadow-sm">
 			<button
diff --git a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/ebios-rm-study/+page.server.ts b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/ebios-rm-study/+page.server.ts
index 346bfdee2..676f8d94e 100644
--- a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/ebios-rm-study/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/ebios-rm-study/+page.server.ts
@@ -1,65 +1,22 @@
-import { BASE_API_URL } from '$lib/utils/constants';
+import { loadDetail } from '$lib/utils/load';
+import type { PageServerLoad } from './$types';
 import { getModelInfo } from '$lib/utils/crud';
-import { modelSchema } from '$lib/utils/schemas';
-import { superValidate } from 'sveltekit-superforms';
-import { zod } from 'sveltekit-superforms/adapters';
-import type { PageServerLoad, Actions } from './$types';
-import { defaultWriteFormAction } from '$lib/utils/actions';
+import { defaultDeleteFormAction, defaultWriteFormAction } from '$lib/utils/actions';
+import type { Actions } from '@sveltejs/kit';
 
 export const load: PageServerLoad = async (event) => {
-	const URLModel = 'ebios-rm';
-	const model = getModelInfo(URLModel);
-	const schema = modelSchema(URLModel);
-	const objectEndpoint = `${BASE_API_URL}/${model.endpointUrl}/${event.params.id}/object/`;
-	const objectResponse = await event.fetch(objectEndpoint);
-	const object = await objectResponse.json();
-
-	const form = await superValidate(object, zod(schema), { errors: false });
-	const foreignKeyFields = model.foreignKeyFields;
-	const selectFields = model.selectFields;
-
-	const foreignKeys: Record<string, any> = {};
-
-	if (foreignKeyFields) {
-		for (const keyField of foreignKeyFields) {
-			const queryParams = keyField.urlParams ? `?${keyField.urlParams}` : '';
-			const url = `${BASE_API_URL}/${keyField.urlModel}/${queryParams}`;
-			const response = await event.fetch(url);
-			if (response.ok) {
-				foreignKeys[keyField.field] = await response.json().then((data) => data.results);
-			} else {
-				console.error(`Failed to fetch data for ${keyField.field}: ${response.statusText}`);
-			}
-		}
-	}
-
-	const selectOptions: Record<string, any> = {};
-
-	if (selectFields) {
-		for (const selectField of selectFields) {
-			const url = `${BASE_API_URL}/${URLModel}/${
-				selectField.detail ? event.params.id + '/' : ''
-			}${selectField.field}/`;
-			const response = await event.fetch(url);
-			if (response.ok) {
-				selectOptions[selectField.field] = await response.json().then((data) =>
-					Object.entries(data).map(([key, value]) => ({
-						label: value,
-						value: selectField.valueType === 'number' ? parseInt(key) : key
-					}))
-				);
-			} else {
-				console.error(`Failed to fetch data for ${selectField.field}: ${response.statusText}`);
-			}
-		}
-	}
-	model.foreignKeys = foreignKeys;
-	model.selectOptions = selectOptions;
-	return { form, model, object, foreignKeys, selectOptions, URLModel };
+	return await loadDetail({ event, model: getModelInfo('ebios-rm'), id: event.params.id });
 };
 
 export const actions: Actions = {
-	default: async (event) => {
-		return defaultWriteFormAction({ event, urlModel: 'ebios-rm', action: 'edit' });
+	create: async (event) => {
+		return defaultWriteFormAction({
+			event,
+			urlModel: 'assets',
+			action: 'create'
+		});
+	},
+	delete: async (event) => {
+		return defaultDeleteFormAction({ event, urlModel: 'assets' });
 	}
 };
diff --git a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/ebios-rm-study/+page.svelte b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/ebios-rm-study/+page.svelte
index beafb4be4..aef2b1594 100644
--- a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/ebios-rm-study/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/ebios-rm-study/+page.svelte
@@ -1,16 +1,209 @@
 <script lang="ts">
 	import type { PageData } from './$types';
-	import ModelForm from '$lib/components/Forms/ModelForm.svelte';
+	import * as m from '$paraglide/messages';
+	import { safeTranslate } from '$lib/utils/i18n';
+	import { page } from '$app/stores';
+	import CreateModal from '$lib/components/Modals/CreateModal.svelte';
+	import MissingConstraintsModal from '$lib/components/Modals/MissingConstraintsModal.svelte';
+	import ModelTable from '$lib/components/ModelTable/ModelTable.svelte';
+	import type { ModalComponent, ModalSettings, ModalStore } from '@skeletonlabs/skeleton';
+	import { TabGroup, Tab, getModalStore } from '@skeletonlabs/skeleton';
+	import { checkConstraints } from '$lib/utils/crud';
+
+	const modalStore: ModalStore = getModalStore();
+
+	const statusMap = {
+		planned: 'bg-indigo-300 text-indigo-800',
+		in_progress: 'bg-yellow-300 text-yellow-800',
+		in_review: 'bg-cyan-300 text-cyan-800',
+		done: 'bg-lime-300 text-lime-800',
+		deprecated: 'bg-orange-300 text-orange-800'
+	};
+
 	export let data: PageData;
+
+	const ebiosRmStudy = data.data;
+
+	function modalCreateForm(model: Record<string, any>): void {
+		let modalComponent: ModalComponent = {
+			ref: CreateModal,
+			props: {
+				form: model.createForm,
+				model: model,
+				debug: false
+			}
+		};
+		let modal: ModalSettings = {
+			type: 'component',
+			component: modalComponent,
+			// Data
+			title: safeTranslate('add-' + model.info.localName)
+		};
+		if (checkConstraints(model.createForm.constraints, model.foreignKeys).length > 0) {
+			modalComponent = {
+				ref: MissingConstraintsModal
+			};
+			modal = {
+				type: 'component',
+				component: modalComponent,
+				title: m.warning(),
+				body: safeTranslate('add-' + model.info.localName).toLowerCase(),
+				value: checkConstraints(model.createForm.constraints, model.foreignKeys)
+			};
+		}
+		modalStore.trigger(modal);
+	}
+
+	let activeActivity: string | null = null;
+
+	$page.url.searchParams.forEach((value, key) => {
+		if (key === 'activity' && value === 'one') {
+			activeActivity = 'one';
+		} else if (key === 'activity' && value === 'two') {
+			activeActivity = 'two';
+		}
+	});
+
+	let tabSet = 0;
 </script>
 
 <div class="card p-4 bg-white shadow-lg">
-	<ModelForm
-		form={data.form}
-		object={data.object}
-		selectOptions={data.selectOptions}
-		foreignKeys={data.foreignKeys}
-		model={data.model}
-		context="ebiosRmStudy"
-	/>
+	<div class="flex flex-col space-y-4">
+		<div class="flex flex-row justify-between items-center w-full">
+			{#if ebiosRmStudy.ref_id}
+				<span class="badge bg-pink-200 text-pink-800 font-medium">
+					{m.refIdSemiColon()}
+					{ebiosRmStudy.ref_id}
+				</span>
+			{/if}
+			<div class="flex items-center space-x-2">
+				<span class="text-2xl font-bold">
+					{ebiosRmStudy.name} - v{ebiosRmStudy.version}
+				</span>
+				<span class="badge text-xs {statusMap[ebiosRmStudy.status]}">
+					{ebiosRmStudy.status}
+				</span>
+			</div>
+			<a
+				href={`${$page.url.pathname}/edit?activity=${activeActivity}&next=${$page.url.pathname}?activity=${activeActivity}`}
+				class="btn variant-filled-primary h-fit"
+			>
+				<i class="fa-solid fa-pen-to-square mr-2" data-testid="edit-button" />
+				{m.edit()}
+			</a>
+		</div>
+		<div
+			id="activityOne"
+			class="relative p-4 space-y-4 rounded-md w-full flex flex-col items-center
+                {activeActivity === 'one'
+				? 'border-2 border-primary-500'
+				: 'border-2 border-gray-300 border-dashed'}"
+		>
+			<span
+				class="absolute -top-3 bg-white font-bold {activeActivity === 'one'
+					? 'text-primary-500'
+					: 'text-gray-500'}">{m.activityOne()}</span
+			>
+			{#if ebiosRmStudy.description}
+				<p class="text-gray-600">{ebiosRmStudy.description}</p>
+			{:else}
+				<p class="text-gray-600">{m.noDescription()}</p>
+			{/if}
+			<div class="w-full p-4 bg-gray-50 border rounded-md shadow-sm">
+				<h3 class="font-semibold text-lg text-gray-700 flex items-center space-x-2">
+					<i class="fa-solid fa-user text-purple-500"></i>
+					<span>{m.authors()}</span>
+				</h3>
+				<ul class="list-disc list-inside text-gray-600">
+					{#if ebiosRmStudy.authors?.length}
+						{#each ebiosRmStudy.authors as author}
+							<li>{author.str}</li>
+						{/each}
+					{:else}
+						<li>{m.noAuthor()}</li>
+					{/if}
+				</ul>
+			</div>
+			<div class="w-full p-4 bg-gray-50 border rounded-md shadow-sm">
+				<h3 class="font-semibold text-lg text-gray-700 flex items-center space-x-2">
+					<i class="fa-solid fa-users text-blue-500"></i>
+					<span>{m.reviewers()}</span>
+				</h3>
+				<ul class="list-disc list-inside text-gray-600">
+					{#if ebiosRmStudy.reviewers?.length}
+						{#each ebiosRmStudy.reviewers as reviewer}
+							<li>{reviewer.str}</li>
+						{/each}
+					{:else}
+						<li>{m.noReviewer()}</li>
+					{/if}
+				</ul>
+			</div>
+		</div>
+		<div
+			id="activityTwo"
+			class="relative p-4 space-y-4 rounded-md w-full flex flex-col items-center
+                {activeActivity === 'two'
+				? 'border-2 border-primary-500'
+				: 'border-2 border-gray-300 border-dashed'}"
+		>
+			<span
+				class="absolute -top-3 bg-white font-bold {activeActivity === 'two'
+					? 'text-primary-500'
+					: 'text-gray-500'}">{m.activityTwo()}</span
+			>
+			{#if Object.keys(data.relatedModels).length > 0}
+				<div class="card shadow-lg mt-8 bg-white w-full">
+					<TabGroup justify="justify-center">
+						{#each Object.entries(data.relatedModels) as [urlmodel, model], index}
+							<Tab bind:group={tabSet} value={index} name={`${urlmodel}_tab`}>
+								{safeTranslate(model.info.localNamePlural)}
+								{#if model.table.body.length > 0}
+									<span class="badge variant-soft-secondary">{model.table.body.length}</span>
+								{/if}
+							</Tab>
+						{/each}
+						<svelte:fragment slot="panel">
+							{#each Object.entries(data.relatedModels) as [urlmodel, model], index}
+								{#if tabSet === index}
+									<div class="flex flex-row justify-between px-4 py-2">
+										<h4 class="font-semibold lowercase capitalize-first my-auto">
+											{safeTranslate('associated-' + model.info.localNamePlural)}
+										</h4>
+									</div>
+									{#if model.table}
+										<ModelTable
+											source={model.table}
+											deleteForm={model.deleteForm}
+											URLModel={urlmodel}
+										>
+											<button
+												slot="addButton"
+												class="btn variant-filled-primary self-end my-auto"
+												on:click={(_) => modalCreateForm(model)}
+												><i class="fa-solid fa-plus mr-2 lowercase" />{safeTranslate(
+													'add-' + model.info.localName
+												)}</button
+											>
+										</ModelTable>
+									{/if}
+								{/if}
+							{/each}
+						</svelte:fragment>
+					</TabGroup>
+				</div>
+			{/if}
+		</div>
+		<div class="w-full p-4 bg-gray-50 border rounded-md shadow-sm">
+			<h3 class="font-semibold text-lg text-gray-700 flex items-center space-x-2">
+				<i class="fa-solid fa-eye text-gray-500 opacity-75"></i>
+				<span>{m.observation()}</span>
+			</h3>
+			{#if ebiosRmStudy.observation}
+				<p class="text-gray-600">{ebiosRmStudy.observation}</p>
+			{:else}
+				<p class="text-gray-600">{m.noObservation()}</p>
+			{/if}
+		</div>
+	</div>
 </div>
diff --git a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/ebios-rm-study/edit/+page.server.ts b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/ebios-rm-study/edit/+page.server.ts
new file mode 100644
index 000000000..1a755ca5e
--- /dev/null
+++ b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/ebios-rm-study/edit/+page.server.ts
@@ -0,0 +1,65 @@
+import { BASE_API_URL } from '$lib/utils/constants';
+import { getModelInfo } from '$lib/utils/crud';
+import { modelSchema } from '$lib/utils/schemas';
+import { superValidate } from 'sveltekit-superforms';
+import { zod } from 'sveltekit-superforms/adapters';
+import type { PageServerLoad, Actions } from '../$types';
+import { defaultWriteFormAction } from '$lib/utils/actions';
+
+export const load: PageServerLoad = async (event) => {
+	const URLModel = 'ebios-rm';
+	const model = getModelInfo(URLModel);
+	const schema = modelSchema(URLModel);
+	const objectEndpoint = `${BASE_API_URL}/${model.endpointUrl}/${event.params.id}/object/`;
+	const objectResponse = await event.fetch(objectEndpoint);
+	const object = await objectResponse.json();
+
+	const form = await superValidate(object, zod(schema), { errors: false });
+	const foreignKeyFields = model.foreignKeyFields;
+	const selectFields = model.selectFields;
+
+	const foreignKeys: Record<string, any> = {};
+
+	if (foreignKeyFields) {
+		for (const keyField of foreignKeyFields) {
+			const queryParams = keyField.urlParams ? `?${keyField.urlParams}` : '';
+			const url = `${BASE_API_URL}/${keyField.urlModel}/${queryParams}`;
+			const response = await event.fetch(url);
+			if (response.ok) {
+				foreignKeys[keyField.field] = await response.json().then((data) => data.results);
+			} else {
+				console.error(`Failed to fetch data for ${keyField.field}: ${response.statusText}`);
+			}
+		}
+	}
+
+	const selectOptions: Record<string, any> = {};
+
+	if (selectFields) {
+		for (const selectField of selectFields) {
+			const url = `${BASE_API_URL}/${URLModel}/${
+				selectField.detail ? event.params.id + '/' : ''
+			}${selectField.field}/`;
+			const response = await event.fetch(url);
+			if (response.ok) {
+				selectOptions[selectField.field] = await response.json().then((data) =>
+					Object.entries(data).map(([key, value]) => ({
+						label: value,
+						value: selectField.valueType === 'number' ? parseInt(key) : key
+					}))
+				);
+			} else {
+				console.error(`Failed to fetch data for ${selectField.field}: ${response.statusText}`);
+			}
+		}
+	}
+	model.foreignKeys = foreignKeys;
+	model.selectOptions = selectOptions;
+	return { form, model, object, foreignKeys, selectOptions, URLModel };
+};
+
+export const actions: Actions = {
+	default: async (event) => {
+		return defaultWriteFormAction({ event, urlModel: 'ebios-rm', action: 'edit' });
+	}
+};
diff --git a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/ebios-rm-study/edit/+page.svelte b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/ebios-rm-study/edit/+page.svelte
new file mode 100644
index 000000000..d2d9de1aa
--- /dev/null
+++ b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/ebios-rm-study/edit/+page.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import ModelForm from '$lib/components/Forms/ModelForm.svelte';
+	export let data: PageData;
+</script>
+
+<div class="card p-4 bg-white shadow-lg">
+	<ModelForm
+		customNameDescription
+		form={data.form}
+		object={data.object}
+		selectOptions={data.selectOptions}
+		foreignKeys={data.foreignKeys}
+		model={data.model}
+		context="ebiosRmStudy"
+	/>
+</div>
diff --git a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/feared-events/+page.server.ts b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/feared-events/+page.server.ts
index 852754409..257a7a783 100644
--- a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/feared-events/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/feared-events/+page.server.ts
@@ -50,9 +50,13 @@ export const load: PageServerLoad = async ({ params, fetch }) => {
 	for (const keyField of foreignKeyFields) {
 		const model = getModelInfo(keyField.urlModel);
 		const queryParams = keyField.urlParams ? `?${keyField.urlParams}` : '';
-		const url = model.endpointUrl
+		let url = model.endpointUrl
 			? `${BASE_API_URL}/${model.endpointUrl}/${queryParams}`
 			: `${BASE_API_URL}/${model.urlModel}/${queryParams}`;
+		if (model.urlModel === 'assets') {
+			url = `${BASE_API_URL}/${model.urlModel}/${queryParams}${params.id}`;
+			console.log(url);
+		}
 		const response = await fetch(url);
 		if (response.ok) {
 			foreignKeys[keyField.field] = await response.json().then((data) => data.results);