From 3e40bd3315708056ee12df99153a43054152bbf7 Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Thu, 12 Dec 2024 17:54:45 +0100
Subject: [PATCH 01/29] feat: custom ro-to views

---
 ...oto_pertinence_alter_roto_feared_events.py |  26 +++
 backend/ebios_rm/models.py                    |  24 ++-
 backend/ebios_rm/serializers.py               |   2 +-
 backend/ebios_rm/views.py                     |   4 -
 frontend/messages/en.json                     |   4 +-
 .../src/lib/components/Forms/ModelForm.svelte |   2 +-
 .../Forms/ModelForm/RoToForm.svelte           | 185 +++++++++++-------
 frontend/src/lib/utils/crud.ts                |  21 +-
 frontend/src/lib/utils/schemas.ts             |   3 +-
 .../ebios-rm/[id=uuid]/+page.svelte           |   6 +-
 .../ro-to/[id=uuid]/+page.server.ts           |  22 +++
 .../(internal)/ro-to/[id=uuid]/+page.svelte   | 163 +++++++++++++++
 .../ro-to/[id=uuid]/edit/+page.server.ts      |  65 ++++++
 .../ro-to/[id=uuid]/edit/+page.svelte         |  17 ++
 14 files changed, 440 insertions(+), 104 deletions(-)
 create mode 100644 backend/ebios_rm/migrations/0003_remove_roto_pertinence_alter_roto_feared_events.py
 create mode 100644 frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.server.ts
 create mode 100644 frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.svelte
 create mode 100644 frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/edit/+page.server.ts
 create mode 100644 frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/edit/+page.svelte

diff --git a/backend/ebios_rm/migrations/0003_remove_roto_pertinence_alter_roto_feared_events.py b/backend/ebios_rm/migrations/0003_remove_roto_pertinence_alter_roto_feared_events.py
new file mode 100644
index 000000000..a41a04989
--- /dev/null
+++ b/backend/ebios_rm/migrations/0003_remove_roto_pertinence_alter_roto_feared_events.py
@@ -0,0 +1,26 @@
+# Generated by Django 5.1.4 on 2024-12-12 16:25
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("ebios_rm", "0002_alter_roto_target_objective"),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name="roto",
+            name="pertinence",
+        ),
+        migrations.AlterField(
+            model_name="roto",
+            name="feared_events",
+            field=models.ManyToManyField(
+                blank=True,
+                related_name="ro_to_couples",
+                to="ebios_rm.fearedevent",
+                verbose_name="Feared events",
+            ),
+        ),
+    ]
diff --git a/backend/ebios_rm/models.py b/backend/ebios_rm/models.py
index 7b8853494..eccada823 100644
--- a/backend/ebios_rm/models.py
+++ b/backend/ebios_rm/models.py
@@ -202,7 +202,10 @@ class Pertinence(models.IntegerChoices):
         on_delete=models.CASCADE,
     )
     feared_events = models.ManyToManyField(
-        FearedEvent, verbose_name=_("Feared events"), related_name="ro_to_couples"
+        FearedEvent,
+        verbose_name=_("Feared events"),
+        related_name="ro_to_couples",
+        blank=True,
     )
 
     risk_origin = models.CharField(
@@ -219,11 +222,6 @@ class Pertinence(models.IntegerChoices):
         choices=Resources.choices,
         default=Resources.UNDEFINED,
     )
-    pertinence = models.PositiveSmallIntegerField(
-        verbose_name=_("Pertinence"),
-        choices=Pertinence.choices,
-        default=Pertinence.UNDEFINED,
-    )
     activity = models.PositiveSmallIntegerField(
         verbose_name=_("Activity"), default=0, validators=[MaxValueValidator(4)]
     )
@@ -242,6 +240,20 @@ def save(self, *args, **kwargs):
         self.folder = self.ebios_rm_study.folder
         super().save(*args, **kwargs)
 
+    @property
+    def get_pertinence(self):
+        PERTINENCE_MATRIX = [
+            [1, 1, 2, 2],
+            [1, 2, 3, 3],
+            [2, 3, 3, 4],
+            [2, 3, 4, 4],
+        ]
+        if self.motivation == 0 or self.resources == 0:
+            return self.Pertinence(self.Pertinence.UNDEFINED).label
+        return self.Pertinence(
+            PERTINENCE_MATRIX[self.motivation - 1][self.resources - 1]
+        ).label
+
 
 class Stakeholder(AbstractBaseModel, FolderMixin):
     class Category(models.TextChoices):
diff --git a/backend/ebios_rm/serializers.py b/backend/ebios_rm/serializers.py
index 2d81ac5c9..3eed45bf0 100644
--- a/backend/ebios_rm/serializers.py
+++ b/backend/ebios_rm/serializers.py
@@ -94,9 +94,9 @@ class RoToReadSerializer(BaseModelSerializer):
     folder = FieldsRelatedField()
     feared_events = FieldsRelatedField(["folder", "id"], many=True)
 
-    pertinence = serializers.CharField(source="get_pertinence_display")
     motivation = serializers.CharField(source="get_motivation_display")
     resources = serializers.CharField(source="get_resources_display")
+    pertinence = serializers.CharField(source="get_pertinence")
 
     class Meta:
         model = RoTo
diff --git a/backend/ebios_rm/views.py b/backend/ebios_rm/views.py
index bf5ec10b4..8955411e0 100644
--- a/backend/ebios_rm/views.py
+++ b/backend/ebios_rm/views.py
@@ -107,10 +107,6 @@ def motivation(self, request):
     def resources(self, request):
         return Response(dict(RoTo.Resources.choices))
 
-    @action(detail=False, name="Get pertinence choices")
-    def pertinence(self, request):
-        return Response(dict(RoTo.Pertinence.choices))
-
 
 class StakeholderViewSet(BaseModelViewSet):
     model = Stakeholder
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index a58960796..13c465eaa 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -926,6 +926,7 @@
 	"ebiosRmMatrixHelpText": "Risk matrix used as a reference for the study. Defaults to `urn:intuitem:risk:library:risk-matrix-4x4-ebios-rm`",
 	"activityOne": "Activity 1",
 	"activityTwo": "Activity 2",
+	"activityThree": "Activity 3",
 	"ebiosRmStudy": "Ebios RM study",
 	"qualifications": "Qualifications",
 	"impacts": "Impacts",
@@ -979,5 +980,6 @@
 	"attackPath": "Attack path",
 	"attackPaths": "Attack paths",
 	"currentCriticality": "Current criticality",
-	"residualCriticality": "Residual criticality"
+	"residualCriticality": "Residual criticality",
+	"notSelected": "Not selected"
 }
diff --git a/frontend/src/lib/components/Forms/ModelForm.svelte b/frontend/src/lib/components/Forms/ModelForm.svelte
index c4b150cde..feada4836 100644
--- a/frontend/src/lib/components/Forms/ModelForm.svelte
+++ b/frontend/src/lib/components/Forms/ModelForm.svelte
@@ -266,7 +266,7 @@
 	{:else if URLModel === 'feared-events'}
 		<FearedEventForm {form} {model} {cacheLocks} {formDataCache} {initialData} />
 	{:else if URLModel === 'ro-to'}
-		<RoToForm {form} {model} {cacheLocks} {formDataCache} {initialData} />
+		<RoToForm {form} {model} {cacheLocks} {formDataCache} {initialData} {context} />
 	{:else if URLModel === 'stakeholders'}
 		<StakeholderForm {form} {model} {cacheLocks} {formDataCache} {context} />
 	{:else if URLModel === 'attack-paths'}
diff --git a/frontend/src/lib/components/Forms/ModelForm/RoToForm.svelte b/frontend/src/lib/components/Forms/ModelForm/RoToForm.svelte
index 683e6accd..a78db0a56 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';
@@ -9,12 +8,27 @@
 	import { getOptions } from '$lib/utils/crud';
 	import TextArea from '../TextArea.svelte';
 	import NumberField from '../NumberField.svelte';
+	import { page } from '$app/stores';
 
 	export let form: SuperValidated<any>;
 	export let model: ModelInfo;
 	export let cacheLocks: Record<string, CacheLock> = {};
 	export let formDataCache: Record<string, any> = {};
 	export let initialData: Record<string, any> = {};
+	export let context: string;
+
+	const activityBackground = context === 'edit' ? 'bg-white' : 'bg-surface-100-800-token';
+
+	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';
+		} else if (key === 'activity' && value === 'three') {
+			activeActivity = 'three';
+		}
+	});
 </script>
 
 <AutocompleteSelect
@@ -26,68 +40,107 @@
 	label={m.ebiosRmStudy()}
 	hidden={initialData.ebios_rm_study}
 />
-<AutocompleteSelect
-	multiple
-	{form}
-	options={getOptions({
-		objects: model.foreignKeys['feared_events'],
-		extra_fields: [['folder', 'str']],
-		label: 'auto'
-	})}
-	field="feared_events"
-	label={m.fearedEvents()}
-/>
-<Select
-	{form}
-	options={model.selectOptions['risk-origin']}
-	field="risk_origin"
-	label={m.riskOrigin()}
-	cacheLock={cacheLocks['risk_origin']}
-	bind:cachedValue={formDataCache['risk_origin']}
-/>
-<TextArea
-	{form}
-	field="target_objective"
-	label={m.targetObjective()}
-	cacheLock={cacheLocks['target_objective']}
-	bind:cachedValue={formDataCache['target_objective']}
-/>
-<Select
-	{form}
-	options={model.selectOptions['motivation']}
-	field="motivation"
-	label={m.motivation()}
-	cacheLock={cacheLocks['motivation']}
-	bind:cachedValue={formDataCache['motivation']}
-/>
-<Select
-	{form}
-	options={model.selectOptions['resources']}
-	field="resources"
-	label={m.resources()}
-	cacheLock={cacheLocks['resources']}
-	bind:cachedValue={formDataCache['resources']}
-/>
-<Select
-	{form}
-	options={model.selectOptions['pertinence']}
-	field="pertinence"
-	label={m.pertinence()}
-	cacheLock={cacheLocks['pertinence']}
-	bind:cachedValue={formDataCache['pertinence']}
-/>
-<NumberField
-	{form}
-	field="activity"
-	label={m.activity()}
-	cacheLock={cacheLocks['activity']}
-	bind:cachedValue={formDataCache['activity']}
-/>
-<Checkbox {form} field="is_selected" label={m.isSelected()} />
-<TextArea
-	{form}
-	field="justification"
-	label={m.justification()}
-	cacheLock={cacheLocks['justification']}
-	bind:cachedValue={formDataCache['justification']}
-/>
+<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 {activityBackground} font-bold {activeActivity === 'one'
+			? 'text-primary-500'
+			: 'text-gray-500'}"
+	>
+		{m.activityOne()}
+	</p>
+	<Select
+		{form}
+		options={model.selectOptions['risk-origin']}
+		field="risk_origin"
+		label={m.riskOrigin()}
+		cacheLock={cacheLocks['risk_origin']}
+		bind:cachedValue={formDataCache['risk_origin']}
+	/>
+	<TextArea
+		{form}
+		field="target_objective"
+		label={m.targetObjective()}
+		cacheLock={cacheLocks['target_objective']}
+		bind:cachedValue={formDataCache['target_objective']}
+	/>
+</div>
+<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 {activityBackground} font-bold {activeActivity === 'two'
+			? 'text-primary-500'
+			: 'text-gray-500'}"
+	>
+		{m.activityTwo()}
+	</p>
+	<Select
+		{form}
+		options={model.selectOptions['motivation']}
+		field="motivation"
+		label={m.motivation()}
+		cacheLock={cacheLocks['motivation']}
+		bind:cachedValue={formDataCache['motivation']}
+	/>
+	<Select
+		{form}
+		options={model.selectOptions['resources']}
+		field="resources"
+		label={m.resources()}
+		cacheLock={cacheLocks['resources']}
+		bind:cachedValue={formDataCache['resources']}
+	/>
+	<!-- <Select
+		{form}
+		options={model.selectOptions['pertinence']}
+		field="pertinence"
+		label={m.pertinence()}
+		cacheLock={cacheLocks['pertinence']}
+		bind:cachedValue={formDataCache['pertinence']}
+	/> -->
+	<NumberField
+		{form}
+		field="activity"
+		label={m.activity()}
+		cacheLock={cacheLocks['activity']}
+		bind:cachedValue={formDataCache['activity']}
+	/>
+</div>
+<div
+	class="relative p-2 space-y-2 rounded-md {activeActivity === 'three'
+		? 'border-2 border-primary-500'
+		: 'border-2 border-gray-300 border-dashed'}"
+>
+	<p
+		class="absolute -top-3 {activityBackground} font-bold {activeActivity === 'three'
+			? 'text-primary-500'
+			: 'text-gray-500'}"
+	>
+		{m.activityThree()}
+	</p>
+	<Checkbox {form} field="is_selected" label={m.isSelected()} />
+	<AutocompleteSelect
+		multiple
+		{form}
+		options={getOptions({
+			objects: model.foreignKeys['feared_events'],
+			extra_fields: [['folder', 'str']],
+			label: 'auto'
+		})}
+		field="feared_events"
+		label={m.fearedEvents()}
+	/>
+	<TextArea
+		{form}
+		field="justification"
+		label={m.justification()}
+		cacheLock={cacheLocks['justification']}
+		bind:cachedValue={formDataCache['justification']}
+	/>
+</div>
diff --git a/frontend/src/lib/utils/crud.ts b/frontend/src/lib/utils/crud.ts
index c53282e6c..dfed6c512 100644
--- a/frontend/src/lib/utils/crud.ts
+++ b/frontend/src/lib/utils/crud.ts
@@ -639,8 +639,7 @@ export const URL_MODEL_MAP: ModelMap = {
 		selectFields: [
 			{ field: 'risk-origin' },
 			{ field: 'motivation', valueType: 'number' },
-			{ field: 'resources', valueType: 'number' },
-			{ field: 'pertinence', valueType: 'number' }
+			{ field: 'resources', valueType: 'number' }
 		]
 	},
 	stakeholders: {
@@ -672,24 +671,6 @@ export const URL_MODEL_MAP: ModelMap = {
 			{ field: 'folder', urlModel: 'folders', urlParams: 'content_type=DO' }
 		]
 	},
