371 lines
13 KiB
JavaScript
371 lines
13 KiB
JavaScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, BarChart, Bar, ComposedChart, PieChart, Pie, Cell } from 'recharts';
|
|
import { useTranslation } from "@/lib/i18n";
|
|
import PageContainer from "@/components/ui/PageContainer";
|
|
|
|
export default function TeamLeadsDashboard() {
|
|
const { t } = useTranslation();
|
|
const [chartData, setChartData] = useState([]);
|
|
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 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');
|
|
}
|
|
const data = await response.json();
|
|
setChartData(data.chartData || []);
|
|
setSummaryData(data.summary || null);
|
|
} catch (err) {
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
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',
|
|
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">{`${t('teamDashboard.monthLabel')} ${label}`}</p>
|
|
<p className="text-blue-600 dark:text-blue-400 font-semibold">
|
|
{`${t('teamDashboard.monthlyValue')} ${monthlyData ? formatCurrency(monthlyData.value) : t('teamDashboard.na')}`}
|
|
</p>
|
|
<p className="text-green-600 dark:text-green-400 text-sm">
|
|
{`${t('teamDashboard.cumulative')} ${cumulativeData ? formatCurrency(cumulativeData.value) : t('teamDashboard.na')}`}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
return (
|
|
<PageContainer>
|
|
<div className="flex items-center justify-between mb-8">
|
|
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
|
|
{t('teamDashboard.title')}
|
|
</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">
|
|
{t('teamDashboard.yearLabel')}
|
|
</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">{t('teamDashboard.allYears')}</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">
|
|
{t('teamDashboard.projectCompletionTitle')}
|
|
</h2>
|
|
|
|
{loading ? (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="text-gray-500 dark:text-gray-400">{t('teamDashboard.loadingChart')}</div>
|
|
</div>
|
|
) : error ? (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="text-red-500 dark:text-red-400">{t('teamDashboard.errorPrefix')} {error}</div>
|
|
</div>
|
|
) : chartData.length === 0 ? (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="text-gray-500 dark:text-gray-400">{t('teamDashboard.noData')}</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={t('teamDashboard.monthlyValue').replace(':', '')}
|
|
radius={[4, 4, 0, 0]}
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="cumulative"
|
|
stroke="#10b981"
|
|
strokeWidth={3}
|
|
name={t('teamDashboard.cumulative').replace(':', '')}
|
|
dot={{ fill: '#10b981', strokeWidth: 2, r: 4 }}
|
|
activeDot={{ r: 6, stroke: '#10b981', strokeWidth: 2 }}
|
|
/>
|
|
</ComposedChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-8 grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
{/* Main Total Chart */}
|
|
<div className="lg:col-span-1">
|
|
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-6">
|
|
{t('teamDashboard.totalPortfolio')}
|
|
</h2>
|
|
|
|
{summaryData?.total ? (
|
|
<div className="h-64">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<PieChart>
|
|
<Pie
|
|
data={[
|
|
{
|
|
name: t('teamDashboard.realised'),
|
|
value: summaryData.total.realisedValue,
|
|
color: '#10b981'
|
|
},
|
|
{
|
|
name: t('teamDashboard.unrealised'),
|
|
value: summaryData.total.unrealisedValue,
|
|
color: '#8b5cf6'
|
|
}
|
|
]}
|
|
cx="50%"
|
|
cy="50%"
|
|
outerRadius={80}
|
|
dataKey="value"
|
|
label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
|
|
>
|
|
<Cell fill="#10b981" />
|
|
<Cell fill="#8b5cf6" />
|
|
</Pie>
|
|
<Tooltip formatter={(value) => formatCurrency(value)} />
|
|
<Legend />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="text-gray-500 dark:text-gray-400">{t('teamDashboard.noSummaryData')}</div>
|
|
</div>
|
|
)}
|
|
|
|
{summaryData?.total && (
|
|
<div className="mt-4 grid grid-cols-1 gap-3">
|
|
<div className="bg-green-50 dark:bg-green-900/20 p-3 rounded-lg">
|
|
<div className="text-sm text-green-600 dark:text-green-400 font-medium">{t('teamDashboard.realisedValue')}</div>
|
|
<div className="text-xl font-bold text-green-700 dark:text-green-300">
|
|
{formatCurrency(summaryData.total.realisedValue)}
|
|
</div>
|
|
</div>
|
|
<div className="bg-purple-50 dark:bg-purple-900/20 p-3 rounded-lg">
|
|
<div className="text-sm text-purple-600 dark:text-purple-400 font-medium">{t('teamDashboard.unrealisedValue')}</div>
|
|
<div className="text-xl font-bold text-purple-700 dark:text-purple-300">
|
|
{formatCurrency(summaryData.total.unrealisedValue)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Project Type Charts */}
|
|
<div className="lg:col-span-2">
|
|
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-6">
|
|
{t('teamDashboard.byProjectType')}
|
|
</h2>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{summaryData?.byType && Object.entries(summaryData.byType).map(([type, data]) => (
|
|
<div key={type} className="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
|
|
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4 capitalize text-center">
|
|
{t(`projectType.${type}`)}
|
|
</h3>
|
|
|
|
{/* Mini pie chart */}
|
|
<div className="h-32 mb-4">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<PieChart>
|
|
<Pie
|
|
data={[
|
|
{ name: t('teamDashboard.realised'), value: data.realisedValue, color: '#10b981' },
|
|
{ name: t('teamDashboard.unrealised'), value: data.unrealisedValue, color: '#8b5cf6' }
|
|
]}
|
|
cx="50%"
|
|
cy="50%"
|
|
outerRadius={45}
|
|
dataKey="value"
|
|
label={({ percent }) => percent > 0.1 ? `${(percent * 100).toFixed(0)}%` : ''}
|
|
>
|
|
<Cell fill="#10b981" />
|
|
<Cell fill="#8b5cf6" />
|
|
</Pie>
|
|
<Tooltip formatter={(value) => formatCurrency(value)} />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm text-green-600 dark:text-green-400">{t('teamDashboard.realised')}</span>
|
|
<span className="text-sm font-semibold text-green-700 dark:text-green-300">
|
|
{formatCurrency(data.realisedValue)}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm text-purple-600 dark:text-purple-400">{t('teamDashboard.unrealised')}</span>
|
|
<span className="text-sm font-semibold text-purple-700 dark:text-purple-300">
|
|
{formatCurrency(data.unrealisedValue)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* By Contract Section */}
|
|
{summaryData?.byContract && Object.keys(summaryData.byContract).length > 0 && (
|
|
<div className="mt-8">
|
|
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-6">
|
|
{t('teamDashboard.byContract')}
|
|
</h2>
|
|
|
|
<div className="h-96">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart
|
|
data={Object.entries(summaryData.byContract).map(([contractNumber, data]) => ({
|
|
name: contractNumber,
|
|
fullName: data.contract_name,
|
|
realised: data.realisedValue,
|
|
unrealised: data.unrealisedValue,
|
|
total: data.totalValue
|
|
}))}
|
|
margin={{
|
|
top: 20,
|
|
right: 30,
|
|
left: 20,
|
|
bottom: 100,
|
|
}}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" className="opacity-30" />
|
|
<XAxis
|
|
dataKey="name"
|
|
angle={-45}
|
|
textAnchor="end"
|
|
height={100}
|
|
className="text-gray-600 dark:text-gray-400"
|
|
fontSize={11}
|
|
/>
|
|
<YAxis
|
|
className="text-gray-600 dark:text-gray-400"
|
|
fontSize={12}
|
|
tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
|
|
/>
|
|
<Tooltip
|
|
content={({ active, payload }) => {
|
|
if (active && payload && payload.length) {
|
|
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 mb-2">{payload[0].payload.fullName}</p>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 mb-2">{payload[0].payload.name}</p>
|
|
<p className="text-green-600 dark:text-green-400 text-sm">
|
|
{`${t('teamDashboard.realised')}: ${formatCurrency(payload[0].payload.realised)}`}
|
|
</p>
|
|
<p className="text-purple-600 dark:text-purple-400 text-sm">
|
|
{`${t('teamDashboard.unrealised')}: ${formatCurrency(payload[0].payload.unrealised)}`}
|
|
</p>
|
|
<p className="text-blue-600 dark:text-blue-400 text-sm font-semibold mt-1">
|
|
{`${t('teamDashboard.total')}: ${formatCurrency(payload[0].payload.total)}`}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
}}
|
|
/>
|
|
<Legend />
|
|
<Bar
|
|
dataKey="realised"
|
|
stackId="a"
|
|
fill="#10b981"
|
|
name={t('teamDashboard.realised')}
|
|
radius={[0, 0, 0, 0]}
|
|
/>
|
|
<Bar
|
|
dataKey="unrealised"
|
|
stackId="a"
|
|
fill="#8b5cf6"
|
|
name={t('teamDashboard.unrealised')}
|
|
radius={[4, 4, 0, 0]}
|
|
/>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</PageContainer>
|
|
);
|
|
} |