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

feat: enhance TeamLeadsDashboard with detailed realised vs unrealised values by project type and improved chart visualization

Browse Source
This commit is contained in:
RKWojs
2025-11-14 12:24:41 +01:00
parent 7f63dc1df6
commit a1f1b33e44
2 changed files with 166 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,20 +21,39 @@ export async function GET(request) {
// Get all projects // Get all projects
const projects = getAllProjects(); const projects = getAllProjects();
// Calculate realised and unrealised values // Calculate realised and unrealised values by project type
let realisedValue = 0; const projectTypes = ['design', 'design+construction', 'construction'];
let unrealisedValue = 0; const typeSummary = {};
projectTypes.forEach(type => {
typeSummary[type] = {
realisedValue: 0,
unrealisedValue: 0
};
});
projects.forEach(project => { projects.forEach(project => {
const value = parseFloat(project.wartosc_zlecenia) || 0; const value = parseFloat(project.wartosc_zlecenia) || 0;
const type = project.project_type;
if (!type || !projectTypes.includes(type)) return;
if (project.project_status === 'fulfilled' && project.completion_date && project.wartosc_zlecenia) { if (project.project_status === 'fulfilled' && project.completion_date && project.wartosc_zlecenia) {
realisedValue += value; typeSummary[type].realisedValue += value;
} else if (project.wartosc_zlecenia && project.project_status !== 'cancelled') { } else if (project.wartosc_zlecenia && project.project_status !== 'cancelled') {
// Count all non-cancelled projects with values as unrealised typeSummary[type].unrealisedValue += value;
unrealisedValue += value;
} }
}); });
// Calculate overall totals
let realisedValue = 0;
let unrealisedValue = 0;
Object.values(typeSummary).forEach(summary => {
realisedValue += summary.realisedValue;
unrealisedValue += summary.unrealisedValue;
});
// Filter completed projects (those with completion_date and fulfilled status) // Filter completed projects (those with completion_date and fulfilled status)
const completedProjects = projects.filter(project => const completedProjects = projects.filter(project =>
project.completion_date && project.completion_date &&
@@ -61,8 +80,24 @@ export async function GET(request) {
{ month: 'Dec 2024', value: 95000, cumulative: 958000 } { month: 'Dec 2024', value: 95000, cumulative: 958000 }
]; ];
summary = { summary = {
realisedValue: 958000, total: {
unrealisedValue: 1242000 realisedValue: 958000,
unrealisedValue: 1242000
},
byType: {
design: {
realisedValue: 320000,
unrealisedValue: 480000
},
'design+construction': {
realisedValue: 480000,
unrealisedValue: 520000
},
construction: {
realisedValue: 158000,
unrealisedValue: 242000
}
}
}; };
} else { } else {
// Group by month and calculate monthly totals first // Group by month and calculate monthly totals first
@@ -112,8 +147,19 @@ export async function GET(request) {
return NextResponse.json({ return NextResponse.json({
chartData, chartData,
summary: { summary: {
realisedValue: Math.round(realisedValue), total: {
unrealisedValue: Math.round(unrealisedValue) realisedValue: Math.round(realisedValue),
unrealisedValue: Math.round(unrealisedValue)
},
byType: Object.fromEntries(
Object.entries(typeSummary).map(([type, data]) => [
type,
{
realisedValue: Math.round(data.realisedValue),
unrealisedValue: Math.round(data.unrealisedValue)
}
])
)
} }
}); });

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

@@ -127,64 +127,122 @@ export default function TeamLeadsDashboard() {
</div> </div>
)} )}
<div className="mt-8"> <div className="mt-8 grid grid-cols-1 lg:grid-cols-3 gap-8">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-6"> {/* Main Total Chart */}
Realised vs Unrealised Value <div className="lg:col-span-1">
</h2> <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-6">
Total Portfolio
</h2>
{summaryData ? ( {summaryData?.total ? (
<div className="h-80"> <div className="h-64">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<PieChart> <PieChart>
<Pie <Pie
data={[ data={[
{ {
name: 'Realised', name: 'Realised',
value: summaryData.realisedValue, value: summaryData.total.realisedValue,
color: '#10b981' color: '#10b981'
}, },
{ {
name: 'Unrealised', name: 'Unrealised',
value: summaryData.unrealisedValue, value: summaryData.total.unrealisedValue,
color: '#f59e0b' color: '#f59e0b'
} }
]} ]}
cx="50%" cx="50%"
cy="50%" cy="50%"
outerRadius={100} outerRadius={80}
dataKey="value" dataKey="value"
label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`} label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
> >
<Cell fill="#10b981" /> <Cell fill="#10b981" />
<Cell fill="#f59e0b" /> <Cell fill="#f59e0b" />
</Pie> </Pie>
<Tooltip formatter={(value) => formatCurrency(value)} /> <Tooltip formatter={(value) => formatCurrency(value)} />
<Legend /> <Legend />
</PieChart> </PieChart>
</ResponsiveContainer> </ResponsiveContainer>
</div> </div>
) : ( ) : (
<div className="flex items-center justify-center h-80"> <div className="flex items-center justify-center h-64">
<div className="text-gray-500 dark:text-gray-400">No summary data available</div> <div className="text-gray-500 dark:text-gray-400">No summary data available</div>
</div> </div>
)} )}
{summaryData && ( {summaryData?.total && (
<div className="mt-4 grid grid-cols-2 gap-4"> <div className="mt-4 grid grid-cols-1 gap-3">
<div className="bg-green-50 dark:bg-green-900/20 p-4 rounded-lg"> <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">Realised Value</div> <div className="text-sm text-green-600 dark:text-green-400 font-medium">Realised Value</div>
<div className="text-2xl font-bold text-green-700 dark:text-green-300"> <div className="text-xl font-bold text-green-700 dark:text-green-300">
{formatCurrency(summaryData.realisedValue)} {formatCurrency(summaryData.total.realisedValue)}
</div>
</div>
<div className="bg-amber-50 dark:bg-amber-900/20 p-3 rounded-lg">
<div className="text-sm text-amber-600 dark:text-amber-400 font-medium">Unrealised Value</div>
<div className="text-xl font-bold text-amber-700 dark:text-amber-300">
{formatCurrency(summaryData.total.unrealisedValue)}
</div>
</div> </div>
</div> </div>
<div className="bg-amber-50 dark:bg-amber-900/20 p-4 rounded-lg"> )}
<div className="text-sm text-amber-600 dark:text-amber-400 font-medium">Unrealised Value</div> </div>
<div className="text-2xl font-bold text-amber-700 dark:text-amber-300">
{formatCurrency(summaryData.unrealisedValue)} {/* Project Type Charts */}
<div className="lg:col-span-2">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-6">
By Project Type
</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">
{type.replace('+', ' + ')}
</h3>
{/* Mini pie chart */}
<div className="h-32 mb-4">
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie
data={[
{ name: 'Realised', value: data.realisedValue, color: '#10b981' },
{ name: 'Unrealised', value: data.unrealisedValue, color: '#f59e0b' }
]}
cx="50%"
cy="50%"
outerRadius={45}
dataKey="value"
label={({ percent }) => percent > 0.1 ? `${(percent * 100).toFixed(0)}%` : ''}
>
<Cell fill="#10b981" />
<Cell fill="#f59e0b" />
</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">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-amber-600 dark:text-amber-400">Unrealised</span>
<span className="text-sm font-semibold text-amber-700 dark:text-amber-300">
{formatCurrency(data.unrealisedValue)}
</span>
</div>
</div>
</div> </div>
</div> ))}
</div> </div>
)} </div>
</div> </div>
</div> </div>
</div> </div>