-	'ro-to': {
-		endpointUrl: 'ebios-rm/ro-to',
-		name: 'roto',
-		localName: 'roto',
-		localNamePlural: 'roto',
-		verboseName: 'Ro to',
-		verboseNamePlural: 'Ro to',
-		foreignKeyFields: [
-			{ field: 'ebios_rm_study', urlModel: 'ebios-rm' },
-			{ field: 'feared_events', urlModel: 'feared-events' }
-		],
-		selectFields: [
-			{ field: 'risk-origin' },
-			{ field: 'motivation' },
-			{ field: 'resources' },
-			{ field: 'pertinence' }
-		]
-	},
 	attack_paths: {
 		endpointUrl: 'ebios-rm/attack-paths',
 		name: 'attackpath',
diff --git a/frontend/src/lib/utils/schemas.ts b/frontend/src/lib/utils/schemas.ts
index a7429aa00..4c7bc3c7a 100644
--- a/frontend/src/lib/utils/schemas.ts
+++ b/frontend/src/lib/utils/schemas.ts
@@ -415,12 +415,11 @@ export const fearedEventsSchema = z.object({
 
 export const roToSchema = z.object({
 	ebios_rm_study: z.string(),
-	feared_events: z.string().uuid().array(),
+	feared_events: z.string().uuid().optional().array().optional(),
 	risk_origin: z.string(),
 	target_objective: z.string(),
 	motivation: z.number().default(0).optional(),
 	resources: z.number().default(0).optional(),
-	pertinence: z.number().default(0).optional(),
 	activity: z.number().min(0).max(4).optional().default(0),
 	is_selected: z.boolean().optional().default(false),
 	justification: z.string().optional()
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 59ef62bad..7a4e2a877 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
@@ -37,17 +37,17 @@
 			{
 				title: safeTranslate(m.ebiosWs2_1()),
 				status: 'to_do',
-				href: `${$page.url.pathname}/workshop-two/ro-to?next=${$page.url.pathname}`
+				href: `${$page.url.pathname}/workshop-two/ro-to?activity=one&next=${$page.url.pathname}`
 			},
 			{
 				title: safeTranslate(m.ebiosWs2_2()),
 				status: 'to_do',
-				href: `${$page.url.pathname}/workshop-two/ro-to?next=${$page.url.pathname}`
+				href: `${$page.url.pathname}/workshop-two/ro-to?activity=two&next=${$page.url.pathname}`
 			},
 			{
 				title: safeTranslate(m.ebiosWs2_3()),
 				status: 'to_do',
-				href: `${$page.url.pathname}/workshop-two/ro-to?next=${$page.url.pathname}`
+				href: `${$page.url.pathname}/workshop-two/ro-to?activity=three&next=${$page.url.pathname}`
 			}
 		],
 		ws3: [
diff --git a/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.server.ts b/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.server.ts
new file mode 100644
index 000000000..b43574b4c
--- /dev/null
+++ b/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.server.ts
@@ -0,0 +1,22 @@
+import { loadDetail } from '$lib/utils/load';
+import type { PageServerLoad } from './$types';
+import { getModelInfo } from '$lib/utils/crud';
+
+export const load: PageServerLoad = async (event) => {
+	return await loadDetail({ event, model: getModelInfo('ro-to'), 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)/ro-to/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.svelte
new file mode 100644
index 000000000..c38ce5d8a
--- /dev/null
+++ b/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.svelte
@@ -0,0 +1,163 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import * as m from '$paraglide/messages';
+	import { page } from '$app/stores';
+	import { pageTitle } from '$lib/utils/stores';
+	import { safeTranslate } from '$lib/utils/i18n';
+
+	export let data: PageData;
+
+	const roto = data.data;
+
+	pageTitle.set(roto.risk_origin + ' - ' + roto.target_objective);
+
+	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';
+		} else if (key === 'activity' && value === 'three') {
+			activeActivity = 'three';
+		}
+	});
+</script>
+
+<div class="card p-4 bg-white shadow-lg">
+	<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 class="flex flex-col space-y-4">
+		<div
+			id="activityOne"
+			class="relative p-4 space-y-4 rounded-md w-full flex flex-col items-center justify-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
+			>
+			<div class="flex flex-col items-center">
+				<span class="badge bg-blue-200 text-blue-700">{m.riskOrigin()}</span>
+				<span class="font-bold">{roto.risk_origin}</span>
+			</div>
+			<div class="flex flex-col items-center">
+				<span class="badge bg-cyan-200 text-cyan-700">{m.targetObjective()}</span>
+				<span class="font-bold">{roto.target_objective}</span>
+			</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
+			>
+			<div class="flex space-x-6">
+				<p class="flex flex-col items-center">
+					<span class="text-xs text-gray-500">{m.motivation()}</span>
+					<span class="badge text-sm font-bold">{safeTranslate(roto.motivation)}</span>
+				</p>
+				<span>x</span>
+				<p class="flex flex-col items-center">
+					<span class="text-xs text-gray-500">{m.resources()}</span>
+					<span class="badge text-sm font-bold">{safeTranslate(roto.resources)}</span>
+				</p>
+				<span>=</span>
+				<p class="flex flex-col items-center">
+					<span class="text-xs text-gray-500">{m.pertinence()}</span>
+					<span class="badge text-sm font-bold">{safeTranslate(roto.pertinence)}</span>
+				</p>
+			</div>
+			<p>
+				<span class="badge bg-violet-200 text-violet-700">{m.activity()}</span>
+				<span>=</span>
+				<span class="font-bold">{roto.activity}</span>
+			</p>
+		</div>
+		<div
+			id="activityThree"
+			class="relative p-4 space-y-4 rounded-md w-full flex flex-col items-center
+                {activeActivity === 'three'
+				? 'border-2 border-primary-500'
+				: 'border-2 border-gray-300 border-dashed'}"
+		>
+			<span
+				class="absolute -top-3 bg-white font-bold {activeActivity === 'three'
+					? 'text-primary-500'
+					: 'text-gray-500'}">{m.activityThree()}</span
+			>
+			<p>
+				{#if roto.selected}
+					<span class="badge bg-green-200 text-green-700">{m.selected()}</span>
+				{:else}
+					<span class="badge bg-red-200 text-red-700">{m.notSelected()}</span>
+				{/if}
+			</p>
+			<!-- {#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 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.justification()}</span>
+				</h3>
+				{#if roto.justification}
+					<p class="text-gray-600">{roto.justification}</p>
+				{:else}
+					<p class="text-gray-600">{m.noJustification()}</p>
+				{/if}
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/edit/+page.server.ts b/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/edit/+page.server.ts
new file mode 100644
index 000000000..5e37160d5
--- /dev/null
+++ b/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/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 = 'ro-to';
+	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.endpointUrl || 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}/${model.endpointUrl}/${
+				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: 'ro-to', action: 'edit' });
+	}
+};
diff --git a/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/edit/+page.svelte b/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/edit/+page.svelte
new file mode 100644
index 000000000..ec44e5c21
--- /dev/null
+++ b/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/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="edit"
+	/>
+</div>

From 5d14b9e44d9372b9ffe82822c3ecfdbff2909695 Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Thu, 12 Dec 2024 19:19:51 +0100
Subject: [PATCH 02/29] style: improve ro to detailed view

---
 backend/ebios_rm/views.py                     |   4 +-
 frontend/messages/en.json                     |   5 +-
 .../components/ModelTable/ModelTable.svelte   |   3 +-
 frontend/src/lib/utils/load.ts                |   6 +-
 .../ro-to/[id=uuid]/+page.server.ts           |  49 +++++---
 .../(internal)/ro-to/[id=uuid]/+page.svelte   | 116 +++++++++---------
 6 files changed, 101 insertions(+), 82 deletions(-)

diff --git a/backend/ebios_rm/views.py b/backend/ebios_rm/views.py
index 8955411e0..5fcd1a0b0 100644
--- a/backend/ebios_rm/views.py
+++ b/backend/ebios_rm/views.py
@@ -64,9 +64,7 @@ def likelihood(self, request, pk):
 class FearedEventViewSet(BaseModelViewSet):
     model = FearedEvent
 
-    filterset_fields = [
-        "ebios_rm_study",
-    ]
+    filterset_fields = ["ebios_rm_study", "ro_to_couples"]
 
     @action(detail=True, name="Get risk matrix", url_path="risk-matrix")
     def risk_matrix(self, request, pk=None):
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index 13c465eaa..d0e3512d7 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -981,5 +981,8 @@
 	"attackPaths": "Attack paths",
 	"currentCriticality": "Current criticality",
 	"residualCriticality": "Residual criticality",
-	"notSelected": "Not selected"
+	"notSelected": "Not selected",
+	"identifyRoTo": "Identify RO/TO",
+	"evaluateRoTo": "Evaluate RO/TO",
+	"selectRoTo": "Select RO/TO"
 }
diff --git a/frontend/src/lib/components/ModelTable/ModelTable.svelte b/frontend/src/lib/components/ModelTable/ModelTable.svelte
index bf9ecab79..020f7ae9a 100644
--- a/frontend/src/lib/components/ModelTable/ModelTable.svelte
+++ b/frontend/src/lib/components/ModelTable/ModelTable.svelte
@@ -42,6 +42,7 @@
 	// Props (styles)
 	export let element: CssClasses = 'table';
 	export let text: CssClasses = 'text-xs';
+	export let backgroundColor: CssClasses = 'bg-white';
 	export let color: CssClasses = '';
 	export let regionHead: CssClasses = '';
 	export let regionHeadCell: CssClasses = 'uppercase bg-white text-gray-700';
@@ -94,7 +95,7 @@
 	// Replace $$props.class with classProp for compatibility
 	let classProp = ''; // Replacing $$props.class
 
-	$: classesBase = `${classProp || 'bg-white'}`;
+	$: classesBase = `${classProp || backgroundColor}`;
 	$: classesTable = `${element} ${text} ${color}`;
 
 	import { goto } from '$app/navigation';
diff --git a/frontend/src/lib/utils/load.ts b/frontend/src/lib/utils/load.ts
index b4a42ec11..893b34068 100644
--- a/frontend/src/lib/utils/load.ts
+++ b/frontend/src/lib/utils/load.ts
@@ -43,7 +43,7 @@ export const loadDetail = async ({ event, model, id }) => {
 		const initialData = {};
 		await Promise.all(
 			model.reverseForeignKeyFields.map(async (e) => {
-				const relEndpoint = `${BASE_API_URL}/${e.urlModel}/?${e.field}=${event.params.id}`;
+				const relEndpoint = `${BASE_API_URL}/${e.endpointUrl || e.urlModel}/?${e.field}=${event.params.id}`;
 				const res = await event.fetch(relEndpoint);
 				const revData = await res.json().then((res) => res.results);
 
@@ -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);
@@ -103,7 +103,7 @@ export const loadDetail = async ({ event, model, id }) => {
 				if (info.selectFields) {
 					await Promise.all(
 						info.selectFields.map(async (selectField) => {
-							const url = `${BASE_API_URL}/${urlModel}/${selectField.field}/`;
+							const url = `${BASE_API_URL}/${e.endpointUrl || e.urlModel}/${selectField.field}/`;
 							const response = await event.fetch(url);
 							if (response.ok) {
 								selectOptions[selectField.field] = await response.json().then((data) =>
diff --git a/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.server.ts b/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.server.ts
index b43574b4c..e3c9c06ba 100644
--- a/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.server.ts
@@ -1,22 +1,37 @@
-import { loadDetail } from '$lib/utils/load';
 import type { PageServerLoad } from './$types';
+import { BASE_API_URL } from '$lib/utils/constants';
+import { listViewFields } from '$lib/utils/table';
+import { tableSourceMapper, type TableSource } from '@skeletonlabs/skeleton';
 import { getModelInfo } from '$lib/utils/crud';
 
 export const load: PageServerLoad = async (event) => {
-	return await loadDetail({ event, model: getModelInfo('ro-to'), id: event.params.id });
-};
+	const URLModel = 'ro-to';
+	const model = getModelInfo(URLModel);
+	const endpoint = `${BASE_API_URL}/${model.endpointUrl}/${event.params.id}/`;
+	const response = await event.fetch(endpoint);
+	const data = await response.json();
+
+	const relEndpoint = `${BASE_API_URL}/ebios-rm/feared-events?ro_to_couples=${event.params.id}`;
+	const res = await event.fetch(relEndpoint);
+	const revData = await res.json().then((res) => res.results);
+
+	const tableFieldsRef = listViewFields['feared-events'];
+	const tableFields = {
+		head: [...tableFieldsRef.head],
+		body: [...tableFieldsRef.body]
+	};
+	const index = tableFields.body.indexOf('ro_to_couples');
+	if (index > -1) {
+		tableFields.head.splice(index, 1);
+		tableFields.body.splice(index, 1);
+	}
+	const bodyData = tableSourceMapper(revData, tableFields.body);
 
-// 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' });
-// 	}
-// };
+	const table: TableSource = {
+		head: tableFields.head,
+		body: bodyData,
+		meta: revData
+	};
+
+	return { data, table };
+};
diff --git a/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.svelte
index c38ce5d8a..6305659e3 100644
--- a/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.svelte
@@ -4,6 +4,7 @@
 	import { page } from '$app/stores';
 	import { pageTitle } from '$lib/utils/stores';
 	import { safeTranslate } from '$lib/utils/i18n';
+	import ModelTable from '$lib/components/ModelTable/ModelTable.svelte';
 
 	export let data: PageData;
 
@@ -21,16 +22,17 @@
 			activeActivity = 'three';
 		}
 	});
+
+	const pertinenceColor = {
+		undefined: 'bg-gray-200 text-gray-700',
+		irrelevant: 'bg-green-200 text-green-700',
+		'partially relevant': 'bg-yellow-200 text-yellow-700',
+		fairly_relevant: 'bg-orange-200 text-orange-700',
+		higly_relevant: 'bg-red-200 text-red-700'
+	};
 </script>
 
 <div class="card p-4 bg-white shadow-lg">
-	<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 class="flex flex-col space-y-4">
 		<div
 			id="activityOne"
@@ -44,14 +46,28 @@
 					? 'text-primary-500'
 					: 'text-gray-500'}">{m.activityOne()}</span
 			>
-			<div class="flex flex-col items-center">
-				<span class="badge bg-blue-200 text-blue-700">{m.riskOrigin()}</span>
-				<span class="font-bold">{roto.risk_origin}</span>
-			</div>
-			<div class="flex flex-col items-center">
-				<span class="badge bg-cyan-200 text-cyan-700">{m.targetObjective()}</span>
-				<span class="font-bold">{roto.target_objective}</span>
+			<h1
+				class="font-bold text-xl {activeActivity === 'one' ? 'text-primary-500' : 'text-gray-500'}"
+			>
+				{m.identifyRoTo()}
+			</h1>
+			<div class="flex flex-row space-x-1">
+				<p class="flex flex-col items-center">
+					<span class="text-xs text-gray-500">{m.riskOrigin()}</span>
+					<span class="font-bold">{roto.risk_origin} /</span>
+				</p>
+				<p class="flex flex-col items-center">
+					<span class="text-xs text-gray-500">{m.targetObjective()}</span>
+					<span class="font-bold">{roto.target_objective}</span>
+				</p>
 			</div>
+			<a
+				href={`${$page.url.pathname}/edit?activity=${activeActivity}&next=${$page.url.pathname}?activity=${activeActivity}`}
+				class="btn variant-filled-primary h-fit absolute top-2 right-4"
+			>
+				<i class="fa-solid fa-pen-to-square mr-2" data-testid="edit-button" />
+				{m.edit()}
+			</a>
 		</div>
 		<div
 			id="activityTwo"
@@ -65,6 +81,11 @@
 					? 'text-primary-500'
 					: 'text-gray-500'}">{m.activityTwo()}</span
 			>
+			<h1
+				class="font-bold text-xl {activeActivity === 'two' ? 'text-primary-500' : 'text-gray-500'}"
+			>
+				{m.evaluateRoTo()}
+			</h1>
 			<div class="flex space-x-6">
 				<p class="flex flex-col items-center">
 					<span class="text-xs text-gray-500">{m.motivation()}</span>
@@ -78,7 +99,9 @@
 				<span>=</span>
 				<p class="flex flex-col items-center">
 					<span class="text-xs text-gray-500">{m.pertinence()}</span>
-					<span class="badge text-sm font-bold">{safeTranslate(roto.pertinence)}</span>
+					<span class="badge text-sm font-bold {pertinenceColor[roto.pertinence]}"
+						>{safeTranslate(roto.pertinence)}</span
+					>
 				</p>
 			</div>
 			<p>
@@ -99,54 +122,33 @@
 					? 'text-primary-500'
 					: 'text-gray-500'}">{m.activityThree()}</span
 			>
+			<h1
+				class="font-bold text-xl {activeActivity === 'three'
+					? 'text-primary-500'
+					: 'text-gray-500'}"
+			>
+				{m.selectRoTo()}
+			</h1>
 			<p>
-				{#if roto.selected}
+				{#if roto.is_selected}
 					<span class="badge bg-green-200 text-green-700">{m.selected()}</span>
 				{:else}
 					<span class="badge bg-red-200 text-red-700">{m.notSelected()}</span>
 				{/if}
 			</p>
-			<!-- {#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 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-table text-gray-500 opacity-75"></i>
+					<span>{m.fearedEvents()}</span>
+				</h3>
+				<ModelTable
+					backgroundColor="bg-gray-50"
+					regionBody="bg-gray-50"
+					regionHeadCell="uppercase bg-gray-50 text-gray-700"
+					source={data.table}
+					URLModel="feared-events"
+				></ModelTable>
+			</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>

From 1f63bf2d49b0f7751538528e52c47e0923420fec Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Thu, 12 Dec 2024 19:26:13 +0100
Subject: [PATCH 03/29] feat: track ro-to selected activity

---
 .../[id=uuid]/workshop-two/ro-to/+page.svelte | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-two/ro-to/+page.svelte b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-two/ro-to/+page.svelte
index 08ebedae8..772da6e6e 100644
--- a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-two/ro-to/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-two/ro-to/+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 { page } from '$app/stores';
 
 	const modalStore: ModalStore = getModalStore();
 
@@ -50,9 +51,25 @@
 		}
 		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';
+		} else if (key === 'activity' && value === 'three') {
+			activeActivity = 'three';
+		}
+	});
 </script>
 
-<ModelTable source={data.table} deleteForm={data.deleteForm} {URLModel}>
+<ModelTable
+	source={data.table}
+	deleteForm={data.deleteForm}
+	{URLModel}
+	detailQueryParameter={`activity=${activeActivity}`}
+>
 	<div slot="addButton">
 		<span class="inline-flex overflow-hidden rounded-md border bg-white shadow-sm">
 			<button

From 0bfae3e6bc3bf79d192a961e1587f65b803e4d40 Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Thu, 12 Dec 2024 19:36:03 +0100
Subject: [PATCH 04/29] fix: merge migrations

---
 .../migrations/0004_merge_20241212_1835.py         | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 backend/ebios_rm/migrations/0004_merge_20241212_1835.py

diff --git a/backend/ebios_rm/migrations/0004_merge_20241212_1835.py b/backend/ebios_rm/migrations/0004_merge_20241212_1835.py
new file mode 100644
index 000000000..6b8863b98
--- /dev/null
+++ b/backend/ebios_rm/migrations/0004_merge_20241212_1835.py
@@ -0,0 +1,14 @@
+# Generated by Django 5.1.4 on 2024-12-12 18:35
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('ebios_rm', '0003_remove_ebiosrmstudy_risk_assessments'),
+        ('ebios_rm', '0003_remove_roto_pertinence_alter_roto_feared_events'),
+    ]
+
+    operations = [
+    ]

From 7f845aaf07512d3de51e17299c2da41237a6c16d Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Thu, 12 Dec 2024 19:37:15 +0100
Subject: [PATCH 05/29] chore: format

---
 backend/ebios_rm/migrations/0004_merge_20241212_1835.py | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/backend/ebios_rm/migrations/0004_merge_20241212_1835.py b/backend/ebios_rm/migrations/0004_merge_20241212_1835.py
index 6b8863b98..1cc504c96 100644
--- a/backend/ebios_rm/migrations/0004_merge_20241212_1835.py
+++ b/backend/ebios_rm/migrations/0004_merge_20241212_1835.py
@@ -4,11 +4,9 @@
 
 
 class Migration(migrations.Migration):
-
     dependencies = [
-        ('ebios_rm', '0003_remove_ebiosrmstudy_risk_assessments'),
-        ('ebios_rm', '0003_remove_roto_pertinence_alter_roto_feared_events'),
+        ("ebios_rm", "0003_remove_ebiosrmstudy_risk_assessments"),
+        ("ebios_rm", "0003_remove_roto_pertinence_alter_roto_feared_events"),
     ]
 
-    operations = [
-    ]
+    operations = []

From 1f35405a20dd36d835c852efe6406e3fe118f75b Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Thu, 12 Dec 2024 19:38:39 +0100
Subject: [PATCH 06/29] chore: refactor migrations

---
 ...03_remove_ebiosrmstudy_risk_assessments.py | 16 +++++++++++-
 ...oto_pertinence_alter_roto_feared_events.py | 26 -------------------
 .../migrations/0004_merge_20241212_1835.py    | 12 ---------
 3 files changed, 15 insertions(+), 39 deletions(-)
 delete mode 100644 backend/ebios_rm/migrations/0003_remove_roto_pertinence_alter_roto_feared_events.py
 delete mode 100644 backend/ebios_rm/migrations/0004_merge_20241212_1835.py

diff --git a/backend/ebios_rm/migrations/0003_remove_ebiosrmstudy_risk_assessments.py b/backend/ebios_rm/migrations/0003_remove_ebiosrmstudy_risk_assessments.py
index d02c92ad2..966bbea44 100644
--- a/backend/ebios_rm/migrations/0003_remove_ebiosrmstudy_risk_assessments.py
+++ b/backend/ebios_rm/migrations/0003_remove_ebiosrmstudy_risk_assessments.py
@@ -1,6 +1,6 @@
 # Generated by Django 5.1.4 on 2024-12-11 11:07
 
-from django.db import migrations
+from django.db import migrations, models
 
 
 class Migration(migrations.Migration):
@@ -13,4 +13,18 @@ class Migration(migrations.Migration):
             model_name="ebiosrmstudy",
             name="risk_assessments",
         ),
