Add risk assessment tab

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

packages/ui/src/Molecules/Select/ImpactOptions.stories.tsx

@@ -0,0 +1,21 @@
+import { ImpactOptions } from "./ImpactOptions.tsx";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Select } from "../../Atoms/Select/Select.tsx";
+
+export default {
+    title: "Molecules/Select/ImpactSelect",
+    component: ImpactOptions,
+    argTypes: {},
+} satisfies Meta<typeof ImpactOptions>;
+
+type Story = StoryObj<typeof ImpactOptions>;
+
+export const Default: Story = {
+    render() {
+        return (
+            <Select placeholder="Select impact">
+                <ImpactOptions />
+            </Select>
+        );
+    },
+};

packages/ui/src/Molecules/Select/ImpactOptions.tsx

@@ -0,0 +1,47 @@
+import { Option } from "../../Atoms/Select/Select";
+import { useTranslate } from "@probo/i18n";
+
+export function ImpactOptions() {
+    const { __ } = useTranslate();
+
+    const descriptions = {
+        LOW: {
+            label: __("Low"),
+            description: __("Minimal impact on business"),
+        },
+        MEDIUM: {
+            label: __("Medium"),
+            description: __("Moderate impact on business"),
+        },
+        HIGH: {
+            label: __("High"),
+            description: __("Significant business impact"),
+        },
+        CRITICAL: {
+            label: __("Critical"),
+            description: __("Critical to business operations"),
+        },
+    } as const;
+
+    return (
+        <>
+            {Object.entries(descriptions).map(([key, description]) => (
+                <Option
+                    key={key}
+                    value={key}
+                    className="border-b border-border-low"
+                >
+                    <span>
+                        <span className="text-sm font-bold">
+                            {description.label}
+                        </span>
+                        ,{" "}
+                        <span className="text-sm text-txt-secondary">
+                            {description.description}
+                        </span>
+                    </span>
+                </Option>
+            ))}
+        </>
+    );
+}

packages/ui/src/Molecules/Select/SentitivityOptions.stories.tsx

@@ -0,0 +1,21 @@
+import { SentitivityOptions } from "./SentitivityOptions.tsx";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Select } from "../../Atoms/Select/Select.tsx";
+
+export default {
+    title: "Molecules/Select/SentitivitySelect",
+    component: SentitivityOptions,
+    argTypes: {},
+} satisfies Meta<typeof SentitivityOptions>;
+
+type Story = StoryObj<typeof SentitivityOptions>;
+
+export const Default: Story = {
+    render() {
+        return (
+            <Select placeholder="Select sensitivity">
+                <SentitivityOptions />
+            </Select>
+        );
+    },
+};

packages/ui/src/Molecules/Select/SentitivityOptions.tsx

@@ -0,0 +1,51 @@
+import { Option } from "../../Atoms/Select/Select";
+import { useTranslate } from "@probo/i18n";
+
+export function SentitivityOptions() {
+    const { __ } = useTranslate();
+
+    const descriptions = {
+        NONE: {
+            label: __("None"),
+            description: __("No sensitive data"),
+        },
+        LOW: {
+            label: __("Low"),
+            description: __("Public or non-sensitive data"),
+        },
+        MEDIUM: {
+            label: __("Medium"),
+            description: __("Internal/restricted data"),
+        },
+        HIGH: {
+            label: __("High"),
+            description: __("Confidential data"),
+        },
+        CRITICAL: {
+            label: __("Critical"),
+            description: __("Regulated/PII/financial data"),
+        },
+    } as const;
+
+    return (
+        <>
+            {Object.entries(descriptions).map(([key, description]) => (
+                <Option
+                    key={key}
+                    value={key}
+                    className="border-b border-border-low"
+                >
+                    <span>
+                        <span className="text-sm font-bold">
+                            {description.label}
+                        </span>
+                        ,{" "}
+                        <span className="text-sm text-txt-secondary">
+                            {description.description}
+                        </span>
+                    </span>
+                </Option>
+            ))}
+        </>
+    );
+}