profi sayfası

PLANLAMA.md

@@ -17,7 +17,7 @@
 ---
 
 ## Mevcut Durum (Tamamlananlar)
-- [x] Kullanıcı Yönetimi (Admin Ekle/Sil).
+- [x] Kullanıcı Yönetimi (Admin Ekle/Sil/Düzenle + Telefon).
 - [x] Temel Site Ayarları (Başlık, İletişim).
 - [x] Ürün Yönetimi (Temel CRUD).
 - [x] Kategori Yönetimi (Arayüz hazır, veritabanı bekleniyor).

app/(dashboard)/dashboard/profile/page.tsx

@@ -1,14 +1,40 @@
 import { createClient } from "@/lib/supabase-server"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Button } from "@/components/ui/button"
+import { UserForm } from "@/components/dashboard/user-form"
-import { Input } from "@/components/ui/input"
+import { notFound } from "next/navigation"
-import { Label } from "@/components/ui/label"
+import { getProfile } from "@/lib/data"
 
 export default async function ProfilePage() {
     const supabase = createClient()
     const { data: { user } } = await supabase.auth.getUser()
 
+    if (!user) {
+        // Should be protected by middleware but just in case
+        return <div>Lütfen giriş yapın.</div>
+    }
+
+    // Fetch profile data
+    const profile = await getProfile(user.id)
+
+    if (!profile) {
+        // Fallback for user without profile row?
+        // Or create one on the fly?
+        return <div>Profil verisi bulunamadı.</div>
+    }
+
+    const parts = (profile.full_name || "").split(' ')
+    const firstName = parts[0] || ""
+    const lastName = parts.slice(1).join(' ') || ""
+
+    const initialData = {
+        firstName,
+        lastName,
+        phone: profile.phone || "",
+        email: user.email || "",
+        role: profile.role || "user"
+    }
+
     return (
         <div className="flex-1 space-y-4 p-8 pt-6">
             <div className="flex items-center justify-between space-y-2">
@@ -20,28 +46,18 @@ export default async function ProfilePage() {
                     <CardHeader>
                         <CardTitle>Genel Bilgiler</CardTitle>
                         <CardDescription>
-                            Kişisel profil bilgileriniz.
+                            Kişisel profil bilgilerinizi buradan güncelleyebilirsiniz.
                         </CardDescription>
                     </CardHeader>
                     <CardContent className="space-y-6">
-                        <div className="flex items-center space-x-4">
+                        <div className="flex items-center space-x-4 mb-6">
                             <Avatar className="h-20 w-20">
                                 <AvatarImage src="/avatars/01.png" alt="@parakasa" />
                                 <AvatarFallback>PK</AvatarFallback>
                             </Avatar>
-                            <Button variant="outline">Fotoğraf Değiştir</Button>
                         </div>
 
-                        <div className="space-y-1">
+                        <UserForm initialData={initialData} mode="profile" />
-                            <Label htmlFor="email">E-posta</Label>
-                            <Input id="email" value={user?.email || ""} disabled />
-                            <p className="text-xs text-muted-foreground">E-posta adresi değiştirilemez.</p>
-                        </div>
-
-                        <div className="space-y-1">
-                            <Label htmlFor="role">Rol</Label>
-                            <Input id="role" value={user?.role === 'authenticated' ? 'Yönetici' : 'Kullanıcı'} disabled />
-                        </div>
                     </CardContent>
                 </Card>
             </div>

app/(dashboard)/dashboard/profile/password/page.tsx

@@ -0,0 +1,15 @@
+
+import { PasswordForm } from "../../../../../components/dashboard/password-form"
+
+export default function ChangePasswordPage() {
+    return (
+        <div className="flex-1 space-y-4 p-8 pt-6">
+            <div className="flex items-center justify-between space-y-2">
+                <h2 className="text-3xl font-bold tracking-tight">Şifre Değiştir</h2>
+            </div>
+            <div className="max-w-md">
+                <PasswordForm />
+            </div>
+        </div>
+    )
+}

app/(dashboard)/dashboard/users/[userId]/page.tsx

@@ -64,6 +64,7 @@ async function getUserDetails(userId: string) {
         firstName,
         lastName,
         email: user.email || "",
-        role: profile.role as "admin" | "user"
+        role: profile.role as "admin" | "user",
+        phone: profile.phone || ""
     }
 }

app/(dashboard)/dashboard/users/actions.ts

@@ -18,7 +18,7 @@ const supabaseAdmin = createSupabaseClient(
     }
 )
 
-export async function createUser(firstName: string, lastName: string, email: string, password: string, role: 'admin' | 'user') {
+export async function createUser(firstName: string, lastName: string, email: string, password: string, role: 'admin' | 'user', phone?: string) {
     const supabase = createClient()
 
     // 1. Check if current user is admin
@@ -59,7 +59,8 @@ export async function createUser(firstName: string, lastName: string, email: str
         .insert({
             id: newUser.user.id,
             full_name: `${firstName} ${lastName}`.trim(),
-            role: role
+            role: role,
+            phone: phone
         })
 
     if (profileError) {
@@ -91,7 +92,7 @@ export async function deleteUser(userId: string) {
     return { success: true }
 }
 
-export async function updateUser(userId: string, data: { firstName: string, lastName: string, email: string, password?: string, role: 'admin' | 'user' }) {
+export async function updateUser(userId: string, data: { firstName: string, lastName: string, email: string, password?: string, role: 'admin' | 'user', phone?: string }) {
     const supabase = createClient()
 
     // Check admin
@@ -107,7 +108,8 @@ export async function updateUser(userId: string, data: { firstName: string, last
         .from('profiles')
         .update({
             full_name: `${data.firstName} ${data.lastName}`.trim(),
-            role: data.role
+            role: data.role,
+            phone: data.phone
         })
         .eq('id', userId)
 
@@ -131,3 +133,32 @@ export async function updateUser(userId: string, data: { firstName: string, last
     revalidatePath("/dashboard/users")
     return { success: true }
 }
+
+export async function updateProfile(data: { firstName: string, lastName: string, phone?: string }) {
+    const supabase = createClient()
+    const { data: { user } } = await supabase.auth.getUser()
+
+    if (!user) return { error: "Oturum açmanız gerekiyor." }
+
+    const { error } = await supabase
+        .from('profiles')
+        .update({
+            full_name: `${data.firstName} ${data.lastName}`.trim(),
+            phone: data.phone
+        })
+        .eq('id', user.id)
+
+    if (error) return { error: "Profil güncellenemedi: " + error.message }
+
+    // Update Auth Metadata as well
+    if (data.firstName || data.lastName) {
+        await supabase.auth.updateUser({
+            data: {
+                full_name: `${data.firstName} ${data.lastName}`.trim()
+            }
+        })
+    }
+
+    revalidatePath("/dashboard/profile")
+    return { success: true }
+}

app/(dashboard)/layout.tsx

@@ -1,3 +1,4 @@
+import { getProfile } from "@/lib/data"
 import { createClient } from "@/lib/supabase-server"
 import { redirect } from "next/navigation"
 import { Sidebar } from "@/components/dashboard/sidebar"
@@ -15,6 +16,8 @@ export default async function DashboardLayout({
         redirect("/login")
     }
 
+    const profile = await getProfile(user.id)
+
     return (
         <div className="flex min-h-screen w-full flex-col bg-muted/40">
             <aside className="fixed inset-y-0 left-0 z-10 hidden w-64 flex-col border-r bg-background sm:flex">
@@ -24,7 +27,7 @@ export default async function DashboardLayout({
                 <Sidebar className="flex-1" />
             </aside>
             <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-64">
-                <DashboardHeader />
+                <DashboardHeader user={user} profile={profile} />
                 <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
                     {children}
                 </main>

app/globals.css

@@ -1,3 +1,4 @@
+@import 'react-phone-number-input/style.css';
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

components/dashboard/header.tsx

@@ -6,7 +6,12 @@ import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
 import { Sidebar } from "@/components/dashboard/sidebar"
 import { UserNav } from "@/components/dashboard/user-nav"
 
-export function DashboardHeader() {
+interface DashboardHeaderProps {
+    user: { email?: string | null } | null
+    profile: { full_name?: string | null, role?: string | null } | null
+}
+
+export function DashboardHeader({ user, profile }: DashboardHeaderProps) {
     return (
         <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
             <Sheet>
@@ -28,7 +33,7 @@ export function DashboardHeader() {
             <div className="w-full flex-1">
                 {/* Breadcrumb or Search could go here */}
             </div>
-            <UserNav />
+            <UserNav user={user} profile={profile} />
         </header>
     )
 }

components/dashboard/password-form.tsx

@@ -0,0 +1,113 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import * as z from "zod"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { toast } from "sonner"
+import { Loader2 } from "lucide-react"
+import { supabase } from "@/lib/supabase"
+
+const passwordSchema = z.object({
+    password: z.string().min(6, "Şifre en az 6 karakter olmalıdır."),
+    confirmPassword: z.string().min(6, "Şifre tekrarı en az 6 karakter olmalıdır."),
+}).refine((data) => data.password === data.confirmPassword, {
+    message: "Şifreler eşleşmiyor.",
+    path: ["confirmPassword"],
+})
+
+type PasswordFormValues = z.infer<typeof passwordSchema>
+
+export function PasswordForm() {
+    const router = useRouter()
+    const [loading, setLoading] = useState(false)
+
+    const form = useForm<PasswordFormValues>({
+        resolver: zodResolver(passwordSchema),
+        defaultValues: {
+            password: "",
+            confirmPassword: "",
+        },
+    })
+
+    const onSubmit = async (data: PasswordFormValues) => {
+        setLoading(true)
+        try {
+            const { error } = await supabase.auth.updateUser({
+                password: data.password
+            })
+
+            if (error) {
+                toast.error("Şifre güncellenemedi: " + error.message)
+                return
+            }
+
+            toast.success("Şifreniz başarıyla güncellendi.")
+            form.reset()
+            router.refresh()
+        } catch (error) {
+            toast.error("Bir sorun oluştu.")
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>Yeni Şifre Belirle</CardTitle>
+                <CardDescription>
+                    Hesabınız için yeni bir şifre belirleyin.
+                </CardDescription>
+            </CardHeader>
+            <CardContent>
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+                        <FormField
+                            control={form.control}
+                            name="password"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Yeni Şifre</FormLabel>
+                                    <FormControl>
+                                        <Input type="password" placeholder="******" {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="confirmPassword"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Şifre Tekrar</FormLabel>
+                                    <FormControl>
+                                        <Input type="password" placeholder="******" {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <Button type="submit" disabled={loading}>
+                            {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                            Şifreyi Güncelle
+                        </Button>
+                    </form>
+                </Form>
+            </CardContent>
+        </Card>
+    )
+}

components/dashboard/user-form.tsx

@@ -7,6 +7,7 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import * as z from "zod"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
+import { PhoneInput } from "@/components/ui/phone-input"
 import {
     Form,
     FormControl,
@@ -25,34 +26,45 @@ import {
 import { Card, CardContent } from "@/components/ui/card"
 import { toast } from "sonner"
 import { Loader2 } from "lucide-react"
-import { createUser, updateUser } from "@/app/(dashboard)/dashboard/users/actions"
+import { createUser, updateUser, updateProfile } from "@/app/(dashboard)/dashboard/users/actions"
 
 const userSchema = z.object({
     firstName: z.string().min(2, "Ad en az 2 karakter olmalıdır."),
     lastName: z.string().min(2, "Soyad en az 2 karakter olmalıdır."),
     email: z.string().email("Geçerli bir e-posta adresi giriniz."),
     password: z.string().optional(), // Password is optional on edit
+    confirmPassword: z.string().optional(),
     role: z.enum(["admin", "user"]),
+    phone: z.string().optional(),
 }).refine((data) => {
-    // If we are creating a NEW user (no ID passed in props effectively, but schema doesn't know props),
+    // 1. Password match check
-    // we generally want password required. But here we'll handle it in the component logic or strictly separate schemas.
+    if (data.password && data.password !== data.confirmPassword) {
-    // For simplicity, we make password optional in Zod but check it in onSubmit if it's a create action.
+        return false;
+    }
+    // 2. New user password requirement check (simplified here, but strict would check id)
+    // We handle the "required" part in onSubmit manually for now as per previous logic, 
+    // but the matching check is now here.
     return true
+}, {
+    message: "Şifreler eşleşmiyor.",
+    path: ["confirmPassword"],
 })
 
 type UserFormValues = z.infer<typeof userSchema>
 
 interface UserFormProps {
     initialData?: {
-        id: string
+        id?: string
         firstName: string
         lastName: string
         email: string
         role: "admin" | "user"
+        phone?: string
     }
+    mode?: "admin" | "profile"
 }
 
-export function UserForm({ initialData }: UserFormProps) {
+export function UserForm({ initialData, mode = "admin" }: UserFormProps) {
     const router = useRouter()
     const [loading, setLoading] = useState(false)
 
@@ -63,13 +75,17 @@ export function UserForm({ initialData }: UserFormProps) {
             lastName: initialData.lastName,
             email: initialData.email,
             password: "", // Empty password means no change
+            confirmPassword: "",
             role: initialData.role,
+            phone: initialData.phone,
         } : {
             firstName: "",
             lastName: "",
             email: "",
             password: "",
+            confirmPassword: "",
             role: "user",
+            phone: "",
         },
     })
 
@@ -77,17 +93,32 @@ export function UserForm({ initialData }: UserFormProps) {
         setLoading(true)
         try {
             let result;
-            if (initialData) {
+
-                // Update
+            if (mode === "profile") {
-                result = await updateUser(initialData.id, data)
+                // Profile update mode (self-service)
+                result = await updateProfile({
+                    firstName: data.firstName,
+                    lastName: data.lastName,
+                    phone: data.phone
+                })
+            } else if (initialData?.id) {
+                // Admin update mode
+                result = await updateUser(initialData.id, {
+                    firstName: data.firstName,
+                    lastName: data.lastName,
+                    email: data.email,
+                    password: data.password,
+                    role: data.role,
+                    phone: data.phone
+                })
             } else {
-                // Create
+                // Admin create mode
                 if (!data.password || data.password.length < 6) {
                     toast.error("Yeni kullanıcı için şifre gereklidir (min 6 karakter).")
                     setLoading(false)
                     return
                 }
-                result = await createUser(data.firstName, data.lastName, data.email, data.password, data.role)
+                result = await createUser(data.firstName, data.lastName, data.email, data.password, data.role, data.phone)
             }
 
             if (result.error) {
@@ -95,9 +126,16 @@ export function UserForm({ initialData }: UserFormProps) {
                 return
             }
 
-            toast.success(initialData ? "Kullanıcı güncellendi." : "Kullanıcı oluşturuldu.")
+            toast.success(
-            router.push("/dashboard/users")
+                mode === "profile"
+                    ? "Profil bilgileriniz güncellendi."
+                    : initialData ? "Kullanıcı güncellendi." : "Kullanıcı oluşturuldu."
+            )
+
             router.refresh()
+            if (mode === "admin") {
+                router.push("/dashboard/users")
+            }
         } catch (error) {
             toast.error("Bir sorun oluştu.")
         } finally {
@@ -139,6 +177,20 @@ export function UserForm({ initialData }: UserFormProps) {
                             />
                         </div>
 
+                        <FormField
+                            control={form.control}
+                            name="phone"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Telefon</FormLabel>
+                                    <FormControl>
+                                        <PhoneInput placeholder="555 123 4567" defaultCountry="TR" {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
                         <FormField
                             control={form.control}
                             name="email"
@@ -146,52 +198,83 @@ export function UserForm({ initialData }: UserFormProps) {
                                 <FormItem>
                                     <FormLabel>E-posta</FormLabel>
                                     <FormControl>
-                                        <Input placeholder="ahmet@parakasa.com" {...field} />
+                                        <Input
+                                            placeholder="ahmet@parakasa.com"
+                                            {...field}
+                                            disabled={mode === "profile"}
+                                            className={mode === "profile" ? "bg-muted" : ""}
+                                        />
                                     </FormControl>
+                                    {mode === "profile" && <p className="text-[0.8rem] text-muted-foreground">E-posta adresi değiştirilemez.</p>}
                                     <FormMessage />
                                 </FormItem>
                             )}
                         />
 
-                        <FormField
+                        {mode === "admin" && (
-                            control={form.control}
+                            <>
-                            name="password"
+                                <FormField
-                            render={({ field }) => (
+                                    control={form.control}
-                                <FormItem>
+                                    name="password"
-                                    <FormLabel>Şifre</FormLabel>
+                                    render={({ field }) => (
-                                    <FormControl>
+                                        <FormItem>
-                                        <Input type="password" placeholder={initialData ? "Değiştirmek için yeni şifre girin" : "******"} {...field} />
+                                            <FormLabel>Şifre</FormLabel>
-                                    </FormControl>
+                                            <FormControl>
-                                    <FormMessage />
+                                                <Input type="password" placeholder={initialData ? "Değiştirmek için yeni şifre girin" : "******"} {...field} />
-                                </FormItem>
+                                            </FormControl>
-                            )}
+                                            <FormMessage />
-                        />
+                                        </FormItem>
+                                    )}
+                                />
 
-                        <FormField
+                                <FormField
-                            control={form.control}
+                                    control={form.control}
-                            name="role"
+                                    name="confirmPassword"
-                            render={({ field }) => (
+                                    render={({ field }) => (
-                                <FormItem>
+                                        <FormItem>
-                                    <FormLabel>Rol</FormLabel>
+                                            <FormLabel>Şifre Tekrar</FormLabel>
-                                    <Select onValueChange={field.onChange} defaultValue={field.value}>
+                                            <FormControl>
-                                        <FormControl>
+                                                <Input type="password" placeholder="******" {...field} />
-                                            <SelectTrigger>
+                                            </FormControl>
-                                                <SelectValue placeholder="Rol seçin" />
+                                            <FormMessage />
-                                            </SelectTrigger>
+                                        </FormItem>
-                                        </FormControl>
+                                    )}
-                                        <SelectContent>
+                                />
-                                            <SelectItem value="user">Kullanıcı</SelectItem>
+
-                                            <SelectItem value="admin">Yönetici</SelectItem>
+                                <FormField
-                                        </SelectContent>
+                                    control={form.control}
-                                    </Select>
+                                    name="role"
-                                    <FormMessage />
+                                    render={({ field }) => (
-                                </FormItem>
+                                        <FormItem>
-                            )}
+                                            <FormLabel>Rol</FormLabel>
-                        />
+                                            <Select onValueChange={field.onChange} defaultValue={field.value}>
+                                                <FormControl>
+                                                    <SelectTrigger>
+                                                        <SelectValue placeholder="Rol seçin" />
+                                                    </SelectTrigger>
+                                                </FormControl>
+                                                <SelectContent>
+                                                    <SelectItem value="user">Kullanıcı</SelectItem>
+                                                    <SelectItem value="admin">Yönetici</SelectItem>
+                                                </SelectContent>
+                                            </Select>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                            </>
+                        )}
+
+                        {mode === "profile" && (
+                            <div className="space-y-1">
+                                <FormLabel>Rol</FormLabel>
+                                <Input value={initialData?.role === 'admin' ? 'Yönetici' : 'Kullanıcı'} disabled className="bg-muted" />
+                            </div>
+                        )}
 
                         <Button type="submit" disabled={loading} className="w-full">
                             {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                            Kullanıcı Oluştur
+                            {mode === "profile" ? "Değişiklikleri Kaydet" : (initialData ? "Kaydet" : "Kullanıcı Oluştur")}
                         </Button>
                     </form>
                 </Form>

components/dashboard/user-nav.tsx

@@ -14,13 +14,30 @@ import {
     DropdownMenuItem,
     DropdownMenuLabel,
     DropdownMenuSeparator,
-    DropdownMenuShortcut,
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { supabase } from "@/lib/supabase"
 import { useRouter } from "next/navigation"
+import { useEffect, useState } from "react"
+import { User } from "@supabase/supabase-js"
 
-export function UserNav() {
+interface UserProfile {
+    full_name: string | null
+    email: string | null
+    role: string | null
+}
+
+interface UserNavProps {
+    user: {
+        email?: string | null
+    } | null
+    profile: {
+        full_name?: string | null
+        role?: string | null
+    } | null
+}
+
+export function UserNav({ user, profile }: UserNavProps) {
     const router = useRouter()
 
     const handleSignOut = async () => {
@@ -29,22 +46,31 @@ export function UserNav() {
         router.refresh()
     }
 
+    const getInitials = (name: string) => {
+        return name
+            .split(' ')
+            .map((n) => n[0])
+            .join('')
+            .toUpperCase()
+            .substring(0, 2)
+    }
+
     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="@parakasa" />
+                        <AvatarImage src="/avatars/01.png" alt={profile?.full_name || "@parakasa"} />
-                        <AvatarFallback>PK</AvatarFallback>
+                        <AvatarFallback>{profile?.full_name ? getInitials(profile.full_name) : 'PK'}</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-sm font-medium leading-none">{profile?.full_name || 'Kullanıcı'}</p>
                         <p className="text-xs leading-none text-muted-foreground">
-                            admin@parakasa.com
+                            {user?.email}
                         </p>
                     </div>
                 </DropdownMenuLabel>
@@ -52,23 +78,18 @@ export function UserNav() {
                 <DropdownMenuGroup>
                     <Link href="/dashboard/profile">
                         <DropdownMenuItem className="cursor-pointer">
-                            Profil
+                            Profil Bilgileri
                         </DropdownMenuItem>
                     </Link>
-                    <Link href="/dashboard/users">
+                    <Link href="/dashboard/profile/password">
                         <DropdownMenuItem className="cursor-pointer">
-                            Kullanıcılar
+                            Şifre Değiştir
-                        </DropdownMenuItem>
-                    </Link>
-                    <Link href="/dashboard/settings">
-                        <DropdownMenuItem className="cursor-pointer">
-                            Ayarlar
                         </DropdownMenuItem>
                     </Link>
                 </DropdownMenuGroup>
                 <DropdownMenuSeparator />
-                <DropdownMenuItem onClick={handleSignOut}>
+                <DropdownMenuItem onClick={handleSignOut} className="cursor-pointer text-red-600 focus:text-red-600">
-                    Çıkış Yap
+                    Çıkış
                 </DropdownMenuItem>
             </DropdownMenuContent>
         </DropdownMenu>

components/ui/phone-input.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+import PhoneInput from "react-phone-number-input"
+import { cn } from "@/lib/utils"
+
+export interface PhoneInputProps extends React.ComponentProps<typeof PhoneInput> {
+    className?: string
+}
+
+const PhoneInputComponent = React.forwardRef<any, PhoneInputProps>(({ className, ...props }, ref) => {
+    return (
+        <PhoneInput
+            ref={ref}
+            className={cn("flex", className)} // Wrapper class
+            numberInputProps={{
+                className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            }}
+            {...(props as any)}
+        />
+    )
+})
+PhoneInputComponent.displayName = "PhoneInput"
+
+export { PhoneInputComponent as PhoneInput }

lib/data.ts

@@ -0,0 +1,13 @@
+import { cache } from 'react'
+import { createClient } from '@/lib/supabase-server'
+
+export const getProfile = cache(async (userId: string) => {
+    const supabase = createClient()
+    const { data } = await supabase
+        .from('profiles')
+        .select('*')
+        .eq('id', userId)
+        .single()
+
+    return data
+})

package-lock.json

@@ -30,6 +30,7 @@
         "react": "^18",
         "react-dom": "^18",
         "react-hook-form": "^7.70.0",
+        "react-phone-number-input": "^3.4.14",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.4.0",
         "zod": "^4.3.5"
@@ -2922,6 +2923,12 @@
         "url": "https://polar.sh/cva"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -2987,6 +2994,12 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/country-flag-icons": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/country-flag-icons/-/country-flag-icons-1.6.4.tgz",
+      "integrity": "sha512-Z3Zi419FI889tlElMsVhCIS5eRkiLDWixr576J5DPiTe5RGxpbRi+enMpHdYVp5iK5WFjr8P/RgyIFAGhFsiFg==",
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -4504,6 +4517,27 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/input-format": {
+      "version": "0.3.14",
+      "resolved": "https://registry.npmjs.org/input-format/-/input-format-0.3.14.tgz",
+      "integrity": "sha512-gHMrgrbCgmT4uK5Um5eVDUohuV9lcs95ZUUN9Px2Y0VIfjTzT2wF8Q3Z4fwLFm7c5Z2OXCm53FHoovj6SlOKdg==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": ">=18.1.0",
+        "react-dom": ">=18.1.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/internal-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
@@ -5128,6 +5162,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/libphonenumber-js": {
+      "version": "1.12.33",
+      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.12.33.tgz",
+      "integrity": "sha512-r9kw4OA6oDO4dPXkOrXTkArQAafIKAU71hChInV4FxZ69dxCfbwQGDPzqR5/vea94wU705/3AZroEbSoeVWrQw==",
+      "license": "MIT"
+    },
     "node_modules/lilconfig": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
@@ -5436,7 +5476,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -5936,7 +5975,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -6020,9 +6058,25 @@
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-phone-number-input": {
+      "version": "3.4.14",
+      "resolved": "https://registry.npmjs.org/react-phone-number-input/-/react-phone-number-input-3.4.14.tgz",
+      "integrity": "sha512-T9MziNuvthzv6+JAhKD71ab/jVXW5U20nQZRBJd6+q+ujmkC+/ISOf2GYo8pIi4VGjdIYRIHDftMAYn3WKZT3w==",
+      "license": "MIT",
+      "dependencies": {
+        "classnames": "^2.5.1",
+        "country-flag-icons": "^1.5.17",
+        "input-format": "^0.3.14",
+        "libphonenumber-js": "^1.12.27",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-remove-scroll": {
       "version": "2.7.2",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",

package.json

@@ -31,6 +31,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.70.0",
+    "react-phone-number-input": "^3.4.14",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "zod": "^4.3.5"

supabase_migration_add_phone.sql

@@ -0,0 +1,3 @@
+
+-- Add phone column to profiles table
+ALTER TABLE profiles ADD COLUMN IF NOT EXISTS phone TEXT;