Initial commit: Wedding Hall Automation System with Next.js, Supabase, and Modern UI

src/app/(auth)/login/actions.ts

@@ -0,0 +1,24 @@
+'use server'
+
+import { revalidatePath } from 'next/cache'
+import { redirect } from 'next/navigation'
+import { createClient } from '@/lib/supabase/server'
+
+export async function login(formData: FormData) {
+    const supabase = await createClient()
+
+    const email = formData.get('email') as string
+    const password = formData.get('password') as string
+
+    const { error } = await supabase.auth.signInWithPassword({
+        email,
+        password,
+    })
+
+    if (error) {
+        redirect('/error')
+    }
+
+    revalidatePath('/', 'layout')
+    redirect('/dashboard')
+}

src/app/(auth)/login/page.tsx

@@ -0,0 +1,35 @@
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { login } from "./actions"
+
+export default function LoginPage() {
+    return (
+        <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
+            <Card className="w-full max-w-md">
+                <CardHeader>
+                    <CardTitle className="text-2xl font-bold text-center">Giriş Yap</CardTitle>
+                    <CardDescription className="text-center">
+                        Düğün Salonu Yönetim Paneli
+                    </CardDescription>
+                </CardHeader>
+                <form>
+                    <CardContent className="space-y-4">
+                        <div className="space-y-2">
+                            <Label htmlFor="email">E-posta</Label>
+                            <Input id="email" name="email" type="email" placeholder="ornek@isletme.com" required />
+                        </div>
+                        <div className="space-y-2">
+                            <Label htmlFor="password">Şifre</Label>
+                            <Input id="password" name="password" type="password" required />
+                        </div>
+                    </CardContent>
+                    <CardFooter>
+                        <Button formAction={login} className="w-full">Giriş Yap</Button>
+                    </CardFooter>
+                </form>
+            </Card>
+        </div>
+    )
+}

src/app/dashboard/calendar/page.tsx

@@ -0,0 +1,34 @@
+import { CalendarView } from "@/components/calendar-view"
+import { createClient } from "@/lib/supabase/server"
+
+export default async function CalendarPage() {
+    const supabase = await createClient()
+
+    // Fetch reservations
+    const { data: reservations } = await supabase
+        .from('reservations')
+        .select(`
+      id,
+      start_time,
+      end_time,
+      status,
+      halls (name),
+      customers (full_name)
+    `)
+
+    // Transform data for calendar
+    const events = reservations?.map(res => ({
+        id: res.id,
+        title: `${res.halls?.name || 'Salon'} - ${res.customers?.full_name || 'Müşteri'}`,
+        start: new Date(res.start_time),
+        end: new Date(res.end_time),
+        resource: res,
+    })) || []
+
+    return (
+        <div className="space-y-4">
+            <h2 className="text-3xl font-bold tracking-tight">Takvim</h2>
+            <CalendarView events={events} />
+        </div>
+    )
+}

src/app/dashboard/customers/new/actions.ts

@@ -0,0 +1,21 @@
+'use server'
+
+import { createClient } from "@/lib/supabase/server"
+import { revalidatePath } from "next/cache"
+
+export async function createCustomer(data: { full_name: string; phone?: string; email?: string; notes?: string }) {
+    const supabase = await createClient()
+
+    const { error } = await supabase.from('customers').insert({
+        full_name: data.full_name,
+        phone: data.phone,
+        email: data.email || null,
+        notes: data.notes,
+    })
+
+    if (error) {
+        throw new Error(error.message)
+    }
+
+    revalidatePath('/dashboard/customers')
+}

src/app/dashboard/customers/new/customer-form.tsx

@@ -0,0 +1,119 @@
+'use client'
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import * as z from "zod"
+import { Button } from "@/components/ui/button"
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { createCustomer } from "./actions"
+import { useRouter } from "next/navigation"
+import { useState } from "react"
+
+const formSchema = z.object({
+    full_name: z.string().min(2, {
+        message: "İsim en az 2 karakter olmalıdır.",
+    }),
+    phone: z.string().optional(),
+    email: z.string().email({ message: "Geçersiz e-posta adresi." }).optional().or(z.literal('')),
+    notes: z.string().optional(),
+})
+
+export function CustomerForm() {
+    const router = useRouter()
+    const [loading, setLoading] = useState(false)
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            full_name: "",
+            phone: "",
+            email: "",
+            notes: "",
+        },
+    })
+
+    async function onSubmit(values: z.infer<typeof formSchema>) {
+        setLoading(true)
+        try {
+            await createCustomer(values)
+            router.push('/dashboard/customers')
+            router.refresh()
+        } catch (error) {
+            console.error(error)
+            alert("Bir hata oluştu")
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+                <FormField
+                    control={form.control}
+                    name="full_name"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>İsim Soyisim</FormLabel>
+                            <FormControl>
+                                <Input placeholder="Ahmet Yılmaz" {...field} />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+                <FormField
+                    control={form.control}
+                    name="phone"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>Telefon</FormLabel>
+                            <FormControl>
+                                <Input placeholder="0555 555 55 55" {...field} />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+                <FormField
+                    control={form.control}
+                    name="email"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>E-posta</FormLabel>
+                            <FormControl>
+                                <Input placeholder="ahmet@ornek.com" {...field} />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+                <FormField
+                    control={form.control}
+                    name="notes"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>Notlar</FormLabel>
+                            <FormControl>
+                                <Textarea placeholder="Müşteri hakkında notlar..." {...field} />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+                <Button type="submit" disabled={loading}>
+                    {loading ? "Kaydediliyor..." : "Kaydet"}
+                </Button>
+            </form>
+        </Form>
+    )
+}

src/app/dashboard/customers/new/page.tsx

@@ -0,0 +1,17 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { CustomerForm } from "./customer-form"
+
+export default function NewCustomerPage() {
+    return (
+        <div className="max-w-2xl mx-auto">
+            <Card>
+                <CardHeader>
+                    <CardTitle>Yeni Müşteri Ekle</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <CustomerForm />
+                </CardContent>
+            </Card>
+        </div>
+    )
+}

src/app/dashboard/customers/page.tsx

@@ -0,0 +1,91 @@
+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 } from "lucide-react"
+import Link from "next/link"
+import { Input } from "@/components/ui/input"
+
+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-4">
+            <div className="flex items-center justify-between">
+                <h2 className="text-3xl font-bold tracking-tight">Müşteriler</h2>
+                <Link href="/dashboard/customers/new">
+                    <Button>
+                        <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>
+
+            <div className="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">
+                                        <Button variant="ghost" size="sm">Düzenle</Button>
+                                    </TableCell>
+                                </TableRow>
+                            ))
+                        )}
+                    </TableBody>
+                </Table>
+            </div>
+        </div>
+    )
+}

src/app/dashboard/halls/new/actions.ts

@@ -0,0 +1,20 @@
+'use server'
+
+import { createClient } from "@/lib/supabase/server"
+import { revalidatePath } from "next/cache"
+
+export async function createHall(data: { name: string; capacity: number; description?: string }) {
+    const supabase = await createClient()
+
+    const { error } = await supabase.from('halls').insert({
+        name: data.name,
+        capacity: data.capacity,
+        description: data.description,
+    })
+
+    if (error) {
+        throw new Error(error.message)
+    }
+
+    revalidatePath('/dashboard/halls')
+}

src/app/dashboard/halls/new/hall-form.tsx

