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

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,9 +78,29 @@ 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">
-				Dashboard
-			</h1>
+			<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">