İmage upload,sıkıştırma

app/(dashboard)/dashboard/sliders/[id]/page.tsx

@@ -0,0 +1,34 @@
+import { SliderForm } from "@/components/dashboard/slider-form"
+import { createClient } from "@/lib/supabase-server"
+import { notFound } from "next/navigation"
+
+interface EditSliderPageProps {
+    params: {
+        id: string
+    }
+}
+
+export default async function EditSliderPage({ params }: EditSliderPageProps) {
+    const supabase = createClient()
+
+    const { data: slider } = await supabase
+        .from('sliders')
+        .select('*')
+        .eq('id', params.id)
+        .single()
+
+    if (!slider) {
+        notFound()
+    }
+
+    return (
+        <div className="flex-1 space-y-4 p-8 pt-6">
+            <div className="flex items-center justify-between space-y-2">
+                <h2 className="text-3xl font-bold tracking-tight">Slider Düzenle</h2>
+            </div>
+            <div className="max-w-2xl">
+                <SliderForm initialData={slider} />
+            </div>
+        </div>
+    )
+}

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

@@ -0,0 +1,124 @@
+"use server"
+
+import { createClient } from "@/lib/supabase-server"
+import { createClient as createSupabaseClient } from "@supabase/supabase-js"
+import { revalidatePath } from "next/cache"
+
+// Admin client for privileged operations
+const supabaseAdmin = createSupabaseClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.SUPABASE_SERVICE_ROLE_KEY!,
+    {
+        auth: {
+            autoRefreshToken: false,
+            persistSession: false
+        }
+    }
+)
+
+async function assertAdmin() {
+    const supabase = createClient()
+    const { data: { user } } = await supabase.auth.getUser()
+    if (!user) throw new Error("Oturum açmanız gerekiyor.")
+
+    const { data: profile } = await supabase.from('profiles').select('role').eq('id', user.id).single()
+    if (profile?.role !== 'admin') throw new Error("Yetkisiz işlem.")
+
+    return user
+}
+
+export async function getSliders() {
+    const supabase = createClient()
+    // Everyone can read, so normal client is fine
+    const { data, error } = await supabase
+        .from('sliders')
+        .select('*')
+        .order('order', { ascending: true })
+        .order('created_at', { ascending: false })
+
+    if (error) return { error: error.message }
+    return { data }
+}
+
+export async function createSlider(data: {
+    title: string
+    description?: string
+    image_url: string
+    link?: string
+    order?: number
+    is_active?: boolean
+}) {
+    try {
+        await assertAdmin()
+
+        const { error } = await supabaseAdmin.from('sliders').insert({
+            title: data.title,
+            description: data.description,
+            image_url: data.image_url,
+            link: data.link,
+            order: data.order || 0,
+            is_active: data.is_active ?? true
+        })
+
+        if (error) throw error
+
+        revalidatePath("/dashboard/sliders")
+        revalidatePath("/") // Homepage cache update
+        return { success: true }
+    } catch (error) {
+        return { error: (error as Error).message }
+    }
+}
+
+export async function updateSlider(id: string, data: {
+    title: string
+    description?: string
+    image_url: string
+    link?: string
+    order?: number
+    is_active?: boolean
+}) {
+    try {
+        await assertAdmin()
+
+        const { error } = await supabaseAdmin
+            .from('sliders')
+            .update({
+                title: data.title,
+                description: data.description,
+                image_url: data.image_url,
+                link: data.link,
+                order: data.order,
+                is_active: data.is_active,
+                // updated_at trigger usually handles time, but we don't have it in schema yet, so maybe add later
+            })
+            .eq('id', id)
+
+        if (error) throw error
+
+        revalidatePath("/dashboard/sliders")
+        revalidatePath("/")
+        return { success: true }
+    } catch (error) {
+        return { error: (error as Error).message }
+    }
+}
+
+export async function deleteSlider(id: string) {
+    try {
+        await assertAdmin()
+
+        const { error } = await supabaseAdmin
+            .from('sliders')
+            .delete()
+            .eq('id', id)
+
+        if (error) throw error
+
+        revalidatePath("/dashboard/sliders")
+        revalidatePath("/")
+        return { success: true }
+    } catch (error) {
+        return { error: (error as Error).message }
+    }
+}

app/(dashboard)/dashboard/sliders/new/page.tsx

