mirror of
https://codeberg.org/MarkusThielker/finances.git
synced 2025-04-12 05:08:43 +00:00
N-FIN-15: fix dashboard content alignment
This commit is contained in:
Markus Thielker
parent
c1359dbcf7
commit
161612aa90
2 changed files with 160 additions and 157 deletions
|
|
@ -200,6 +200,7 @@ export default async function DashboardPage(props: { searchParams?: { scope: Sco
|
||||||
categoryPercentages={categoryPercentages}
|
categoryPercentages={categoryPercentages}
|
||||||
entityExpenses={entityExpensesFormat}
|
entityExpenses={entityExpensesFormat}
|
||||||
entityPercentages={entityPercentages}
|
entityPercentages={entityPercentages}
|
||||||
|
className="flex flex-col justify-center space-y-4 p-10"
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -17,6 +17,7 @@ export default function DashboardPageClientContent(
|
||||||
categoryPercentages,
|
categoryPercentages,
|
||||||
entityExpenses,
|
entityExpenses,
|
||||||
entityPercentages,
|
entityPercentages,
|
||||||
|
className,
|
||||||
}: {
|
}: {
|
||||||
scope: string,
|
scope: string,
|
||||||
scopes: string[],
|
scopes: string[],
|
||||||
|
|
@ -39,174 +40,175 @@ export default function DashboardPageClientContent(
|
||||||
entity: Entity,
|
entity: Entity,
|
||||||
value: string,
|
value: string,
|
||||||
}[],
|
}[],
|
||||||
|
className?: string,
|
||||||
},
|
},
|
||||||
) {
|
) {
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
return (
|
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
|
</div>
|
||||||
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>
|
|
||||||
|
|
||||||
|
<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>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Loading…
Add table
Reference in a new issue