feat: enhance TeamLeadsDashboard with detailed realised vs unrealised values by project type and improved chart visualization
This commit is contained in:
@@ -21,20 +21,39 @@ export async function GET(request) {
|
||||
// Get all projects
|
||||
const projects = getAllProjects();
|
||||
|
||||
// Calculate realised and unrealised values
|
||||
let realisedValue = 0;
|
||||
let unrealisedValue = 0;
|
||||
// Calculate realised and unrealised values by project type
|
||||
const projectTypes = ['design', 'design+construction', 'construction'];
|
||||
const typeSummary = {};
|
||||
|
||||
projectTypes.forEach(type => {
|
||||
typeSummary[type] = {
|
||||
realisedValue: 0,
|
||||
unrealisedValue: 0
|
||||
};
|
||||
});
|
||||
|
||||
projects.forEach(project => {
|
||||
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) {
|
||||
realisedValue += value;
|
||||
typeSummary[type].realisedValue += value;
|
||||
} else if (project.wartosc_zlecenia && project.project_status !== 'cancelled') {
|
||||
// Count all non-cancelled projects with values as unrealised
|
||||
unrealisedValue += value;
|
||||
typeSummary[type].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)
|
||||
const completedProjects = projects.filter(project =>
|
||||
project.completion_date &&
|
||||
@@ -61,8 +80,24 @@ export async function GET(request) {
|
||||
{ month: 'Dec 2024', value: 95000, cumulative: 958000 }
|
||||
];
|
||||
summary = {
|
||||
realisedValue: 958000,
|
||||
unrealisedValue: 1242000
|
||||
total: {
|
||||
realisedValue: 958000,
|
||||
unrealisedValue: 1242000
|
||||
},
|
||||
byType: {
|
||||
design: {
|
||||
realisedValue: 320000,
|
||||
unrealisedValue: 480000
|
||||
},
|
||||
'design+construction': {
|
||||
realisedValue: 480000,
|
||||
unrealisedValue: 520000
|
||||
},
|
||||
construction: {
|
||||
realisedValue: 158000,
|
||||
unrealisedValue: 242000
|
||||
}
|
||||
}
|
||||
};
|
||||
} else {
|
||||
// Group by month and calculate monthly totals first
|
||||
@@ -112,8 +147,19 @@ export async function GET(request) {
|
||||
return NextResponse.json({
|
||||
chartData,
|
||||
summary: {
|
||||
realisedValue: Math.round(realisedValue),
|
||||
unrealisedValue: Math.round(unrealisedValue)
|
||||
total: {
|
||||
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)
|
||||
}
|
||||
])
|
||||
)
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -127,64 +127,122 @@ export default function TeamLeadsDashboard() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-8">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-6">
|
||||
Realised vs Unrealised Value
|
||||
</h2>
|
||||
<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">
|
||||
Total Portfolio
|
||||
</h2>
|
||||
|
||||
{summaryData ? (
|
||||
<div className="h-80">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={[
|
||||
{
|
||||
name: 'Realised',
|
||||
value: summaryData.realisedValue,
|
||||
color: '#10b981'
|
||||
},
|
||||
{
|
||||
name: 'Unrealised',
|
||||
value: summaryData.unrealisedValue,
|
||||
color: '#f59e0b'
|
||||
}
|
||||
]}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
outerRadius={100}
|
||||
dataKey="value"
|
||||
label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
|
||||
>
|
||||
<Cell fill="#10b981" />
|
||||
<Cell fill="#f59e0b" />
|
||||
</Pie>
|
||||
<Tooltip formatter={(value) => formatCurrency(value)} />
|
||||
<Legend />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-80">
|
||||
<div className="text-gray-500 dark:text-gray-400">No summary data available</div>
|
||||
</div>
|
||||
)}
|
||||
{summaryData?.total ? (
|
||||
<div className="h-64">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={[
|
||||
{
|
||||
name: 'Realised',
|
||||
value: summaryData.total.realisedValue,
|
||||
color: '#10b981'
|
||||
},
|
||||
{
|
||||
name: 'Unrealised',
|
||||
value: summaryData.total.unrealisedValue,
|
||||
color: '#f59e0b'
|
||||
}
|
||||
]}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
outerRadius={80}
|
||||
dataKey="value"
|
||||
label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
|
||||
>
|
||||
<Cell fill="#10b981" />
|
||||
<Cell fill="#f59e0b" />
|
||||
</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">No summary data available</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{summaryData && (
|
||||
<div className="mt-4 grid grid-cols-2 gap-4">
|
||||
<div className="bg-green-50 dark:bg-green-900/20 p-4 rounded-lg">
|
||||
<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">
|
||||
{formatCurrency(summaryData.realisedValue)}
|
||||
{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">Realised Value</div>
|
||||
<div className="text-xl font-bold text-green-700 dark:text-green-300">
|
||||
{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 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 className="text-2xl font-bold text-amber-700 dark:text-amber-300">
|
||||
{formatCurrency(summaryData.unrealisedValue)}
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
|
||||
Reference in New Issue
Block a user