feat: Add contract summary calculations and update dashboard to display data by contract

src/app/dashboard/page.js

@@ -284,6 +284,87 @@ export default function TeamLeadsDashboard() {
 						</div>
 					</div>
 				</div>
+
+				{/* By Contract Section */}
+				{summaryData?.byContract && Object.keys(summaryData.byContract).length > 0 && (
+					<div className="mt-8">
+						<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-6">
+							{t('teamDashboard.byContract')}
+						</h2>
+
+						<div className="h-96">
+							<ResponsiveContainer width="100%" height="100%">
+								<BarChart
+									data={Object.entries(summaryData.byContract).map(([contractNumber, data]) => ({
+										name: contractNumber,
+										fullName: data.contract_name,
+										realised: data.realisedValue,
+										unrealised: data.unrealisedValue,
+										total: data.totalValue
+									}))}
+									margin={{
+										top: 20,
+										right: 30,
+										left: 20,
+										bottom: 100,
+									}}
+								>
+									<CartesianGrid strokeDasharray="3 3" className="opacity-30" />
+									<XAxis
+										dataKey="name"
+										angle={-45}
+										textAnchor="end"
+										height={100}
+										className="text-gray-600 dark:text-gray-400"
+										fontSize={11}
+									/>
+									<YAxis
+										className="text-gray-600 dark:text-gray-400"
+										fontSize={12}
+										tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
+									/>
+									<Tooltip
+										content={({ active, payload }) => {
+											if (active && payload && payload.length) {
+												return (
+													<div className="bg-white dark:bg-gray-800 p-3 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg">
+														<p className="font-medium text-gray-900 dark:text-white mb-2">{payload[0].payload.fullName}</p>
+														<p className="text-sm text-gray-600 dark:text-gray-400 mb-2">{payload[0].payload.name}</p>
+														<p className="text-green-600 dark:text-green-400 text-sm">
+															{`${t('teamDashboard.realised')}: ${formatCurrency(payload[0].payload.realised)}`}
+														</p>
+														<p className="text-purple-600 dark:text-purple-400 text-sm">
+															{`${t('teamDashboard.unrealised')}: ${formatCurrency(payload[0].payload.unrealised)}`}
+														</p>
+														<p className="text-blue-600 dark:text-blue-400 text-sm font-semibold mt-1">
+															{`${t('teamDashboard.total')}: ${formatCurrency(payload[0].payload.total)}`}
+														</p>
+													</div>
+												);
+											}
+											return null;
+										}}
+									/>
+									<Legend />
+									<Bar
+										dataKey="realised"
+										stackId="a"
+										fill="#10b981"
+										name={t('teamDashboard.realised')}
+										radius={[0, 0, 0, 0]}
+									/>
+									<Bar
+										dataKey="unrealised"
+										stackId="a"
+										fill="#8b5cf6"
+										name={t('teamDashboard.unrealised')}
+										radius={[4, 4, 0, 0]}
+									/>
+								</BarChart>
+							</ResponsiveContainer>
+						</div>
+					</div>
+				)}
 			</div>
 		</PageContainer>
 	);