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

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

Browse Source
This commit is contained in:
Kenan KARAER
2025-12-03 22:16:52 +03:00
parent 9fa2907a3e
commit db961c95a4
1 changed files with 44 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/app/dashboard/customers/page.tsx
View File

@@ -8,9 +8,10 @@ import {
TableRow,
} from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { Plus, Search } from "lucide-react"
import { Plus, Search, Phone, Mail, FileText, Edit } from "lucide-react"
import Link from "next/link"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
export default async function CustomersPage({
searchParams,
@@ -29,11 +30,11 @@ export default async function CustomersPage({
const { data: customers } = await request
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">Müşteriler</h2>
<Link href="/dashboard/customers/new">
<Button>
<Link href="/dashboard/customers/new" className="w-full sm:w-auto">
<Button className="w-full">
<Plus className="mr-2 h-4 w-4" /> Yeni Müşteri Ekle
</Button>
</Link>
@@ -52,7 +53,8 @@ export default async function CustomersPage({
</div>
</div>
<div className="rounded-md border">
{/* Desktop View */}
<div className="hidden md:block rounded-md border">
<Table>
<TableHeader>
<TableRow>
@@ -86,6 +88,42 @@ export default async function CustomersPage({
</TableBody>
</Table>
</div>
{/* Mobile View */}
<div className="grid grid-cols-1 gap-4 md:hidden">
{customers?.length === 0 ? (
<div className="text-center p-8 border rounded-lg bg-muted/10 text-muted-foreground">
Müşteri bulunamadı.
</div>
) : (
customers?.map((customer) => (
<Card key={customer.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 text-lg">{customer.full_name}</span>
<Button variant="ghost" size="icon" className="h-8 w-8">
<Edit className="h-4 w-4 text-muted-foreground" />
</Button>
</CardHeader>
<CardContent className="p-4 space-y-3">
<div className="flex items-center text-sm">
<Phone className="mr-2 h-4 w-4 text-muted-foreground" />
{customer.phone || "-"}
</div>
<div className="flex items-center text-sm">
<Mail className="mr-2 h-4 w-4 text-muted-foreground" />
<span className="truncate">{customer.email || "-"}</span>
</div>
{customer.notes && (
<div className="flex items-start text-sm">
<FileText className="mr-2 h-4 w-4 text-muted-foreground mt-0.5" />
<span className="line-clamp-2 text-muted-foreground">{customer.notes}</span>
</div>
)}
</CardContent>
</Card>
))
)}
</div>
</div>
)
}