Fix: Responsive design for Halls page (switched to Card grid)

src/app/dashboard/halls/page.tsx

@@ -1,63 +1,69 @@
 import { createClient } from "@/lib/supabase/server"
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
-} from "@/components/ui/table"
 import { Button } from "@/components/ui/button"
-import { Plus } from "lucide-react"
+import { Plus, Users, Edit } from "lucide-react"
 import Link from "next/link"
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
 
 export default async function HallsPage() {
     const supabase = await createClient()
     const { data: halls } = await supabase.from('halls').select('*').order('created_at', { ascending: false })
 
     return (
-        <div className="space-y-4">
+        <div className="space-y-6">
-            <div className="flex items-center justify-between">
+            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+                <div>
                     <h2 className="text-3xl font-bold tracking-tight">Salonlar</h2>
+                    <p className="text-muted-foreground">Düğün salonlarınızı ve kapasitelerini yönetin.</p>
+                </div>
                 <Link href="/dashboard/halls/new">
-                    <Button>
+                    <Button className="w-full sm:w-auto">
                         <Plus className="mr-2 h-4 w-4" /> Yeni Salon Ekle
                     </Button>
                 </Link>
             </div>
 
-            <div className="rounded-md border">
-                <Table>
-                    <TableHeader>
-                        <TableRow>
-                            <TableHead>İsim</TableHead>
-                            <TableHead>Kapasite</TableHead>
-                            <TableHead>Açıklama</TableHead>
-                            <TableHead className="text-right">İşlemler</TableHead>
-                        </TableRow>
-                    </TableHeader>
-                    <TableBody>
             {halls?.length === 0 ? (
-                            <TableRow>
+                <div className="flex flex-col items-center justify-center h-64 border rounded-lg bg-muted/10 border-dashed">
-                                <TableCell colSpan={4} className="text-center h-24 text-muted-foreground">
+                    <p className="text-muted-foreground mb-4">Henüz salon eklenmemiş.</p>
-                                    Henüz salon eklenmemiş.
+                    <Link href="/dashboard/halls/new">
-                                </TableCell>
+                        <Button variant="outline">İlk Salonu Ekle</Button>
-                            </TableRow>
+                    </Link>
-                        ) : (
-                            halls?.map((hall) => (
-                                <TableRow key={hall.id}>
-                                    <TableCell className="font-medium">{hall.name}</TableCell>
-                                    <TableCell>{hall.capacity} Kişi</TableCell>
-                                    <TableCell>{hall.description}</TableCell>
-                                    <TableCell className="text-right">
-                                        <Button variant="ghost" size="sm">Düzenle</Button>
-                                    </TableCell>
-                                </TableRow>
-                            ))
-                        )}
-                    </TableBody>
-                </Table>
                 </div>
+            ) : (
+                <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+                    {halls?.map((hall) => (
+                        <Card key={hall.id} className="flex flex-col overflow-hidden transition-all hover:shadow-md">
+                            <CardHeader className="bg-muted/20 pb-4">
+                                <div className="flex items-start justify-between">
+                                    <CardTitle className="text-xl font-semibold">{hall.name}</CardTitle>
+                                    <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-primary">
+                                        <Edit className="h-4 w-4" />
+                                    </Button>
+                                </div>
+                            </CardHeader>
+                            <CardContent className="flex-1 pt-6 space-y-4">
+                                <div className="flex items-center text-sm text-muted-foreground bg-muted/50 p-2 rounded-md w-fit">
+                                    <Users className="mr-2 h-4 w-4" />
+                                    <span className="font-medium text-foreground">{hall.capacity}</span>
+                                    <span className="ml-1">Kişi Kapasiteli</span>
+                                </div>
+                                {hall.description && (
+                                    <p className="text-sm text-muted-foreground line-clamp-3">
+                                        {hall.description}
+                                    </p>
+                                )}
+                            </CardContent>
+                            <CardFooter className="border-t bg-muted/10 p-4">
+                                <div className="flex w-full items-center justify-between text-xs text-muted-foreground">
+                                    <span>ID: {hall.id.slice(0, 8)}...</span>
+                                    <Badge variant="secondary" className="font-normal">Aktif</Badge>
+                                </div>
+                            </CardFooter>
+                        </Card>
+                    ))}
+                </div>
+            )}
         </div>
     )
 }