k.karaer/weeding
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Responsive design for Reservations page (Card view on mobile)

Browse Source
This commit is contained in:
Kenan KARAER
2025-12-03 22:13:09 +03:00
parent a7d62ad2d4
commit a2fcaeb81c
1 changed files with 60 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/app/dashboard/reservations/page.tsx
View File

@@ -8,11 +8,12 @@ import {
TableRow, TableRow,
} from "@/components/ui/table" } from "@/components/ui/table"
import { Button } from "@/components/ui/button" 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 Link from "next/link"
import { format } from "date-fns" import { format } from "date-fns"
import { tr } from "date-fns/locale" import { tr } from "date-fns/locale"
import { Badge } from "@/components/ui/badge" import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
export default async function ReservationsPage() { export default async function ReservationsPage() {
const supabase = await createClient() const supabase = await createClient()
@@ -41,24 +42,25 @@ export default async function ReservationsPage() {
} }
return ( 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">
<h2 className="text-3xl font-bold tracking-tight">Rezervasyonlar</h2> <h2 className="text-3xl font-bold tracking-tight">Rezervasyonlar</h2>
<div className="space-x-2"> <div className="flex flex-col sm:flex-row gap-2 w-full sm:w-auto">
<Link href="/dashboard/calendar"> <Link href="/dashboard/calendar" className="w-full sm:w-auto">
<Button variant="outline"> <Button variant="outline" className="w-full">
<CalendarIcon className="mr-2 h-4 w-4" /> Takvim Görünümü <CalendarIcon className="mr-2 h-4 w-4" /> Takvim Görünümü
</Button> </Button>
</Link> </Link>
<Link href="/dashboard/reservations/new"> <Link href="/dashboard/reservations/new" className="w-full sm:w-auto">
<Button> <Button className="w-full">
<Plus className="mr-2 h-4 w-4" /> Yeni Rezervasyon <Plus className="mr-2 h-4 w-4" /> Yeni Rezervasyon
</Button> </Button>
</Link> </Link>
</div> </div>
</div> </div>
<div className="rounded-md border"> {/* Desktop View */}
<div className="hidden md:block rounded-md border">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
@@ -95,7 +97,9 @@ export default async function ReservationsPage() {
</TableCell> </TableCell>
<TableCell>{getStatusBadge(res.status || 'pending')}</TableCell> <TableCell>{getStatusBadge(res.status || 'pending')}</TableCell>
<TableCell className="text-right"> <TableCell className="text-right">
<Link href={`/dashboard/reservations/${res.id}`}>
<Button variant="ghost" size="sm">Detay</Button> <Button variant="ghost" size="sm">Detay</Button>
</Link>
</TableCell> </TableCell>
</TableRow> </TableRow>
)) ))
@@ -103,6 +107,52 @@ export default async function ReservationsPage() {
</TableBody> </TableBody>
</Table> </Table>
</div> </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> </div>
) )
} }