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] 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">