feat: mock up dashboard page

packages/reservation-platform/src/app/layout.tsx

@@ -35,7 +35,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
         )}
       >
         <Header />
-        <main>{children}</main>
+        <main className="flex justify-center px-96 py-8">{children}</main>
       </body>
     </html>
   );

packages/reservation-platform/src/app/page.tsx

@@ -1,5 +1,8 @@
-import { Metadata } from 'next'
+import { Metadata } from "next";
-import Link from "next/link";
+import { DollarSign } from "lucide-react";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import DashboardCard from "@/components/DashboardCard";
 
 export const metadata: Metadata = {
   title: "Startseite | MYP",
@@ -7,6 +10,39 @@ export const metadata: Metadata = {
 
 export default function HomePage() {
   return (
-    <main>Hello</main>
+    <div className="w-full">
+      <div className="flex flex-col justify-evenly gap-8 lg:flex-row">
+        <DashboardCard
+          title="Druckstunden"
+          data="200"
+          icon="Clock"
+          trend="none"
+        />
+        <DashboardCard
+          title="Lieblingsdrucker"
+          data="200"
+          icon="Heart"
+          trend="none"
+        />
+        <DashboardCard
+          title="Am häfigsten gedruckt am"
+          data="200"
+          icon="CalendarDays"
+          trend="none"
+        />
+        <DashboardCard
+          title="Erfolgreiche Drucke"
+          data="200"
+          icon="PackageCheck"
+          trend="none"
+        />
+        <DashboardCard
+          title="Gemeldete Fehler"
+          data="200"
+          icon="ShieldAlert"
+          trend="none"
+        />
+      </div>
+    </div>
   );
 }

packages/reservation-platform/src/components/DashboardCard.tsx

@@ -0,0 +1,28 @@
+import { icons } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+interface DashboardCardProps {
+  title: string;
+  icon: keyof typeof icons;
+  data: string;
+  trend: string;
+}
+
+export default function DashboardCard(props: DashboardCardProps) {
+  const { title, icon, data, trend } = props;
+
+  const LucideIcon = icons[icon];
+
+  return (
+    <Card className="w-full">
+      <CardHeader className="flex flex-row items-center justify-between gap-8 space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium">{title}</CardTitle>
+        <LucideIcon className="h-4 w-4 text-muted-foreground" />
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold">{data}</div>
+        <p className="text-xs text-muted-foreground">{trend}</p>
+      </CardContent>
+    </Card>
+  );
+}