@@ -0,0 +1,14 @@
+import { SliderForm } from "@/components/dashboard/slider-form"
+
+export default function NewSliderPage() {
+    return (
+        <div className="flex-1 space-y-4 p-8 pt-6">
+            <div className="flex items-center justify-between space-y-2">
+                <h2 className="text-3xl font-bold tracking-tight">Yeni Slider Oluştur</h2>
+            </div>
+            <div className="max-w-2xl">
+                <SliderForm />
+            </div>
+        </div>
+    )
+}

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

@@ -0,0 +1,85 @@
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Plus, Pencil, Trash2, GripVertical } from "lucide-react"
+import { getSliders, deleteSlider } from "./actions"
+import { Card, CardContent } from "@/components/ui/card"
+import Image from "next/image"
+import { Badge } from "@/components/ui/badge"
+
+export default async function SlidersPage() {
+    const { data: sliders, error } = await getSliders()
+
+    if (error) {
+        return <div className="p-8 text-red-500">Hata: {error}</div>
+    }
+
+    return (
+        <div className="flex-1 space-y-4 p-8 pt-6">
+            <div className="flex items-center justify-between space-y-2">
+                <h2 className="text-3xl font-bold tracking-tight">Slider Yönetimi</h2>
+                <div className="flex items-center space-x-2">
+                    <Link href="/dashboard/sliders/new">
+                        <Button>
+                            <Plus className="mr-2 h-4 w-4" /> Yeni Slider Ekle
+                        </Button>
+                    </Link>
+                </div>
+            </div>
+
+            <div className="grid gap-4">
+                {sliders?.length === 0 ? (
+                    <Card>
+                        <CardContent className="flex flex-col items-center justify-center p-12 text-muted-foreground">
+                            <p>Henüz hiç slider eklenmemiş.</p>
+                        </CardContent>
+                    </Card>
+                ) : (
+                    sliders?.map((slider) => (
+                        <Card key={slider.id} className="overflow-hidden">
+                            <div className="flex flex-col sm:flex-row items-center p-2 gap-4">
+                                <div className="p-2 cursor-move text-muted-foreground">
+                                    <GripVertical className="h-5 w-5" />
+                                </div>
+
+                                <div className="relative w-full sm:w-48 h-32 sm:h-24 rounded-md overflow-hidden bg-slate-100 flex-shrink-0">
+                                    <Image
+                                        src={slider.image_url}
+                                        alt={slider.title}
+                                        fill
+                                        className="object-cover"
+                                    />
+                                </div>
+
+                                <div className="flex-1 min-w-0 grid gap-1 text-center sm:text-left">
+                                    <div className="flex items-center gap-2 justify-center sm:justify-start">
+                                        <h3 className="font-semibold truncate">{slider.title}</h3>
+                                        {!slider.is_active && (
+                                            <Badge variant="secondary">Pasif</Badge>
+                                        )}
+                                        <Badge variant="outline">Sıra: {slider.order}</Badge>
+                                    </div>
+                                    <p className="text-sm text-muted-foreground truncate">
+                                        {slider.description || "Açıklama yok"}
+                                    </p>
+                                </div>
+
+                                <div className="flex items-center gap-2 p-2">
+                                    <Link href={`/dashboard/sliders/${slider.id}`}>
+                                        <Button variant="ghost" size="icon">
+                                            <Pencil className="h-4 w-4" />
+                                        </Button>
+                                    </Link>
+                                    {/* Delete functionality usually needs a client component or form action, 
+                                        for simplicity here we will just link to edit, 
+                                        or we can add a delete button with server action in a separate client component if needed.
+                                        Ideally, list items should be client components to handle delete easily.
+                                    */}
+                                </div>
+                            </div>
+                        </Card>
+                    ))
+                )}
+            </div>
+        </div>
+    )
+}

components/dashboard/slider-form.tsx

