markus/finances
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases 6 Packages 1 Wiki Activity Actions

N-FIN-8: add dashboard page (#13)

Browse source 
Resolves #8
This commit is contained in:
Markus Thielker 2024-03-11 03:36:05 +01:00 • committed by GitHub
commit d45f6bf76b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
23 changed files with 479 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

204
src/app/page.tsx
View file

@ -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}
/>
);
}

2
src/components/categoryPageClientComponents.tsx
View file

@ -9,7 +9,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from
import { DataTable } from '@/components/ui/data-table';
import { columns } from '@/app/categories/columns';
import { z } from 'zod';
import { ActionResponse } from '@/lib/types/ActionResponse';
import { ActionResponse } from '@/lib/types/actionResponse';
import { useRouter } from 'next/navigation';
import { toast } from 'sonner';
import { sonnerContent } from '@/components/ui/sonner';

212
src/components/dashboardPageClientComponents.tsx Normal file
View 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>
);
}

2
src/components/entityPageClientComponents.tsx
View file

@ -11,7 +11,7 @@ import { DataTable } from '@/components/ui/data-table';
import { columns } from '@/app/entities/columns';
import { z } from 'zod';
import { entityFormSchema } from '@/lib/form-schemas/entityFormSchema';
import { ActionResponse } from '@/lib/types/ActionResponse';
import { ActionResponse } from '@/lib/types/actionResponse';
import { Input } from '@/components/ui/input';
import { useRouter } from 'next/navigation';
import { toast } from 'sonner';

2
src/components/form/categoryForm.tsx
View file

@ -7,7 +7,7 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '
import { Input } from '@/components/ui/input';
import React from 'react';
import { Button } from '@/components/ui/button';
import { ActionResponse } from '@/lib/types/ActionResponse';
import { ActionResponse } from '@/lib/types/actionResponse';
import { useRouter } from 'next/navigation';
import { toast } from 'sonner';
import { sonnerContent } from '@/components/ui/sonner';

2
src/components/form/entityForm.tsx
View file

@ -7,7 +7,7 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '
import { Input } from '@/components/ui/input';
import React from 'react';
import { Button } from '@/components/ui/button';
import { ActionResponse } from '@/lib/types/ActionResponse';
import { ActionResponse } from '@/lib/types/actionResponse';
import { useRouter } from 'next/navigation';
import { toast } from 'sonner';
import { sonnerContent } from '@/components/ui/sonner';

2
src/components/form/paymentForm.tsx
View file

@ -7,7 +7,7 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '
import { Input } from '@/components/ui/input';
import React, { useState } from 'react';
import { Button } from '@/components/ui/button';
import { ActionResponse } from '@/lib/types/ActionResponse';
import { ActionResponse } from '@/lib/types/actionResponse';
import { useRouter } from 'next/navigation';
import { toast } from 'sonner';
import { sonnerContent } from '@/components/ui/sonner';

2
src/components/form/signInForm.tsx
View file

@ -8,7 +8,7 @@ import { Input } from '@/components/ui/input';
import React from 'react';
import { Button } from '@/components/ui/button';
import { signInFormSchema } from '@/lib/form-schemas/signInFormSchema';
import { ActionResponse } from '@/lib/types/ActionResponse';
import { ActionResponse } from '@/lib/types/actionResponse';
import { useRouter } from 'next/navigation';
import { toast } from 'sonner';
import { sonnerContent } from '@/components/ui/sonner';

2
src/components/form/signOutForm.tsx
View file

@ -1,6 +1,6 @@
'use client';
import { ActionResponse } from '@/lib/types/ActionResponse';
import { ActionResponse } from '@/lib/types/actionResponse';
import { Button } from '@/components/ui/button';
import React from 'react';
import { useRouter } from 'next/navigation';

2
src/components/form/signUpForm.tsx
View file

@ -8,7 +8,7 @@ import { Input } from '@/components/ui/input';
import React from 'react';
import { Button } from '@/components/ui/button';
import { signUpFormSchema } from '@/lib/form-schemas/signUpFormSchema';
import { ActionResponse } from '@/lib/types/ActionResponse';
import { ActionResponse } from '@/lib/types/actionResponse';
import { useRouter } from 'next/navigation';
import { toast } from 'sonner';
import { sonnerContent } from '@/components/ui/sonner';

2
src/components/paymentPageClientComponents.tsx
View file

@ -7,7 +7,7 @@ import { Edit, Trash } from 'lucide-react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { DataTable } from '@/components/ui/data-table';
import { z } from 'zod';
import { ActionResponse } from '@/lib/types/ActionResponse';
import { ActionResponse } from '@/lib/types/actionResponse';
import { useRouter } from 'next/navigation';
import { toast } from 'sonner';
import { sonnerContent } from '@/components/ui/sonner';

2
src/components/ui/sonner.tsx
View file

@ -4,7 +4,7 @@ import { useTheme } from 'next-themes';
import { Toaster as Sonner } from 'sonner';
import { AlertCircle, CheckCircle, HelpCircle, XCircle } from 'lucide-react';
import React, { JSX } from 'react';
import { ActionResponse } from '@/lib/types/ActionResponse';
import { ActionResponse } from '@/lib/types/actionResponse';
type ToasterProps = React.ComponentProps<typeof Sonner>