@@ -0,0 +1,108 @@
+'use client'
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import * as z from "zod"
+import { Button } from "@/components/ui/button"
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { createHall } from "./actions"
+import { useRouter } from "next/navigation"
+import { useState } from "react"
+import { useToast } from "@/hooks/use-toast" // Note: Need to check if toast hook exists or create it
+
+const formSchema = z.object({
+    name: z.string().min(2, {
+        message: "Salon ismi en az 2 karakter olmalıdır.",
+    }),
+    capacity: z.coerce.number().min(1, {
+        message: "Kapasite en az 1 olmalıdır.",
+    }),
+    description: z.string().optional(),
+})
+
+export function HallForm() {
+    const router = useRouter()
+    const [loading, setLoading] = useState(false)
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            name: "",
+            capacity: 0,
+            description: "",
+        },
+    })
+
+    async function onSubmit(values: z.infer<typeof formSchema>) {
+        setLoading(true)
+        try {
+            await createHall(values)
+            router.push('/dashboard/halls')
+            router.refresh()
+        } catch (error) {
+            console.error(error)
+            alert("Bir hata oluştu")
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+                <FormField
+                    control={form.control}
+                    name="name"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>Salon İsmi</FormLabel>
+                            <FormControl>
+                                <Input placeholder="Örn: Altın Salon" {...field} />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+                <FormField
+                    control={form.control}
+                    name="capacity"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>Kapasite</FormLabel>
+                            <FormControl>
+                                <Input type="number" placeholder="500" {...field} />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+                <FormField
+                    control={form.control}
+                    name="description"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>Açıklama</FormLabel>
+                            <FormControl>
+                                <Textarea placeholder="Salon özellikleri..." {...field} />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+                <Button type="submit" disabled={loading}>
+                    {loading ? "Kaydediliyor..." : "Kaydet"}
+                </Button>
+            </form>
+        </Form>
+    )
+}

src/app/dashboard/halls/new/page.tsx

@@ -0,0 +1,17 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { HallForm } from "./hall-form"
+
+export default function NewHallPage() {
+    return (
+        <div className="max-w-2xl mx-auto">
+            <Card>
+                <CardHeader>
+                    <CardTitle>Yeni Salon Ekle</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <HallForm />
+                </CardContent>
+            </Card>
+        </div>
+    )
+}

src/app/dashboard/halls/page.tsx

@@ -0,0 +1,63 @@
+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 Link from "next/link"
+
+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="flex items-center justify-between">
+                <h2 className="text-3xl font-bold tracking-tight">Salonlar</h2>
+                <Link href="/dashboard/halls/new">
+                    <Button>
+                        <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>
+                                <TableCell colSpan={4} className="text-center h-24 text-muted-foreground">
+                                    Henüz salon eklenmemiş.
+                                </TableCell>
+                            </TableRow>
+                        ) : (
+                            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>
+    )
+}

src/app/dashboard/layout.tsx

