From a1f1b33e449cb5864a52cc902df07e42aa8c4e73 Mon Sep 17 00:00:00 2001
From: RKWojs <rkwojs@gmail.com>
Date: Fri, 14 Nov 2025 12:24:41 +0100
Subject: [PATCH] feat: enhance TeamLeadsDashboard with detailed realised vs
 unrealised values by project type and improved chart visualization

---
 src/app/api/dashboard/route.js |  66 ++++++++++++--
 src/app/dashboard/page.js      | 162 ++++++++++++++++++++++-----------
 2 files changed, 166 insertions(+), 62 deletions(-)

diff --git a/src/app/api/dashboard/route.js b/src/app/api/dashboard/route.js
index b21eef5..8421797 100644
--- a/src/app/api/dashboard/route.js
+++ b/src/app/api/dashboard/route.js
@@ -21,20 +21,39 @@ export async function GET(request) {
 		// Get all projects
 		const projects = getAllProjects();
 
-		// Calculate realised and unrealised values
-		let realisedValue = 0;
-		let unrealisedValue = 0;
+		// Calculate realised and unrealised values by project type
+		const projectTypes = ['design', 'design+construction', 'construction'];
+		const typeSummary = {};
+
+		projectTypes.forEach(type => {
+			typeSummary[type] = {
+				realisedValue: 0,
+				unrealisedValue: 0
+			};
+		});
 
 		projects.forEach(project => {
 			const value = parseFloat(project.wartosc_zlecenia) || 0;
+			const type = project.project_type;
+
+			if (!type || !projectTypes.includes(type)) return;
+
 			if (project.project_status === 'fulfilled' && project.completion_date && project.wartosc_zlecenia) {
-				realisedValue += value;
+				typeSummary[type].realisedValue += value;
 			} else if (project.wartosc_zlecenia && project.project_status !== 'cancelled') {
-				// Count all non-cancelled projects with values as unrealised
-				unrealisedValue += value;
+				typeSummary[type].unrealisedValue += value;
 			}
 		});
 
+		// Calculate overall totals
+		let realisedValue = 0;
+		let unrealisedValue = 0;
+
+		Object.values(typeSummary).forEach(summary => {
+			realisedValue += summary.realisedValue;
+			unrealisedValue += summary.unrealisedValue;
+		});
+
 		// Filter completed projects (those with completion_date and fulfilled status)
 		const completedProjects = projects.filter(project =>
 			project.completion_date &&
@@ -61,8 +80,24 @@ export async function GET(request) {
 				{ month: 'Dec 2024', value: 95000, cumulative: 958000 }
 			];
 			summary = {
-				realisedValue: 958000,
-				unrealisedValue: 1242000
+				total: {
+					realisedValue: 958000,
+					unrealisedValue: 1242000
+				},
+				byType: {
+					design: {
+						realisedValue: 320000,
+						unrealisedValue: 480000
+					},
+					'design+construction': {
+						realisedValue: 480000,
+						unrealisedValue: 520000
+					},
+					construction: {
+						realisedValue: 158000,
+						unrealisedValue: 242000
+					}
+				}
 			};
 		} else {
 			// Group by month and calculate monthly totals first
@@ -112,8 +147,19 @@ export async function GET(request) {
 		return NextResponse.json({
 			chartData,
 			summary: {
-				realisedValue: Math.round(realisedValue),
-				unrealisedValue: Math.round(unrealisedValue)
+				total: {
+					realisedValue: Math.round(realisedValue),
+					unrealisedValue: Math.round(unrealisedValue)
+				},
+				byType: Object.fromEntries(
+					Object.entries(typeSummary).map(([type, data]) => [
+						type,
+						{
+							realisedValue: Math.round(data.realisedValue),
+							unrealisedValue: Math.round(data.unrealisedValue)
+						}
+					])
+				)
 			}
 		});
 
diff --git a/src/app/dashboard/page.js b/src/app/dashboard/page.js
index 744f32b..f51d27c 100644
--- a/src/app/dashboard/page.js
+++ b/src/app/dashboard/page.js
@@ -127,64 +127,122 @@ export default function TeamLeadsDashboard() {
 					</div>
 				)}
 
-				<div className="mt-8">
-					<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-6">
-						Realised vs Unrealised Value
-					</h2>
+				<div className="mt-8 grid grid-cols-1 lg:grid-cols-3 gap-8">
+					{/* Main Total Chart */}
+					<div className="lg:col-span-1">
+						<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-6">
+							Total Portfolio
+						</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?.total ? (
+							<div className="h-64">
+								<ResponsiveContainer width="100%" height="100%">
+									<PieChart>
+										<Pie
+											data={[
+												{
+													name: 'Realised',
+													value: summaryData.total.realisedValue,
+													color: '#10b981'
+												},
+												{
+													name: 'Unrealised',
+													value: summaryData.total.unrealisedValue,
+													color: '#f59e0b'
+												}
+											]}
+											cx="50%"
+											cy="50%"
+											outerRadius={80}
+											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-64">
+								<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)}
+						{summaryData?.total && (
+							<div className="mt-4 grid grid-cols-1 gap-3">
+								<div className="bg-green-50 dark:bg-green-900/20 p-3 rounded-lg">
+									<div className="text-sm text-green-600 dark:text-green-400 font-medium">Realised Value</div>
+									<div className="text-xl font-bold text-green-700 dark:text-green-300">
+										{formatCurrency(summaryData.total.realisedValue)}
+									</div>
+								</div>
+								<div className="bg-amber-50 dark:bg-amber-900/20 p-3 rounded-lg">
+									<div className="text-sm text-amber-600 dark:text-amber-400 font-medium">Unrealised Value</div>
+									<div className="text-xl font-bold text-amber-700 dark:text-amber-300">
+										{formatCurrency(summaryData.total.unrealisedValue)}
+									</div>
 								</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>
+
+					{/* Project Type Charts */}
+					<div className="lg:col-span-2">
+						<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-6">
+							By Project Type
+						</h2>
+
+						<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+							{summaryData?.byType && Object.entries(summaryData.byType).map(([type, data]) => (
+								<div key={type} className="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
+									<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4 capitalize text-center">
+										{type.replace('+', ' + ')}
+									</h3>
+
+									{/* Mini pie chart */}
+									<div className="h-32 mb-4">
+										<ResponsiveContainer width="100%" height="100%">
+											<PieChart>
+												<Pie
+													data={[
+														{ name: 'Realised', value: data.realisedValue, color: '#10b981' },
+														{ name: 'Unrealised', value: data.unrealisedValue, color: '#f59e0b' }
+													]}
+													cx="50%"
+													cy="50%"
+													outerRadius={45}
+													dataKey="value"
+													label={({ percent }) => percent > 0.1 ? `${(percent * 100).toFixed(0)}%` : ''}
+												>
+													<Cell fill="#10b981" />
+													<Cell fill="#f59e0b" />
+												</Pie>
+												<Tooltip formatter={(value) => formatCurrency(value)} />
+											</PieChart>
+										</ResponsiveContainer>
+									</div>
+
+									<div className="space-y-3">
+										<div className="flex justify-between items-center">
+											<span className="text-sm text-green-600 dark:text-green-400">Realised</span>
+											<span className="text-sm font-semibold text-green-700 dark:text-green-300">
+												{formatCurrency(data.realisedValue)}
+											</span>
+										</div>
+										<div className="flex justify-between items-center">
+											<span className="text-sm text-amber-600 dark:text-amber-400">Unrealised</span>
+											<span className="text-sm font-semibold text-amber-700 dark:text-amber-300">
+												{formatCurrency(data.unrealisedValue)}
+											</span>
+										</div>
+									</div>
 								</div>
-							</div>
+							))}
 						</div>
-					)}
+					</div>
 				</div>
 			</div>
 		</div>