Align risk severity across views

Use the shared getSeverity helper from @probo/helpers in SeverityBadge
so the list view displays the same labels (Low/High/Critical) and
thresholds (0/5/15) as the detail view. Also fix the RisksChart legend
and getLevel thresholds to match.

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

packages/ui/src/Molecules/Badge/SeverityBadge.tsx

@@ -12,6 +12,7 @@
 // OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 // PERFORMANCE OF THIS SOFTWARE.
 
+import { getSeverity } from "@probo/helpers";
 import { useTranslate } from "@probo/i18n";
 
 import { Badge } from "../../Atoms/Badge/Badge";
@@ -20,26 +21,8 @@ type Props = {
   score: number;
 };
 
-const badgeVariant = (score: number) => {
-  if (score >= 15) {
-    return "danger";
-  }
-  if (score > 6) {
-    return "warning";
-  }
-  return "success";
-};
-
 export function SeverityBadge({ score }: Props) {
   const { __ } = useTranslate();
-  const label = () => {
-    if (score >= 15) {
-      return __("High");
-    }
-    if (score > 6) {
-      return __("Medium");
-    }
-    return __("Low");
-  };
-  return <Badge variant={badgeVariant(score)}>{label()}</Badge>;
+  const severity = getSeverity(__, score);
+  return <Badge variant={severity?.variant}>{severity?.label}</Badge>;
 }

packages/ui/src/Molecules/Risks/RisksChart.tsx

@@ -47,7 +47,7 @@ const getLevel = (score: number): 0 | 1 | 2 => {
   if (score >= 15) {
     return 2;
   }
-  if (score > 6) {
+  if (score >= 5) {
     return 1;
   }
   return 0;
@@ -62,7 +62,7 @@ const cellKey = (impact: number, likelihood: number) =>
 export function RisksChart({ organizationId, type, risks }: Props) {
   const { __ } = useTranslate();
 
-  const legend = [__("Low"), __("Medium"), __("High")];
+  const legend = [__("Low"), __("High"), __("Critical")];
 
   const impacts = getRiskImpacts(__).reverse();
   const likelihoods = getRiskLikelihoods(__);