2
src/lib/actions/categoryCreateUpdate.ts
View file

@ -1,5 +1,5 @@
import { z } from 'zod';
import { ActionResponse } from '@/lib/types/ActionResponse';
import { ActionResponse } from '@/lib/types/actionResponse';
import { prismaClient } from '@/prisma';
import { getUser } from '@/auth';
import { URL_SIGN_IN } from '@/lib/constants';

2
src/lib/actions/categoryDelete.ts
View file

@ -1,4 +1,4 @@
import { ActionResponse } from '@/lib/types/ActionResponse';
import { ActionResponse } from '@/lib/types/actionResponse';
import { prismaClient } from '@/prisma';
import { getUser } from '@/auth';
import { URL_SIGN_IN } from '@/lib/constants';

2
src/lib/actions/entityCreateUpdate.ts
View file

@ -1,5 +1,5 @@
import { z } from 'zod';
import { ActionResponse } from '@/lib/types/ActionResponse';
import { ActionResponse } from '@/lib/types/actionResponse';
import { entityFormSchema } from '@/lib/form-schemas/entityFormSchema';
import { prismaClient } from '@/prisma';
import { getUser } from '@/auth';

2
src/lib/actions/entityDelete.ts
View file

@ -1,4 +1,4 @@
import { ActionResponse } from '@/lib/types/ActionResponse';
import { ActionResponse } from '@/lib/types/actionResponse';
import { prismaClient } from '@/prisma';
import { getUser } from '@/auth';
import { URL_SIGN_IN } from '@/lib/constants';

2
src/lib/actions/paymentCreateUpdate.ts
View file

@ -1,5 +1,5 @@
import { z } from 'zod';
import { ActionResponse } from '@/lib/types/ActionResponse';
import { ActionResponse } from '@/lib/types/actionResponse';
import { prismaClient } from '@/prisma';
import { getUser } from '@/auth';
import { URL_SIGN_IN } from '@/lib/constants';

2
src/lib/actions/paymentDelete.ts
View file

@ -1,4 +1,4 @@
import { ActionResponse } from '@/lib/types/ActionResponse';
import { ActionResponse } from '@/lib/types/actionResponse';
import { prismaClient } from '@/prisma';
import { getUser } from '@/auth';
import { URL_SIGN_IN } from '@/lib/constants';

2
src/lib/actions/signIn.ts
View file

@ -3,7 +3,7 @@ import { Argon2id } from 'oslo/password';
import { lucia } from '@/auth';
import { cookies } from 'next/headers';
import { signInFormSchema } from '@/lib/form-schemas/signInFormSchema';
import { ActionResponse } from '@/lib/types/ActionResponse';
import { ActionResponse } from '@/lib/types/actionResponse';
import { URL_HOME } from '@/lib/constants';
import { prismaClient } from '@/prisma';

2
src/lib/actions/signOut.ts
View file

@ -1,6 +1,6 @@
import { getSession, lucia } from '@/auth';
import { cookies } from 'next/headers';
import { ActionResponse } from '@/lib/types/ActionResponse';
import { ActionResponse } from '@/lib/types/actionResponse';
import { URL_SIGN_IN } from '@/lib/constants';
export default async function signOut(): Promise<ActionResponse> {

2
src/lib/actions/signUp.ts
View file

@ -4,7 +4,7 @@ import { generateId } from 'lucia';
import { lucia } from '@/auth';
import { cookies } from 'next/headers';
import { signUpFormSchema } from '@/lib/form-schemas/signUpFormSchema';
import { ActionResponse } from '@/lib/types/ActionResponse';
import { ActionResponse } from '@/lib/types/actionResponse';
import { URL_HOME } from '@/lib/constants';
import { prismaClient } from '@/prisma';

0
src/lib/types/ActionResponse.ts → src/lib/types/actionResponse.ts
View file

48
src/lib/types/scope.ts Normal file
View file

@ -0,0 +1,48 @@
export enum ScopeType {
ThisMonth = 'This month',
LastMonth = 'Last month',
ThisYear = 'This year',
LastYear = 'Last year',
}
export class Scope {
public type: ScopeType;
public start: Date;
public end: Date;
private constructor(type: ScopeType, start: Date, end: Date) {
this.type = type;
this.start = start;
this.end = end;
}
static of(type: ScopeType): Scope {
let start: Date;
let end: Date;
const today = new Date();
switch (type) {
case ScopeType.ThisMonth:
start = new Date(today.getFullYear(), today.getMonth(), 1, 0, 0, 0, 0);
end = new Date(today.getFullYear(), today.getMonth() + 1, 0, 24, 0, 0, -1);
break;
case ScopeType.LastMonth:
start = new Date(today.getFullYear(), today.getMonth() - 1, 1, 0, 0, 0, 0);
end = new Date(today.getFullYear(), today.getMonth(), 0, 24, 0, 0, -1);
break;
case ScopeType.ThisYear:
start = new Date(today.getFullYear(), 0, 1, 0, 0, 0, 0);
end = new Date(today.getFullYear(), 11, 31, 24, 0, 0, -1);
break;
case ScopeType.LastYear:
start = new Date(today.getFullYear() - 1, 0, 1, 0, 0, 0, 0);
end = new Date(today.getFullYear() - 1, 11, 31, 24, 0, 0, -1);
break;
}
return new Scope(type, start, end);
}
}