+        migrations.RemoveField(
+            model_name="roto",
+            name="pertinence",
+        ),
+        migrations.AlterField(
+            model_name="roto",
+            name="feared_events",
+            field=models.ManyToManyField(
+                blank=True,
+                related_name="ro_to_couples",
+                to="ebios_rm.fearedevent",
+                verbose_name="Feared events",
+            ),
+        ),
     ]
diff --git a/backend/ebios_rm/migrations/0003_remove_roto_pertinence_alter_roto_feared_events.py b/backend/ebios_rm/migrations/0003_remove_roto_pertinence_alter_roto_feared_events.py
deleted file mode 100644
index a41a04989..000000000
--- a/backend/ebios_rm/migrations/0003_remove_roto_pertinence_alter_roto_feared_events.py
+++ /dev/null
@@ -1,26 +0,0 @@
-# Generated by Django 5.1.4 on 2024-12-12 16:25
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-    dependencies = [
-        ("ebios_rm", "0002_alter_roto_target_objective"),
-    ]
-
-    operations = [
-        migrations.RemoveField(
-            model_name="roto",
-            name="pertinence",
-        ),
-        migrations.AlterField(
-            model_name="roto",
-            name="feared_events",
-            field=models.ManyToManyField(
-                blank=True,
-                related_name="ro_to_couples",
-                to="ebios_rm.fearedevent",
-                verbose_name="Feared events",
-            ),
-        ),
-    ]
diff --git a/backend/ebios_rm/migrations/0004_merge_20241212_1835.py b/backend/ebios_rm/migrations/0004_merge_20241212_1835.py
deleted file mode 100644
index 1cc504c96..000000000
--- a/backend/ebios_rm/migrations/0004_merge_20241212_1835.py
+++ /dev/null
@@ -1,12 +0,0 @@
-# Generated by Django 5.1.4 on 2024-12-12 18:35
-
-from django.db import migrations
-
-
-class Migration(migrations.Migration):
-    dependencies = [
-        ("ebios_rm", "0003_remove_ebiosrmstudy_risk_assessments"),
-        ("ebios_rm", "0003_remove_roto_pertinence_alter_roto_feared_events"),
-    ]
-
-    operations = []

From b2a0bd5c2045352e0f3ae4b25401094ef364f338 Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Thu, 12 Dec 2024 19:41:25 +0100
Subject: [PATCH 07/29] chore: make proper migration

---
 ...03_remove_ebiosrmstudy_risk_assessments.py | 14 ----------
 ...oto_pertinence_alter_roto_feared_events.py | 26 +++++++++++++++++++
 2 files changed, 26 insertions(+), 14 deletions(-)
 create mode 100644 backend/ebios_rm/migrations/0004_remove_roto_pertinence_alter_roto_feared_events.py

diff --git a/backend/ebios_rm/migrations/0003_remove_ebiosrmstudy_risk_assessments.py b/backend/ebios_rm/migrations/0003_remove_ebiosrmstudy_risk_assessments.py
index 966bbea44..49c86ae0d 100644
--- a/backend/ebios_rm/migrations/0003_remove_ebiosrmstudy_risk_assessments.py
+++ b/backend/ebios_rm/migrations/0003_remove_ebiosrmstudy_risk_assessments.py
@@ -13,18 +13,4 @@ class Migration(migrations.Migration):
             model_name="ebiosrmstudy",
             name="risk_assessments",
         ),
-        migrations.RemoveField(
-            model_name="roto",
-            name="pertinence",
-        ),
-        migrations.AlterField(
-            model_name="roto",
-            name="feared_events",
-            field=models.ManyToManyField(
-                blank=True,
-                related_name="ro_to_couples",
-                to="ebios_rm.fearedevent",
-                verbose_name="Feared events",
-            ),
-        ),
     ]
diff --git a/backend/ebios_rm/migrations/0004_remove_roto_pertinence_alter_roto_feared_events.py b/backend/ebios_rm/migrations/0004_remove_roto_pertinence_alter_roto_feared_events.py
new file mode 100644
index 000000000..954fe19f8
--- /dev/null
+++ b/backend/ebios_rm/migrations/0004_remove_roto_pertinence_alter_roto_feared_events.py
@@ -0,0 +1,26 @@
+# Generated by Django 5.1.4 on 2024-12-12 18:40
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("ebios_rm", "0003_remove_ebiosrmstudy_risk_assessments"),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name="roto",
+            name="pertinence",
+        ),
+        migrations.AlterField(
+            model_name="roto",
+            name="feared_events",
+            field=models.ManyToManyField(
+                blank=True,
+                related_name="ro_to_couples",
+                to="ebios_rm.fearedevent",
+                verbose_name="Feared events",
+            ),
+        ),
+    ]

From e83bce1cc5b138343109ac16ff1fc7467b3fc582 Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Thu, 12 Dec 2024 19:42:11 +0100
Subject: [PATCH 08/29] chore: remove unused import

---
 .../migrations/0003_remove_ebiosrmstudy_risk_assessments.py     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/ebios_rm/migrations/0003_remove_ebiosrmstudy_risk_assessments.py b/backend/ebios_rm/migrations/0003_remove_ebiosrmstudy_risk_assessments.py
index 49c86ae0d..d02c92ad2 100644
--- a/backend/ebios_rm/migrations/0003_remove_ebiosrmstudy_risk_assessments.py
+++ b/backend/ebios_rm/migrations/0003_remove_ebiosrmstudy_risk_assessments.py
@@ -1,6 +1,6 @@
 # Generated by Django 5.1.4 on 2024-12-11 11:07
 
-from django.db import migrations, models
+from django.db import migrations
 
 
 class Migration(migrations.Migration):

From 5f01c3f9dd2769e80b1970c300537db7610bdc99 Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Fri, 13 Dec 2024 11:23:36 +0100
Subject: [PATCH 09/29] style: improve workshop 1 layout

---
 .../[id=uuid]/workshop-one/ebios-rm-study/+page.svelte      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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 aef2b1594..ac2610702 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
