feat: add year selection filter to TeamLeadsDashboard and update API request accordingly

src/app/api/dashboard/route.js

@@ -18,6 +18,9 @@ export async function GET(request) {
 			return NextResponse.json({ error: "Forbidden" }, { status: 403 });
 		}
 
+		const { searchParams } = new URL(request.url);
+		const selectedYear = searchParams.get('year') ? parseInt(searchParams.get('year')) : null;
+
 		// Get all projects
 		const projects = getAllProjects();
 
@@ -65,18 +68,31 @@ export async function GET(request) {
 		let chartData;
 		let summary;
 		if (completedProjects.length === 0) {
-			// Generate continuous sample data from Jan 2024 to current month
+			// Generate continuous sample data based on selected year or default range
 			const currentDate = new Date();
-			const startDate = new Date(2024, 0, 1); // Jan 2024
+			let startDate, endDate;
+
+			if (selectedYear) {
+				startDate = new Date(selectedYear, 0, 1); // Jan 1st of selected year
+				endDate = new Date(selectedYear, 11, 31); // Dec 31st of selected year
+				if (endDate > currentDate) endDate = currentDate;
+			} else {
+				startDate = new Date(2024, 0, 1); // Jan 2024
+				endDate = currentDate;
+			}
+
 			chartData = [];
 			let cumulative = 0;
 
 			let tempDate = new Date(startDate);
-			while (tempDate <= currentDate) {
+			while (tempDate <= endDate) {
 				const monthName = tempDate.toLocaleDateString('en-US', { year: 'numeric', month: 'short' });
 				let monthlyValue = 0;
 
-				// Add some sample values for certain months
+				// Add some sample values for certain months (only if they match the selected year or no year selected)
+				const shouldAddData = !selectedYear || tempDate.getFullYear() === selectedYear;
+
+				if (shouldAddData) {
 					if (tempDate.getMonth() === 0 && tempDate.getFullYear() === 2024) monthlyValue = 50000; // Jan 2024
 					else if (tempDate.getMonth() === 1 && tempDate.getFullYear() === 2024) monthlyValue = 75000; // Feb 2024
 					else if (tempDate.getMonth() === 2 && tempDate.getFullYear() === 2024) monthlyValue = 60000; // Mar 2024
@@ -84,6 +100,9 @@ export async function GET(request) {
 					else if (tempDate.getMonth() === 8 && tempDate.getFullYear() === 2024) monthlyValue = 18942; // Sep 2024
 					else if (tempDate.getMonth() === 9 && tempDate.getFullYear() === 2024) monthlyValue = 13945; // Oct 2024
 					else if (tempDate.getMonth() === 10 && tempDate.getFullYear() === 2024) monthlyValue = 12542; // Nov 2024
+					else if (tempDate.getMonth() === 0 && tempDate.getFullYear() === 2025) monthlyValue = 25000; // Jan 2025
+					else if (tempDate.getMonth() === 1 && tempDate.getFullYear() === 2025) monthlyValue = 35000; // Feb 2025
+				}
 
 				cumulative += monthlyValue;
 				chartData.push({
@@ -158,6 +177,17 @@ export async function GET(request) {
 				startDate = new Date(startDate.getFullYear(), startDate.getMonth(), 1);
 			}
 
+			// If a specific year is selected, adjust the date range
+			if (selectedYear) {
+				startDate = new Date(selectedYear, 0, 1); // January 1st of selected year
+				endDate = new Date(selectedYear, 11, 31); // December 31st of selected year
+
+				// Don't go beyond current date
+				if (endDate > new Date()) {
+					endDate = new Date();
+				}
+			}
+
 			// Generate all months from start to current
 			const allMonths = {};
 			let currentDate = new Date(startDate);

src/app/dashboard/page.js

@@ -8,14 +8,21 @@ export default function TeamLeadsDashboard() {
 	const [summaryData, setSummaryData] = useState(null);
 	const [loading, setLoading] = useState(true);
 	const [error, setError] = useState(null);
+	const [selectedYear, setSelectedYear] = useState(null);
 
 	useEffect(() => {
 		fetchDashboardData();
-	}, []);
+	}, [selectedYear]);
 
 	const fetchDashboardData = async () => {
 		try {
-			const response = await fetch('/api/dashboard');
+			const params = new URLSearchParams();
+			if (selectedYear) {
+				params.append('year', selectedYear.toString());
+			}
+
+			const url = `/api/dashboard${params.toString() ? '?' + params.toString() : ''}`;
+			const response = await fetch(url);
 			if (!response.ok) {
 				throw new Error('Failed to fetch dashboard data');
 			}
@@ -29,6 +36,16 @@ export default function TeamLeadsDashboard() {
 		}
 	};
 
+	const currentYear = new Date().getFullYear();
+	const availableYears = [];
+	for (let year = currentYear; year >= 2023; year--) {
+		availableYears.push(year);
+	}
+
+	const handleYearChange = (year) => {
+		setSelectedYear(year === 'all' ? null : parseInt(year));
+	};
+
 	const formatCurrency = (value) => {
 		return new Intl.NumberFormat('pl-PL', {
 			style: 'currency',
@@ -61,10 +78,30 @@ export default function TeamLeadsDashboard() {
 
 	return (
 		<div className="container mx-auto px-4 py-8">
-			<h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-8">
+			<div className="flex items-center justify-between mb-8">
+				<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
 					Dashboard
 				</h1>
 
+				{/* Year Filter */}
+				<div className="flex items-center space-x-2">
+					<label htmlFor="year-select" className="text-sm font-medium text-gray-700 dark:text-gray-300">
+						Year:
+					</label>
+					<select
+						id="year-select"
+						value={selectedYear || 'all'}
+						onChange={(e) => handleYearChange(e.target.value)}
+						className="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+					>
+						<option value="all">All Years</option>
+						{availableYears.map(year => (
+							<option key={year} value={year}>{year}</option>
+						))}
+					</select>
+				</div>
+			</div>
+
 			<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
 				<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-6">
 					Project Completion Value Over Time