N-FIN-8: add dashboard page UI
This commit is contained in:
Markus Thielker
parent
a2352e1eaa
commit
404258a57a
2 changed files with 412 additions and 4 deletions
204
src/app/page.tsx
204
src/app/page.tsx
|
|
@ -1,9 +1,205 @@
|
|||
import React from 'react';
|
||||
import { Category, Entity, EntityType } from '@prisma/client';
|
||||
import { Scope, ScopeType } from '@/lib/types/scope';
|
||||
import { prismaClient } from '@/prisma';
|
||||
import { getUser } from '@/auth';
|
||||
import DashboardPageClient from '@/components/dashboardPageClientComponents';
|
||||
|
||||
export type CategoryNumber = {
|
||||
category: Category,
|
||||
value: number,
|
||||
}
|
||||
|
||||
export type EntityNumber = {
|
||||
entity: Entity,
|
||||
value: number,
|
||||
}
|
||||
|
||||
export default async function DashboardPage(props: { searchParams?: { scope: ScopeType } }) {
|
||||
|
||||
const user = await getUser();
|
||||
if (!user) {
|
||||
return;
|
||||
}
|
||||
|
||||
const scope = Scope.of(props.searchParams?.scope || ScopeType.ThisMonth);
|
||||
|
||||
// get all payments in the current scope
|
||||
const payments = await prismaClient.payment.findMany({
|
||||
where: {
|
||||
userId: user?.id,
|
||||
date: {
|
||||
gte: scope.start,
|
||||
lte: scope.end,
|
||||
},
|
||||
},
|
||||
include: {
|
||||
payor: true,
|
||||
payee: true,
|
||||
category: true,
|
||||
},
|
||||
});
|
||||
|
||||
let income = 0;
|
||||
let expenses = 0;
|
||||
|
||||
// sum up income
|
||||
payments.filter(payment =>
|
||||
payment.payor.type === EntityType.Entity &&
|
||||
payment.payee.type === EntityType.Account,
|
||||
).forEach(payment => income += payment.amount);
|
||||
|
||||
// sum up expenses
|
||||
payments.filter(payment =>
|
||||
payment.payor.type === EntityType.Account &&
|
||||
payment.payee.type === EntityType.Entity,
|
||||
).forEach(payment => expenses += payment.amount);
|
||||
|
||||
// ############################
|
||||
// Expenses by category
|
||||
// ############################
|
||||
|
||||
// init helper variables (category)
|
||||
const categoryExpenses: CategoryNumber[] = [];
|
||||
const otherCategory: CategoryNumber = {
|
||||
category: {
|
||||
id: 0,
|
||||
userId: '',
|
||||
name: 'Other',
|
||||
color: '#888888',
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
},
|
||||
value: 0,
|
||||
};
|
||||
|
||||
// sum up expenses per category
|
||||
payments.filter(payment =>
|
||||
payment.payor.type === EntityType.Account &&
|
||||
payment.payee.type === EntityType.Entity,
|
||||
).forEach(payment => {
|
||||
|
||||
if (!payment.category) {
|
||||
otherCategory.value += payment.amount;
|
||||
return;
|
||||
}
|
||||
|
||||
const categoryNumber = categoryExpenses.find(categoryNumber => categoryNumber.category.id === payment.category?.id);
|
||||
if (categoryNumber) {
|
||||
categoryNumber.value += payment.amount;
|
||||
} else {
|
||||
categoryExpenses.push({category: payment.category, value: payment.amount});
|
||||
}
|
||||
});
|
||||
categoryExpenses.sort((a, b) => Number(b.value - a.value));
|
||||
if (otherCategory.value > 0) {
|
||||
categoryExpenses.push(otherCategory);
|
||||
}
|
||||
|
||||
// ############################
|
||||
// Expenses by entity
|
||||
// ############################
|
||||
|
||||
// init helper variables (entity)
|
||||
const entityExpenses: EntityNumber[] = [];
|
||||
const otherEntity: EntityNumber = {
|
||||
entity: {
|
||||
id: 0,
|
||||
userId: '',
|
||||
name: 'Other',
|
||||
type: EntityType.Entity,
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
},
|
||||
value: 0,
|
||||
};
|
||||
|
||||
// sum up expenses per category
|
||||
payments.filter(payment =>
|
||||
payment.payor.type === EntityType.Account &&
|
||||
payment.payee.type === EntityType.Entity,
|
||||
).forEach(payment => {
|
||||
|
||||
// if (!payment.payee) {
|
||||
// other.value += payment.amount
|
||||
// return
|
||||
// }
|
||||
|
||||
const entityNumber = entityExpenses.find(entityNumber => entityNumber.entity.id === payment.payee?.id);
|
||||
if (entityNumber) {
|
||||
entityNumber.value += payment.amount;
|
||||
} else {
|
||||
entityExpenses.push({entity: payment.payee, value: payment.amount});
|
||||
}
|
||||
});
|
||||
entityExpenses.sort((a, b) => Number(b.value - a.value));
|
||||
if (otherEntity.value > 0) {
|
||||
entityExpenses.push(otherEntity);
|
||||
}
|
||||
|
||||
// ############################
|
||||
// Format data
|
||||
// ############################
|
||||
|
||||
const balanceDevelopment = income - expenses;
|
||||
const scopes = Object.values(ScopeType).map(scopeType => scopeType.toString());
|
||||
|
||||
const incomeFormat = new Intl.NumberFormat('de-DE', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
}).format(Number(income) / 100);
|
||||
|
||||
const expensesFormat = new Intl.NumberFormat('de-DE', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
}).format(Number(expenses) / 100);
|
||||
|
||||
const balanceDevelopmentFormat = new Intl.NumberFormat('de-DE', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
}).format(Number(balanceDevelopment) / 100);
|
||||
|
||||
const categoryExpensesFormat = categoryExpenses.map(categoryNumber => ({
|
||||
category: categoryNumber.category,
|
||||
value: new Intl.NumberFormat('de-DE', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
}).format(Number(categoryNumber.value) / 100),
|
||||
}));
|
||||
|
||||
const categoryPercentages = categoryExpenses.map(categoryNumber => ({
|
||||
category: categoryNumber.category,
|
||||
value: amountToPercent(categoryNumber.value, expenses),
|
||||
}));
|
||||
|
||||
const entityExpensesFormat = entityExpenses.map(entityNumber => ({
|
||||
entity: entityNumber.entity,
|
||||
value: new Intl.NumberFormat('de-DE', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
}).format(Number(entityNumber.value) / 100),
|
||||
}));
|
||||
|
||||
const entityPercentages = entityExpenses.map(entityNumber => ({
|
||||
entity: entityNumber.entity,
|
||||
value: amountToPercent(entityNumber.value, expenses),
|
||||
}));
|
||||
|
||||
function amountToPercent(amount: number, total: number): string {
|
||||
return (Number(amount) / Number(total) * 100).toFixed(2);
|
||||
}
|
||||
|
||||
export default async function Home() {
|
||||
return (
|
||||
<main className="flex items-center justify-center min-h-screen text-3xl">
|
||||
Next Finances
|
||||
</main>
|
||||
<DashboardPageClient
|
||||
scope={scope.type}
|
||||
scopes={scopes}
|
||||
income={incomeFormat}
|
||||
expenses={expensesFormat}
|
||||
balanceDevelopment={balanceDevelopmentFormat}
|
||||
categoryExpenses={categoryExpensesFormat}
|
||||
categoryPercentages={categoryPercentages}
|
||||
entityExpenses={entityExpensesFormat}
|
||||
entityPercentages={entityPercentages}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
212
src/components/dashboardPageClientComponents.tsx
Normal file
212
src/components/dashboardPageClientComponents.tsx
Normal file
|
|
@ -0,0 +1,212 @@
|
|||
'use client';
|
||||
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Category, Entity } from '@prisma/client';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import React from 'react';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
|
||||
export default function DashboardPageClientContent(
|
||||
{
|
||||
scope,
|
||||
scopes,
|
||||
income,
|
||||
expenses,
|
||||
balanceDevelopment,
|
||||
categoryExpenses,
|
||||
categoryPercentages,
|
||||
entityExpenses,
|
||||
entityPercentages,
|
||||
}: {
|
||||
scope: string,
|
||||
scopes: string[],
|
||||
income: string,
|
||||
expenses: string,
|
||||
balanceDevelopment: string,
|
||||
categoryExpenses: {
|
||||
category: Category,
|
||||
value: string,
|
||||
}[],
|
||||
categoryPercentages: {
|
||||
category: Category,
|
||||
value: string,
|
||||
}[],
|
||||
entityExpenses: {
|
||||
entity: Entity,
|
||||
value: string,
|
||||
}[],
|
||||
entityPercentages: {
|
||||
entity: Entity,
|
||||
value: string,
|
||||
}[],
|
||||
|
||||
},
|
||||
) {
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col space-y-4 p-8">
|
||||
|
||||
<div className="flex flex-row items-center justify-between">
|
||||
|
||||
<h1 className="text-2xl font-semibold leading-6 text-gray-900 dark:text-white">Dashboard</h1>
|
||||
|
||||
<Select
|
||||
onValueChange={(value) => {
|
||||
router.push(`?scope=${value}`);
|
||||
router.refresh();
|
||||
}}
|
||||
value={scope}
|
||||
>
|
||||
<SelectTrigger className="w-[250px]">
|
||||
<SelectValue placeholder="Select a scope"/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{
|
||||
scopes.map((scope) => (
|
||||
<SelectItem value={scope} key={scope}>{scope}</SelectItem>
|
||||
))
|
||||
}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x overflow-hidden">
|
||||
|
||||
<div>
|
||||
<CardHeader>
|
||||
<CardTitle>Income</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-baseline text-2xl font-semibold text-orange-600">
|
||||
{income}
|
||||
</div>
|
||||
</CardContent>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<CardHeader>
|
||||
<CardTitle>Expanses</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-baseline text-2xl font-semibold text-orange-600">
|
||||
{expenses}
|
||||
</div>
|
||||
</CardContent>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<CardHeader>
|
||||
<CardTitle>Development</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-baseline text-2xl font-semibold text-orange-600">
|
||||
{balanceDevelopment}
|
||||
</div>
|
||||
</CardContent>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x overflow-hidden">
|
||||
|
||||
<div>
|
||||
<CardHeader>
|
||||
<CardTitle>Expenses</CardTitle>
|
||||
<CardDescription>by category (%)</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{
|
||||
categoryPercentages.map(item => (
|
||||
<div className="flex items-center justify-between mt-4" key={item.category.id}>
|
||||
<div className="flex items-center">
|
||||
<div className="w-2 h-2 rounded-full mr-2"
|
||||
style={{backgroundColor: item.category.color}}/>
|
||||
<span
|
||||
className="text-sm text-gray-900 dark:text-white">{item.category.name}</span>
|
||||
</div>
|
||||
<span className="text-sm text-gray-900 dark:text-white">{item.value}%</span>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</CardContent>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<CardHeader>
|
||||
<CardTitle>Expenses</CardTitle>
|
||||
<CardDescription>by category (€)</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{
|
||||
categoryExpenses.map((item) => (
|
||||
<div className="flex items-center justify-between mt-4" key={item.category.id}>
|
||||
<div className="flex items-center">
|
||||
<div className="w-2 h-2 rounded-full mr-2"
|
||||
style={{backgroundColor: item.category.color}}/>
|
||||
<span
|
||||
className="text-sm text-gray-900 dark:text-white">{item.category.name}</span>
|
||||
</div>
|
||||
<span className="text-sm text-gray-900 dark:text-white">{item.value}</span>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</CardContent>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x overflow-hidden">
|
||||
|
||||
<div>
|
||||
<CardHeader>
|
||||
<CardTitle>Expenses</CardTitle>
|
||||
<CardDescription>by entity (%)</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
|
||||
{
|
||||
entityPercentages.map(item => (
|
||||
<div className="flex items-center justify-between mt-4" key={item.entity.id}>
|
||||
<div className="flex items-center">
|
||||
<span
|
||||
className="text-sm text-gray-900 dark:text-white">{item.entity.name}</span>
|
||||
</div>
|
||||
<span className="text-sm text-gray-900 dark:text-white">{item.value}%</span>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</CardContent>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<CardHeader>
|
||||
<CardTitle>Expenses</CardTitle>
|
||||
<CardDescription>by entity (€)</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{
|
||||
entityExpenses.map(item => (
|
||||
<div className="flex items-center justify-between mt-4" key={item.entity.id}>
|
||||
<div className="flex items-center">
|
||||
<span
|
||||
className="text-sm text-gray-900 dark:text-white">{item.entity.name}</span>
|
||||
</div>
|
||||
<span className="text-sm text-gray-900 dark:text-white">{item.value}</span>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</CardContent>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue