first commit

frontend/.env

@@ -0,0 +1,95 @@
+NEXT_AUTH_SECRET=bFcOqf37V1DgSxsibuZ79jSIaI4MZ9TCB1Y7iWZFJZrtZdUJapesSi0dXo2Bx8xY
+
+GITHUB_CLIENT_ID='Ov23liUt9B61O46Mdfm4'
+GITHUB_CLIENT_SECRET='c7fc8dcb1b2c8f22120608425d07d5efd995baaf'
+GITHUB_SCOPE=['user:email']
+
+GOOGLE_CLIENT_ID='915364976256-691m0s87as2r5vdbqr96f6humblseobt.apps.googleusercontent.com'
+GOOGLE_CLIENT_SECRET='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'
+GOOGLE_REDIRECT_URL=http://localhost:8080/v1/auth/google/callback
+
+AUTH_NO_SECRET=MlBdj44xjhZIlxQIiz4ZuszB1yvRMW0A
+BASE_API_URL=http://localhost:8080
+# BASE_API_URL=https://api.beyhano.com.tr
+NEXT_PUBLIC_API_URL=http://localhost:8080
+BASE_SITE_URL=http://localhost:3000
+AUTH_NO_ORIGIN=http://localhost:3000
+BASE_SITE_NAME='Beyhan Oğur'
+NODE_ENV='development'
+NEXT_PORT=3000
+APP_TITLE='Beyhan Oğur'
+NEXT_API_SECRET='6YdkEwOZC0j5K9a5vJtJQGIuwAoqGG4c'
+# NUXT_PUBLIC_API_BASE=https://api.beyhano.com.tr
+CLOUD_FLARE_SITE_KEY='0x4AAAAAACHzHKvlEwMamxCM'
+CLOUD_FLARE_SECRET='0x4AAAAAACHzHHisTSFzGw15HvwXF3yXRIg'
+# JWT için gizli anahtar. Güvenlik için bunu daha karmaşık bir değerle değiştirin.
+JWT_SECRET="go-gin-mTFY2jAOMWWxadVIWjRoPG9aOM3z9srCVoU35Gs1VZaRKgXet26cztUE8LLpwok9"
+#####################GO###################
+### Db Configuration
+DB_URL="gogin:gg7678290@tcp(10.80.80.70:3306)/gogin?charset=utf8mb4&parseTime=True&loc=Local&timeout=10s&readTimeout=30s&writeTimeout=30s&multiStatements=true"
+##########################
+# Redis Configuration
+REDIS_HOST=10.80.80.70
+REDIS_PORT=6379
+REDIS_USER=default
+REDIS_PASSWORD=gg7678290
+REDIS_URL=redis://default:gg7678290@10.80.80.70:6379/4
+#############################
+# Email Settings (Mailpit)
+EMAIL_HOST=10.80.80.70
+EMAIL_PORT=1025
+EMAIL_HOST_USER=""
+EMAIL_HOST_PASSWORD=""
+EMAIL_USE_TLS=false
+EMAIL_USE_SSL=false
+EMAIL_FROM=noreply@gauth.local
+#############################
+# App Genel Ayarları
+PORT=8080
+################################
+# AVATANE IMAGES
+AVATAR_H=150
+AVATAR_W=150
+AVATAR_Q=90
+AVATAR_B=cover
+AVATAR_F=webp
+#######################
+# Home IMAGES
+HOME_IMAGE_H=400
+HOME_IMAGE_W=400
+HOME_IMAGE_Q=90
+HOME_IMAGE_B=cover
+HOME_IMAGE_F=webp
+#######################
+# Aboutme IMAGES
+ABOUTME_IMAGE_H=400
+ABOUTME_IMAGE_W=400
+ABOUTME_IMAGE_Q=90
+ABOUTME_IMAGE_B=cover
+ABOUTME_IMAGE_F=webp
+#######################
+# MyService IMAGES
+SERVICE_IMAGE_H=256
+SERVICE_IMAGE_W=256
+SERVICE_IMAGE_Q=90
+SERVICE_IMAGE_B=cover
+SERVICE_IMAGE_F=webp
+#######################
+# BANNER IMAGES
+BANNER_IMAGE_H=700
+BANNER_IMAGE_W=1920
+BANNER_IMAGE_Q=85
+BANNER_IMAGE_B=cover
+BANNER_IMAGE_F=webp
+################################
+################################
+SET_DEBUG=true
+CORS_DEBUG=true
+APP_ENV=development
+VITE_API_BASE_URL=http://localhost:8080
+FRONTEND_URL=http://localhost:3000
+SESSION_SECRET=go-gin-mTFY2jAOMWWxadVIWjRoPG9aOM3z9srCVoU35Gs1VZaRKgXet26cztUE8LLpwok9
+CLIENT_SECRET='2222'
+CLIENT_ID='2222'
+ACCESS_TOKEN_EXPIRE_MINUTES=180
+REFRESH_TOKEN_EXPIRE_DAYS=60

frontend/.env.local

@@ -0,0 +1,11 @@
+# NextAuth
+NEXTAUTH_URL=http://localhost:3000
+NEXTAUTH_SECRET="bFcOqf37V1DgSxsibuZ79jSIaI4MZ9TCB1Y7iWZFJZrtZdUJapesSi0dXo2Bx8xY"
+
+# Backend API
+NEXT_PUBLIC_API_URL=http://localhost:8080
+BASE_API_URL=http://localhost:8080
+
+# Turnstile (Cloudflare)
+NEXT_PUBLIC_TURNSTILE_SITEKEY="0x4AAAAAACHzHKvlEwMamxCM"
+TURNSTILE_SECRET_KEY="0x4AAAAAACHzHHisTSFzGw15HvwXF3yXRIg"

frontend/ADMIN_PANEL_GUIDE.md

@@ -0,0 +1,112 @@
+# Admin Paneli Geliştirme Kılavuzu
+
+Bu kılavuz, `admin_user.md` dosyasındaki gereksinimlere dayanarak **Next.js 16 + TypeScript + Tailwind v4 + shadcn** teknolojileriyle geliştirilecek Admin Paneli için mimari yapıyı ve geliştirme süreçlerini içerir.
+
+## 1. Teknoloji Yığını ve Kurulum
+
+Proje `frontend` klasörü altında yapılandırılmıştır. Gerekli tüm paketler (`package.json`) önceden yüklenmiştir:
+- **Framework:** Next.js 16 (App Router)
+- **UI:** React 19, Tailwind CSS v4, shadcn/ui
+- **İkonlar:** lucide-react
+- **Validasyon:** Zod
+- **Auth:** NextAuth.js
+- **Bildirimler:** SweetAlert2
+- **Güvenlik:** nextjs-turnstile (Cloudflare)
+
+### Kurulum ve Çalıştırma
+```bash
+cd frontend
+npm install
+npm run dev
+```
+
+## 2. Proje Klasör Yapısı (Önerilen)
+
+Admin paneli için aşağıdaki klasör yapısını takip edeceğiz:
+
+```
+frontend/
+├── app/
+│   ├── admin/                  # Admin paneli rotaları
+│   │   ├── layout.tsx          # Admin layout (Sidebar, Header, Auth Check)
+│   │   ├── dashboard/          # Dashboard (KPI kartları)
+│   │   ├── users/              # Kullanıcı yönetimi
+│   │   ├── products/           # Ürün yönetimi
+│   │   └── settings/           # Ayarlar
+│   ├── api/auth/[...nextauth]/ # NextAuth API rotası
+│   └── globals.css             # Global stiller (Tailwind)
+├── components/
+│   ├── admin/                  # Admin'e özel bileşenler
+│   │   ├── sidebar.tsx
+│   │   ├── header.tsx
+│   │   ├── data-table.tsx      # Reusable tablo yapısı
+│   │   └── recent-sales.tsx
+│   └── ui/                     # shadcn bileşenleri (Button, Input, vb.)
+├── lib/
+│   ├── utils.ts                # cn() ve diğer yardımcılar
+│   ├── auth.ts                 # NextAuth konfigürasyonu
+│   └── db.ts                   # Veritabanı bağlantısı (veya API client)
+├── actions/                    # Server Actions (Zod validasyonlu)
+│   ├── auth-actions.ts
+│   └── user-actions.ts
+└── public/
+    └── admin/                  # Admin ile ilgili statik dosyalar
+```
+
+## 3. Ortam Değişkenleri (.env)
+
+Kök dizindeki `.env` dosyasına aşağıdaki değişkenlerin eklenmesi gerekmektedir:
+
+```env
+# NextAuth
+NEXTAUTH_URL=http://localhost:3000
+NEXTAUTH_SECRET=gizli-bir-anahtar-olusturun
+
+# Backend API (Go)
+NEXT_PUBLIC_API_URL=http://localhost:8080/api/v1
+
+# Cloudflare Turnstile (Login güvenliği için)
+NEXT_PUBLIC_TURNSTILE_SITEKEY=your-site-key
+TURNSTILE_SECRET_KEY=your-secret-key
+```
+
+## 4. Geliştirme Adımları
+
+Geliştirme süreci aşağıdaki sırayla ilerleyecektir:
+
+1.  **Temel Bileşenler:** shadcn kurulumunun doğrulanması ve temel bileşenlerin (Button, Input, Card, Form) eklenmesi.
+2.  **Auth Yapısı:** NextAuth yapılandırması ve `middleware.ts` ile `/admin` rotalarının korunması.
+3.  **Login Sayfası:** `/admin/login` sayfasının tasarımı ve Turnstile entegrasyonu.
+4.  **Admin Layout:** Sidebar ve Header içeren ana yerleşim düzeninin oluşturulması.
+5.  **Dashboard:** KPI kartları ve özet tabloların eklenmesi.
+6.  **CRUD Sayfaları:** Kullanıcılar (`/users`), Ürünler (`/products`) sayfalarının geliştirilmesi.
+
+## 5. Güvenlik ve Validasyon Kuralları
+
+- **Zod:** Tüm form verileri hem istemci (client) hem sunucu (server) tarafında Zod şemaları ile doğrulanmalıdır.
+- **Server Actions:** Veri mutasyonları (Create, Update, Delete) Server Actions üzerinden yapılmalı ve oturum kontrolü içermelidir.
+- **Role-Based Access:** Sadece `admin` veya `superadmin` rolüne sahip kullanıcılar `/admin` paneline erişebilmelidir.
+
+## 6. Örnek Kullanım (Server Action ile Form)
+
+```typescript
+// actions/login.ts
+"use server"
+import { z } from "zod";
+
+const loginSchema = z.object({
+  email: z.string().email(),
+  password: z.string().min(6),
+});
+
+export async function loginAction(formData: FormData) {
+  const data = Object.fromEntries(formData);
+  const parsed = loginSchema.safeParse(data);
+  
+  if (!parsed.success) {
+    return { error: "Geçersiz veri" };
+  }
+  
+  // Auth işlemleri...
+}
+```

frontend/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

frontend/app/admin/categories/category-dialog.tsx

@@ -0,0 +1,235 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import * as z from "zod"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
+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 { Category } from "@/types/category"
+import { categoryService } from "@/services/categoryService"
+import { toast } from "sonner"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select"
+
+const formSchema = z.object({
+    title: z.string().min(2, {
+        message: "Başlık en az 2 karakter olmalıdır.",
+    }),
+    slug: z.string().min(2, {
+        message: "Slug en az 2 karakter olmalıdır.",
+    }),
+    description: z.string().optional(),
+    parent_id: z.string().optional(), // Select value is string, will convert to number
+})
+
+interface CategoryDialogProps {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    category?: Category | null
+    onSuccess?: () => void
+}
+
+function slugify(text: string) {
+    const trMap: { [key: string]: string } = {
+        'ç': 'c', 'Ç': 'c',
+        'ğ': 'g', 'Ğ': 'g',
+        'ş': 's', 'Ş': 's',
+        'ü': 'u', 'Ü': 'u',
+        'ı': 'i', 'İ': 'i',
+        'ö': 'o', 'Ö': 'o'
+    };
+    return text
+        .replace(/[çÇğĞşŞüÜıİöÖ]/g, (char) => trMap[char] || char)
+        .toLowerCase()
+        .replace(/[^a-z0-9\s-]/g, '') // Remove non-alphanumeric chars (except space and hyphen)
+        .trim()
+        .replace(/\s+/g, '-') // Replace spaces with hyphens
+        .replace(/-+/g, '-'); // Remove duplicate hyphens
+}
+
+export function CategoryDialog({ open, onOpenChange, category, onSuccess }: CategoryDialogProps) {
+    const [loading, setLoading] = useState(false)
+    const [categories, setCategories] = useState<Category[]>([])
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            title: "",
+            slug: "",
+            description: "",
+            parent_id: "0",
+        },
+    })
+
+    // Watch title to auto-generate slug
+    const titleValue = form.watch("title")
+    useEffect(() => {
+        if (!category && titleValue) { // Only auto-generate if creating new category
+            const slug = slugify(titleValue)
+            form.setValue("slug", slug)
+        }
+    }, [titleValue, category, form])
+
+    // Fetch categories for check parent selection
+    useEffect(() => {
+        if (open) {
+            categoryService.getCategories(1, 100, "", "active") // Get active categories
+                .then(res => {
+                    // Ensure we don't list the current category (recursion check)
+                    const validCategories = category
+                        ? (res.items || []).filter(c => c.id !== category.id)
+                        : (res.items || []);
+                    setCategories(validCategories)
+                })
+                .catch(err => console.error(err))
+        }
+    }, [open, category])
+
+    useEffect(() => {
+        if (category) {
+            form.reset({
+                title: category.title,
+                slug: category.slug,
+                description: category.description || "",
+                parent_id: category.parent_id ? category.parent_id.toString() : "0",
+            })
+        } else {
+            form.reset({
+                title: "",
+                slug: "",
+                description: "",
+                parent_id: "0",
+            })
+        }
+    }, [category, form, open])
+
+    const onSubmit = async (values: z.infer<typeof formSchema>) => {
+        setLoading(true)
+        try {
+            const payload: Partial<Category> = {
+                title: values.title,
+                slug: values.slug,
+                description: values.description,
+                parent_id: values.parent_id && values.parent_id !== "0" ? parseInt(values.parent_id) : null,
+            }
+
+            if (category) {
+                await categoryService.updateCategory(category.id, payload)
+                toast.success("Kategori güncellendi")
+            } else {
+                await categoryService.createCategory(payload)
+                toast.success("Kategori oluşturuldu")
+            }
+            onOpenChange(false)
+            if (onSuccess) {
+                onSuccess()
+            }
+        } catch (error: unknown) {
+            toast.error((error as Error).message || "Bir hata oluştu")
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[500px]">
+                <DialogHeader>
+                    <DialogTitle>{category ? "Kategori Düzenle" : "Yeni Kategori Ekle"}</DialogTitle>
+                </DialogHeader>
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+                        <FormField
+                            control={form.control}
+                            name="title"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Başlık</FormLabel>
+                                    <FormControl>
+                                        <Input placeholder="Kategori Başlığı" {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="slug"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Slug (URL)</FormLabel>
+                                    <FormControl>
+                                        <Input placeholder="kategori-slug" {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="parent_id"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Üst Kategori</FormLabel>
+                                    <Select
+                                        onValueChange={field.onChange}
+                                        value={field.value} // Remove defaultValue to avoid conflicts
+                                    >
+                                        <FormControl>
+                                            <SelectTrigger>
+                                                <SelectValue placeholder="Üst Kategori Seçin" />
+                                            </SelectTrigger>
+                                        </FormControl>
+                                        <SelectContent>
+                                            <SelectItem value="0">Yok (Ana Kategori)</SelectItem>
+                                            {categories.map((c) => (
+                                                <SelectItem key={c.id} value={c.id.toString()}>
+                                                    {c.title}
+                                                </SelectItem>
+                                            ))}
+                                        </SelectContent>
+                                    </Select>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="description"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Açıklama</FormLabel>
+                                    <FormControl>
+                                        <Textarea placeholder="Kategori açıklaması..." {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <DialogFooter>
+                            <Button type="submit" disabled={loading}>
+                                {loading ? "Kaydediliyor..." : "Kaydet"}
+                            </Button>
+                        </DialogFooter>
+                    </form>
+                </Form>
+            </DialogContent>
+        </Dialog>
+    )
+}

frontend/app/admin/categories/category-row-actions.tsx

@@ -0,0 +1,141 @@
+"use client"
+
+import { useState } from "react"
+import { Row } from "@tanstack/react-table"
+import { MoreHorizontal, Pencil, Trash, RefreshCcw } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Category } from "@/types/category"
+import { categoryService } from "@/services/categoryService"
+import { CategoryDialog } from "./category-dialog"
+import Swal from 'sweetalert2'
+import withReactContent from 'sweetalert2-react-content'
+
+const MySwal = withReactContent(Swal)
+
+interface DataTableRowActionsProps<TData> {
+    row: Row<TData>
+    onRefresh: () => void
+}
+
+export function DataTableRowActions<TData>({
+    row,
+    onRefresh,
+}: DataTableRowActionsProps<TData>) {
+    const category = row.original as Category
+    const [showEditDialog, setShowEditDialog] = useState(false)
+    const isDeleted = !!category.deleted_at
+
+    const handleDelete = async () => {
+        const result = await MySwal.fire({
+            title: 'Emin misiniz?',
+            text: "Bu kategori silinecek!",
+            icon: 'warning',
+            showCancelButton: true,
+            confirmButtonColor: '#3085d6',
+            cancelButtonColor: '#d33',
+            confirmButtonText: 'Evet, sil!',
+            cancelButtonText: 'İptal'
+        })
+
+        if (result.isConfirmed) {
+            try {
+                await categoryService.deleteCategory(category.id)
+                MySwal.fire(
+                    'Silindi!',
+                    'Kategori başarıyla silindi.',
+                    'success'
+                )
+                onRefresh()
+            } catch {
+                MySwal.fire(
+                    'Hata!',
+                    'Bir hata oluştu.',
+                    'error'
+                )
+            }
+        }
+    }
+
+    const handleRestore = async () => {
+        const result = await MySwal.fire({
+            title: 'Geri Yükle?',
+            text: "Bu kategori geri yüklenecek!",
+            icon: 'question',
+            showCancelButton: true,
+            confirmButtonColor: '#3085d6',
+            cancelButtonColor: '#d33',
+            confirmButtonText: 'Evet, geri yükle!',
+            cancelButtonText: 'İptal'
+        })
+
+        if (result.isConfirmed) {
+            try {
+                await categoryService.restoreCategory(category.id)
+                MySwal.fire(
+                    'Geri Yüklendi!',
+                    'Kategori başarıyla geri yüklendi.',
+                    'success'
+                )
+                onRefresh()
+            } catch {
+                MySwal.fire(
+                    'Hata!',
+                    'Bir hata oluştu.',
+                    'error'
+                )
+            }
+        }
+    }
+
+    return (
+        <>
+            <CategoryDialog
+                open={showEditDialog}
+                onOpenChange={setShowEditDialog}
+                category={category}
+                onSuccess={onRefresh}
+            />
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" className="h-8 w-8 p-0">
+                        <span className="sr-only">Menü aç</span>
+                        <MoreHorizontal className="h-4 w-4" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                    <DropdownMenuLabel>İşlemler</DropdownMenuLabel>
+                    <DropdownMenuItem
+                        onClick={() => navigator.clipboard.writeText(category.id.toString())}
+                    >
+                        ID Kopyala
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+
+                    {!isDeleted && (
+                        <DropdownMenuItem onClick={() => setShowEditDialog(true)}>
+                            <Pencil className="mr-2 h-4 w-4" /> Düzenle
+                        </DropdownMenuItem>
+                    )}
+
+                    {isDeleted ? (
+                        <DropdownMenuItem onClick={handleRestore}>
+                            <RefreshCcw className="mr-2 h-4 w-4 text-green-600" /> Geri Yükle
+                        </DropdownMenuItem>
+                    ) : (
+                        <DropdownMenuItem onClick={handleDelete} className="text-red-600">
+                            <Trash className="mr-2 h-4 w-4" /> Sil
+                        </DropdownMenuItem>
+                    )}
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </>
+    )
+}

frontend/app/admin/categories/columns.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import { ColumnDef } from "@tanstack/react-table"
+import { Category } from "@/types/category"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { ArrowUpDown } from "lucide-react"
+import { DataTableRowActions } from "./category-row-actions"
+
+export const getColumns = (onRefresh: () => void, categories: Category[]): ColumnDef<Category>[] => [
+    {
+        accessorKey: "id",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    ID
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+    },
+    {
+        accessorKey: "title",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Başlık
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+    },
+    {
+        accessorKey: "slug",
+        header: "Slug",
+    },
+    {
+        accessorKey: "parent_id",
+        header: "Üst Kategori",
+        cell: ({ row }) => {
+            const pid = row.original.parent_id
+            if (!pid || pid === 0) return "-"
+
+            const parent = categories.find(c => c.id === pid)
+            return parent ? parent.title : pid
+        }
+    },
+    {
+        accessorKey: "deleted_at",
+        header: "Durum",
+        cell: ({ row }) => {
+            const deletedAt = row.original.deleted_at
+            return deletedAt ? (
+                <Badge variant="destructive">Silindi</Badge>
+            ) : (
+                <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">Aktif</Badge>
+            )
+        }
+    },
+    {
+        id: "actions",
+        cell: ({ row }) => <DataTableRowActions row={row} onRefresh={onRefresh} />,
+    },
+]

frontend/app/admin/categories/data-table.tsx

@@ -0,0 +1,91 @@
+"use client"
+
+import * as React from "react"
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+    SortingState,
+    getSortedRowModel,
+} from "@tanstack/react-table"
+
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[]
+    data: TData[]
+}
+
+export function DataTable<TData, TValue>({
+    columns,
+    data,
+}: DataTableProps<TData, TValue>) {
+    const [sorting, setSorting] = React.useState<SortingState>([])
+
+    // eslint-disable-next-line
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        onSortingChange: setSorting,
+        getSortedRowModel: getSortedRowModel(),
+        state: {
+            sorting,
+        },
+    })
+
+    return (
+        <div className="rounded-md border">
+            <Table>
+                <TableHeader>
+                    {table.getHeaderGroups().map((headerGroup) => (
+                        <TableRow key={headerGroup.id}>
+                            {headerGroup.headers.map((header) => {
+                                return (
+                                    <TableHead key={header.id}>
+                                        {header.isPlaceholder
+                                            ? null
+                                            : flexRender(
+                                                header.column.columnDef.header,
+                                                header.getContext()
+                                            )}
+                                    </TableHead>
+                                )
+                            })}
+                        </TableRow>
+                    ))}
+                </TableHeader>
+                <TableBody>
+                    {table.getRowModel().rows?.length ? (
+                        table.getRowModel().rows.map((row) => (
+                            <TableRow
+                                key={row.id}
+                                data-state={row.getIsSelected() && "selected"}
+                            >
+                                {row.getVisibleCells().map((cell) => (
+                                    <TableCell key={cell.id}>
+                                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                    </TableCell>
+                                ))}
+                            </TableRow>
+                        ))
+                    ) : (
+                        <TableRow>
+                            <TableCell colSpan={columns.length} className="h-24 text-center">
+                                Sonuç bulunamadı.
+                            </TableCell>
+                        </TableRow>
+                    )}
+                </TableBody>
+            </Table>
+        </div>
+    )
+}

frontend/app/admin/categories/page.tsx

@@ -0,0 +1,115 @@
+"use client"
+
+import { useEffect, useState, useCallback } from "react"
+import { DataTable } from "./data-table"
+import { getColumns } from "./columns"
+import { Category } from "@/types/category"
+import { categoryService } from "@/services/categoryService"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Plus } from "lucide-react"
+import { CategoryDialog } from "./category-dialog"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select"
+
+export default function CategoriesPage() {
+    const [data, setData] = useState<Category[]>([])
+    const [loading, setLoading] = useState(true)
+    const [page, setPage] = useState(1)
+    const [total, setTotal] = useState(0)
+    const [perPage] = useState(20)
+    const [search, setSearch] = useState("")
+    const [statusFilter, setStatusFilter] = useState("with") // "with", "active", "only"
+    const [showCreateDialog, setShowCreateDialog] = useState(false)
+
+    const fetchData = useCallback(async () => {
+        setLoading(true)
+        try {
+            const apiSoftFilter = statusFilter === "active" ? "" : statusFilter
+            const res = await categoryService.getCategories(page, perPage, search, apiSoftFilter)
+            setData(res.items || [])
+            setTotal(res.total || 0)
+        } catch (error) {
+            console.error("Categories fetch error:", error)
+            setData([])
+        } finally {
+            setLoading(false)
+        }
+    }, [page, perPage, search, statusFilter])
+
+    useEffect(() => {
+        fetchData()
+    }, [fetchData])
+
+    const totalPages = Math.ceil(total / perPage)
+
+    return (
+        <div className="p-8">
+            <div className="flex items-center justify-between mb-6">
+                <div>
+                    <h1 className="text-3xl font-bold tracking-tight">Kategori Yönetimi</h1>
+                    <p className="text-muted-foreground">
+                        Kategorileri oluşturun, düzenleyin veya silin.
+                    </p>
+                </div>
+                <Button onClick={() => setShowCreateDialog(true)}>
+                    <Plus className="mr-2 h-4 w-4" /> Yeni Kategori
+                </Button>
+            </div>
+
+            <div className="flex items-center py-4 gap-4">
+                <Input
+                    placeholder="Kategori ara..."
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                    className="max-w-sm"
+                />
+                <Select value={statusFilter} onValueChange={setStatusFilter}>
+                    <SelectTrigger className="w-[180px]">
+                        <SelectValue placeholder="Durum" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="with">Tümü (Kategoriler)</SelectItem>
+                        <SelectItem value="active">Sadece Aktif</SelectItem>
+                        <SelectItem value="only">Sadece Silinenler</SelectItem>
+                    </SelectContent>
+                </Select>
+            </div>
+
+            <DataTable columns={getColumns(fetchData, data)} data={data} />
+
+            <div className="flex items-center justify-end space-x-2 py-4">
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setPage((old) => Math.max(old - 1, 1))}
+                    disabled={page === 1 || loading}
+                >
+                    Önceki
+                </Button>
+                <div className="text-sm text-muted-foreground">
+                    Sayfa {page} / {totalPages || 1}
+                </div>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setPage((old) => (data.length === perPage ? old + 1 : old))}
+                    disabled={page >= totalPages || loading}
+                >
+                    Sonraki
+                </Button>
+            </div>
+
+            <CategoryDialog
+                open={showCreateDialog}
+                onOpenChange={setShowCreateDialog}
+                onSuccess={fetchData}
+            />
+        </div>
+    )
+}

frontend/app/admin/heroes/_components/columns.tsx

@@ -0,0 +1,59 @@
+"use client"
+
+import { ColumnDef } from "@tanstack/react-table"
+import { Hero } from "@/types/hero"
+import { Badge } from "@/components/ui/badge"
+import { HeroRowActions } from "./hero-row-actions"
+
+export const getColumns = (onSuccess: () => void): ColumnDef<Hero>[] => [
+    {
+        accessorKey: "image",
+        header: "Görsel",
+        cell: ({ row }) => {
+            const imagePath = row.getValue("image") as string
+            if (!imagePath) return <div className="w-16 h-9 bg-gray-100 rounded" />
+
+            return (
+                <div className="w-24 h-14 relative rounded overflow-hidden border">
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img
+                        src={`${process.env.NEXT_PUBLIC_API_URL}${imagePath}`}
+                        alt={row.original.title}
+                        className="object-cover w-full h-full"
+                    />
+                </div>
+            )
+        },
+    },
+    {
+        accessorKey: "title",
+        header: "Başlık",
+    },
+    {
+        accessorKey: "is_active",
+        header: "Durum",
+        cell: ({ row }) => {
+            const isActive = row.getValue("is_active") as boolean
+            return (
+                <Badge variant={isActive ? "default" : "secondary"}>
+                    {isActive ? "Aktif" : "Pasif"}
+                </Badge>
+            )
+        },
+    },
+    {
+        accessorKey: "DeletedAt",
+        header: "Silinme Durumu",
+        cell: ({ row }) => {
+            const deletedAt = row.getValue("DeletedAt")
+            if (deletedAt) {
+                return <Badge variant="destructive">Silinmiş</Badge>
+            }
+            return null
+        }
+    },
+    {
+        id: "actions",
+        cell: ({ row }) => <HeroRowActions row={row} onSuccess={onSuccess} />,
+    },
+]

frontend/app/admin/heroes/_components/data-table.tsx

@@ -0,0 +1,82 @@
+"use client"
+
+import * as React from "react"
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+} from "@tanstack/react-table"
+
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[]
+    data: TData[]
+}
+
+export function DataTable<TData, TValue>({
+    columns,
+    data,
+}: DataTableProps<TData, TValue>) {
+    // eslint-disable-next-line react-hooks/incompatible-library
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+    })
+
+    return (
+        <div className="rounded-md border">
+            <Table>
+                <TableHeader>
+                    {table.getHeaderGroups().map((headerGroup) => (
+                        <TableRow key={headerGroup.id}>
+                            {headerGroup.headers.map((header) => {
+                                return (
+                                    <TableHead key={header.id}>
+                                        {header.isPlaceholder
+                                            ? null
+                                            : flexRender(
+                                                header.column.columnDef.header,
+                                                header.getContext()
+                                            )}
+                                    </TableHead>
+                                )
+                            })}
+                        </TableRow>
+                    ))}
+                </TableHeader>
+                <TableBody>
+                    {table.getRowModel().rows?.length ? (
+                        table.getRowModel().rows.map((row) => (
+                            <TableRow
+                                key={row.id}
+                                data-state={row.getIsSelected() && "selected"}
+                            >
+                                {row.getVisibleCells().map((cell) => (
+                                    <TableCell key={cell.id}>
+                                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                    </TableCell>
+                                ))}
+                            </TableRow>
+                        ))
+                    ) : (
+                        <TableRow>
+                            <TableCell colSpan={columns.length} className="h-24 text-center">
+                                Sonuç bulunamadı.
+                            </TableCell>
+                        </TableRow>
+                    )}
+                </TableBody>
+            </Table>
+        </div>
+    )
+}

frontend/app/admin/heroes/_components/hero-dialog.tsx

@@ -0,0 +1,384 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import * as z from "zod"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select"
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+    FormDescription,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Switch } from "@/components/ui/switch"
+import { Hero } from "@/types/hero"
+import { heroService } from "@/services/heroService"
+import { toast } from "sonner"
+
+// Zod Schema
+const formSchema = z.object({
+    title: z.string().min(2, "Başlık en az 2 karakter olmalıdır"),
+    text1: z.string().optional(),
+    text2: z.string().optional(),
+    text4: z.string().optional(),
+    text5: z.string().optional(),
+    color: z.string().optional(),
+    is_active: z.boolean(),
+    width: z.coerce.number().min(1, "Genişlik 0'dan büyük olmalıdır"),
+    height: z.coerce.number().min(1, "Yükseklik 0'dan büyük olmalıdır"),
+    quality: z.coerce.number().min(1).max(100).default(85),
+    format: z.string().optional().default("avif"),
+    image: z.any().optional(),
+})
+
+interface HeroDialogProps {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    hero?: Hero | null
+    onSuccess?: () => void
+}
+
+export function HeroDialog({ open, onOpenChange, hero, onSuccess }: HeroDialogProps) {
+    const [loading, setLoading] = useState(false)
+    const [preview, setPreview] = useState<string | null>(null)
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        resolver: zodResolver(formSchema) as any,
+        defaultValues: {
+            title: "",
+            text1: "",
+            text2: "",
+            text4: "",
+            text5: "",
+            color: "#000000",
+            is_active: true,
+            width: 0,
+            height: 0,
+            quality: 85,
+            format: "webp",
+        },
+    })
+
+    useEffect(() => {
+        if (hero) {
+            form.reset({
+                title: hero.title,
+                text1: hero.text1 || "",
+                text2: hero.text2 || "",
+                text4: hero.text4 || "",
+                text5: hero.text5 || "",
+                color: hero.color || "#000000",
+                is_active: !!hero.is_active,
+                width: hero.width || 0,
+                height: hero.height || 0,
+                quality: hero.quality || 85,
+                format: hero.format || "avif",
+            })
+            // Existing image preview
+            // Backend returns relative path usually, ensure full URL if needed or use as is
+            // Assuming backend/frontend serve static files correctly
+            setPreview(hero.image ? `${process.env.NEXT_PUBLIC_API_URL}${hero.image}` : null)
+        } else {
+            form.reset({
+                title: "",
+                text1: "",
+                text2: "",
+                text4: "",
+                text5: "",
+                color: "#000000",
+                is_active: true,
+                width: 0,
+                height: 0,
+                quality: 85,
+                format: "avif",
+            })
+            setPreview(null)
+        }
+    }, [hero, form, open])
+
+    const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0]
+        if (file) {
+            form.setValue("image", file)
+            const reader = new FileReader()
+            reader.onloadend = () => {
+                setPreview(reader.result as string)
+            }
+            reader.readAsDataURL(file)
+        }
+    }
+
+    const onSubmit = async (values: z.infer<typeof formSchema>) => {
+        setLoading(true)
+        const formData = new FormData()
+        formData.append("title", values.title)
+        if (values.text1) formData.append("text1", values.text1)
+        if (values.text2) formData.append("text2", values.text2)
+        if (values.text4) formData.append("text4", values.text4)
+        if (values.text5) formData.append("text5", values.text5)
+        if (values.color) formData.append("color", values.color)
+        formData.append("is_active", String(values.is_active))
+
+        // New fields
+        formData.append("width", String(values.width))
+        formData.append("height", String(values.height))
+        formData.append("quality", String(values.quality))
+        if (values.format) formData.append("format", values.format)
+
+        if (values.image instanceof File) {
+            formData.append("image", values.image)
+        }
+
+        try {
+            if (hero) {
+                await heroService.updateHero(hero.ID, formData)
+                toast.success("Hero başarıyla güncellendi")
+            } else {
+                await heroService.createHero(formData)
+                toast.success("Hero başarıyla oluşturuldu")
+            }
+            onOpenChange(false)
+            if (onSuccess) onSuccess()
+        } catch (error: unknown) {
+            console.error("Hero save error:", error)
+            toast.error((error as Error).message || "Bir hata oluştu")
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
+                <DialogHeader>
+                    <DialogTitle>{hero ? "Hero Düzenle" : "Yeni Hero Ekle"}</DialogTitle>
+                </DialogHeader>
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+                        <FormField
+                            control={form.control}
+                            name="title"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Başlık</FormLabel>
+                                    <FormControl>
+                                        <Input placeholder="Başlık" {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                control={form.control}
+                                name="text1"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Text 1</FormLabel>
+                                        <FormControl>
+                                            <Input placeholder="Text 1" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="text2"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Text 2</FormLabel>
+                                        <FormControl>
+                                            <Input placeholder="Text 2" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                control={form.control}
+                                name="text4"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Text 4</FormLabel>
+                                        <FormControl>
+                                            <Input placeholder="Text 4" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="text5"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Text 5</FormLabel>
+                                        <FormControl>
+                                            <Input placeholder="Text 5" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                control={form.control}
+                                name="width"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Genişlik (px)</FormLabel>
+                                        <FormControl>
+                                            <Input type="number" placeholder="0" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="height"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Yükseklik (px)</FormLabel>
+                                        <FormControl>
+                                            <Input type="number" placeholder="0" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                control={form.control}
+                                name="quality"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Kalite (1-100)</FormLabel>
+                                        <FormControl>
+                                            <Input type="number" min="1" max="100" placeholder="80" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="format"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Format</FormLabel>
+                                        <Select onValueChange={field.onChange} defaultValue={field.value}>
+                                            <FormControl>
+                                                <SelectTrigger>
+                                                    <SelectValue placeholder="Format Seçin" />
+                                                </SelectTrigger>
+                                            </FormControl>
+                                            <SelectContent>
+                                                <SelectItem value="avif">AVIF (Önerilen)</SelectItem>
+                                                <SelectItem value="webp">WebP</SelectItem>
+                                                <SelectItem value="jpeg">JPEG</SelectItem>
+                                                <SelectItem value="png">PNG</SelectItem>
+                                            </SelectContent>
+                                        </Select>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+
+                        <FormField
+                            control={form.control}
+                            name="color"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Renk (Hex)</FormLabel>
+                                    <div className="flex gap-2">
+                                        <FormControl>
+                                            <Input type="color" className="w-12 h-10 p-1" {...field} />
+                                        </FormControl>
+                                        <FormControl>
+                                            <Input placeholder="#000000" {...field} />
+                                        </FormControl>
+                                    </div>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        <FormField
+                            control={form.control}
+                            name="is_active"
+                            render={({ field }) => (
+                                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+                                    <div className="space-y-0.5">
+                                        <FormLabel>Aktif</FormLabel>
+                                        <FormDescription>
+                                            Bu hero banner sitede görüntülensin mi?
+                                        </FormDescription>
+                                    </div>
+                                    <FormControl>
+                                        <Switch
+                                            checked={field.value}
+                                            onCheckedChange={field.onChange}
+                                        />
+                                    </FormControl>
+                                </FormItem>
+                            )}
+                        />
+
+                        <FormItem>
+                            <FormLabel>Görsel</FormLabel>
+                            <FormControl>
+                                <Input
+                                    type="file"
+                                    accept="image/*"
+                                    onChange={handleImageChange}
+                                />
+                            </FormControl>
+                            {preview && (
+                                <div className="mt-2 relative w-full h-40 border rounded-md overflow-hidden">
+                                    {/* Note: Using standard img for now to avoid Next.js Image Config issues with localhost */}
+                                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                                    <img
+                                        src={preview}
+                                        alt="Preview"
+                                        className="object-cover w-full h-full"
+                                    />
+                                </div>
+                            )}
+                        </FormItem>
+
+                        <DialogFooter>
+                            <Button type="submit" disabled={loading}>
+                                {loading ? "Kaydediliyor..." : "Kaydet"}
+                            </Button>
+                        </DialogFooter>
+                    </form>
+                </Form>
+            </DialogContent>
+        </Dialog>
+    )
+}

frontend/app/admin/heroes/_components/hero-row-actions.tsx

@@ -0,0 +1,122 @@
+"use client"
+
+import { useState } from "react"
+import { Row } from "@tanstack/react-table"
+import { MoreHorizontal, Pencil, Trash, Undo } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Hero } from "@/types/hero"
+import { heroService } from "@/services/heroService"
+import { toast } from "sonner"
+import { HeroDialog } from "./hero-dialog"
+import Swal from "sweetalert2"
+
+interface DataTableRowActionsProps<TData> {
+    row: Row<TData>
+    onSuccess: () => void
+}
+
+export function HeroRowActions<TData extends Hero>({
+    row,
+    onSuccess,
+}: DataTableRowActionsProps<TData>) {
+    const hero = row.original
+    const [showEditDialog, setShowEditDialog] = useState(false)
+
+    const handleDelete = async () => {
+        const result = await Swal.fire({
+            title: "Emin misiniz?",
+            text: "Bu hero silinecek! (Geri alabilirsiniz)",
+            icon: "warning",
+            showCancelButton: true,
+            confirmButtonText: "Evet, sil",
+            cancelButtonText: "İptal",
+        })
+
+        if (result.isConfirmed) {
+            try {
+                await heroService.deleteHero(hero.ID)
+                toast.success("Hero başarıyla silindi")
+                onSuccess()
+            } catch {
+                toast.error("Silme işlemi başarısız")
+            }
+        }
+    }
+
+    const handleRestore = async () => {
+        const result = await Swal.fire({
+            title: "Geri yüklemek istiyor musunuz?",
+            text: "Bu hero tekrar aktif listeye alınacak.",
+            icon: "question",
+            showCancelButton: true,
+            confirmButtonText: "Evet, geri yükle",
+            cancelButtonText: "İptal",
+        })
+
+        if (result.isConfirmed) {
+            try {
+                await heroService.restoreHero(hero.ID)
+                toast.success("Hero başarıyla geri yüklendi")
+                onSuccess()
+            } catch {
+                toast.error("Geri yükleme işlemi başarısız")
+            }
+        }
+    }
+
+    const isDeleted = !!hero.DeletedAt
+
+    return (
+        <>
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" className="h-8 w-8 p-0">
+                        <span className="sr-only">Menüyü aç</span>
+                        <MoreHorizontal className="h-4 w-4" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                    <DropdownMenuLabel>İşlemler</DropdownMenuLabel>
+                    <DropdownMenuItem
+                        onClick={() => navigator.clipboard.writeText(hero.ID.toString())}
+                    >
+                        Hero ID Kopyala
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+
+                    {!isDeleted && (
+                        <>
+                            <DropdownMenuItem onClick={() => setShowEditDialog(true)}>
+                                <Pencil className="mr-2 h-3.5 w-3.5" /> Düzenle
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={handleDelete} className="text-red-600">
+                                <Trash className="mr-2 h-3.5 w-3.5" /> Sil
+                            </DropdownMenuItem>
+                        </>
+                    )}
+
+                    {isDeleted && (
+                        <DropdownMenuItem onClick={handleRestore} className="text-green-600">
+                            <Undo className="mr-2 h-3.5 w-3.5" /> Geri Yükle
+                        </DropdownMenuItem>
+                    )}
+                </DropdownMenuContent>
+            </DropdownMenu>
+
+            <HeroDialog
+                open={showEditDialog}
+                onOpenChange={setShowEditDialog}
+                hero={hero}
+                onSuccess={onSuccess}
+            />
+        </>
+    )
+}

frontend/app/admin/heroes/page.tsx

@@ -0,0 +1,122 @@
+"use client"
+
+import { useEffect, useState, useCallback } from "react"
+import { DataTable } from "./_components/data-table"
+import { getColumns } from "./_components/columns"
+import { Hero } from "@/types/hero"
+import { heroService } from "@/services/heroService"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Plus } from "lucide-react"
+import { HeroDialog } from "./_components/hero-dialog"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select"
+
+export default function HeroesPage() {
+    const [data, setData] = useState<Hero[]>([])
+    const [loading, setLoading] = useState(true)
+    const [page, setPage] = useState(1)
+    const [total, setTotal] = useState(0)
+    const [perPage] = useState(20)
+    const [search, setSearch] = useState("")
+    const [statusFilter, setStatusFilter] = useState("with") // "with" shows active + deleted
+    const [showCreateDialog, setShowCreateDialog] = useState(false)
+
+    const fetchData = useCallback(async () => {
+        setLoading(true)
+        try {
+            // API expects "active" logic differently perhaps?
+            // checking task.md/heroService docs:
+            // heroService.getHeroes(page, perPage, search, soft)
+            // soft: 'only' | 'with' | empty (defaults to active in some apis, but checking service impl)
+
+            // From service: soft param defaults to "with".
+            const apiSoftFilter = statusFilter === "active" ? "" : statusFilter
+
+            const res = await heroService.getHeroes(page, perPage, search, apiSoftFilter)
+            setData(res.items || [])
+            setTotal(res.total || 0)
+        } catch (error) {
+            console.error("Heroes fetch error:", error)
+            setData([])
+        } finally {
+            setLoading(false)
+        }
+    }, [page, perPage, search, statusFilter])
+
+    useEffect(() => {
+        fetchData()
+    }, [fetchData])
+
+    const totalPages = Math.ceil(total / perPage)
+
+    return (
+        <div className="p-8">
+            <div className="flex items-center justify-between mb-6">
+                <div>
+                    <h1 className="text-3xl font-bold tracking-tight">Hero Banner Yönetimi</h1>
+                    <p className="text-muted-foreground">
+                        Ana sayfa banner alanlarını yönetin.
+                    </p>
+                </div>
+                <Button onClick={() => setShowCreateDialog(true)}>
+                    <Plus className="mr-2 h-4 w-4" /> Yeni Hero
+                </Button>
+            </div>
+
+            <div className="flex items-center py-4 gap-4">
+                <Input
+                    placeholder="Başlık ara..."
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                    className="max-w-sm"
+                />
+                <Select value={statusFilter} onValueChange={setStatusFilter}>
+                    <SelectTrigger className="w-[180px]">
+                        <SelectValue placeholder="Durum" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="with">Tümü (Dahil)</SelectItem>
+                        <SelectItem value="active">Sadece Aktif</SelectItem>
+                        <SelectItem value="only">Sadece Silinenler</SelectItem>
+                    </SelectContent>
+                </Select>
+            </div>
+
+            <DataTable columns={getColumns(fetchData)} data={data} />
+
+            <div className="flex items-center justify-end space-x-2 py-4">
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setPage((old) => Math.max(old - 1, 1))}
+                    disabled={page === 1 || loading}
+                >
+                    Önceki
+                </Button>
+                <div className="text-sm text-muted-foreground">
+                    Sayfa {page} / {totalPages || 1}
+                </div>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setPage((old) => (data.length === perPage || page < totalPages ? old + 1 : old))}
+                    disabled={page >= totalPages || loading}
+                >
+                    Sonraki
+                </Button>
+            </div>
+
+            <HeroDialog
+                open={showCreateDialog}
+                onOpenChange={setShowCreateDialog}
+                onSuccess={fetchData}
+            />
+        </div>
+    )
+}

frontend/app/admin/layout.tsx

@@ -0,0 +1,22 @@
+import { AdminHeader } from "@/components/admin/AdminHeader"
+import { AdminSidebar } from "@/components/admin/AdminSidebar"
+import { Toaster } from "@/components/ui/sonner"
+
+export default function AdminLayout({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    return (
+        <div className="flex min-h-screen w-full bg-muted/40 font-sans">
+            <AdminSidebar />
+            <div className="flex flex-col flex-1 w-full">
+                <AdminHeader />
+                <main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
+                    {children}
+                </main>
+            </div>
+            <Toaster />
+        </div>
+    )
+}

frontend/app/admin/page.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import { useSession, signOut } from "next-auth/react"
+import { useRouter } from "next/navigation"
+import { useEffect } from "react"
+import { Button } from "@/components/ui/button"
+
+export default function AdminDashboardPage() {
+    const { data: session, status } = useSession()
+    const router = useRouter()
+
+    useEffect(() => {
+        if (status === "unauthenticated") {
+            router.push("/auth/login?callbackUrl=/admin")
+        }
+    }, [status, router])
+
+    if (status === "loading") {
+        return <div className="flex h-screen items-center justify-center">Yükleniyor...</div>
+    }
+
+    return (
+        <div>
+            <div className="flex items-center justify-between mb-8">
+                <h1 className="text-3xl font-bold">Yönetici Paneli</h1>
+                <div className="flex items-center gap-4">
+                    <span>Merhaba, {session?.user?.name || session?.user?.email}</span>
+                    <Button variant="outline" onClick={() => signOut({ callbackUrl: "/auth/login" })}>
+                        Çıkış Yap
+                    </Button>
+                </div>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div className="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
+                    <h3 className="text-lg font-semibold mb-2">Toplam Kullanıcı</h3>
+                    <p className="text-3xl font-bold">0</p>
+                </div>
+                <div className="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
+                    <h3 className="text-lg font-semibold mb-2">Toplam Satış</h3>
+                    <p className="text-3xl font-bold">₺0.00</p>
+                </div>
+                <div className="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
+                    <h3 className="text-lg font-semibold mb-2">Aktif Siparişler</h3>
+                    <p className="text-3xl font-bold">0</p>
+                </div>
+            </div>
+        </div>
+    )
+}

frontend/app/admin/posts/_components/columns.tsx

@@ -0,0 +1,132 @@
+"use client"
+
+import { ColumnDef } from "@tanstack/react-table"
+import { Post } from "@/types/post"
+import { Button } from "@/components/ui/button"
+import { Edit, Trash, RotateCcw } from "lucide-react"
+
+interface PostColumnsProps {
+    onEdit: (post: Post) => void
+    onDelete: (id: number) => void
+    onRestore: (id: number) => void
+    statusFilter: string
+    deletedIds: number[]
+}
+
+export const getPostColumns = ({ onEdit, onDelete, onRestore, statusFilter, deletedIds }: PostColumnsProps): ColumnDef<Post>[] => [
+    {
+        accessorKey: "images",
+        header: "Görsel",
+        cell: ({ row }) => {
+            const rawImages = row.original.images
+            const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8080"
+
+            // Backend tarafında "images" alanı virgülle ayrılmış birden fazla path içerebilir.
+            // Liste görünümünde ilk path'i küçük görsel için kullanalım.
+            const firstImage = rawImages
+                ? rawImages
+                    .split(",")
+                    .map(p => p.trim())
+                    .filter(Boolean)[0]
+                : null
+
+            const fullUrl = firstImage
+                ? (firstImage.startsWith("http") ? firstImage : `${apiUrl}${firstImage}`)
+                : null
+
+            return (
+                <div className="w-16 h-10 bg-gray-100 rounded overflow-hidden flex items-center justify-center">
+                    {fullUrl ? (
+                        // eslint-disable-next-line @next/next/no-img-element
+                        <img src={fullUrl} alt={row.original.title} className="w-full h-full object-cover" />
+                    ) : (
+                        <span className="text-xs text-gray-400">Yok</span>
+                    )}
+                </div>
+            )
+        },
+    },
+    {
+        accessorKey: "title",
+        header: "Başlık",
+    },
+    {
+        accessorKey: "categories",
+        header: "Kategoriler",
+        cell: ({ row }) => (
+            <div className="flex flex-wrap gap-1">
+                {row.original.categories?.map((cat, index) => (
+                    <span key={cat.id || cat.title || index} className="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">
+                        {cat.title}
+                    </span>
+                ))}
+            </div>
+        ),
+    },
+    {
+        accessorKey: "tags",
+        header: "Etiketler",
+        cell: ({ row }) => (
+            <div className="flex flex-wrap gap-1">
+                {row.original.tags?.map((tag, index) => (
+                    <span key={tag.id || tag.name || index} className="px-2 py-1 bg-gray-100 text-gray-800 text-xs rounded-full">
+                        {tag.name}
+                    </span>
+                ))}
+            </div>
+        ),
+    },
+    {
+        accessorKey: "updated_at",
+        header: "Son Güncelleme",
+        cell: ({ row }) => {
+            const updatedAt = row.original.updated_at || row.original.UpdatedAt
+            return updatedAt ? new Date(updatedAt).toLocaleDateString("tr-TR") : "-"
+        },
+    },
+    {
+        id: "actions",
+        cell: ({ row }) => {
+            const id = row.original.id || row.original.ID
+            const inDeletedList = typeof id === "number" && deletedIds.includes(id)
+
+            // "Sadece Silinenler" filtresinde hepsi silinmiş kabul edilir.
+            // "Tümü (Dahil)" filtresinde ise deletedIds listesine bakılır.
+            const isDeleted = statusFilter === "only" || inDeletedList
+            return (
+                <div className="flex gap-2 justify-end">
+                    {isDeleted ? (
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => onRestore(row.original.id || row.original.ID!)}
+                            className="h-8 w-8 p-0 text-green-600 hover:text-green-700 hover:bg-green-50"
+                            title="Geri Yükle"
+                        >
+                            <RotateCcw className="h-4 w-4" />
+                        </Button>
+                    ) : (
+                        <>
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => onEdit(row.original)}
+                                className="h-8 w-8 p-0"
+                            >
+                                <Edit className="h-4 w-4" />
+                            </Button>
+                            <Button
+                                variant="destructive"
+                                size="sm"
+                                onClick={() => onDelete(row.original.id || row.original.ID!)}
+                                className="h-8 w-8 p-0"
+                            >
+                                <Trash className="h-4 w-4" />
+                            </Button>
+                        </>
+                    )}
+                </div>
+            )
+        },
+    },
+]

frontend/app/admin/posts/_components/post-dialog.tsx

@@ -0,0 +1,437 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import * as z from "zod"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
+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 { Post } from "@/types/post"
+import { categoryService } from "@/services/categoryService"
+import { postService } from "@/services/postService"
+import { tagService } from "@/services/tagService"
+import { Category } from "@/types/category"
+import { Tag } from "@/types/tag"
+import { toast } from "sonner"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select"
+import { useSlug } from "@/hooks/useSlug"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+
+// MultiSelect component specifically for Shadcn UI
+// Since Shadcn doesn't have a native MultiSelect, we'll use a simple implementation or standard select with multiple
+// For better UI, using a basic select list for now, ideally should use a proper MultiSelect component
+const MultiSelect = ({
+    options,
+    selected,
+    onChange
+}: {
+    options: { label: string; value: string }[]
+    selected: string[]
+    onChange: (values: string[]) => void
+}) => {
+    return (
+        <div className="border rounded-md p-2 max-h-40 overflow-y-auto">
+            {options.map((option) => (
+                <div key={option.value} className="flex items-center gap-2 mb-1">
+                    <input
+                        type="checkbox"
+                        id={`opt-${option.value}`}
+                        checked={selected.includes(option.value)}
+                        onChange={(e) => {
+                            if (e.target.checked) {
+                                onChange([...selected, option.value])
+                            } else {
+                                onChange(selected.filter((v) => v !== option.value))
+                            }
+                        }}
+                        className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
+                    />
+                    <label htmlFor={`opt-${option.value}`} className="text-sm cursor-pointer select-none">
+                        {option.label}
+                    </label>
+                </div>
+            ))}
+            {options.length === 0 && <p className="text-sm text-gray-500 py-2 text-center">Veri bulunamadı.</p>}
+        </div>
+    )
+}
+
+const formSchema = z.object({
+    title: z.string().min(2, "Başlık en az 2 karakter olmalı"),
+    slug: z.string().min(2, "Slug en az 2 karakter olmalı"),
+    content: z.string().min(10, "İçerik en az 10 karakter olmalı"),
+    category_ids: z.array(z.string()).min(1, "En az bir kategori seçilmelidir"),
+    tag_names: z.array(z.string()).optional(), // Changed to array for MultiSelect
+
+    // Image Config
+    images: z.any().optional(),
+    width: z.coerce.number().min(1).default(800),
+    height: z.coerce.number().min(1).default(600),
+    quality: z.coerce.number().min(1).max(100).default(85),
+    format: z.string().default("webp"),
+})
+
+interface PostDialogProps {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    post?: Post | null
+    onSuccess?: () => void
+}
+
+export function PostDialog({ open, onOpenChange, post, onSuccess }: PostDialogProps) {
+    const [loading, setLoading] = useState(false)
+    const [categories, setCategories] = useState<Category[]>([])
+    const [tags, setTags] = useState<Tag[]>([])
+    const [preview, setPreview] = useState<string | null>(null)
+    const { slugify } = useSlug()
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        resolver: zodResolver(formSchema) as any,
+        defaultValues: {
+            title: "",
+            slug: "",
+            content: "",
+            category_ids: [],
+            tag_names: [],
+            width: 800,
+            height: 600,
+            quality: 85,
+            format: "webp",
+        },
+    })
+
+    useEffect(() => {
+        const loadData = async () => {
+            try {
+                const catRes = await categoryService.getCategories(1, 100)
+                setCategories(catRes.items || [])
+
+                const tagRes = await tagService.getTags(1, 100)
+                setTags(tagRes.items || [])
+
+            } catch (error) {
+                console.error("Failed to load categories/tags", error)
+            }
+        }
+
+        if (open) {
+            loadData()
+        }
+    }, [open])
+
+    useEffect(() => {
+        if (post) {
+            const categoryIds =
+                post.categories
+                    ?.map(c => {
+                        const id = c.id ?? c.ID
+                        return id != null ? id.toString() : null
+                    })
+                    .filter((id): id is string => !!id) || []
+
+            form.reset({
+                title: post.title,
+                slug: post.slug,
+                content: post.content,
+                category_ids: categoryIds,
+                tag_names: post.tags?.map(t => t.name) || [],
+                width: post.width || 800,
+                height: post.height || 600,
+                quality: post.quality || 85,
+                format: post.format || "webp",
+            })
+
+            const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8080"
+            if (post.images) {
+                // Backend \"images\" alanı birden fazla path'i virgülle birleştirebiliyor.
+                // Dialog önizlemesi için ilk path'i kullan.
+                const firstImage = post.images
+                    .split(",")
+                    .map(p => p.trim())
+                    .filter(Boolean)[0]
+
+                if (firstImage) {
+                    setPreview(firstImage.startsWith("http") ? firstImage : `${apiUrl}${firstImage}`)
+                }
+            }
+        } else {
+            form.reset({
+                title: "",
+                slug: "",
+                content: "",
+                category_ids: [],
+                tag_names: [],
+                width: 800,
+                height: 600,
+                quality: 85,
+                format: "webp",
+            })
+            setPreview(null)
+        }
+    }, [post, form, open])
+
+    const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const title = e.target.value
+        form.setValue("title", title)
+        if (!post) { // Only auto-slug on create
+            form.setValue("slug", slugify(title))
+        }
+    }
+
+    const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0]
+        if (file) {
+            form.setValue("images", file)
+            const reader = new FileReader()
+            reader.onloadend = () => {
+                setPreview(reader.result as string)
+            }
+            reader.readAsDataURL(file)
+        }
+    }
+
+    const onSubmit = async (values: z.infer<typeof formSchema>) => {
+        setLoading(true)
+        const formData = new FormData()
+
+        formData.append("title", values.title)
+        formData.append("slug", values.slug)
+        formData.append("content", values.content)
+
+        // Append categories - Backend likely expects multiple fields with same name or comma separated
+        // Based on curl example: -F 'category_ids=1'
+        // If multiple, standard is usually repeating the field
+        values.category_ids.forEach(id => {
+            formData.append("category_ids", id)
+        })
+
+        // Tags - Backend, dokümana göre tekrar eden 'tag_names' alanlarını bekliyor:
+        // -F 'tag_names=tag1' -F 'tag_names=tag2'
+        if (values.tag_names && values.tag_names.length > 0) {
+            values.tag_names.forEach(name => {
+                formData.append("tag_names", name)
+            })
+        }
+
+        // Image config
+        formData.append("width", values.width.toString())
+        formData.append("height", values.height.toString())
+        formData.append("quality", values.quality.toString())
+        formData.append("format", values.format)
+
+        if (values.images instanceof File) {
+            formData.append("images", values.images)
+        }
+
+        try {
+            if (post) {
+                await postService.updatePost(post.id || post.ID!, formData)
+                toast.success("Yazı başarıyla güncellendi")
+            } else {
+                await postService.createPost(formData)
+                toast.success("Yazı başarıyla oluşturuldu")
+            }
+            onOpenChange(false)
+            if (onSuccess) onSuccess()
+        } catch (error: unknown) {
+            console.error("Post save error:", error)
+            toast.error((error as Error).message || "Bir hata oluştu")
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[800px] h-[90vh] overflow-y-auto flex flex-col">
+                <DialogHeader>
+                    <DialogTitle>{post ? "Yazı Düzenle" : "Yeni Yazı Ekle"}</DialogTitle>
+                </DialogHeader>
+
+                <div className="flex-1 overflow-y-auto py-2">
+                    <Form {...form}>
+                        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+                            <Tabs defaultValue="content" className="w-full">
+                                <TabsList className="grid w-full grid-cols-2">
+                                    <TabsTrigger value="content">İçerik</TabsTrigger>
+                                    <TabsTrigger value="media">Medya & SEO</TabsTrigger>
+                                </TabsList>
+
+                                {/* CONTENT TAB */}
+                                <TabsContent value="content" className="space-y-4 pt-4">
+                                    <FormField
+                                        control={form.control}
+                                        name="title"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>Başlık</FormLabel>
+                                                <FormControl>
+                                                    <Input placeholder="Yazı Başlığı" {...field} onChange={handleTitleChange} />
+                                                </FormControl>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+
+                                    <FormField
+                                        control={form.control}
+                                        name="slug"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>SEO URL (Slug)</FormLabel>
+                                                <FormControl>
+                                                    <Input placeholder="yazi-basligi" {...field} />
+                                                </FormControl>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+
+                                    <div className="grid grid-cols-2 gap-4">
+                                        <FormField
+                                            control={form.control}
+                                            name="category_ids"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>Kategoriler</FormLabel>
+                                                    <FormControl>
+                                                        <MultiSelect
+                                                            options={categories.map(c => ({ label: c.title, value: c.id.toString() }))}
+                                                            selected={field.value}
+                                                            onChange={field.onChange}
+                                                        />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+
+                                        <FormField
+                                            control={form.control}
+                                            name="tag_names"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>Etiketler</FormLabel>
+                                                    <FormControl>
+                                                        <MultiSelect
+                                                            options={tags.map(t => ({ label: t.name, value: t.name }))}
+                                                            selected={field.value || []}
+                                                            onChange={field.onChange}
+                                                        />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                    </div>
+
+                                    <FormField
+                                        control={form.control}
+                                        name="content"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>İçerik</FormLabel>
+                                                <FormControl>
+                                                    <Textarea className="min-h-[300px]" placeholder="Yazı içeriği..." {...field} />
+                                                </FormControl>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                </TabsContent>
+
+                                {/* MEDIA TAB */}
+                                <TabsContent value="media" className="space-y-4 pt-4">
+                                    <div className="border p-4 rounded-md space-y-4">
+                                        <h3 className="font-semibold text-lg">Öne Çıkan Görsel</h3>
+
+                                        <div className="grid grid-cols-2 gap-4">
+                                            <FormField
+                                                control={form.control}
+                                                name="width"
+                                                render={({ field }) => (
+                                                    <FormItem><FormLabel>Genişlik</FormLabel><FormControl><Input type="number" {...field} /></FormControl><FormMessage /></FormItem>
+                                                )}
+                                            />
+                                            <FormField
+                                                control={form.control}
+                                                name="height"
+                                                render={({ field }) => (
+                                                    <FormItem><FormLabel>Yükseklik</FormLabel><FormControl><Input type="number" {...field} /></FormControl><FormMessage /></FormItem>
+                                                )}
+                                            />
+                                            <FormField
+                                                control={form.control}
+                                                name="quality"
+                                                render={({ field }) => (
+                                                    <FormItem><FormLabel>Kalite</FormLabel><FormControl><Input type="number" {...field} /></FormControl><FormMessage /></FormItem>
+                                                )}
+                                            />
+                                            <FormField
+                                                control={form.control}
+                                                name="format"
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormLabel>Format</FormLabel>
+                                                        <Select onValueChange={field.onChange} defaultValue={field.value}>
+                                                            <FormControl>
+                                                                <SelectTrigger><SelectValue placeholder="Format" /></SelectTrigger>
+                                                            </FormControl>
+                                                            <SelectContent>
+                                                                <SelectItem value="webp">WebP</SelectItem>
+                                                                <SelectItem value="avif">AVIF</SelectItem>
+                                                                <SelectItem value="jpeg">JPEG</SelectItem>
+                                                                <SelectItem value="png">PNG</SelectItem>
+                                                            </SelectContent>
+                                                        </Select>
+                                                        <FormMessage />
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        </div>
+
+                                        <FormItem>
+                                            <FormLabel>Görsel Dosyası</FormLabel>
+                                            <FormControl>
+                                                <Input type="file" accept="image/*" onChange={handleImageChange} />
+                                            </FormControl>
+                                            {preview && (
+                                                <div className="mt-2 w-full h-48 bg-gray-100 rounded flex items-center justify-center overflow-hidden border">
+                                                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                                                    <img src={preview} alt="Preview" className="h-full object-contain" />
+                                                </div>
+                                            )}
+                                        </FormItem>
+                                    </div>
+                                </TabsContent>
+                            </Tabs>
+
+                            <DialogFooter>
+                                <Button type="submit" disabled={loading}>
+                                    {loading ? "Kaydediliyor..." : "Kaydet"}
+                                </Button>
+                            </DialogFooter>
+                        </form>
+                    </Form>
+                </div>
+            </DialogContent>
+        </Dialog>
+    )
+}

frontend/app/admin/posts/page.tsx

@@ -0,0 +1,238 @@
+"use client"
+
+import { useEffect, useState, useCallback } from "react"
+import { useSession } from "next-auth/react"
+import { DataTable } from "@/components/ui/data-table"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Plus } from "lucide-react"
+import { postService } from "@/services/postService"
+import { Post } from "@/types/post"
+import { PostDialog } from "./_components/post-dialog"
+import { getPostColumns } from "./_components/columns"
+import { toast } from "sonner"
+import Swal from "sweetalert2"
+import withReactContent from "sweetalert2-react-content"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select"
+
+const MySwal = withReactContent(Swal)
+
+export default function PostsPage() {
+    const { data: session } = useSession()
+    const [posts, setPosts] = useState<Post[]>([])
+    const [total, setTotal] = useState(0)
+    const [page, setPage] = useState(1)
+    const [perPage] = useState(10)
+    const [search, setSearch] = useState("")
+    const [statusFilter, setStatusFilter] = useState("with") // "with" | "only" (backend defaults to active if not with/only)
+    const [dialogOpen, setDialogOpen] = useState(false)
+    const [deletedIds, setDeletedIds] = useState<number[]>([])
+    const [selectedPost, setSelectedPost] = useState<Post | null>(null)
+
+    const fetchPosts = useCallback(async () => {
+        try {
+            const res = await postService.getPosts(page, perPage, search, statusFilter)
+
+            // Liste verisini al
+            const baseItems = res.items || []
+
+            // images alanı boş olanlar için, detay endpoint'inden gerçek images değerini çek
+            const itemsWithImages = await Promise.all(
+                baseItems.map(async (p) => {
+                    if (p.images && p.images.trim() !== "") {
+                        return p
+                    }
+                    const id = p.id || p.ID
+                    if (!id) {
+                        return p
+                    }
+                    try {
+                        const detail = await postService.getPost(id)
+                        return {
+                            ...p,
+                            images: detail.data.images,
+                        }
+                    } catch {
+                        return p
+                    }
+                })
+            )
+
+            setPosts(itemsWithImages)
+            setTotal(res.total)
+
+            // Silinmiş post ID'lerini ayrıca takip et:
+            if (statusFilter === "only") {
+                const ids = itemsWithImages
+                    .map(p => p.id || p.ID)
+                    .filter((id): id is number => typeof id === "number")
+                setDeletedIds(ids)
+            } else if (statusFilter === "with") {
+                // 'with' görünümünde, silinmişleri ayrı bir çağrı ile çekelim
+                try {
+                    const deletedRes = await postService.getPosts(1, 200, search, "only")
+                    const ids = (deletedRes.items || [])
+                        .map(p => p.id || p.ID)
+                        .filter((id): id is number => typeof id === "number")
+                    setDeletedIds(ids)
+                } catch (e) {
+                    console.error("Silinmiş yazılar alınamadı:", e)
+                    setDeletedIds([])
+                }
+            } else {
+                // Sadece aktif filtresinde silinmiş saymayalım
+                setDeletedIds([])
+            }
+        } catch (error) {
+            toast.error("Yazılar yüklenirken hata oluştu")
+            console.error(error)
+        }
+    }, [page, perPage, search, statusFilter])
+
+    useEffect(() => {
+        if (session) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect
+            fetchPosts()
+        }
+    }, [session, fetchPosts])
+
+    const handleDelete = async (id: number) => {
+        const result = await MySwal.fire({
+            title: "Emin misiniz?",
+            text: "Bu yazıyı silmek istediğinize emin misiniz?",
+            icon: "warning",
+            showCancelButton: true,
+            confirmButtonText: "Evet, Sil",
+            cancelButtonText: "İptal",
+            customClass: {
+                popup: "dark:bg-gray-800 dark:text-white",
+                title: "dark:text-white",
+            },
+        })
+
+        if (result.isConfirmed) {
+            try {
+                await postService.deletePost(id)
+                toast.success("Yazı başarıyla silindi")
+                fetchPosts()
+            } catch (error) {
+                toast.error("Silme işlemi başarısız oldu")
+                console.error(error)
+            }
+        }
+    }
+
+    const handleRestore = async (id: number) => {
+        const result = await MySwal.fire({
+            title: "Geri Yükle?",
+            text: "Bu yazıyı geri yüklemek istediğinize emin misiniz?",
+            icon: "question",
+            showCancelButton: true,
+            confirmButtonText: "Evet, Geri Yükle",
+            cancelButtonText: "İptal",
+            customClass: {
+                popup: "dark:bg-gray-800 dark:text-white",
+                title: "dark:text-white",
+            },
+        })
+
+        if (result.isConfirmed) {
+            try {
+                await postService.restorePost(id)
+                toast.success("Yazı başarıyla geri yüklendi")
+                fetchPosts()
+            } catch (error) {
+                toast.error("Geri yükleme başarısız oldu")
+                console.error(error)
+            }
+        }
+    }
+
+    const handleEdit = async (post: Post) => {
+        try {
+            const id = post.id || post.ID
+            if (!id) {
+                toast.error("Yazı ID'si bulunamadı")
+                return
+            }
+
+            // Detay endpoint'inden güncel veriyi çek
+            const res = await postService.getPost(id)
+            setSelectedPost(res.data)
+            setDialogOpen(true)
+        } catch (error) {
+            console.error("Yazı detayı alınamadı:", error)
+            toast.error("Yazı detayı alınamadı")
+        }
+    }
+
+    const handleCreate = () => {
+        setSelectedPost(null)
+        setDialogOpen(true)
+    }
+
+    const columns = getPostColumns({
+        onEdit: handleEdit,
+        onDelete: handleDelete,
+        onRestore: handleRestore,
+        statusFilter,
+        deletedIds,
+    })
+
+    return (
+        <div className="p-8">
+            <div className="flex items-center justify-between mb-6">
+                <div>
+                    <h1 className="text-3xl font-bold tracking-tight">Blog Yazıları</h1>
+                    <p className="text-muted-foreground">
+                        Blog içeriğini, kategorileri ve etiketleri yönetin.
+                    </p>
+                </div>
+                <Button onClick={handleCreate}>
+                    <Plus className="mr-2 h-4 w-4" /> Yeni Yazı
+                </Button>
+            </div>
+
+            <div className="flex items-center py-4 gap-4">
+                <Input
+                    placeholder="Başlık ara..."
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                    className="max-w-sm"
+                />
+                <Select value={statusFilter} onValueChange={setStatusFilter}>
+                    <SelectTrigger className="w-[180px]">
+                        <SelectValue placeholder="Durum" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="with">Tümü (Dahil)</SelectItem>
+                        {/* Backend logic: empty 'soft' param usually means active only, 'only' means deleted only */}
+                        <SelectItem value="active">Sadece Aktif</SelectItem>
+                        <SelectItem value="only">Sadece Silinenler</SelectItem>
+                    </SelectContent>
+                </Select>
+            </div>
+
+            <DataTable
+                columns={columns}
+                data={posts}
+                pageCount={Math.ceil(total / perPage)}
+                page={page}
+                onPageChange={setPage}
+            />
+
+            <PostDialog
+                open={dialogOpen}
+                onOpenChange={setDialogOpen}
+                post={selectedPost}
+                onSuccess={fetchPosts}
+            />
+        </div>
+    )
+}

frontend/app/admin/settings/_components/setting-dialog.tsx

@@ -0,0 +1,582 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import * as z from "zod"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+    FormDescription,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Switch } from "@/components/ui/switch"
+import { Textarea } from "@/components/ui/textarea"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" // Assume these exist or need verify
+import { Setting } from "@/types/setting"
+import { settingService } from "@/services/settingService"
+import { toast } from "sonner"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select"
+
+const formSchema = z.object({
+    title: z.string().min(2, "Başlık en az 2 karakter olmalı"),
+    slogan: z.string().optional(),
+    url: z.string().url("Geçerli bir URL giriniz").optional().or(z.literal("")),
+    email: z.string().email("Geçerli bir e-posta giriniz").optional().or(z.literal("")),
+    phone: z.string().optional(),
+    address: z.string().optional(),
+    copyright: z.string().optional(),
+    map_embed: z.string().optional(),
+    meta_title: z.string().optional(),
+    meta_description: z.string().optional(),
+
+    // Social
+    facebook: z.string().url().optional().or(z.literal("")),
+    x: z.string().url().optional().or(z.literal("")),
+    instagram: z.string().url().optional().or(z.literal("")),
+    whatsapp: z.string().optional(), // clean number usually
+    linkedin: z.string().url().optional().or(z.literal("")),
+    pinterest: z.string().url().optional().or(z.literal("")),
+
+    // Config
+    is_active: z.boolean().default(false),
+
+    // Images W Logo
+    w_logo: z.any().optional(),
+    w_width: z.coerce.number().min(1).default(100),
+    w_height: z.coerce.number().min(1).default(100),
+    w_quality: z.coerce.number().min(1).max(100).default(85),
+    w_format: z.string().default("avif"),
+
+    // Images B Logo
+    b_logo: z.any().optional(),
+    b_width: z.coerce.number().min(1).default(100),
+    b_height: z.coerce.number().min(1).default(100),
+    b_quality: z.coerce.number().min(1).max(100).default(85),
+    b_format: z.string().default("avif"),
+})
+
+interface SettingDialogProps {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    setting?: Setting | null
+    onSuccess?: () => void
+}
+
+export function SettingDialog({ open, onOpenChange, setting, onSuccess }: SettingDialogProps) {
+    const [loading, setLoading] = useState(false)
+    const [wPreview, setWPreview] = useState<string | null>(null)
+    const [bPreview, setBPreview] = useState<string | null>(null)
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        resolver: zodResolver(formSchema) as any,
+        defaultValues: {
+            title: "",
+            slogan: "",
+            url: "",
+            email: "",
+            phone: "",
+            address: "",
+            copyright: "",
+            map_embed: "",
+            meta_title: "",
+            meta_description: "",
+            facebook: "",
+            x: "",
+            instagram: "",
+            whatsapp: "",
+            linkedin: "",
+            pinterest: "",
+            is_active: false,
+            w_width: 100,
+            w_height: 100,
+            w_quality: 85,
+            w_format: "avif",
+            b_width: 100,
+            b_height: 100,
+            b_quality: 85,
+            b_format: "avif",
+        },
+    })
+
+    useEffect(() => {
+        if (setting) {
+            form.reset({
+                title: setting.title,
+                slogan: setting.slogan || "",
+                url: setting.url || "",
+                email: setting.email || "",
+                phone: setting.phone || "",
+                address: setting.address || "",
+                copyright: setting.copyright || "",
+                map_embed: setting.map_embed || "",
+                meta_title: setting.meta_title || "",
+                meta_description: setting.meta_description || "",
+                facebook: setting.facebook || "",
+                x: setting.x || "",
+                instagram: setting.instagram || "",
+                whatsapp: setting.whatsapp || "",
+                linkedin: setting.linkedin || "",
+                pinterest: setting.pinterest || "",
+                is_active: !!setting.is_active,
+                w_width: setting.w_width || 100,
+                w_height: setting.w_height || 100,
+                w_quality: setting.w_quality || 85,
+                w_format: setting.w_format || "avif",
+                b_width: setting.b_width || 100,
+                b_height: setting.b_height || 100,
+                b_quality: setting.b_quality || 85,
+                b_format: setting.b_format || "avif",
+            })
+
+            // Set previews
+            // Assuming backend serves images from a static path, need env URL
+            const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8080"
+            if (setting.w_logo) {
+                // Check if it's already a full URL or relative
+                setWPreview(setting.w_logo.startsWith("http") ? setting.w_logo : `${apiUrl}${setting.w_logo}`)
+            }
+            if (setting.b_logo) {
+                setBPreview(setting.b_logo.startsWith("http") ? setting.b_logo : `${apiUrl}${setting.b_logo}`)
+            }
+
+        } else {
+            form.reset({
+                title: "",
+                slogan: "",
+                url: "",
+                email: "",
+                phone: "",
+                address: "",
+                copyright: "",
+                map_embed: "",
+                meta_title: "",
+                meta_description: "",
+                facebook: "",
+                x: "",
+                instagram: "",
+                whatsapp: "",
+                linkedin: "",
+                pinterest: "",
+                is_active: false,
+                w_width: 100,
+                w_height: 100,
+                w_quality: 85,
+                w_format: "avif",
+                b_width: 100,
+                b_height: 100,
+                b_quality: 85,
+                b_format: "avif",
+            })
+            setWPreview(null)
+            setBPreview(null)
+        }
+    }, [setting, form, open])
+
+    const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>, fieldName: "w_logo" | "b_logo") => {
+        const file = e.target.files?.[0]
+        if (file) {
+            form.setValue(fieldName, file)
+            const reader = new FileReader()
+            reader.onloadend = () => {
+                if (fieldName === "w_logo") setWPreview(reader.result as string)
+                else setBPreview(reader.result as string)
+            }
+            reader.readAsDataURL(file)
+        }
+    }
+
+    const onSubmit = async (values: z.infer<typeof formSchema>) => {
+        setLoading(true)
+        const formData = new FormData()
+
+        // Append basic fields
+        Object.entries(values).forEach(([key, value]) => {
+            if (key !== "w_logo" && key !== "b_logo") {
+                formData.append(key, String(value))
+            }
+        })
+
+        // Append images if they are files
+        if (values.w_logo instanceof File) {
+            formData.append("w_logo", values.w_logo)
+        }
+        if (values.b_logo instanceof File) {
+            formData.append("b_logo", values.b_logo)
+        }
+
+        try {
+            if (setting) {
+                await settingService.updateSetting(setting.ID, formData)
+                toast.success("Ayar başarıyla güncellendi")
+            } else {
+                await settingService.createSetting(formData)
+                toast.success("Ayar başarıyla oluşturuldu")
+            }
+            onOpenChange(false)
+            if (onSuccess) onSuccess()
+        } catch (error: unknown) {
+            console.error("Setting save error:", error)
+            toast.error((error as Error).message || "Bir hata oluştu")
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[800px] h-[90vh] overflow-y-auto flex flex-col">
+                <DialogHeader>
+                    <DialogTitle>{setting ? "Ayar Düzenle" : "Yeni Ayar Ekle"}</DialogTitle>
+                </DialogHeader>
+
+                <div className="flex-1 overflow-y-auto py-2">
+                    <Form {...form}>
+                        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+                            <Tabs defaultValue="general" className="w-full">
+                                <TabsList className="grid w-full grid-cols-4">
+                                    <TabsTrigger value="general">Genel</TabsTrigger>
+                                    <TabsTrigger value="contact">İletişim</TabsTrigger>
+                                    <TabsTrigger value="social">Sosyal Medya</TabsTrigger>
+                                    <TabsTrigger value="images">Görseller</TabsTrigger>
+                                </TabsList>
+
+                                {/* GENERAL TAB */}
+                                <TabsContent value="general" className="space-y-4 pt-4">
+                                    <div className="grid grid-cols-2 gap-4">
+                                        <FormField
+                                            control={form.control}
+                                            name="title"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>Site Başlığı</FormLabel>
+                                                    <FormControl>
+                                                        <Input placeholder="Site Başlığı" {...field} />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                        <FormField
+                                            control={form.control}
+                                            name="slogan"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>Slogan</FormLabel>
+                                                    <FormControl>
+                                                        <Input placeholder="Slogan" {...field} />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                    </div>
+                                    <div className="grid grid-cols-2 gap-4">
+                                        <FormField
+                                            control={form.control}
+                                            name="meta_title"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>Meta Başlığı</FormLabel>
+                                                    <FormControl>
+                                                        <Input placeholder="SEO için Başlık" {...field} />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                        <FormField
+                                            control={form.control}
+                                            name="meta_description"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>Meta Açıklama</FormLabel>
+                                                    <FormControl>
+                                                        <Input placeholder="SEO için Açıklama" {...field} />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                    </div>
+                                    <FormField
+                                        control={form.control}
+                                        name="is_active"
+                                        render={({ field }) => (
+                                            <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm bg-destructive/10">
+                                                <div className="space-y-0.5">
+                                                    <FormLabel className="font-bold text-destructive">Aktif Ayar</FormLabel>
+                                                    <FormDescription>
+                                                        Bu ayarı aktif yaparsanız, diğer tüm ayarlar otomatik olarak pasif duruma geçer.
+                                                    </FormDescription>
+                                                </div>
+                                                <FormControl>
+                                                    <Switch
+                                                        checked={field.value}
+                                                        onCheckedChange={field.onChange}
+                                                    />
+                                                </FormControl>
+                                            </FormItem>
+                                        )}
+                                    />
+                                </TabsContent>
+
+                                {/* CONTACT TAB */}
+                                <TabsContent value="contact" className="space-y-4 pt-4">
+                                    <div className="grid grid-cols-2 gap-4">
+                                        <FormField
+                                            control={form.control}
+                                            name="email"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>E-posta</FormLabel>
+                                                    <FormControl>
+                                                        <Input placeholder="ornek@site.com" {...field} />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                        <FormField
+                                            control={form.control}
+                                            name="phone"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>Telefon</FormLabel>
+                                                    <FormControl>
+                                                        <Input placeholder="+90 555 ..." {...field} />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                    </div>
+                                    <FormField
+                                        control={form.control}
+                                        name="url"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>Site URL</FormLabel>
+                                                <FormControl>
+                                                    <Input placeholder="https://site.com" {...field} />
+                                                </FormControl>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                    <FormField
+                                        control={form.control}
+                                        name="address"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>Adres</FormLabel>
+                                                <FormControl>
+                                                    <Textarea placeholder="Adres bilgisi" {...field} />
+                                                </FormControl>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                    <FormField
+                                        control={form.control}
+                                        name="map_embed"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>Harita Embed Kodu (Iframe)</FormLabel>
+                                                <FormControl>
+                                                    <Textarea placeholder='<iframe src="..." ...></iframe>' {...field} />
+                                                </FormControl>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                    <FormField
+                                        control={form.control}
+                                        name="copyright"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>Telif Hakkı Metni</FormLabel>
+                                                <FormControl>
+                                                    <Input placeholder="© 2024 Tüm hakları saklıdır." {...field} />
+                                                </FormControl>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                </TabsContent>
+
+                                {/* SOCIAL TAB */}
+                                <TabsContent value="social" className="space-y-4 pt-4">
+                                    <div className="grid grid-cols-2 gap-4">
+                                        <FormField control={form.control} name="facebook" render={({ field }) => (
+                                            <FormItem><FormLabel>Facebook</FormLabel><FormControl><Input placeholder="URL" {...field} /></FormControl><FormMessage /></FormItem>
+                                        )} />
+                                        <FormField control={form.control} name="x" render={({ field }) => (
+                                            <FormItem><FormLabel>X (Twitter)</FormLabel><FormControl><Input placeholder="URL" {...field} /></FormControl><FormMessage /></FormItem>
+                                        )} />
+                                        <FormField control={form.control} name="instagram" render={({ field }) => (
+                                            <FormItem><FormLabel>Instagram</FormLabel><FormControl><Input placeholder="URL" {...field} /></FormControl><FormMessage /></FormItem>
+                                        )} />
+                                        <FormField control={form.control} name="linkedin" render={({ field }) => (
+                                            <FormItem><FormLabel>LinkedIn</FormLabel><FormControl><Input placeholder="URL" {...field} /></FormControl><FormMessage /></FormItem>
+                                        )} />
+                                        <FormField control={form.control} name="pinterest" render={({ field }) => (
+                                            <FormItem><FormLabel>Pinterest</FormLabel><FormControl><Input placeholder="URL" {...field} /></FormControl><FormMessage /></FormItem>
+                                        )} />
+                                        <FormField control={form.control} name="whatsapp" render={({ field }) => (
+                                            <FormItem><FormLabel>Whatsapp</FormLabel><FormControl><Input placeholder="Numara" {...field} /></FormControl><FormMessage /></FormItem>
+                                        )} />
+                                    </div>
+                                </TabsContent>
+
+                                {/* IMAGES TAB */}
+                                <TabsContent value="images" className="space-y-4 pt-4">
+                                    {/* White Logo Config */}
+                                    <div className="border p-4 rounded-md space-y-4">
+                                        <h3 className="font-semibold text-lg">Beyaz Yazılı Logo (w_logo)</h3>
+                                        <div className="grid grid-cols-2 gap-4">
+                                            <FormField
+                                                control={form.control}
+                                                name="w_width"
+                                                render={({ field }) => (
+                                                    <FormItem><FormLabel>Genişlik</FormLabel><FormControl><Input type="number" {...field} /></FormControl><FormMessage /></FormItem>
+                                                )}
+                                            />
+                                            <FormField
+                                                control={form.control}
+                                                name="w_height"
+                                                render={({ field }) => (
+                                                    <FormItem><FormLabel>Yükseklik</FormLabel><FormControl><Input type="number" {...field} /></FormControl><FormMessage /></FormItem>
+                                                )}
+                                            />
+                                            <FormField
+                                                control={form.control}
+                                                name="w_quality"
+                                                render={({ field }) => (
+                                                    <FormItem><FormLabel>Kalite</FormLabel><FormControl><Input type="number" {...field} /></FormControl><FormMessage /></FormItem>
+                                                )}
+                                            />
+                                            <FormField
+                                                control={form.control}
+                                                name="w_format"
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormLabel>Format</FormLabel>
+                                                        <Select onValueChange={field.onChange} defaultValue={field.value}>
+                                                            <FormControl>
+                                                                <SelectTrigger><SelectValue placeholder="Format" /></SelectTrigger>
+                                                            </FormControl>
+                                                            <SelectContent>
+                                                                <SelectItem value="avif">AVIF</SelectItem>
+                                                                <SelectItem value="webp">WebP</SelectItem>
+                                                                <SelectItem value="png">PNG</SelectItem>
+                                                                <SelectItem value="jpeg">JPEG</SelectItem>
+                                                            </SelectContent>
+                                                        </Select>
+                                                        <FormMessage />
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        </div>
+                                        <FormItem>
+                                            <FormLabel>Logo Dosyası</FormLabel>
+                                            <FormControl>
+                                                <Input type="file" accept="image/*" onChange={(e) => handleImageChange(e, "w_logo")} />
+                                            </FormControl>
+                                            {wPreview && (
+                                                <div className="mt-2 w-full h-20 bg-gray-100 rounded flex items-center justify-center overflow-hidden border">
+                                                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                                                    <img src={wPreview} alt="W Logo Preview" className="h-full object-contain" />
+                                                </div>
+                                            )}
+                                        </FormItem>
+                                    </div>
+
+                                    {/* Black Logo Config */}
+                                    <div className="border p-4 rounded-md space-y-4">
+                                        <h3 className="font-semibold text-lg">Siyah Yazılı Logo (b_logo)</h3>
+                                        <div className="grid grid-cols-2 gap-4">
+                                            <FormField
+                                                control={form.control}
+                                                name="b_width"
+                                                render={({ field }) => (
+                                                    <FormItem><FormLabel>Genişlik</FormLabel><FormControl><Input type="number" {...field} /></FormControl><FormMessage /></FormItem>
+                                                )}
+                                            />
+                                            <FormField
+                                                control={form.control}
+                                                name="b_height"
+                                                render={({ field }) => (
+                                                    <FormItem><FormLabel>Yükseklik</FormLabel><FormControl><Input type="number" {...field} /></FormControl><FormMessage /></FormItem>
+                                                )}
+                                            />
+                                            <FormField
+                                                control={form.control}
+                                                name="b_quality"
+                                                render={({ field }) => (
+                                                    <FormItem><FormLabel>Kalite</FormLabel><FormControl><Input type="number" {...field} /></FormControl><FormMessage /></FormItem>
+                                                )}
+                                            />
+                                            <FormField
+                                                control={form.control}
+                                                name="b_format"
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormLabel>Format</FormLabel>
+                                                        <Select onValueChange={field.onChange} defaultValue={field.value}>
+                                                            <FormControl>
+                                                                <SelectTrigger><SelectValue placeholder="Format" /></SelectTrigger>
+                                                            </FormControl>
+                                                            <SelectContent>
+                                                                <SelectItem value="avif">AVIF</SelectItem>
+                                                                <SelectItem value="webp">WebP</SelectItem>
+                                                                <SelectItem value="png">PNG</SelectItem>
+                                                                <SelectItem value="jpeg">JPEG</SelectItem>
+                                                            </SelectContent>
+                                                        </Select>
+                                                        <FormMessage />
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        </div>
+                                        <FormItem>
+                                            <FormLabel>Logo Dosyası</FormLabel>
+                                            <FormControl>
+                                                <Input type="file" accept="image/*" onChange={(e) => handleImageChange(e, "b_logo")} />
+                                            </FormControl>
+                                            {bPreview && (
+                                                <div className="mt-2 w-full h-20 bg-gray-100 rounded flex items-center justify-center overflow-hidden border">
+                                                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                                                    <img src={bPreview} alt="B Logo Preview" className="h-full object-contain" />
+                                                </div>
+                                            )}
+                                        </FormItem>
+                                    </div>
+                                </TabsContent>
+                            </Tabs>
+
+                            <DialogFooter>
+                                <Button type="submit" disabled={loading}>
+                                    {loading ? "Kaydediliyor..." : "Kaydet"}
+                                </Button>
+                            </DialogFooter>
+                        </form>
+                    </Form>
+                </div>
+            </DialogContent>
+        </Dialog>
+    )
+}

frontend/app/admin/settings/page.tsx

@@ -0,0 +1,229 @@
+"use client"
+
+import { useEffect, useState, useCallback } from "react"
+import { useSession } from "next-auth/react"
+import { DataTable } from "@/components/ui/data-table"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Plus, Edit, Trash, RotateCcw } from "lucide-react"
+import { settingService } from "@/services/settingService"
+import { Setting } from "@/types/setting"
+import { SettingDialog } from "./_components/setting-dialog"
+import { toast } from "sonner"
+import Swal from "sweetalert2"
+import withReactContent from "sweetalert2-react-content"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select"
+
+const MySwal = withReactContent(Swal)
+
+export default function SettingsPage() {
+    const { data: session } = useSession()
+    const [settings, setSettings] = useState<Setting[]>([])
+    const [total, setTotal] = useState(0)
+    const [page, setPage] = useState(1)
+    const [perPage] = useState(10)
+    const [search, setSearch] = useState("")
+    const [statusFilter, setStatusFilter] = useState("with") // "with" | "active" | "only"
+    const [dialogOpen, setDialogOpen] = useState(false)
+    const [selectedSetting, setSelectedSetting] = useState<Setting | null>(null)
+
+    const fetchSettings = useCallback(async () => {
+        try {
+            // "active" -> "" (backend default?), "with" -> "with", "only" -> "only"
+            const apiSoftFilter = statusFilter === "active" ? "" : statusFilter
+            const res = await settingService.getSettings(page, perPage, search, apiSoftFilter)
+            setSettings(res.items || [])
+            setTotal(res.total)
+        } catch (error) {
+            toast.error("Ayarlar yüklenirken hata oluştu")
+            console.error(error)
+        }
+    }, [page, perPage, search, statusFilter])
+
+    useEffect(() => {
+        if (session) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect
+            fetchSettings()
+        }
+    }, [session, fetchSettings])
+
+    const handleDelete = async (id: number) => {
+        const result = await MySwal.fire({
+            title: "Emin misiniz?",
+            text: "Bu ayarı silmek istediğinize emin misiniz?",
+            icon: "warning",
+            showCancelButton: true,
+            confirmButtonText: "Evet, Sil",
+            cancelButtonText: "İptal",
+            customClass: {
+                popup: "dark:bg-gray-800 dark:text-white",
+                title: "dark:text-white",
+            },
+        })
+
+        if (result.isConfirmed) {
+            try {
+                await settingService.deleteSetting(id)
+                toast.success("Ayar başarıyla silindi")
+                fetchSettings()
+            } catch (error) {
+                toast.error("Silme işlemi başarısız oldu")
+                console.error(error)
+            }
+        }
+    }
+
+    const handleRestore = async (id: number) => {
+        const result = await MySwal.fire({
+            title: "Geri Yükle?",
+            text: "Bu ayarı geri yüklemek istediğinize emin misiniz?",
+            icon: "question",
+            showCancelButton: true,
+            confirmButtonText: "Evet, Geri Yükle",
+            cancelButtonText: "İptal",
+            customClass: {
+                popup: "dark:bg-gray-800 dark:text-white",
+                title: "dark:text-white",
+            },
+        })
+
+        if (result.isConfirmed) {
+            try {
+                await settingService.restoreSetting(id)
+                toast.success("Ayar başarıyla geri yüklendi")
+                fetchSettings()
+            } catch (error) {
+                toast.error("Geri yükleme başarısız oldu")
+                console.error(error)
+            }
+        }
+    }
+
+    const columns = [
+        {
+            accessorKey: "title",
+            header: "Başlık",
+        },
+        {
+            accessorKey: "is_active",
+            header: "Durum",
+            cell: ({ row }: { row: { original: Setting } }) => (
+                <span
+                    className={`px-2 py-1 rounded-full text-xs ${row.original.is_active ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"
+                        }`}
+                >
+                    {row.original.is_active ? "Aktif" : "Pasif"}
+                </span>
+            ),
+        },
+        {
+            accessorKey: "UpdatedAt",
+            header: "Son Güncelleme",
+            cell: ({ row }: { row: { original: Setting } }) => {
+                return new Date(row.original.UpdatedAt).toLocaleDateString("tr-TR")
+            },
+        },
+        {
+            id: "actions",
+            cell: ({ row }: { row: { original: Setting } }) => {
+                const isDeleted = !!row.original.DeletedAt
+                return (
+                    <div className="flex gap-2 justify-end">
+                        {isDeleted ? (
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => handleRestore(row.original.ID)}
+                                className="h-8 w-8 p-0 text-green-600 hover:text-green-700 hover:bg-green-50"
+                                title="Geri Yükle"
+                            >
+                                <RotateCcw className="h-4 w-4" />
+                            </Button>
+                        ) : (
+                            <>
+                                <Button
+                                    variant="outline"
+                                    size="sm"
+                                    onClick={() => {
+                                        setSelectedSetting(row.original)
+                                        setDialogOpen(true)
+                                    }}
+                                    className="h-8 w-8 p-0"
+                                >
+                                    <Edit className="h-4 w-4" />
+                                </Button>
+                                <Button
+                                    variant="destructive"
+                                    size="sm"
+                                    onClick={() => handleDelete(row.original.ID)}
+                                    className="h-8 w-8 p-0"
+                                >
+                                    <Trash className="h-4 w-4" />
+                                </Button>
+                            </>
+                        )}
+                    </div>
+                )
+            },
+        },
+    ]
+
+    return (
+        <div className="p-8">
+            <div className="flex items-center justify-between mb-6">
+                <div>
+                    <h1 className="text-3xl font-bold tracking-tight">Site Ayarları</h1>
+                    <p className="text-muted-foreground">
+                        Genel site ayarlarını ve SEO yapılandırmalarını yönetin.
+                    </p>
+                </div>
+                <Button onClick={() => {
+                    setSelectedSetting(null)
+                    setDialogOpen(true)
+                }}>
+                    <Plus className="mr-2 h-4 w-4" /> Yeni Ayar
+                </Button>
+            </div>
+
+            <div className="flex items-center py-4 gap-4">
+                <Input
+                    placeholder="Başlık ara..."
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                    className="max-w-sm"
+                />
+                <Select value={statusFilter} onValueChange={setStatusFilter}>
+                    <SelectTrigger className="w-[180px]">
+                        <SelectValue placeholder="Durum" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="with">Tümü (Dahil)</SelectItem>
+                        <SelectItem value="active">Sadece Aktif</SelectItem>
+                        <SelectItem value="only">Sadece Silinenler</SelectItem>
+                    </SelectContent>
+                </Select>
+            </div>
+
+            <DataTable
+                columns={columns}
+                data={settings}
+                pageCount={Math.ceil(total / perPage)}
+                page={page}
+                onPageChange={setPage}
+            />
+
+            <SettingDialog
+                open={dialogOpen}
+                onOpenChange={setDialogOpen}
+                setting={selectedSetting}
+                onSuccess={fetchSettings}
+            />
+        </div>
+    )
+}

frontend/app/admin/tags/columns.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import { ColumnDef } from "@tanstack/react-table"
+import { Tag } from "@/types/tag"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { ArrowUpDown } from "lucide-react"
+import { DataTableRowActions } from "./tag-row-actions"
+
+export const getColumns = (onRefresh: () => void): ColumnDef<Tag>[] => [
+    {
+        accessorKey: "id",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    ID
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+    },
+    {
+        accessorKey: "name",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Tag Adı
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+    },
+    {
+        accessorKey: "deleted_at",
+        header: "Durum",
+        cell: ({ row }) => {
+            const deletedAt = row.original.deleted_at
+            return deletedAt ? (
+                <Badge variant="destructive">Silindi</Badge>
+            ) : (
+                <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">Aktif</Badge>
+            )
+        }
+    },
+    {
+        id: "actions",
+        cell: ({ row }) => <DataTableRowActions row={row} onRefresh={onRefresh} />,
+    },
+]

frontend/app/admin/tags/data-table.tsx

@@ -0,0 +1,91 @@
+"use client"
+
+import * as React from "react"
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+    SortingState,
+    getSortedRowModel,
+} from "@tanstack/react-table"
+
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[]
+    data: TData[]
+}
+
+export function DataTable<TData, TValue>({
+    columns,
+    data,
+}: DataTableProps<TData, TValue>) {
+    const [sorting, setSorting] = React.useState<SortingState>([])
+
+    // eslint-disable-next-line
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        onSortingChange: setSorting,
+        getSortedRowModel: getSortedRowModel(),
+        state: {
+            sorting,
+        },
+    })
+
+    return (
+        <div className="rounded-md border">
+            <Table>
+                <TableHeader>
+                    {table.getHeaderGroups().map((headerGroup) => (
+                        <TableRow key={headerGroup.id}>
+                            {headerGroup.headers.map((header) => {
+                                return (
+                                    <TableHead key={header.id}>
+                                        {header.isPlaceholder
+                                            ? null
+                                            : flexRender(
+                                                header.column.columnDef.header,
+                                                header.getContext()
+                                            )}
+                                    </TableHead>
+                                )
+                            })}
+                        </TableRow>
+                    ))}
+                </TableHeader>
+                <TableBody>
+                    {table.getRowModel().rows?.length ? (
+                        table.getRowModel().rows.map((row) => (
+                            <TableRow
+                                key={row.id}
+                                data-state={row.getIsSelected() && "selected"}
+                            >
+                                {row.getVisibleCells().map((cell) => (
+                                    <TableCell key={cell.id}>
+                                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                    </TableCell>
+                                ))}
+                            </TableRow>
+                        ))
+                    ) : (
+                        <TableRow>
+                            <TableCell colSpan={columns.length} className="h-24 text-center">
+                                Sonuç bulunamadı.
+                            </TableCell>
+                        </TableRow>
+                    )}
+                </TableBody>
+            </Table>
+        </div>
+    )
+}

frontend/app/admin/tags/page.tsx

@@ -0,0 +1,115 @@
+"use client"
+
+import { useEffect, useState, useCallback } from "react"
+import { DataTable } from "./data-table"
+import { getColumns } from "./columns"
+import { Tag } from "@/types/tag"
+import { tagService } from "@/services/tagService"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Plus } from "lucide-react"
+import { TagDialog } from "./tag-dialog"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select"
+
+export default function TagsPage() {
+    const [data, setData] = useState<Tag[]>([])
+    const [loading, setLoading] = useState(true)
+    const [page, setPage] = useState(1)
+    const [total, setTotal] = useState(0)
+    const [perPage] = useState(20)
+    const [search, setSearch] = useState("")
+    const [statusFilter, setStatusFilter] = useState("with") // "with" shows active + deleted
+    const [showCreateDialog, setShowCreateDialog] = useState(false)
+
+    const fetchData = useCallback(async () => {
+        setLoading(true)
+        try {
+            const apiSoftFilter = statusFilter === "active" ? "" : statusFilter
+            const res = await tagService.getTags(page, perPage, search, apiSoftFilter)
+            setData(res.items || [])
+            setTotal(res.total || 0)
+        } catch (error) {
+            console.error("Tags fetch error:", error)
+            setData([])
+        } finally {
+            setLoading(false)
+        }
+    }, [page, perPage, search, statusFilter])
+
+    useEffect(() => {
+        fetchData()
+    }, [fetchData])
+
+    const totalPages = Math.ceil(total / perPage)
+
+    return (
+        <div className="p-8">
+            <div className="flex items-center justify-between mb-6">
+                <div>
+                    <h1 className="text-3xl font-bold tracking-tight">Tag Yönetimi</h1>
+                    <p className="text-muted-foreground">
+                        Tagları oluşturun, düzenleyin veya silin.
+                    </p>
+                </div>
+                <Button onClick={() => setShowCreateDialog(true)}>
+                    <Plus className="mr-2 h-4 w-4" /> Yeni Tag
+                </Button>
+            </div>
+
+            <div className="flex items-center py-4 gap-4">
+                <Input
+                    placeholder="Tag ara..."
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                    className="max-w-sm"
+                />
+                <Select value={statusFilter} onValueChange={setStatusFilter}>
+                    <SelectTrigger className="w-[180px]">
+                        <SelectValue placeholder="Durum" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="with">Tümü (Tags)</SelectItem>
+                        <SelectItem value="active">Sadece Aktif</SelectItem>
+                        <SelectItem value="only">Sadece Silinenler</SelectItem>
+                    </SelectContent>
+                </Select>
+            </div>
+
+            <DataTable columns={getColumns(fetchData)} data={data} />
+
+            <div className="flex items-center justify-end space-x-2 py-4">
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setPage((old) => Math.max(old - 1, 1))}
+                    disabled={page === 1 || loading}
+                >
+                    Önceki
+                </Button>
+                <div className="text-sm text-muted-foreground">
+                    Sayfa {page} / {totalPages || 1}
+                </div>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setPage((old) => (data.length === perPage ? old + 1 : old))}
+                    disabled={page >= totalPages || loading}
+                >
+                    Sonraki
+                </Button>
+            </div>
+
+            <TagDialog
+                open={showCreateDialog}
+                onOpenChange={setShowCreateDialog}
+                onSuccess={fetchData}
+            />
+        </div>
+    )
+}

frontend/app/admin/tags/tag-dialog.tsx

@@ -0,0 +1,110 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import * as z from "zod"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Tag } from "@/types/tag"
+import { tagService } from "@/services/tagService"
+import { toast } from "sonner"
+
+const formSchema = z.object({
+    name: z.string().min(2, {
+        message: "Tag adı en az 2 karakter olmalıdır.",
+    }),
+})
+
+interface TagDialogProps {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    tag?: Tag | null // Editing if provided
+    onSuccess?: () => void
+}
+
+export function TagDialog({ open, onOpenChange, tag, onSuccess }: TagDialogProps) {
+    const [loading, setLoading] = useState(false)
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            name: "",
+        },
+    })
+
+    // Reset form when dialog opens or tag changes
+    useEffect(() => {
+        if (tag) {
+            form.reset({
+                name: tag.name,
+            })
+        } else {
+            form.reset({
+                name: "",
+            })
+        }
+    }, [tag, form, open])
+
+    const onSubmit = async (values: z.infer<typeof formSchema>) => {
+        setLoading(true)
+        try {
+            if (tag) {
+                await tagService.updateTag(tag.id, values.name)
+                toast.success("Tag başarıyla güncellendi")
+            } else {
+                await tagService.createTag(values.name)
+                toast.success("Tag başarıyla oluşturuldu")
+            }
+            onOpenChange(false)
+            if (onSuccess) {
+                onSuccess()
+            }
+        } catch (error: unknown) {
+            toast.error((error as Error).message || "Bir hata oluştu")
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                    <DialogTitle>{tag ? "Tag Düzenle" : "Yeni Tag Ekle"}</DialogTitle>
+                </DialogHeader>
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+                        <FormField
+                            control={form.control}
+                            name="name"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Tag Adı</FormLabel>
+                                    <FormControl>
+                                        <Input placeholder="Teknoloji" {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <DialogFooter>
+                            <Button type="submit" disabled={loading}>
+                                {loading ? "Kaydediliyor..." : "Kaydet"}
+                            </Button>
+                        </DialogFooter>
+                    </form>
+                </Form>
+            </DialogContent>
+        </Dialog>
+    )
+}

frontend/app/admin/tags/tag-row-actions.tsx

@@ -0,0 +1,141 @@
+"use client"
+
+import { useState } from "react"
+import { Row } from "@tanstack/react-table"
+import { MoreHorizontal, Pencil, Trash, RefreshCcw } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Tag } from "@/types/tag"
+import { tagService } from "@/services/tagService"
+import { TagDialog } from "./tag-dialog"
+import Swal from 'sweetalert2'
+import withReactContent from 'sweetalert2-react-content'
+
+const MySwal = withReactContent(Swal)
+
+interface DataTableRowActionsProps<TData> {
+    row: Row<TData>
+    onRefresh: () => void
+}
+
+export function DataTableRowActions<TData>({
+    row,
+    onRefresh,
+}: DataTableRowActionsProps<TData>) {
+    const tag = row.original as Tag
+    const [showEditDialog, setShowEditDialog] = useState(false)
+    const isDeleted = !!tag.deleted_at
+
+    const handleDelete = async () => {
+        const result = await MySwal.fire({
+            title: 'Emin misiniz?',
+            text: "Bu tag silinecek!",
+            icon: 'warning',
+            showCancelButton: true,
+            confirmButtonColor: '#3085d6',
+            cancelButtonColor: '#d33',
+            confirmButtonText: 'Evet, sil!',
+            cancelButtonText: 'İptal'
+        })
+
+        if (result.isConfirmed) {
+            try {
+                await tagService.deleteTag(tag.id)
+                MySwal.fire(
+                    'Silindi!',
+                    'Tag başarıyla silindi.',
+                    'success'
+                )
+                onRefresh()
+            } catch {
+                MySwal.fire(
+                    'Hata!',
+                    'Bir hata oluştu.',
+                    'error'
+                )
+            }
+        }
+    }
+
+    const handleRestore = async () => {
+        const result = await MySwal.fire({
+            title: 'Geri Yükle?',
+            text: "Bu tag geri yüklenecek!",
+            icon: 'question',
+            showCancelButton: true,
+            confirmButtonColor: '#3085d6',
+            cancelButtonColor: '#d33',
+            confirmButtonText: 'Evet, geri yükle!',
+            cancelButtonText: 'İptal'
+        })
+
+        if (result.isConfirmed) {
+            try {
+                await tagService.restoreTag(tag.id)
+                MySwal.fire(
+                    'Geri Yüklendi!',
+                    'Tag başarıyla geri yüklendi.',
+                    'success'
+                )
+                onRefresh()
+            } catch {
+                MySwal.fire(
+                    'Hata!',
+                    'Bir hata oluştu.',
+                    'error'
+                )
+            }
+        }
+    }
+
+    return (
+        <>
+            <TagDialog
+                open={showEditDialog}
+                onOpenChange={setShowEditDialog}
+                tag={tag}
+                onSuccess={onRefresh}
+            />
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" className="h-8 w-8 p-0">
+                        <span className="sr-only">Menü aç</span>
+                        <MoreHorizontal className="h-4 w-4" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                    <DropdownMenuLabel>İşlemler</DropdownMenuLabel>
+                    <DropdownMenuItem
+                        onClick={() => navigator.clipboard.writeText(tag.id.toString())}
+                    >
+                        Tag ID Kopyala
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+
+                    {!isDeleted && (
+                        <DropdownMenuItem onClick={() => setShowEditDialog(true)}>
+                            <Pencil className="mr-2 h-4 w-4" /> Düzenle
+                        </DropdownMenuItem>
+                    )}
+
+                    {isDeleted ? (
+                        <DropdownMenuItem onClick={handleRestore}>
+                            <RefreshCcw className="mr-2 h-4 w-4 text-green-600" /> Geri Yükle
+                        </DropdownMenuItem>
+                    ) : (
+                        <DropdownMenuItem onClick={handleDelete} className="text-red-600">
+                            <Trash className="mr-2 h-4 w-4" /> Sil
+                        </DropdownMenuItem>
+                    )}
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </>
+    )
+}

frontend/app/admin/users/columns.tsx

@@ -0,0 +1,94 @@
+"use client"
+
+import { ColumnDef, HeaderContext, CellContext } from "@tanstack/react-table"
+import { User } from "@/types/user"
+import { Badge } from "@/components/ui/badge"
+import { Check, X } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { ArrowUpDown } from "lucide-react"
+
+// Actions cell component will be added later or inline if simple
+import { DataTableRowActions } from "./user-row-actions"
+
+export const getColumns = (onRefresh: () => void): ColumnDef<User>[] => [
+    {
+        accessorKey: "id",
+        header: ({ column }: HeaderContext<User, unknown>) => {
+            return (
+                <Button
+                    variant="ghost"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    ID
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+    },
+    {
+        accessorKey: "username",
+        header: ({ column }: HeaderContext<User, unknown>) => {
+            return (
+                <Button
+                    variant="ghost"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Kullanıcı Adı
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+    },
+    {
+        accessorKey: "email",
+        header: ({ column }: HeaderContext<User, unknown>) => {
+            return (
+                <Button
+                    variant="ghost"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Email
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+    },
+    {
+        accessorKey: "email_verified",
+        header: "Doğrulandı",
+        cell: ({ row }: CellContext<User, unknown>) => {
+            return row.getValue("email_verified") ? (
+                <Badge variant="secondary" className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300"><Check className="w-3 h-3 mr-1" /> Evet</Badge>
+            ) : (
+                <Badge variant="outline" className="text-gray-500"><X className="w-3 h-3 mr-1" /> Hayır</Badge>
+            )
+        },
+    },
+    {
+        accessorKey: "deleted_at",
+        header: "Durum",
+        cell: ({ row }) => {
+            const deletedAt = row.original.deleted_at
+            return deletedAt ? (
+                <Badge variant="destructive">Silindi</Badge>
+            ) : (
+                <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">Aktif</Badge>
+            )
+        }
+    },
+    {
+        accessorKey: "is_admin",
+        header: "Rol",
+        cell: ({ row }: CellContext<User, unknown>) => {
+            return row.getValue("is_admin") ? (
+                <Badge variant="default">Admin</Badge>
+            ) : (
+                <Badge variant="secondary">User</Badge>
+            )
+        },
+    },
+    {
+        id: "actions",
+        cell: ({ row }: CellContext<User, unknown>) => <DataTableRowActions row={row} onRefresh={onRefresh} />,
+    },
+]

frontend/app/admin/users/data-table.tsx

@@ -0,0 +1,100 @@
+"use client"
+
+import * as React from "react"
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+    SortingState,
+    getSortedRowModel,
+    HeaderGroup,
+    Header,
+    Row,
+    Cell
+} from "@tanstack/react-table"
+
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[]
+    data: TData[]
+}
+
+export function DataTable<TData, TValue>({
+    columns,
+    data,
+}: DataTableProps<TData, TValue>) {
+    const [sorting, setSorting] = React.useState<SortingState>([])
+
+    // eslint-disable-next-line react-hooks/incompatible-library
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        // Pagination is handled server-side in the main page, so we don't strictly need client-side pagination here
+        // unless we mix both. For now, let's keep it simple and just render rows.
+        // If we pass 20 items, it renders 20 items.
+        // getPaginationRowModel: getPaginationRowModel(),
+        onSortingChange: setSorting,
+        getSortedRowModel: getSortedRowModel(),
+        state: {
+            sorting,
+        },
+        manualPagination: true, // Tell table we handle pagination manually
+    })
+
+    return (
+        <div className="rounded-md border">
+            <Table>
+                <TableHeader>
+                    {table.getHeaderGroups().map((headerGroup: HeaderGroup<TData>) => (
+                        <TableRow key={headerGroup.id}>
+                            {headerGroup.headers.map((header: Header<TData, unknown>) => {
+                                return (
+                                    <TableHead key={header.id}>
+                                        {header.isPlaceholder
+                                            ? null
+                                            : flexRender(
+                                                header.column.columnDef.header,
+                                                header.getContext()
+                                            )}
+                                    </TableHead>
+                                )
+                            })}
+                        </TableRow>
+                    ))}
+                </TableHeader>
+                <TableBody>
+                    {table.getRowModel().rows?.length ? (
+                        table.getRowModel().rows.map((row: Row<TData>) => (
+                            <TableRow
+                                key={row.id}
+                                data-state={row.getIsSelected() && "selected"}
+                            >
+                                {row.getVisibleCells().map((cell: Cell<TData, unknown>) => (
+                                    <TableCell key={cell.id}>
+                                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                    </TableCell>
+                                ))}
+                            </TableRow>
+                        ))
+                    ) : (
+                        <TableRow>
+                            <TableCell colSpan={columns.length} className="h-24 text-center">
+                                Sonuç bulunamadı.
+                            </TableCell>
+                        </TableRow>
+                    )}
+                </TableBody>
+            </Table>
+        </div>
+    )
+}

frontend/app/admin/users/page.tsx

@@ -0,0 +1,151 @@
+"use client"
+
+import * as React from "react"
+import { useEffect, useState, Suspense } from "react"
+import { useSession } from "next-auth/react"
+import { useRouter, useSearchParams } from "next/navigation"
+import { getColumns } from "./columns"
+import { DataTable } from "./data-table"
+import { User } from "@/types/user"
+import { userService } from "@/services/userService"
+import { Button } from "@/components/ui/button"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Loader2 } from "lucide-react"
+
+function UsersPageContent() {
+    const { data: session, status } = useSession()
+    const router = useRouter()
+    const searchParams = useSearchParams()
+
+    const [data, setData] = useState<User[]>([])
+    const [total, setTotal] = useState(0)
+    const [loading, setLoading] = useState(true)
+    const [error, setError] = useState<string | null>(null)
+
+    // Filters
+    const page = Number(searchParams.get("page")) || 1
+    const perPage = Number(searchParams.get("per_page")) || 20
+    const soft = searchParams.get("soft") || "" // "", "only", "with"
+
+    const fetchData = React.useCallback(async () => {
+        if (!session?.user?.accessToken) {
+            setLoading(false)
+            return
+        }
+        setLoading(true)
+        setError(null)
+        try {
+            const response = await userService.getUsers(session.user.accessToken, page, perPage, soft)
+            setData(response.items || [])
+            setTotal(response.total)
+        } catch (error) {
+            console.error("Failed to fetch users:", error)
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            setError((error as any).message || "Kullanıcılar getirilirken bir hata oluştu")
+            setData([])
+        } finally {
+            setLoading(false)
+        }
+    }, [session, page, perPage, soft])
+
+    useEffect(() => {
+        if (status === "loading") return
+
+        if (status === "unauthenticated" || !session?.user?.accessToken) {
+            setLoading(false)
+            return
+        }
+
+        fetchData()
+    }, [fetchData, status, session])
+
+    const columns = React.useMemo(() => getColumns(fetchData), [fetchData])
+
+    const handleFilterChange = (value: string) => {
+        const params = new URLSearchParams(searchParams.toString())
+        if (value && value !== "active") {
+            params.set("soft", value)
+        } else {
+            params.delete("soft")
+        }
+        params.set("page", "1")
+        router.push(`/admin/users?${params.toString()}`)
+    }
+
+    const handlePageChange = (newPage: number) => {
+        const params = new URLSearchParams(searchParams.toString())
+        params.set("page", newPage.toString())
+        router.push(`/admin/users?${params.toString()}`)
+    }
+
+    const totalPages = Math.ceil(total / perPage)
+
+    return (
+        <div className="container mx-auto py-10">
+            <div className="flex items-center justify-between mb-6">
+                <h1 className="text-3xl font-bold tracking-tight">Kullanıcı Yönetimi</h1>
+                <div className="flex gap-4">
+                    <Select
+                        value={soft || "active"}
+                        onValueChange={handleFilterChange}
+                    >
+                        <SelectTrigger className="w-[180px]">
+                            <SelectValue placeholder="Durum Seç" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="active">Aktif Kullanıcılar</SelectItem>
+                            <SelectItem value="only">Silinmişler (Çöp Kutusu)</SelectItem>
+                            <SelectItem value="with">Tümü (Aktif + Silinmiş)</SelectItem>
+                        </SelectContent>
+                    </Select>
+                </div>
+            </div>
+
+            {error && (
+                <div className="bg-destructive/15 text-destructive p-4 rounded-md mb-6">
+                    Hata: {error}
+                </div>
+            )}
+
+            {loading && data.length === 0 ? (
+                <div className="flex justify-center items-center h-64">
+                    <Loader2 className="h-8 w-8 animate-spin" />
+                </div>
+            ) : (
+                <>
+                    <DataTable columns={columns} data={data} />
+                    {/* Pagination Controls */}
+                    <div className="flex items-center justify-end space-x-2 py-4">
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => handlePageChange(page - 1)}
+                            disabled={page <= 1}
+                        >
+                            Önceki
+                        </Button>
+                        <div className="text-sm">
+                            Sayfa {page} / {totalPages || 1}
+                        </div>
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => handlePageChange(page + 1)}
+                            disabled={page >= totalPages}
+                        >
+                            Sonraki
+                        </Button>
+                    </div>
+                </>
+            )}
+        </div>
+    )
+}
+
+export default function UsersPage() {
+    return (
+        <Suspense fallback={<div className="flex justify-center p-10"><Loader2 className="h-8 w-8 animate-spin" /></div>}>
+            <UsersPageContent />
+        </Suspense>
+    )
+}

frontend/app/admin/users/user-dialog.tsx

@@ -0,0 +1,123 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { User, UserPayload } from "@/types/user"
+import { useState } from "react"
+import { userService } from "@/services/userService"
+import { useSession } from "next-auth/react"
+import { toast } from "sonner"
+import { useRouter } from "next/navigation"
+
+interface UserDialogProps {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    user: User
+    onSuccess?: () => void
+}
+
+export function UserDialog({ open, onOpenChange, user, onSuccess }: UserDialogProps) {
+    const { data: session } = useSession()
+    const router = useRouter()
+    const [loading, setLoading] = useState(false)
+    const [formData, setFormData] = useState<UserPayload>({
+        username: user.username,
+        email: user.email,
+        is_admin: user.is_admin,
+        password: "",
+    })
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault()
+        if (!session?.user?.accessToken) return
+
+        setLoading(true)
+        try {
+            // Create a payload copy to manipulate
+            const payload = { ...formData }
+            // Remove password if it's empty so we don't overwrite with empty string
+            if (!payload.password || payload.password.trim() === "") {
+                delete payload.password
+            }
+
+            await userService.updateUser(session.user.accessToken, user.id, payload)
+            toast.success("Kullanıcı güncellendi")
+            onOpenChange(false)
+            if (onSuccess) onSuccess() // Trigger parent refresh
+            router.refresh()
+        } catch (error) {
+            toast.error("Kullanıcı güncellenirken bir hata oluştu")
+            console.error(error)
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                    <DialogTitle>Kullanıcı Düzenle</DialogTitle>
+                    <DialogDescription>
+                        Kullanıcı bilgilerini buradan güncelleyebilirsiniz. Şifre alanını boş bırakırsanız değişmez.
+                    </DialogDescription>
+                </DialogHeader>
+                <form onSubmit={handleSubmit}>
+                    <div className="grid gap-4 py-4">
+                        <div className="grid grid-cols-4 items-center gap-4">
+                            <Label htmlFor="username" className="text-right">
+                                Kullanıcı Adı
+                            </Label>
+                            <Input
+                                id="username"
+                                value={formData.username}
+                                onChange={(e) => setFormData({ ...formData, username: e.target.value })}
+                                className="col-span-3"
+                            />
+                        </div>
+                        <div className="grid grid-cols-4 items-center gap-4">
+                            <Label htmlFor="email" className="text-right">
+                                Email
+                            </Label>
+                            <Input
+                                id="email"
+                                type="email"
+                                value={formData.email}
+                                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                                className="col-span-3"
+                            />
+                        </div>
+                        <div className="grid grid-cols-4 items-center gap-4">
+                            <Label htmlFor="password" className="text-right">
+                                Yeni Şifre
+                            </Label>
+                            <Input
+                                id="password"
+                                type="password"
+                                placeholder="Değişmeyecekse boş bırakın"
+                                value={formData.password || ""}
+                                onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+                                className="col-span-3"
+                            />
+                        </div>
+                        {/* Admin role toggle could be added here if needed */}
+                    </div>
+                    <DialogFooter>
+                        <Button type="submit" disabled={loading}>
+                            {loading ? "Kaydediliyor..." : "Kaydet"}
+                        </Button>
+                    </DialogFooter>
+                </form>
+            </DialogContent>
+        </Dialog>
+    )
+}

frontend/app/admin/users/user-row-actions.tsx

@@ -0,0 +1,132 @@
+import { Row } from "@tanstack/react-table"
+import { MoreHorizontal, Pen, Trash, RotateCcw } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { User } from "@/types/user"
+import { useState } from "react"
+import { UserDialog } from "./user-dialog"
+import { userService } from "@/services/userService"
+import { useSession } from "next-auth/react"
+import { toast } from "sonner"
+import { useRouter } from "next/navigation"
+import Swal from 'sweetalert2'
+import withReactContent from 'sweetalert2-react-content'
+
+const MySwal = withReactContent(Swal)
+
+interface DataTableRowActionsProps<TData> {
+    row: Row<TData>
+    onRefresh: () => void
+}
+
+export function DataTableRowActions<TData extends User>({
+    row,
+    onRefresh,
+}: DataTableRowActionsProps<TData>) {
+    const user = row.original as User
+    const [showEditDialog, setShowEditDialog] = useState(false)
+    const { data: session } = useSession()
+    const router = useRouter()
+
+    const handleDelete = async () => {
+        if (!session?.user?.accessToken) return
+
+        const result = await MySwal.fire({
+            title: 'Emin misiniz?',
+            text: "Bu kullanıcıyı silmek istediğinize emin misiniz? Bu işlem geri alınabilir (Soft Delete).",
+            icon: 'warning',
+            showCancelButton: true,
+            confirmButtonColor: '#d33',
+            cancelButtonColor: '#3085d6',
+            confirmButtonText: 'Evet, Sil!',
+            cancelButtonText: 'İptal'
+        })
+
+        if (!result.isConfirmed) return
+
+        try {
+            await userService.deleteUser(session.user.accessToken, user.id)
+            MySwal.fire(
+                'Silindi!',
+                'Kullanıcı başarıyla silindi.',
+                'success'
+            )
+            onRefresh()
+            router.refresh()
+        } catch (error) {
+            toast.error("Kullanıcı silinirken bir hata oluştu")
+            console.error(error)
+        }
+    }
+
+    const handleRestore = async () => {
+        if (!session?.user?.accessToken) return
+
+        const result = await MySwal.fire({
+            title: 'Geri Yükle?',
+            text: "Bu kullanıcıyı geri yüklemek istediğinize emin misiniz?",
+            icon: 'question',
+            showCancelButton: true,
+            confirmButtonColor: '#3085d6',
+            cancelButtonColor: '#d33',
+            confirmButtonText: 'Evet, Geri Yükle!',
+            cancelButtonText: 'İptal'
+        })
+
+        if (!result.isConfirmed) return
+
+        try {
+            await userService.restoreUser(session.user.accessToken, user.id)
+            MySwal.fire(
+                'Geri Yüklendi!',
+                'Kullanıcı başarıyla geri yüklendi.',
+                'success'
+            )
+            onRefresh()
+            router.refresh()
+        } catch (error) {
+            toast.error("Kullanıcı geri yüklenirken bir hata oluştu")
+            console.error(error)
+        }
+    }
+
+    return (
+        <>
+            <UserDialog
+                open={showEditDialog}
+                onOpenChange={setShowEditDialog}
+                user={user}
+                onSuccess={onRefresh} // Trigger refresh on success
+            />
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" className="h-8 w-8 p-0">
+                        <span className="sr-only">Menü aç</span>
+                        <MoreHorizontal className="h-4 w-4" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                    <DropdownMenuItem onClick={() => setShowEditDialog(true)}>
+                        <Pen className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+                        Düzenle
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem onClick={handleDelete} className="text-red-600">
+                        <Trash className="mr-2 h-3.5 w-3.5" />
+                        Sil
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={handleRestore}>
+                        <RotateCcw className="mr-2 h-3.5 w-3.5" />
+                        Geri Yükle
+                    </DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </>
+    )
+}

frontend/app/api/admin/heroes/[id]/route.ts

@@ -0,0 +1,10 @@
+import { NextRequest } from "next/server"
+import { handleImageProxyRequest } from "@/lib/api-proxy"
+
+export async function PUT(
+    req: NextRequest,
+    context: { params: Promise<{ id: string }> }
+) {
+    const { id } = await context.params
+    return handleImageProxyRequest(req, `/admin/heroes/${id}`)
+}

frontend/app/api/admin/heroes/route.ts

@@ -0,0 +1,6 @@
+import { NextRequest } from "next/server"
+import { handleImageProxyRequest } from "@/lib/api-proxy"
+
+export async function POST(req: NextRequest) {
+    return handleImageProxyRequest(req, "/admin/heroes")
+}

frontend/app/api/admin/posts/[id]/route.ts

@@ -0,0 +1,11 @@
+import { NextRequest } from "next/server";
+import { handleImageProxyRequest } from "@/lib/api-proxy";
+
+export async function PUT(
+    req: NextRequest,
+    context: { params: Promise<{ id: string }> }
+) {
+    const { id } = await context.params;
+    console.log("API Route PUT called with id:", id);
+    return handleImageProxyRequest(req, `/admin/posts/${id}`);
+}

frontend/app/api/admin/posts/route.ts

@@ -0,0 +1,6 @@
+import { NextRequest } from "next/server";
+import { handleImageProxyRequest } from "@/lib/api-proxy";
+
+export async function POST(req: NextRequest) {
+    return handleImageProxyRequest(req, "/admin/posts");
+}

frontend/app/api/admin/settings/[id]/route.ts

@@ -0,0 +1,10 @@
+import { NextRequest } from "next/server"
+import { handleImageProxyRequest } from "@/lib/api-proxy"
+
+export async function PUT(
+    req: NextRequest,
+    context: { params: Promise<{ id: string }> }
+) {
+    const { id } = await context.params
+    return handleImageProxyRequest(req, `/admin/settings/${id}`)
+}

frontend/app/api/admin/settings/route.ts

@@ -0,0 +1,6 @@
+import { NextRequest } from "next/server"
+import { handleImageProxyRequest } from "@/lib/api-proxy"
+
+export async function POST(req: NextRequest) {
+    return handleImageProxyRequest(req, "/admin/settings")
+}

frontend/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,187 @@
+import NextAuth, { NextAuthOptions } from "next-auth";
+import CredentialsProvider from "next-auth/providers/credentials";
+import GitHubProvider from "next-auth/providers/github";
+import GoogleProvider from "next-auth/providers/google";
+import { JWT } from "next-auth/jwt";
+
+// Helper to get API URL consistently
+const API_URL = process.env.NEXT_PUBLIC_API_URL || process.env.BASE_API_URL || "http://localhost:8080/api";
+
+/**
+ * Refresh token ile yeni access token al
+ */
+async function refreshAccessToken(token: JWT) {
+    try {
+        const response = await fetch(`${API_URL}/api/v1/auth/refresh`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+                refresh_token: token.refreshToken,
+            }),
+        });
+
+        if (!response.ok) {
+            throw new Error("Failed to refresh token");
+        }
+
+        const refreshedTokens = await response.json();
+
+        return {
+            ...token,
+            accessToken: refreshedTokens.access_token,
+            refreshToken: refreshedTokens.refresh_token ?? token.refreshToken,
+            accessTokenExpires: Date.now() + 15 * 60 * 1000, // 15 dakika (Time should ideally come from backend)
+        };
+    } catch (error) {
+        console.error("Error refreshing access token:", error);
+        return {
+            ...token,
+            error: "RefreshAccessTokenError",
+        };
+    }
+}
+
+const authOptions: NextAuthOptions = {
+    providers: [
+        CredentialsProvider({
+            name: "Credentials",
+            credentials: {
+                email: { label: "Email", type: "email" },
+                password: { label: "Password", type: "password" },
+                // Optional: used if redirecting from a separate auth flow
+                accessToken: { label: "Access Token", type: "text" },
+                refreshToken: { label: "Refresh Token", type: "text" },
+            },
+            async authorize(credentials) {
+                // 1. External Token Flow (if tokens are passed directly, e.g. from OAuth on backend)
+                if (credentials?.accessToken && credentials?.refreshToken) {
+                    try {
+                        // Validate token and get user info
+                        const meResponse = await fetch(`${API_URL}/api/v1/auth/me`, {
+                            headers: {
+                                "Authorization": `Bearer ${credentials.accessToken}`,
+                            },
+                        });
+
+                        if (!meResponse.ok) return null;
+
+                        const userData = await meResponse.json();
+
+                        return {
+                            id: userData.id?.toString(),
+                            email: userData.email,
+                            name: userData.username,
+                            username: userData.username, // Added to satisfy User interface
+                            is_admin: userData.is_admin, // Capture is_admin
+                            accessToken: credentials.accessToken,
+                            refreshToken: credentials.refreshToken,
+                            accessTokenExpires: Date.now() + 15 * 60 * 1000,
+                        };
+                    } catch {
+                        return null;
+                    }
+                }
+
+                // 2. Standard Email/Password Flow
+                if (!credentials?.email || !credentials?.password) {
+                    return null;
+                }
+
+                try {
+                    const response = await fetch(`${API_URL}/api/v1/auth/login`, {
+                        method: "POST",
+                        headers: {
+                            "Content-Type": "application/json",
+                        },
+                        body: JSON.stringify({
+                            email: credentials.email,
+                            password: credentials.password,
+                        }),
+                    });
+
+                    if (!response.ok) {
+                        return null;
+                    }
+
+                    const data = await response.json();
+
+                    // Structure matches user's provided JSON example
+                    return {
+                        id: data.user.id.toString(),
+                        email: data.user.email,
+                        name: data.user.username,
+                        username: data.user.username, // Added to satisfy User interface
+                        is_admin: data.user.is_admin, // Capture is_admin
+                        accessToken: data.access_token,
+                        refreshToken: data.refresh_token,
+                        accessTokenExpires: Date.now() + 15 * 60 * 1000,
+                    };
+                } catch (error) {
+                    console.error("Login error:", error);
+                    return null;
+                }
+            },
+        }),
+        // Keep existing providers if they are configured
+        GitHubProvider({
+            clientId: process.env.GITHUB_CLIENT_ID || "",
+            clientSecret: process.env.GITHUB_CLIENT_SECRET || "",
+        }),
+        GoogleProvider({
+            clientId: process.env.GOOGLE_CLIENT_ID || "",
+            clientSecret: process.env.GOOGLE_CLIENT_SECRET || "",
+        }),
+    ],
+    pages: {
+        signIn: "/auth/login",
+        signOut: "/auth/login",
+        error: "/auth/login",
+    },
+    callbacks: {
+        async jwt({ token, user }) {
+            // Initial sign in
+            if (user) {
+                token.id = user.id;
+                token.email = user.email;
+                token.name = user.name || undefined;
+                token.username = user.username;
+                token.accessToken = user.accessToken;
+                token.refreshToken = user.refreshToken;
+                token.roles = user.roles;
+                token.is_admin = user.is_admin;
+                token.accessTokenExpires = user.accessTokenExpires;
+            }
+
+            // Return previous token if the access token has not expired yet
+            if (Date.now() < (token.accessTokenExpires as number)) {
+                return token;
+            }
+
+            // Access token has expired, try to update it
+            return refreshAccessToken(token);
+        },
+        async session({ session, token }) {
+            if (token) {
+                session.user.id = token.id as string;
+                session.user.email = token.email as string;
+                session.user.name = token.name as string;
+                session.user.username = token.username as string;
+                session.user.is_admin = token.is_admin as boolean; // Expose is_admin to session
+                session.accessToken = token.accessToken as string;
+                session.user.accessToken = token.accessToken as string;
+                session.error = token.error as string;
+            }
+            return session;
+        },
+    },
+    session: {
+        strategy: "jwt",
+    },
+    secret: process.env.NEXTAUTH_SECRET, // Ensure this matches .env
+};
+
+const handler = NextAuth(authOptions);
+
+export { handler as GET, handler as POST };

frontend/app/auth/login/page.tsx