@@ -0,0 +1,40 @@
+import { MainNav } from "@/components/main-nav"
+import { UserNav } from "@/components/user-nav"
+import { Building } from "lucide-react"
+
+export default function DashboardLayout({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    return (
+        <div className="flex min-h-screen bg-gray-50/50 dark:bg-gray-900/50">
+            {/* Sidebar */}
+            <aside className="hidden md:flex w-72 flex-col fixed inset-y-0 z-50 bg-white dark:bg-gray-950 border-r shadow-sm">
+                <MainNav />
+            </aside>
+
+            {/* Main Content */}
+            <div className="flex-1 md:ml-72 flex flex-col min-h-screen">
+                {/* Header */}
+                <header className="sticky top-0 z-40 h-16 glass border-b px-6 flex items-center justify-between">
+                    <div className="md:hidden flex items-center font-bold text-xl">
+                        <Building className="mr-2 h-6 w-6 text-primary" />
+                        WeddingOS
+                    </div>
+
+                    <div className="ml-auto flex items-center space-x-4">
+                        <UserNav />
+                    </div>
+                </header>
+
+                {/* Page Content */}
+                <main className="flex-1 p-6 md:p-8 overflow-y-auto">
+                    <div className="max-w-7xl mx-auto animate-in fade-in slide-in-from-bottom-4 duration-500">
+                        {children}
+                    </div>
+                </main>
+            </div>
+        </div>
+    )
+}

src/app/dashboard/page.tsx

@@ -0,0 +1,118 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { CalendarDays, CreditCard, Users, DollarSign, TrendingUp, ArrowUpRight } from "lucide-react"
+
+export default function DashboardPage() {
+    return (
+        <div className="space-y-8">
+            <div className="flex items-center justify-between">
+                <div>
+                    <h2 className="text-3xl font-bold tracking-tight gradient-text">Hoş Geldiniz, Admin</h2>
+                    <p className="text-muted-foreground mt-1">İşletmenizin durumu hakkında genel bakış.</p>
+                </div>
+            </div>
+
+            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
+                <Card className="card-hover border-l-4 border-l-blue-500">
+                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                        <CardTitle className="text-sm font-medium text-muted-foreground">
+                            Toplam Rezervasyon
+                        </CardTitle>
+                        <div className="h-8 w-8 rounded-full bg-blue-100 dark:bg-blue-900/20 flex items-center justify-center">
+                            <CalendarDays className="h-4 w-4 text-blue-600 dark:text-blue-400" />
+                        </div>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="text-3xl font-bold mt-2">12</div>
+                        <p className="text-xs text-muted-foreground mt-1 flex items-center">
+                            <span className="text-green-600 flex items-center mr-1"><TrendingUp className="h-3 w-3 mr-1" /> +2</span> geçen aydan beri
+                        </p>
+                    </CardContent>
+                </Card>
+
+                <Card className="card-hover border-l-4 border-l-purple-500">
+                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                        <CardTitle className="text-sm font-medium text-muted-foreground">
+                            Aktif Müşteriler
+                        </CardTitle>
+                        <div className="h-8 w-8 rounded-full bg-purple-100 dark:bg-purple-900/20 flex items-center justify-center">
+                            <Users className="h-4 w-4 text-purple-600 dark:text-purple-400" />
+                        </div>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="text-3xl font-bold mt-2">50</div>
+                        <p className="text-xs text-muted-foreground mt-1 flex items-center">
+                            <span className="text-green-600 flex items-center mr-1"><ArrowUpRight className="h-3 w-3 mr-1" /> +4</span> geçen aydan beri
+                        </p>
+                    </CardContent>
+                </Card>
+
+                <Card className="card-hover border-l-4 border-l-orange-500">
+                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                        <CardTitle className="text-sm font-medium text-muted-foreground">
+                            Bekleyen Ödemeler
+                        </CardTitle>
+                        <div className="h-8 w-8 rounded-full bg-orange-100 dark:bg-orange-900/20 flex items-center justify-center">
+                            <CreditCard className="h-4 w-4 text-orange-600 dark:text-orange-400" />
+                        </div>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="text-3xl font-bold mt-2">₺12,000</div>
+                        <p className="text-xs text-muted-foreground mt-1">
+                            3 rezervasyon için
+                        </p>
+                    </CardContent>
+                </Card>
+
+                <Card className="card-hover border-l-4 border-l-green-500">
+                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                        <CardTitle className="text-sm font-medium text-muted-foreground">
+                            Aylık Gelir
+                        </CardTitle>
+                        <div className="h-8 w-8 rounded-full bg-green-100 dark:bg-green-900/20 flex items-center justify-center">
+                            <DollarSign className="h-4 w-4 text-green-600 dark:text-green-400" />
+                        </div>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="text-3xl font-bold mt-2">₺45,000</div>
+                        <p className="text-xs text-muted-foreground mt-1 flex items-center">
+                            <span className="text-green-600 flex items-center mr-1"><TrendingUp className="h-3 w-3 mr-1" /> +10%</span> geçen aydan beri
+                        </p>
+                    </CardContent>
+                </Card>
+            </div>
+
+            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-7">
+                <Card className="col-span-4 shadow-md border-none">
+                    <CardHeader>
+                        <CardTitle>Yaklaşan Etkinlikler</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="h-[300px] flex items-center justify-center bg-muted/20 rounded-lg border border-dashed">
+                            <p className="text-muted-foreground">Takvim önizlemesi buraya gelecek.</p>
+                        </div>
+                    </CardContent>
+                </Card>
+                <Card className="col-span-3 shadow-md border-none">
+                    <CardHeader>
+                        <CardTitle>Son Aktiviteler</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="space-y-4">
+                            {[1, 2, 3].map((i) => (
+                                <div key={i} className="flex items-center gap-4 p-3 rounded-lg hover:bg-muted/50 transition-colors">
+                                    <div className="h-9 w-9 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-sm">
+                                        AH
+                                    </div>
+                                    <div className="flex-1">
+                                        <p className="text-sm font-medium">Ahmet Hakan rezervasyon yaptı</p>
+                                        <p className="text-xs text-muted-foreground">2 dakika önce</p>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </CardContent>
+                </Card>
+            </div>
+        </div>
+    )
+}

src/app/dashboard/reservations/[id]/actions.ts

@@ -0,0 +1,39 @@
+'use server'
+
+import { createClient } from "@/lib/supabase/server"
+import { revalidatePath } from "next/cache"
+
+export async function addPayment(reservationId: string, formData: FormData) {
+    const supabase = await createClient()
+
+    const amount = formData.get('amount')
+    const type = formData.get('type')
+    const method = formData.get('method')
+
+    const { error } = await supabase.from('payments').insert({
+        reservation_id: reservationId,
+        amount: amount,
+        payment_type: type,
+        payment_method: method,
+        status: 'paid', // Assuming immediate payment for now
+        paid_at: new Date().toISOString(),
+    })
+
+    if (error) throw new Error(error.message)
+
+    revalidatePath(`/dashboard/reservations/${reservationId}`)
+}
+
+export async function updateStatus(id: string, status: string) {
+    const supabase = await createClient()
+
+    const { error } = await supabase
+        .from('reservations')
+        .update({ status })
+        .eq('id', id)
+
+    if (error) throw new Error(error.message)
+
+    revalidatePath(`/dashboard/reservations/${id}`)
+    revalidatePath('/dashboard/reservations')
+}

src/app/dashboard/reservations/[id]/page.tsx

@@ -0,0 +1,157 @@
+import { createClient } from "@/lib/supabase/server"
+import { notFound } from "next/navigation"
+import { format } from "date-fns"
+import { tr } from "date-fns/locale"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Separator } from "@/components/ui/separator"
+import { ArrowLeft, Calendar, Clock, MapPin, User, CreditCard } from "lucide-react"
+import Link from "next/link"
+import { PaymentList } from "./payment-list"
+import { StatusActions } from "./status-actions"
+
+export default async function ReservationDetailsPage({
+    params,
+}: {
+    params: Promise<{ id: string }>
+}) {
+    const id = (await params).id
+    const supabase = await createClient()
+
+    const { data: reservation } = await supabase
+        .from('reservations')
+        .select(`
+      *,
+      halls (name),
+      customers (full_name, phone, email),
+      packages (name, price)
+    `)
+        .eq('id', id)
+        .single()
+
+    if (!reservation) {
+        notFound()
+    }
+
+    const { data: payments } = await supabase
+        .from('payments')
+        .select('*')
+        .eq('reservation_id', id)
+        .order('created_at', { ascending: false })
+
+    const totalPaid = payments?.reduce((sum, p) => sum + (p.status === 'paid' ? Number(p.amount) : 0), 0) || 0
+    const packagePrice = reservation.packages?.price || 0
+    const remaining = Math.max(0, packagePrice - totalPaid)
+
+    return (
+        <div className="space-y-6">
+            <div className="flex items-center gap-4">
+                <Link href="/dashboard/reservations">
+                    <Button variant="ghost" size="icon">
+                        <ArrowLeft className="h-4 w-4" />
+                    </Button>
+                </Link>
+                <h2 className="text-3xl font-bold tracking-tight">Rezervasyon Detayı</h2>
+                <div className="ml-auto">
+                    <StatusActions id={reservation.id} currentStatus={reservation.status} />
+                </div>
+            </div>
+
+            <div className="grid gap-6 md:grid-cols-2">
+                <Card>
+                    <CardHeader>
+                        <CardTitle className="flex items-center gap-2">
+                            <Calendar className="h-5 w-5" /> Etkinlik Bilgileri
+                        </CardTitle>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                        <div className="grid grid-cols-2 gap-4">
+                            <div>
+                                <p className="text-sm font-medium text-muted-foreground">Tarih</p>
+                                <p className="text-lg">{format(new Date(reservation.start_time), 'd MMMM yyyy', { locale: tr })}</p>
+                            </div>
+                            <div>
+                                <p className="text-sm font-medium text-muted-foreground">Saat</p>
+                                <p className="text-lg">
+                                    {format(new Date(reservation.start_time), 'HH:mm')} - {format(new Date(reservation.end_time), 'HH:mm')}
+                                </p>
+                            </div>
+                            <div>
+                                <p className="text-sm font-medium text-muted-foreground">Salon</p>
+                                <div className="flex items-center gap-2">
+                                    <MapPin className="h-4 w-4 text-muted-foreground" />
+                                    <span>{reservation.halls?.name}</span>
+                                </div>
+                            </div>
+                            <div>
+                                <p className="text-sm font-medium text-muted-foreground">Durum</p>
+                                <Badge variant={reservation.status === 'cancelled' ? 'destructive' : 'default'}>
+                                    {reservation.status === 'confirmed' ? 'Onaylandı' :
+                                        reservation.status === 'pending' ? 'Bekliyor' :
+                                            reservation.status === 'cancelled' ? 'İptal' : reservation.status}
+                                </Badge>
+                            </div>
+                        </div>
+                        <Separator />
+                        <div>
+                            <p className="text-sm font-medium text-muted-foreground mb-2">Notlar</p>
+                            <p className="text-sm">{reservation.notes || "Not yok."}</p>
+                        </div>
+                    </CardContent>
+                </Card>
+
+                <Card>
+                    <CardHeader>
+                        <CardTitle className="flex items-center gap-2">
+                            <User className="h-5 w-5" /> Müşteri Bilgileri
+                        </CardTitle>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                        <div>
+                            <p className="text-sm font-medium text-muted-foreground">İsim Soyisim</p>
+                            <p className="text-lg font-medium">{reservation.customers?.full_name}</p>
+                        </div>
+                        <div>
+                            <p className="text-sm font-medium text-muted-foreground">Telefon</p>
+                            <p>{reservation.customers?.phone || "-"}</p>
+                        </div>
+                        <div>
+                            <p className="text-sm font-medium text-muted-foreground">E-posta</p>
+                            <p>{reservation.customers?.email || "-"}</p>
+                        </div>
+                    </CardContent>
+                </Card>
+
+                <Card className="md:col-span-2">
+                    <CardHeader>
+                        <CardTitle className="flex items-center gap-2">
+                            <CreditCard className="h-5 w-5" /> Ödeme Bilgileri
+                        </CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+                            <div className="bg-muted/50 p-4 rounded-lg">
+                                <p className="text-sm font-medium text-muted-foreground">Toplam Tutar</p>
+                                <p className="text-2xl font-bold">₺{packagePrice}</p>
+                                <p className="text-xs text-muted-foreground">{reservation.packages?.name || "Paket Yok"}</p>
+                            </div>
+                            <div className="bg-green-500/10 p-4 rounded-lg">
+                                <p className="text-sm font-medium text-green-600">Ödenen</p>
+                                <p className="text-2xl font-bold text-green-700">₺{totalPaid}</p>
+                            </div>
+                            <div className="bg-red-500/10 p-4 rounded-lg">
+                                <p className="text-sm font-medium text-red-600">Kalan</p>
+                                <p className="text-2xl font-bold text-red-700">₺{remaining}</p>
+                            </div>
+                        </div>
+
+                        <Separator className="my-6" />
+
+                        <PaymentList reservationId={reservation.id} payments={payments || []} />
+                    </CardContent>
+                </Card>
+            </div>
+        </div>
+    )
+}

src/app/dashboard/reservations/[id]/payment-list.tsx

@@ -0,0 +1,148 @@
+'use client'
+
+import { Button } from "@/components/ui/button"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { useState } from "react"
+import { addPayment } from "./actions"
+import { format } from "date-fns"
+import { tr } from "date-fns/locale"
+import { Badge } from "@/components/ui/badge"
+
+interface PaymentListProps {
+    reservationId: string
+    payments: any[]
+}
+
+export function PaymentList({ reservationId, payments }: PaymentListProps) {
+    const [open, setOpen] = useState(false)
+    const [loading, setLoading] = useState(false)
+
+    async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+        e.preventDefault()
+        setLoading(true)
+        const formData = new FormData(e.currentTarget)
+
+        try {
+            await addPayment(reservationId, formData)
+            setOpen(false)
+        } catch (error) {
+            alert("Ödeme eklenirken hata oluştu")
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <div className="space-y-4">
+            <div className="flex items-center justify-between">
+                <h3 className="text-lg font-medium">Ödeme Geçmişi</h3>
+                <Dialog open={open} onOpenChange={setOpen}>
+                    <DialogTrigger asChild>
+                        <Button size="sm">Ödeme Ekle</Button>
+                    </DialogTrigger>
+                    <DialogContent>
+                        <DialogHeader>
+                            <DialogTitle>Ödeme Ekle</DialogTitle>
+                            <DialogDescription>
+                                Bu rezervasyon için yeni bir ödeme kaydı oluşturun.
+                            </DialogDescription>
+                        </DialogHeader>
+                        <form onSubmit={handleSubmit} className="space-y-4">
+                            <div className="space-y-2">
+                                <Label htmlFor="amount">Tutar (₺)</Label>
+                                <Input id="amount" name="amount" type="number" required />
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="type">Ödeme Türü</Label>
+                                <Select name="type" defaultValue="deposit">
+                                    <SelectTrigger>
+                                        <SelectValue />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="deposit">Kapora</SelectItem>
+                                        <SelectItem value="remaining">Ara Ödeme / Kalan</SelectItem>
+                                        <SelectItem value="full">Tamamı</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="method">Ödeme Yöntemi</Label>
+                                <Select name="method" defaultValue="cash">
+                                    <SelectTrigger>
+                                        <SelectValue />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="cash">Nakit</SelectItem>
+                                        <SelectItem value="credit_card">Kredi Kartı</SelectItem>
+                                        <SelectItem value="transfer">Havale / EFT</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+                            <DialogFooter>
+                                <Button type="submit" disabled={loading}>
+                                    {loading ? "Kaydediliyor..." : "Kaydet"}
+                                </Button>
+                            </DialogFooter>
+                        </form>
+                    </DialogContent>
+                </Dialog>
+            </div>
+
+            <div className="border rounded-md">
+                <table className="w-full text-sm">
+                    <thead>
+                        <tr className="border-b bg-muted/50">
+                            <th className="h-10 px-4 text-left font-medium">Tarih</th>
+                            <th className="h-10 px-4 text-left font-medium">Tutar</th>
+                            <th className="h-10 px-4 text-left font-medium">Tür</th>
+                            <th className="h-10 px-4 text-left font-medium">Yöntem</th>
+                            <th className="h-10 px-4 text-left font-medium">Durum</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {payments.length === 0 ? (
+                            <tr>
+                                <td colSpan={5} className="h-24 text-center text-muted-foreground">
+                                    Henüz ödeme kaydı yok.
+                                </td>
+                            </tr>
+                        ) : (
+                            payments.map((payment) => (
+                                <tr key={payment.id} className="border-b last:border-0">
+                                    <td className="p-4">
+                                        {format(new Date(payment.created_at), 'd MMM yyyy HH:mm', { locale: tr })}
+                                    </td>
+                                    <td className="p-4 font-medium">₺{payment.amount}</td>
+                                    <td className="p-4 capitalize">
+                                        {payment.payment_type === 'deposit' ? 'Kapora' :
+                                            payment.payment_type === 'full' ? 'Tamamı' : 'Ara Ödeme'}
+                                    </td>
+                                    <td className="p-4 capitalize">
+                                        {payment.payment_method === 'cash' ? 'Nakit' :
+                                            payment.payment_method === 'credit_card' ? 'Kredi Kartı' : 'Havale'}
+                                    </td>
+                                    <td className="p-4">
+                                        <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
+                                            Ödendi
+                                        </Badge>
+                                    </td>
+                                </tr>
+                            ))
+                        )}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    )
+}

src/app/dashboard/reservations/[id]/status-actions.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { Button } from "@/components/ui/button"
+import { updateStatus } from "./actions"
+import { useState } from "react"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { ChevronDown } from "lucide-react"
+
+export function StatusActions({ id, currentStatus }: { id: string, currentStatus: string }) {
+    const [loading, setLoading] = useState(false)
+
+    async function handleStatusChange(status: string) {
+        if (!confirm(`Rezervasyon durumunu '${status}' olarak değiştirmek istediğinize emin misiniz?`)) return
+
+        setLoading(true)
+        try {
+            await updateStatus(id, status)
+        } catch (error) {
+            alert("Durum güncellenirken hata oluştu")
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="outline" disabled={loading}>
+                    İşlemler <ChevronDown className="ml-2 h-4 w-4" />
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => handleStatusChange('confirmed')}>
+                    Onayla
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => handleStatusChange('completed')}>
+                    Tamamlandı Olarak İşaretle
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => handleStatusChange('cancelled')} className="text-red-600">
+                    İptal Et
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    )
+}

src/app/dashboard/reservations/new/actions.ts

@@ -0,0 +1,52 @@
+'use server'
+
+import { createClient } from "@/lib/supabase/server"
+import { revalidatePath } from "next/cache"
+import { redirect } from "next/navigation"
+
+export async function createReservation(data: {
+    hall_id: string
+    customer_id: string
+    package_id?: string
+    start_time: string
+    end_time: string
+    notes?: string
+}) {
+    const supabase = await createClient()
+
+    // 1. Check for conflicts
+    // We look for any reservation in the same hall that overlaps with the requested time range
+    const { data: conflicts, error: conflictError } = await supabase
+        .from('reservations')
+        .select('id')
+        .eq('hall_id', data.hall_id)
+        .neq('status', 'cancelled') // Ignore cancelled bookings
+        .or(`and(start_time.lte.${data.end_time},end_time.gte.${data.start_time})`)
+
+    if (conflictError) {
+        throw new Error("Müsaitlik kontrolü yapılırken hata oluştu: " + conflictError.message)
+    }
+
+    if (conflicts && conflicts.length > 0) {
+        return { error: "Seçilen tarih ve saatte bu salon zaten dolu." }
+    }
+
+    // 2. Create Reservation
+    const { error } = await supabase.from('reservations').insert({
+        hall_id: data.hall_id,
+        customer_id: data.customer_id,
+        package_id: data.package_id || null,
+        start_time: data.start_time,
+        end_time: data.end_time,
+        status: 'confirmed', // Auto confirm for admin created
+        notes: data.notes,
+    })
+
+    if (error) {
+        return { error: error.message }
+    }
+
+    revalidatePath('/dashboard/reservations')
+    revalidatePath('/dashboard/calendar')
+    redirect('/dashboard/reservations')
+}

src/app/dashboard/reservations/new/page.tsx

@@ -0,0 +1,29 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { ReservationForm } from "./reservation-form"
+import { createClient } from "@/lib/supabase/server"
+
+export default async function NewReservationPage() {
+    const supabase = await createClient()
+
+    // Fetch necessary data for the form
+    const { data: halls } = await supabase.from('halls').select('id, name')
+    const { data: customers } = await supabase.from('customers').select('id, full_name').order('created_at', { ascending: false }).limit(50)
+    const { data: packages } = await supabase.from('packages').select('id, name, price').eq('is_active', true)
+
+    return (
+        <div className="max-w-3xl mx-auto">
+            <Card>
+                <CardHeader>
+                    <CardTitle>Yeni Rezervasyon Oluştur</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <ReservationForm
+                        halls={halls || []}
+                        customers={customers || []}
+                        packages={packages || []}
+                    />
+                </CardContent>
+            </Card>
+        </div>
+    )
+}

src/app/dashboard/reservations/new/reservation-form.tsx

@@ -0,0 +1,226 @@
+'use client'
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import * as z from "zod"
+import { Button } from "@/components/ui/button"
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Textarea } from "@/components/ui/textarea"
+import { createReservation } from "./actions"
+import { useState } from "react"
+import { useToast } from "@/hooks/use-toast" // Assuming we have this or will use alert
+
+const formSchema = z.object({
+    hall_id: z.string().min(1, "Salon seçmelisiniz."),
+    customer_id: z.string().min(1, "Müşteri seçmelisiniz."),
+    package_id: z.string().optional(),
+    date: z.string().min(1, "Tarih seçmelisiniz."),
+    start_time: z.string().min(1, "Başlangıç saati seçmelisiniz."),
+    end_time: z.string().min(1, "Bitiş saati seçmelisiniz."),
+    notes: z.string().optional(),
+})
+
+interface ReservationFormProps {
+    halls: { id: string, name: string }[]
+    customers: { id: string, full_name: string }[]
+    packages: { id: string, name: string, price: number }[]
+}
+
+export function ReservationForm({ halls, customers, packages }: ReservationFormProps) {
+    const [loading, setLoading] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            notes: "",
+        },
+    })
+
+    async function onSubmit(values: z.infer<typeof formSchema>) {
+        setLoading(true)
+        setError(null)
+
+        // Combine date and time
+        const startDateTime = new Date(`${values.date}T${values.start_time}`)
+        const endDateTime = new Date(`${values.date}T${values.end_time}`)
+
+        if (endDateTime <= startDateTime) {
+            setError("Bitiş saati başlangıç saatinden sonra olmalıdır.")
+            setLoading(false)
+            return
+        }
+
+        try {
+            const result = await createReservation({
+                hall_id: values.hall_id,
+                customer_id: values.customer_id,
+                package_id: values.package_id === "none" ? undefined : values.package_id,
+                start_time: startDateTime.toISOString(),
+                end_time: endDateTime.toISOString(),
+                notes: values.notes,
+            })
+
+            if (result && result.error) {
+                setError(result.error)
+            }
+        } catch (e) {
+            setError("Beklenmedik bir hata oluştu.")
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+                {error && (
+                    <div className="bg-destructive/15 text-destructive px-4 py-2 rounded-md text-sm font-medium">
+                        {error}
+                    </div>
+                )}
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <FormField
+                        control={form.control}
+                        name="hall_id"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>Salon</FormLabel>
+                                <Select onValueChange={field.onChange} defaultValue={field.value}>
+                                    <FormControl>
+                                        <SelectTrigger>
+                                            <SelectValue placeholder="Salon Seçin" />
+                                        </SelectTrigger>
+                                    </FormControl>
+                                    <SelectContent>
+                                        {halls.map(hall => (
+                                            <SelectItem key={hall.id} value={hall.id}>{hall.name}</SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+
+                    <FormField
+                        control={form.control}
+                        name="customer_id"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>Müşteri</FormLabel>
+                                <Select onValueChange={field.onChange} defaultValue={field.value}>
+                                    <FormControl>
+                                        <SelectTrigger>
+                                            <SelectValue placeholder="Müşteri Seçin" />
+                                        </SelectTrigger>
+                                    </FormControl>
+                                    <SelectContent>
+                                        {customers.map(c => (
+                                            <SelectItem key={c.id} value={c.id}>{c.full_name}</SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <FormField
+                        control={form.control}
+                        name="date"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>Tarih</FormLabel>
+                                <FormControl>
+                                    <Input type="date" {...field} />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+                    <FormField
+                        control={form.control}
+                        name="start_time"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>Başlangıç Saati</FormLabel>
+                                <FormControl>
+                                    <Input type="time" {...field} />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+                    <FormField
+                        control={form.control}
+                        name="end_time"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>Bitiş Saati</FormLabel>
+                                <FormControl>
+                                    <Input type="time" {...field} />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+                </div>
+
+                <FormField
+                    control={form.control}
+                    name="package_id"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>Paket (Opsiyonel)</FormLabel>
+                            <Select onValueChange={field.onChange} defaultValue={field.value}>
+                                <FormControl>
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Paket Seçin" />
+                                    </SelectTrigger>
+                                </FormControl>
+                                <SelectContent>
+                                    <SelectItem value="none">Paket Yok</SelectItem>
+                                    {packages.map(p => (
+                                        <SelectItem key={p.id} value={p.id}>{p.name} - ₺{p.price}</SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+
+                <FormField
+                    control={form.control}
+                    name="notes"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>Notlar</FormLabel>
+                            <FormControl>
+                                <Textarea placeholder="Özel istekler..." {...field} />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+
+                <Button type="submit" disabled={loading} className="w-full">
+                    {loading ? "Oluşturuluyor..." : "Rezervasyonu Oluştur"}
+                </Button>
+            </form>
+        </Form>
+    )
+}

src/app/dashboard/reservations/page.tsx

@@ -0,0 +1,108 @@
+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, Calendar as CalendarIcon } 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"
+
+export default async function ReservationsPage() {
+    const supabase = await createClient()
+
+    const { data: reservations } = await supabase
+        .from('reservations')
+        .select(`
+      id,
+      start_time,
+      end_time,
+      status,
+      halls (name),
+      customers (full_name),
+      packages (name, price)
+    `)
+        .order('start_time', { ascending: true })
+
+    const getStatusBadge = (status: string) => {
+        switch (status) {
+            case 'confirmed': return <Badge className="bg-green-600">Onaylandı</Badge>
+            case 'pending': return <Badge variant="secondary">Bekliyor</Badge>
+            case 'cancelled': return <Badge variant="destructive">İptal</Badge>
+            case 'completed': return <Badge variant="outline">Tamamlandı</Badge>
+            default: return <Badge>{status}</Badge>
+        }
+    }
+
+    return (
+        <div className="space-y-4">
+            <div className="flex items-center justify-between">
+                <h2 className="text-3xl font-bold tracking-tight">Rezervasyonlar</h2>
+                <div className="space-x-2">
+                    <Link href="/dashboard/calendar">
+                        <Button variant="outline">
+                            <CalendarIcon className="mr-2 h-4 w-4" /> Takvim Görünümü
+                        </Button>
+                    </Link>
+                    <Link href="/dashboard/reservations/new">
+                        <Button>
+                            <Plus className="mr-2 h-4 w-4" /> Yeni Rezervasyon
+                        </Button>
+                    </Link>
+                </div>
+            </div>
+
+            <div className="rounded-md border">
+                <Table>
+                    <TableHeader>
+                        <TableRow>
+                            <TableHead>Tarih</TableHead>
+                            <TableHead>Saat</TableHead>
+                            <TableHead>Salon</TableHead>
+                            <TableHead>Müşteri</TableHead>
+                            <TableHead>Paket</TableHead>
+                            <TableHead>Durum</TableHead>
+                            <TableHead className="text-right">İşlemler</TableHead>
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                        {reservations?.length === 0 ? (
+                            <TableRow>
+                                <TableCell colSpan={7} className="text-center h-24 text-muted-foreground">
+                                    Henüz rezervasyon yok.
+                                </TableCell>
+                            </TableRow>
+                        ) : (
+                            reservations?.map((res) => (
+                                <TableRow key={res.id}>
+                                    <TableCell className="font-medium">
+                                        {format(new Date(res.start_time), 'd MMMM yyyy', { locale: tr })}
+                                    </TableCell>
+                                    <TableCell>
+                                        {format(new Date(res.start_time), 'HH:mm')} - {format(new Date(res.end_time), 'HH:mm')}
+                                    </TableCell>
+                                    <TableCell>{res.halls?.name}</TableCell>
+                                    <TableCell>{res.customers?.full_name}</TableCell>
+                                    <TableCell>
+                                        {res.packages?.name}
+                                        {res.packages?.price && <span className="text-xs text-muted-foreground block">₺{res.packages.price}</span>}
+                                    </TableCell>
+                                    <TableCell>{getStatusBadge(res.status || 'pending')}</TableCell>
+                                    <TableCell className="text-right">
+                                        <Button variant="ghost" size="sm">Detay</Button>
+                                    </TableCell>
+                                </TableRow>
+                            ))
+                        )}
+                    </TableBody>
+                </Table>
+            </div>
+        </div>
+    )
+}

src/app/dashboard/settings/packages/new/actions.ts

@@ -0,0 +1,21 @@
+'use server'
+
+import { createClient } from "@/lib/supabase/server"
+import { revalidatePath } from "next/cache"
+
+export async function createPackage(data: { name: string; price: number; description?: string; is_active: boolean }) {
+    const supabase = await createClient()
+
+    const { error } = await supabase.from('packages').insert({
+        name: data.name,
+        price: data.price,
+        description: data.description,
+        is_active: data.is_active,
+    })
+
+    if (error) {
+        throw new Error(error.message)
+    }
+
+    revalidatePath('/dashboard/settings/packages')
+}

src/app/dashboard/settings/packages/new/package-form.tsx

@@ -0,0 +1,127 @@
+'use client'
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import * as z from "zod"
+import { Button } from "@/components/ui/button"
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Checkbox } from "@/components/ui/checkbox"
+import { createPackage } from "./actions"
+import { useRouter } from "next/navigation"
+import { useState } from "react"
+
+const formSchema = z.object({
+    name: z.string().min(2, "Paket ismi en az 2 karakter olmalıdır."),
+    price: z.coerce.number().min(0, "Fiyat 0'dan küçük olamaz."),
+    description: z.string().optional(),
+    is_active: z.boolean().default(true),
+})
+
+export function PackageForm() {
+    const router = useRouter()
+    const [loading, setLoading] = useState(false)
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            name: "",
+            price: 0,
+            description: "",
+            is_active: true,
+        },
+    })
+
+    async function onSubmit(values: z.infer<typeof formSchema>) {
+        setLoading(true)
+        try {
+            await createPackage(values)
+            router.push('/dashboard/settings/packages')
+            router.refresh()
+        } catch (error) {
+            alert("Bir hata oluştu")
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+                <FormField
+                    control={form.control}
+                    name="name"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>Paket İsmi</FormLabel>
+                            <FormControl>
+                                <Input placeholder="Örn: Altın Menü" {...field} />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+                <FormField
+                    control={form.control}
+                    name="price"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>Fiyat (₺)</FormLabel>
+                            <FormControl>
+                                <Input type="number" placeholder="10000" {...field} />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+                <FormField
+                    control={form.control}
+                    name="description"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>Açıklama / İçerik</FormLabel>
+                            <FormControl>
+                                <Textarea placeholder="Paket içeriği..." {...field} />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+                <FormField
+                    control={form.control}
+                    name="is_active"
+                    render={({ field }) => (
+                        <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
+                            <FormControl>
+                                <Checkbox
+                                    checked={field.value}
+                                    onCheckedChange={field.onChange}
+                                />
+                            </FormControl>
+                            <div className="space-y-1 leading-none">
+                                <FormLabel>
+                                    Aktif
+                                </FormLabel>
+                                <FormDescription>
+                                    Bu paket yeni rezervasyonlarda seçilebilir olsun.
+                                </FormDescription>
+                            </div>
+                        </FormItem>
+                    )}
+                />
+                <Button type="submit" disabled={loading}>
+                    {loading ? "Kaydediliyor..." : "Kaydet"}
+                </Button>
+            </form>
+        </Form>
+    )
+}

src/app/dashboard/settings/packages/new/page.tsx

@@ -0,0 +1,17 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { PackageForm } from "./package-form"
+
+export default function NewPackagePage() {
+    return (
+        <div className="max-w-2xl mx-auto">
+            <Card>
+                <CardHeader>
+                    <CardTitle>Yeni Paket Ekle</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <PackageForm />
+                </CardContent>
+            </Card>
+        </div>
+    )
+}

src/app/dashboard/settings/packages/page.tsx

@@ -0,0 +1,72 @@
+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 Link from "next/link"
+import { Badge } from "@/components/ui/badge"
+
+export default async function PackagesPage() {
+    const supabase = await createClient()
+    const { data: packages } = await supabase.from('packages').select('*').order('created_at', { ascending: false })
+
+    return (
+        <div className="space-y-4">
+            <div className="flex items-center justify-between">
+                <h2 className="text-3xl font-bold tracking-tight">Fiyat Paketleri</h2>
+                <Link href="/dashboard/settings/packages/new">
+                    <Button>
+                        <Plus className="mr-2 h-4 w-4" /> Yeni Paket Ekle
+                    </Button>
+                </Link>
+            </div>
+
+            <div className="rounded-md border">
+                <Table>
+                    <TableHeader>
+                        <TableRow>
+                            <TableHead>Paket İsmi</TableHead>
+                            <TableHead>Fiyat</TableHead>
+                            <TableHead>Açıklama</TableHead>
+                            <TableHead>Durum</TableHead>
+                            <TableHead className="text-right">İşlemler</TableHead>
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                        {packages?.length === 0 ? (
+                            <TableRow>
+                                <TableCell colSpan={5} className="text-center h-24 text-muted-foreground">
+                                    Henüz paket eklenmemiş.
+                                </TableCell>
+                            </TableRow>
+                        ) : (
+                            packages?.map((pkg) => (
+                                <TableRow key={pkg.id}>
+                                    <TableCell className="font-medium">{pkg.name}</TableCell>
+                                    <TableCell>₺{pkg.price}</TableCell>
+                                    <TableCell>{pkg.description}</TableCell>
+                                    <TableCell>
+                                        {pkg.is_active ? (
+                                            <Badge className="bg-green-600">Aktif</Badge>
+                                        ) : (
+                                            <Badge variant="secondary">Pasif</Badge>
+                                        )}
+                                    </TableCell>
+                                    <TableCell className="text-right">
+                                        <Button variant="ghost" size="sm">Düzenle</Button>
+                                    </TableCell>
+                                </TableRow>
+                            ))
+                        )}
+                    </TableBody>
+                </Table>
+            </div>
+        </div>
+    )
+}

src/app/dashboard/settings/page.tsx

@@ -0,0 +1,39 @@
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Utensils, Users } from "lucide-react"
+
+export default function SettingsPage() {
+    return (
+        <div className="space-y-4">
+            <h2 className="text-3xl font-bold tracking-tight">Ayarlar</h2>
+            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                <Link href="/dashboard/settings/packages">
+                    <Card className="hover:bg-muted/50 transition-colors cursor-pointer">
+                        <CardHeader>
+                            <CardTitle className="flex items-center gap-2">
+                                <Utensils className="h-5 w-5" /> Fiyat Paketleri
+                            </CardTitle>
+                            <CardDescription>
+                                Menüler, hafta sonu tarifeleri ve paket fiyatlarını yönetin.
+                            </CardDescription>
+                        </CardHeader>
+                    </Card>
+                </Link>
+
+                <Link href="/dashboard/settings/users">
+                    <Card className="hover:bg-muted/50 transition-colors cursor-pointer">
+                        <CardHeader>
+                            <CardTitle className="flex items-center gap-2">
+                                <Users className="h-5 w-5" /> Kullanıcı Yönetimi
+                            </CardTitle>
+                            <CardDescription>
+                                Personel hesapları ve yetkilendirmeleri yönetin.
+                            </CardDescription>
+                        </CardHeader>
+                    </Card>
+                </Link>
+            </div>
+        </div>
+    )
+}

src/app/globals.css

@@ -0,0 +1,89 @@
+@import "tailwindcss";
+
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 224 71.4% 4.1%;
+  --card: 0 0% 100%;
+  --card-foreground: 224 71.4% 4.1%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 224 71.4% 4.1%;
+  --primary: 262.1 83.3% 57.8%;
+  --primary-foreground: 210 20% 98%;
+  --secondary: 220 14.3% 95.9%;
+  --secondary-foreground: 220.9 39.3% 11%;
+  --muted: 220 14.3% 95.9%;
+  --muted-foreground: 220 8.9% 46.1%;
+  --accent: 220 14.3% 95.9%;
+  --accent-foreground: 220.9 39.3% 11%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 20% 98%;
+  --border: 220 13% 91%;
+  --input: 220 13% 91%;
+  --ring: 262.1 83.3% 57.8%;
+  --radius: 0.75rem;
+  --chart-1: 12 76% 61%;
+  --chart-2: 173 58% 39%;
+  --chart-3: 197 37% 24%;
+  --chart-4: 43 74% 66%;
+  --chart-5: 27 87% 67%;
+}
+
+.dark {
+  --background: 224 71.4% 4.1%;
+  --foreground: 210 20% 98%;
+  --card: 224 71.4% 4.1%;
+  --card-foreground: 210 20% 98%;
+  --popover: 224 71.4% 4.1%;
+  --popover-foreground: 210 20% 98%;
+  --primary: 263.4 70% 50.4%;
+  --primary-foreground: 210 20% 98%;
+  --secondary: 215 27.9% 16.9%;
+  --secondary-foreground: 210 20% 98%;
+  --muted: 215 27.9% 16.9%;
+  --muted-foreground: 217.9 10.6% 64.9%;
+  --accent: 215 27.9% 16.9%;
+  --accent-foreground: 210 20% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 20% 98%;
+  --border: 215 27.9% 16.9%;
+  --input: 215 27.9% 16.9%;
+  --ring: 263.4 70% 50.4%;
+  --chart-1: 220 70% 50%;
+  --chart-2: 160 60% 45%;
+  --chart-3: 30 80% 55%;
+  --chart-4: 280 65% 60%;
+  --chart-5: 340 75% 55%;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Custom Utilities for Glassmorphism & Modern UI */
+@layer utilities {
+  .glass {
+    @apply bg-white/70 dark:bg-black/70 backdrop-blur-lg border border-white/20 dark:border-white/10 shadow-xl;
+  }
+  
+  .card-hover {
+    @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
+  }
+
+  .gradient-text {
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-600;
+  }
+}

src/app/layout.tsx

@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation'
+
+export default function Home() {
+  redirect('/dashboard')
+}

src/components/calendar-view.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+import { Calendar, dateFnsLocalizer, View, Views } from 'react-big-calendar'
+import format from 'date-fns/format'
+import parse from 'date-fns/parse'
+import startOfWeek from 'date-fns/startOfWeek'
+import getDay from 'date-fns/getDay'
+import tr from 'date-fns/locale/tr'
+import "react-big-calendar/lib/css/react-big-calendar.css"
+import { useState } from 'react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+
+const locales = {
+    'tr': tr,
+}
+
+const localizer = dateFnsLocalizer({
+    format,
+    parse,
+    startOfWeek,
+    getDay,
+    locales,
+})
+
+interface CalendarViewProps {
+    events?: any[]
+}
+
+export function CalendarView({ events = [] }: CalendarViewProps) {
+    const [view, setView] = useState<View>(Views.MONTH)
+    const [date, setDate] = useState(new Date())
+
+    return (
+        <Card className="h-[600px]">
+            <CardHeader>
+                <CardTitle>Rezervasyon Takvimi</CardTitle>
+            </CardHeader>
+            <CardContent className="h-full pb-10">
+                <Calendar
+                    localizer={localizer}
+                    events={events}
+                    startAccessor="start"
+                    endAccessor="end"
+                    style={{ height: '100%' }}
+                    culture='tr'
+                    view={view}
+                    onView={setView}
+                    date={date}
+                    onNavigate={setDate}
+                    messages={{
+                        next: "İleri",
+                        previous: "Geri",
+                        today: "Bugün",
+                        month: "Ay",
+                        week: "Hafta",
+                        day: "Gün",
+                        agenda: "Ajanda",
+                        date: "Tarih",
+                        time: "Saat",
+                        event: "Etkinlik",
+                        noEventsInRange: "Bu aralıkta etkinlik yok."
+                    }}
+                />
+            </CardContent>
+        </Card>
+    )
+}

src/components/main-nav.tsx

@@ -0,0 +1,98 @@
+'use client'
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { CalendarDays, Users, Home, Settings, Building2, CreditCard, LogOut } from "lucide-react"
+
+export function MainNav({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLElement>) {
+    const pathname = usePathname()
+
+    const routes = [
+        {
+            href: "/dashboard",
+            label: "Genel Bakış",
+            icon: Home,
+            active: pathname === "/dashboard",
+        },
+        {
+            href: "/dashboard/calendar",
+            label: "Takvim",
+            icon: CalendarDays,
+            active: pathname === "/dashboard/calendar",
+        },
+        {
+            href: "/dashboard/reservations",
+            label: "Rezervasyonlar",
+            icon: CreditCard,
+            active: pathname.startsWith("/dashboard/reservations"),
+        },
+        {
+            href: "/dashboard/customers",
+            label: "Müşteriler",
+            icon: Users,
+            active: pathname.startsWith("/dashboard/customers"),
+        },
+        {
+            href: "/dashboard/halls",
+            label: "Salonlar",
+            icon: Building2,
+            active: pathname.startsWith("/dashboard/halls"),
+        },
+        {
+            href: "/dashboard/settings",
+            label: "Ayarlar",
+            icon: Settings,
+            active: pathname.startsWith("/dashboard/settings"),
+        },
+    ]
+
+    return (
+        <nav
+            className={cn("flex flex-col space-y-2 py-4", className)}
+            {...props}
+        >
+            <div className="px-4 mb-6">
+                <h2 className="text-2xl font-bold bg-gradient-to-r from-primary to-purple-600 bg-clip-text text-transparent">
+                    WeddingOS
+                </h2>
+                <p className="text-xs text-muted-foreground mt-1">Premium Salon Yönetimi</p>
+            </div>
+
+            <div className="flex-1 px-2 space-y-1">
+                {routes.map((route) => (
+                    <Link key={route.href} href={route.href}>
+                        <Button
+                            variant={route.active ? "secondary" : "ghost"}
+                            className={cn(
+                                "w-full justify-start transition-all duration-200",
+                                route.active
+                                    ? "bg-primary/10 text-primary hover:bg-primary/20 font-semibold shadow-sm"
+                                    : "hover:bg-muted/50 text-muted-foreground hover:text-foreground"
+                            )}
+                        >
+                            <route.icon className={cn("mr-3 h-5 w-5", route.active ? "text-primary" : "text-muted-foreground")} />
+                            {route.label}
+                        </Button>
+                    </Link>
+                ))}
+            </div>
+
+            <div className="px-4 mt-auto pt-4 border-t">
+                <div className="flex items-center gap-3 mb-4 p-2 rounded-lg bg-muted/50">
+                    <div className="h-8 w-8 rounded-full bg-primary/20 flex items-center justify-center text-primary font-bold">
+                        A
+                    </div>
+                    <div className="flex-1 overflow-hidden">
+                        <p className="text-sm font-medium truncate">Admin User</p>
+                        <p className="text-xs text-muted-foreground truncate">admin@demo.com</p>
+                    </div>
+                </div>
+            </div>
+        </nav>
+    )
+}

src/components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

src/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

src/components/ui/button.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

src/components/ui/calendar.tsx

@@ -0,0 +1,216 @@
+"use client"
+
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "flex gap-4 flex-col md:flex-row relative",
+          defaultClassNames.months
+        ),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: cn(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute bg-popover inset-0 opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: cn(
+          "select-none w-(--cell-size)",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] select-none text-muted-foreground",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          props.showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
+            : "[&:first-child[data-selected=true]_button]:rounded-l-md",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "rounded-l-md bg-accent",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }

src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

src/components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

src/components/ui/dialog.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,257 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

src/components/ui/form.tsx

@@ -0,0 +1,167 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

src/components/ui/popover.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

src/components/ui/select.tsx

@@ -0,0 +1,187 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

src/components/ui/sheet.tsx

@@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

src/components/ui/table.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

src/components/user-nav.tsx

@@ -0,0 +1,57 @@
+import {
+    Avatar,
+    AvatarFallback,
+    AvatarImage,
+} from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuShortcut,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function UserNav() {
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="ghost" className="relative h-8 w-8 rounded-full">
+                    <Avatar className="h-8 w-8">
+                        <AvatarImage src="/avatars/01.png" alt="@shadcn" />
+                        <AvatarFallback>AD</AvatarFallback>
+                    </Avatar>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56" align="end" forceMount>
+                <DropdownMenuLabel className="font-normal">
+                    <div className="flex flex-col space-y-1">
+                        <p className="text-sm font-medium leading-none">Admin</p>
+                        <p className="text-xs leading-none text-muted-foreground">
+                            admin@example.com
+                        </p>
+                    </div>
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                    <DropdownMenuItem>
+                        Profil
+                        <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                        Ayarlar
+                        <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+                    </DropdownMenuItem>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                    Çıkış Yap
+                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    )
+}

src/lib/supabase/client.ts

@@ -0,0 +1,8 @@
+import { createBrowserClient } from '@supabase/ssr'
+
+export function createClient() {
+    return createBrowserClient(
+        process.env.NEXT_PUBLIC_SUPABASE_URL!,
+        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+    )
+}

src/lib/supabase/middleware.ts

@@ -0,0 +1,47 @@
+import { createServerClient } from '@supabase/ssr'
+import { NextResponse, type NextRequest } from 'next/server'
+
+export async function updateSession(request: NextRequest) {
+    let supabaseResponse = NextResponse.next({
+        request,
+    })
+
+    const supabase = createServerClient(
+        process.env.NEXT_PUBLIC_SUPABASE_URL!,
+        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+        {
+            cookies: {
+                getAll() {
+                    return request.cookies.getAll()
+                },
+                setAll(cookiesToSet) {
+                    cookiesToSet.forEach(({ name, value, options }) =>
+                        request.cookies.set(name, value)
+                    )
+                    supabaseResponse = NextResponse.next({
+                        request,
+                    })
+                    cookiesToSet.forEach(({ name, value, options }) =>
+                        supabaseResponse.cookies.set(name, value, options)
+                    )
+                },
+            },
+        }
+    )
+
+    const {
+        data: { user },
+    } = await supabase.auth.getUser()
+
+    if (
+        !user &&
+        !request.nextUrl.pathname.startsWith('/login') &&
+        !request.nextUrl.pathname.startsWith('/auth')
+    ) {
+        const url = request.nextUrl.clone()
+        url.pathname = '/login'
+        return NextResponse.redirect(url)
+    }
+
+    return supabaseResponse
+}

src/lib/supabase/server.ts

@@ -0,0 +1,29 @@
+import { createServerClient } from '@supabase/ssr'
+import { cookies } from 'next/headers'
+
+export async function createClient() {
+    const cookieStore = await cookies()
+
+    return createServerClient(
+        process.env.NEXT_PUBLIC_SUPABASE_URL!,
+        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+        {
+            cookies: {
+                getAll() {
+                    return cookieStore.getAll()
+                },
+                setAll(cookiesToSet) {
+                    try {
+                        cookiesToSet.forEach(({ name, value, options }) =>
+                            cookieStore.set(name, value, options)
+                        )
+                    } catch {
+                        // The `setAll` method was called from a Server Component.
+                        // This can be ignored if you have middleware refreshing
+                        // user sessions.
+                    }
+                },
+            },
+        }
+    )
+}

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

src/middleware.ts

@@ -0,0 +1,12 @@
+import { type NextRequest } from 'next/server'
+import { updateSession } from '@/lib/supabase/middleware'
+
+export async function middleware(request: NextRequest) {
+    return await updateSession(request)
+}
+
+export const config = {
+    matcher: [
+        '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
+    ],
+}

src/types/database.types.ts

@@ -0,0 +1,83 @@
+export type Json =
+    | string
+    | number
+    | boolean
+    | null
+    | { [key: string]: Json | undefined }
+    | Json[]
+
+export interface Database {
+    public: {
+        Tables: {
+            profiles: {
+                Row: {
+                    id: string
+                    role: 'admin' | 'staff'
+                    full_name: string | null
+                    created_at: string
+                }
+                Insert: {
+                    id: string
+                    role?: 'admin' | 'staff'
+                    full_name?: string | null
+                    created_at?: string
+                }
+                Update: {
+                    id?: string
+                    role?: 'admin' | 'staff'
+                    full_name?: string | null
+                    created_at?: string
+                }
+            }
+            customers: {
+                Row: {
+                    id: string
+                    full_name: string
+                    phone: string | null
+                    email: string | null
+                    notes: string | null
+                    created_at: string
+                }
+                Insert: {
+                    id?: string
+                    full_name: string
+                    phone?: string | null
+                    email?: string | null
+                    notes?: string | null
+                    created_at?: string
+                }
+                Update: {
+                    id?: string
+                    full_name?: string
+                    phone?: string | null
+                    email?: string | null
+                    notes?: string | null
+                    created_at?: string
+                }
+            }
+            halls: {
+                Row: {
+                    id: string
+                    name: string
+                    capacity: number | null
+                    description: string | null
+                    created_at: string
+                }
+                Insert: {
+                    id?: string
+                    name: string
+                    capacity?: number | null
+                    description?: string | null
+                    created_at?: string
+                }
+                Update: {
+                    id?: string
+                    name?: string
+                    capacity?: number | null
+                    description?: string | null
+                    created_at?: string
+                }
+            }
+        }
+    }
+}