From 4b803b3b9758f3404f65966d4fac6a82c318d036 Mon Sep 17 00:00:00 2001
From: Abder <smimite@gmail.com>
Date: Mon, 2 Dec 2024 21:02:31 +0100
Subject: [PATCH] Ebios RM tiles (#1099)

---
 frontend/messages/en.json                     | 25 +++++++-
 frontend/messages/fr.json                     | 25 +++++++-
 .../ebios-rm/[id=uuid]/+page.svelte           | 47 ++++++++++++++
 .../(internal)/ebios-rm/[id=uuid]/Tile.svelte | 63 +++++++++++++++++++
 .../(internal)/experimental/+page.svelte      |  6 ++
 5 files changed, 164 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/+page.svelte
 create mode 100644 frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/Tile.svelte

diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index d7580d035..8be7b78d0 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -896,5 +896,28 @@
 	"p1": "P1",
 	"p2": "P2",
 	"p3": "P3",
-	"p4": "P4"
+	"p4": "P4",
+	"ebiosWs1": "Workshop 1: Framing and Security Foundation",
+	"ebiosWs2": "Workshop 2: Risk Sources",
+	"ebiosWs3": "Workshop 3: Strategic Scenarios",
+	"ebiosWs4": "Workshop 4: Operational Scenarios",
+	"ebiosWs5": "Workshop 5: Risk Treatment",
+	"ebiosWs1_1": "Define the study framework",
+	"ebiosWs1_2": "Define business and technical perimeter",
+	"ebiosWs1_3": "Identify feared events",
+	"ebiosWs1_4": "Determine the security foundation",
+	"ebiosWs2_1": "Identify risk sources and targeted objectives",
+	"ebiosWs2_2": "Evaluate RS/TO pairs",
+	"ebiosWs2_3": "Select RS/TO pairs",
+	"ebiosWs3_1": "Map the ecosystem",
+	"ebiosWs3_2": "Develop strategic scenarios",
+	"ebiosWs3_3": "Define security measures for the ecosystem",
+	"ebiosWs4_1": "Develop operational scenarios",
+	"ebiosWs4_2": "Evaluate the likelihood of operational scenarios",
+	"ebiosWs5_1": "Conduct a risk assessment",
+	"ebiosWs5_2": "Decide on risk treatment strategy",
+	"ebiosWs5_3": "Define security measures",
+	"ebiosWs5_4": "Assess and document residual risks",
+	"ebiosWs5_5": "Establish risk monitoring framework",
+	"activity": "Activity"
 }
diff --git a/frontend/messages/fr.json b/frontend/messages/fr.json
index e6c7f83fa..29ce9296c 100644
--- a/frontend/messages/fr.json
+++ b/frontend/messages/fr.json
@@ -872,5 +872,28 @@
 	"forgotPassword": "Mot de passe oublié",
 	"ssoSettingsUpdated": "Paramètres SSO mis à jour",
 	"scoreSemiColon": "Score:",
