feat: add risk scores in main overview page and make risk matrix selected value more clear

[dev] [Marfuen] mariano/sale-46-add-basic-risk-score

Author: github-actions[bot]

apps/app/src/app/(app)/[orgId]/vendors/(overview)/components/VendorsTable.test.tsx

@@ -239,4 +239,43 @@ describe('VendorsTable', () => {
     expect(screen.getByText('Acme Corp')).toBeInTheDocument();
     expect(screen.getByText('Cloud')).toBeInTheDocument();
   });
+
+  it('renders the INHERENT RISK column with a numeric score for assessed vendors', () => {
+    setMockPermissions({});
+
+    render(
+      <VendorsTable
+        vendors={mockVendors}
+        assignees={mockAssignees}
+        orgId="org-1"
+      />,
+    );
+
+    // Column header
+    expect(screen.getByText('INHERENT RISK')).toBeInTheDocument();
+    // Acme Corp (possible × moderate) → raw 9 → score 4/10
+    expect(screen.getByText('4/10')).toBeInTheDocument();
+  });
+
+  it('shows an em-dash for vendors that have not been assessed', () => {
+    setMockPermissions({});
+
+    const notAssessedVendor = {
+      ...mockVendors[0],
+      id: 'vendor-2',
+      name: 'Pending Inc',
+      status: 'not_assessed',
+    };
+
+    render(
+      <VendorsTable
+        vendors={[notAssessedVendor]}
+        assignees={mockAssignees}
+        orgId="org-1"
+      />,
+    );
+
+    expect(screen.getByText('—')).toBeInTheDocument();
+    expect(screen.queryByText('1/10')).not.toBeInTheDocument();
+  });
 });

apps/app/src/app/(app)/[orgId]/vendors/(overview)/components/VendorsTable.tsx

@@ -1,9 +1,11 @@
 'use client';
 
 import { OnboardingLoadingAnimation } from '@/components/onboarding-loading-animation';
+import { RiskScoreBadge } from '@/components/risks/RiskScoreBadge';
+import { VendorStatus } from '@/components/vendor-status';
 import { usePermissions } from '@/hooks/use-permissions';
 import { useVendors, useVendorActions, type Vendor } from '@/hooks/use-vendors';
