diff --git a/src/app/page.tsx b/src/app/page.tsx
index 94151cd..b217abf 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -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"
/>
);
}
diff --git a/src/components/dashboardPageClientComponents.tsx b/src/components/dashboardPageClientComponents.tsx
index e45aaff..314fa5c 100644
--- a/src/components/dashboardPageClientComponents.tsx
+++ b/src/components/dashboardPageClientComponents.tsx
@@ -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>
);
}
\ No newline at end of file