From 9a3692d14725389d48f6222da5ee2e8517b6232b Mon Sep 17 00:00:00 2001
From: Philip <philip.stockerer@icloud.com>
Date: Sun, 13 Apr 2025 09:25:10 +0200
Subject: [PATCH] Refactor DashboardPage to use DashboardContent component and
 add API endpoint to fetch all children by user

---
 src/app/app/page.tsx                          |  24 +---
 .../dashboard/dashboard-content.tsx           | 123 ++++++++++++++++++
 src/components/ui/skeleton.tsx                |  15 +++
 src/server/api/routers/child.ts               |  11 ++
 4 files changed, 151 insertions(+), 22 deletions(-)
 create mode 100644 src/components/dashboard/dashboard-content.tsx
 create mode 100644 src/components/ui/skeleton.tsx

diff --git a/src/app/app/page.tsx b/src/app/app/page.tsx
index 12a862e..383f678 100644
--- a/src/app/app/page.tsx
+++ b/src/app/app/page.tsx
@@ -2,9 +2,7 @@ import { getAuthSession } from "@/lib/auth"
 import { redirect } from "next/navigation"
 import { Header } from "@/components/layout/header"
 import { Footer } from "@/components/layout/footer"
-import Link from "next/link"
-import { Button } from "@/components/ui/button"
-import { Plus } from "lucide-react"
+import { DashboardContent } from "@/components/dashboard/dashboard-content"
 
 export default async function DashboardPage() {
     const session = await getAuthSession()
@@ -25,25 +23,7 @@ export default async function DashboardPage() {
               Wachstum, Impfungen, Zähne & mehr.
             </p>
   
-            <div className="grid gap-4 grid-cols-1 md:grid-cols-2">
-              <div className="rounded-xl bg-white/70 shadow p-4 border border-zinc-200">
-                <div className="flex items-center justify-between mb-2">
-                  <h2 className="font-semibold text-zinc-700">Kinder</h2>
-                  <Link href="/dashboard/add-child">
-                    <Button variant="ghost" size="sm">
-                      <Plus className="h-4 w-4 mr-1" />
-                      Kind hinzufügen
-                    </Button>
-                  </Link>
-                </div>
-                <p className="text-sm text-zinc-500">Du hast noch keine Kinder hinzugefügt.</p>
-              </div>
-  
-              <div className="rounded-xl bg-white/70 shadow p-4 border border-zinc-200">
-                <h2 className="font-semibold text-zinc-700">Impfungen</h2>
-                <p className="text-sm text-zinc-500">Noch keine Einträge vorhanden.</p>
-              </div>
-            </div>
+            <DashboardContent />
           </div>
         </main>
         <Footer />
diff --git a/src/components/dashboard/dashboard-content.tsx b/src/components/dashboard/dashboard-content.tsx
new file mode 100644
index 0000000..75658dc
--- /dev/null
+++ b/src/components/dashboard/dashboard-content.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import { format, differenceInMonths } from "date-fns";
+import { de } from "date-fns/locale";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Plus, Baby, Syringe, Calendar, Clock } from "lucide-react";
+import { trpc } from "@/utils/trpc";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+
+export function DashboardContent() {
+  const { data: children, isLoading } = trpc.child.getAllByUser.useQuery();
+
+  return (
+    <div className="space-y-6">
+      <div className="grid gap-6 grid-cols-1 md:grid-cols-2">
+        <Card className="bg-white/80 border-zinc-200 shadow-sm hover:shadow-md transition-shadow">
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <div>
+              <CardTitle className="text-xl font-semibold text-zinc-800">Kinder</CardTitle>
+              <CardDescription className="text-zinc-500">Verwalte deine Kinder</CardDescription>
+            </div>
+            <Link href="/dashboard/add-child">
+              <Button variant="default" size="sm" className="bg-rose-500 hover:bg-rose-600">
+                <Plus className="h-4 w-4 mr-1" />
+                Kind hinzufügen
+              </Button>
+            </Link>
+          </CardHeader>
+          <CardContent>
+            {isLoading ? (
+              <div className="space-y-4">
+                <div className="h-20 w-full rounded-lg bg-zinc-200/50 animate-pulse"></div>
+                <div className="h-20 w-full rounded-lg bg-zinc-200/50 animate-pulse"></div>
+              </div>
+            ) : children && children.length > 0 ? (
+              <div className="space-y-4">
+                {children.map((child) => {
+                  const birthDate = new Date(child.birthDate);
+                  const ageInMonths = differenceInMonths(new Date(), birthDate);
+                  
+                  return (
+                    <div 
+                      key={child.id} 
+                      className="flex items-center p-4 rounded-lg bg-white border border-zinc-100 hover:bg-rose-50/50 hover:border-rose-100 transition-all"
+                    >
+                      <div className="flex-shrink-0 mr-4">
+                        <div className="w-12 h-12 rounded-full bg-rose-100 flex items-center justify-center">
+                          <Baby className="h-6 w-6 text-rose-500" />
+                        </div>
+                      </div>
+                      <div className="flex-grow">
+                        <h3 className="font-medium text-lg text-zinc-800">{child.name}</h3>
+                        <div className="flex flex-wrap gap-x-4 mt-1 text-sm text-zinc-500">
+                          <div className="flex items-center">
+                            <Calendar className="h-3.5 w-3.5 mr-1 text-zinc-400" />
+                            <span>Geboren: {format(birthDate, "dd.MM.yyyy", { locale: de })}</span>
+                          </div>
+                          <div className="flex items-center">
+                            <Clock className="h-3.5 w-3.5 mr-1 text-zinc-400" />
+                            <span>Alter: {ageInMonths} Monate</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : (
+              <div className="flex flex-col items-center justify-center py-8 text-center">
+                <div className="w-16 h-16 rounded-full bg-rose-100 flex items-center justify-center mb-4">
+                  <Baby className="h-8 w-8 text-rose-500" />
+                </div>
+                <p className="text-zinc-500 mb-2">Du hast noch keine Kinder hinzugefügt.</p>
+                <Link href="/dashboard/add-child">
+                  <Button variant="outline" size="sm" className="border-rose-200 text-rose-600 hover:bg-rose-50">
+                    <Plus className="h-4 w-4 mr-1" />
+                    Kind hinzufügen
+                  </Button>
+                </Link>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card className="bg-white/80 border-zinc-200 shadow-sm hover:shadow-md transition-shadow">
+          <CardHeader className="pb-2">
+            <div>
+              <CardTitle className="text-xl font-semibold text-zinc-800">Impfungen</CardTitle>
+              <CardDescription className="text-zinc-500">Verfolge Impftermine</CardDescription>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-col items-center justify-center py-8 text-center">
+              <div className="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4">
+                <Syringe className="h-8 w-8 text-blue-500" />
+              </div>
+              <p className="text-zinc-500 mb-2">Noch keine Impfungen eingetragen.</p>
+              <Button variant="outline" size="sm" className="border-blue-200 text-blue-600 hover:bg-blue-50" disabled>
+                <Plus className="h-4 w-4 mr-1" />
+                Impfung hinzufügen
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+      
+      <Card className="bg-white/80 border-zinc-200 shadow-sm hover:shadow-md transition-shadow">
+        <CardHeader className="pb-2">
+          <div>
+            <CardTitle className="text-xl font-semibold text-zinc-800">Entwicklung</CardTitle>
+            <CardDescription className="text-zinc-500">Verfolge die Entwicklung deines Kindes</CardDescription>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col items-center justify-center py-8 text-center">
+            <p className="text-zinc-500 mb-2">Entwicklungsdaten werden bald verfügbar sein.</p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..f47c316
--- /dev/null
+++ b/src/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-zinc-200/50", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton } 
\ No newline at end of file
diff --git a/src/server/api/routers/child.ts b/src/server/api/routers/child.ts
index 5918dd6..9c9e98e 100644
--- a/src/server/api/routers/child.ts
+++ b/src/server/api/routers/child.ts
@@ -11,6 +11,17 @@ export const childRouter = router({
     });
   }),
   
+  getAllByUser: protectedProcedure.query(async ({ ctx }) => {
+    return ctx.prisma.child.findMany({
+      where: {
+        userId: ctx.session.user.id
+      },
+      orderBy: {
+        birthDate: 'asc'
+      }
+    });
+  }),
+  
   add: protectedProcedure
     .input(
       z.object({