@@ -105,7 +105,7 @@
 					: 'text-gray-500'}">{m.activityOne()}</span
 			>
 			{#if ebiosRmStudy.description}
-				<p class="text-gray-600">{ebiosRmStudy.description}</p>
+				<p class="text-gray-600 whitespace-pre-wrap text-justify w-full">{ebiosRmStudy.description}</p>
 			{:else}
 				<p class="text-gray-600">{m.noDescription()}</p>
 			{/if}
@@ -117,7 +117,7 @@
 				<ul class="list-disc list-inside text-gray-600">
 					{#if ebiosRmStudy.authors?.length}
 						{#each ebiosRmStudy.authors as author}
-							<li>{author.str}</li>
+							<li><a class="anchor" href="/users/{author.id}">{author.str}</a></li>
 						{/each}
 					{:else}
 						<li>{m.noAuthor()}</li>
@@ -132,7 +132,7 @@
 				<ul class="list-disc list-inside text-gray-600">
 					{#if ebiosRmStudy.reviewers?.length}
 						{#each ebiosRmStudy.reviewers as reviewer}
-							<li>{reviewer.str}</li>
+							<li><a class="anchor" href="/users/{reviewer.id}">{reviewer.str}</a></li>
 						{/each}
 					{:else}
 						<li>{m.noReviewer()}</li>

From b0af569b5970018c1fd529afa73706c1cc04bf97 Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Fri, 13 Dec 2024 11:24:35 +0100
Subject: [PATCH 10/29] hotfix: disaster recovery objectives with multiple
 parent assets

---
 backend/core/models.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/backend/core/models.py b/backend/core/models.py
index cc08c0d35..4769bdfd9 100644
--- a/backend/core/models.py
+++ b/backend/core/models.py
@@ -1552,8 +1552,8 @@ def get_disaster_recovery_objectives(self) -> dict[str, dict[str, dict[str, int]
                 if key not in disaster_recovery_objectives:
                     disaster_recovery_objectives[key] = content
                 else:
-                    disaster_recovery_objectives[key] = min(
-                        disaster_recovery_objectives[key], content.get("value", 0)
+                    disaster_recovery_objectives[key]["value"] = min(
+                        disaster_recovery_objectives[key].get("value", 0), content.get("value", 0)
                     )
 
         return {"objectives": disaster_recovery_objectives}

From 4d9e0a5c97a72a8f9f6785b40a1d373e0a27ead0 Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Fri, 13 Dec 2024 11:25:15 +0100
Subject: [PATCH 11/29] chore: format

---
 backend/core/models.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/backend/core/models.py b/backend/core/models.py
index 4769bdfd9..c408e39b6 100644
--- a/backend/core/models.py
+++ b/backend/core/models.py
@@ -1553,7 +1553,8 @@ def get_disaster_recovery_objectives(self) -> dict[str, dict[str, dict[str, int]
                     disaster_recovery_objectives[key] = content
                 else:
                     disaster_recovery_objectives[key]["value"] = min(
-                        disaster_recovery_objectives[key].get("value", 0), content.get("value", 0)
+                        disaster_recovery_objectives[key].get("value", 0),
+                        content.get("value", 0),
                     )
 
         return {"objectives": disaster_recovery_objectives}

From dc05c8925a992ce81d1df4976518fe8f869a78d5 Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Fri, 13 Dec 2024 11:35:00 +0100
Subject: [PATCH 12/29] chore: remove debug log

---
 .../[id=uuid]/workshop-one/feared-events/+page.server.ts         | 1 -
 1 file changed, 1 deletion(-)

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 257a7a783..60d361b36 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
@@ -55,7 +55,6 @@ export const load: PageServerLoad = async ({ params, fetch }) => {
 			: `${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) {

From 9f08593e68efef23c76eabde05695ec265505092 Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Fri, 13 Dec 2024 11:52:34 +0100
Subject: [PATCH 13/29] feat: filter feared-events in ro/to

---
 frontend/src/lib/utils/crud.ts                               | 5 +++--
 .../[id=uuid]/workshop-one/feared-events/+page.server.ts     | 5 +----
 .../ebios-rm/[id=uuid]/workshop-two/ro-to/+page.server.ts    | 2 +-
 .../(app)/(internal)/ro-to/[id=uuid]/edit/+page.server.ts    | 2 +-
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/frontend/src/lib/utils/crud.ts b/frontend/src/lib/utils/crud.ts
index d5a70fab6..286517621 100644
--- a/frontend/src/lib/utils/crud.ts
+++ b/frontend/src/lib/utils/crud.ts
@@ -105,6 +105,7 @@ interface ForeignKeyField {
 	urlModel: urlModel;
 	endpointUrl?: string;
 	urlParams?: string;
+	detail?: boolean;
 }
 
 interface Field {
@@ -624,7 +625,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', urlParams: 'ebios_rm_studies=' },
+			{ field: 'assets', urlModel: 'assets', urlParams: 'ebios_rm_studies=', detail: true },
 			{ field: 'qualifications', urlModel: 'qualifications' }
 		],
 		selectFields: [{ field: 'gravity', valueType: 'number', detail: true }]
@@ -638,7 +639,7 @@ export const URL_MODEL_MAP: ModelMap = {
 		verboseNamePlural: 'Ro to',
 		foreignKeyFields: [
 			{ field: 'ebios_rm_study', urlModel: 'ebios-rm', endpointUrl: 'ebios-rm/studies' },
-			{ field: 'feared_events', urlModel: 'feared-events', endpointUrl: 'ebios-rm/feared-events' }
+			{ field: 'feared_events', urlModel: 'feared-events', endpointUrl: 'ebios-rm/feared-events', urlParams: 'ebios_rm_study=', detail: true }
 		],
 		selectFields: [
 			{ field: 'risk-origin' },
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 60d361b36..05ef1a6cf 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
@@ -49,13 +49,10 @@ export const load: PageServerLoad = async ({ params, fetch }) => {
 
 	for (const keyField of foreignKeyFields) {
 		const model = getModelInfo(keyField.urlModel);
-		const queryParams = keyField.urlParams ? `?${keyField.urlParams}` : '';
+		const queryParams = keyField.urlParams ? `?${keyField.urlParams}${keyField.detail ? params.id : ''}` : '';
 		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}`;
-		}
 		const response = await 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/[id=uuid]/workshop-two/ro-to/+page.server.ts b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-two/ro-to/+page.server.ts
index fdad14f79..54c2c635f 100644
--- a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-two/ro-to/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-two/ro-to/+page.server.ts
@@ -32,7 +32,7 @@ export const load: PageServerLoad = async ({ params, fetch }) => {
 
 	for (const keyField of foreignKeyFields) {
 		const keyModel = getModelInfo(keyField.urlModel);
-		const queryParams = keyField.urlParams ? `?${keyField.urlParams}` : '';
+		const queryParams = keyField.urlParams ? `?${keyField.urlParams}${keyField.detail ? params.id : ''}` : '';
 		const url = `${BASE_API_URL}/${keyModel.endpointUrl ?? keyModel.urlModel}/${queryParams}`;
 		const response = await fetch(url);
 		if (response.ok) {
diff --git a/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/edit/+page.server.ts b/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/edit/+page.server.ts
index 5e37160d5..6abc23e98 100644
--- a/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/edit/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/edit/+page.server.ts
@@ -22,7 +22,7 @@ export const load: PageServerLoad = async (event) => {
 
 	if (foreignKeyFields) {
 		for (const keyField of foreignKeyFields) {
-			const queryParams = keyField.urlParams ? `?${keyField.urlParams}` : '';
+			const queryParams = keyField.urlParams ? `?${keyField.urlParams}${keyField.detail ? object.ebios_rm_study : ''}` : '';
 			const url = `${BASE_API_URL}/${keyField.endpointUrl || keyField.urlModel}/${queryParams}`;
 			const response = await event.fetch(url);
 			if (response.ok) {

From 3d59feb75d65378959d1220c4f628f2ed8c46781 Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Fri, 13 Dec 2024 11:53:04 +0100
Subject: [PATCH 14/29] chore: format

---
 frontend/src/lib/utils/crud.ts                            | 8 +++++++-
 .../[id=uuid]/workshop-one/ebios-rm-study/+page.svelte    | 4 +++-
 .../[id=uuid]/workshop-one/feared-events/+page.server.ts  | 4 +++-
 .../ebios-rm/[id=uuid]/workshop-two/ro-to/+page.server.ts | 4 +++-
 .../(app)/(internal)/ro-to/[id=uuid]/edit/+page.server.ts | 4 +++-
 5 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/utils/crud.ts b/frontend/src/lib/utils/crud.ts
index 286517621..b9a6d9357 100644
--- a/frontend/src/lib/utils/crud.ts
+++ b/frontend/src/lib/utils/crud.ts
@@ -639,7 +639,13 @@ export const URL_MODEL_MAP: ModelMap = {
 		verboseNamePlural: 'Ro to',
 		foreignKeyFields: [
 			{ field: 'ebios_rm_study', urlModel: 'ebios-rm', endpointUrl: 'ebios-rm/studies' },
-			{ field: 'feared_events', urlModel: 'feared-events', endpointUrl: 'ebios-rm/feared-events', urlParams: 'ebios_rm_study=', detail: true }
+			{
+				field: 'feared_events',
+				urlModel: 'feared-events',
+				endpointUrl: 'ebios-rm/feared-events',
+				urlParams: 'ebios_rm_study=',
+				detail: true
+			}
 		],
 		selectFields: [
 			{ field: 'risk-origin' },
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 ac2610702..55c599eed 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
@@ -105,7 +105,9 @@
 					: 'text-gray-500'}">{m.activityOne()}</span
 			>
 			{#if ebiosRmStudy.description}
-				<p class="text-gray-600 whitespace-pre-wrap text-justify w-full">{ebiosRmStudy.description}</p>
+				<p class="text-gray-600 whitespace-pre-wrap text-justify w-full">
+					{ebiosRmStudy.description}
+				</p>
 			{:else}
 				<p class="text-gray-600">{m.noDescription()}</p>
 			{/if}
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 05ef1a6cf..09d7e7047 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
@@ -49,7 +49,9 @@ export const load: PageServerLoad = async ({ params, fetch }) => {
 
 	for (const keyField of foreignKeyFields) {
 		const model = getModelInfo(keyField.urlModel);
-		const queryParams = keyField.urlParams ? `?${keyField.urlParams}${keyField.detail ? params.id : ''}` : '';
+		const queryParams = keyField.urlParams
+			? `?${keyField.urlParams}${keyField.detail ? params.id : ''}`
+			: '';
 		let url = model.endpointUrl
 			? `${BASE_API_URL}/${model.endpointUrl}/${queryParams}`
 			: `${BASE_API_URL}/${model.urlModel}/${queryParams}`;
diff --git a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-two/ro-to/+page.server.ts b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-two/ro-to/+page.server.ts
index 54c2c635f..8ff2e8aeb 100644
--- a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-two/ro-to/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-two/ro-to/+page.server.ts
@@ -32,7 +32,9 @@ export const load: PageServerLoad = async ({ params, fetch }) => {
 
 	for (const keyField of foreignKeyFields) {
 		const keyModel = getModelInfo(keyField.urlModel);
-		const queryParams = keyField.urlParams ? `?${keyField.urlParams}${keyField.detail ? params.id : ''}` : '';
+		const queryParams = keyField.urlParams
+			? `?${keyField.urlParams}${keyField.detail ? params.id : ''}`
+			: '';
 		const url = `${BASE_API_URL}/${keyModel.endpointUrl ?? keyModel.urlModel}/${queryParams}`;
 		const response = await fetch(url);
 		if (response.ok) {
diff --git a/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/edit/+page.server.ts b/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/edit/+page.server.ts
index 6abc23e98..0c9e15c11 100644
--- a/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/edit/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/edit/+page.server.ts
@@ -22,7 +22,9 @@ export const load: PageServerLoad = async (event) => {
 
 	if (foreignKeyFields) {
 		for (const keyField of foreignKeyFields) {
-			const queryParams = keyField.urlParams ? `?${keyField.urlParams}${keyField.detail ? object.ebios_rm_study : ''}` : '';
+			const queryParams = keyField.urlParams
+				? `?${keyField.urlParams}${keyField.detail ? object.ebios_rm_study : ''}`
+				: '';
 			const url = `${BASE_API_URL}/${keyField.endpointUrl || keyField.urlModel}/${queryParams}`;
 			const response = await event.fetch(url);
 			if (response.ok) {

From 85c594e83642f0fe4c27c7e48b67a3eae99d8870 Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Fri, 13 Dec 2024 15:12:36 +0100
Subject: [PATCH 15/29] feat: prepare custom view

---
 frontend/messages/en.json                     |   6 +-
 .../components/ModelTable/ModelTable.svelte   |   3 +-
 frontend/src/lib/utils/crud.ts                |  12 +-
 .../[id=uuid]/+page.server.ts                 |  37 +++++
 .../[id=uuid]/+page.svelte                    | 132 ++++++++++++++++++
 5 files changed, 178 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.server.ts
 create mode 100644 frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte

diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index dc6f3a23e..76d910822 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -991,5 +991,9 @@
 	"noAuthor": "No author assigned",
 	"noReviewer": "No reviewer assigned",
 	"selectAudit": "Select audit",
-	"errorAssetGraphMustNotContainCycles": "The asset graph must not contain cycles."
+	"operarionalScenario": "Operational scenario",
+	"addOperationalScenario": "Add operational scenario",
+	"workshopFour": "Workshop 4",
+	"notSelected": "Not selected",
+	"noThreat": "No threat"
 }
diff --git a/frontend/src/lib/components/ModelTable/ModelTable.svelte b/frontend/src/lib/components/ModelTable/ModelTable.svelte
index 6cd242326..5b8a25b8c 100644
--- a/frontend/src/lib/components/ModelTable/ModelTable.svelte
+++ b/frontend/src/lib/components/ModelTable/ModelTable.svelte
@@ -42,6 +42,7 @@
 	// Props (styles)
 	export let element: CssClasses = 'table';
 	export let text: CssClasses = 'text-xs';
+	export let backgroundColor: CssClasses = 'bg-white';
 	export let color: CssClasses = '';
 	export let regionHead: CssClasses = '';
 	export let regionHeadCell: CssClasses = 'uppercase bg-white text-gray-700';
@@ -94,7 +95,7 @@
 	// Replace $$props.class with classProp for compatibility
 	let classProp = ''; // Replacing $$props.class
 
-	$: classesBase = `${classProp || 'bg-white'}`;
+	$: classesBase = `${classProp || backgroundColor}`;
 	$: classesTable = `${element} ${text} ${color}`;
 
 	import { goto } from '$app/navigation';
diff --git a/frontend/src/lib/utils/crud.ts b/frontend/src/lib/utils/crud.ts
index 6bbdd4862..602f01278 100644
--- a/frontend/src/lib/utils/crud.ts
+++ b/frontend/src/lib/utils/crud.ts
@@ -676,14 +676,6 @@ export const URL_MODEL_MAP: ModelMap = {
 			{ field: 'folder', urlModel: 'folders', urlParams: 'content_type=DO' }
 		]
 	},
-	attack_paths: {
-		endpointUrl: 'ebios-rm/attack-paths',
-		name: 'attackpath',
-		localName: 'attackPath',
-		localNamePlural: 'attackPaths',
-		verboseName: 'Attack path',
-		verboseNamePlural: 'Attack paths'
-	},
 	'operational-scenarios': {
 		endpointUrl: 'ebios-rm/operational-scenarios',
 		name: 'operationalscenario',
@@ -694,9 +686,9 @@ export const URL_MODEL_MAP: ModelMap = {
 		foreignKeyFields: [
 			{ field: 'ebios_rm_study', urlModel: 'ebios-rm' },
 			{ field: 'threats', urlModel: 'threats' },
-			{ field: 'attack_paths', urlModel: 'attack-paths' }
+			{ field: 'attack_paths', urlModel: 'attack-paths', endpointUrl: 'ebios-rm/attack-paths', urlParams: 'ebios_rm_studies=', detail: true },
 		],
-		selectFields: [{ field: 'likelihood', valueType: 'number' }]
+		selectFields: [{ field: 'likelihood', valueType: 'number', detail: true }]
 	}
 };
 
diff --git a/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.server.ts b/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.server.ts
new file mode 100644
index 000000000..eccc23efc
--- /dev/null
+++ b/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.server.ts
@@ -0,0 +1,37 @@
+import { BASE_API_URL } from '$lib/utils/constants';
+import { listViewFields } from '$lib/utils/table';
+import { tableSourceMapper, type TableSource } from '@skeletonlabs/skeleton';
+import { getModelInfo } from '$lib/utils/crud';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async (event) => {
+	const URLModel = 'operational-scenarios';
+	const model = getModelInfo(URLModel);
+	const endpoint = `${BASE_API_URL}/${model.endpointUrl}/${event.params.id}/`;
+	const response = await event.fetch(endpoint);
+	const data = await response.json();
+
+	const relEndpoint = `${BASE_API_URL}/ebios-rm/attack-paths?operational_scenarios=${event.params.id}`;
+	const res = await event.fetch(relEndpoint);
+	const revData = await res.json().then((res) => res.results);
+
+	const tableFieldsRef = listViewFields['attack-paths'];
+	const tableFields = {
+		head: [...tableFieldsRef.head],
+		body: [...tableFieldsRef.body]
+	};
+	const index = tableFields.body.indexOf('operational_scenarios');
+	if (index > -1) {
+		tableFields.head.splice(index, 1);
+		tableFields.body.splice(index, 1);
+	}
+	const bodyData = tableSourceMapper(revData, tableFields.body);
+
+	const table: TableSource = {
+		head: tableFields.head,
+		body: bodyData,
+		meta: revData
+	};
+
+	return { data, table };
+};
\ No newline at end of file
diff --git a/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
new file mode 100644
index 000000000..2e880bd45
--- /dev/null
+++ b/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
@@ -0,0 +1,132 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import * as m from '$paraglide/messages';
+	import { page } from '$app/stores';
+	import { pageTitle } from '$lib/utils/stores';
+	import { safeTranslate } from '$lib/utils/i18n';
+	import ModelTable from '$lib/components/ModelTable/ModelTable.svelte';
+
+	export let data: PageData;
+
+	const operationalScenario = data.data;
+
+	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';
+		} else if (key === 'activity' && value === 'three') {
+			activeActivity = 'three';
+		}
+	});
+
+	// const pertinenceColor = {
+	// 	undefined: 'bg-gray-200 text-gray-700',
+	// 	irrelevant: 'bg-green-200 text-green-700',
+	// 	'partially relevant': 'bg-yellow-200 text-yellow-700',
+	// 	fairly_relevant: 'bg-orange-200 text-orange-700',
+	// 	higly_relevant: 'bg-red-200 text-red-700'
+	// };
+</script>
+
+<div class="card p-4 bg-white shadow-lg">
+	<div class="flex flex-col space-y-4">
+		<div
+			id="activityOne"
+			class="relative p-4 space-y-4 rounded-md w-full flex flex-col items-center justify-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
+			>
+			<h1
+				class="font-bold text-xl {activeActivity === 'one' ? 'text-primary-500' : 'text-gray-500'}"
+			>
+				<!-- {m.identifyRoTo()} -->
+			</h1>
+			<a
+				href={`${$page.url.pathname}/edit?activity=${activeActivity}&next=${$page.url.pathname}?activity=${activeActivity}`}
+				class="btn variant-filled-primary h-fit absolute top-2 right-4"
+			>
+				<i class="fa-solid fa-pen-to-square mr-2" data-testid="edit-button" />
+				{m.edit()}
+			</a>
+            {#if operationalScenario.description}
+				<p class="text-gray-600">{operationalScenario.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-table text-gray-500 opacity-75"></i>
+					<span>{m.attackPaths()}</span>
+				</h3>
+				<ModelTable
+					backgroundColor="bg-gray-50"
+					regionBody="bg-gray-50"
+					regionHeadCell="uppercase bg-gray-50 text-gray-700"
+					source={data.table}
+					URLModel="feared-events"
+				></ModelTable>
+			</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-biohazard text-red-500"></i>
+					<span>{m.threats()}</span>
+				</h3>
+				<ul class="list-disc list-inside text-gray-600">
+					{#if operationalScenario.threats?.length}
+						{#each operationalScenario.threats as threat}
+							<li>{threat.str}</li>
+						{/each}
+					{:else}
+						<li>{m.noThreat()}</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
+			>
+			<h1
+				class="font-bold text-xl {activeActivity === 'two'
+					? 'text-primary-500'
+					: 'text-gray-500'}"
+			>
+                <!-- {m.identifyRoTo()} -->
+			</h1>
+			<p>
+				{#if operationalScenario.is_selected}
+					<span class="badge bg-green-200 text-green-700">{m.selected()}</span>
+				{:else}
+					<span class="badge bg-red-200 text-red-700">{m.notSelected()}</span>
+				{/if}
+			</p>
+			<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.justification()}</span>
+				</h3>
+				{#if operationalScenario.justification}
+					<p class="text-gray-600">{operationalScenario.justification}</p>
+				{:else}
+					<p class="text-gray-600">{m.noJustification()}</p>
+				{/if}
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file

From 7648cea6e6c93bba681654b2a0f7f76e3e417646 Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Fri, 13 Dec 2024 15:35:59 +0100
Subject: [PATCH 16/29] feat: filter attack paths

---
 frontend/messages/en.json                                   | 4 ----
 frontend/src/lib/utils/crud.ts                              | 2 +-
 .../[model=urlmodel]/[id=uuid]/edit/+layout.server.ts       | 4 ++--
 .../workshop-four/operational-scenario/+page.server.ts      | 2 +-
 .../(internal)/operational-scenarios/[id=uuid]/+page.svelte | 6 +++---
 .../routes/(app)/(internal)/ro-to/[id=uuid]/+page.svelte    | 6 +++---
 6 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index c5daff25f..b1eab95e4 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -982,9 +982,6 @@
 	"currentCriticality": "Current criticality",
 	"residualCriticality": "Residual criticality",
 	"notSelected": "Not selected",
-	"identifyRoTo": "Identify RO/TO",
-	"evaluateRoTo": "Evaluate RO/TO",
-	"selectRoTo": "Select RO/TO",
 	"resetPasswordHere": "You can reset your password here.",
 	"resetPassword": "Reset password",
 	"ebiosRm": "Ebios RM",
@@ -998,6 +995,5 @@
 	"operarionalScenario": "Operational scenario",
 	"addOperationalScenario": "Add operational scenario",
 	"workshopFour": "Workshop 4",
-	"notSelected": "Not selected",
 	"noThreat": "No threat"
 }
diff --git a/frontend/src/lib/utils/crud.ts b/frontend/src/lib/utils/crud.ts
index 75eed15e3..a6ed45334 100644
--- a/frontend/src/lib/utils/crud.ts
+++ b/frontend/src/lib/utils/crud.ts
@@ -692,7 +692,7 @@ export const URL_MODEL_MAP: ModelMap = {
 		foreignKeyFields: [
 			{ field: 'ebios_rm_study', urlModel: 'ebios-rm' },
 			{ field: 'threats', urlModel: 'threats' },
-			{ field: 'attack_paths', urlModel: 'attack-paths', endpointUrl: 'ebios-rm/attack-paths', urlParams: 'ebios_rm_studies=', detail: true },
+			{ field: 'attack_paths', urlModel: 'attack-paths', endpointUrl: 'ebios-rm/attack-paths', urlParams: 'ebios_rm_study=', detail: true },
 		],
 		selectFields: [{ field: 'likelihood', valueType: 'number', detail: true }]
 	}
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 10341dc6a..1b0c7b45a 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
@@ -52,8 +52,8 @@ export const load: LayoutServerLoad = async (event) => {
 			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}`;
+			if (['assets', 'attack-paths'].includes(keyModel.urlModel) && ['feared-events', 'operational-scenarios'].includes(event.params.model)) {
+				url = `${BASE_API_URL}/${keyModel.endpointUrl || keyModel.urlModel}/${queryParams}${object.ebios_rm_study}`;
 			}
 			const response = await event.fetch(url);
 			if (response.ok) {
diff --git a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-four/operational-scenario/+page.server.ts b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-four/operational-scenario/+page.server.ts
index 62a12af03..f5d61cb84 100644
--- a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-four/operational-scenario/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-four/operational-scenario/+page.server.ts
@@ -36,7 +36,7 @@ export const load: PageServerLoad = async ({ params, fetch }) => {
 
 	for (const keyField of foreignKeyFields) {
 		const keyModel = getModelInfo(keyField.urlModel);
-		const queryParams = keyField.urlParams ? `?${keyField.urlParams}` : '';
+		const queryParams = keyField.urlParams ? `?${keyField.urlParams}${keyField.detail ? params.id : ''}` : '';
 		const url = keyModel.endpointUrl
 			? `${BASE_API_URL}/${keyModel.endpointUrl}/${queryParams}`
 			: `${BASE_API_URL}/${keyModel.urlModel}/${queryParams}`;
diff --git a/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
index 2e880bd45..a7c0f724c 100644
--- a/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
@@ -47,7 +47,7 @@
 			<h1
 				class="font-bold text-xl {activeActivity === 'one' ? 'text-primary-500' : 'text-gray-500'}"
 			>
-				<!-- {m.identifyRoTo()} -->
+				{m.ebiosWs4_1()}
 			</h1>
 			<a
 				href={`${$page.url.pathname}/edit?activity=${activeActivity}&next=${$page.url.pathname}?activity=${activeActivity}`}
@@ -71,7 +71,7 @@
 					regionBody="bg-gray-50"
 					regionHeadCell="uppercase bg-gray-50 text-gray-700"
 					source={data.table}
-					URLModel="feared-events"
+					URLModel="attack-paths"
 				></ModelTable>
 			</div>
             <div class="w-full p-4 bg-gray-50 border rounded-md shadow-sm">
@@ -107,7 +107,7 @@
 					? 'text-primary-500'
 					: 'text-gray-500'}"
 			>
-                <!-- {m.identifyRoTo()} -->
+                {m.ebiosWs4_2()}
 			</h1>
 			<p>
 				{#if operationalScenario.is_selected}
diff --git a/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.svelte
index 6305659e3..f3418afcc 100644
--- a/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.svelte
@@ -49,7 +49,7 @@
 			<h1
 				class="font-bold text-xl {activeActivity === 'one' ? 'text-primary-500' : 'text-gray-500'}"
 			>
-				{m.identifyRoTo()}
+				{m.ebiosWs2_1()}
 			</h1>
 			<div class="flex flex-row space-x-1">
 				<p class="flex flex-col items-center">
@@ -84,7 +84,7 @@
 			<h1
 				class="font-bold text-xl {activeActivity === 'two' ? 'text-primary-500' : 'text-gray-500'}"
 			>
-				{m.evaluateRoTo()}
+				{m.ebiosWs2_2()}
 			</h1>
 			<div class="flex space-x-6">
 				<p class="flex flex-col items-center">
@@ -127,7 +127,7 @@
 					? 'text-primary-500'
 					: 'text-gray-500'}"
 			>
-				{m.selectRoTo()}
+				{m.ebiosWs2_3()}
 			</h1>
 			<p>
 				{#if roto.is_selected}

From a627d671175f58f1c1a5862d7fa1762bde842431 Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Fri, 13 Dec 2024 16:31:13 +0100
Subject: [PATCH 17/29] feat: track workshop 4 activity

---
 frontend/messages/en.json                     |   7 +-
 .../src/lib/components/Forms/ModelForm.svelte |   2 +-
 .../ModelForm/OperationalScenarioForm.svelte  | 127 ++++++++++++------
 .../[id=uuid]/edit/+page.svelte               |   3 +
 .../ebios-rm/[id=uuid]/+page.svelte           |   4 +-
 .../operational-scenario/+page.svelte         |  14 +-
 .../[id=uuid]/+page.svelte                    |  36 +++--
 7 files changed, 141 insertions(+), 52 deletions(-)

diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index b1eab95e4..1ff8e9333 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -993,7 +993,12 @@
 	"noReviewer": "No reviewer assigned",
 	"selectAudit": "Select audit",
 	"operarionalScenario": "Operational scenario",
+	"operationalScenarios": "Operational scenarios",
 	"addOperationalScenario": "Add operational scenario",
 	"workshopFour": "Workshop 4",
-	"noThreat": "No threat"
+	"noThreat": "No threat",
+	"likely": "Likely",
+	"unlikely": "Unlikely",
+	"veryLikely": "Very likely",
+	"certain": "Certain"
 }
diff --git a/frontend/src/lib/components/Forms/ModelForm.svelte b/frontend/src/lib/components/Forms/ModelForm.svelte
index 8ca71675b..afc9eb231 100644
--- a/frontend/src/lib/components/Forms/ModelForm.svelte
+++ b/frontend/src/lib/components/Forms/ModelForm.svelte
@@ -273,7 +273,7 @@
 	{:else if URLModel === 'attack-paths'}
 		<AttackPathForm {form} {model} {cacheLocks} {formDataCache} {initialData} />
 	{:else if URLModel === 'operational-scenarios'}
-		<OperationalScenarioForm {form} {model} {cacheLocks} {formDataCache} {initialData} />
+		<OperationalScenarioForm {form} {model} {cacheLocks} {formDataCache} {initialData} {context}/>
 	{/if}
 	<div class="flex flex-row justify-between space-x-4">
 		{#if closeModal}
diff --git a/frontend/src/lib/components/Forms/ModelForm/OperationalScenarioForm.svelte b/frontend/src/lib/components/Forms/ModelForm/OperationalScenarioForm.svelte
index f1eaffd9a..fc5707127 100644
--- a/frontend/src/lib/components/Forms/ModelForm/OperationalScenarioForm.svelte
+++ b/frontend/src/lib/components/Forms/ModelForm/OperationalScenarioForm.svelte
@@ -7,12 +7,27 @@
 	import { getOptions } from '$lib/utils/crud';
 	import TextArea from '../TextArea.svelte';
 	import Select from '../Select.svelte';
+	import { page } from '$app/stores';
 
 	export let form: SuperValidated<any>;
 	export let model: ModelInfo;
 	export let cacheLocks: Record<string, CacheLock> = {};
 	export let formDataCache: Record<string, any> = {};
 	export let initialData: Record<string, any> = {};
+	export let context: string;
+
+	const activityBackground = context === 'edit' ? 'bg-white' : 'bg-surface-100-800-token';
+
+	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';
+		} else if (key === 'activity' && value === 'three') {
+			activeActivity = 'three';
+		}
+	});
 </script>
 
 <AutocompleteSelect
@@ -24,42 +39,76 @@
 	label={m.ebiosRmStudy()}
 	hidden={initialData.ebios_rm_study}
 />
-<AutocompleteSelect
-	{form}
-	multiple
-	options={getOptions({
-		objects: model.foreignKeys['threats'],
-		extra_fields: [['folder', 'str']],
-		label: 'auto'
-	})}
-	field="threats"
-	cacheLock={cacheLocks['threats']}
-	bind:cachedValue={formDataCache['threats']}
-	label={m.threats()}
-/>
-<AutocompleteSelect
-	multiple
-	{form}
-	options={getOptions({
-		objects: model.foreignKeys['attack_paths'],
-		label: 'str'
-	})}
-	field="attack_paths"
-	label={m.attackPaths()}
-/>
-<Select
-	{form}
-	options={model.selectOptions['likelihood']}
-	field="likelihood"
-	label={m.likelihood()}
-	cacheLock={cacheLocks['likelihood']}
-	bind:cachedValue={formDataCache['likelihood']}
-/>
-<Checkbox {form} field="is_selected" label={m.isSelected()} />
-<TextArea
-	{form}
-	field="justification"
-	label={m.justification()}
-	cacheLock={cacheLocks['justification']}
-	bind:cachedValue={formDataCache['justification']}
-/>
+<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 {activityBackground} 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"
+	/>
+	<AutocompleteSelect
+		{form}
+		multiple
+		options={getOptions({
+			objects: model.foreignKeys['threats'],
+			extra_fields: [['folder', 'str']],
+			label: 'auto'
+		})}
+		field="threats"
+		cacheLock={cacheLocks['threats']}
+		bind:cachedValue={formDataCache['threats']}
+		label={m.threats()}
+	/>
+	<AutocompleteSelect
+		multiple
+		{form}
+		options={getOptions({
+			objects: model.foreignKeys['attack_paths'],
+			label: 'str'
+		})}
+		field="attack_paths"
+		label={m.attackPaths()}
+	/>
+</div>
+<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 {activityBackground} font-bold {activeActivity === 'two'
+			? 'text-primary-500'
+			: 'text-gray-500'}"
+	>
+		{m.activityTwo()}
+	</p>
+	<Select
+		{form}
+		options={model.selectOptions['likelihood']}
+		field="likelihood"
+		label={m.likelihood()}
+		cacheLock={cacheLocks['likelihood']}
+		bind:cachedValue={formDataCache['likelihood']}
+	/>
+	<Checkbox {form} field="is_selected" label={m.isSelected()} />
+	<TextArea
+		{form}
+		field="justification"
+		label={m.justification()}
+		cacheLock={cacheLocks['justification']}
+		bind:cachedValue={formDataCache['justification']}
+	/>
+</div>
diff --git a/frontend/src/routes/(app)/(internal)/[model=urlmodel]/[id=uuid]/edit/+page.svelte b/frontend/src/routes/(app)/(internal)/[model=urlmodel]/[id=uuid]/edit/+page.svelte
index 8658525a0..3f8b8b4d0 100644
--- a/frontend/src/routes/(app)/(internal)/[model=urlmodel]/[id=uuid]/edit/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/[model=urlmodel]/[id=uuid]/edit/+page.svelte
@@ -5,6 +5,8 @@
 
 	export let data: PageData;
 
+	const customNameDescription = ['operational-scenarios'].includes(data.model.urlModel);
+
 	breadcrumbObject.set(data.object);
 </script>
 
@@ -14,5 +16,6 @@
 	selectOptions={data.selectOptions}
 	foreignKeys={data.foreignKeys}
 	model={data.model}
+	customNameDescription={customNameDescription}
 	context="edit"
 />
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 a39ec4d84..1c99e6677 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
@@ -79,12 +79,12 @@
 			{
 				title: safeTranslate(m.ebiosWs4_1()),
 				status: 'to_do',
-				href: `${$page.url.pathname}/workshop-four/operational-scenario?next=${$page.url.pathname}`
+				href: `${$page.url.pathname}/workshop-four/operational-scenario?activity=one&next=${$page.url.pathname}`
 			},
 			{
 				title: safeTranslate(m.ebiosWs4_2()),
 				status: 'to_do',
-				href: `${$page.url.pathname}/workshop-four/operational-scenario?next=${$page.url.pathname}`
+				href: `${$page.url.pathname}/workshop-four/operational-scenario?activity=two&next=${$page.url.pathname}`
 			}
 		],
 		ws5: [
diff --git a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-four/operational-scenario/+page.svelte b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-four/operational-scenario/+page.svelte
index 08ebedae8..733f7ca25 100644
--- a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-four/operational-scenario/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-four/operational-scenario/+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 { page } from '$app/stores';
 
 	const modalStore: ModalStore = getModalStore();
 
@@ -50,9 +51,20 @@
 		}
 		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';
+		} else if (key === 'activity' && value === 'three') {
+			activeActivity = 'three';
+		}
+	});
 </script>
 
-<ModelTable source={data.table} deleteForm={data.deleteForm} {URLModel}>
+<ModelTable source={data.table} deleteForm={data.deleteForm} {URLModel} detailQueryParameter={`activity=${activeActivity}`}>
 	<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)/operational-scenarios/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
index a7c0f724c..9d1e24b8b 100644
--- a/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
@@ -21,13 +21,12 @@
 		}
 	});
 
-	// const pertinenceColor = {
-	// 	undefined: 'bg-gray-200 text-gray-700',
-	// 	irrelevant: 'bg-green-200 text-green-700',
-	// 	'partially relevant': 'bg-yellow-200 text-yellow-700',
-	// 	fairly_relevant: 'bg-orange-200 text-orange-700',
-	// 	higly_relevant: 'bg-red-200 text-red-700'
-	// };
+    const likelihoodChoices = [
+        { label: m.unlikely(), value: 0 },
+        { label: m.likely(), value: 1 },
+        { label: m.veryLikely(), value: 2 },
+        { label: m.certain(), value: 3 },
+    ];
 </script>
 
 <div class="card p-4 bg-white shadow-lg">
@@ -82,7 +81,7 @@
 				<ul class="list-disc list-inside text-gray-600">
 					{#if operationalScenario.threats?.length}
 						{#each operationalScenario.threats as threat}
-							<li>{threat.str}</li>
+							<li><a class="anchor" href="/threats/{threat.id}">{threat.str}</a></li>
 						{/each}
 					{:else}
 						<li>{m.noThreat()}</li>
@@ -116,6 +115,27 @@
 					<span class="badge bg-red-200 text-red-700">{m.notSelected()}</span>
 				{/if}
 			</p>
+            <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-dice text-black opacity-75"></i>
+					<span>{m.likelihood()}</span>
+				</h3>
+                <div class="grid grid-cols-4 gap-2 p-2">
+                    {#each likelihoodChoices as choice}
+                        {#if operationalScenario.likelihood.value === choice.value}
+                            <div style="background-color: {operationalScenario.likelihood.hexcolor}" class="flex flex-col items-center justify-center border rounded-md p-4 font-semibold">
+                                <span>{choice.label}</span>
+                                <span>({choice.value})</span>
+                            </div>
+                        {:else}
+                            <div class="flex flex-col items-center justify-center border rounded-md bg-gray-200 p-4 text-gray-500">
+                                <span>{choice.label}</span>
+                                <span>({choice.value})</span>
+                            </div>
+                        {/if}
+                    {/each}
+                </div>
+            </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>

From 13c51467b022b4b5f142c3489fb23d536fc36909 Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Fri, 13 Dec 2024 16:47:32 +0100
Subject: [PATCH 18/29] feat: add gravity to operational scenario view

---
 backend/ebios_rm/models.py                    | 29 ++++++
 backend/ebios_rm/serializers.py               |  1 +
 frontend/messages/en.json                     |  3 +-
 .../src/lib/components/Forms/ModelForm.svelte |  2 +-
 frontend/src/lib/utils/crud.ts                |  8 +-
 .../[id=uuid]/edit/+layout.server.ts          |  5 +-
 .../[id=uuid]/edit/+page.svelte               |  2 +-
 .../operational-scenario/+page.server.ts      |  4 +-
 .../operational-scenario/+page.svelte         | 10 +-
 .../[id=uuid]/+page.server.ts                 |  2 +-
 .../[id=uuid]/+page.svelte                    | 99 +++++++++++++------
 11 files changed, 124 insertions(+), 41 deletions(-)

diff --git a/backend/ebios_rm/models.py b/backend/ebios_rm/models.py
index dbe56bfb8..8affb08d6 100644
--- a/backend/ebios_rm/models.py
+++ b/backend/ebios_rm/models.py
@@ -246,6 +246,14 @@ def get_pertinence(self):
             PERTINENCE_MATRIX[self.motivation - 1][self.resources - 1]
         ).label
 
+    @property
+    def gravity(self):
+        gravity = -1
+        for feared_event in self.feared_events.all():
+            if feared_event.gravity > gravity:
+                gravity = feared_event.gravity
+        return gravity
+
 
 class Stakeholder(AbstractBaseModel, FolderMixin):
     class Category(models.TextChoices):
@@ -398,6 +406,9 @@ def save(self, *args, **kwargs):
         self.folder = self.ebios_rm_study.folder
         super().save(*args, **kwargs)
 
+    def get_gravity(self):
+        return self.ro_to_couple.gravity
+
 
 class OperationalScenario(AbstractBaseModel, FolderMixin):
     ebios_rm_study = models.ForeignKey(
@@ -455,3 +466,21 @@ def get_likelihood_display(self):
             **risk_matrix["probability"][self.likelihood],
             "value": self.likelihood,
         }
+
+    def get_gravity_display(self):
+        gravity = -1
+        for attack_path in self.attack_paths.all():
+            if attack_path.get_gravity() > gravity:
+                gravity = attack_path.get_gravity()
+        if gravity < 0:
+            return {
+                "abbreviation": "--",
+                "name": "--",
+                "description": "not rated",
+                "value": -1,
+            }
+        risk_matrix = self.parsed_matrix
+        return {
+            **risk_matrix["impact"][gravity],
+            "value": gravity,
+        }
diff --git a/backend/ebios_rm/serializers.py b/backend/ebios_rm/serializers.py
index 3eed45bf0..20256f96c 100644
--- a/backend/ebios_rm/serializers.py
+++ b/backend/ebios_rm/serializers.py
@@ -160,6 +160,7 @@ class OperationalScenarioReadSerializer(BaseModelSerializer):
     attack_paths = FieldsRelatedField(many=True)
     threats = FieldsRelatedField(many=True)
     likelihood = serializers.JSONField(source="get_likelihood_display")
+    gravity = serializers.JSONField(source="get_gravity_display")
 
     class Meta:
         model = OperationalScenario
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index 1ff8e9333..601d30e06 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -1000,5 +1000,6 @@
 	"likely": "Likely",
 	"unlikely": "Unlikely",
 	"veryLikely": "Very likely",
-	"certain": "Certain"
+	"certain": "Certain",
+	"minor": "Minor"
 }
diff --git a/frontend/src/lib/components/Forms/ModelForm.svelte b/frontend/src/lib/components/Forms/ModelForm.svelte
index afc9eb231..939955bce 100644
--- a/frontend/src/lib/components/Forms/ModelForm.svelte
+++ b/frontend/src/lib/components/Forms/ModelForm.svelte
@@ -273,7 +273,7 @@
 	{:else if URLModel === 'attack-paths'}
 		<AttackPathForm {form} {model} {cacheLocks} {formDataCache} {initialData} />
 	{:else if URLModel === 'operational-scenarios'}
-		<OperationalScenarioForm {form} {model} {cacheLocks} {formDataCache} {initialData} {context}/>
+		<OperationalScenarioForm {form} {model} {cacheLocks} {formDataCache} {initialData} {context} />
 	{/if}
 	<div class="flex flex-row justify-between space-x-4">
 		{#if closeModal}
diff --git a/frontend/src/lib/utils/crud.ts b/frontend/src/lib/utils/crud.ts
index a6ed45334..b413e40f2 100644
--- a/frontend/src/lib/utils/crud.ts
+++ b/frontend/src/lib/utils/crud.ts
@@ -692,7 +692,13 @@ export const URL_MODEL_MAP: ModelMap = {
 		foreignKeyFields: [
 			{ field: 'ebios_rm_study', urlModel: 'ebios-rm' },
 			{ field: 'threats', urlModel: 'threats' },
-			{ field: 'attack_paths', urlModel: 'attack-paths', endpointUrl: 'ebios-rm/attack-paths', urlParams: 'ebios_rm_study=', detail: true },
+			{
+				field: 'attack_paths',
+				urlModel: 'attack-paths',
+				endpointUrl: 'ebios-rm/attack-paths',
+				urlParams: 'ebios_rm_study=',
+				detail: true
+			}
 		],
 		selectFields: [{ field: 'likelihood', valueType: 'number', detail: true }]
 	}
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 1b0c7b45a..dadfb90bb 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
@@ -52,7 +52,10 @@ export const load: LayoutServerLoad = async (event) => {
 			let url = keyModel.endpointUrl
 				? `${BASE_API_URL}/${keyModel.endpointUrl}/${queryParams}`
 				: `${BASE_API_URL}/${keyModel.urlModel}/${queryParams}`;
-			if (['assets', 'attack-paths'].includes(keyModel.urlModel) && ['feared-events', 'operational-scenarios'].includes(event.params.model)) {
+			if (
+				['assets', 'attack-paths'].includes(keyModel.urlModel) &&
+				['feared-events', 'operational-scenarios'].includes(event.params.model)
+			) {
 				url = `${BASE_API_URL}/${keyModel.endpointUrl || keyModel.urlModel}/${queryParams}${object.ebios_rm_study}`;
 			}
 			const response = await event.fetch(url);
diff --git a/frontend/src/routes/(app)/(internal)/[model=urlmodel]/[id=uuid]/edit/+page.svelte b/frontend/src/routes/(app)/(internal)/[model=urlmodel]/[id=uuid]/edit/+page.svelte
index 3f8b8b4d0..5551caac7 100644
--- a/frontend/src/routes/(app)/(internal)/[model=urlmodel]/[id=uuid]/edit/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/[model=urlmodel]/[id=uuid]/edit/+page.svelte
@@ -16,6 +16,6 @@
 	selectOptions={data.selectOptions}
 	foreignKeys={data.foreignKeys}
 	model={data.model}
-	customNameDescription={customNameDescription}
+	{customNameDescription}
 	context="edit"
 />
diff --git a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-four/operational-scenario/+page.server.ts b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-four/operational-scenario/+page.server.ts
index f5d61cb84..dc296d006 100644
--- a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-four/operational-scenario/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-four/operational-scenario/+page.server.ts
@@ -36,7 +36,9 @@ export const load: PageServerLoad = async ({ params, fetch }) => {
 
 	for (const keyField of foreignKeyFields) {
 		const keyModel = getModelInfo(keyField.urlModel);
-		const queryParams = keyField.urlParams ? `?${keyField.urlParams}${keyField.detail ? params.id : ''}` : '';
+		const queryParams = keyField.urlParams
+			? `?${keyField.urlParams}${keyField.detail ? params.id : ''}`
+			: '';
 		const url = keyModel.endpointUrl
 			? `${BASE_API_URL}/${keyModel.endpointUrl}/${queryParams}`
 			: `${BASE_API_URL}/${keyModel.urlModel}/${queryParams}`;
diff --git a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-four/operational-scenario/+page.svelte b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-four/operational-scenario/+page.svelte
index 733f7ca25..feeb89c3f 100644
--- a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-four/operational-scenario/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-four/operational-scenario/+page.svelte
@@ -21,7 +21,8 @@
 			ref: CreateModal,
 			props: {
 				form: data.createForm,
-				model: data.model
+				model: data.model,
+				customNameDescription: true
 			}
 		};
 		let modal: ModalSettings = {
@@ -64,7 +65,12 @@
 	});
 </script>
 
-<ModelTable source={data.table} deleteForm={data.deleteForm} {URLModel} detailQueryParameter={`activity=${activeActivity}`}>
+<ModelTable
+	source={data.table}
+	deleteForm={data.deleteForm}
+	{URLModel}
+	detailQueryParameter={`activity=${activeActivity}`}
+>
 	<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)/operational-scenarios/[id=uuid]/+page.server.ts b/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.server.ts
index eccc23efc..890f34279 100644
--- a/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.server.ts
@@ -34,4 +34,4 @@ export const load: PageServerLoad = async (event) => {
 	};
 
 	return { data, table };
-};
\ No newline at end of file
+};
diff --git a/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
index 9d1e24b8b..4c24d40ee 100644
--- a/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
@@ -21,12 +21,18 @@
 		}
 	});
 
-    const likelihoodChoices = [
-        { label: m.unlikely(), value: 0 },
-        { label: m.likely(), value: 1 },
-        { label: m.veryLikely(), value: 2 },
-        { label: m.certain(), value: 3 },
-    ];
+	const likelihoodChoices = [
+		{ label: m.unlikely(), value: 0 },
+		{ label: m.likely(), value: 1 },
+		{ label: m.veryLikely(), value: 2 },
+		{ label: m.certain(), value: 3 }
+	];
+	const gravityChoices = [
+		{ label: m.minor(), value: 0 },
+		{ label: m.significant(), value: 1 },
+		{ label: m.important(), value: 2 },
+		{ label: m.critical(), value: 3 }
+	];
 </script>
 
 <div class="card p-4 bg-white shadow-lg">
@@ -55,12 +61,12 @@
 				<i class="fa-solid fa-pen-to-square mr-2" data-testid="edit-button" />
 				{m.edit()}
 			</a>
-            {#if operationalScenario.description}
+			{#if operationalScenario.description}
 				<p class="text-gray-600">{operationalScenario.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">
+			<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-table text-gray-500 opacity-75"></i>
 					<span>{m.attackPaths()}</span>
@@ -73,7 +79,7 @@
 					URLModel="attack-paths"
 				></ModelTable>
 			</div>
-            <div class="w-full p-4 bg-gray-50 border rounded-md shadow-sm">
+			<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-biohazard text-red-500"></i>
 					<span>{m.threats()}</span>
@@ -102,11 +108,9 @@
 					: 'text-gray-500'}">{m.activityTwo()}</span
 			>
 			<h1
-				class="font-bold text-xl {activeActivity === 'two'
-					? 'text-primary-500'
-					: 'text-gray-500'}"
+				class="font-bold text-xl {activeActivity === 'two' ? 'text-primary-500' : 'text-gray-500'}"
 			>
-                {m.ebiosWs4_2()}
+				{m.ebiosWs4_2()}
 			</h1>
 			<p>
 				{#if operationalScenario.is_selected}
@@ -115,27 +119,58 @@
 					<span class="badge bg-red-200 text-red-700">{m.notSelected()}</span>
 				{/if}
 			</p>
-            <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">
+			<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-dice text-black opacity-75"></i>
 					<span>{m.likelihood()}</span>
 				</h3>
-                <div class="grid grid-cols-4 gap-2 p-2">
-                    {#each likelihoodChoices as choice}
-                        {#if operationalScenario.likelihood.value === choice.value}
-                            <div style="background-color: {operationalScenario.likelihood.hexcolor}" class="flex flex-col items-center justify-center border rounded-md p-4 font-semibold">
-                                <span>{choice.label}</span>
-                                <span>({choice.value})</span>
-                            </div>
-                        {:else}
-                            <div class="flex flex-col items-center justify-center border rounded-md bg-gray-200 p-4 text-gray-500">
-                                <span>{choice.label}</span>
-                                <span>({choice.value})</span>
-                            </div>
-                        {/if}
-                    {/each}
-                </div>
-            </div>
+				<div class="grid grid-cols-4 gap-2 p-2">
+					{#each likelihoodChoices as choice}
+						{#if operationalScenario.likelihood.value === choice.value}
+							<div
+								style="background-color: {operationalScenario.likelihood.hexcolor}"
+								class="flex flex-col items-center justify-center border rounded-md p-4 font-semibold"
+							>
+								<span>{choice.label}</span>
+								<span>({choice.value})</span>
+							</div>
+						{:else}
+							<div
+								class="flex flex-col items-center justify-center border rounded-md bg-gray-200 p-4 text-gray-500"
+							>
+								<span>{choice.label}</span>
+								<span>({choice.value})</span>
+							</div>
+						{/if}
+					{/each}
+				</div>
+			</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-bomb text-black opacity-75"></i>
+					<span>{m.gravity()}</span>
+				</h3>
+				<div class="grid grid-cols-4 gap-2 p-2">
+					{#each gravityChoices as choice}
+						{#if operationalScenario.gravity.value === choice.value}
+							<div
+								style="background-color: {operationalScenario.gravity.hexcolor}"
+								class="flex flex-col items-center justify-center border rounded-md p-4 font-semibold"
+							>
+								<span>{choice.label}</span>
+								<span>({choice.value})</span>
+							</div>
+						{:else}
+							<div
+								class="flex flex-col items-center justify-center border rounded-md bg-gray-200 p-4 text-gray-500"
+							>
+								<span>{choice.label}</span>
+								<span>({choice.value})</span>
+							</div>
+						{/if}
+					{/each}
+				</div>
+			</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>
@@ -149,4 +184,4 @@
 			</div>
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>

From 77962c094752fbc89e13c62b3830fc6255cfbb59 Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Mon, 16 Dec 2024 09:42:16 +0100
Subject: [PATCH 19/29] fix: typo

---
 backend/ebios_rm/models.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/ebios_rm/models.py b/backend/ebios_rm/models.py
index 02c852e0e..315f06a66 100644
--- a/backend/ebios_rm/models.py
+++ b/backend/ebios_rm/models.py
@@ -407,7 +407,7 @@ def save(self, *args, **kwargs):
 
     @property
     def gravity(self):
-        return self.ro_to_couple.get_gravity
+        return self.ro_to_couple.get_gravity()
 
 
 class OperationalScenario(AbstractBaseModel, FolderMixin):

From 293070bdeeb681cf97375ca63204a1ccb3a7b479 Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Mon, 16 Dec 2024 11:40:02 +0100
Subject: [PATCH 20/29] style: improve detailed view

---
 backend/ebios_rm/models.py                    |  43 ++++-
 backend/ebios_rm/serializers.py               |   2 +
 frontend/messages/en.json                     |   3 +-
 .../[id=uuid]/+page.svelte                    | 181 +++++++++++-------
 4 files changed, 151 insertions(+), 78 deletions(-)

diff --git a/backend/ebios_rm/models.py b/backend/ebios_rm/models.py
index 315f06a66..abc2cdf4c 100644
--- a/backend/ebios_rm/models.py
+++ b/backend/ebios_rm/models.py
@@ -12,6 +12,7 @@
 )
 from iam.models import FolderMixin, User
 from tprm.models import Entity
+import json
 
 
 class EbiosRMStudy(NameDescriptionMixin, ETADueDateMixin, FolderMixin):
@@ -453,6 +454,23 @@ def risk_matrix(self):
     def parsed_matrix(self):
         return self.risk_matrix.parse_json_translated()
 
+    @property
+    def ref_id(self):
+        sorted_operational_scenarios = list(
+            OperationalScenario.objects.filter(
+                ebios_rm_study=self.ebios_rm_study
+            ).order_by("created_at")
+        )
+        return sorted_operational_scenarios.index(self) + 1
+
+    @property
+    def gravity(self):
+        gravity = -1
+        for attack_path in self.attack_paths.all():
+            if attack_path.gravity > gravity:
+                gravity = attack_path.gravity
+        return gravity
+
     def get_likelihood_display(self):
         if self.likelihood < 0:
             return {
@@ -468,11 +486,21 @@ def get_likelihood_display(self):
         }
 
     def get_gravity_display(self):
-        gravity = -1
-        for attack_path in self.attack_paths.all():
-            if attack_path.gravity > gravity:
-                gravity = attack_path.gravity
-        if gravity < 0:
+        if self.gravity < 0:
+            return {
+                "abbreviation": "--",
+                "name": "--",
+                "description": "not rated",
+                "value": -1,
+            }
+        risk_matrix = self.parsed_matrix
+        return {
+            **risk_matrix["impact"][self.gravity],
+            "value": self.gravity,
+        }
+
+    def get_risk_level_display(self):
+        if self.likelihood < 0 or self.gravity < 0:
             return {
                 "abbreviation": "--",
                 "name": "--",
@@ -480,7 +508,8 @@ def get_gravity_display(self):
                 "value": -1,
             }
         risk_matrix = self.parsed_matrix
+        risk_index = risk_matrix["grid"][self.likelihood][self.gravity]
         return {
-            **risk_matrix["impact"][gravity],
-            "value": gravity,
+            **risk_matrix["risk"][risk_index],
+            "value": risk_index,
         }
diff --git a/backend/ebios_rm/serializers.py b/backend/ebios_rm/serializers.py
index 20256f96c..3a052d016 100644
--- a/backend/ebios_rm/serializers.py
+++ b/backend/ebios_rm/serializers.py
@@ -161,6 +161,8 @@ class OperationalScenarioReadSerializer(BaseModelSerializer):
     threats = FieldsRelatedField(many=True)
     likelihood = serializers.JSONField(source="get_likelihood_display")
     gravity = serializers.JSONField(source="get_gravity_display")
+    risk_level = serializers.JSONField(source="get_risk_level_display")
+    ref_id = serializers.CharField()
 
     class Meta:
         model = OperationalScenario
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index dcdeaefbc..1a9d9af3e 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -993,7 +993,8 @@
 	"noAuthor": "No author assigned",
 	"noReviewer": "No reviewer assigned",
 	"selectAudit": "Select audit",
-	"operarionalScenario": "Operational scenario",
+	"operationalScenario": "Operational scenario",
+	"operationalScenarioRefId": "Operational scenario {refId}",
 	"operationalScenarios": "Operational scenarios",
 	"addOperationalScenario": "Add operational scenario",
 	"workshopFour": "Workshop 4",
diff --git a/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
index 4c24d40ee..4a0fedf0e 100644
--- a/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
@@ -3,13 +3,15 @@
 	import * as m from '$paraglide/messages';
 	import { page } from '$app/stores';
 	import { pageTitle } from '$lib/utils/stores';
-	import { safeTranslate } from '$lib/utils/i18n';
 	import ModelTable from '$lib/components/ModelTable/ModelTable.svelte';
+	import { popup, type PopupSettings } from '@skeletonlabs/skeleton';
 
 	export let data: PageData;
 
 	const operationalScenario = data.data;
 
+	pageTitle.set(m.operationalScenarioRefId({ refId: operationalScenario.ref_id }));
+
 	let activeActivity: string | null = null;
 	$page.url.searchParams.forEach((value, key) => {
 		if (key === 'activity' && value === 'one') {
@@ -21,22 +23,42 @@
 		}
 	});
 
-	const likelihoodChoices = [
-		{ label: m.unlikely(), value: 0 },
-		{ label: m.likely(), value: 1 },
-		{ label: m.veryLikely(), value: 2 },
-		{ label: m.certain(), value: 3 }
-	];
-	const gravityChoices = [
-		{ label: m.minor(), value: 0 },
-		{ label: m.significant(), value: 1 },
-		{ label: m.important(), value: 2 },
-		{ label: m.critical(), value: 3 }
-	];
+	const popupLikelihood: PopupSettings = {
+		event: 'click',
+		target: 'popupLikelihood',
+		placement: 'bottom'
+	};
+	const popupGravity: PopupSettings = {
+		event: 'click',
+		target: 'popupGravity',
+		placement: 'bottom'
+	};
+	const popupRiskLevel: PopupSettings = {
+		event: 'click',
+		target: 'popupRiskLevel',
+		placement: 'bottom'
+	};
 </script>
 
 <div class="card p-4 bg-white shadow-lg">
-	<div class="flex flex-col space-y-4">
+	<div class="flex flex-col space-y-4 items-center">
+		<h1 class="flex font-bold text-2xl space-x-2">
+			<span
+				><a
+					class="text-primary-700 hover:text-primary-500"
+					href="/ebios-rm/{operationalScenario.ebios_rm_study.id}"
+					>{operationalScenario.ebios_rm_study.str}</a
+				>
+				- {m.operationalScenarioRefId({ refId: operationalScenario.ref_id })}</span
+			>
+			<p class="flex items-center">
+				{#if operationalScenario.is_selected}
+					<span class="badge bg-green-200 text-green-700">{m.selected()}</span>
+				{:else}
+					<span class="badge bg-red-200 text-red-700">{m.notSelected()}</span>
+				{/if}
+			</p>
+		</h1>
 		<div
 			id="activityOne"
 			class="relative p-4 space-y-4 rounded-md w-full flex flex-col items-center justify-center
@@ -112,63 +134,82 @@
 			>
 				{m.ebiosWs4_2()}
 			</h1>
-			<p>
-				{#if operationalScenario.is_selected}
-					<span class="badge bg-green-200 text-green-700">{m.selected()}</span>
-				{:else}
-					<span class="badge bg-red-200 text-red-700">{m.notSelected()}</span>
-				{/if}
-			</p>
-			<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-dice text-black opacity-75"></i>
-					<span>{m.likelihood()}</span>
-				</h3>
-				<div class="grid grid-cols-4 gap-2 p-2">
-					{#each likelihoodChoices as choice}
-						{#if operationalScenario.likelihood.value === choice.value}
-							<div
-								style="background-color: {operationalScenario.likelihood.hexcolor}"
-								class="flex flex-col items-center justify-center border rounded-md p-4 font-semibold"
-							>
-								<span>{choice.label}</span>
-								<span>({choice.value})</span>
-							</div>
-						{:else}
-							<div
-								class="flex flex-col items-center justify-center border rounded-md bg-gray-200 p-4 text-gray-500"
-							>
-								<span>{choice.label}</span>
-								<span>({choice.value})</span>
-							</div>
-						{/if}
-					{/each}
+			<div
+				class="flex items-center w-full p-4 bg-gray-50 border rounded-md shadow-sm space-x-4 justify-between"
+			>
+				<div
+					style="background-color: {operationalScenario.likelihood.hexcolor}"
+					class="flex flex-col items-center justify-center border rounded-md p-4 font-semibold w-full"
+				>
+					<div
+						class="card bg-black text-gray-200 p-4 z-20"
+						style="color: {operationalScenario.likelihood.hexcolor}"
+						data-popup={'popupLikelihood'}
+					>
+						<p data-testid="likelihood-description" class="font-semibold">
+							{operationalScenario.likelihood.description}
+						</p>
+						<div class="arrow bg-black" />
+					</div>
+					<h3 class="font-semibold text-lg text-gray-700 flex items-center space-x-2">
+						<i class="fa-solid fa-dice text-black opacity-75"></i>
+						<span>{m.likelihood()}</span>
+					</h3>
+					<span>{operationalScenario.likelihood.name}</span>
+					<i
+						class="fa-solid fa-circle-info cursor-pointer hover:opacity-70"
+						use:popup={popupLikelihood}
+					></i>
 				</div>
-			</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-bomb text-black opacity-75"></i>
-					<span>{m.gravity()}</span>
-				</h3>
-				<div class="grid grid-cols-4 gap-2 p-2">
-					{#each gravityChoices as choice}
-						{#if operationalScenario.gravity.value === choice.value}
-							<div
-								style="background-color: {operationalScenario.gravity.hexcolor}"
-								class="flex flex-col items-center justify-center border rounded-md p-4 font-semibold"
-							>
-								<span>{choice.label}</span>
-								<span>({choice.value})</span>
-							</div>
-						{:else}
-							<div
-								class="flex flex-col items-center justify-center border rounded-md bg-gray-200 p-4 text-gray-500"
-							>
-								<span>{choice.label}</span>
-								<span>({choice.value})</span>
-							</div>
-						{/if}
-					{/each}
+				<i class="fa-solid fa-xmark"></i>
+				<div
+					style="background-color: {operationalScenario.gravity.hexcolor}"
+					class="flex flex-col items-center justify-center border rounded-md p-4 font-semibold w-full"
+				>
+					<div
+						class="card bg-black text-gray-200 p-4 z-20"
+						style="color: {operationalScenario.gravity.hexcolor}"
+						data-popup={'popupGravity'}
+					>
+						<p data-testid="gravity-description" class="font-semibold">
+							{operationalScenario.gravity.description}
+						</p>
+						<div class="arrow bg-black" />
+					</div>
+					<h3 class="font-semibold text-lg text-gray-700 flex items-center space-x-2">
+						<i class="fa-solid fa-bomb text-black opacity-75"></i>
+						<span>{m.gravity()}</span>
+					</h3>
+					<span>{operationalScenario.gravity.name}</span>
+					<i
+						class="fa-solid fa-circle-info cursor-pointer hover:opacity-70"
+						use:popup={popupGravity}
+					></i>
+				</div>
+				<i class="fa-solid fa-equals"></i>
+				<div
+					style="background-color: {operationalScenario.risk_level.hexcolor}"
+					class="flex flex-col items-center justify-center border rounded-md p-4 font-semibold w-full"
+				>
+					<div
+						class="card bg-black text-gray-200 p-4 z-20"
+						style="color: {operationalScenario.risk_level.hexcolor}"
+						data-popup={'popupRiskLevel'}
+					>
+						<p data-testid="risk-level-description" class="font-semibold">
+							{operationalScenario.risk_level.description}
+						</p>
+						<div class="arrow bg-black" />
+					</div>
+					<h3 class="font-semibold text-lg text-gray-700 flex items-center space-x-2">
+						<i class="fa-solid fa-circle-radiation text-black opacity-75"></i>
+						<span>{m.riskLevel()}</span>
+					</h3>
+					<span>{operationalScenario.risk_level.name}</span>
+					<i
+						class="fa-solid fa-circle-info cursor-pointer hover:opacity-70"
+						use:popup={popupRiskLevel}
+					></i>
 				</div>
 			</div>
 			<div class="w-full p-4 bg-gray-50 border rounded-md shadow-sm">

From 7eebaf3d4b36204c97798ac8f74cd07f5797da78 Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Mon, 16 Dec 2024 13:11:14 +0100
Subject: [PATCH 21/29] Revert "feat: change operational scenario/attack path
 relationship"

---
 .../ModelForm/OperationalScenarioForm.svelte  | 21 ++++++++++---------
 .../[id=uuid]/+page.svelte                    |  2 +-
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/frontend/src/lib/components/Forms/ModelForm/OperationalScenarioForm.svelte b/frontend/src/lib/components/Forms/ModelForm/OperationalScenarioForm.svelte
index fc5707127..8dd9c15b5 100644
--- a/frontend/src/lib/components/Forms/ModelForm/OperationalScenarioForm.svelte
+++ b/frontend/src/lib/components/Forms/ModelForm/OperationalScenarioForm.svelte
@@ -72,16 +72,17 @@
 		bind:cachedValue={formDataCache['threats']}
 		label={m.threats()}
 	/>
-	<AutocompleteSelect
-		multiple
-		{form}
-		options={getOptions({
-			objects: model.foreignKeys['attack_paths'],
-			label: 'str'
-		})}
-		field="attack_paths"
-		label={m.attackPaths()}
-	/>
+	{#if context !== 'edit'}
+		<AutocompleteSelect
+			{form}
+			options={getOptions({
+				objects: model.foreignKeys['attack_path'],
+				label: 'str'
+			})}
+			field="attack_path"
+			label={m.attackPath()}
+		/>
+	{/if}
 </div>
 <div
 	class="relative p-2 space-y-2 rounded-md {activeActivity === 'two'
diff --git a/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
index 4a0fedf0e..014516140 100644
--- a/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
@@ -91,7 +91,7 @@
 			<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-table text-gray-500 opacity-75"></i>
-					<span>{m.attackPaths()}</span>
+					<span>{m.attackPath()}</span>
 				</h3>
 				<ModelTable
 					backgroundColor="bg-gray-50"

From 16a8a65f1afb9eead25a07232809dc2d8d76c28d Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Mon, 16 Dec 2024 13:27:48 +0100
Subject: [PATCH 22/29] feat: adapt front to back update

---
 backend/ebios_rm/models.py                                | 7 ++-----
 frontend/messages/en.json                                 | 3 ++-
 .../Forms/ModelForm/OperationalScenarioForm.svelte        | 8 ++++----
 frontend/src/lib/utils/schemas.ts                         | 2 +-
 frontend/src/lib/utils/table.ts                           | 4 ++--
 .../operational-scenarios/[id=uuid]/+page.svelte          | 4 ++--
 6 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/backend/ebios_rm/models.py b/backend/ebios_rm/models.py
index 148fc790b..f331adc07 100644
--- a/backend/ebios_rm/models.py
+++ b/backend/ebios_rm/models.py
@@ -469,11 +469,7 @@ def ref_id(self):
 
     @property
     def gravity(self):
-        gravity = -1
-        for attack_path in self.attack_paths.all():
-            if attack_path.gravity > gravity:
-                gravity = attack_path.gravity
-        return gravity
+        return self.attack_path.gravity
 
     def get_likelihood_display(self):
         if self.likelihood < 0:
@@ -482,6 +478,7 @@ def get_likelihood_display(self):
                 "name": "--",
                 "description": "not rated",
                 "value": -1,
+                "hexcolor": "#f9fafb"
             }
         risk_matrix = self.parsed_matrix
         return {
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index 1a9d9af3e..cf202473a 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -1003,5 +1003,6 @@
 	"unlikely": "Unlikely",
 	"veryLikely": "Very likely",
 	"certain": "Certain",
-	"minor": "Minor"
+	"minor": "Minor",
+	"operatingModesDescription": "Operating modes description"
 }
diff --git a/frontend/src/lib/components/Forms/ModelForm/OperationalScenarioForm.svelte b/frontend/src/lib/components/Forms/ModelForm/OperationalScenarioForm.svelte
index 8dd9c15b5..116a1205c 100644
--- a/frontend/src/lib/components/Forms/ModelForm/OperationalScenarioForm.svelte
+++ b/frontend/src/lib/components/Forms/ModelForm/OperationalScenarioForm.svelte
@@ -53,10 +53,10 @@
 	</p>
 	<TextArea
 		{form}
-		field="description"
-		label={m.description()}
-		cacheLock={cacheLocks['description']}
-		bind:cachedValue={formDataCache['description']}
+		field="operating_modes_description"
+		label={m.operatingModesDescription()}
+		cacheLock={cacheLocks['operating_modes_description']}
+		bind:cachedValue={formDataCache['operating_modes_description']}
 		data-focusindex="1"
 	/>
 	<AutocompleteSelect
diff --git a/frontend/src/lib/utils/schemas.ts b/frontend/src/lib/utils/schemas.ts
index d45a34522..d084df323 100644
--- a/frontend/src/lib/utils/schemas.ts
+++ b/frontend/src/lib/utils/schemas.ts
@@ -458,7 +458,7 @@ export const operationalScenarioSchema = z.object({
 	ebios_rm_study: z.string(),
 	attack_path: z.string().uuid(),
 	threats: z.string().uuid().optional().array().optional(),
-	description: z.string(),
+	operating_modes_description: z.string(),
 	likelihood: z.number().optional().default(-1),
 	is_selected: z.boolean().optional().default(false),
 	justification: z.string().optional()
diff --git a/frontend/src/lib/utils/table.ts b/frontend/src/lib/utils/table.ts
index c1eacb9cf..a0532f21f 100644
--- a/frontend/src/lib/utils/table.ts
+++ b/frontend/src/lib/utils/table.ts
@@ -601,7 +601,7 @@ export const listViewFields: ListViewFieldsConfig = {
 		body: ['risk_origin', 'target_objective', 'stakeholders', 'description']
 	},
 	'operational-scenarios': {
-		head: ['description', 'threats', 'likelihood'],
-		body: ['description', 'threats', 'likelihood']
+		head: ['operatingModesDescription', 'threats', 'likelihood'],
+		body: ['operatoig_modes_descriptionn', 'threats', 'likelihood']
 	}
 };
diff --git a/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
index 014516140..048817c2e 100644
--- a/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
@@ -83,8 +83,8 @@
 				<i class="fa-solid fa-pen-to-square mr-2" data-testid="edit-button" />
 				{m.edit()}
 			</a>
-			{#if operationalScenario.description}
-				<p class="text-gray-600">{operationalScenario.description}</p>
+			{#if operationalScenario.operating_modes_description}
+				<p class="text-gray-600">{operationalScenario.operating_modes_description}</p>
 			{:else}
 				<p class="text-gray-600">{m.noDescription()}</p>
 			{/if}

From e94af9bd55239ff5c610d2bcf196ce4cb63af689 Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Mon, 16 Dec 2024 13:28:58 +0100
Subject: [PATCH 23/29] chore: typo

---
 backend/ebios_rm/models.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/ebios_rm/models.py b/backend/ebios_rm/models.py
index f331adc07..7bbdd41a1 100644
--- a/backend/ebios_rm/models.py
+++ b/backend/ebios_rm/models.py
@@ -478,7 +478,7 @@ def get_likelihood_display(self):
                 "name": "--",
                 "description": "not rated",
                 "value": -1,
-                "hexcolor": "#f9fafb"
+                "hexcolor": "#f9fafb",
             }
         risk_matrix = self.parsed_matrix
         return {

From 96cbd8b878c5fe3cf97d0612c768e5e82bd7b5a8 Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Mon, 16 Dec 2024 14:07:04 +0100
Subject: [PATCH 24/29] style: adapt workshop 4 ux

---
 backend/ebios_rm/models.py                    |  8 +++
 backend/ebios_rm/serializers.py               |  4 +-
 frontend/messages/en.json                     |  3 +-
 frontend/src/lib/utils/table.ts               |  2 +-
 .../[id=uuid]/+page.svelte                    | 55 +++++++++++++++----
 5 files changed, 57 insertions(+), 15 deletions(-)

diff --git a/backend/ebios_rm/models.py b/backend/ebios_rm/models.py
index 7bbdd41a1..07c5e6e33 100644
--- a/backend/ebios_rm/models.py
+++ b/backend/ebios_rm/models.py
@@ -471,6 +471,14 @@ def ref_id(self):
     def gravity(self):
         return self.attack_path.gravity
 
+    @property
+    def stakeholders(self):
+        return self.attack_path.stakeholders.all()
+
+    @property
+    def ro_to(self):
+        return self.attack_path.ro_to_couple
+
     def get_likelihood_display(self):
         if self.likelihood < 0:
             return {
diff --git a/backend/ebios_rm/serializers.py b/backend/ebios_rm/serializers.py
index dad215695..970106371 100644
--- a/backend/ebios_rm/serializers.py
+++ b/backend/ebios_rm/serializers.py
@@ -157,7 +157,9 @@ class OperationalScenarioReadSerializer(BaseModelSerializer):
     str = serializers.CharField(source="__str__")
     ebios_rm_study = FieldsRelatedField()
     folder = FieldsRelatedField()
-    attack_path = FieldsRelatedField()
+    attack_path = FieldsRelatedField(["id", "name", "description"])
+    stakeholders = FieldsRelatedField(many=True)
+    ro_to = FieldsRelatedField(["risk_origin", "target_objective"])
     threats = FieldsRelatedField(many=True)
     likelihood = serializers.JSONField(source="get_likelihood_display")
     gravity = serializers.JSONField(source="get_gravity_display")
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index cf202473a..3daf2e04f 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -1004,5 +1004,6 @@
 	"veryLikely": "Very likely",
 	"certain": "Certain",
 	"minor": "Minor",
-	"operatingModesDescription": "Operating modes description"
+	"operatingModesDescription": "Operating modes description",
+	"noStakeholders": "No stakeholders"
 }
diff --git a/frontend/src/lib/utils/table.ts b/frontend/src/lib/utils/table.ts
index a0532f21f..844034bb4 100644
--- a/frontend/src/lib/utils/table.ts
+++ b/frontend/src/lib/utils/table.ts
@@ -602,6 +602,6 @@ export const listViewFields: ListViewFieldsConfig = {
 	},
 	'operational-scenarios': {
 		head: ['operatingModesDescription', 'threats', 'likelihood'],
-		body: ['operatoig_modes_descriptionn', 'threats', 'likelihood']
+		body: ['operating_modes_description', 'threats', 'likelihood']
 	}
 };
diff --git a/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
index 048817c2e..f7ccd995a 100644
--- a/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
@@ -88,18 +88,49 @@
 			{: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-table text-gray-500 opacity-75"></i>
-					<span>{m.attackPath()}</span>
-				</h3>
-				<ModelTable
-					backgroundColor="bg-gray-50"
-					regionBody="bg-gray-50"
-					regionHeadCell="uppercase bg-gray-50 text-gray-700"
-					source={data.table}
-					URLModel="attack-paths"
-				></ModelTable>
+			<div class="flex flex-col space-y-2 items-center">
+				<div class="flex flex-col items-center space-x-2">
+					<span class="font-semibold text-lg text-gray-700"
+						><i class="fa-solid fa-shuffle"></i> {m.attackPath()}</span
+					>
+					<p class="text-gray-600">{operationalScenario.attack_path.name}</p>
+					{#if operationalScenario.attack_path.description}
+						<p class="text-gray-600">{operationalScenario.attack_path.description}</p>
+					{/if}
+				</div>
+				<div class="grid grid-cols-3 gap-12 items-center">
+					<div
+						class="flex flex-col space-y-4 p-4 bg-red-200 border-red-400 border rounded-md shadow-sm text-center"
+					>
+						<h4 class="font-semibold text-gray-600">{m.riskOrigin()}</h4>
+						<i class="fa-solid fa-skull-crossbones text-3xl"></i>
+						<p class="badge text-white bg-red-500 capitalize">
+							{operationalScenario.ro_to.risk_origin}
+						</p>
+					</div>
+					<div
+						class="flex flex-col space-y-4 p-4 bg-violet-200 border-violet-400 border rounded-md shadow-sm text-center"
+					>
+						<h4 class="font-semibold text-gray-600">{m.stakeholders()}</h4>
+						<i class="fa-solid fa-globe text-3xl"></i>
+						{#each operationalScenario.stakeholders as stakeholder}
+							<p class="badge text-white bg-violet-500">
+								<a class="anchor text-white" href="/stakeholders/{stakeholder.id}"
+									>{stakeholder.str}</a
+								>
+							</p>
+						{:else}
+							<p class="text-gray-300 italic">{m.noStakeholders()}</p>
+						{/each}
+					</div>
+					<div
+						class="flex flex-col space-y-4 p-4 bg-blue-200 border-blue-400 border rounded-md shadow-sm text-center"
+					>
+						<h4 class="font-semibold text-gray-600">{m.targetObjective()}</h4>
+						<i class="fa-solid fa-bullseye text-3xl"></i>
+						<p class="badge text-white bg-blue-500">{operationalScenario.ro_to.target_objective}</p>
+					</div>
+				</div>
 			</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">

From 8c383da9d68c6e4cff6acd6547a4523d8b00c15d Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Mon, 16 Dec 2024 14:15:45 +0100
Subject: [PATCH 25/29] style: improve layout

---
 .../[id=uuid]/+page.svelte                    | 36 ++++++++++---------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
index f7ccd995a..48b9ffc0d 100644
--- a/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
@@ -42,23 +42,32 @@
 
 <div class="card p-4 bg-white shadow-lg">
 	<div class="flex flex-col space-y-4 items-center">
-		<h1 class="flex font-bold text-2xl space-x-2">
-			<span
+		<div class="flex items-center justify-between w-full">
+			<div class="flex font-bold text-2xl space-x-2">
+				<span
 				><a
 					class="text-primary-700 hover:text-primary-500"
 					href="/ebios-rm/{operationalScenario.ebios_rm_study.id}"
 					>{operationalScenario.ebios_rm_study.str}</a
 				>
 				- {m.operationalScenarioRefId({ refId: operationalScenario.ref_id })}</span
+				>
+				<p class="flex items-center">
+					{#if operationalScenario.is_selected}
+						<span class="badge bg-green-200 text-green-700">{m.selected()}</span>
+					{:else}
+						<span class="badge bg-red-200 text-red-700">{m.notSelected()}</span>
+					{/if}
+				</p>
+			</div>
+			<a
+				href={`${$page.url.pathname}/edit?activity=${activeActivity}&next=${$page.url.pathname}?activity=${activeActivity}`}
+				class="btn variant-filled-primary h-fit justify-self-end"
 			>
-			<p class="flex items-center">
-				{#if operationalScenario.is_selected}
-					<span class="badge bg-green-200 text-green-700">{m.selected()}</span>
-				{:else}
-					<span class="badge bg-red-200 text-red-700">{m.notSelected()}</span>
-				{/if}
-			</p>
-		</h1>
+				<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 justify-center
@@ -76,13 +85,6 @@
 			>
 				{m.ebiosWs4_1()}
 			</h1>
-			<a
-				href={`${$page.url.pathname}/edit?activity=${activeActivity}&next=${$page.url.pathname}?activity=${activeActivity}`}
-				class="btn variant-filled-primary h-fit absolute top-2 right-4"
-			>
-				<i class="fa-solid fa-pen-to-square mr-2" data-testid="edit-button" />
-				{m.edit()}
-			</a>
 			{#if operationalScenario.operating_modes_description}
 				<p class="text-gray-600">{operationalScenario.operating_modes_description}</p>
 			{:else}

From e019e5d68bf9afef426f9eb4ee436996c8b656c4 Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Mon, 16 Dec 2024 14:21:58 +0100
Subject: [PATCH 26/29] style: update workshop 2 icons

---
 .../src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.svelte  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.svelte
index f3418afcc..b62a50b71 100644
--- a/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.svelte
@@ -91,12 +91,12 @@
 					<span class="text-xs text-gray-500">{m.motivation()}</span>
 					<span class="badge text-sm font-bold">{safeTranslate(roto.motivation)}</span>
 				</p>
-				<span>x</span>
+				<i class="fa-solid fa-xmark"></i>
 				<p class="flex flex-col items-center">
 					<span class="text-xs text-gray-500">{m.resources()}</span>
 					<span class="badge text-sm font-bold">{safeTranslate(roto.resources)}</span>
 				</p>
-				<span>=</span>
+				<i class="fa-solid fa-equals"></i>
 				<p class="flex flex-col items-center">
 					<span class="text-xs text-gray-500">{m.pertinence()}</span>
 					<span class="badge text-sm font-bold {pertinenceColor[roto.pertinence]}"

From 434723688d72bcc642ac3a1c075a1130ba570890 Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Mon, 16 Dec 2024 15:09:30 +0100
Subject: [PATCH 27/29] feat: filter used attack paths

---
 backend/ebios_rm/views.py      | 17 ++++++++++++++---
 frontend/src/lib/utils/crud.ts |  2 +-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/backend/ebios_rm/views.py b/backend/ebios_rm/views.py
index 6d35d48a1..bee8cc0ee 100644
--- a/backend/ebios_rm/views.py
+++ b/backend/ebios_rm/views.py
@@ -1,3 +1,4 @@
+import django_filters as df
 from core.serializers import RiskMatrixReadSerializer
 from core.views import BaseModelViewSet as AbstractBaseModelViewSet
 from core.serializers import RiskMatrixReadSerializer
@@ -123,12 +124,22 @@ def category(self, request):
         return Response(dict(Stakeholder.Category.choices))
 
 
+class AttackPathFilter(df.FilterSet):
+    used = df.BooleanFilter(method="is_used", label="Used")
+    
+    def is_used(self, queryset, name, value):
+        if value:
+            return queryset.filter(operational_scenario__isnull=False)
+        return queryset.filter(operational_scenario__isnull=True)
+    class Meta:
+        model = AttackPath
+        fields = ["ebios_rm_study", "is_selected", "used"]
+
+
 class AttackPathViewSet(BaseModelViewSet):
     model = AttackPath
 
-    filterset_fields = [
-        "ebios_rm_study",
-    ]
+    filterset_class = AttackPathFilter
 
 
 class OperationalScenarioViewSet(BaseModelViewSet):
diff --git a/frontend/src/lib/utils/crud.ts b/frontend/src/lib/utils/crud.ts
index 74b28bdbc..a076556f0 100644
--- a/frontend/src/lib/utils/crud.ts
+++ b/frontend/src/lib/utils/crud.ts
@@ -696,7 +696,7 @@ export const URL_MODEL_MAP: ModelMap = {
 				field: 'attack_path',
 				urlModel: 'attack-paths',
 				endpointUrl: 'ebios-rm/attack-paths',
-				urlParams: 'ebios_rm_study=',
+				urlParams: 'is_selected=true&used=false&ebios_rm_study=',
 				detail: true
 			}
 		],

From 618574e5adb907187b1705811220ef3c4345d670 Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Mon, 16 Dec 2024 15:10:05 +0100
Subject: [PATCH 28/29] chore: format

---
 backend/ebios_rm/views.py                            |  3 ++-
 .../operational-scenarios/[id=uuid]/+page.svelte     | 12 ++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/backend/ebios_rm/views.py b/backend/ebios_rm/views.py
index bee8cc0ee..5c9515d04 100644
--- a/backend/ebios_rm/views.py
+++ b/backend/ebios_rm/views.py
@@ -126,11 +126,12 @@ def category(self, request):
 
 class AttackPathFilter(df.FilterSet):
     used = df.BooleanFilter(method="is_used", label="Used")
-    
+
     def is_used(self, queryset, name, value):
         if value:
             return queryset.filter(operational_scenario__isnull=False)
         return queryset.filter(operational_scenario__isnull=True)
+
     class Meta:
         model = AttackPath
         fields = ["ebios_rm_study", "is_selected", "used"]
diff --git a/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
index 48b9ffc0d..0a14446a3 100644
--- a/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
@@ -45,12 +45,12 @@
 		<div class="flex items-center justify-between w-full">
 			<div class="flex font-bold text-2xl space-x-2">
 				<span
-				><a
-					class="text-primary-700 hover:text-primary-500"
-					href="/ebios-rm/{operationalScenario.ebios_rm_study.id}"
-					>{operationalScenario.ebios_rm_study.str}</a
-				>
-				- {m.operationalScenarioRefId({ refId: operationalScenario.ref_id })}</span
+					><a
+						class="text-primary-700 hover:text-primary-500"
+						href="/ebios-rm/{operationalScenario.ebios_rm_study.id}"
+						>{operationalScenario.ebios_rm_study.str}</a
+					>
+					- {m.operationalScenarioRefId({ refId: operationalScenario.ref_id })}</span
 				>
 				<p class="flex items-center">
 					{#if operationalScenario.is_selected}

From 1c81f05f485e4d75885af0fb00b2eca6a1043fd6 Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Mon, 16 Dec 2024 15:50:30 +0100
Subject: [PATCH 29/29] feat: redirect to newly created risk assessment

---
 .../(internal)/ebios-rm/[id=uuid]/+page.server.ts      |  5 ++---
 .../(app)/(internal)/ebios-rm/[id=uuid]/+page.svelte   | 10 +++++++++-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/+page.server.ts b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/+page.server.ts
index 06293b581..ad26bedfc 100644
--- a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/+page.server.ts
@@ -33,12 +33,11 @@ export const load: PageServerLoad = async ({ params, fetch }) => {
 
 export const actions: Actions = {
 	create: async (event) => {
-		// const redirectToWrittenObject = Boolean(event.params.model === 'entity-assessments');
 		return defaultWriteFormAction({
 			event,
 			urlModel: 'risk-assessments',
-			action: 'create'
-			// redirectToWrittenObject: redirectToWrittenObject
+			action: 'create',
+			redirectToWrittenObject: true
 		});
 	}
 };
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 1c99e6677..baa5afe9a 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
@@ -3,16 +3,20 @@
 	import { safeTranslate } from '$lib/utils/i18n';
 	import Tile from './Tile.svelte';
 	import { page } from '$app/stores';
-	import type { PageData } from './$types';
+	import type { PageData, ActionData } from './$types';
 	import { breadcrumbObject } from '$lib/utils/stores';
 	import type { ModalComponent, ModalSettings, ModalStore } from '@skeletonlabs/skeleton';
 	import { getModalStore } from '@skeletonlabs/skeleton';
 	import CreateModal from '$lib/components/Modals/CreateModal.svelte';
 	import MissingConstraintsModal from '$lib/components/Modals/MissingConstraintsModal.svelte';
 	import { checkConstraints } from '$lib/utils/crud';
+	import { goto } from '$app/navigation';
+	import { getSecureRedirect } from '$lib/utils/helpers';
+
 	const modalStore: ModalStore = getModalStore();
 
 	export let data: PageData;
+	export let form: ActionData;
 
 	$: breadcrumbObject.set(data.data);
 
@@ -146,6 +150,10 @@
 		}
 		modalStore.trigger(modal);
 	}
+
+	$: if (form && form.redirect) {
+		goto(getSecureRedirect(form.redirect));
+	}
 </script>
 
 <div class="h-full w-full p-8">