From 0a217220600feadc3438107a1a873cfe5a5cbdd4 Mon Sep 17 00:00:00 2001
From: TOHAACK <torben.haack@mercedes-benz.com>
Date: Tue, 23 Apr 2024 09:42:47 +0200
Subject: [PATCH] feat: mock up dashboard page

---
 .../reservation-platform/src/app/layout.tsx   |  2 +-
 .../reservation-platform/src/app/page.tsx     | 42 +++++++++++++++++--
 .../src/components/DashboardCard.tsx          | 28 +++++++++++++
 3 files changed, 68 insertions(+), 4 deletions(-)
 create mode 100644 packages/reservation-platform/src/components/DashboardCard.tsx

diff --git a/packages/reservation-platform/src/app/layout.tsx b/packages/reservation-platform/src/app/layout.tsx
index f75ec29..bc17bdc 100644
--- a/packages/reservation-platform/src/app/layout.tsx
+++ b/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>
   );
diff --git a/packages/reservation-platform/src/app/page.tsx b/packages/reservation-platform/src/app/page.tsx
index 282b93a..e7227ba 100644
--- a/packages/reservation-platform/src/app/page.tsx
+++ b/packages/reservation-platform/src/app/page.tsx
@@ -1,5 +1,8 @@
-import { Metadata } from 'next'
-import Link from "next/link";
+import { Metadata } from "next";
+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>
   );
 }
diff --git a/packages/reservation-platform/src/components/DashboardCard.tsx b/packages/reservation-platform/src/components/DashboardCard.tsx
new file mode 100644
index 0000000..a09f89c
--- /dev/null
+++ b/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>
+  );
+}