feat: enhance TeamLeadsDashboard with ComposedChart and improved tooltip for monthly and cumulative values

src/app/dashboard/page.js

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, BarChart, Bar, ComposedChart } from 'recharts';
 
 export default function TeamLeadsDashboard() {
 	const [chartData, setChartData] = useState([]);
@@ -38,14 +38,18 @@ export default function TeamLeadsDashboard() {
 
 	const CustomTooltip = ({ active, payload, label }) => {
 		if (active && payload && payload.length) {
+			// Find the monthly and cumulative values
+			const monthlyData = payload.find(p => p.dataKey === 'value');
+			const cumulativeData = payload.find(p => p.dataKey === 'cumulative');
+
 			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">{`Month: ${label}`}</p>
-					<p className="text-blue-600 dark:text-blue-400">
-						{`Monthly Value: ${formatCurrency(payload[0].value)}`}
+					<p className="text-blue-600 dark:text-blue-400 font-semibold">
+						{`Monthly Value: ${monthlyData ? formatCurrency(monthlyData.value) : 'N/A'}`}
 					</p>
-					<p className="text-green-600 dark:text-green-400">
-						{`Cumulative: ${formatCurrency(payload[1].value)}`}
+					<p className="text-green-600 dark:text-green-400 text-sm">
+						{`Cumulative: ${cumulativeData ? formatCurrency(cumulativeData.value) : 'N/A'}`}
 					</p>
 				</div>
 			);
@@ -79,10 +83,10 @@ export default function TeamLeadsDashboard() {
 				) : (
 					<div className="h-96">
 						<ResponsiveContainer width="100%" height="100%">
-							<LineChart
+							<ComposedChart
 								data={chartData}
 								margin={{
-									top: 5,
+									top: 20,
 									right: 30,
 									left: 20,
 									bottom: 5,
@@ -101,6 +105,12 @@ export default function TeamLeadsDashboard() {
 								/>
 								<Tooltip content={<CustomTooltip />} />
 								<Legend />
+								<Bar
+									dataKey="value"
+									fill="#3b82f6"
+									name="Monthly Value"
+									radius={[4, 4, 0, 0]}
+								/>
 								<Line
 									type="monotone"
 									dataKey="cumulative"
@@ -110,17 +120,7 @@ export default function TeamLeadsDashboard() {
 									dot={{ fill: '#10b981', strokeWidth: 2, r: 4 }}
 									activeDot={{ r: 6, stroke: '#10b981', strokeWidth: 2 }}
 								/>
-								<Line
-									type="monotone"
-									dataKey="value"
-									stroke="#3b82f6"
-									strokeWidth={2}
-									name="Monthly Value"
-									dot={{ fill: '#3b82f6', strokeWidth: 2, r: 3 }}
-									activeDot={{ r: 5, stroke: '#3b82f6', strokeWidth: 2 }}
-									strokeDasharray="5 5"
-								/>
-							</LineChart>
+							</ComposedChart>
 						</ResponsiveContainer>
 					</div>
 				)}