-	"mappingInferenceHelpText": "Ces variables sont fixes et ne changeront pas en fonction de la source."
+	"mappingInferenceHelpText": "Ces variables sont fixes et ne changeront pas en fonction de la source.",
+	"ebiosWs1": "Atelier 1 : Cadrage et Socle de sécurité",
+	"ebiosWs2": "Atelier 2 : Sources de risque",
+	"ebiosWs3": "Atelier 3 : Scénarios stratégiques",
+	"ebiosWs4": "Atelier 4 : Scenarios opértionnels",
+	"ebiosWs5": "Atelier 5 : Traitement du risque",
+	"ebiosWs1_1": "Définir le cadre de l’étude",
+	"ebiosWs1_2": "Définir le périmètre métier et technique",
+	"ebiosWs1_3": "Identifier les événements redoutés",
+	"ebiosWs1_4": "Déterminer le socle de sécurité",
+	"ebiosWs2_1": "Identifier les sources de risque et objectifs visés",
+	"ebiosWs2_2": "Évaluer les couples SR/OV",
+	"ebiosWs2_3": "Sélectionner les couples SR/OV",
+	"ebiosWs3_1": "Cartographier l’écosystème",
+	"ebiosWs3_2": "Élaborer les scénarios stratégiques",
+	"ebiosWs3_3": "Définir les mesures de sécurité sur l’écosystème",
+	"ebiosWs4_1": "Elaborer les scénarios opérationnels",
+	"ebiosWs4_2": "Evaluer la vraisemblance des scénarios opérationnel",
+	"ebiosWs5_1": "Réaliser une évaluation des risques",
+	"ebiosWs5_2": "Décider de la stratégie de traitement du risque",
+	"ebiosWs5_3": "Définir les mesures de sécurité",
+	"ebiosWs5_4": "Évaluer et documenter les risques résiduels",
+	"ebiosWs5_5": "Mettre en place le cadre de suivi des risques",
+	"activity": "Activité"
 }
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
new file mode 100644
index 000000000..33000896f
--- /dev/null
+++ b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/+page.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import * as m from '$paraglide/messages';
+	import { safeTranslate } from '$lib/utils/i18n';
+	import Tile from './Tile.svelte';
+	const data = {
+		ws1: [
+			{ title: safeTranslate(m.ebiosWs1_1()), status: 'done', href: '#' },
+			{ title: safeTranslate(m.ebiosWs1_2()), status: 'done', href: '#' },
+			{ title: safeTranslate(m.ebiosWs1_3()), status: 'to_do', href: '#' },
+			{ title: safeTranslate(m.ebiosWs1_4()), status: 'to_do', href: '#' }
+		],
+		ws2: [
+			{ title: safeTranslate(m.ebiosWs2_1()), status: 'to_do', href: '#' },
+			{ title: safeTranslate(m.ebiosWs2_2()), status: 'to_do', href: '#' },
+			{ title: safeTranslate(m.ebiosWs2_3()), status: 'to_do', href: '#' }
+		],
+		ws3: [
+			{ title: safeTranslate(m.ebiosWs3_1()), status: 'to_do', href: '#' },
+			{ title: safeTranslate(m.ebiosWs3_2()), status: 'to_do', href: '#' },
+			{ title: safeTranslate(m.ebiosWs3_3()), status: 'done', href: '#' }
+		],
+		ws4: [
+			{ title: safeTranslate(m.ebiosWs4_1()), status: 'to_do', href: '#' },
+			{ title: safeTranslate(m.ebiosWs4_2()), status: 'to_do', href: '#' }
+		],
+		ws5: [
+			{ title: safeTranslate(m.ebiosWs5_1()), status: 'done', href: '#' },
+			{ title: safeTranslate(m.ebiosWs5_2()), status: 'done', href: '#' },
+			{ title: safeTranslate(m.ebiosWs5_3()), status: 'to_do', href: '#' },
+			{ title: safeTranslate(m.ebiosWs5_4()), status: 'to_do', href: '#' },
+			{ title: safeTranslate(m.ebiosWs5_5()), status: 'done', href: '#' }
+		]
+	};
+</script>
+
+<div class="h-screen w-full p-8">
+	<div
+		class="card bg-white shadow-lg w-full h-full grid xl:grid-cols-3 lg:grid-cols-2 md:grid-cols-1 gap-8 p-8"
+	>
+		<Tile title={m.ebiosWs1()} accent_color="bg-pink-600" status="to_do" meta={data.ws1} />
+		<Tile title={m.ebiosWs2()} accent_color="bg-fuchsia-900" status="to_do" meta={data.ws2} />
+		<Tile title={m.ebiosWs3()} accent_color="bg-teal-500" status="to_do" meta={data.ws3} />
+		<Tile title={m.ebiosWs4()} accent_color="bg-yellow-600" status="to_do" meta={data.ws4} />
+		<Tile title={m.ebiosWs5()} accent_color="bg-red-500" status="to_do" meta={data.ws5} />
+		<Tile title={m.summary()} accent_color="bg-purple-800" status="to_do" />
+	</div>
+</div>
diff --git a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/Tile.svelte b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/Tile.svelte
new file mode 100644
index 000000000..00fe2faee
--- /dev/null
+++ b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/Tile.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+	import * as m from '$paraglide/messages';
+	import { safeTranslate } from '$lib/utils/i18n';
+
+	export let title = 'activity';
+	export let status = '';
+	export let meta = null;
+	export let href = '#';
+	export let accent_color = '';
+</script>
+
+<div class="p-5 {accent_color}">
+	<div class="rounded-lg bg-white p-4 flex flex-col justify-between h-full">
+		<div class="flex justify-between mb-2">
+			<div class="font-semibold">{title}</div>
+			<div class="text-xl" title={safeTranslate(status)}>
+				{#if status == 'to_do'}
+					<i class="fa-solid fa-exclamation"></i>
+				{:else if status == 'in_progress'}
+					<i class="fa-solid fa-spinner"></i>
+				{:else if status == 'done'}
+					<i class="fa-solid fa-check"></i>
+				{/if}
+			</div>
+		</div>
+		{#if meta}
+			<div class="flex mx-auto">
+				<div>
+					<ol class="relative text-gray-500 border-s border-gray-200">
+						{#each meta as step, i}
+							{#if step.status == 'done'}
+								<li class="mb-10 ms-6">
+									<a href={step.href} class="hover:text-purple-800">
+										<span
+											class="absolute flex items-center justify-center w-8 h-8 bg-green-200 rounded-full -start-4 ring-4 ring-white"
+										>
+											<i class="fa-solid fa-check"></i>
+										</span>
+										<h3 class="font-medium leading-tight">{m.activity()} {i + 1}</h3>
+										<p class="text-sm">{step.title}</p>
+									</a>
+								</li>
+							{:else}
+								<li class="mb-10 ms-6">
+									<a href={step.href} class="hover:text-purple-800">
+										<span
+											class="absolute flex items-center justify-center w-8 h-8 bg-gray-100 rounded-full -start-4 ring-4 ring-white"
+										>
+											<i class="fa-solid fa-clipboard-check"></i>
+										</span>
+										<h3 class="font-medium leading-tight">{m.activity()} {i + 1}</h3>
+										<p class="text-sm">{step.title}</p>
+									</a>
+								</li>
+							{/if}
+						{/each}
+					</ol>
+				</div>
+			</div>
+		{/if}
+		<div class="justify-end flex"></div>
+	</div>
+</div>
diff --git a/frontend/src/routes/(app)/(internal)/experimental/+page.svelte b/frontend/src/routes/(app)/(internal)/experimental/+page.svelte
index 7964bcdf6..d9a1f5d98 100644
--- a/frontend/src/routes/(app)/(internal)/experimental/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/experimental/+page.svelte
@@ -27,4 +27,10 @@
 		link="assets/graph"
 		tags={['analysis', 'assets']}
 	/>
+	<Article
+		title="Ebios RM (dev)"
+		desc="Tiles to manage the workshop"
+		link="/ebios-rm/5de0c0c3-678c-43f0-bdb6-b2ed434e1843"
+		tags={['analysis', 'risk']}
+	/>
 </div>