Admin/panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
RKWojs
2025-11-14 15:17:29 +01:00
parent d3fa4df621
commit 1d8ee8b0ab
2 changed files with 83 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/app/api/dashboard/route.js
View File

@@ -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,25 +68,41 @@ 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
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
else if (tempDate.getMonth() === 7 && tempDate.getFullYear() === 2024) monthlyValue = 10841; // Aug 2024 (real data)
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
// 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
else if (tempDate.getMonth() === 7 && tempDate.getFullYear() === 2024) monthlyValue = 10841; // Aug 2024 (real data)
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);

47
src/app/dashboard/page.js
View File

@@ -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">