Add risk charts

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

apps/console2/src/pages/organizations/risks/FormRiskDialog.tsx

@@ -29,6 +29,7 @@ import type { FieldErrors } from "react-hook-form";
 import { useMutationWithToasts } from "../../../hooks/useMutationWithToasts";
 import type { FormRiskDialogMutation } from "./__generated__/FormRiskDialogMutation.graphql";
 import type { FormRiskDialogUpdateRiskMutation } from "./__generated__/FormRiskDialogUpdateRiskMutation.graphql";
+import { getRiskImpacts, getRiskLikelihoods } from "@probo/helpers";
 
 type Props = {
   trigger?: ReactNode;
@@ -276,11 +277,11 @@ function ImpactAndLikelihood({
           placeholder={__("Select impact level")}
           error={errors?.[`${prefix}Impact`]?.message}
         >
-          <Option value="1">1 - Negligible</Option>
-          <Option value="2">2 - Low</Option>
-          <Option value="3">3 - Moderate</Option>
-          <Option value="4">4 - Significant</Option>
-          <Option value="5">5 - Catastrophic</Option>
+          {getRiskImpacts(__).map((i) => (
+            <Option key={i.value} value={i.value}>
+              {i.value} - {i.label}
+            </Option>
+          ))}
         </ControlledField>
         <ControlledField
           control={control}
@@ -290,11 +291,11 @@ function ImpactAndLikelihood({
           placeholder={__("Select likelihood level")}
           error={errors?.[`${prefix}Likelihood`]?.message}
         >
-          <Option value="1">1 - Improbable</Option>
-          <Option value="2">2 - Remote</Option>
-          <Option value="3">3 - Occasional</Option>
-          <Option value="4">4 - Probable</Option>
-          <Option value="5">5 - Frequent</Option>
+          {getRiskLikelihoods(__).map((l) => (
+            <Option key={l.value} value={l.value}>
+              {l.value} - {l.label}
+            </Option>
+          ))}
         </ControlledField>
       </Card>
     </div>

apps/console2/src/pages/organizations/risks/RisksPage.tsx

@@ -14,6 +14,7 @@ import {
   IconTrashCan,
   IconPencil,
   ConfirmDialog,
+  RisksChart,
 } from "@probo/ui";
 import { useTranslate } from "@probo/i18n";
 import { IconPlusLarge } from "@probo/ui";
@@ -127,6 +128,19 @@ export default function RisksPage() {
           onSuccess={() => setEditedRisk(null)}
         />
       )}
+
+      <div className="grid grid-cols-2 gap-4">
+        <RisksChart
+          organizationId={organizationId}
+          type="inherent"
+          risks={risks}
+        />
+        <RisksChart
+          organizationId={organizationId}
+          type="residual"
+          risks={risks}
+        />
+      </div>
       <Table>
         <Thead>
           <Tr>