-import { VendorStatus } from '@/components/vendor-status';
+import { getRiskScore } from '@/lib/risk-score';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -168,7 +170,10 @@ export function VendorsTable({
 
   // Local state for search, sorting, and pagination
   const [searchQuery, setSearchQuery] = useState('');
-  const [sort, setSort] = useState<{ id: 'name' | 'updatedAt'; desc: boolean }>({
+  const [sort, setSort] = useState<{
+    id: 'name' | 'updatedAt' | 'inherentRisk';
+    desc: boolean;
+  }>({
     id: 'name',
     desc: false,
   });
@@ -319,15 +324,17 @@ export function VendorsTable({
 
     // Sort
     result.sort((a, b) => {
-      const aValue = sort.id === 'name' ? a.name : a.updatedAt;
-      const bValue = sort.id === 'name' ? b.name : b.updatedAt;
-
       if (sort.id === 'name') {
-        const comparison = (aValue as string).localeCompare(bValue as string);
+        const comparison = a.name.localeCompare(b.name);
+        return sort.desc ? -comparison : comparison;
+      }
+      if (sort.id === 'inherentRisk') {
+        const aScore = getRiskScore(a.inherentProbability, a.inherentImpact).raw;
+        const bScore = getRiskScore(b.inherentProbability, b.inherentImpact).raw;
+        const comparison = aScore - bScore;
         return sort.desc ? -comparison : comparison;
       }
-      const comparison =
-        new Date(aValue as string).getTime() - new Date(bValue as string).getTime();
+      const comparison = new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime();
       return sort.desc ? -comparison : comparison;
     });
 
@@ -385,15 +392,15 @@ export function VendorsTable({
     router.push(`/${orgId}/vendors/${vendorId}`);
   };
 
-  const handleSort = (columnId: 'name' | 'updatedAt') => {
+  const handleSort = (columnId: 'name' | 'updatedAt' | 'inherentRisk') => {
     if (sort.id === columnId) {
       setSort({ id: columnId, desc: !sort.desc });
     } else {
       setSort({ id: columnId, desc: false });
     }
   };
 
-  const getSortIcon = (columnId: 'name' | 'updatedAt') => {
+  const getSortIcon = (columnId: 'name' | 'updatedAt' | 'inherentRisk') => {
     if (sort.id !== columnId) {
       return <ArrowUpDown className="ml-1 h-3 w-3 text-muted-foreground" />;
     }
@@ -528,6 +535,16 @@ export function VendorsTable({
                   </button>
                 </TableHead>
                 <TableHead>STATUS</TableHead>
+                <TableHead>
+                  <button
+                    type="button"
+                    onClick={() => handleSort('inherentRisk')}
+                    className="flex items-center hover:text-foreground"
+                  >
+                    INHERENT RISK
+                    {getSortIcon('inherentRisk')}
+                  </button>
+                </TableHead>
                 <TableHead>CATEGORY</TableHead>
                 <TableHead>OWNER</TableHead>
                 {hasPermission('vendor', 'delete') && <TableHead>ACTIONS</TableHead>}
@@ -549,6 +566,16 @@ export function VendorsTable({
                     <TableCell>
                       <VendorStatusCell vendor={vendor} />
                     </TableCell>
+                    <TableCell>
+                      {vendor.status === 'not_assessed' ? (
+                        <Text variant="muted" size="sm">—</Text>
+                      ) : (
+                        <RiskScoreBadge
+                          likelihood={vendor.inherentProbability}
+                          impact={vendor.inherentImpact}
+                        />
+                      )}
+                    </TableCell>
                     <TableCell>
                       <Badge variant="secondary">
                         {CATEGORY_MAP[vendor.category] || vendor.category}

apps/app/src/components/risks/RiskScoreBadge.tsx

@@ -0,0 +1,42 @@
+import { cn } from '@/lib/utils';
+import type { Impact, Likelihood } from '@db';
+import { getRiskScore, type RiskLevel } from '@/lib/risk-score';
+
+const LEVEL_CLASSES: Record<RiskLevel, string> = {
+  'very-low':
+    'bg-emerald-500/15 border-emerald-500/40 text-emerald-700 dark:text-emerald-300',
+  low: 'bg-green-500/15 border-green-500/40 text-green-700 dark:text-green-300',
+  medium: 'bg-yellow-500/15 border-yellow-600/40 text-yellow-700 dark:text-yellow-300',
+  high: 'bg-orange-500/15 border-orange-500/40 text-orange-700 dark:text-orange-300',
+  'very-high': 'bg-red-500/15 border-red-500/40 text-red-700 dark:text-red-300',
+};
+
+const LEVEL_LABEL: Record<RiskLevel, string> = {
+  'very-low': 'Very low',
+  low: 'Low',
+  medium: 'Medium',
+  high: 'High',
+  'very-high': 'Very high',
+};
+
+export interface RiskScoreBadgeProps {
+  likelihood: Likelihood;
+  impact: Impact;
+  className?: string;
+}
+
+export function RiskScoreBadge({ likelihood, impact, className }: RiskScoreBadgeProps) {
+  const { score, level } = getRiskScore(likelihood, impact);
+  return (
+    <span
+      className={cn(
+        'inline-flex w-fit items-center rounded-md border px-2 py-0.5 text-xs font-medium tabular-nums',
+        LEVEL_CLASSES[level],
+        className,
+      )}
+      title={`${LEVEL_LABEL[level]} risk`}
+    >
+      {score}/10
+    </span>
+  );
+}

apps/app/src/components/risks/charts/RiskMatrixChart.tsx

@@ -1,25 +1,10 @@
 'use client';
 
+import { IMPACT_SCORES, LIKELIHOOD_SCORES, getRiskLevel } from '@/lib/risk-score';
 import { Impact, Likelihood } from '@db';
 import { Button, HStack, Section } from '@trycompai/design-system';
 import { useEffect, useState } from 'react';
 
-const LIKELIHOOD_SCORES: Record<Likelihood, number> = {
-  very_unlikely: 1,
-  unlikely: 2,
-  possible: 3,
-  likely: 4,
-  very_likely: 5,
-};
-
-const IMPACT_SCORES: Record<Impact, number> = {
-  insignificant: 1,
-  minor: 2,
-  moderate: 3,
-  major: 4,
-  severe: 5,
-};
-
 const VISUAL_LIKELIHOOD_ORDER: Likelihood[] = [
   Likelihood.very_likely,
   Likelihood.likely,
@@ -114,13 +99,7 @@ export function RiskMatrixChart({
       const likelihoodScore =
         LIKELIHOOD_SCORES[VISUAL_LIKELIHOOD_ORDER[probabilityLevels.indexOf(probability)]];
       const impactScore = IMPACT_SCORES[VISUAL_IMPACT_ORDER[impactLevels.indexOf(impact)]];
-      const score = likelihoodScore * impactScore;
-
-      let level: RiskCell['level'] = 'very-low';
-      if (score > 16) level = 'very-high';
-      else if (score > 9) level = 'high';
-      else if (score > 4) level = 'medium';
-      else if (score > 1) level = 'low';
+      const level = getRiskLevel(likelihoodScore * impactScore);
 
       return {
         probability,
@@ -207,7 +186,7 @@ export function RiskMatrixChart({
                         onClick={() => handleCellClick(probability, impact)}
                       >
                         {cell?.value && (
-                          <div className="h-3 w-3 animate-pulse rounded-full bg-white shadow-lg" />
+                          <div className="h-4 w-4 animate-pulse rounded-full bg-white shadow-lg ring-2 ring-slate-900/70 dark:ring-slate-100/80" />
                         )}
                       </div>
                     );

apps/app/src/lib/risk-score.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest';
+import { getRiskLevel, getRiskScore } from './risk-score';
+
+describe('getRiskScore', () => {
+  it('returns 1/10 very-low at the minimum corner (1×1)', () => {
+    expect(getRiskScore('very_unlikely', 'insignificant')).toEqual({
+      raw: 1,
+      score: 1,
+      level: 'very-low',
+    });
+  });
+
+  it('returns 10/10 very-high at the maximum corner (5×5)', () => {
+    expect(getRiskScore('very_likely', 'severe')).toEqual({
+      raw: 25,
+      score: 10,
+      level: 'very-high',
+    });
+  });
+
+  it('computes raw as likelihood × impact', () => {
+    expect(getRiskScore('possible', 'moderate').raw).toBe(9);
+    expect(getRiskScore('likely', 'major').raw).toBe(16);
+    expect(getRiskScore('very_likely', 'major').raw).toBe(20);
+  });
+
+  it('normalizes raw 1–25 into a 1–10 integer score', () => {
+    for (const l of ['very_unlikely', 'unlikely', 'possible', 'likely', 'very_likely'] as const) {
+      for (const i of ['insignificant', 'minor', 'moderate', 'major', 'severe'] as const) {
+        const { score } = getRiskScore(l, i);
+        expect(score).toBeGreaterThanOrEqual(1);
+        expect(score).toBeLessThanOrEqual(10);
+        expect(Number.isInteger(score)).toBe(true);
+      }
+    }
+  });
+});
+
+describe('getRiskLevel', () => {
+  it('matches the risk-matrix thresholds used elsewhere', () => {
+    expect(getRiskLevel(1)).toBe('very-low');
+    expect(getRiskLevel(2)).toBe('low');
+    expect(getRiskLevel(4)).toBe('low');
+    expect(getRiskLevel(5)).toBe('medium');
+    expect(getRiskLevel(9)).toBe('medium');
+    expect(getRiskLevel(10)).toBe('high');
+    expect(getRiskLevel(16)).toBe('high');
+    expect(getRiskLevel(17)).toBe('very-high');
+    expect(getRiskLevel(25)).toBe('very-high');
+  });
+});

apps/app/src/lib/risk-score.ts

@@ -0,0 +1,39 @@
+import { Impact, Likelihood } from '@db';
+
+export const LIKELIHOOD_SCORES: Record<Likelihood, number> = {
+  very_unlikely: 1,
+  unlikely: 2,
+  possible: 3,
+  likely: 4,
+  very_likely: 5,
+};
+
+export const IMPACT_SCORES: Record<Impact, number> = {
+  insignificant: 1,
+  minor: 2,
+  moderate: 3,
+  major: 4,
+  severe: 5,
+};
+
+export type RiskLevel = 'very-low' | 'low' | 'medium' | 'high' | 'very-high';
+
+export interface RiskScore {
+  raw: number;
+  score: number;
+  level: RiskLevel;
+}
+
+export function getRiskLevel(raw: number): RiskLevel {
+  if (raw > 16) return 'very-high';
+  if (raw > 9) return 'high';
+  if (raw > 4) return 'medium';
+  if (raw > 1) return 'low';
+  return 'very-low';
+}
+
+export function getRiskScore(likelihood: Likelihood, impact: Impact): RiskScore {
+  const raw = LIKELIHOOD_SCORES[likelihood] * IMPACT_SCORES[impact];
+  const score = Math.max(1, Math.ceil(raw / 2.5));
+  return { raw, score, level: getRiskLevel(raw) };
+}