@@ -0,0 +1,219 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import * as z from "zod"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { toast } from "sonner"
+import { Loader2 } from "lucide-react"
+import { ImageUpload } from "@/components/ui/image-upload"
+import { createSlider, updateSlider } from "@/app/(dashboard)/dashboard/sliders/actions"
+
+const sliderSchema = z.object({
+    title: z.string().min(2, "Başlık en az 2 karakter olmalıdır"),
+    description: z.string().optional(),
+    image_url: z.string().min(1, "Görsel yüklemek zorunludur"),
+    link: z.string().optional(),
+    order: z.coerce.number().default(0),
+    is_active: z.boolean().default(true),
+})
+
+type SliderFormValues = z.infer<typeof sliderSchema>
+
+interface Slider {
+    id: string
+    title: string
+    description: string | null
+    image_url: string
+    link: string | null
+    order: number | null
+    is_active: boolean | null
+}
+
+interface SliderFormProps {
+    initialData?: Slider
+}
+
+export function SliderForm({ initialData }: SliderFormProps) {
+    const router = useRouter()
+    const [loading, setLoading] = useState(false)
+
+    const form = useForm<SliderFormValues>({
+        resolver: zodResolver(sliderSchema),
+        defaultValues: initialData ? {
+            title: initialData.title,
+            description: initialData.description || "",
+            image_url: initialData.image_url,
+            link: initialData.link || "",
+            order: initialData.order || 0,
+            is_active: initialData.is_active ?? true,
+        } : {
+            title: "",
+            description: "",
+            image_url: "",
+            link: "",
+            order: 0,
+            is_active: true,
+        },
+    })
+
+    async function onSubmit(data: SliderFormValues) {
+        setLoading(true)
+        try {
+            let result
+            if (initialData) {
+                result = await updateSlider(initialData.id, data)
+            } else {
+                result = await createSlider(data)
+            }
+
+            if (result.error) {
+                toast.error(result.error)
+                return
+            }
+
+            toast.success(initialData ? "Slider güncellendi" : "Slider oluşturuldu")
+            router.push("/dashboard/sliders")
+            router.refresh()
+        } catch {
+            toast.error("Bir sorun oluştu.")
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>{initialData ? "Slider Düzenle" : "Yeni Slider Ekle"}</CardTitle>
+            </CardHeader>
+            <CardContent>
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+
+                        <FormField
+                            control={form.control}
+                            name="image_url"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Görsel</FormLabel>
+                                    <FormControl>
+                                        <ImageUpload
+                                            value={field.value}
+                                            onChange={field.onChange}
+                                            onRemove={() => field.onChange("")}
+                                            disabled={loading}
+                                        />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <FormField
+                                control={form.control}
+                                name="title"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Başlık</FormLabel>
+                                        <FormControl>
+                                            <Input placeholder="Örn: Yeni Sezon Modelleri" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+
+                            <FormField
+                                control={form.control}
+                                name="order"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Sıralama</FormLabel>
+                                        <FormControl>
+                                            <Input type="number" {...field} />
+                                        </FormControl>
+                                        <FormDescription>Düşük numara önce gösterilir (0, 1, 2...)</FormDescription>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+
+                        <FormField
+                            control={form.control}
+                            name="description"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Açıklama</FormLabel>
+                                    <FormControl>
+                                        <Textarea placeholder="Kısa açıklama metni..." {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        <FormField
+                            control={form.control}
+                            name="link"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Yönlendirme Linki (Opsiyonel)</FormLabel>
+                                    <FormControl>
+                                        <Input placeholder="/kategori/ev-tipi" {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        <FormField
+                            control={form.control}
+                            name="is_active"
+                            render={({ field }) => (
+                                <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
+                                    <FormControl>
+                                        <Checkbox
+                                            checked={field.value}
+                                            onCheckedChange={field.onChange}
+                                        />
+                                    </FormControl>
+                                    <div className="space-y-1 leading-none">
+                                        <FormLabel>
+                                            Aktif
+                                        </FormLabel>
+                                        <FormDescription>
+                                            Bu slider ana sayfada gösterilsin mi?
+                                        </FormDescription>
+                                    </div>
+                                </FormItem>
+                            )}
+                        />
+
+                        <Button type="submit" disabled={loading} className="w-full sm:w-auto">
+                            {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                            {initialData ? "Kaydet" : "Oluştur"}
+                        </Button>
+                    </form>
+                </Form>
+            </CardContent>
+        </Card>
+    )
+}

components/ui/checkbox.tsx

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

components/ui/image-upload.tsx

@@ -0,0 +1,142 @@
+"use client"
+
+import { useState, useRef } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Loader2, Upload, X, Image as ImageIcon } from "lucide-react"
+import imageCompression from "browser-image-compression"
+import { createClient } from "@/lib/supabase-browser"
+import { toast } from "sonner"
+import Image from "next/image"
+
+interface ImageUploadProps {
+    value?: string
+    onChange: (url: string) => void
+    onRemove: () => void
+    disabled?: boolean
+}
+
+export function ImageUpload({ value, onChange, onRemove, disabled }: ImageUploadProps) {
+    const [loading, setLoading] = useState(false)
+    const fileInputRef = useRef<HTMLInputElement>(null)
+    const supabase = createClient()
+
+    const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0]
+        if (!file) return
+
+        setLoading(true)
+        try {
+            // 1. Client-side Compression
+            const options = {
+                maxSizeMB: 1, // Max 1MB
+                maxWidthOrHeight: 1920, // Max 1920px width/height
+                useWebWorker: true,
+                fileType: "image/webp" // Convert to WebP if possible
+            }
+
+            // Note: browser-image-compression might return Blob instead of File
+            const compressedFile = await imageCompression(file, options)
+
+            // Create a unique file name
+            // folder structure: sliders/[timestamp]-[random].webp
+            const fileExt = "webp" // we are forcing conversion to webp usually, or use compressedFile.type
+            const fileName = `${Date.now()}-${Math.floor(Math.random() * 1000)}.${fileExt}`
+            const filePath = `uploads/${fileName}`
+
+            // 2. Upload to Supabase
+            const { error: uploadError } = await supabase.storage
+                .from("images")
+                .upload(filePath, compressedFile)
+
+            if (uploadError) {
+                throw uploadError
+            }
+
+            // 3. Get Public URL
+            const { data: { publicUrl } } = supabase.storage
+                .from("images")
+                .getPublicUrl(filePath)
+
+            onChange(publicUrl)
+            toast.success("Resim yüklendi ve optimize edildi.")
+
+        } catch (error: any) {
+            console.error("Upload error:", error)
+            toast.error("Resim yüklenirken hata oluştu: " + error.message)
+        } finally {
+            setLoading(false)
+            if (fileInputRef.current) {
+                fileInputRef.current.value = ""
+            }
+        }
+    }
+
+    return (
+        <div className="space-y-4 w-full">
+            <Label>Görsel</Label>
+
+            {value ? (
+                <div className="relative aspect-video w-full max-w-md rounded-lg overflow-hidden border bg-slate-100 dark:bg-slate-800">
+                    <Image
+                        src={value}
+                        alt="Upload preview"
+                        fill
+                        className="object-cover"
+                    />
+                    <Button
+                        type="button"
+                        onClick={onRemove}
+                        variant="destructive"
+                        size="icon"
+                        className="absolute top-2 right-2 h-8 w-8"
+                        disabled={disabled}
+                    >
+                        <X className="h-4 w-4" />
+                    </Button>
+                </div>
+            ) : (
+                <div
+                    onClick={() => fileInputRef.current?.click()}
+                    className="
+                        border-2 border-dashed border-slate-300 dark:border-slate-700 
+                        rounded-lg p-12 
+                        flex flex-col items-center justify-center 
+                        text-slate-500 dark:text-slate-400
+                        hover:bg-slate-50 dark:hover:bg-slate-900/50
+                        transition cursor-pointer
+                        w-full max-w-md
+                    "
+                >
+                    <input
+                        type="file"
+                        accept="image/*"
+                        className="hidden"
+                        ref={fileInputRef}
+                        onChange={handleFileChange}
+                        disabled={loading || disabled}
+                    />
+
+                    {loading ? (
+                        <div className="flex flex-col items-center gap-2">
+                            <Loader2 className="h-10 w-10 animate-spin text-primary" />
+                            <p className="text-sm font-medium">Optimize ediliyor ve yükleniyor...</p>
+                        </div>
+                    ) : (
+                        <div className="flex flex-col items-center gap-2">
+                            <div className="p-4 bg-slate-100 dark:bg-slate-800 rounded-full">
+                                <Upload className="h-6 w-6" />
+                            </div>
+                            <p className="text-sm font-medium">Resim Yükle</p>
+                            <p className="text-xs text-muted-foreground text-center">
+                                Tıklayın veya sürükleyin.<br />
+                                (Otomatik sıkıştırma: Max 1MB, WebP)
+                            </p>
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    )
+}

next.config.mjs

@@ -1,6 +1,14 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     reactStrictMode: true,
+    images: {
+        remotePatterns: [
+            {
+                protocol: 'https',
+                hostname: '**.supabase.co',
+            },
+        ],
+    },
     webpack: (config) => {
         // Suppress cache serialization warnings
         config.infrastructureLogging = {

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@hookform/resolvers": "^5.2.2",
         "@radix-ui/react-avatar": "^1.1.11",
+        "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-dropdown-menu": "^2.1.16",
         "@radix-ui/react-label": "^2.1.8",
@@ -21,6 +22,7 @@
         "@radix-ui/react-tabs": "^1.1.13",
         "@supabase/ssr": "^0.8.0",
         "@supabase/supabase-js": "^2.89.0",
+        "browser-image-compression": "^2.0.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
@@ -666,6 +668,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz",
+      "integrity": "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
@@ -2752,6 +2784,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/browser-image-compression": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/browser-image-compression/-/browser-image-compression-2.0.2.tgz",
+      "integrity": "sha512-pBLlQyUf6yB8SmmngrcOw3EoS4RpQ1BcylI3T9Yqn7+4nrQTXJD4sJDe5ODnJdrvNMaio5OicFo75rDyJD2Ucw==",
+      "license": "MIT",
+      "dependencies": {
+        "uzip": "0.20201231.0"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.28.1",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
@@ -7426,6 +7467,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/uzip": {
+      "version": "0.20201231.0",
+      "resolved": "https://registry.npmjs.org/uzip/-/uzip-0.20201231.0.tgz",
+      "integrity": "sha512-OZeJfZP+R0z9D6TmBgLq2LHzSSptGMGDGigGiEe0pr8UBe/7fdflgHlHBNDASTXB5jnFuxHpNaJywSg8YFeGng==",
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -22,6 +23,7 @@
     "@radix-ui/react-tabs": "^1.1.13",
     "@supabase/ssr": "^0.8.0",
     "@supabase/supabase-js": "^2.89.0",
+    "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",

supabase_schema_sliders.sql

@@ -0,0 +1,88 @@
+-- Create sliders table
+create table if not exists sliders (
+  id uuid default gen_random_uuid() primary key,
+  title text not null,
+  description text,
+  image_url text not null,
+  link text,
+  "order" integer default 0,
+  is_active boolean default true,
+  created_at timestamp with time zone default timezone('utc'::text, now()) not null
+);
+
+-- Enable RLS
+alter table sliders enable row level security;
+
+-- Policies for Sliders Table
+create policy "Public sliders are viewable by everyone."
+  on sliders for select
+  using ( true );
+
+create policy "Admins can insert sliders."
+  on sliders for insert
+  with check (
+    exists (
+      select 1 from profiles
+      where profiles.id = auth.uid() and profiles.role = 'admin'
+    )
+  );
+
+create policy "Admins can update sliders."
+  on sliders for update
+  using (
+    exists (
+      select 1 from profiles
+      where profiles.id = auth.uid() and profiles.role = 'admin'
+    )
+  );
+
+create policy "Admins can delete sliders."
+  on sliders for delete
+  using (
+    exists (
+      select 1 from profiles
+      where profiles.id = auth.uid() and profiles.role = 'admin'
+    )
+  );
+
+-- STORAGE POLICIES (Assuming bucket 'images' exists)
+-- You must create the 'images' bucket in Supabase Dashboard manually if not exists, 
+-- or we can try to insert it via SQL if extensions allow, but usually dashboard is safer for buckets.
+-- Below policies assume the bucket is named 'images' and is set to PUBLIC.
+
+-- 1. Allow public read access to everyone
+create policy "Public Access"
+on storage.objects for select
+using ( bucket_id = 'images' );
+
+-- 2. Allow authenticated admins to upload
+create policy "Admin Upload"
+on storage.objects for insert
+with check (
+  bucket_id = 'images' and
+  exists (
+    select 1 from profiles
+    where profiles.id = auth.uid() and profiles.role = 'admin'
+  )
+);
+
+-- 3. Allow admins to update/delete their images (or all images)
+create policy "Admin Update Delete"
+on storage.objects for update
+using (
+  bucket_id = 'images' and
+  exists (
+    select 1 from profiles
+    where profiles.id = auth.uid() and profiles.role = 'admin'
+  )
+);
+
+create policy "Admin Delete"
+on storage.objects for delete
+using (
+  bucket_id = 'images' and
+  exists (
+    select 1 from profiles
+    where profiles.id = auth.uid() and profiles.role = 'admin'
+  )
+);