From 1fd4fced7772693b560e84cc61e1091c131e4a93 Mon Sep 17 00:00:00 2001 From: Muhammad Mustapha Date: Wed, 17 Jun 2026 17:22:39 +0100 Subject: [PATCH] feat: implement risk trends dashboard with charts and comparisons --- apps/web/app/risk-trends/page.tsx | 92 +++++++++++++++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 apps/web/app/risk-trends/page.tsx diff --git a/apps/web/app/risk-trends/page.tsx b/apps/web/app/risk-trends/page.tsx new file mode 100644 index 0000000..955d1f9 --- /dev/null +++ b/apps/web/app/risk-trends/page.tsx @@ -0,0 +1,92 @@ +"use client"; + +import React, { useState } from 'react'; + +export default function RiskTrendsDashboard() { + const [timeFilter, setTimeFilter] = useState('30d'); + + // Mock data for charts + const historicalData = [ + { date: '2023-01-01', riskScore: 85 }, + { date: '2023-02-01', riskScore: 70 }, + { date: '2023-03-01', riskScore: 65 }, + { date: '2023-04-01', riskScore: 50 }, + { date: '2023-05-01', riskScore: 55 }, + { date: '2023-06-01', riskScore: 40 }, + ]; + + return ( +
+

+ Risk Trends Dashboard +

+ + {/* Time Filters */} +
+ + +
+ +
+ {/* Historical Charts */} +
+

Historical Risk Chart

+
+ {historicalData.map((data, i) => ( +
+
+
60 ? '#ef4444' : data.riskScore > 40 ? '#eab308' : '#22c55e', + height: `${data.riskScore}%`, + borderRadius: '4px 4px 0 0', + transition: 'height 0.3s ease' + }} title={`Risk Score: ${data.riskScore}`} /> +
+ {new Date(data.date).toLocaleString('default', { month: 'short' })} +
+ ))} +
+
+ + {/* Risk Comparisons */} +
+

Risk Comparisons

+
+
+ Engineering +
+ 45 + ↓ 10% +
+
+
+ Sales +
+ 72 + ↑ 5% +
+
+
+ Marketing +
+ 30 + - 0% +
+
+
+
+
+
+ ); +}