feat: add realised vs unrealised value summary to TeamLeadsDashboard with pie chart visualization

src/app/dashboard/page.js

@@ -1,10 +1,11 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, BarChart, Bar, ComposedChart } from 'recharts';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, BarChart, Bar, ComposedChart, PieChart, Pie, Cell } from 'recharts';
 
 export default function TeamLeadsDashboard() {
 	const [chartData, setChartData] = useState([]);
+	const [summaryData, setSummaryData] = useState(null);
 	const [loading, setLoading] = useState(true);
 	const [error, setError] = useState(null);
 
@@ -19,7 +20,8 @@ export default function TeamLeadsDashboard() {
 				throw new Error('Failed to fetch dashboard data');
 			}
 			const data = await response.json();
-			setChartData(data);
+			setChartData(data.chartData || []);
+			setSummaryData(data.summary || null);
 		} catch (err) {
 			setError(err.message);
 		} finally {
@@ -125,8 +127,64 @@ export default function TeamLeadsDashboard() {
 					</div>
 				)}
 
-				<div className="mt-4 text-sm text-gray-600 dark:text-gray-400">
-					<p>This chart shows the cumulative value of completed projects over time, with monthly additions.</p>
+				<div className="mt-8">
+					<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-6">
+						Realised vs Unrealised Value
+					</h2>
+
+					{summaryData ? (
+						<div className="h-80">
+							<ResponsiveContainer width="100%" height="100%">
+								<PieChart>
+									<Pie
+										data={[
+											{
+												name: 'Realised',
+												value: summaryData.realisedValue,
+												color: '#10b981'
+											},
+											{
+												name: 'Unrealised',
+												value: summaryData.unrealisedValue,
+												color: '#f59e0b'
+											}
+										]}
+										cx="50%"
+										cy="50%"
+										outerRadius={100}
+										dataKey="value"
+										label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
+									>
+										<Cell fill="#10b981" />
+										<Cell fill="#f59e0b" />
+									</Pie>
+									<Tooltip formatter={(value) => formatCurrency(value)} />
+									<Legend />
+								</PieChart>
+							</ResponsiveContainer>
+						</div>
+					) : (
+						<div className="flex items-center justify-center h-80">
+							<div className="text-gray-500 dark:text-gray-400">No summary data available</div>
+						</div>
+					)}
+
+					{summaryData && (
+						<div className="mt-4 grid grid-cols-2 gap-4">
+							<div className="bg-green-50 dark:bg-green-900/20 p-4 rounded-lg">
+								<div className="text-sm text-green-600 dark:text-green-400 font-medium">Realised Value</div>
+								<div className="text-2xl font-bold text-green-700 dark:text-green-300">
+									{formatCurrency(summaryData.realisedValue)}
+								</div>
+							</div>
+							<div className="bg-amber-50 dark:bg-amber-900/20 p-4 rounded-lg">
+								<div className="text-sm text-amber-600 dark:text-amber-400 font-medium">Unrealised Value</div>
+								<div className="text-2xl font-bold text-amber-700 dark:text-amber-300">
+									{formatCurrency(summaryData.unrealisedValue)}
+								</div>
+							</div>
+						</div>
+					)}
 				</div>
 			</div>
 		</div>