134 lines
4.0 KiB
JavaScript
134 lines
4.0 KiB
JavaScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, BarChart, Bar, ComposedChart } from 'recharts';
|
|
|
|
export default function TeamLeadsDashboard() {
|
|
const [chartData, setChartData] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
|
|
useEffect(() => {
|
|
fetchDashboardData();
|
|
}, []);
|
|
|
|
const fetchDashboardData = async () => {
|
|
try {
|
|
const response = await fetch('/api/dashboard');
|
|
if (!response.ok) {
|
|
throw new Error('Failed to fetch dashboard data');
|
|
}
|
|
const data = await response.json();
|
|
setChartData(data);
|
|
} catch (err) {
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const formatCurrency = (value) => {
|
|
return new Intl.NumberFormat('pl-PL', {
|
|
style: 'currency',
|
|
currency: 'PLN',
|
|
minimumFractionDigits: 0,
|
|
maximumFractionDigits: 0
|
|
}).format(value);
|
|
};
|
|
|
|
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 font-semibold">
|
|
{`Monthly Value: ${monthlyData ? formatCurrency(monthlyData.value) : 'N/A'}`}
|
|
</p>
|
|
<p className="text-green-600 dark:text-green-400 text-sm">
|
|
{`Cumulative: ${cumulativeData ? formatCurrency(cumulativeData.value) : 'N/A'}`}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
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="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
|
|
</h2>
|
|
|
|
{loading ? (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="text-gray-500 dark:text-gray-400">Loading chart data...</div>
|
|
</div>
|
|
) : error ? (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="text-red-500 dark:text-red-400">Error: {error}</div>
|
|
</div>
|
|
) : chartData.length === 0 ? (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="text-gray-500 dark:text-gray-400">No completed projects data available</div>
|
|
</div>
|
|
) : (
|
|
<div className="h-96">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<ComposedChart
|
|
data={chartData}
|
|
margin={{
|
|
top: 20,
|
|
right: 30,
|
|
left: 20,
|
|
bottom: 5,
|
|
}}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" className="opacity-30" />
|
|
<XAxis
|
|
dataKey="month"
|
|
className="text-gray-600 dark:text-gray-400"
|
|
fontSize={12}
|
|
/>
|
|
<YAxis
|
|
className="text-gray-600 dark:text-gray-400"
|
|
fontSize={12}
|
|
tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
|
|
/>
|
|
<Tooltip content={<CustomTooltip />} />
|
|
<Legend />
|
|
<Bar
|
|
dataKey="value"
|
|
fill="#3b82f6"
|
|
name="Monthly Value"
|
|
radius={[4, 4, 0, 0]}
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="cumulative"
|
|
stroke="#10b981"
|
|
strokeWidth={3}
|
|
name="Cumulative Value"
|
|
dot={{ fill: '#10b981', strokeWidth: 2, r: 4 }}
|
|
activeDot={{ r: 6, stroke: '#10b981', strokeWidth: 2 }}
|
|
/>
|
|
</ComposedChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-4 text-sm text-gray-600 dark:text-gray-400">
|
|
<p>This chart shows the cumulative value of completed projects over time, with monthly additions.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |