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

src/app/api/dashboard/route.js

@@ -21,6 +21,20 @@ export async function GET(request) {
 		// Get all projects
 		const projects = getAllProjects();
 
+		// Calculate realised and unrealised values
+		let realisedValue = 0;
+		let unrealisedValue = 0;
+
+		projects.forEach(project => {
+			const value = parseFloat(project.wartosc_zlecenia) || 0;
+			if (project.project_status === 'fulfilled' && project.completion_date && project.wartosc_zlecenia) {
+				realisedValue += value;
+			} else if (project.wartosc_zlecenia && project.project_status !== 'cancelled') {
+				// Count all non-cancelled projects with values as unrealised
+				unrealisedValue += value;
+			}
+		});
+
 		// Filter completed projects (those with completion_date and fulfilled status)
 		const completedProjects = projects.filter(project =>
 			project.completion_date &&
@@ -30,6 +44,7 @@ export async function GET(request) {
 
 		// If no data, return sample data for demonstration
 		let chartData;
+		let summary;
 		if (completedProjects.length === 0) {
 			chartData = [
 				{ month: 'Jan 2024', value: 50000, cumulative: 50000 },
@@ -45,6 +60,10 @@ export async function GET(request) {
 				{ month: 'Nov 2024', value: 88000, cumulative: 863000 },
 				{ month: 'Dec 2024', value: 95000, cumulative: 958000 }
 			];
+			summary = {
+				realisedValue: 958000,
+				unrealisedValue: 1242000
+			};
 		} else {
 			// Group by month and calculate monthly totals first
 			const monthlyData = {};
@@ -84,9 +103,19 @@ export async function GET(request) {
 				value: Math.round(monthlyData[monthKey].value),
 				cumulative: Math.round(monthlyData[monthKey].cumulative)
 			}));
+			summary = {
+				realisedValue: Math.round(realisedValue),
+				unrealisedValue: Math.round(unrealisedValue)
+			};
 		}
 
-		return NextResponse.json(chartData);
+		return NextResponse.json({
+			chartData,
+			summary: {
+				realisedValue: Math.round(realisedValue),
+				unrealisedValue: Math.round(unrealisedValue)
+			}
+		});
 
 	} catch (error) {
 		console.error('Dashboard API error:', error);

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">
+				<div className="mt-8">
-					<p>This chart shows the cumulative value of completed projects over time, with monthly additions.</p>
+					<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>