@@ -0,0 +1,156 @@
+"use client"
+
+import React, { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { loginSchema, LoginInput } from '@/lib/auth-schema'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { Label } from '@/components/ui/label'
+import { Turnstile } from 'nextjs-turnstile'
+import { signIn } from 'next-auth/react'
+import Swal from 'sweetalert2'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+
+const LoginPage = () => {
+  const [isLoading, setIsLoading] = useState(false)
+  const [turnstileToken, setTurnstileToken] = useState<string | null>(null)
+  const router = useRouter()
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<LoginInput>({
+    resolver: zodResolver(loginSchema),
+  })
+
+  const siteKey = process.env.NEXT_PUBLIC_TURNSTILE_SITEKEY
+
+  const onSubmit = async (data: LoginInput) => {
+    if (siteKey && !turnstileToken) {
+      Swal.fire({
+        icon: 'warning',
+        title: 'Güvenlik Doğrulaması',
+        text: 'Lütfen robot olmadığınızı doğrulayın.',
+      })
+      return
+    }
+
+    setIsLoading(true)
+
+    try {
+      const result = await signIn('credentials', {
+        redirect: false,
+        email: data.email,
+        password: data.password,
+      })
+
+      if (result?.error) {
+        throw new Error(result.error)
+      }
+
+      if (result?.ok) {
+        Swal.fire({
+          icon: 'success',
+          title: 'Giriş Başarılı',
+          text: 'Yönlendiriliyorsunuz...',
+          timer: 1500,
+          showConfirmButton: false,
+        }).then(() => {
+          const callbackUrl = new URLSearchParams(window.location.search).get("callbackUrl") || "/"
+          router.push(callbackUrl)
+          router.refresh()
+        })
+      }
+
+    } catch {
+      Swal.fire({
+        icon: 'error',
+        title: 'Giriş Başarısız',
+        text: 'E-posta veya şifre hatalı olabilir.',
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-100 p-4 dark:bg-gray-900">
+      <Card className="w-full max-w-md shadow-xl">
+        <CardHeader className="space-y-1">
+          <CardTitle className="text-2xl font-bold text-center">Giriş Yap</CardTitle>
+          <CardDescription className="text-center">
+            Hesabınıza erişmek için bilgilerinizi girin
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="email">E-posta</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="ornek@domain.com"
+                {...register('email')}
+                className={errors.email ? 'border-red-500' : ''}
+              />
+              {errors.email && (
+                <p className="text-sm text-red-500">{errors.email.message}</p>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="password">Şifre</Label>
+                <Link
+                  href="/auth/forgot-password"
+                  className="text-sm text-blue-600 hover:underline"
+                >
+                  Şifremi Unuttum?
+                </Link>
+              </div>
+              <Input
+                id="password"
+                type="password"
+                placeholder="********"
+                {...register('password')}
+                className={errors.password ? 'border-red-500' : ''}
+              />
+              {errors.password && (
+                <p className="text-sm text-red-500">{errors.password.message}</p>
+              )}
+            </div>
+
+            {siteKey && (
+              <div className="flex justify-center my-4">
+                <Turnstile
+                  siteKey={siteKey}
+                  onSuccess={(token) => setTurnstileToken(token)}
+                  onError={() => setTurnstileToken(null)}
+                  onExpire={() => setTurnstileToken(null)}
+                />
+              </div>
+            )}
+
+            <Button type="submit" className="w-full" disabled={isLoading}>
+              {isLoading ? 'Giriş Yapılıyor...' : 'Giriş Yap'}
+            </Button>
+          </form>
+        </CardContent>
+        <CardFooter className="justify-center">
+          <p className="text-sm text-gray-500">
+            Hesabınız yok mu?{' '}
+            <Link href="/auth/register" className="text-blue-600 hover:underline">
+              Kayıt Ol
+            </Link>
+          </p>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}
+
+export default LoginPage

frontend/app/auth/register/page.tsx

@@ -0,0 +1,176 @@
+"use client"
+
+import React, { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { registerSchema, RegisterInput } from '@/lib/auth-schema'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { Label } from '@/components/ui/label'
+import Link from 'next/link'
+import Swal from 'sweetalert2'
+import { Turnstile } from 'nextjs-turnstile'
+import { useRouter } from 'next/navigation'
+
+const RegisterPage = () => {
+    const [isLoading, setIsLoading] = useState(false)
+    const [turnstileToken, setTurnstileToken] = useState<string | null>(null)
+    const router = useRouter()
+    const siteKey = process.env.NEXT_PUBLIC_TURNSTILE_SITEKEY
+
+    const {
+        register,
+        handleSubmit,
+        formState: { errors },
+    } = useForm<RegisterInput>({
+        resolver: zodResolver(registerSchema),
+    })
+
+    const onSubmit = async (data: RegisterInput) => {
+        if (siteKey && !turnstileToken) {
+            Swal.fire({
+                icon: 'warning',
+                title: 'Güvenlik Doğrulaması',
+                text: 'Lütfen robot olmadığınızı doğrulayın.',
+            })
+            return
+        }
+
+        setIsLoading(true)
+        try {
+            const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/auth/register`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    username: data.username,
+                    email: data.email,
+                    password: data.password
+                }),
+            })
+
+            const result = await response.json()
+
+            if (!response.ok) {
+                throw new Error(result.error || result.message || 'Kayıt işlemi başarısız oldu.')
+            }
+
+            Swal.fire({
+                title: 'Başarılı!',
+                text: 'Kayıt işlemi başarıyla tamamlandı. Lütfen e-posta adresinizi doğrulayın.',
+                icon: 'success',
+                confirmButtonText: 'Giriş Yap',
+            }).then(() => {
+                router.push('/auth/login')
+            })
+
+        } catch (error: any) { // eslint-disable-line @typescript-eslint/no-explicit-any
+            Swal.fire({
+                title: 'Hata!',
+                text: error.message || 'Bir sorun oluştu.',
+                icon: 'error',
+                confirmButtonText: 'Tamam',
+            })
+        } finally {
+            setIsLoading(false)
+        }
+    }
+
+    return (
+        <div className="flex min-h-screen items-center justify-center bg-gray-100 p-4 dark:bg-gray-900">
+            <Card className="w-full max-w-md shadow-xl">
+                <CardHeader className="space-y-1">
+                    <CardTitle className="text-2xl font-bold text-center">Kayıt Ol</CardTitle>
+                    <CardDescription className="text-center">
+                        Yeni bir hesap oluşturmak için bilgilerinizi girin
+                    </CardDescription>
+                </CardHeader>
+                <CardContent>
+                    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+                        <div className="space-y-2">
+                            <Label htmlFor="username">Kullanıcı Adı</Label>
+                            <Input
+                                id="username"
+                                placeholder="johndoe"
+                                {...register('username')}
+                                className={errors.username ? 'border-red-500' : ''}
+                            />
+                            {errors.username && (
+                                <p className="text-sm text-red-500">{errors.username.message}</p>
+                            )}
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label htmlFor="email">E-posta</Label>
+                            <Input
+                                id="email"
+                                type="email"
+                                placeholder="ornek@domain.com"
+                                {...register('email')}
+                                className={errors.email ? 'border-red-500' : ''}
+                            />
+                            {errors.email && (
+                                <p className="text-sm text-red-500">{errors.email.message}</p>
+                            )}
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label htmlFor="password">Şifre</Label>
+                            <Input
+                                id="password"
+                                type="password"
+                                placeholder="********"
+                                {...register('password')}
+                                className={errors.password ? 'border-red-500' : ''}
+                            />
+                            {errors.password && (
+                                <p className="text-sm text-red-500">{errors.password.message}</p>
+                            )}
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label htmlFor="confirmPassword">Şifre Tekrar</Label>
+                            <Input
+                                id="confirmPassword"
+                                type="password"
+                                placeholder="********"
+                                {...register('confirmPassword')}
+                                className={errors.confirmPassword ? 'border-red-500' : ''}
+                            />
+                            {errors.confirmPassword && (
+                                <p className="text-sm text-red-500">{errors.confirmPassword.message}</p>
+                            )}
+                        </div>
+
+                        {siteKey && (
+                            <div className="flex justify-center my-4">
+                                <Turnstile
+                                    siteKey={siteKey}
+                                    onSuccess={(token) => setTurnstileToken(token)}
+                                    onError={() => setTurnstileToken(null)}
+                                    onExpire={() => setTurnstileToken(null)}
+                                />
+                            </div>
+                        )}
+
+                        <Button type="submit" className="w-full" disabled={isLoading}>
+                            {isLoading ? 'Kaydediliyor...' : 'Kayıt Ol'}
+                        </Button>
+                    </form>
+                </CardContent>
+                <CardFooter className="justify-center">
+                    <p className="text-sm text-gray-500">
+                        Zaten hesabınız var mı?{' '}
+                        <Link href="/auth/login" className="text-blue-600 hover:underline">
+                            Giriş Yap
+                        </Link>
+                    </p>
+                </CardFooter>
+            </Card>
+        </div>
+    )
+}
+
+export default RegisterPage

frontend/app/auth/verify-email/page.tsx

@@ -0,0 +1,126 @@
+"use client"
+
+import React, { useEffect, useState, Suspense } from 'react'
+import { useSearchParams } from 'next/navigation'
+import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Loader2, CheckCircle2, XCircle, AlertCircle } from 'lucide-react'
+import Link from 'next/link'
+
+const VerifyEmailContent = () => {
+    const searchParams = useSearchParams()
+    const token = searchParams.get('token')
+    const [status, setStatus] = useState<'loading' | 'success' | 'error' | 'invalid'>(token ? 'loading' : 'invalid')
+    const [message, setMessage] = useState('')
+
+    useEffect(() => {
+        if (!token) {
+            return
+        }
+
+        const verifyEmail = async () => {
+            try {
+                const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080'
+                const response = await fetch(`${apiUrl}/api/v1/auth/verify-email?token=${token}`, {
+                    method: 'GET',
+                    headers: {
+                        'Accept': 'application/json'
+                    }
+                })
+
+                // Backend responses might modify status
+                const data = await response.json().catch(() => ({}))
+
+                if (response.ok) {
+                    setStatus('success')
+                    setMessage(data.message || 'E-posta adresiniz başarıyla doğrulandı.')
+                } else {
+                    setStatus('error')
+                    setMessage(data.error || data.message || 'Doğrulama işlemi başarısız oldu. Link süresi dolmuş veya geçersiz olabilir.')
+                }
+            } catch {
+                setStatus('error')
+                setMessage('Sunucu ile iletişim kurulurken bir hata oluştu.')
+            }
+        }
+
+        verifyEmail()
+    }, [token])
+
+    return (
+        <Card className="w-full max-w-md shadow-xl">
+            <CardHeader className="space-y-1">
+                <CardTitle className="text-2xl font-bold text-center">E-posta Doğrulama</CardTitle>
+                <CardDescription className="text-center">
+                    Hesap aktivasyon durumu
+                </CardDescription>
+            </CardHeader>
+            <CardContent className="flex flex-col items-center justify-center py-6 space-y-4">
+                {status === 'loading' && (
+                    <>
+                        <Loader2 className="h-16 w-16 animate-spin text-blue-500" />
+                        <p className="text-gray-500">Doğrulanıyor, lütfen bekleyin...</p>
+                    </>
+                )}
+
+                {status === 'success' && (
+                    <>
+                        <CheckCircle2 className="h-16 w-16 text-green-500" />
+                        <div className="text-center space-y-2">
+                            <h3 className="text-xl font-semibold text-green-600">Başarılı!</h3>
+                            <p className="text-gray-600">{message}</p>
+                        </div>
+                    </>
+                )}
+
+                {status === 'error' && (
+                    <>
+                        <XCircle className="h-16 w-16 text-red-500" />
+                        <div className="text-center space-y-2">
+                            <h3 className="text-xl font-semibold text-red-600">Hata!</h3>
+                            <p className="text-gray-600">{message}</p>
+                        </div>
+                    </>
+                )}
+
+                {status === 'invalid' && (
+                    <>
+                        <AlertCircle className="h-16 w-16 text-amber-500" />
+                        <div className="text-center space-y-2">
+                            <h3 className="text-xl font-semibold text-amber-600">Geçersiz Bağlantı</h3>
+                            <p className="text-gray-600">Doğrulama bağlantısı geçersiz veya eksik.</p>
+                        </div>
+                    </>
+                )}
+            </CardContent>
+            <CardFooter className="justify-center">
+                {status === 'loading' ? (
+                    <Button disabled variant="outline" className="w-full">İşlem Sürüyor</Button>
+                ) : (
+                    <Link href="/auth/login" className="w-full">
+                        <Button className="w-full">
+                            {status === 'success' ? 'Giriş Yap' : 'Giriş Sayfasına Dön'}
+                        </Button>
+                    </Link>
+                )}
+            </CardFooter>
+        </Card>
+    )
+}
+
+const VerifyEmailPage = () => {
+    return (
+        <div className="flex min-h-screen items-center justify-center bg-gray-100 p-4 dark:bg-gray-900">
+            <Suspense fallback={
+                <div className="flex items-center space-x-2">
+                    <Loader2 className="h-6 w-6 animate-spin" />
+                    <span>Yükleniyor...</span>
+                </div>
+            }>
+                <VerifyEmailContent />
+            </Suspense>
+        </div>
+    )
+}
+
+export default VerifyEmailPage

frontend/app/globals.css

@@ -0,0 +1,126 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

frontend/app/layout.tsx

@@ -0,0 +1,45 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import { NextAuthProvider } from "@/components/providers/NextAuthProvider";
+import { ThemeProvider } from "@/components/providers/ThemeProvider";
+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" suppressHydrationWarning>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <NextAuthProvider>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+          >
+            {children}
+          </ThemeProvider>
+        </NextAuthProvider>
+      </body>
+    </html>
+  );
+}

frontend/app/page.tsx

@@ -0,0 +1,8 @@
+import { Button } from "@/components/ui/button"
+export default function Home() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+      <Button>Click me</Button>
+    </div>
+  );
+}

frontend/belgeler/admin_hero_crud.md

@@ -0,0 +1,377 @@
+ Proje `frontend` klasörü altında yapılandırılmıştır. Gerekli tüm paketler (`package.json`) önceden yüklenmiştir:
+- **Framework:** Next.js 16 (App Router)
+- **UI:** React 19, Tailwind CSS v4, shadcn/ui
+- **İkonlar:** lucide-react
+- **Validasyon:** Zod
+- **Auth:** NextAuth.js
+- **Bildirimler:** SweetAlert2
+- **Güvenlik:** nextjs-turnstile (Cloudflare)
+- **Senin ile sadece Frontend Üstünde Çalışıyorum**
+- **Backend ile ilgili bir şey Yapman Gerekirse Bana Söylemen Yeterli**
+
+##############
+Yeni Hero Kaydi
+curl -X 'POST' \
+  'http://localhost:8080/api/v1/admin/heroes' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzE0MDU3NjYsImlhdCI6MTc3MTM5NDk2NiwiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.pKMS0trKymCVgLZL-fTSUWB8QDAzfRVikHD_-I2iC-A' \
+  -H 'Content-Type: multipart/form-data' \
+  -F 'color=11111' \
+  -F 'title=Title' \
+  -F 'text1=Text1' \
+  -F 'text2=Text2' \
+  -F 'text4=Text4' \
+  -F 'text5=Text5' \
+  -F 'is_active=true' \
+  -F 'image=@845575.png;type=image/png'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/heroes
+
+Server response
+Code	Details
+201	
+Response body
+
+{
+  "data": {
+    "ID": 1,
+    "CreatedAt": "2026-02-18T06:17:46.077799Z",
+    "UpdatedAt": "2026-02-18T06:17:46.077799Z",
+    "DeletedAt": null,
+    "color": "11111",
+    "title": "Title",
+    "text1": "Text1",
+    "text2": "Text2",
+    "text4": "Text4",
+    "text5": "Text5",
+    "image": "/uploads/heroes/hero-1771395466075911000.png",
+    "is_active": true
+  }
+}
+
+Response headers
+
+ access-control-allow-credentials: true 
+ access-control-allow-headers: Authorization,Content-Type,Accept,Origin,X-Requested-With 
+ access-control-allow-methods: GET,POST,PUT,PATCH,DELETE,OPTIONS 
+ access-control-allow-origin: http://localhost:8080 
+ access-control-max-age: 600 
+ content-length: 286 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 06:17:46 GMT 
+ vary: Origin 
+
+ ##################
+ restore hero 
+ curl -X 'POST' \
+  'http://localhost:8080/api/v1/admin/heroes/2/restore' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzE0MDU3NjYsImlhdCI6MTc3MTM5NDk2NiwiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.pKMS0trKymCVgLZL-fTSUWB8QDAzfRVikHD_-I2iC-A' \
+  -d ''
+
+Request URL
+
+http://localhost:8080/api/v1/admin/heroes/2/restore
+
+Server response
+Code	Details
+200	
+Response body
+
+{
+  "data": {
+    "ID": 2,
+    "CreatedAt": "2026-02-18T09:18:32.257+03:00",
+    "UpdatedAt": "2026-02-18T06:19:40.645922Z",
+    "DeletedAt": null,
+    "color": "22222",
+    "title": "Title",
+    "text1": "Text1",
+    "text2": "Text2",
+    "text4": "Text4",
+    "text5": "Text5",
+    "image": "/uploads/heroes/hero-1771395512255077000.png",
+    "is_active": true
+  }
+}
+
+Response headers
+
+ access-control-allow-credentials: true 
+ access-control-allow-headers: Authorization,Content-Type,Accept,Origin,X-Requested-With 
+ access-control-allow-methods: GET,POST,PUT,PATCH,DELETE,OPTIONS 
+ access-control-allow-origin: http://localhost:8080 
+ access-control-max-age: 600 
+ content-length: 288 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 06:19:40 GMT 
+ vary: Origin 
+
+ ##################
+ hero silmek
+ curl -X 'DELETE' \
+  'http://localhost:8080/api/v1/admin/heroes/3' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzE0MDU3NjYsImlhdCI6MTc3MTM5NDk2NiwiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.pKMS0trKymCVgLZL-fTSUWB8QDAzfRVikHD_-I2iC-A'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/heroes/3
+
+Server response
+Code	Details
+200
+Undocumented
+	
+Response body
+
+{
+  "id": 3,
+  "message": "hero deleted successfully"
+}
+
+Response headers
+
+ access-control-allow-credentials: true 
+ access-control-allow-headers: Authorization,Content-Type,Accept,Origin,X-Requested-With 
+ access-control-allow-methods: GET,POST,PUT,PATCH,DELETE,OPTIONS 
+ access-control-allow-origin: http://localhost:8080 
+ access-control-max-age: 600 
+ content-length: 46 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 06:20:49 GMT 
+ vary: Origin 
+
+ ##################
+ sadece soft delete olmuslar
+ curl -X 'GET' \
+  'http://localhost:8080/api/v1/admin/heroes?soft=only' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzE0MDU3NjYsImlhdCI6MTc3MTM5NDk2NiwiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.pKMS0trKymCVgLZL-fTSUWB8QDAzfRVikHD_-I2iC-A'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/heroes?soft=only
+
+Server response
+Code	Details
+200	
+Response body
+
+{
+  "items": [
+    {
+      "ID": 3,
+      "CreatedAt": "2026-02-18T09:20:43.16+03:00",
+      "UpdatedAt": "2026-02-18T09:20:43.16+03:00",
+      "DeletedAt": "2026-02-18T09:20:49.969+03:00",
+      "color": "22222",
+      "title": "Title",
+      "text1": "Text1",
+      "text2": "Text2",
+      "text4": "Text4",
+      "text5": "Text5",
+      "image": "/uploads/heroes/hero-1771395643158537000.png",
+      "is_active": true
+    },
+    {
+      "ID": 2,
+      "CreatedAt": "2026-02-18T09:18:32.257+03:00",
+      "UpdatedAt": "2026-02-18T09:18:32.257+03:00",
+      "DeletedAt": "2026-02-18T09:19:05.81+03:00",
+      "color": "22222",
+      "title": "Title",
+      "text1": "Text1",
+      "text2": "Text2",
+      "text4": "Text4",
+      "text5": "Text5",
+      "image": "/uploads/heroes/hero-1771395512255077000.png",
+      "is_active": true
+    }
+  ],
+  "page": 1,
+  "per_page": 20,
+  "total": 2
+}
+
+Response headers
+
+ content-length: 659 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 06:22:05 GMT 
+
+ ##################
+ soft delete olmuslar ve silinmeyenler yani hepsi
+ curl -X 'GET' \
+  'http://localhost:8080/api/v1/admin/heroes?soft=with' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzE0MDU3NjYsImlhdCI6MTc3MTM5NDk2NiwiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.pKMS0trKymCVgLZL-fTSUWB8QDAzfRVikHD_-I2iC-A'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/heroes?soft=with
+
+Server response
+Code	Details
+200	
+Response body
+
+{
+  "items": [
+    {
+      "ID": 3,
+      "CreatedAt": "2026-02-18T09:20:43.16+03:00",
+      "UpdatedAt": "2026-02-18T09:20:43.16+03:00",
+      "DeletedAt": "2026-02-18T09:20:49.969+03:00",
+      "color": "22222",
+      "title": "Title",
+      "text1": "Text1",
+      "text2": "Text2",
+      "text4": "Text4",
+      "text5": "Text5",
+      "image": "/uploads/heroes/hero-1771395643158537000.png",
+      "is_active": true
+    },
+    {
+      "ID": 2,
+      "CreatedAt": "2026-02-18T09:18:32.257+03:00",
+      "UpdatedAt": "2026-02-18T09:18:32.257+03:00",
+      "DeletedAt": "2026-02-18T09:19:05.81+03:00",
+      "color": "22222",
+      "title": "Title",
+      "text1": "Text1",
+      "text2": "Text2",
+      "text4": "Text4",
+      "text5": "Text5",
+      "image": "/uploads/heroes/hero-1771395512255077000.png",
+      "is_active": true
+    },
+    {
+      "ID": 1,
+      "CreatedAt": "2026-02-18T09:17:46.077+03:00",
+      "UpdatedAt": "2026-02-18T09:17:46.077+03:00",
+      "DeletedAt": null,
+      "color": "11111",
+      "title": "Title",
+      "text1": "Text1",
+      "text2": "Text2",
+      "text4": "Text4",
+      "text5": "Text5",
+      "image": "/uploads/heroes/hero-1771395466075911000.png",
+      "is_active": true
+    }
+  ],
+  "page": 1,
+  "per_page": 20,
+  "total": 3
+}
+
+Response headers
+
+ content-length: 941 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 06:22:49 GMT 
+
+ ##################
+ tek getiröe 
+ curl -X 'GET' \
+  'http://localhost:8080/api/v1/admin/heroes/2' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzE0MDU3NjYsImlhdCI6MTc3MTM5NDk2NiwiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.pKMS0trKymCVgLZL-fTSUWB8QDAzfRVikHD_-I2iC-A'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/heroes/2
+
+Server response
+Code	Details
+200	
+Response body
+
+{
+  "data": {
+    "ID": 2,
+    "CreatedAt": "2026-02-18T09:18:32.257+03:00",
+    "UpdatedAt": "2026-02-18T09:18:32.257+03:00",
+    "DeletedAt": "2026-02-18T09:19:05.81+03:00",
+    "color": "22222",
+    "title": "Title",
+    "text1": "Text1",
+    "text2": "Text2",
+    "text4": "Text4",
+    "text5": "Text5",
+    "image": "/uploads/heroes/hero-1771395512255077000.png",
+    "is_active": true
+  }
+}
+
+Response headers
+
+ content-length: 316 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 06:24:07 GMT 
+
+ ##################
+ hero guncelleme
+ curl -X 'PUT' \
+  'http://localhost:8080/api/v1/admin/heroes/1' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzE0MDU3NjYsImlhdCI6MTc3MTM5NDk2NiwiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.pKMS0trKymCVgLZL-fTSUWB8QDAzfRVikHD_-I2iC-A' \
+  -H 'Content-Type: multipart/form-data' \
+  -F 'color=ee' \
+  -F 'title=ee' \
+  -F 'text1=ee' \
+  -F 'text2=ee' \
+  -F 'text4=ee' \
+  -F 'text5=ee' \
+  -F 'is_active=true' \
+  -F 'image=@accounts.jpg;type=image/jpeg'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/heroes/1
+
+Server response
+Code	Details
+200	
+Response body
+
+{
+  "data": {
+    "ID": 1,
+    "CreatedAt": "2026-02-18T09:17:46.077+03:00",
+    "UpdatedAt": "2026-02-18T06:25:06.633353Z",
+    "DeletedAt": null,
+    "color": "ee",
+    "title": "ee",
+    "text1": "ee",
+    "text2": "ee",
+    "text4": "ee",
+    "text5": "ee",
+    "image": "/uploads/heroes/hero-1771395906631296000.jpg",
+    "is_active": true
+  }
+}
+
+Response headers
+
+ access-control-allow-credentials: true 
+ access-control-allow-headers: Authorization,Content-Type,Accept,Origin,X-Requested-With 
+ access-control-allow-methods: GET,POST,PUT,PATCH,DELETE,OPTIONS 
+ access-control-allow-origin: http://localhost:8080 
+ access-control-max-age: 600 
+ content-length: 270 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 06:25:06 GMT 
+ vary: Origin 
+
+ ##################
+ Eklenen alanlari 
+  "width": 0,
+  "height": 0,
+  "quality": 0,
+  "format": ""
+
+  

frontend/belgeler/admin_kategori_crud.md

@@ -0,0 +1,369 @@
+ Proje `frontend` klasörü altında yapılandırılmıştır. Gerekli tüm paketler (`package.json`) önceden yüklenmiştir:
+- **Framework:** Next.js 16 (App Router)
+- **UI:** React 19, Tailwind CSS v4, shadcn/ui
+- **İkonlar:** lucide-react
+- **Validasyon:** Zod
+- **Auth:** NextAuth.js
+- **Bildirimler:** SweetAlert2
+- **Güvenlik:** nextjs-turnstile (Cloudflare)
+- **Senin ile sadece Frontend Üstünde Çalışıyorum**
+- **Backend ile ilgili bir şey Yapman Gerekirse Bana Söylemen Yeterli**
+
+#######################
+Silnmis ve silinmemiş kategorileri hepsini getirir
+curl -X 'GET' \
+  'http://localhost:8080/api/v1/admin/categories?soft=with' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzEzOTcyMzksImlhdCI6MTc3MTM4NjQzOSwiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.ueKzmNpcFfyZlwruom6odx3ZegIJG_WCr5xJuepiG64'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/categories?soft=with
+
+Server response
+Code	Details
+200	
+Response body
+
+{
+  "items": [
+    {
+      "id": 126,
+      "title": "Edebiyat",
+      "slug": "edebiyat-1771357850441632000",
+      "deleted_at": "2026-02-18T07:13:44.315+03:00"
+    },
+    {
+      "id": 125,
+      "title": "Müzik",
+      "slug": "muzik-1771357850322048000"
+    },
+    {
+      "id": 124,
+      "title": "Sinema",
+      "slug": "sinema-1771357850310914000"
+    },
+    {
+      "id": 123,
+      "title": "Sanat",
+      "slug": "sanat-1771357850300423000"
+    },
+    {
+      "id": 122,
+      "title": "İçecekler",
+      "slug": "icecekler-1771357850183010000"
+    },
+    {
+      "id": 121,
+      "title": "Ana Yemekler",
+      "slug": "ana-yemekler-1771357850172046000"
+    },
+    {
+      "id": 120,
+      "title": "Tatlılar",
+      "slug": "tatlilar-1771357850161422000"
+    },
+    {
+      "id": 119,
+      "title": "Yemek",
+      "slug": "yemek-1771357850149748000"
+    },
+    {
+      "id": 118,
+      "title": "Dekorasyon",
+      "slug": "dekorasyon-1771357850137823000",
+      "deleted_at": "2026-02-18T07:11:49.576+03:00"
+    },
+    {
+      "id": 117,
+      "title": "Gezi",
+      "slug": "gezi-1771357850126021000"
+    },
+    {
+      "id": 116,
+      "title": "Spor",
+      "slug": "spor-1771357850110558000"
+    },
+    {
+      "id": 115,
+      "title": "Sağlık",
+      "slug": "saglik-1771357850098589000"
+    },
+    {
+      "id": 114,
+      "title": "Yaşam",
+      "slug": "yasam-1771357850085843000"
+    },
+    {
+      "id": 113,
+      "title": "Mobil",
+      "slug": "mobil-1771357850074407000"
+    },
+    {
+      "id": 112,
+      "title": "Yapay Zeka",
+      "slug": "yapay-zeka-1771357850062505000"
+    },
+    {
+      "id": 111,
+      "title": "Donanım",
+      "slug": "donanim-1771357850051551000"
+    },
+    {
+      "id": 110,
+      "title": "Yazılım",
+      "slug": "yazilim-1771357850031651000"
+    },
+    {
+      "id": 109,
+      "title": "Teknoloji",
+      "slug": "teknoloji-1771357849936045000"
+    }
+  ],
+  "page": 1,
+  "per_page": 20,
+  "total": 18
+}
+
+Response headers
+
+ content-length: 1331 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 04:14:02 GMT 
+
+ #######################
+sadece silinmisleri getirir
+curl -X 'GET' \
+  'http://localhost:8080/api/v1/admin/categories?soft=only' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzEzOTcyMzksImlhdCI6MTc3MTM4NjQzOSwiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.ueKzmNpcFfyZlwruom6odx3ZegIJG_WCr5xJuepiG64'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/categories?soft=only
+
+Server response
+Code	Details
+200	
+Response body
+
+{
+  "items": [
+    {
+      "id": 126,
+      "title": "Edebiyat",
+      "slug": "edebiyat-1771357850441632000",
+      "deleted_at": "2026-02-18T07:13:44.315+03:00"
+    },
+    {
+      "id": 118,
+      "title": "Dekorasyon",
+      "slug": "dekorasyon-1771357850137823000",
+      "deleted_at": "2026-02-18T07:11:49.576+03:00"
+    }
+  ],
+  "page": 1,
+  "per_page": 20,
+  "total": 2
+}
+
+Response headers
+
+ content-length: 274 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 04:15:47 GMT 
+
+Responses
+
+#######################
+yeni kategori ekler 
+curl -X 'POST' \
+  'http://localhost:8080/api/v1/admin/categories' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzEzOTcyMzksImlhdCI6MTc3MTM4NjQzOSwiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.ueKzmNpcFfyZlwruom6odx3ZegIJG_WCr5xJuepiG64' \
+  -H 'Content-Type: application/json' \
+  -d '{
+  "description": "yeni kategori",
+  "parent_id": null,
+  "slug": "eni-kategori",
+  "title": "yeni kategori"
+}'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/categories
+
+Server response
+Code	Details
+201	
+Response body
+
+{
+  "data": {
+    "id": 128,
+    "title": "yeni kategori",
+    "slug": "eni-kategori"
+  }
+}
+
+Response headers
+
+ access-control-allow-credentials: true 
+ access-control-allow-headers: Authorization,Content-Type,Accept,Origin,X-Requested-With 
+ access-control-allow-methods: GET,POST,PUT,PATCH,DELETE,OPTIONS 
+ access-control-allow-origin: http://localhost:8080 
+ access-control-max-age: 600 
+ content-length: 65 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 04:17:18 GMT 
+ vary: Origin 
+
+ #######################
+yeni alt kategori ekler
+curl -X 'POST' \
+  'http://localhost:8080/api/v1/admin/categories' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzEzOTcyMzksImlhdCI6MTc3MTM4NjQzOSwiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.ueKzmNpcFfyZlwruom6odx3ZegIJG_WCr5xJuepiG64' \
+  -H 'Content-Type: application/json' \
+  -d '{
+  "description": "yeni alt kategori",
+  "parent_id": 128,
+  "slug": "yeni-alt-kategori",
+  "title": "yeni alt kategori"
+}'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/categories
+
+Server response
+Code	Details
+201	
+Response body
+
+{
+  "data": {
+    "id": 129,
+    "title": "yeni alt kategori",
+    "slug": "yeni-alt-kategori"
+  }
+}
+
+Response headers
+
+ access-control-allow-credentials: true 
+ access-control-allow-headers: Authorization,Content-Type,Accept,Origin,X-Requested-With 
+ access-control-allow-methods: GET,POST,PUT,PATCH,DELETE,OPTIONS 
+ access-control-allow-origin: http://localhost:8080 
+ access-control-max-age: 600 
+ content-length: 74 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 04:18:15 GMT 
+ vary: Origin 
+
+Responses
+
+#######################
+kategori gunceller 
+curl -X 'PUT' \
+  'http://localhost:8080/api/v1/admin/categories/128' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzEzOTcyMzksImlhdCI6MTc3MTM4NjQzOSwiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.ueKzmNpcFfyZlwruom6odx3ZegIJG_WCr5xJuepiG64' \
+  -H 'Content-Type: application/json' \
+  -d '{
+  "description": "update",
+  "parent_id": null,
+  "slug": "update",
+  "title": "update"
+}'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/categories/128
+
+Server response
+Code	Details
+200	
+Response body
+
+{
+  "data": {
+    "id": 128,
+    "title": "update",
+    "slug": "update"
+  }
+}
+
+Respons
+
+#######################
+siler 
+curl -X 'DELETE' \
+  'http://localhost:8080/api/v1/admin/categories/122' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzEzOTcyMzksImlhdCI6MTc3MTM4NjQzOSwiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.ueKzmNpcFfyZlwruom6odx3ZegIJG_WCr5xJuepiG64'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/categories/122
+
+Server response
+Code	Details
+200
+Undocumented
+	
+Response body
+
+{
+  "id": 122,
+  "message": "category deleted successfully"
+}
+
+Response headers
+
+ access-control-allow-credentials: true 
+ access-control-allow-headers: Authorization,Content-Type,Accept,Origin,X-Requested-With 
+ access-control-allow-methods: GET,POST,PUT,PATCH,DELETE,OPTIONS 
+ access-control-allow-origin: http://localhost:8080 
+ access-control-max-age: 600 
+ content-length: 52 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 04:20:35 GMT 
+ vary: Origin 
+
+ #######################
+soft delte restore
+curl -X 'POST' \
+  'http://localhost:8080/api/v1/admin/categories/122/restore' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzEzOTcyMzksImlhdCI6MTc3MTM4NjQzOSwiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.ueKzmNpcFfyZlwruom6odx3ZegIJG_WCr5xJuepiG64' \
+  -d ''
+
+Request URL
+
+http://localhost:8080/api/v1/admin/categories/122/restore
+
+Server response
+Code	Details
+200	
+Response body
+
+{
+  "data": {
+    "id": 122,
+    "title": "İçecekler",
+    "slug": "icecekler-1771357850183010000"
+  }
+}
+
+Response headers
+
+ access-control-allow-credentials: true 
+ access-control-allow-headers: Authorization,Content-Type,Accept,Origin,X-Requested-With 
+ access-control-allow-methods: GET,POST,PUT,PATCH,DELETE,OPTIONS 
+ access-control-allow-origin: http://localhost:8080 
+ access-control-max-age: 600 
+ content-length: 80 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 04:21:57 GMT 
+ vary: Origin 

frontend/belgeler/admin_settings_crud.md

@@ -0,0 +1,624 @@
+Settigns ekleme
+
+curl -X 'POST' \
+  'http://localhost:8080/api/v1/admin/settings' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzE0MTYyMjcsImlhdCI6MTc3MTQwNTQyNywiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.X6mTnoiYJ1CUlarQlmwka0VpuDxYTIAV0QfS72AuBXs' \
+  -H 'Content-Type: multipart/form-data' \
+  -F 'title=Title' \
+  -F 'meta_title=Meta title' \
+  -F 'meta_description=Meta description' \
+  -F 'phone=Phone' \
+  -F 'url=URL' \
+  -F 'email=Email' \
+  -F 'facebook=Facebook' \
+  -F 'x=x' \
+  -F 'instagram=Instagram' \
+  -F 'whatsapp=Whatsapp' \
+  -F 'pinterest=Pinterest' \
+  -F 'linkedin=Linkedin' \
+  -F 'slogan=Slogan' \
+  -F 'address=Address' \
+  -F 'copyright=Copyright' \
+  -F 'map_embed=Map embed' \
+  -F 'w_logo=@354473ed-59e9-41cf-a655-ec5f7a77ccaa.png;type=image/png' \
+  -F 'b_logo=@354473ed-59e9-41cf-a655-ec5f7a77ccaa.png;type=image/png' \
+  -F 'is_active=true' \
+  -F 'w_width=100' \
+  -F 'w_height=100' \
+  -F 'w_quality=100' \
+  -F 'w_format=avif' \
+  -F 'b_width=100' \
+  -F 'b_height=100' \
+  -F 'b_quality=100' \
+  -F 'b_format=avif'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/settings
+
+Server response
+Code	Details
+201	
+Response body
+
+{
+  "data": {
+    "ID": 1,
+    "CreatedAt": "2026-02-18T09:06:07.242338Z",
+    "UpdatedAt": "2026-02-18T09:06:07.242338Z",
+    "DeletedAt": null,
+    "title": "Title",
+    "meta_title": "Meta title",
+    "meta_description": "Meta description",
+    "phone": "Phone",
+    "url": "URL",
+    "email": "Email",
+    "facebook": "Facebook",
+    "x": "x",
+    "instagram": "Instagram",
+    "whatsapp": "Whatsapp",
+    "pinterest": "Pinterest",
+    "linkedin": "Linkedin",
+    "slogan": "Slogan",
+    "address": "Address",
+    "copyright": "Copyright",
+    "map_embed": "Map embed",
+    "w_logo": "/uploads/logos/wlogo-1771405567230290000.png",
+    "b_logo": "/uploads/logos/blogo-1771405567233377000.png",
+    "is_active": true,
+    "w_width": 100,
+    "w_height": 100,
+    "w_quality": 100,
+    "w_format": "avif",
+    "b_width": 100,
+    "b_height": 100,
+    "b_quality": 100,
+    "b_format": "avif"
+  }
+}
+
+Response headers
+
+ access-control-allow-credentials: true 
+ access-control-allow-headers: Authorization,Content-Type,Accept,Origin,X-Requested-With 
+ access-control-allow-methods: GET,POST,PUT,PATCH,DELETE,OPTIONS 
+ access-control-allow-origin: http://localhost:8080 
+ access-control-max-age: 600 
+ content-length: 705 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 09:06:07 GMT 
+ vary: Origin 
+
+##################
+
+Setiiggs tek gor
+
+curl -X 'GET' \
+  'http://localhost:8080/api/v1/admin/settings/2' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzE0MTYyMjcsImlhdCI6MTc3MTQwNTQyNywiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.X6mTnoiYJ1CUlarQlmwka0VpuDxYTIAV0QfS72AuBXs'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/settings/2
+
+Server response
+Code	Details
+200	
+Response body
+
+{
+  "data": {
+    "ID": 2,
+    "CreatedAt": "2026-02-18T12:07:50+03:00",
+    "UpdatedAt": "2026-02-18T12:07:50+03:00",
+    "DeletedAt": null,
+    "title": "Title",
+    "meta_title": "Meta title",
+    "meta_description": "Meta description",
+    "phone": "Phone",
+    "url": "URL",
+    "email": "Email",
+    "facebook": "Facebook",
+    "x": "x",
+    "instagram": "Instagram",
+    "whatsapp": "Whatsapp",
+    "pinterest": "Pinterest",
+    "linkedin": "Linkedin",
+    "slogan": "Slogan",
+    "address": "Address",
+    "copyright": "Copyright",
+    "map_embed": "Map embed",
+    "w_logo": "/uploads/logos/wlogo-1771405669986265000.png",
+    "b_logo": "/uploads/logos/blogo-1771405669989575000.png",
+    "is_active": true,
+    "w_width": 100,
+    "w_height": 100,
+    "w_quality": 100,
+    "w_format": "avif",
+    "b_width": 100,
+    "b_height": 100,
+    "b_quality": 100,
+    "b_format": "avif"
+  }
+}
+
+Response headers
+
+ content-length: 701 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 09:08:04 GMT 
+
+###############
+setting guncelleme
+
+curl -X 'PUT' \
+  'http://localhost:8080/api/v1/admin/settings/2' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzE0MTYyMjcsImlhdCI6MTc3MTQwNTQyNywiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.X6mTnoiYJ1CUlarQlmwka0VpuDxYTIAV0QfS72AuBXs' \
+  -H 'Content-Type: multipart/form-data' \
+  -F 'title=ewr' \
+  -F 'meta_title=wer' \
+  -F 'meta_description=werwer' \
+  -F 'phone=wer' \
+  -F 'url=wer' \
+  -F 'email=wer' \
+  -F 'facebook=wer' \
+  -F 'x=wer' \
+  -F 'instagram=wer' \
+  -F 'whatsapp=ewr' \
+  -F 'pinterest=wer' \
+  -F 'linkedin=wer' \
+  -F 'slogan=wer' \
+  -F 'address=wre' \
+  -F 'copyright=wer' \
+  -F 'map_embed=wer' \
+  -F 'w_logo=@1657955547black-google-icon.png;type=image/png' \
+  -F 'b_logo=@845660.png;type=image/png' \
+  -F 'is_active=false' \
+  -F 'w_width=111' \
+  -F 'w_height=111' \
+  -F 'w_quality=100' \
+  -F 'w_format=avif' \
+  -F 'b_width=111' \
+  -F 'b_height=111' \
+  -F 'b_quality=100' \
+  -F 'b_format=avif'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/settings/2
+
+Server response
+Code	Details
+200	
+Response body
+
+{
+  "data": {
+    "ID": 2,
+    "CreatedAt": "2026-02-18T12:07:50+03:00",
+    "UpdatedAt": "2026-02-18T09:10:27.629761Z",
+    "DeletedAt": null,
+    "title": "ewr",
+    "meta_title": "wer",
+    "meta_description": "werwer",
+    "phone": "wer",
+    "url": "wer",
+    "email": "wer",
+    "facebook": "wer",
+    "x": "wer",
+    "instagram": "wer",
+    "whatsapp": "ewr",
+    "pinterest": "wer",
+    "linkedin": "wer",
+    "slogan": "wer",
+    "address": "wre",
+    "copyright": "wer",
+    "map_embed": "wer",
+    "w_logo": "/uploads/logos/wlogo-1771405827623476000.png",
+    "b_logo": "/uploads/logos/blogo-1771405827627412000.png",
+    "is_active": false,
+    "w_width": 111,
+    "w_height": 111,
+    "w_quality": 100,
+    "w_format": "avif",
+    "b_width": 111,
+    "b_height": 111,
+    "b_quality": 100,
+    "b_format": "avif"
+  }
+}
+
+Response headers
+
+ access-control-allow-credentials: true 
+ access-control-allow-headers: Authorization,Content-Type,Accept,Origin,X-Requested-With 
+ access-control-allow-methods: GET,POST,PUT,PATCH,DELETE,OPTIONS 
+ access-control-allow-origin: http://localhost:8080 
+ access-control-max-age: 600 
+ content-length: 637 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 09:10:27 GMT 
+ vary: Origin 
+
+ settings restore
+ curl -X 'POST' \
+  'http://localhost:8080/api/v1/admin/settings/2/restore' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzE0MTYyMjcsImlhdCI6MTc3MTQwNTQyNywiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.X6mTnoiYJ1CUlarQlmwka0VpuDxYTIAV0QfS72AuBXs' \
+  -d ''
+
+Request URL
+
+http://localhost:8080/api/v1/admin/settings/2/restore
+
+Server response
+Code	Details
+200	
+Response body
+
+{
+  "data": {
+    "ID": 2,
+    "CreatedAt": "2026-02-18T12:07:50+03:00",
+    "UpdatedAt": "2026-02-18T09:11:59.255443Z",
+    "DeletedAt": null,
+    "title": "ewr",
+    "meta_title": "wer",
+    "meta_description": "werwer",
+    "phone": "wer",
+    "url": "wer",
+    "email": "wer",
+    "facebook": "wer",
+    "x": "wer",
+    "instagram": "wer",
+    "whatsapp": "ewr",
+    "pinterest": "wer",
+    "linkedin": "wer",
+    "slogan": "wer",
+    "address": "wre",
+    "copyright": "wer",
+    "map_embed": "wer",
+    "w_logo": "/uploads/logos/wlogo-1771405827623476000.png",
+    "b_logo": "/uploads/logos/blogo-1771405827627412000.png",
+    "is_active": false,
+    "w_width": 111,
+    "w_height": 111,
+    "w_quality": 100,
+    "w_format": "avif",
+    "b_width": 111,
+    "b_height": 111,
+    "b_quality": 100,
+    "b_format": "avif"
+  }
+}
+
+Response headers
+
+ access-control-allow-credentials: true 
+ access-control-allow-headers: Authorization,Content-Type,Accept,Origin,X-Requested-With 
+ access-control-allow-methods: GET,POST,PUT,PATCH,DELETE,OPTIONS 
+ access-control-allow-origin: http://localhost:8080 
+ access-control-max-age: 600 
+ content-length: 637 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 09:11:59 GMT 
+ vary: Origin 
+
+Responses
+Code	Description
+200	
+
+##################
+settings silmek
+
+curl -X 'DELETE' \
+  'http://localhost:8080/api/v1/admin/settings/2' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzE0MTYyMjcsImlhdCI6MTc3MTQwNTQyNywiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.X6mTnoiYJ1CUlarQlmwka0VpuDxYTIAV0QfS72AuBXs'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/settings/2
+
+Server response
+Code	Details
+200
+Undocumented
+	
+Response body
+
+{
+  "id": 2,
+  "message": "setting deleted successfully"
+}
+
+Response headers
+
+ access-control-allow-credentials: true 
+ access-control-allow-headers: Authorization,Content-Type,Accept,Origin,X-Requested-With 
+ access-control-allow-methods: GET,POST,PUT,PATCH,DELETE,OPTIONS 
+ access-control-allow-origin: http://localhost:8080 
+ access-control-max-age: 600 
+ content-length: 49 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 09:13:23 GMT 
+ vary: Origin 
+
+Responses
+Code	Description
+204	
+
+No Content
+400	
+
+Bad Request
+
+{
+  "additionalProp1":
+
+
+  ####################
+  hepsini listele
+  curl -X 'GET' \
+  'http://localhost:8080/api/v1/admin/settings' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzE0MTYyMjcsImlhdCI6MTc3MTQwNTQyNywiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.X6mTnoiYJ1CUlarQlmwka0VpuDxYTIAV0QfS72AuBXs'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/settings
+
+Server response
+Code	Details
+200	
+Response body
+
+{
+  "items": [
+    {
+      "ID": 2,
+      "CreatedAt": "2026-02-18T12:07:50+03:00",
+      "UpdatedAt": "2026-02-18T12:10:27.629+03:00",
+      "DeletedAt": null,
+      "title": "ewr",
+      "meta_title": "wer",
+      "meta_description": "werwer",
+      "phone": "wer",
+      "url": "wer",
+      "email": "wer",
+      "facebook": "wer",
+      "x": "wer",
+      "instagram": "wer",
+      "whatsapp": "ewr",
+      "pinterest": "wer",
+      "linkedin": "wer",
+      "slogan": "wer",
+      "address": "wre",
+      "copyright": "wer",
+      "map_embed": "wer",
+      "w_logo": "/uploads/logos/wlogo-1771405827623476000.png",
+      "b_logo": "/uploads/logos/blogo-1771405827627412000.png",
+      "is_active": false,
+      "w_width": 111,
+      "w_height": 111,
+      "w_quality": 100,
+      "w_format": "avif",
+      "b_width": 111,
+      "b_height": 111,
+      "b_quality": 100,
+      "b_format": "avif"
+    },
+    {
+      "ID": 1,
+      "CreatedAt": "2026-02-18T12:06:07.242+03:00",
+      "UpdatedAt": "2026-02-18T12:06:07.242+03:00",
+      "DeletedAt": null,
+      "title": "Title",
+      "meta_title": "Meta title",
+      "meta_description": "Meta description",
+      "phone": "Phone",
+      "url": "URL",
+      "email": "Email",
+      "facebook": "Facebook",
+      "x": "x",
+      "instagram": "Instagram",
+      "whatsapp": "Whatsapp",
+      "pinterest": "Pinterest",
+      "linkedin": "Linkedin",
+      "slogan": "Slogan",
+      "address": "Address",
+      "copyright": "Copyright",
+      "map_embed": "Map embed",
+      "w_logo": "/uploads/logos/wlogo-1771405567230290000.png",
+      "b_logo": "/uploads/logos/blogo-1771405567233377000.png",
+      "is_active": true,
+      "w_width": 100,
+      "w_height": 100,
+      "w_quality": 100,
+      "w_format": "avif",
+      "b_width": 100,
+      "b_height": 100,
+      "b_quality": 100,
+      "b_format": "avif"
+    }
+  ],
+  "page": 1,
+  "per_page": 20,
+  "total": 2
+}
+
+Response headers
+
+ content-length: 1376 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 09:31:04 GMT 
+
+ sadece softdelete edilmisleri listele
+ curl -X 'GET' \
+  'http://localhost:8080/api/v1/admin/settings?soft=only' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzE0MTYyMjcsImlhdCI6MTc3MTQwNTQyNywiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.X6mTnoiYJ1CUlarQlmwka0VpuDxYTIAV0QfS72AuBXs'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/settings?soft=only
+
+Server response
+Code	Details
+200	
+Response body
+
+{
+  "items": [
+    {
+      "ID": 2,
+      "CreatedAt": "2026-02-18T12:07:50+03:00",
+      "UpdatedAt": "2026-02-18T12:10:27.629+03:00",
+      "DeletedAt": "2026-02-18T12:32:38.237+03:00",
+      "title": "ewr",
+      "meta_title": "wer",
+      "meta_description": "werwer",
+      "phone": "wer",
+      "url": "wer",
+      "email": "wer",
+      "facebook": "wer",
+      "x": "wer",
+      "instagram": "wer",
+      "whatsapp": "ewr",
+      "pinterest": "wer",
+      "linkedin": "wer",
+      "slogan": "wer",
+      "address": "wre",
+      "copyright": "wer",
+      "map_embed": "wer",
+      "w_logo": "/uploads/logos/wlogo-1771405827623476000.png",
+      "b_logo": "/uploads/logos/blogo-1771405827627412000.png",
+      "is_active": false,
+      "w_width": 111,
+      "w_height": 111,
+      "w_quality": 100,
+      "w_format": "avif",
+      "b_width": 111,
+      "b_height": 111,
+      "b_quality": 100,
+      "b_format": "avif"
+    }
+  ],
+  "page": 1,
+  "per_page": 20,
+  "total": 1
+}
+
+Response headers
+
+ content-length: 702 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 09:32:56 GMT 
+
+Responses
+Code	
+
+hem soft delete hemde delete olmayan lari listele
+curl -X 'GET' \
+  'http://localhost:8080/api/v1/admin/settings?soft=with' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzE0MTYyMjcsImlhdCI6MTc3MTQwNTQyNywiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.X6mTnoiYJ1CUlarQlmwka0VpuDxYTIAV0QfS72AuBXs'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/settings?soft=with
+
+Server response
+Code	Details
+200	
+Response body
+
+{
+  "items": [
+    {
+      "ID": 2,
+      "CreatedAt": "2026-02-18T12:07:50+03:00",
+      "UpdatedAt": "2026-02-18T12:10:27.629+03:00",
+      "DeletedAt": "2026-02-18T12:32:38.237+03:00",
+      "title": "ewr",
+      "meta_title": "wer",
+      "meta_description": "werwer",
+      "phone": "wer",
+      "url": "wer",
+      "email": "wer",
+      "facebook": "wer",
+      "x": "wer",
+      "instagram": "wer",
+      "whatsapp": "ewr",
+      "pinterest": "wer",
+      "linkedin": "wer",
+      "slogan": "wer",
+      "address": "wre",
+      "copyright": "wer",
+      "map_embed": "wer",
+      "w_logo": "/uploads/logos/wlogo-1771405827623476000.png",
+      "b_logo": "/uploads/logos/blogo-1771405827627412000.png",
+      "is_active": false,
+      "w_width": 111,
+      "w_height": 111,
+      "w_quality": 100,
+      "w_format": "avif",
+      "b_width": 111,
+      "b_height": 111,
+      "b_quality": 100,
+      "b_format": "avif"
+    },
+    {
+      "ID": 1,
+      "CreatedAt": "2026-02-18T12:06:07.242+03:00",
+      "UpdatedAt": "2026-02-18T12:06:07.242+03:00",
+      "DeletedAt": null,
+      "title": "Title",
+      "meta_title": "Meta title",
+      "meta_description": "Meta description",
+      "phone": "Phone",
+      "url": "URL",
+      "email": "Email",
+      "facebook": "Facebook",
+      "x": "x",
+      "instagram": "Instagram",
+      "whatsapp": "Whatsapp",
+      "pinterest": "Pinterest",
+      "linkedin": "Linkedin",
+      "slogan": "Slogan",
+      "address": "Address",
+      "copyright": "Copyright",
+      "map_embed": "Map embed",
+      "w_logo": "/uploads/logos/wlogo-1771405567230290000.png",
+      "b_logo": "/uploads/logos/blogo-1771405567233377000.png",
+      "is_active": true,
+      "w_width": 100,
+      "w_height": 100,
+      "w_quality": 100,
+      "w_format": "avif",
+      "b_width": 100,
+      "b_height": 100,
+      "b_quality": 100,
+      "b_format": "avif"
+    }
+  ],
+  "page": 1,
+  "per_page": 20,
+  "total": 2
+}
+
+Response headers
+
+ content-length: 1403 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 09:34:15 GMT 
+
+Responses
+Code	Description
+200	
+
+OK
+

frontend/belgeler/admin_tags.md

@@ -0,0 +1,259 @@
+ Proje `frontend` klasörü altında yapılandırılmıştır. Gerekli tüm paketler (`package.json`) önceden yüklenmiştir:
+- **Framework:** Next.js 16 (App Router)
+- **UI:** React 19, Tailwind CSS v4, shadcn/ui
+- **İkonlar:** lucide-react
+- **Validasyon:** Zod
+- **Auth:** NextAuth.js
+- **Bildirimler:** SweetAlert2
+- **Güvenlik:** nextjs-turnstile (Cloudflare)
+- **Senin ile sadece Frontend Üstünde Çalışıyorum**
+- **Backend ile ilgili bir şey Yapman Gerekirse Bana Söylemen Yeterli**
+
+#######################
+Silnmis ve silinmemiş hepsini getirir
+
+curl -X 'GET' \
+  'http://localhost:8080/api/v1/admin/tags?soft=with' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzEzOTY3NDEsImlhdCI6MTc3MTM4NTk0MSwiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.yFU_fmErhi50MgvP7PYHDr0E-Dp5FUlSnJP5OmYgqG8'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/tags?soft=with
+
+Server response
+Code	Details
+200	
+Response body
+
+{
+  "items": [
+    {
+      "id": 10,
+      "name": "Travel"
+    },
+    {
+      "id": 9,
+      "name": "Food"
+    },
+    {
+      "id": 8,
+      "name": "Nature"
+    },
+    {
+      "id": 7,
+      "name": "Life"
+    },
+    {
+      "id": 6,
+      "name": "Coding"
+    },
+    {
+      "id": 5,
+      "name": "Tutorial"
+    },
+    {
+      "id": 4,
+      "name": "Api"
+    },
+    {
+      "id": 3,
+      "name": "Web"
+    },
+    {
+      "id": 2,
+      "name": "Gin"
+    },
+    {
+      "id": 1,
+      "name": "Go"
+    }
+  ],
+  "page": 1,
+  "per_page": 20,
+  "total": 10
+}
+
+Response headers
+
+ content-length: 281 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 03:41:13 GMT 
+
+ #######################
+Sadece silinmiş tagları getir
+curl -X 'GET' \
+  'http://localhost:8080/api/v1/admin/tags?soft=only' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzEzOTY3NDEsImlhdCI6MTc3MTM4NTk0MSwiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.yFU_fmErhi50MgvP7PYHDr0E-Dp5FUlSnJP5OmYgqG8'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/tags?soft=only
+
+Server response
+Code	Details
+200	
+Response body
+
+{
+  "items": null,
+  "page": 1,
+  "per_page": 20,
+  "total": 0
+}
+
+Response headers
+
+ content-length: 47 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 03:39:38 GMT 
+
+Responses
+Code	Description
+200	
+
+OK
+
+#######################
+Yeni Tag Olusturu 
+curl -X 'POST' \
+  'http://localhost:8080/api/v1/admin/tags' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzEzOTY3NDEsImlhdCI6MTc3MTM4NTk0MSwiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.yFU_fmErhi50MgvP7PYHDr0E-Dp5FUlSnJP5OmYgqG8' \
+  -H 'Content-Type: application/json' \
+  -d '{
+  "name": "yenitag"
+}'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/tags
+
+Server response
+Code	Details
+201	
+Response body
+
+{
+  "data": {
+    "id": 11,
+    "name": "yenitag"
+  }
+}
+
+Response headers
+
+ access-control-allow-credentials: true 
+ access-control-allow-headers: Authorization,Content-Type,Accept,Origin,X-Requested-With 
+ access-control-allow-methods: GET,POST,PUT,PATCH,DELETE,OPTIONS 
+ access-control-allow-origin: http://localhost:8080 
+ access-control-max-age: 600 
+ content-length: 35 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 03:42:05 GMT 
+ vary: Origin 
+
+ #######################
+
+ tagi gunceller
+ curl -X 'PUT' \
+  'http://localhost:8080/api/v1/admin/tags/11' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzEzOTY3NDEsImlhdCI6MTc3MTM4NTk0MSwiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.yFU_fmErhi50MgvP7PYHDr0E-Dp5FUlSnJP5OmYgqG8' \
+  -H 'Content-Type: application/json' \
+  -d '{
+  "name": "update"
+}'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/tags/11
+
+Server response
+Code	Details
+200	
+Response body
+
+{
+  "data": {
+    "id": 11,
+    "name": "update"
+  }
+}
+
+Response headers
+
+ access-control-allow-credentials: true 
+ access-control-allow-headers: Authorization,Content-Type,Accept,Origin,X-Requested-With 
+ access-control-allow-methods: GET,POST,PUT,PATCH,DELETE,OPTIONS 
+ access-control-allow-origin: http://localhost:8080 
+ access-control-max-age: 600 
+ content-length: 34 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 03:43:10 GMT 
+ vary: Origin 
+
+ #######################
+
+ tagi siler 
+ curl -X 'DELETE' \
+  'http://localhost:8080/api/v1/admin/tags/11' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzEzOTY3NDEsImlhdCI6MTc3MTM4NTk0MSwiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.yFU_fmErhi50MgvP7PYHDr0E-Dp5FUlSnJP5OmYgqG8'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/tags/11
+
+Server response
+Code	Details
+204	
+Response headers
+
+ access-control-allow-credentials: true 
+ access-control-allow-headers: Authorization,Content-Type,Accept,Origin,X-Requested-With 
+ access-control-allow-methods: GET,POST,PUT,PATCH,DELETE,OPTIONS 
+ access-control-allow-origin: http://localhost:8080 
+ access-control-max-age: 600 
+ date: Wed,18 Feb 2026 03:43:45 GMT 
+ vary: Origin 
+
+Responses
+
+#######################
+
+tag restore
+curl -X 'POST' \
+  'http://localhost:8080/api/v1/admin/tags/11/restore' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzEzOTcyMzksImlhdCI6MTc3MTM4NjQzOSwiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.ueKzmNpcFfyZlwruom6odx3ZegIJG_WCr5xJuepiG64' \
+  -d ''
+
+Request URL
+
+http://localhost:8080/api/v1/admin/tags/11/restore
+
+Server response
+Code	Details
+200	
+Response body
+
+{
+  "data": {
+    "id": 11,
+    "name": "update"
+  }
+}
+
+Response headers
+
+ access-control-allow-credentials: true 
+ access-control-allow-headers: Authorization,Content-Type,Accept,Origin,X-Requested-With 
+ access-control-allow-methods: GET,POST,PUT,PATCH,DELETE,OPTIONS 
+ access-control-allow-origin: http://localhost:8080 
+ access-control-max-age: 600 
+ content-length: 34 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 03:47:36 GMT 
+ vary: Origin 

frontend/belgeler/admin_user.md

@@ -0,0 +1,112 @@
+# Admin Panel — Görev Tanımı (Next.js 16 + TypeScript)
+
+## Kısa Özet
+Bu görevde Next.js 16 ve paylaştığın paketler kullanılarak önce masaüstü öncelikli, 
+responsive bir Admin Paneli geliştirilecek; Admin 
+Kod üretimi için aşağıdaki gereksinimler ve kabul kriterleri tam 
+uygulanmalıdır.
+
+## Teknoloji Yığını (Zorunlu)
+- Next.js 16 (App Router /app)
+- React 19, TypeScript
+- Tailwind CSS v4, shadcn bileşenleri
+- class-variance-authority, tailwind-merge
+- lucide-react (ikonlar)
+- sweetalert2 (bildirimler/konfirmasyonlar)
+- zod (validasyon)
+- next-auth (kimlik doğrulama)
+- nextjs-turnstile (Cloudflare Turnstile entegrasyonu)
+- tw-animate-css (isteğe bağlı animasyonlar)
+
+Yeni büyük kütüphaneler eklemek gerekiyorsa önceden onay istenmelidir. 
+Küçük yardımcı util paketleri gerektiğinde kabul edilebilir ama öncelik mevcut paketlerle çözmek.
+
+## Tasarım Sistemi ve UI
+- shadcn + Tailwind üzerinde tutarlı bir design-system oluştur: tokenlar (renk, spacing, tipografi), light/dark tema.
+- Temel component seti: Button, Input, Select, TextArea, Modal, Table, Pagination, Badge, Toast, Card, Form.
+- class-variance-authority ile variant/size yönetimi, tailwind-merge ile conditional class birleştirme.
+- İkonlar lucide-react ile sağlanacak.
+- Erişilebilirlik: semantic HTML, aria attributeleri, klavye erişimi, WCAG AA hedefleri.
+
+## Mimari ve Veri Akışı
+- App Router (app/) kullan, sunucu bileşenleri (server components) ile veri yüklemesi/SSR; client components interaktivite için.
+- Veri yüklemelerinde sunucu tarafı yükleme (server components) tercih edilir; client-side filtreleme/paginasyon için fetch + useState/useEffect kullanılabilir.
+- Global state gerekiyorsa React Context ile minimal çözüm (yeni global state kütüphanesi eklenmeyecek).
+
+## Kimlik Doğrulama & Yetkilendirme
+- NextAuth ile güvenli oturum/JWT tabanlı kimlik doğrulama uygulanacak.
+- Role-based access control: en az iki rol (superadmin, admin).
+- Admin rotaları server-side yetki kontrolü ile korunacak (middleware veya server actions).
+- /admin/login sayfasına Cloudflare Turnstile (nextjs-turnstile) entegre edilecek.
+
+## Routing & Sayfalar (Zorunlu)
+- /admin/login
+- /admin → /admin yönlendirme (Dashboard)
+- /admin (KPI kartları, son işlemler, hızlı aksiyonlar)
+- /admin/users (liste, arama, filtre, pagination, CSV export)
+- /admin/users/[id] (profil, roller, aktif/devre dışı)
+- /admin/products (CRUD: liste, oluştur, düzenle, sil)
+- /admin/orders (liste, detay, durum güncelleme)
+- /admin/settings (genel, güvenlik, entegrasyonlar)
+- /admin/profile
+
+## Veri Modelleri (Örnek)
+- Users: id, name, email, role, status, createdAt
+- Products: id, title, sku, price, inventory, images[], status
+- Orders: id, userId, items[], total, status, createdAt
+
+(Not: Backend yoksa örnek/mock endpoint’ler veya mevcut API ile uyumlu yapı sağlanmalı.)
+
+## Formlar & Validasyon
+- Tüm formlarda Zod ile hem client-side hem server-side validasyon.
+- Form submitleri server actions veya route handlers ile işlenmeli.
+- Başarı/hata bildirimleri için sweetalert2 kullanılacak.
+
+## Dosya/Resim Yükleme
+- Gerçek bir backend/3rd-party (S3) yoksa: client-side önizleme sağlayan placeholder upload akışı oluştur; upload endpoint için gerekli iskelet/protokol hazır olsun.
+
+## Güvenlik
+- Tüm admin rotaları server-side yetkilendirmeyle korunacak.
+- Hassas veriler .env ile saklanacak (README’de açıkça listelenecek).
+- XSS/CSRF/SSRF risklerini azaltacak NextAuth & server actions en iyi uygulamalarına uyulacak.
+
+## Performans & Optimizasyon
+- Hedef: sayfa başlangıç süresi < 1.5s (kritik CSS minimal, resimler optimize).
+- Lazy load, code-splitting, image optimization kullanımı önerilir.
+
+## Test & Kalite
+- TypeScript tipleri zorunlu, ESLint konfigürasyonuna uyulacak.
+- Component-level testler opsiyonel; ek paket gerekiyorsa sonradan onay alınacak.
+- README: kurulum, env değişkenleri, çalıştırma ve mimari kısa açıklama olacak.
+
+## Hata Yönetimi & İzleme
+- Merkezi error handling mekanizması.
+- Kullanıcıya sweetalert2 ile başarılı/başarısız geri bildirimleri göster.
+
+## Internationalization
+- Proje i18n'ye hazır olmalı (tüm metinler merkezi çeviri kaynağından çekilecek).
+
+## Kabul Kriterleri (Öncelikli)
+1. Admin login çalışıyor; Turnstile doğrulaması entegre ve çalışır.  
+2. Rol tabanlı erişim ile korunan tüm /admin sayfalarına yetkisiz erişim engelleniyor.  
+3. Dashboard KPI kartları ve tablolar sunuyor; kullanıcı ve ürün CRUD fonksiyonları tamam.  
+4. Tüm formlar Zod ile client ve server validasyonu sağlıyor.  
+5. Component kütüphanesi shadcn + Tailwind ile tutarlı, responsive ve erişilebilir.  
+6. UX geri bildirimleri sweetalert2 ile gösteriliyor.  
+7. Kod TypeScript ile tam tiplenmiş ve ESLint uyarılarına duyarlı.
+
+## Teslimat (Çıktı)
+- Çalışır Next.js projesi (kaynak kod).  
+- README: kurulum, env değişkenleri (NEXTAUTH_URL, NEXTAUTH_SECRET, DATABASE_URL, TURNSTILE_SITEKEY, TURNSTILE_SECRET vb.), çalıştırma talimatları.  
+- Temel component listesi ve kısa kullanım notları.  
+- Kabul testi checklist'i (madde madde doğrulanabilir).
+
+## Ek Kurallar & Notlar
+- Yeni ana kütüphaneler eklemeden önce onay iste.  
+- Tasarım ve component kararları tutarlılık için belgelenmeli.  
+- Admin tamamlandıktan sonra müşteri-facing frontend için aynı design-system kullanılacak; bu aşama ayrı kabul kriterleriyle planlanacak.
+
+---
+
+Bu dosyayı doğrudan görev olarak kullan: 
+ve detayli bir kulanama kılavuzu hazırla.

frontend/belgeler/admin_user_crud.md

@@ -0,0 +1,306 @@
+frontend
+ Proje `frontend` klasörü altında yapılandırılmıştır. Gerekli tüm paketler (`package.json`) önceden yüklenmiştir:
+- **Framework:** Next.js 16 (App Router)
+- **UI:** React 19, Tailwind CSS v4, shadcn/ui
+- **İkonlar:** lucide-react
+- **Validasyon:** Zod
+- **Auth:** NextAuth.js
+- **Bildirimler:** SweetAlert2
+- **Güvenlik:** nextjs-turnstile (Cloudflare)
+
+Hem softdelete edilmisler hermse aktif olan userleri  Userler
+
+curl -X 'GET' \
+  'http://localhost:8080/api/v1/admin/users?soft=with' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzEzOTQ1NjksImlhdCI6MTc3MTM4Mzc2OSwiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.HCXkj1sYeR-1sXCvIQDgzgLuRVWo2NwI5M0WFTsbEtU'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/users?soft=with
+
+Server response
+Code	Details
+200	
+Response body
+
+{
+  "items": [
+    {
+      "id": 12,
+      "username": "aaaa bbb cccc ddddd",
+      "email": "arxxxxes2000@gmail.com",
+      "email_verified": true,
+      "is_admin": false
+    },
+    {
+      "id": 11,
+      "username": "update",
+      "email": "update@update.cem",
+      "email_verified": true,
+      "is_admin": false
+    },
+    {
+      "id": 10,
+      "username": "asasa fgfg",
+      "email": "aaaareaaas2ddd000@gmail.com",
+      "email_verified": true,
+      "is_admin": false,
+      "deleted_at": "2026-02-18T06:20:56.99+03:00"
+    },
+    {
+      "id": 9,
+      "username": "dfgdfg dfgdfg",
+      "email": "ares2ggddd000@gmail.com",
+      "email_verified": false,
+      "is_admin": false
+    },
+    {
+      "id": 8,
+      "username": "vbcvbcvbb",
+      "email": "ares2000cvbcvb@gmail.com",
+      "email_verified": true,
+      "is_admin": false
+    },
+    {
+      "id": 7,
+      "username": "qweqweqwe",
+      "email": "areseeeeee2000@gmail.com",
+      "email_verified": false,
+      "is_admin": false
+    },
+    {
+      "id": 6,
+      "username": "adminsss@demo.com",
+      "email": "ares2sss000@gmail.com",
+      "email_verified": true,
+      "is_admin": false
+    },
+    {
+      "id": 5,
+      "username": "aresds",
+      "email": "ares@asdf.com",
+      "email_verified": true,
+      "is_admin": false
+    },
+    {
+      "id": 4,
+      "username": "sss",
+      "email": "sss@ss.com",
+      "email_verified": false,
+      "is_admin": false
+    },
+    {
+      "id": 3,
+      "username": "ddd",
+      "email": "ddd@dd.com",
+      "email_verified": false,
+      "is_admin": false
+    },
+    {
+      "id": 2,
+      "username": "beyhan",
+      "email": "beyhan@beyhan.dev",
+      "email_verified": true,
+      "is_admin": true
+    },
+    {
+      "id": 1,
+      "username": "admin",
+      "email": "admin@gauth.local",
+      "email_verified": true,
+      "is_admin": false
+    }
+  ],
+  "page": 1,
+  "per_page": 20,
+  "total": 12
+}
+
+Response headers
+
+ content-length: 1302 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 03:30:26 GMT 
+
+ #################
+ sadece soft delete edilmis Userler
+ curl -X 'GET' \
+  'http://localhost:8080/api/v1/admin/users?soft=only' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzEzOTE5NDgsImlhdCI6MTc3MTM4MTE0OCwiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.MmYgMyLECZD1TcDOvDZCyWRKk9ogjFYhXnTXYUGzhMo'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/users?soft=only
+
+Server response
+Code	Details
+200	
+Response body
+
+{
+  "items": null,
+  "page": 1,
+  "per_page": 20,
+  "total": 0
+}
+
+Response headers
+
+ content-length: 47 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 02:22:00 GMT 
+
+ ############
+ tek useri goster
+
+ curl -X 'GET' \
+  'http://localhost:8080/api/v1/admin/users/11' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzEzOTE5NDgsImlhdCI6MTc3MTM4MTE0OCwiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.MmYgMyLECZD1TcDOvDZCyWRKk9ogjFYhXnTXYUGzhMo'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/users/11
+
+Server response
+Code	Details
+200	
+Response body
+
+{
+  "data": {
+    "id": 11,
+    "username": "zxzx jkhjk",
+    "email": "addredds2dd000@gmail.com",
+    "email_verified": true,
+    "is_admin": false
+  }
+}
+
+Response headers
+
+ content-length: 128 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 02:23:44 GMT 
+
+ #################
+ user iguncelle
+ curl -X 'PUT' \
+  'http://localhost:8080/api/v1/admin/users/11' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzEzOTE5NDgsImlhdCI6MTc3MTM4MTE0OCwiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.MmYgMyLECZD1TcDOvDZCyWRKk9ogjFYhXnTXYUGzhMo' \
+  -H 'Content-Type: application/json' \
+  -d '{
+  "email": "update@update.cem",
+  "is_admin": false,
+  "username": "update"
+}'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/users/11
+
+Server response
+Code	Details
+200	
+Response body
+
+{
+  "data": {
+    "id": 11,
+    "username": "update",
+    "email": "update@update.cem",
+    "email_verified": true,
+    "is_admin": false
+  }
+}
+
+Response headers
+
+ access-control-allow-credentials: true 
+ access-control-allow-headers: Authorization,Content-Type,Accept,Origin,X-Requested-With 
+ access-control-allow-methods: GET,POST,PUT,PATCH,DELETE,OPTIONS 
+ access-control-allow-origin: http://localhost:8080 
+ access-control-max-age: 600 
+ content-length: 105 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 02:25:24 GMT 
+ vary: Origin 
+
+Responses
+
+#################
+useri sil
+ curl -X 'DELETE' \
+  'http://localhost:8080/api/v1/admin/users/10' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzEzOTE5NDgsImlhdCI6MTc3MTM4MTE0OCwiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.MmYgMyLECZD1TcDOvDZCyWRKk9ogjFYhXnTXYUGzhMo'
+
+Request URL
+
+http://localhost:8080/api/v1/admin/users/10
+
+Server response
+Code	Details
+200
+Undocumented
+	
+Response body
+
+{
+  "id": 10,
+  "message": "user deleted successfully"
+}
+
+Response headers
+
+ access-control-allow-credentials: true 
+ access-control-allow-headers: Authorization,Content-Type,Accept,Origin,X-Requested-With 
+ access-control-allow-methods: GET,POST,PUT,PATCH,DELETE,OPTIONS 
+ access-control-allow-origin: http://localhost:8080 
+ access-control-max-age: 600 
+ content-length: 47 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 02:27:59 GMT 
+ vary: Origin 
+
+ #################
+  User Restore
+  curl -X 'POST' \
+  'http://localhost:8080/api/v1/admin/users/10/restore' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzEzOTE5NDgsImlhdCI6MTc3MTM4MTE0OCwiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.MmYgMyLECZD1TcDOvDZCyWRKk9ogjFYhXnTXYUGzhMo' \
+  -d ''
+
+Request URL
+
+http://localhost:8080/api/v1/admin/users/10/restore
+
+Server response
+Code	Details
+200	
+Response body
+
+{
+  "data": {
+    "id": 10,
+    "username": "sfsdf. rtyrty",
+    "email": "aaaareaaas2ddd000@gmail.com",
+    "email_verified": true,
+    "is_admin": false
+  }
+}
+
+Response headers
+
+ access-control-allow-credentials: true 
+ access-control-allow-headers: Authorization,Content-Type,Accept,Origin,X-Requested-With 
+ access-control-allow-methods: GET,POST,PUT,PATCH,DELETE,OPTIONS 
+ access-control-allow-origin: http://localhost:8080 
+ access-control-max-age: 600 
+ content-length: 122 
+ content-type: application/json; charset=utf-8 
+ date: Wed,18 Feb 2026 02:28:49 GMT 
+ vary: Origin 

frontend/belgeler/login_register.md

@@ -0,0 +1,194 @@
+once login ve registeri yapalim 
+frontend
+ Proje `frontend` klasörü altında yapılandırılmıştır. Gerekli tüm paketler (`package.json`) önceden yüklenmiştir:
+- **Framework:** Next.js 16 (App Router)
+- **UI:** React 19, Tailwind CSS v4, shadcn/ui
+- **İkonlar:** lucide-react
+- **Validasyon:** Zod
+- **Auth:** NextAuth.js
+- **Bildirimler:** SweetAlert2
+- **Güvenlik:** nextjs-turnstile (Cloudflare)
+
+Login Backend
+curl -X 'POST' \
+  'http://localhost:8080/api/v1/auth/login' \
+  -H 'accept: application/json' \
+  -H 'Content-Type: application/json' \
+  -d '{
+  "email": "beyhan@beyhan.dev",
+  "password": "1923btO**"
+}'
+
+Request URL
+
+http://localhost:8080/api/v1/auth/login
+
+Server response
+Code	Details
+200	
+Response body
+Download
+
+{
+  "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzEzNzA1NzcsImlhdCI6MTc3MTM1OTc3NywiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.zBCWJlsJxOvB4EzGn5ReutjocF884kJjFsPojbMCWiY",
+  "refresh_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzY1NDM3NzcsImlhdCI6MTc3MTM1OTc3Nywic3ViIjoyLCJ0b2tlbl90eXBlIjoicmVmcmVzaCJ9.1ASz8UcbuWY7zKRipoFuHbpTBcBMWEbp4TuNKlFffmA",
+  "user": {
+    "id": 2,
+    "username": "beyhan",
+    "email": "beyhan@beyhan.dev",
+    "email_verified": true,
+    "is_admin": true
+  }
+}
+
+Response headers
+
+ access-control-allow-credentials: true 
+ access-control-allow-headers: Authorization,Content-Type,Accept,Origin,X-Requested-With 
+ access-control-allow-methods: GET,POST,PUT,PATCH,DELETE,OPTIONS 
+ access-control-allow-origin: http://localhost:8080 
+ access-control-max-age: 600 
+ content-length: 498 
+ content-type: application/json; charset=utf-8 
+ date: Tue,17 Feb 2026 20:22:57 GMT 
+ vary: Origin 
+
+Responses
+
+
+Register Backend
+curl -X 'POST' \
+  'http://localhost:8080/api/v1/auth/register' \
+  -H 'accept: application/json' \
+  -H 'Content-Type: application/json' \
+  -d '{
+  "email": "ares@asdf.com",
+  "password": "12345678",
+  "username": "aresds"
+}'
+
+Request URL
+
+http://localhost:8080/api/v1/auth/register
+
+Server response
+Code	Details
+201	
+Response body
+Download
+
+{
+  "message": "Registration successful. Please check your email to verify your account.",
+  "user": {
+    "id": 5,
+    "username": "aresds",
+    "email": "ares@asdf.com",
+    "email_verified": false,
+    "is_admin": false
+  }
+}
+
+Response headers
+
+ access-control-allow-credentials: true 
+ access-control-allow-headers: Authorization,Content-Type,Accept,Origin,X-Requested-With 
+ access-control-allow-methods: GET,POST,PUT,PATCH,DELETE,OPTIONS 
+ access-control-allow-origin: http://localhost:8080 
+ access-control-max-age: 600 
+ content-length: 186 
+ content-type: application/json; charset=utf-8 
+ date: Tue,17 Feb 2026 20:24:12 GMT 
+ vary: Origin 
+
+ Email Token Dogrulama
+
+ curl -X 'GET' \
+  'http://localhost:8080/api/v1/auth/verify-email?token=e77abe8a0843b480cb00174d1a234568dea7ff8965c307365617f15726b20b00' \
+  -H 'accept: application/json'
+
+Request URL
+
+http://localhost:8080/api/v1/auth/verify-email?token=e77abe8a0843b480cb00174d1a234568dea7ff8965c307365617f15726b20b00
+
+Server response
+Code	Details
+200	
+Response body
+Download
+
+{
+  "message": "Email verified successfully"
+}
+
+Response headers
+
+ content-length: 41 
+ content-type: application/json; charset=utf-8 
+ date: Tue,17 Feb 2026 20:26:14 GMT 
+
+Refresh Token Backend
+
+curl -X 'POST' \
+  'http://localhost:8080/api/v1/auth/refresh' \
+  -H 'accept: application/json' \
+  -H 'Content-Type: application/json' \
+  -d '{
+  "refresh_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzY1NDM3NzcsImlhdCI6MTc3MTM1OTc3Nywic3ViIjoyLCJ0b2tlbl90eXBlIjoicmVmcmVzaCJ9.1ASz8UcbuWY7zKRipoFuHbpTBcBMWEbp4TuNKlFffmA"
+}'
+
+Request URL
+
+http://localhost:8080/api/v1/auth/refresh
+
+Server response
+Code	Details
+200	
+Response body
+Download
+
+{
+  "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzEzNzExMjUsImlhdCI6MTc3MTM2MDMyNSwiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.aW_xKEF2bWcC1xJdUTG4RB8T4ITH2ChnXNIqr8kAqXE",
+  "refresh_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzY1NDQzMjUsImlhdCI6MTc3MTM2MDMyNSwic3ViIjoyLCJ0b2tlbl90eXBlIjoicmVmcmVzaCJ9.ybzA7oG7RJFSA5azD5h3mpwEXNapb2NyO4sWV-m3Jd4"
+}
+
+Response headers
+
+ access-control-allow-credentials: true 
+ access-control-allow-headers: Authorization,Content-Type,Accept,Origin,X-Requested-With 
+ access-control-allow-methods: GET,POST,PUT,PATCH,DELETE,OPTIONS 
+ access-control-allow-origin: http://localhost:8080 
+ access-control-max-age: 600 
+ content-length: 396 
+ content-type: application/json; charset=utf-8 
+ date: Tue,17 Feb 2026 20:32:05 GMT 
+ vary: Origin 
+############################
+ Auth ME
+ curl -X 'GET' \
+  'http://localhost:8080/api/v1/auth/me' \
+  -H 'accept: application/json' \
+  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NzEzNzIyMzIsImlhdCI6MTc3MTM2MTQzMiwiaXNfYWRtaW4iOnRydWUsInN1YiI6MiwidG9rZW5fdHlwZSI6ImFjY2VzcyJ9.LfpH9ldKqR2h1zqwXYHPNsqrzh20pYhFAdgCCEbKtwc'
+
+Request URL
+
+http://localhost:8080/api/v1/auth/me
+
+Server response
+Code	Details
+200	
+Response body
+Download
+
+{
+  "email": "beyhan@beyhan.dev",
+  "email_verified": true,
+  "id": 2,
+  "is_admin": true,
+  "username": "beyhan"
+}
+
+Response headers
+
+ content-length: 94 
+ content-type: application/json; charset=utf-8 
+ date: Tue,17 Feb 2026 20:51:52 GMT 

frontend/components.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

frontend/components/admin/AdminHeader.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import { useSession, signOut } from "next-auth/react"
+import { ModeToggle } from "@/components/ui/mode-toggle"
+import { Button } from "@/components/ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger
+} from "@/components/ui/dropdown-menu"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { LogOut, User } from "lucide-react"
+
+export function AdminHeader() {
+    const { data: session } = useSession()
+
+    return (
+        <header className="sticky top-0 z-30 flex h-16 items-center gap-4 border-b bg-background px-6 shadow-sm">
+            <div className="flex flex-1 items-center gap-4">
+                <h1 className="text-lg font-semibold md:text-xl">Yönetici Paneli</h1>
+            </div>
+            <div className="flex items-center gap-4">
+                <ModeToggle />
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon" className="rounded-full">
+                            <Avatar>
+                                <AvatarImage src={session?.user?.image || ""} alt={session?.user?.name || "Admin"} />
+                                <AvatarFallback>{session?.user?.name?.[0]?.toUpperCase() || "A"}</AvatarFallback>
+                            </Avatar>
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                        <DropdownMenuLabel>Hesabım</DropdownMenuLabel>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem disabled>
+                            <User className="mr-2 h-4 w-4" />
+                            <span>Profil</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem onClick={() => signOut({ callbackUrl: "/auth/login" })}>
+                            <LogOut className="mr-2 h-4 w-4" />
+                            <span>Çıkış Yap</span>
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </div>
+        </header>
+    )
+}

frontend/components/admin/AdminSidebar.tsx

@@ -0,0 +1,105 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { cn } from "@/lib/utils"
+import {
+    LayoutDashboard,
+    Users,
+    ShoppingBag,
+    Settings,
+    Package,
+    FileText,
+    Tag,
+    List,
+    Image // Import Image icon
+} from "lucide-react"
+
+const sidebarItems = [
+    {
+        title: "Dashboard",
+        href: "/admin",
+        icon: LayoutDashboard,
+    },
+    {
+        title: "Kullanıcılar",
+        href: "/admin/users",
+        icon: Users,
+    },
+    {
+        title: "Ürünler",
+        href: "/admin/products",
+        icon: Package,
+    },
+    {
+        title: "Siparişler",
+        href: "/admin/orders",
+        icon: ShoppingBag,
+    },
+    {
+        title: "Blog Yazıları",
+        href: "/admin/posts",
+        icon: FileText,
+    },
+    {
+        title: "Kategoriler",
+        href: "/admin/categories",
+        icon: List, // Using List icon for categories, need to import it
+    },
+    {
+        title: "Tags",
+        href: "/admin/tags",
+        icon: Tag,
+    },
+    {
+        title: "Hero Banner",
+        href: "/admin/heroes",
+        icon: Image,
+    },
+    {
+        title: "Ayarlar",
+        href: "/admin/settings",
+        icon: Settings,
+    },
+]
+
+export function AdminSidebar() {
+    const pathname = usePathname()
+
+    return (
+        <div className="hidden border-r bg-muted/40 md:block w-64 min-h-screen">
+            <div className="flex h-full max-h-screen flex-col gap-2">
+                <div className="flex h-16 items-center border-b px-6">
+                    <Link href="/" className="flex items-center gap-2 font-semibold">
+                        <Package className="h-6 w-6" />
+                        <span className="">E-Ticaret Admin</span>
+                    </Link>
+                </div>
+                <div className="flex-1 overflow-auto py-2">
+                    <nav className="grid items-start px-4 text-sm font-medium">
+                        {sidebarItems.map((item) => {
+                            const Icon = item.icon
+                            const isActive = pathname === item.href
+
+                            return (
+                                <Link
+                                    key={item.href}
+                                    href={item.href}
+                                    className={cn(
+                                        "flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary",
+                                        isActive
+                                            ? "bg-muted text-primary"
+                                            : "text-muted-foreground"
+                                    )}
+                                >
+                                    <Icon className="h-4 w-4" />
+                                    {item.title}
+                                </Link>
+                            )
+                        })}
+                    </nav>
+                </div>
+            </div>
+        </div>
+    )
+}

frontend/components/providers/NextAuthProvider.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { SessionProvider } from "next-auth/react";
+import React from "react";
+
+interface NextAuthProviderProps {
+    children: React.ReactNode;
+}
+
+export const NextAuthProvider = ({ children }: NextAuthProviderProps) => {
+    return <SessionProvider>{children}</SessionProvider>;
+};

frontend/components/providers/ThemeProvider.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+
+export function ThemeProvider({
+    children,
+    ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+    return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

frontend/components/ui/avatar.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

frontend/components/ui/badge.tsx

@@ -0,0 +1,48 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border border-transparent 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: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "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:
+          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

frontend/components/ui/button.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+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",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-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-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

frontend/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,
+}

frontend/components/ui/data-table.tsx

@@ -0,0 +1,134 @@
+"use client"
+
+import * as React from "react"
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+} from "@tanstack/react-table"
+
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[]
+    data: TData[]
+    searchKey?: string
+    onSearch?: (value: string) => void
+    pageCount?: number
+    page?: number
+    onPageChange?: (page: number) => void
+}
+
+export function DataTable<TData, TValue>({
+    columns,
+    data,
+    searchKey,
+    onSearch,
+    pageCount,
+    page,
+    onPageChange,
+}: DataTableProps<TData, TValue>) {
+    // eslint-disable-next-line react-hooks/incompatible-library
+    const table = useReactTable({
+        data: data || [],
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        manualPagination: true,
+        pageCount: pageCount,
+    })
+
+    return (
+        <div className="space-y-4">
+            {searchKey && onSearch && (
+                <div className="flex items-center py-4">
+                    <Input
+                        placeholder="Ara..."
+                        onChange={(event) => onSearch(event.target.value)}
+                        className="max-w-sm"
+                    />
+                </div>
+            )}
+            <div className="rounded-md border">
+                <Table>
+                    <TableHeader>
+                        {table.getHeaderGroups().map((headerGroup) => (
+                            <TableRow key={headerGroup.id}>
+                                {headerGroup.headers.map((header) => {
+                                    return (
+                                        <TableHead key={header.id}>
+                                            {header.isPlaceholder
+                                                ? null
+                                                : flexRender(
+                                                    header.column.columnDef.header,
+                                                    header.getContext()
+                                                )}
+                                        </TableHead>
+                                    )
+                                })}
+                            </TableRow>
+                        ))}
+                    </TableHeader>
+                    <TableBody>
+                        {table.getRowModel().rows?.length ? (
+                            table.getRowModel().rows.map((row) => (
+                                <TableRow
+                                    key={row.id}
+                                    data-state={row.getIsSelected() && "selected"}
+                                >
+                                    {row.getVisibleCells().map((cell) => (
+                                        <TableCell key={cell.id}>
+                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            ))
+                        ) : (
+                            <TableRow>
+                                <TableCell colSpan={columns.length} className="h-24 text-center">
+                                    Sonuç bulunamadı.
+                                </TableCell>
+                            </TableRow>
+                        )}
+                    </TableBody>
+                </Table>
+            </div>
+
+            {(pageCount !== undefined && page !== undefined && onPageChange) && (
+                <div className="flex items-center justify-end space-x-2 py-4">
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => onPageChange(Math.max(page - 1, 1))}
+                        disabled={page === 1}
+                    >
+                        <ChevronLeft className="h-4 w-4" />
+                        Önceki
+                    </Button>
+                    <div className="text-sm text-muted-foreground">
+                        Sayfa {page} / {pageCount || 1}
+                    </div>
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => onPageChange(Math.min(page + 1, pageCount || 1))}
+                        disabled={page >= (pageCount || 1)}
+                    >
+                        Sonraki
+                        <ChevronRight className="h-4 w-4" />
+                    </Button>
+                </div>
+            )}
+        </div>
+    )
+}

frontend/components/ui/dialog.tsx

@@ -0,0 +1,158 @@
+"use client"
+
+import * as React from "react"
+import { XIcon } from "lucide-react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+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 outline-none 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,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+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,
+}

frontend/components/ui/dropdown-menu.tsx

@@ -0,0 +1,257 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+
+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,
+}

frontend/components/ui/form.tsx

@@ -0,0 +1,167 @@
+"use client"
+
+import * as React from "react"
+import type { Label as LabelPrimitive } from "radix-ui"
+import { Slot } from "radix-ui"
+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.Root>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot.Root
+      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,
+}

frontend/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 }

frontend/components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+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 }

frontend/components/ui/mode-toggle.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ModeToggle() {
+    const { setTheme } = useTheme()
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="icon">
+                    <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+                    <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+                    <span className="sr-only">Tema değiştir</span>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => setTheme("light")}>
+                    Aydınlık
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setTheme("dark")}>
+                    Koyu
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setTheme("system")}>
+                    Sistem
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    )
+}

frontend/components/ui/select.tsx

@@ -0,0 +1,190 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { Select as SelectPrimitive } from "radix-ui"
+
+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 = "item-aligned",
+  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
+        data-slot="select-item-indicator"
+        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,
+}

frontend/components/ui/sonner.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

frontend/components/ui/switch.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+    React.ElementRef<typeof SwitchPrimitives.Root>,
+    React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+    <SwitchPrimitives.Root
+        className={cn(
+            "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+            className
+        )}
+        {...props}
+        ref={ref}
+    >
+        <SwitchPrimitives.Thumb
+            className={cn(
+                "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+            )}
+        />
+    </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

frontend/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,
+}

frontend/components/ui/tabs.tsx

@@ -0,0 +1,91 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground",
+        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

frontend/components/ui/textarea.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef<
+    HTMLTextAreaElement,
+    React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+    return (
+        <textarea
+            className={cn(
+                "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+                className
+            )}
+            ref={ref}
+            {...props}
+        />
+    )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }

frontend/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

frontend/hooks/useSlug.ts

@@ -0,0 +1,16 @@
+import { useCallback } from 'react';
+
+export const useSlug = () => {
+    const slugify = useCallback((text: string) => {
+        return text
+            .toString()
+            .toLowerCase()
+            .trim()
+            .replace(/\s+/g, '-')     // Replace spaces with -
+            .replace(/&/g, '-and-')   // Replace & with 'and'
+            .replace(/[^\w-]+/g, '')  // Remove all non-word chars
+            .replace(/--+/g, '-');    // Replace multiple - with single -
+    }, []);
+
+    return { slugify };
+};

frontend/lib/api-proxy.ts

@@ -0,0 +1,105 @@
+import { NextRequest, NextResponse } from "next/server"
+import { optimizeImage } from "./image-optimizer"
+import { getToken } from "next-auth/jwt"
+
+const API_URL = (process.env.NEXT_PUBLIC_API_URL || "http://localhost:8080") + "/api/v1"
+
+export async function handleImageProxyRequest(req: NextRequest, targetEndpoint: string) {
+    try {
+        const formData = await req.formData()
+        const newFormData = new FormData()
+
+        // Process fields
+        // We need to iterate twice: first to collect all config fields, then to process files
+        const configMap = new Map<string, string>()
+        for (const [key, value] of formData.entries()) {
+            if (typeof value === "string") {
+                configMap.set(key, value)
+            }
+        }
+
+        for (const [key, value] of formData.entries()) {
+            if (value instanceof File && value.size > 0) {
+                // Determine configuration for this file
+                let width = 0
+                let height = 0
+                let quality = 80
+                let format = "avif"
+
+                // Heuristic 1: "image" field maps to root "width", "height", etc.
+                if (key === "image") {
+                    width = Number(configMap.get("width")) || 0
+                    height = Number(configMap.get("height")) || 0
+                    quality = Number(configMap.get("quality")) || 80
+                    format = configMap.get("format") || "avif"
+                }
+                // Heuristic 2: "[prefix]_logo" maps to "[prefix]_width", etc.
+                else if (key.endsWith("_logo")) {
+                    const prefix = key.replace("_logo", "")
+                    width = Number(configMap.get(`${prefix}_width`)) || 0
+                    height = Number(configMap.get(`${prefix}_height`)) || 0
+                    quality = Number(configMap.get(`${prefix}_quality`)) || 80
+                    format = configMap.get(`${prefix}_format`) || "avif"
+                }
+
+                // If any config is found (or defaults for "image"), optimize
+                if (key === "image" || key.endsWith("_logo")) {
+                    const buffer = Buffer.from(await value.arrayBuffer())
+                    const { buffer: processedBuffer, contentType, filename } = await optimizeImage(buffer, {
+                        width,
+                        height,
+                        quality,
+                        format,
+                    })
+
+                    // Create Blob from Buffer
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const blob = new Blob([processedBuffer as any], { type: contentType })
+                    newFormData.append(key, blob, filename)
+                } else {
+                    // Just forward other files as is
+                    newFormData.append(key, value)
+                }
+            } else {
+                newFormData.append(key, value)
+            }
+        }
+
+        // Get Auth Token (Server-side)
+        // NextAuth's getSession might not work in API routes depending on setup, 
+        // getToken is more reliable for middleware/API routes.
+        const token = await getToken({ req, secret: process.env.NEXTAUTH_SECRET })
+
+        const headers: HeadersInit = {}
+        if (token && token.accessToken) {
+            headers["Authorization"] = `Bearer ${token.accessToken}`
+        }
+
+        // Determine method (POST or PUT)
+        const method = req.method
+
+        const targetUrl = `${API_URL}${targetEndpoint}`
+
+        const response = await fetch(targetUrl, {
+            method: method,
+            headers: headers,
+            body: newFormData,
+        })
+
+        const data = await response.json()
+
+        if (!response.ok) {
+            return NextResponse.json(data, { status: response.status })
+        }
+
+        return NextResponse.json(data)
+
+    } catch (error: unknown) {
+        console.error("Proxy Error:", error)
+        const errorMessage = error instanceof Error ? error.message : "Internal Server Error"
+        return NextResponse.json(
+            { error: errorMessage },
+            { status: 500 }
+        )
+    }
+}

frontend/lib/auth-schema.ts

@@ -0,0 +1,21 @@
+import { z } from "zod";
+
+export const loginSchema = z.object({
+    email: z.string().email({ message: "Geçerli bir e-posta adresi giriniz." }),
+    password: z.string().min(6, { message: "Şifre en az 6 karakter olmalıdır." }),
+    // Turnstile token is optional in schema but required for submission logic if enabled
+    turnstileToken: z.string().optional(),
+});
+
+export const registerSchema = z.object({
+    username: z.string().min(3, { message: "Kullanıcı adı en az 3 karakter olmalıdır." }),
+    email: z.string().email({ message: "Geçerli bir e-posta adresi giriniz." }),
+    password: z.string().min(8, { message: "Şifre en az 8 karakter olmalıdır." }),
+    confirmPassword: z.string().min(8, { message: "Şifre tekrarı en az 8 karakter olmalıdır." }),
+}).refine((data) => data.password === data.confirmPassword, {
+    message: "Şifreler eşleşmiyor.",
+    path: ["confirmPassword"],
+});
+
+export type LoginInput = z.infer<typeof loginSchema>;
+export type RegisterInput = z.infer<typeof registerSchema>;

frontend/lib/image-optimizer.ts

@@ -0,0 +1,54 @@
+import sharp from "sharp"
+
+export interface ImageOptions {
+    width?: number
+    height?: number
+    quality?: number
+    format?: string // "webp", "jpeg", "png", "avif"
+}
+
+export async function optimizeImage(buffer: Buffer, options: ImageOptions): Promise<{ buffer: Buffer; contentType: string; filename: string }> {
+    let pipeline = sharp(buffer)
+
+    // Resize if width or height is provided and greater than 0
+    if ((options.width && options.width > 0) || (options.height && options.height > 0)) {
+        pipeline = pipeline.resize({
+            width: options.width && options.width > 0 ? options.width : undefined,
+            height: options.height && options.height > 0 ? options.height : undefined,
+            fit: "cover", // Or 'contain', 'fill' based on requirement. Cover is usually good for heroes.
+            withoutEnlargement: true,
+        })
+    }
+
+    // Default format is AVIF if not specified
+    const format = options.format?.toLowerCase() || "avif"
+    const quality = options.quality && options.quality > 0 ? options.quality : 80
+
+    switch (format) {
+        case "jpeg":
+        case "jpg":
+            pipeline = pipeline.jpeg({ quality })
+            break
+        case "png":
+            pipeline = pipeline.png({ quality, compressionLevel: 9 }) // PNG quality is different, usually compression level
+            break
+        case "webp":
+            pipeline = pipeline.webp({ quality })
+            break
+        case "avif":
+            pipeline = pipeline.avif({ quality })
+            break
+        default:
+            pipeline = pipeline.avif({ quality })
+            break
+    }
+
+    const processedBuffer = await pipeline.toBuffer()
+    const extension = format === "jpg" ? "jpeg" : format
+
+    return {
+        buffer: processedBuffer,
+        contentType: `image/${extension}`,
+        filename: `image.${extension}`, // Generic filename, caller can prepend/append if needed
+    }
+}

frontend/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))
+}

frontend/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

frontend/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

frontend/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "Frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@tanstack/react-table": "^8.21.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.574.0",
+    "next": "16.1.6",
+    "next-auth": "^4.24.13",
+    "next-themes": "^0.4.6",
+    "radix-ui": "^1.4.3",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-hook-form": "^7.71.1",
+    "sharp": "^0.34.5",
+    "sonner": "^2.0.7",
+    "sweetalert2": "^11.26.18",
+    "sweetalert2-react-content": "^5.1.1",
+    "tailwind-merge": "^3.4.1",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "nextjs-turnstile": "^1.0.3",
+    "shadcn": "^3.8.5",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5"
+  }
+}

frontend/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

frontend/proxy.ts

@@ -0,0 +1,80 @@
+import { withAuth } from "next-auth/middleware"
+import { NextResponse } from "next/server"
+
+const middleware = withAuth(
+    function middleware(req) {
+        const token = req.nextauth.token
+        const isAuth = !!token
+        const isLoginPage = req.nextUrl.pathname.startsWith("/auth/login")
+        const isAdminPage = req.nextUrl.pathname.startsWith("/admin")
+
+        // 1. If already logged in and trying to access login page, redirect to Dashboard or Home
+        if (isLoginPage) {
+            if (isAuth) {
+                if (token?.is_admin) {
+                    // If admin is logging in, they might want to go to dashboard.
+                    // But if they just hit /auth/login, maybe just home is fine?
+                    // Let's keep it simple: if query param callbackUrl is present, NextAuth handles it.
+                    // If not, we can redirect to /admin if they are admin, or / if not.
+                    // actually, let's just let them go to home for now to avoid loops, unless they specifically came from admin.
+                    // The user request said "admin sayfasina gitmek istersek gidecegin login olani yonlendimeyecegiz admin e"
+                    // This is a bit ambiguous. "If we want to go to admin page, the login one we go to shouldn't redirect to admin"?
+                    // Wait, "admin in altindaki login de kalkmali bole bişi olmamamli" -> remove /admin/login. Done.
+                    // "admin sayfasina gitmek istersek gidecegin login olani yonlendimeyecegiz admin e" ->
+                    // "If we want to go to admin page [and are not logged in], [we go to login], [but] the login one shouldn't redirect [everyone] to admin".
+                    // So /auth/login shouldn't default redirect to /admin.
+                    return NextResponse.redirect(new URL("/admin", req.url))
+                }
+                return NextResponse.redirect(new URL("/", req.url))
+            }
+            return null
+        }
+
+        // 2. Admin Route Protection
+        if (isAdminPage) {
+            // Not authenticated handled by `authorized` callback below implicitly,
+            // but we can double check here.
+
+            // If authenticated but NOT admin -> 403 or redirect
+            if (isAuth && !token?.is_admin) {
+                // You can rewrite to a 403 page or redirect to home/login
+                // rewriting to /403 implies you have a page.tsx there.
+                // For now, let's redirect to home with an error parameter or just home.
+                return NextResponse.redirect(new URL("/", req.url))
+            }
+        }
+
+        // Allow other authenticated access if needed
+    },
+    {
+        callbacks: {
+            authorized: ({ req, token }) => {
+                const pathname = req.nextUrl.pathname;
+
+                // Public Routes (Auth pages are already handled by next-auth logic usually, but let's be explicit)
+                if (pathname.startsWith("/auth/")) {
+                    return true
+                }
+
+                // Admin Routes -> Require Token
+                if (pathname.startsWith("/admin")) {
+                    return !!token // Must be logged in (is_admin check is done in middleware function)
+                }
+
+                // Default: Allow access (e.g. public landing pages)
+                // If you want to protect everything else, change to `return !!token`
+                return true
+            },
+        },
+        pages: {
+            signIn: "/auth/login",
+        }
+    }
+)
+
+export const proxy = middleware
+
+export const config = {
+    // Protect admin routes and ensure auth routes pass through middleware for redirection logic
+    matcher: ["/admin/:path*", "/auth/login"],
+}

frontend/public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

frontend/public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

frontend/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

frontend/public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

frontend/public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

frontend/services/categoryService.ts

@@ -0,0 +1,74 @@
+import { getSession } from "next-auth/react";
+import { Category, CategoryListResponse } from "../types/category";
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL + "/api/v1";
+
+async function fetchWithAuth(url: string, options: RequestInit = {}) {
+    const session = await getSession();
+    if (!session?.accessToken) {
+        throw new Error("No access token found");
+    }
+
+    const headers = {
+        ...options.headers,
+        "Authorization": `Bearer ${session.accessToken}`,
+        "Content-Type": "application/json",
+    };
+
+    const response = await fetch(url, { ...options, headers });
+
+    if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.error || errorData.message || "API request failed");
+    }
+
+    // For 204 No Content
+    if (response.status === 204) {
+        return null;
+    }
+
+    return response.json();
+}
+
+export const categoryService = {
+    async getCategories(page = 1, perPage = 20, search = "", soft = ""): Promise<CategoryListResponse> {
+        const query = new URLSearchParams({
+            page: page.toString(),
+            per_page: perPage.toString(),
+            q: search,
+            soft: soft,
+        });
+        const data = await fetchWithAuth(`${API_URL}/admin/categories?${query}`);
+        return data;
+    },
+
+    async createCategory(data: Partial<Category>): Promise<Category> {
+        const res = await fetchWithAuth(`${API_URL}/admin/categories`, {
+            method: "POST",
+            body: JSON.stringify(data),
+        });
+        return res.data;
+    },
+
+    async updateCategory(id: number, data: Partial<Category>): Promise<Category> {
+        const res = await fetchWithAuth(`${API_URL}/admin/categories/${id}`, {
+            method: "PUT",
+            body: JSON.stringify(data),
+        });
+        return res.data;
+    },
+
+    async deleteCategory(id: number): Promise<void> {
+        await fetchWithAuth(`${API_URL}/admin/categories/${id}`, {
+            method: "DELETE",
+        });
+    },
+
+    async restoreCategory(id: number): Promise<Category> {
+        const res = await fetchWithAuth(`${API_URL}/admin/categories/${id}/restore`, {
+            method: "POST",
+            body: JSON.stringify({}),
+        });
+        return res.data;
+    }
+};

frontend/services/heroService.ts

@@ -0,0 +1,104 @@
+import { getSession } from "next-auth/react"
+import { HeroResponse, HeroDetailResponse } from "@/types/hero"
+
+const API_URL = (process.env.NEXT_PUBLIC_API_URL || "http://localhost:8080") + "/api/v1"
+
+async function getAuthHeaders() {
+    const session = await getSession()
+    return {
+        Authorization: `Bearer ${session?.accessToken}`,
+    }
+}
+
+export const heroService = {
+    getHeroes: async (
+        page: number = 1,
+        perPage: number = 20,
+        search: string = "",
+        soft: string = "with"
+    ): Promise<HeroResponse> => {
+        const headers = await getAuthHeaders()
+        const params = new URLSearchParams({
+            page: page.toString(),
+            limit: perPage.toString(),
+            soft: soft,
+        })
+
+        if (search) {
+            params.append("search", search)
+        }
+
+        const res = await fetch(`${API_URL}/admin/heroes?${params}`, {
+            headers: headers as HeadersInit,
+        })
+
+        if (!res.ok) {
+            const errorText = await res.text()
+            console.error("Hero list warning:", res.status, errorText)
+            throw new Error(`Hero listesi alınamadı: ${res.status} ${res.statusText}`)
+        }
+        return res.json()
+    },
+
+    getHeroById: async (id: number): Promise<HeroDetailResponse> => {
+        const headers = await getAuthHeaders()
+        const res = await fetch(`${API_URL}/admin/heroes/${id}`, {
+            headers: headers as HeadersInit,
+        })
+
+        if (!res.ok) throw new Error("Hero detayı alınamadı")
+        return res.json()
+    },
+
+    createHero: async (formData: FormData): Promise<HeroDetailResponse> => {
+        // No auth header needed here because the Next.js API route handles it (it's a same-origin request)
+        // However, if we need to pass the session token from client to server action/route,
+        // standard fetch from client automatically includes cookies for NextAuth.
+
+        const res = await fetch("/api/admin/heroes", {
+            method: "POST",
+            body: formData,
+        })
+
+        if (!res.ok) {
+            const errorData = await res.json()
+            throw new Error(errorData.error || "Hero oluşturulamadı")
+        }
+        return res.json()
+    },
+
+    updateHero: async (id: number, formData: FormData): Promise<HeroDetailResponse> => {
+        const res = await fetch(`/api/admin/heroes/${id}`, {
+            method: "PUT",
+            body: formData,
+        })
+
+        if (!res.ok) {
+            const errorData = await res.json()
+            throw new Error(errorData.error || "Hero güncellenemedi")
+        }
+        return res.json()
+    },
+
+    deleteHero: async (id: number): Promise<void> => {
+        const headers = await getAuthHeaders()
+        const res = await fetch(`${API_URL}/admin/heroes/${id}`, {
+            method: "DELETE",
+            headers: headers as HeadersInit,
+        })
+
+        if (!res.ok) throw new Error("Hero silinemedi")
+    },
+
+    restoreHero: async (id: number): Promise<HeroDetailResponse> => {
+        const headers = await getAuthHeaders()
+        const res = await fetch(`${API_URL}/admin/heroes/${id}/restore`, {
+            method: "POST", // veya dökümantasyona göre PUT/PATCH
+            headers: headers as HeadersInit,
+            body: JSON.stringify({}),
+        })
+
+        if (!res.ok) throw new Error("Hero geri yüklenemedi")
+        return res.json()
+    },
+}

frontend/services/postService.ts

@@ -0,0 +1,102 @@
+import { getSession } from "next-auth/react";
+import { PostDetailResponse, PostListResponse } from "@/types/post";
+
+const API_URL = (process.env.NEXT_PUBLIC_API_URL || "http://localhost:8080") + "/api/v1";
+
+async function getAuthHeaders() {
+    const session = await getSession();
+    return {
+        Authorization: `Bearer ${session?.accessToken}`,
+    };
+}
+
+export const postService = {
+    getPosts: async (
+        page: number = 1,
+        perPage: number = 20,
+        search: string = "",
+        soft: string = "with"
+    ): Promise<PostListResponse> => {
+        const headers = await getAuthHeaders();
+        const params = new URLSearchParams({
+            page: page.toString(),
+            per_page: perPage.toString(),
+            soft: soft,
+        });
+
+        // Backend AdminListPosts arama parametresi olarak "q" kullanıyor
+        if (search) {
+            params.append("q", search);
+        }
+
+        const res = await fetch(`${API_URL}/admin/posts?${params}`, {
+            headers: headers as HeadersInit,
+        });
+
+        if (!res.ok) {
+            const errorText = await res.text();
+            console.error("Post list warning:", res.status, errorText);
+            throw new Error(`Yazı listesi alınamadı: ${res.status} ${res.statusText}`);
+        }
+        return res.json();
+    },
+
+    getPost: async (id: number): Promise<PostDetailResponse> => {
+        const headers = await getAuthHeaders();
+        const res = await fetch(`${API_URL}/admin/posts/${id}`, {
+            headers: headers as HeadersInit,
+        });
+
+        if (!res.ok) throw new Error("Yazı detayı alınamadı");
+        return res.json();
+    },
+
+    createPost: async (formData: FormData): Promise<PostDetailResponse> => {
+        const res = await fetch("/api/admin/posts", {
+            method: "POST",
+            body: formData,
+        });
+
+        if (!res.ok) {
+            const errorData = await res.json();
+            throw new Error(errorData.error || "Yazı oluşturulamadı");
+        }
+        return res.json();
+    },
+
+    updatePost: async (id: number, formData: FormData): Promise<PostDetailResponse> => {
+        console.log("updatePost called with id:", id);
+        const res = await fetch(`/api/admin/posts/${id}`, {
+            method: "PUT",
+            body: formData,
+        });
+
+        if (!res.ok) {
+            const errorData = await res.json();
+            throw new Error(errorData.error || "Yazı güncellenemedi");
+        }
+        return res.json();
+    },
+
+    deletePost: async (id: number): Promise<void> => {
+        const headers = await getAuthHeaders();
+        const res = await fetch(`${API_URL}/admin/posts/${id}`, {
+            method: "DELETE",
+            headers: headers as HeadersInit,
+        });
+
+        if (!res.ok) throw new Error("Yazı silinemedi");
+    },
+
+    restorePost: async (id: number): Promise<PostDetailResponse> => {
+        const headers = await getAuthHeaders();
+        const res = await fetch(`${API_URL}/admin/posts/${id}/restore`, {
+            method: "POST",
+            headers: headers as HeadersInit,
+            body: JSON.stringify({}),
+        });
+
+        if (!res.ok) throw new Error("Yazı geri yüklenemedi");
+        return res.json();
+    },
+};

frontend/services/settingService.ts

@@ -0,0 +1,100 @@
+import { getSession } from "next-auth/react"
+import { SettingResponse, SettingDetailResponse } from "@/types/setting"
+
+const API_URL = (process.env.NEXT_PUBLIC_API_URL || "http://localhost:8080") + "/api/v1"
+
+async function getAuthHeaders() {
+    const session = await getSession()
+    return {
+        Authorization: `Bearer ${session?.accessToken}`,
+    }
+}
+
+export const settingService = {
+    getSettings: async (
+        page: number = 1,
+        perPage: number = 20,
+        search: string = "",
+        soft: string = "with"
+    ): Promise<SettingResponse> => {
+        const headers = await getAuthHeaders()
+        const params = new URLSearchParams({
+            page: page.toString(),
+            per_page: perPage.toString(),
+            soft: soft,
+        })
+
+        if (search) {
+            params.append("search", search)
+        }
+
+        const res = await fetch(`${API_URL}/admin/settings?${params}`, {
+            headers: headers as HeadersInit,
+        })
+
+        if (!res.ok) {
+            const errorText = await res.text()
+            console.error("Setting list warning:", res.status, errorText)
+            throw new Error(`Ayarlar listesi alınamadı: ${res.status} ${res.statusText}`)
+        }
+        return res.json()
+    },
+
+    getSettingById: async (id: number): Promise<SettingDetailResponse> => {
+        const headers = await getAuthHeaders()
+        const res = await fetch(`${API_URL}/admin/settings/${id}`, {
+            headers: headers as HeadersInit,
+        })
+
+        if (!res.ok) throw new Error("Ayar detayı alınamadı")
+        return res.json()
+    },
+
+    createSetting: async (formData: FormData): Promise<SettingDetailResponse> => {
+        const res = await fetch("/api/admin/settings", {
+            method: "POST",
+            body: formData,
+        })
+
+        if (!res.ok) {
+            const errorData = await res.json()
+            throw new Error(errorData.error || "Ayar oluşturulamadı")
+        }
+        return res.json()
+    },
+
+    updateSetting: async (id: number, formData: FormData): Promise<SettingDetailResponse> => {
+        const res = await fetch(`/api/admin/settings/${id}`, {
+            method: "PUT",
+            body: formData,
+        })
+
+        if (!res.ok) {
+            const errorData = await res.json()
+            throw new Error(errorData.error || "Ayar güncellenemedi")
+        }
+        return res.json()
+    },
+
+    deleteSetting: async (id: number): Promise<void> => {
+        const headers = await getAuthHeaders()
+        const res = await fetch(`${API_URL}/admin/settings/${id}`, {
+            method: "DELETE",
+            headers: headers as HeadersInit,
+        })
+
+        if (!res.ok) throw new Error("Ayar silinemedi")
+    },
+
+    restoreSetting: async (id: number): Promise<SettingDetailResponse> => {
+        const headers = await getAuthHeaders()
+        const res = await fetch(`${API_URL}/admin/settings/${id}/restore`, {
+            method: "POST",
+            headers: headers as HeadersInit,
+            body: JSON.stringify({}),
+        })
+
+        if (!res.ok) throw new Error("Ayar geri yüklenemedi")
+        return res.json()
+    },
+}

frontend/services/tagService.ts

@@ -0,0 +1,74 @@
+import { getSession } from "next-auth/react";
+import { Tag, TagListResponse } from "../types/tag";
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL + "/api/v1";
+
+async function fetchWithAuth(url: string, options: RequestInit = {}) {
+    const session = await getSession();
+    if (!session?.accessToken) {
+        throw new Error("No access token found");
+    }
+
+    const headers = {
+        ...options.headers,
+        "Authorization": `Bearer ${session.accessToken}`,
+        "Content-Type": "application/json",
+    };
+
+    const response = await fetch(url, { ...options, headers });
+
+    if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.error || errorData.message || "API request failed");
+    }
+
+    // For 204 No Content
+    if (response.status === 204) {
+        return null;
+    }
+
+    return response.json();
+}
+
+export const tagService = {
+    async getTags(page = 1, perPage = 20, search = "", soft = ""): Promise<TagListResponse> {
+        const query = new URLSearchParams({
+            page: page.toString(),
+            per_page: perPage.toString(),
+            q: search,
+            soft: soft,
+        });
+        const data = await fetchWithAuth(`${API_URL}/admin/tags?${query}`);
+        return data;
+    },
+
+    async createTag(name: string): Promise<Tag> {
+        const data = await fetchWithAuth(`${API_URL}/admin/tags`, {
+            method: "POST",
+            body: JSON.stringify({ name }),
+        });
+        return data.data;
+    },
+
+    async updateTag(id: number, name: string): Promise<Tag> {
+        const data = await fetchWithAuth(`${API_URL}/admin/tags/${id}`, {
+            method: "PUT",
+            body: JSON.stringify({ name }),
+        });
+        return data.data;
+    },
+
+    async deleteTag(id: number): Promise<void> {
+        await fetchWithAuth(`${API_URL}/admin/tags/${id}`, {
+            method: "DELETE",
+        });
+    },
+
+    async restoreTag(id: number): Promise<Tag> {
+        const data = await fetchWithAuth(`${API_URL}/admin/tags/${id}/restore`, {
+            method: "POST",
+            body: JSON.stringify({}),
+        });
+        return data.data;
+    }
+};

frontend/services/userService.ts

@@ -0,0 +1,64 @@
+import { UserListResponse, UserPayload, UserResponse } from "@/types/user";
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8080";
+
+async function fetchWithAuth(url: string, token: string, options: RequestInit = {}) {
+    const headers = {
+        "Content-Type": "application/json",
+        "Authorization": `Bearer ${token}`,
+        ...options.headers,
+    };
+
+    const response = await fetch(`${API_URL}${url}`, {
+        ...options,
+        headers,
+    });
+
+    if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.message || "API request failed");
+    }
+
+    // For 204 No Content
+    if (response.status === 204) {
+        return null;
+    }
+
+    return response.json();
+}
+
+export const userService = {
+    async getUsers(token: string, page: number = 1, per_page: number = 20, soft: string = ""): Promise<UserListResponse> {
+        const queryParams = new URLSearchParams({
+            page: page.toString(),
+            per_page: per_page.toString(),
+        });
+        if (soft) {
+            queryParams.append("soft", soft);
+        }
+        return fetchWithAuth(`/api/v1/admin/users?${queryParams.toString()}`, token);
+    },
+
+    async getUser(token: string, id: number): Promise<UserResponse> {
+        return fetchWithAuth(`/api/v1/admin/users/${id}`, token);
+    },
+
+    async updateUser(token: string, id: number, data: UserPayload): Promise<UserResponse> {
+        return fetchWithAuth(`/api/v1/admin/users/${id}`, token, {
+            method: "PUT",
+            body: JSON.stringify(data),
+        });
+    },
+
+    async deleteUser(token: string, id: number): Promise<void> {
+        return fetchWithAuth(`/api/v1/admin/users/${id}`, token, {
+            method: "DELETE",
+        });
+    },
+
+    async restoreUser(token: string, id: number): Promise<UserResponse> {
+        return fetchWithAuth(`/api/v1/admin/users/${id}/restore`, token, {
+            method: "POST",
+        });
+    },
+};

frontend/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}

frontend/types/category.ts

@@ -0,0 +1,20 @@
+export interface Category {
+    id?: number;       // normalized id (from simplified responses)
+    ID?: number;       // raw Go/GORM ID field from some admin endpoints
+    created_at?: string;
+    updated_at?: string;
+    deleted_at?: string | null;
+    title: string;
+    slug: string;
+    description?: string;
+    parent_id?: number | null;
+    parent?: Category;   // For displaying parent name if needed
+    children?: Category[]; // if nested structure is returned
+}
+
+export interface CategoryListResponse {
+    items: Category[];
+    total: number;
+    page: number;
+    per_page: number;
+}