From a2fcaeb81cea02ea651f6af56bb330bd1c2f9835 Mon Sep 17 00:00:00 2001
From: Kenan KARAER <kenankaraerr@hotmail.com>
Date: Wed, 3 Dec 2025 22:13:09 +0300
Subject: [PATCH] Fix: Responsive design for Reservations page (Card view on
 mobile)

---
 src/app/dashboard/reservations/page.tsx | 70 +++++++++++++++++++++----
 1 file changed, 60 insertions(+), 10 deletions(-)

diff --git a/src/app/dashboard/reservations/page.tsx b/src/app/dashboard/reservations/page.tsx
index 6d67570..e64f989 100644
--- a/src/app/dashboard/reservations/page.tsx
+++ b/src/app/dashboard/reservations/page.tsx
@@ -8,11 +8,12 @@ import {
     TableRow,
 } from "@/components/ui/table"
 import { Button } from "@/components/ui/button"
-import { Plus, Calendar as CalendarIcon } from "lucide-react"
+import { Plus, Calendar as CalendarIcon, Clock, MapPin, User, Package } from "lucide-react"
 import Link from "next/link"
 import { format } from "date-fns"
 import { tr } from "date-fns/locale"
 import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
 
 export default async function ReservationsPage() {
     const supabase = await createClient()
@@ -41,24 +42,25 @@ export default async function ReservationsPage() {
     }
 
     return (
-        <div className="space-y-4">
-            <div className="flex items-center justify-between">
+        <div className="space-y-6">
+            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                 <h2 className="text-3xl font-bold tracking-tight">Rezervasyonlar</h2>
-                <div className="space-x-2">
-                    <Link href="/dashboard/calendar">
-                        <Button variant="outline">
+                <div className="flex flex-col sm:flex-row gap-2 w-full sm:w-auto">
+                    <Link href="/dashboard/calendar" className="w-full sm:w-auto">
+                        <Button variant="outline" className="w-full">
                             <CalendarIcon className="mr-2 h-4 w-4" /> Takvim Görünümü
                         </Button>
                     </Link>
-                    <Link href="/dashboard/reservations/new">
-                        <Button>
+                    <Link href="/dashboard/reservations/new" className="w-full sm:w-auto">
+                        <Button className="w-full">
                             <Plus className="mr-2 h-4 w-4" /> Yeni Rezervasyon
                         </Button>
                     </Link>
                 </div>
             </div>
 
-            <div className="rounded-md border">
+            {/* Desktop View */}
+            <div className="hidden md:block rounded-md border">
                 <Table>
                     <TableHeader>
                         <TableRow>
@@ -95,7 +97,9 @@ export default async function ReservationsPage() {
                                     </TableCell>
                                     <TableCell>{getStatusBadge(res.status || 'pending')}</TableCell>
                                     <TableCell className="text-right">
-                                        <Button variant="ghost" size="sm">Detay</Button>
+                                        <Link href={`/dashboard/reservations/${res.id}`}>
+                                            <Button variant="ghost" size="sm">Detay</Button>
+                                        </Link>
                                     </TableCell>
                                 </TableRow>
                             ))
@@ -103,6 +107,52 @@ export default async function ReservationsPage() {
                     </TableBody>
                 </Table>
             </div>
+
+            {/* Mobile View */}
+            <div className="grid grid-cols-1 gap-4 md:hidden">
+                {reservations?.length === 0 ? (
+                    <div className="text-center p-8 border rounded-lg bg-muted/10 text-muted-foreground">
+                        Henüz rezervasyon yok.
+                    </div>
+                ) : (
+                    reservations?.map((res) => (
+                        <Card key={res.id} className="overflow-hidden">
+                            <CardHeader className="bg-muted/20 p-4 flex flex-row items-center justify-between space-y-0">
+                                <span className="font-semibold">
+                                    {format(new Date(res.start_time), 'd MMMM yyyy', { locale: tr })}
+                                </span>
+                                {getStatusBadge(res.status || 'pending')}
+                            </CardHeader>
+                            <CardContent className="p-4 space-y-3">
+                                <div className="flex items-center text-sm">
+                                    <Clock className="mr-2 h-4 w-4 text-muted-foreground" />
+                                    {format(new Date(res.start_time), 'HH:mm')} - {format(new Date(res.end_time), 'HH:mm')}
+                                </div>
+                                <div className="flex items-center text-sm">
+                                    <MapPin className="mr-2 h-4 w-4 text-muted-foreground" />
+                                    {res.halls?.name}
+                                </div>
+                                <div className="flex items-center text-sm">
+                                    <User className="mr-2 h-4 w-4 text-muted-foreground" />
+                                    {res.customers?.full_name}
+                                </div>
+                                {res.packages?.name && (
+                                    <div className="flex items-center text-sm">
+                                        <Package className="mr-2 h-4 w-4 text-muted-foreground" />
+                                        <span>{res.packages.name}</span>
+                                        {res.packages.price && <span className="ml-1 text-muted-foreground">(₺{res.packages.price})</span>}
+                                    </div>
+                                )}
+                            </CardContent>
+                            <CardFooter className="p-4 pt-0">
+                                <Link href={`/dashboard/reservations/${res.id}`} className="w-full">
+                                    <Button variant="outline" className="w-full">Detayları Gör</Button>
+                                </Link>
+                            </CardFooter>
+                        </Card>
+                    ))
+                )}
+            </div>
         </div>
     )
 }