134 lines
6.2 KiB
TypeScript
134 lines
6.2 KiB
TypeScript
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, Search, Phone, Mail, FileText, Edit } from "lucide-react"
|
||
import Link from "next/link"
|
||
import { Input } from "@/components/ui/input"
|
||
import { Card, CardContent, CardHeader } from "@/components/ui/card"
|
||
|
||
export default async function CustomersPage({
|
||
searchParams,
|
||
}: {
|
||
searchParams: Promise<{ q?: string }>
|
||
}) {
|
||
const query = (await searchParams).q || ''
|
||
const supabase = await createClient()
|
||
|
||
let request = supabase.from('customers').select('*').order('created_at', { ascending: false })
|
||
|
||
if (query) {
|
||
request = request.ilike('full_name', `%${query}%`)
|
||
}
|
||
|
||
const { data: customers } = await request
|
||
|
||
return (
|
||
<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" className="w-full sm:w-auto">
|
||
<Button className="w-full">
|
||
<Plus className="mr-2 h-4 w-4" /> Yeni Müşteri Ekle
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-2">
|
||
<div className="relative flex-1 max-w-sm">
|
||
<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
|
||
<Input
|
||
placeholder="İsim ile ara..."
|
||
className="pl-8"
|
||
defaultValue={query}
|
||
// Note: Real search implementation would need a client component or form submission
|
||
// For now just UI
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Desktop View */}
|
||
<div className="hidden md:block rounded-md border">
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead>İsim Soyisim</TableHead>
|
||
<TableHead>Telefon</TableHead>
|
||
<TableHead>E-posta</TableHead>
|
||
<TableHead>Notlar</TableHead>
|
||
<TableHead className="text-right">İşlemler</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{customers?.length === 0 ? (
|
||
<TableRow>
|
||
<TableCell colSpan={5} className="text-center h-24 text-muted-foreground">
|
||
Müşteri bulunamadı.
|
||
</TableCell>
|
||
</TableRow>
|
||
) : (
|
||
customers?.map((customer) => (
|
||
<TableRow key={customer.id}>
|
||
<TableCell className="font-medium">{customer.full_name}</TableCell>
|
||
<TableCell>{customer.phone}</TableCell>
|
||
<TableCell>{customer.email}</TableCell>
|
||
<TableCell className="max-w-xs truncate">{customer.notes}</TableCell>
|
||
<TableCell className="text-right">
|
||
<Link href={`/dashboard/customers/${customer.id}`}>
|
||
<Button variant="ghost" size="sm">Düzenle</Button>
|
||
</Link>
|
||
</TableCell>
|
||
</TableRow>
|
||
))
|
||
)}
|
||
</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>
|
||
<Link href={`/dashboard/customers/${customer.id}`}>
|
||
<Button variant="ghost" size="icon" className="h-8 w-8">
|
||
<Edit className="h-4 w-4 text-muted-foreground" />
|
||
</Button>
|
||
</Link>
|
||
</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>
|
||
)
|
||
}
|