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

N-FIN-15: fix dashboard content alignment

Browse source
This commit is contained in:
Markus Thielker 2024-03-11 04:49:51 +01:00
parent c1359dbcf7
commit 161612aa90
No known key found for this signature in database
2 changed files with 160 additions and 157 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/app/page.tsx
View file

@ -200,6 +200,7 @@ export default async function DashboardPage(props: { searchParams?: { scope: Sco
categoryPercentages={categoryPercentages}
entityExpenses={entityExpensesFormat}
entityPercentages={entityPercentages}
className="flex flex-col justify-center space-y-4 p-10"
/>
);
}

316
src/components/dashboardPageClientComponents.tsx
View file

@ -17,6 +17,7 @@ export default function DashboardPageClientContent(
categoryPercentages,
entityExpenses,
entityPercentages,
className,
}: {
scope: string,
scopes: string[],
@ -39,174 +40,175 @@ export default function DashboardPageClientContent(
entity: Entity,
value: string,
}[],
className?: string,
},
) {
const router = useRouter();
return (
<div className="flex flex-col space-y-4 p-8">
<div className={className}>
<div className="flex flex-col space-y-4">
<div className="flex items-center justify-between w-full">
<div className="flex flex-row items-center justify-between">
<p className="text-3xl font-semibold">Dashboard</p>
<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>
<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>
<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>
);
}