[V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; /* Removed non-existent tw-animate-css import that was causing "Invalid custom property" error */ :root { --background: oklch(0.98 0 0); --foreground: oklch(0.15 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.15 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.15 0 0); --primary: oklch(0.55 0.18 142.5); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.97 0.01 142.5); --secondary-foreground: oklch(0.15 0 0); --muted: oklch(0.93 0 0); --muted-foreground: oklch(0.5 0 0); --accent: oklch(0.55 0.18 142.5); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.9 0 0); --input: oklch(0.95 0 0); --ring: oklch(0.55 0.18 142.5); --chart-1: oklch(0.55 0.18 142.5); --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); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.55 0.18 142.5); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.15 0 0); --sidebar-border: oklch(0.9 0 0); --sidebar-ring: oklch(0.55 0.18 142.5); } .dark { --background: oklch(0.12 0 0); --foreground: oklch(0.95 0 0); --card: oklch(0.18 0 0); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.18 0 0); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.65 0.2 142.5); --primary-foreground: oklch(0.12 0 0); --secondary: oklch(0.25 0 0); --secondary-foreground: oklch(0.95 0 0); --muted: oklch(0.3 0 0); --muted-foreground: oklch(0.7 0 0); --accent: oklch(0.65 0.2 142.5); --accent-foreground: oklch(0.12 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.25 0 0); --input: oklch(0.22 0 0); --ring: oklch(0.65 0.2 142.5); --chart-1: oklch(0.65 0.2 142.5); --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.15 0 0); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.65 0.2 142.5); --sidebar-primary-foreground: oklch(0.12 0 0); --sidebar-accent: oklch(0.25 0 0); --sidebar-accent-foreground: oklch(0.95 0 0); --sidebar-border: oklch(0.25 0 0); --sidebar-ring: oklch(0.65 0.2 142.5); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } @keyframes slideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate-slide-in { animation: slideIn 0.5s ease-out; } .animate-fade-in { animation: fadeIn 0.5s ease-out; } @keyframes confetti-fall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; } } @keyframes pulse-scale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes bounce-in { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } } .animate-confetti-fall { animation: confetti-fall 3s ease-in forwards; } .animate-pulse-scale { animation: pulse-scale 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite; } .animate-bounce-in { animation: bounce-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } [V0_FILE]typescriptreact:file="lib/supabase/client.ts" isMerged="true" import { createBrowserClient } from "@supabase/ssr" export function createClient() { return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!) } [V0_FILE]typescriptreact:file="lib/supabase/server.ts" isMerged="true" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" export async function createClient() { const cookieStore = await cookies() return createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) } catch { // Ignore cookie errors from server components } }, }, }) } [V0_FILE]typescriptreact:file="components/navbar.tsx" isEdit="true" isMerged="true" "use client" import Link from "next/link" import { useState } from "react" import { Menu, X } from "lucide-react" import { motion } from "framer-motion" import { ThemeToggle } from "@/components/theme-toggle" export function Navbar() { const [isOpen, setIsOpen] = useState(false) const navItems = [ { label: "Beranda", href: "/" }, { label: "Event", href: "/events" }, { label: "Cara Kerja", href: "/how-it-works" }, { label: "Tentang Kami", href: "/about" }, { label: "Leaderboard", href: "/leaderboard" }, ] return (

{/* Logo */} PROVOTE.ID {/* Desktop Navigation */}

{navItems.map((item, index) => ( {item.label} ))}

{/* Right side actions */}

{/* Theme Toggle */} {/* Mobile menu button */}

{/* Mobile menu */} {isOpen && (

{navItems.map((item) => ( setIsOpen(false)} > {item.label} ))}

)}

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "@supabase/ssr": "0.8.0", "framer-motion": "12.26.2" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/events/page.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { Navbar } from "@/components/navbar" import { createClient } from "@/lib/supabase/client" import { EventCard } from "@/components/event-card" import { Skeleton } from "@/components/ui/skeleton" import { motion } from "framer-motion" import type { Database } from "@/lib/database.types" type Event = Database["public"]["Tables"]["events"]["Row"] type VoteSetting = Database["public"]["Tables"]["vote_settings"]["Row"] export default function EventsPage() { const [events, setEvents] = useState<(Event & { vote_setting?: VoteSetting })[]>([]) const [loading, setLoading] = useState(true) const supabase = createClient() useEffect(() => { const fetchEvents = async () => { try { const { data: eventsData } = await supabase.from("events").select("*").order("created_at", { ascending: false }) if (eventsData) { const eventsWithSettings = await Promise.all( eventsData.map(async (event) => { const { data: settings } = await supabase .from("vote_settings") .select("*") .eq("event_id", event.id) .single() return { ...event, vote_setting: settings } }), ) setEvents(eventsWithSettings) } } catch (error) { console.error("Error fetching events:", error) } finally { setLoading(false) } } fetchEvents() }, [supabase]) return (

{/* Header */}

Event Voting

Pilih event favorit Anda dan mulai voting sekarang

{/* Events Grid */} {loading ? (

{[...Array(6)].map((_, i) => (

))}

) : events.length === 0 ? (

Belum ada event yang tersedia

) : (

{events.map((event, idx) => ( ))}

)}

) } [V0_FILE]typescriptreact:file="components/candidate-card.tsx" isEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { motion } from "framer-motion" import { useState } from "react" import { VoteModal } from "@/components/vote-modal" import type { Database } from "@/lib/database.types" type Candidate = Database["public"]["Tables"]["candidates"]["Row"] interface CandidateCardProps { candidate: Candidate pricePerVote: number eventId: string isActive: boolean paymentLink?: string } export function CandidateCard({ candidate, pricePerVote, eventId, isActive, paymentLink }: CandidateCardProps) { const [showVoteModal, setShowVoteModal] = useState(false) return ( <> {/* Candidate Photo */}

{candidate.photo_url ? ( ) : (

👤

)}

{candidate.name} Nomor Urut: {String(candidate.nomor_urut).padStart(2, "0")}

{/* Total Votes */}

Total Vote

{(candidate.total_votes || 0).toLocaleString("id-ID")}

{/* Price Badge */} Rp {pricePerVote.toLocaleString("id-ID")} / vote {/* Vote Button */} ) } [V0_FILE]typescript:file="lib/database.types.ts" isMerged="true" export type Database = { public: { Tables: { events: { Row: { id: string title: string description: string | null status: string start_date: string end_date: string created_at: string } } vote_settings: { Row: { id: string event_id: string price_per_vote: number payment_link: string | null note_text: string | null updated_at: string } } candidates: { Row: { id: string event_id: string name: string nomor_urut: number photo_url: string | null total_votes: number created_at: string } } transactions: { Row: { id: string event_id: string candidate_id: string nominal: number status: string created_at: string } } } } } [V0_FILE]typescriptreact:file="app/leaderboard/page.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { Navbar } from "@/components/navbar" import { createClient } from "@/lib/supabase/client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Skeleton } from "@/components/ui/skeleton" import { motion } from "framer-motion" import { Trophy } from "lucide-react" import type { Database } from "@/lib/database.types" type Event = Database["public"]["Tables"]["events"]["Row"] type Candidate = Database["public"]["Tables"]["candidates"]["Row"] interface EventLeaderboard extends Event { candidates: Candidate[] } export default function LeaderboardPage() { const [events, setEvents] = useState([]) const [loading, setLoading] = useState(true) const supabase = createClient() useEffect(() => { const fetchLeaderboardData = async () => { try { const { data: eventsData } = await supabase.from("events").select("*").order("created_at", { ascending: false }) if (eventsData) { const eventsWithCandidates = await Promise.all( eventsData.map(async (event) => { const { data: candidatesData } = await supabase .from("candidates") .select("*") .eq("event_id", event.id) .order("total_votes", { ascending: false }) return { ...event, candidates: candidatesData || [], } }), ) setEvents(eventsWithCandidates) } } catch (error) { console.error("Error fetching leaderboard data:", error) } finally { setLoading(false) } } fetchLeaderboardData() // Subscribe to realtime updates const subscription = supabase .channel("leaderboard_updates") .on("postgres_changes", { event: "UPDATE", schema: "public", table: "candidates" }, (payload) => { setEvents((prev) => prev.map((event) => ({ ...event, candidates: event.candidates .map((c) => (c.id === payload.new.id ? payload.new : c)) .sort((a, b) => (b.total_votes || 0) - (a.total_votes || 0)), })), ) }) .subscribe() return () => { subscription.unsubscribe() } }, [supabase]) return (

{/* Header */}

Leaderboard

Lihat posisi kandidat terkini di setiap event

{/* Leaderboard Events */} {loading ? (

{[...Array(2)].map((_, i) => (

))}

) : events.length === 0 ? (

Belum ada event

) : (

{events.map((event, eventIdx) => ( {event.title} {event.description} {event.candidates.length === 0 ? (

Belum ada kandidat

) : (

{event.candidates.map((candidate, idx) => { const isTop3 = idx < 3 const medals = ["🥇", "🥈", "🥉"] return ( {/* Rank */}

{isTop3 ? medals[idx] : idx + 1}

{/* Candidate Info */}

{candidate.name}

Nomor Urut: {String(candidate.nomor_urut).padStart(2, "0")}

{/* Vote Count */}

{(candidate.total_votes || 0).toLocaleString("id-ID")}

votes

) })}

)} ))}

)}

) } [V0_FILE]typescriptreact:file="app/how-it-works/page.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Navbar } from "@/components/navbar" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { CheckCircle2 } from "lucide-react" export default function HowItWorksPage() { const steps = [ { number: 1, title: "Pilih Event", description: "Jelajahi berbagai event voting yang tersedia di platform kami dan pilih event yang Anda minati.", icon: "🎯", }, { number: 2, title: "Pilih Kandidat", description: "Lihat daftar lengkap kandidat untuk setiap event. Bandingkan posisi dan total vote di leaderboard real-time.", icon: "👥", }, { number: 3, title: "Klik Vote", description: "Pilih kandidat favorit Anda dan klik tombol vote untuk membuka modal konfirmasi voting.", icon: "☑️", }, { number: 4, title: "Bayar Melalui DOKU", description: "Lakukan pembayaran melalui sistem DOKU dengan metode pembayaran yang Anda pilih. Cepat dan aman.", icon: "💳", }, { number: 5, title: "Vote Masuk", description: "Setelah pembayaran dikonfirmasi, suara Anda akan langsung tercatat di sistem kami.", icon: "✨", }, { number: 6, title: "Lihat di Leaderboard", description: "Vote Anda akan langsung tampil di leaderboard. Ikuti perkembangan voting secara real-time.", icon: "📊", }, ] const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, delayChildren: 0.2, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.5 }, }, } return (

{/* Header */}

Cara Kerja PROVOTE.ID

Proses voting yang simple, transparan, dan dapat dipercaya. Ikuti langkah-langkah berikut untuk mulai voting.

{/* Steps Grid */} {steps.map((step, idx) => ( {/* Icon & Number */}

{step.icon}

{step.number}

{step.title}

{step.description}

{/* Checkmark Decoration */}

))} {/* Info Cards */}

{/* Security */} 🔒 Keamanan Terjamin

Semua transaksi dilindungi dengan enkripsi tingkat enterprise. Data pribadi Anda dijaga dengan ketat sesuai standar internasional.

{/* Transparency */} 👁️ Transparansi Total

Setiap vote yang masuk tercatat dan dapat diverifikasi. Hasil voting diupdate secara real-time tanpa manipulasi.

{/* Tips Section */}

Tips Penting

• Pastikan nominal pembayaran sesuai dengan rumus yang diberikan agar vote Anda terverifikasi.
• Simpan bukti pembayaran Anda sebagai referensi jika terjadi masalah.
• Vote dapat dilakukan berkali-kali untuk kandidat yang sama.
• Leaderboard diupdate secara real-time setelah vote terverifikasi.

) } [V0_FILE]typescriptreact:file="app/about/page.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Navbar } from "@/components/navbar" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { CheckCircle2, Shield, Zap, Users } from "lucide-react" export default function AboutPage() { const values = [ { icon: , title: "Transparansi", description: "Setiap voting tercatat dan dapat diverifikasi. Tidak ada manipulasi atau perubahan data tanpa jejak.", }, { icon: , title: "Kecepatan", description: "Sistem real-time yang cepat dan responsif. Hasil voting terupdate instant di leaderboard.", }, { icon: , title: "Kepercayaan", description: "Platform pilihan untuk kompetisi resmi di Indonesia. Dipercaya oleh ribuan pengguna.", }, { icon: , title: "Keadilan", description: "Sistem voting yang adil dan tidak memihak. Setiap suara memiliki bobot yang sama.", }, ] const features = [ { title: "Voting Real-Time", desc: "Hasil voting terupdate langsung tanpa delay" }, { title: "Multi-Event", desc: "Support untuk ribuan event secara bersamaan" }, { title: "Payment Integration", desc: "Integrasi pembayaran dengan DOKU untuk kemudahan transaksi" }, { title: "Admin Dashboard", desc: "Dashboard lengkap untuk mengelola event dan kandidat" }, { title: "ROW Level Security", desc: "Data protection dengan teknologi keamanan terkini" }, { title: "Mobile Responsive", desc: "Bekerja sempurna di desktop, tablet, dan mobile" }, ] return (

{/* Hero Section */}

Tentang PROVOTE.ID

Platform voting nomor 1 di Indonesia yang mengutamakan transparansi, keamanan, dan keadilan dalam setiap proses voting.

{/* Mission Statement */}

Misi Kami

Menyediakan platform voting yang mudah digunakan, aman, dan terpercaya untuk semua kompetisi di Indonesia.

Kami percaya bahwa setiap suara penting dan berhak mendapatkan perlakuan yang adil serta transparan.

Visi Kami

Menjadi platform voting terdepan di Asia Tenggara yang dikenal karena inovasi dan integritas.

Mendorong partisipasi aktif masyarakat dalam proses voting yang lebih transparan dan demokratis.

{/* Values Section */}

Nilai-Nilai Kami

Prinsip yang memandu setiap keputusan dan tindakan kami

{values.map((value, idx) => (

{value.icon}

{value.title}

{value.description}

))}

{/* Why Choose Us */}

Mengapa Memilih PROVOTE.ID?

Keunggulan platform yang membedakan kami dari kompetitor

{features.map((feature, idx) => (

{feature.title}

{feature.desc}

))}

{/* Trust & Security */}

Keamanan & Perlindungan Data

Komitmen kami terhadap privasi dan keamanan pengguna

Enkripsi End-to-End

Semua data transaksi dan personal dienkripsi menggunakan standar keamanan internasional (SSL/TLS).

Compliance & Regulasi

Platform kami mematuhi semua regulasi data protection dan standar industri yang berlaku di Indonesia.

Audit Berkala

Kami melakukan audit keamanan rutin dengan pihak ketiga independen untuk memastikan integritas sistem.

Backup & Recovery

Data backup otomatis dan disaster recovery plan untuk memastikan layanan selalu tersedia.

{/* Contact Section */}

Hubungi Kami

Punya pertanyaan atau ingin bermitra dengan PROVOTE.ID?

Email:{" "} hello@provote.id

Telepon:{" "} +62 812 3456 789

) } [V0_FILE]typescriptreact:file="app/api/verify-payment/route.ts" isMerged="true" import { createClient } from "@/lib/supabase/server" import { NextResponse } from "next/server" export async function POST(req: Request) { try { const body = await req.json() const { transactionId, status, candidateId } = body const supabase = await createClient() // Update transaction status const { error: updateError } = await supabase.from("transactions").update({ status }).eq("id", transactionId) if (updateError) { return NextResponse.json({ error: "Failed to update transaction" }, { status: 400 }) } // If payment successful, increment candidate votes if (status === "success") { // Get candidate current votes const { data: candidate } = await supabase.from("candidates").select("total_votes").eq("id", candidateId).single() if (candidate) { const { error: voteError } = await supabase .from("candidates") .update({ total_votes: (candidate.total_votes || 0) + 1 }) .eq("id", candidateId) if (voteError) { console.error("Vote error:", voteError) } } } return NextResponse.json({ success: true }) } catch (error) { console.error("Verification error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/payment-instructions.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { InfoIcon } from "lucide-react" interface PaymentInstructionsProps { candidateNumber: number pricePerVote: number } export function PaymentInstructions({ candidateNumber, pricePerVote }: PaymentInstructionsProps) { // Example: 5 votes const exampleVotes = 5 const baseAmount = exampleVotes * pricePerVote const totalAmount = baseAmount + candidateNumber return (

Petunjuk Pembayaran

Rumus Pembayaran:

(Jumlah Vote × Rp {pricePerVote.toLocaleString("id-ID")}) + {candidateNumber}

Contoh untuk {exampleVotes} vote:

{exampleVotes} × Rp {pricePerVote.toLocaleString("id-ID")} = Rp {baseAmount.toLocaleString("id-ID")}

+ Kode kandidat {String(candidateNumber).padStart(2, "0")} = +{candidateNumber}

Total: Rp {totalAmount.toLocaleString("id-ID")}

Nominal pembayaran harus tepat sesuai rumus agar vote Anda terverifikasi. Jika ada perbedaan, hubungi admin untuk verifikasi manual.

) } [V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { createClient } from "@/lib/supabase/client" import { Navbar } from "@/components/navbar" import { AdminSidebar } from "@/components/admin-sidebar" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Skeleton } from "@/components/ui/skeleton" import { BarChart3, Users, Zap } from "lucide-react" import type { Database } from "@/lib/database.types" type Event = Database["public"]["Tables"]["events"]["Row"] type Candidate = Database["public"]["Tables"]["candidates"]["Row"] export default function AdminDashboard() { const [isAdmin, setIsAdmin] = useState(false) const [stats, setStats] = useState({ totalEvents: 0, totalCandidates: 0, totalVotes: 0, }) const [loading, setLoading] = useState(true) const router = useRouter() const supabase = createClient() useEffect(() => { const checkAdminStatus = async () => { try { const { data: { user }, } = await supabase.auth.getUser() // Check if user is admin (you can modify this based on your auth setup) if (!user) { router.push("/") return } // For demo purposes, we'll assume users can view admin panel // In production, implement proper admin role verification setIsAdmin(true) // Fetch stats const { data: eventsData } = await supabase.from("events").select("id") const { data: candidatesData } = await supabase.from("candidates").select("id, total_votes") const totalVotes = candidatesData?.reduce((sum, c) => sum + (c.total_votes || 0), 0) || 0 setStats({ totalEvents: eventsData?.length || 0, totalCandidates: candidatesData?.length || 0, totalVotes, }) } catch (error) { console.error("Error checking admin status:", error) router.push("/") } finally { setLoading(false) } } checkAdminStatus() }, [supabase, router]) if (loading) { return (

{[...Array(3)].map((_, i) => ( ))}

) } if (!isAdmin) { return (

Anda tidak memiliki akses ke halaman ini

) } return (

{/* Main Content */}

{/* Header */}

Admin Dashboard

Kelola event, kandidat, dan voting settings

{/* Stats Grid */}

Total Event

{stats.totalEvents}

Event aktif dan selesai

Total Kandidat

{stats.totalCandidates}

Dari semua event

Total Vote

{stats.totalVotes.toLocaleString("id-ID")}

Vote terverifikasi

{/* Recent Activity */} Panduan Admin

Kelola Event

Buat, edit, dan hapus event voting

Kelola Kandidat

Tambah kandidat, upload foto, atur nomor urut

Setting Vote

Atur harga vote, link pembayaran, dan teks penting

Lihat Statistik

Monitor progress voting dan export data

) } [V0_FILE]typescriptreact:file="app/admin/settings/page.tsx" isMerged="true" "use client" import { Navbar } from "@/components/navbar" import { AdminSidebar } from "@/components/admin-sidebar" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { useState } from "react" export default function AdminSettingsPage() { const [pricePerVote, setPricePerVote] = useState("5000") const [paymentLink, setPaymentLink] = useState("https://doku.com/example") const [noteText, setNoteText] = useState("NOTE PENTING: Masukkan nominal pembayaran sesuai rumus yang diberikan") const handleSave = () => { console.log({ pricePerVote, paymentLink, noteText }) alert("Pengaturan disimpan!") } return (

{/* Header */}

Vote Settings

Atur harga vote, link pembayaran, dan teks penting

{/* Settings Form */}

{/* Price Per Vote */} Harga Per Vote

Nominal (Rp)

Rp setPricePerVote(e.target.value)} placeholder="5000" className="rounded-l-none" />

Contoh: 5000 = Rp 5.000 per vote

{/* Payment Link */} Link Pembayaran DOKU

DOKU Payment Link setPaymentLink(e.target.value)} placeholder="https://doku.com/your-link" />

User akan diarahkan ke link ini untuk melakukan pembayaran

{/* Important Note */} Teks Penting

Note yang ditampilkan di modal voting

setNoteText(e.target.value)}
                    placeholder="Masukkan teks penting yang ingin ditampilkan"
                    rows={6}
                  />
                </div>
              </CardContent>
            </Card>

{/* Action Buttons */}
            <div className="flex gap-2">
              <Button onClick={handleSave} className="flex-1">
                Simpan Perubahan
              </Button>
              <Button variant="outline" className="flex-1 bg-transparent">
                Reset
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true"
"use client"

import { useTheme } from "@/components/theme-provider"
import { Button } from "@/components/ui/button"
import { Moon, Sun } from "lucide-react"

export function ThemeToggle() {
  const { theme, toggleTheme } = useTheme()

return (
    <Button size="icon" variant="ghost" onClick={toggleTheme} className="rounded-full">
      {theme === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
    </Button>
  )
}
[V0_FILE]typescriptreact:file="components/realtime-provider.tsx" isMerged="true"
"use client"

import type React from "react"

import { useEffect } from "react"
import { createClient } from "@/lib/supabase/client"

/**
 * Realtime Updates Provider
 * Manages WebSocket subscriptions for real-time data updates
 * Currently subscribed to: candidates table (vote count updates)
 */
export function RealtimeProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    const supabase = createClient()

// Subscribe to global candidates updates for real-time vote counts
    const subscription = supabase
      .channel("global_candidates")
      .on("postgres_changes", { event: "UPDATE", schema: "public", table: "candidates" }, (payload) => {
        // Dispatch custom event for components to listen to
        window.dispatchEvent(
          new CustomEvent("candidate-updated", {
            detail: payload.new,
          }),
        )
      })
      .subscribe()

return () => {
      subscription.unsubscribe()
    }
  }, [])

return children
}

/**
 * Hook for listening to candidate updates
 */
export function useCandidateUpdates(callback: (candidate: any) => void, candidateId?: string) {
  useEffect(() => {
    const handler = (event: Event) => {
      const customEvent = event as CustomEvent
      // Filter by candidateId if provided
      if (!candidateId || customEvent.detail.id === candidateId) {
        callback(customEvent.detail)
      }
    }

window.addEventListener("candidate-updated", handler)
    return () => window.removeEventListener("candidate-updated", handler)
  }, [callback, candidateId])
}
[V0_FILE]typescriptreact:file="components/create-candidate-modal.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { X } from "lucide-react"
import { motion } from "framer-motion"

interface CreateCandidateModalProps {
  isOpen: boolean
  onClose: () => void
  onSuccess: () => void
  eventId?: string
}

export function CreateCandidateModal({ isOpen, onClose, onSuccess, eventId }: CreateCandidateModalProps) {
  const [formData, setFormData] = useState({
    name: "",
    nomor_urut: "",
    event_id: eventId || "",
    image_url: "",
  })
  const [loading, setLoading] = useState(false)
  const supabase = createClient()

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

try {
      const { error } = await supabase.from("candidates").insert([
        {
          ...formData,
          nomor_urut: Number.parseInt(formData.nomor_urut),
          total_votes: 0,
        },
      ])

if (!error) {
        setFormData({
          name: "",
          nomor_urut: "",
          event_id: eventId || "",
          image_url: "",
        })
        onSuccess()
        onClose()
      }
    } catch (error) {
      console.error("Error creating candidate:", error)
    } finally {
      setLoading(false)
    }
  }

if (!isOpen) return null

return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
      <motion.div initial={{ scale: 0.95, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} className="w-full max-w-2xl">
        <Card className="m-4">
          <CardHeader className="flex flex-row items-center justify-between space-y-0">
            <CardTitle>Tambah Kandidat Baru</CardTitle>
            <button onClick={onClose} className="text-muted-foreground hover:text-foreground">
              <X className="w-5 h-5" />
            </button>
          </CardHeader>

<CardContent>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium mb-1">Nama Kandidat</label>
                  <Input
                    required
                    value={formData.name}
                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                    placeholder="Nama lengkap"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1">Nomor Urut</label>
                  <Input
                    required
                    type="number"
                    min="1"
                    value={formData.nomor_urut}
                    onChange={(e) => setFormData({ ...formData, nomor_urut: e.target.value })}
                    placeholder="1, 2, 3..."
                  />
                </div>
              </div>

<div>
                <label className="block text-sm font-medium mb-1">URL Foto</label>
                <Input
                  value={formData.image_url}
                  onChange={(e) => setFormData({ ...formData, image_url: e.target.value })}
                  placeholder="https://..."
                />
              </div>

<div>
                <label className="block text-sm font-medium mb-1">Event ID</label>
                <Input
                  required
                  value={formData.event_id}
                  onChange={(e) => setFormData({ ...formData, event_id: e.target.value })}
                  placeholder="Masukkan Event ID"
                />
              </div>

<div className="flex justify-end gap-2 pt-4">
                <Button type="button" variant="outline" onClick={onClose}>
                  Batal
                </Button>
                <Button type="submit" disabled={loading}>
                  {loading ? "Menambah..." : "Tambah Kandidat"}
                </Button>
              </div>
            </form>
          </CardContent>
        </Card>
      </motion.div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/events/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { createClient } from "@/lib/supabase/client"
import { Navbar } from "@/components/navbar"
import { AdminSidebar } from "@/components/admin-sidebar"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Skeleton } from "@/components/ui/skeleton"
import { Plus, Edit2, Trash2 } from "lucide-react"
import { motion } from "framer-motion"
import { CreateEventModal } from "@/components/create-event-modal"
import type { Database } from "@/lib/database.types"

type Event = Database["public"]["Tables"]["events"]["Row"]

export default function AdminEventsPage() {
  const [events, setEvents] = useState<Event[]>([])
  const [loading, setLoading] = useState(true)
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)
  const supabase = createClient()

const fetchEvents = async () => {
    try {
      const { data } = await supabase.from("events").select("*").order("created_at", { ascending: false })

if (data) {
        setEvents(data)
      }
    } catch (error) {
      console.error("Error fetching events:", error)
    } finally {
      setLoading(false)
    }
  }

useEffect(() => {
    fetchEvents()
  }, [supabase])

const handleDelete = async (eventId: string) => {
    if (confirm("Apakah Anda yakin ingin menghapus event ini?")) {
      const { error } = await supabase.from("events").delete().eq("id", eventId)

if (!error) {
        setEvents(events.filter((e) => e.id !== eventId))
      }
    }
  }

return (
    <div className="min-h-screen bg-background">
      <Navbar />
      <div className="flex">
        <AdminSidebar />

<div className="flex-1 p-8 space-y-8">
          {/* Header with CTA */}
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold text-foreground">Kelola Event</h1>
              <p className="text-muted-foreground">Tambah, edit, atau hapus event voting</p>
            </div>
            <Button className="gap-2" onClick={() => setIsCreateModalOpen(true)}>
              <Plus className="w-4 h-4" />
              Event Baru
            </Button>
          </div>

{/* Events List */}
          {loading ? (
            <div className="space-y-4">
              {[...Array(3)].map((_, i) => (
                <Skeleton key={i} className="w-full h-24" />
              ))}
            </div>
          ) : events.length === 0 ? (
            <Card>
              <CardContent className="py-12 text-center">
                <p className="text-muted-foreground">Belum ada event. Buat event baru untuk memulai.</p>
              </CardContent>
            </Card>
          ) : (
            <div className="space-y-4">
              {events.map((event, idx) => (
                <motion.div
                  key={event.id}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: idx * 0.1 }}
                >
                  <Card className="hover:border-primary/50 transition-colors">
                    <CardContent className="py-6">
                      <div className="flex items-start justify-between gap-4">
                        <div className="flex-1 space-y-2">
                          <h3 className="font-semibold text-lg">{event.title}</h3>
                          <p className="text-sm text-muted-foreground">{event.description}</p>
                          <div className="flex gap-4 text-xs text-muted-foreground pt-2">
                            <span>Status: {event.status}</span>
                            <span>Mulai: {new Date(event.start_date).toLocaleDateString("id-ID")}</span>
                            <span>Selesai: {new Date(event.end_date).toLocaleDateString("id-ID")}</span>
                          </div>
                        </div>

<div className="flex gap-2">
                          <Button size="sm" variant="outline" className="gap-1 bg-transparent">
                            <Edit2 className="w-4 h-4" />
                            Edit
                          </Button>
                          <Button
                            size="sm"
                            variant="destructive"
                            className="gap-1"
                            onClick={() => handleDelete(event.id)}
                          >
                            <Trash2 className="w-4 h-4" />
                            Hapus
                          </Button>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </motion.div>
              ))}
            </div>
          )}
        </div>
      </div>

<CreateEventModal
        isOpen={isCreateModalOpen}
        onClose={() => setIsCreateModalOpen(false)}
        onSuccess={fetchEvents}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/candidates/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { createClient } from "@/lib/supabase/client"
import { Navbar } from "@/components/navbar"
import { AdminSidebar } from "@/components/admin-sidebar"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Skeleton } from "@/components/ui/skeleton"
import { Plus, Edit2, Trash2 } from "lucide-react"
import { motion } from "framer-motion"
import { CreateCandidateModal } from "@/components/create-candidate-modal"
import type { Database } from "@/lib/database.types"

type Candidate = Database["public"]["Tables"]["candidates"]["Row"]

export default function AdminCandidatesPage() {
  const [candidates, setCandidates] = useState<Candidate[]>([])
  const [loading, setLoading] = useState(true)
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)
  const supabase = createClient()

const fetchCandidates = async () => {
    try {
      const { data } = await supabase.from("candidates").select("*").order("nomor_urut", { ascending: true })

if (data) {
        setCandidates(data)
      }
    } catch (error) {
      console.error("Error fetching candidates:", error)
    } finally {
      setLoading(false)
    }
  }

useEffect(() => {
    fetchCandidates()
  }, [supabase])

const handleDelete = async (candidateId: string) => {
    if (confirm("Apakah Anda yakin ingin menghapus kandidat ini?")) {
      const { error } = await supabase.from("candidates").delete().eq("id", candidateId)

if (!error) {
        setCandidates(candidates.filter((c) => c.id !== candidateId))
      }
    }
  }

return (
    <div className="min-h-screen bg-background">
      <Navbar />
      <div className="flex">
        <AdminSidebar />

<div className="flex-1 p-8 space-y-8">
          {/* Header */}
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold text-foreground">Kelola Kandidat</h1>
              <p className="text-muted-foreground">Tambah, edit, atau hapus kandidat</p>
            </div>
            <Button className="gap-2" onClick={() => setIsCreateModalOpen(true)}>
              <Plus className="w-4 h-4" />
              Kandidat Baru
            </Button>
          </div>

{/* Candidates Grid */}
          {loading ? (
            <div className="grid md:grid-cols-3 gap-6">
              {[...Array(6)].map((_, i) => (
                <Skeleton key={i} className="w-full h-48" />
              ))}
            </div>
          ) : candidates.length === 0 ? (
            <Card>
              <CardContent className="py-12 text-center">
                <p className="text-muted-foreground">Belum ada kandidat. Tambah kandidat baru untuk memulai.</p>
              </CardContent>
            </Card>
          ) : (
            <div className="grid md:grid-cols-3 gap-6">
              {candidates.map((candidate, idx) => (
                <motion.div
                  key={candidate.id}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: idx * 0.1 }}
                >
                  <Card className="overflow-hidden hover:border-primary/50 transition-colors">
                    <div className="h-24 bg-gradient-to-br from-primary/20 to-primary/5" />

<CardContent className="pt-4 space-y-4">
                      <div>
                        <p className="font-semibold">{candidate.name}</p>
                        <p className="text-sm text-muted-foreground">
                          Nomor: {String(candidate.nomor_urut).padStart(2, "0")}
                        </p>
                      </div>

<div className="p-2 bg-secondary rounded text-center">
                        <p className="text-2xl font-bold text-primary">{candidate.total_votes || 0}</p>
                        <p className="text-xs text-muted-foreground">votes</p>
                      </div>

<div className="flex gap-2 pt-2">
                        <Button size="sm" variant="outline" className="flex-1 gap-1 bg-transparent">
                          <Edit2 className="w-3 h-3" />
                          Edit
                        </Button>
                        <Button
                          size="sm"
                          variant="destructive"
                          className="flex-1 gap-1"
                          onClick={() => handleDelete(candidate.id)}
                        >
                          <Trash2 className="w-3 h-3" />
                          Hapus
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                </motion.div>
              ))}
            </div>
          )}
        </div>
      </div>

<CreateCandidateModal
        isOpen={isCreateModalOpen}
        onClose={() => setIsCreateModalOpen(false)}
        onSuccess={fetchCandidates}
      />
    </div>
  )
}
[V0_FILE]sql:file="scripts/01-init-database.sql" isEdit="true" isMerged="true"
-- Create events table
CREATE TABLE IF NOT EXISTS events (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  title VARCHAR(255) NOT NULL,
  description TEXT,
  status VARCHAR(50) NOT NULL DEFAULT 'active',
  start_date TIMESTAMP NOT NULL,
  end_date TIMESTAMP NOT NULL,
  created_at TIMESTAMP DEFAULT NOW()
);

-- Create vote_settings table
CREATE TABLE IF NOT EXISTS vote_settings (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  event_id UUID NOT NULL REFERENCES events(id) ON DELETE CASCADE,
  price_per_vote INTEGER NOT NULL,
  payment_link VARCHAR(500),
  note_text TEXT,
  updated_at TIMESTAMP DEFAULT NOW()
);

-- Create candidates table
CREATE TABLE IF NOT EXISTS candidates (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  event_id UUID NOT NULL REFERENCES events(id) ON DELETE CASCADE,
  name VARCHAR(255) NOT NULL,
  nomor_urut INTEGER NOT NULL,
  photo_url VARCHAR(500),
  total_votes INTEGER DEFAULT 0,
  created_at TIMESTAMP DEFAULT NOW()
);

-- Create transactions table (for vote tracking)
CREATE TABLE IF NOT EXISTS transactions (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  event_id UUID NOT NULL REFERENCES events(id) ON DELETE CASCADE,
  candidate_id UUID NOT NULL REFERENCES candidates(id) ON DELETE CASCADE,
  nominal INTEGER NOT NULL,
  status VARCHAR(50) NOT NULL DEFAULT 'pending',
  created_at TIMESTAMP DEFAULT NOW()
);

-- Enable Row Level Security
ALTER TABLE events ENABLE ROW LEVEL SECURITY;
ALTER TABLE vote_settings ENABLE ROW LEVEL SECURITY;
ALTER TABLE candidates ENABLE ROW LEVEL SECURITY;
ALTER TABLE transactions ENABLE ROW LEVEL SECURITY;

-- Fixed JSON operator syntax for Supabase auth.jwt()
-- RLS Policies for events (public read, admin write)
CREATE POLICY "Events are viewable by everyone" ON events FOR SELECT USING (true);
CREATE POLICY "Only admins can create events" ON events FOR INSERT WITH CHECK (
  auth.jwt()->'user_metadata'->>'is_admin' = 'true'
);
CREATE POLICY "Only admins can update events" ON events FOR UPDATE USING (
  auth.jwt()->'user_metadata'->>'is_admin' = 'true'
);
CREATE POLICY "Only admins can delete events" ON events FOR DELETE USING (
  auth.jwt()->'user_metadata'->>'is_admin' = 'true'
);

-- RLS Policies for vote_settings (public read, admin write)
CREATE POLICY "Vote settings are viewable by everyone" ON vote_settings FOR SELECT USING (true);
CREATE POLICY "Only admins can manage vote settings" ON vote_settings FOR INSERT WITH CHECK (
  auth.jwt()->'user_metadata'->>'is_admin' = 'true'
);
CREATE POLICY "Only admins can update vote settings" ON vote_settings FOR UPDATE USING (
  auth.jwt()->'user_metadata'->>'is_admin' = 'true'
);
CREATE POLICY "Only admins can delete vote settings" ON vote_settings FOR DELETE USING (
  auth.jwt()->'user_metadata'->>'is_admin' = 'true'
);

-- RLS Policies for candidates (public read, admin write)
CREATE POLICY "Candidates are viewable by everyone" ON candidates FOR SELECT USING (true);
CREATE POLICY "Only admins can create candidates" ON candidates FOR INSERT WITH CHECK (
  auth.jwt()->'user_metadata'->>'is_admin' = 'true'
);
CREATE POLICY "Only admins can update candidates" ON candidates FOR UPDATE USING (
  auth.jwt()->'user_metadata'->>'is_admin' = 'true'
);
CREATE POLICY "Only admins can delete candidates" ON candidates FOR DELETE USING (
  auth.jwt()->'user_metadata'->>'is_admin' = 'true'
);

-- RLS Policies for transactions (public insert, public read)
CREATE POLICY "Transactions are viewable by everyone" ON transactions FOR SELECT USING (true);
CREATE POLICY "Anyone can create transactions" ON transactions FOR INSERT WITH CHECK (true);
CREATE POLICY "Only admins can update transactions" ON transactions FOR UPDATE USING (
  auth.jwt()->'user_metadata'->>'is_admin' = 'true'
);

-- Create indexes for performance
CREATE INDEX idx_candidates_event_id ON candidates(event_id);
CREATE INDEX idx_vote_settings_event_id ON vote_settings(event_id);
CREATE INDEX idx_transactions_event_id ON transactions(event_id);
CREATE INDEX idx_transactions_candidate_id ON transactions(candidate_id);
[V0_FILE]sql:file="scripts/02-seed-demo-data.sql" isEdit="true" isMerged="true"
-- Insert demo event
INSERT INTO events (title, description, status, start_date, end_date)
VALUES (
  'Pemilihan Duta PROVOTE 2024',
  'Pilih duta PROVOTE favorite Anda melalui platform voting kami',
  'active',
  NOW(),
  NOW() + INTERVAL '30 days'
) ON CONFLICT DO NOTHING;

-- Insert vote settings for the event
INSERT INTO vote_settings (event_id, price_per_vote, payment_link, note_text)
SELECT id, 5000, 'https://doku.pay/your-link-here', 
'NOTE PENTING: Masukkan nominal pembayaran sesuai rumus yang diberikan'
FROM events 
WHERE title = 'Pemilihan Duta PROVOTE 2024'
LIMIT 1
ON CONFLICT DO NOTHING;

-- Insert sample candidates
INSERT INTO candidates (event_id, name, nomor_urut, total_votes)
SELECT id, 'Budi Santoso', 1, 0
FROM events WHERE title = 'Pemilihan Duta PROVOTE 2024'
LIMIT 1
ON CONFLICT DO NOTHING;

INSERT INTO candidates (event_id, name, nomor_urut, total_votes)
SELECT id, 'Siti Nurhaliza', 2, 0
FROM events WHERE title = 'Pemilihan Duta PROVOTE 2024'
LIMIT 1
ON CONFLICT DO NOTHING;

INSERT INTO candidates (event_id, name, nomor_urut, total_votes)
SELECT id, 'Ahmad Wijaya', 3, 0
FROM events WHERE title = 'Pemilihan Duta PROVOTE 2024'
LIMIT 1
ON CONFLICT DO NOTHING;

INSERT INTO candidates (event_id, name, nomor_urut, total_votes)
SELECT id, 'Rina Widiastuti', 4, 0
FROM events WHERE title = 'Pemilihan Duta PROVOTE 2024'
LIMIT 1
ON CONFLICT DO NOTHING;
[V0_FILE]typescriptreact:file="components/confetti.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"

interface ConfettiPiece {
  id: number
  left: number
  delay: number
  duration: number
  color: string
}

export function Confetti() {
  const [confetti, setConfetti] = useState<ConfettiPiece[]>([])

useEffect(() => {
    const colors = ["#16A34A", "#22c55e", "#86efac", "#dcfce7", "#10b981"]
    const pieces = Array.from({ length: 50 }).map((_, i) => ({
      id: i,
      left: Math.random() * 100,
      delay: Math.random() * 0.5,
      duration: 2 + Math.random() * 1,
      color: colors[Math.floor(Math.random() * colors.length)],
    }))
    setConfetti(pieces)
  }, [])

return (
    <div className="fixed inset-0 pointer-events-none overflow-hidden">
      {confetti.map((piece) => (
        <div
          key={piece.id}
          className="absolute w-2 h-2 rounded-full animate-confetti-fall"
          style={{
            left: `${piece.left}%`,
            top: "-10px",
            backgroundColor: piece.color,
            animation: `confetti-fall ${piece.duration}s ease-in forwards`,
            animationDelay: `${piece.delay}s`,
          }}
        />
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/payment/success/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/payment/success/page.tsx" isEdit="true" isMerged="true"
import { Suspense } from "react"
import { PaymentSuccessClient } from "./client"

export default function PaymentSuccessPage() {
  return (
    <Suspense fallback={null}>
      <PaymentSuccessClient />
    </Suspense>
  )
}
[V0_FILE]sql:file="scripts/04-add-vote-rpc-function.sql" isMerged="true"
-- Create RPC function for atomic vote increment
CREATE OR REPLACE FUNCTION increment_candidate_votes(candidate_id UUID, vote_amount INTEGER)
RETURNS void AS $$
BEGIN
  UPDATE candidates
  SET total_votes = total_votes + vote_amount
  WHERE id = candidate_id;
END;
$$ LANGUAGE plpgsql;

-- Update RLS policy to allow public to insert transactions
DROP POLICY IF EXISTS "Anyone can create transactions" ON transactions;
CREATE POLICY "Anyone can create transactions" ON transactions 
FOR INSERT WITH CHECK (true);

-- Add policy to allow public updates only via RPC
CREATE POLICY "Transactions can be updated via RPC" ON transactions
FOR UPDATE USING (true)
WITH CHECK (true);
[V0_FILE]sql:file="scripts/05-add-payment-verification-column.sql" isMerged="true"
-- Add payment verification tracking columns to transactions table
ALTER TABLE transactions ADD COLUMN IF NOT EXISTS payment_verified BOOLEAN DEFAULT FALSE;
ALTER TABLE transactions ADD COLUMN IF NOT EXISTS verified_by_admin UUID;
ALTER TABLE transactions ADD COLUMN IF NOT EXISTS verified_at TIMESTAMP;
ALTER TABLE transactions ADD COLUMN IF NOT EXISTS rejection_reason TEXT;

-- Create audit log table for tracking admin actions
CREATE TABLE IF NOT EXISTS audit_logs (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  admin_id UUID NOT NULL,
  action VARCHAR(255) NOT NULL,
  transaction_id UUID REFERENCES transactions(id),
  old_status VARCHAR(50),
  new_status VARCHAR(50),
  notes TEXT,
  created_at TIMESTAMP DEFAULT NOW()
);

-- Enable RLS on audit logs
ALTER TABLE audit_logs ENABLE ROW LEVEL SECURITY;

-- RLS Policies for audit_logs (only admins can view and write)
CREATE POLICY "Only admins can view audit logs" ON audit_logs FOR SELECT USING (
  auth.jwt()->'user_metadata'->>'is_admin' = 'true'
);
CREATE POLICY "Only admins can create audit logs" ON audit_logs FOR INSERT WITH CHECK (
  auth.jwt()->'user_metadata'->>'is_admin' = 'true'
);

-- Create indexes for audit efficiency
CREATE INDEX idx_audit_logs_transaction_id ON audit_logs(transaction_id);
CREATE INDEX idx_audit_logs_created_at ON audit_logs(created_at);
CREATE INDEX idx_transactions_payment_verified ON transactions(payment_verified);
[V0_FILE]typescriptreact:file="app/admin/audit/page.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { createClient } from "@/lib/supabase/client"
import { Navbar } from "@/components/navbar"
import { AdminSidebar } from "@/components/admin-sidebar"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Textarea } from "@/components/ui/textarea"
import { CheckCircle, XCircle, Loader2 } from "lucide-react"
import { motion } from "framer-motion"
import type { Database } from "@/lib/database.types"

type Transaction = Database["public"]["Tables"]["transactions"]["Row"]

export default function AuditPage() {
  const [isAdmin, setIsAdmin] = useState(false)
  const [transactions, setTransactions] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [selectedTransaction, setSelectedTransaction] = useState<Transaction | null>(null)
  const [rejectionReason, setRejectionReason] = useState("")
  const [processing, setProcessing] = useState(false)
  const router = useRouter()
  const supabase = createClient()

useEffect(() => {
    const checkAndLoadTransactions = async () => {
      try {
        const {
          data: { user },
        } = await supabase.auth.getUser()

if (!user) {
          router.push("/")
          return
        }

setIsAdmin(true)

// Fetch unverified transactions
        const { data: txData, error } = await supabase
          .from("transactions")
          .select(`
            *,
            candidate:candidates(id, name, nomor_urut),
            event:events(id, title)
          `)
          .eq("payment_verified", false)
          .order("created_at", { ascending: false })

if (error) throw error
        setTransactions(txData || [])
      } catch (error) {
        console.error("Error loading transactions:", error)
      } finally {
        setLoading(false)
      }
    }

checkAndLoadTransactions()
  }, [supabase, router])

const handleApproveTransaction = async (transaction: Transaction) => {
    try {
      setProcessing(true)

const {
        data: { user },
      } = await supabase.auth.getUser()

if (!user) return

// Update transaction as verified
      const { error: updateError } = await supabase
        .from("transactions")
        .update({
          payment_verified: true,
          verified_by_admin: user.id,
          verified_at: new Date().toISOString(),
          status: "success",
        })
        .eq("id", transaction.id)

if (updateError) throw updateError

// Create audit log
      await supabase.from("audit_logs").insert({
        admin_id: user.id,
        action: "approve_payment",
        transaction_id: transaction.id,
        old_status: "pending",
        new_status: "success",
        notes: "Payment verified",
      })

// Refresh list
      setTransactions(transactions.filter((t) => t.id !== transaction.id))
      setSelectedTransaction(null)
    } catch (error) {
      console.error("Error approving transaction:", error)
      alert("Gagal menyetujui transaksi")
    } finally {
      setProcessing(false)
    }
  }

const handleRejectTransaction = async (transaction: Transaction) => {
    try {
      setProcessing(true)

const {
        data: { user },
      } = await supabase.auth.getUser()

if (!user) return

// Revert votes first
      const { error: revertError } = await supabase.rpc("increment_candidate_votes", {
        candidate_id: transaction.candidate_id,
        vote_amount: -(transaction.vote_count || 0), // Negative to decrement
      })

if (revertError) throw revertError

// Update transaction as rejected
      const { error: updateError } = await supabase
        .from("transactions")
        .update({
          status: "rejected",
          verified_by_admin: user.id,
          verified_at: new Date().toISOString(),
          rejection_reason: rejectionReason,
        })
        .eq("id", transaction.id)

if (updateError) throw updateError

// Create audit log
      await supabase.from("audit_logs").insert({
        admin_id: user.id,
        action: "reject_payment",
        transaction_id: transaction.id,
        old_status: "pending",
        new_status: "rejected",
        notes: rejectionReason,
      })

// Refresh list
      setTransactions(transactions.filter((t) => t.id !== transaction.id))
      setSelectedTransaction(null)
      setRejectionReason("")
    } catch (error) {
      console.error("Error rejecting transaction:", error)
      alert("Gagal menolak transaksi")
    } finally {
      setProcessing(false)
    }
  }

if (loading) {
    return (
      <div className="min-h-screen bg-background">
        <Navbar />
        <div className="flex">
          <AdminSidebar />
          <div className="flex-1 p-8">
            <div className="space-y-4">
              {[...Array(5)].map((_, i) => (
                <div key={i} className="h-20 bg-secondary rounded-lg animate-pulse" />
              ))}
            </div>
          </div>
        </div>
      </div>
    )
  }

if (!isAdmin) {
    return (
      <div className="min-h-screen bg-background">
        <Navbar />
        <div className="max-w-7xl mx-auto px-4 py-16 text-center">
          <p className="text-muted-foreground text-lg">Anda tidak memiliki akses ke halaman ini</p>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      <Navbar />
      <div className="flex">
        <AdminSidebar />

<div className="flex-1 p-8 space-y-8">
          <div>
            <h1 className="text-3xl font-bold text-foreground">Audit Pembayaran</h1>
            <p className="text-muted-foreground">Verifikasi transaksi pembayaran vote yang masuk</p>
          </div>

<Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle>Transaksi Pending</CardTitle>
                <Badge variant="outline">{transactions.length} transaksi</Badge>
              </div>
            </CardHeader>
            <CardContent>
              {transactions.length === 0 ? (
                <div className="text-center py-12">
                  <CheckCircle className="w-12 h-12 text-green-500 mx-auto mb-4" />
                  <p className="text-muted-foreground">Semua transaksi sudah diverifikasi</p>
                </div>
              ) : (
                <div className="space-y-4">
                  {transactions.map((transaction, index) => (
                    <motion.div
                      key={transaction.id}
                      initial={{ opacity: 0, y: 20 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ delay: index * 0.1 }}
                      className="border border-border rounded-lg p-4 hover:bg-secondary/30 transition-colors"
                    >
                      <div className="grid md:grid-cols-6 gap-4 items-center">
                        <div>
                          <p className="text-xs text-muted-foreground">Kandidat</p>
                          <p className="font-semibold">{transaction.candidate?.name}</p>
                          <p className="text-xs text-muted-foreground">No. {transaction.candidate?.nomor_urut}</p>
                        </div>
                        <div>
                          <p className="text-xs text-muted-foreground">Event</p>
                          <p className="font-semibold text-sm">{transaction.event?.title}</p>
                        </div>
                        <div>
                          <p className="text-xs text-muted-foreground">Jumlah Vote</p>
                          <p className="font-bold text-primary">{transaction.vote_count}</p>
                        </div>
                        <div>
                          <p className="text-xs text-muted-foreground">Nominal</p>
                          <p className="font-semibold">Rp {transaction.nominal?.toLocaleString("id-ID")}</p>
                        </div>
                        <div>
                          <p className="text-xs text-muted-foreground">Waktu</p>
                          <p className="text-sm">
                            {new Date(transaction.created_at).toLocaleDateString("id-ID", {
                              year: "numeric",
                              month: "short",
                              day: "numeric",
                              hour: "2-digit",
                              minute: "2-digit",
                            })}
                          </p>
                        </div>
                        <div className="flex gap-2">
                          <Button
                            size="sm"
                            className="bg-green-600 hover:bg-green-700"
                            onClick={() => handleApproveTransaction(transaction)}
                            disabled={processing}
                          >
                            {processing ? (
                              <Loader2 className="w-4 h-4 animate-spin" />
                            ) : (
                              <CheckCircle className="w-4 h-4" />
                            )}
                          </Button>
                          <Button
                            size="sm"
                            variant="destructive"
                            onClick={() => setSelectedTransaction(transaction)}
                            disabled={processing}
                          >
                            <XCircle className="w-4 h-4" />
                          </Button>
                        </div>
                      </div>
                    </motion.div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </div>
      </div>

{/* Rejection Dialog */}
      <Dialog open={!!selectedTransaction} onOpenChange={() => setSelectedTransaction(null)}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Tolak Transaksi</DialogTitle>
            <DialogDescription>
              Jelaskan alasan penolakan transaksi untuk {selectedTransaction?.candidate?.name}
            </DialogDescription>
          </DialogHeader>

<div className="space-y-4">
            <div>
              <p className="text-sm text-muted-foreground mb-2">Alasan Penolakan</p>
              <Textarea
                placeholder="Contoh: Nominal tidak sesuai, duplikat pembayaran, dll"
                value={rejectionReason}
                onChange={(e) => setRejectionReason(e.target.value)}
                className="min-h-24"
              />
            </div>

<div className="flex gap-2">
              <Button
                variant="outline"
                onClick={() => {
                  setSelectedTransaction(null)
                  setRejectionReason("")
                }}
                disabled={processing}
              >
                Batal
              </Button>
              <Button
                variant="destructive"
                onClick={() => handleRejectTransaction(selectedTransaction!)}
                disabled={!rejectionReason.trim() || processing}
              >
                {processing ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <XCircle className="w-4 h-4 mr-2" />}
                Tolak Transaksi
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin-sidebar.tsx" isEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
import { Calendar, Users, Settings, BarChart3, LogOut, ClipboardCheck } from "lucide-react"
import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"

export function AdminSidebar() {
  const pathname = usePathname()
  const supabase = createClient()

const menuItems = [
    { icon: BarChart3, label: "Dashboard", href: "/admin" },
    { icon: Calendar, label: "Events", href: "/admin/events" },
    { icon: Users, label: "Kandidat", href: "/admin/candidates" },
    { icon: Settings, label: "Vote Settings", href: "/admin/settings" },
    { icon: ClipboardCheck, label: "Audit Pembayaran", href: "/admin/audit" },
  ]

const handleLogout = async () => {
    await supabase.auth.signOut()
    window.location.href = "/"
  }

return (
    <div className="w-64 bg-card border-r border-border min-h-screen p-6 space-y-8">
      {/* Logo */}
      <div>
        <h2 className="text-xl font-bold text-primary">PROVOTE ADMIN</h2>
      </div>

{/* Menu Items */}
      <nav className="space-y-2">
        {menuItems.map((item) => {
          const Icon = item.icon
          const isActive = pathname === item.href

return (
            <Link key={item.href} href={item.href}>
              <div
                className={cn(
                  "flex items-center gap-3 px-4 py-2 rounded-lg transition-colors",
                  isActive ? "bg-primary text-primary-foreground" : "hover:bg-secondary text-foreground",
                )}
              >
                <Icon className="w-5 h-5" />
                <span>{item.label}</span>
              </div>
            </Link>
          )
        })}
      </nav>

{/* Logout Button */}
      <div className="pt-8 border-t border-border">
        <Button onClick={handleLogout} variant="outline" className="w-full justify-start gap-2 bg-transparent">
          <LogOut className="w-4 h-4" />
          Logout
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/vote-modal.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { createClient } from "@/lib/supabase/client"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Loader2, AlertCircle, ChevronDown, Plus, Minus } from "lucide-react"
import { motion } from "framer-motion"
import type { Database } from "@/lib/database.types"

type Candidate = Database["public"]["Tables"]["candidates"]["Row"]

interface VoteModalProps {
  isOpen: boolean
  onOpenChange: (open: boolean) => void
  candidate: Candidate
  pricePerVote: number
  eventId: string
  paymentLink?: string
}

export function VoteModal({ isOpen, onOpenChange, candidate, pricePerVote, eventId, paymentLink }: VoteModalProps) {
  const [agreed, setAgreed] = useState(false)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState("")
  const [expandNotes, setExpandNotes] = useState(false)
  const [quantity, setQuantity] = useState(1)
  const supabase = createClient()

const totalPrice = pricePerVote * quantity
  const nominalDengan = totalPrice + candidate.nomor_urut

const handleQuantityChange = (newQuantity: number) => {
    if (newQuantity > 0) {
      setQuantity(newQuantity)
    }
  }

const handlePayment = async () => {
    try {
      setLoading(true)
      setError("")

if (!eventId || !candidate?.id) {
        setError("Data tidak lengkap")
        return
      }

if (!paymentLink) {
        setError("Link pembayaran belum dikonfigurasi. Hubungi admin")
        return
      }

const orderId = `${Date.now()}_${Math.random().toString(36).substring(2, 11)}`

// Simple redirect with basic URL encoding
      const params = new URLSearchParams()
      params.set("order_id", orderId)
      params.set("candidate_id", candidate.id)
      params.set("event_id", eventId)
      params.set("vote_count", quantity.toString())
      params.set("nominal", nominalDengan.toString())

const baseUrl = typeof window !== "undefined" ? window.location.origin : ""
      const successUrl = `${baseUrl}/payment/success?${params.toString()}`

// Simple string concatenation for payment URL
      const separator = paymentLink.includes("?") ? "&" : "?"
      const finalUrl = `${paymentLink}${separator}redirect_url=${encodeURIComponent(successUrl)}`

// Redirect directly without database operations
      window.location.href = finalUrl
    } catch (err) {
      console.error("[v0] Payment error:", err)
      setError("Gagal memproses pembayaran")
      setLoading(false)
    }
  }

return (
    <Dialog open={isOpen} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-sm">
        <motion.div
          initial={{ opacity: 0, scale: 0.95 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.3 }}
        >
          <DialogHeader>
            <DialogTitle className="text-lg">Konfirmasi Vote</DialogTitle>
            <DialogDescription className="text-xs">Review sebelum lanjut bayar</DialogDescription>
          </DialogHeader>

<div className="space-y-2">
            {/* Candidate Info */}
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.1 }}
              className="p-2 bg-secondary rounded-lg space-y-1"
            >
              <div className="flex justify-between items-center">
                <div>
                  <p className="text-xs text-muted-foreground">Kandidat</p>
                  <p className="font-semibold text-sm text-foreground">{candidate.name}</p>
                </div>
                <div className="text-right">
                  <p className="text-xs text-muted-foreground">No. Urut</p>
                  <p className="font-semibold text-sm text-foreground">
                    {String(candidate.nomor_urut).padStart(2, "0")}
                  </p>
                </div>
              </div>
            </motion.div>

<motion.div
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.15 }}
              className="p-2.5 bg-primary/5 border border-primary/30 rounded-lg space-y-2"
            >
              <label className="text-xs font-semibold text-foreground">Jumlah Vote</label>
              <div className="flex items-center gap-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => handleQuantityChange(quantity - 1)}
                  disabled={quantity <= 1}
                  className="h-8 w-8 p-0"
                >
                  <Minus className="w-3 h-3" />
                </Button>
                <input
                  type="number"
                  value={quantity}
                  onChange={(e) => handleQuantityChange(Math.max(1, Number.parseInt(e.target.value) || 1))}
                  className="flex-1 border border-border rounded px-2 py-1 text-center font-semibold text-sm bg-background"
                  min="1"
                />
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => handleQuantityChange(quantity + 1)}
                  className="h-8 w-8 p-0"
                >
                  <Plus className="w-3 h-3" />
                </Button>
              </div>
            </motion.div>

<motion.div
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.2 }}
              className="p-2.5 bg-green-50 dark:bg-green-950/30 rounded-lg space-y-1.5 border border-green-200 dark:border-green-800"
            >
              <div className="flex justify-between items-center pb-1.5 border-b border-green-200 dark:border-green-800">
                <p className="text-xs text-muted-foreground">Harga Per Vote</p>
                <p className="font-semibold text-xs text-foreground">Rp {pricePerVote.toLocaleString("id-ID")}</p>
              </div>
              <div className="flex justify-between items-center pb-1.5 border-b border-green-200 dark:border-green-800">
                <p className="text-xs text-muted-foreground">
                  Subtotal ({quantity} × Rp {pricePerVote.toLocaleString("id-ID")})
                </p>
                <p className="font-semibold text-xs text-foreground">Rp {totalPrice.toLocaleString("id-ID")}</p>
              </div>
              <div className="flex justify-between items-center pb-1.5 text-xs">
                <p className="text-muted-foreground">+ Kode ({String(candidate.nomor_urut).padStart(2, "0")})</p>
                <p className="font-semibold text-foreground">+{String(candidate.nomor_urut).padStart(2, "0")}</p>
              </div>
              <motion.div
                initial={{ scale: 0.95 }}
                animate={{ scale: 1 }}
                className="pt-1.5 mt-1.5 border-t border-green-200 dark:border-green-800 flex justify-between items-center"
              >
                <p className="text-xs font-bold text-foreground">Total Transfer</p>
                <p className="text-lg font-bold text-primary">Rp {nominalDengan.toLocaleString("id-ID")}</p>
              </motion.div>
            </motion.div>

{/* Error Message */}
            {error && (
              <motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }}>
                <Alert variant="destructive" className="py-2">
                  <AlertCircle className="h-3 w-3" />
                  <AlertDescription className="text-xs">{error}</AlertDescription>
                </Alert>
              </motion.div>
            )}

{/* Notes Section */}
            <div className="border border-yellow-600/30 rounded-lg overflow-hidden bg-yellow-50 dark:bg-yellow-950">
              <motion.button
                onClick={() => setExpandNotes(!expandNotes)}
                className="w-full px-2 py-1.5 flex items-center justify-between transition-colors text-left"
              >
                <p className="font-semibold text-xs text-foreground">NOTE PENTING</p>
                <motion.div animate={{ rotate: expandNotes ? 180 : 0 }} transition={{ duration: 0.2 }}>
                  <ChevronDown className="w-3 h-3" />
                </motion.div>
              </motion.button>

<motion.div
                initial={{ height: 0, opacity: 0 }}
                animate={{ height: expandNotes ? "auto" : 0, opacity: expandNotes ? 1 : 0 }}
                transition={{ duration: 0.3 }}
                className="overflow-hidden"
              >
                <div className="px-2 py-2 border-t border-yellow-600/30 space-y-1 text-xs">
                  <p className="text-foreground/90">Pastikan nominal: Rp {nominalDengan.toLocaleString("id-ID")}</p>
                </div>
              </motion.div>
            </div>

{/* Agreement Checkbox */}
            <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.3 }}>
              <div className="flex items-start gap-2 p-2 bg-primary/5 border border-primary/20 rounded-lg">
                <Checkbox id="agree" checked={agreed} onCheckedChange={setAgreed} className="mt-0.5" />
                <label htmlFor="agree" className="text-xs leading-relaxed cursor-pointer font-medium">
                  Saya setuju bayar Rp {nominalDengan.toLocaleString("id-ID")} untuk {quantity} vote
                </label>
              </div>
            </motion.div>

{/* Action Buttons */}
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 0.4 }}
              className="flex gap-1.5 pt-1"
            >
              <Button
                variant="outline"
                onClick={() => {
                  onOpenChange(false)
                  setError("")
                }}
                disabled={loading}
                className="flex-1 text-xs h-9"
              >
                Batal
              </Button>
              <Button onClick={handlePayment} disabled={!agreed || loading} className="flex-1 text-xs h-9">
                {loading ? (
                  <>
                    <Loader2 className="w-3 h-3 mr-2 animate-spin" />
                    Proses...
                  </>
                ) : (
                  `Bayar Rp ${nominalDengan.toLocaleString("id-ID")}`
                )}
              </Button>
            </motion.div>
          </div>
        </motion.div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="app/payment/success/client.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useSearchParams, useRouter } from "next/navigation"
import { motion } from "framer-motion"
import { CheckCircle, Loader } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Navbar } from "@/components/navbar"
import { Confetti } from "@/components/confetti"
import { createClient } from "@/lib/supabase/client"
import Link from "next/link"

export function PaymentSuccessClient() {
  const searchParams = useSearchParams()
  const router = useRouter()
  const supabase = createClient()

const orderId = searchParams.get("order_id")
  const candidateId = searchParams.get("candidate_id")
  const eventId = searchParams.get("event_id")
  const voteCount = Number.parseInt(searchParams.get("vote_count") || "1")

const [status, setStatus] = useState<"loading" | "success" | "error">("loading")
  const [message, setMessage] = useState("")
  const [processedOrderIds, setProcessedOrderIds] = useState<Set<string>>(new Set())

useEffect(() => {
    const verifyAndUpdateVote = async () => {
      if (!candidateId || !eventId || !orderId) {
        setStatus("error")
        setMessage("Data pembayaran tidak lengkap")
        return
      }

if (processedOrderIds.has(orderId)) {
        setStatus("success")
        setMessage(`Terima kasih! ${voteCount} vote telah ditambahkan untuk kandidat ini.`)
        return
      }

try {
        const { data: transaction, error: fetchError } = await supabase
          .from("transactions")
          .select("*")
          .eq("order_id", orderId)
          .single()

if (fetchError || !transaction) {
          setStatus("error")
          setMessage("Transaksi tidak ditemukan. Silakan hubungi support.")
          return
        }

// Admin will verify within 12 hours and update to success
        if (transaction.status === "pending") {
          // Vote will be incremented when admin approves in audit page
          setStatus("success")
          setMessage(`Vote sedang diproses. Admin akan memverifikasi pembayaran Anda dalam 12 jam.`)
          setProcessedOrderIds(new Set([...processedOrderIds, orderId]))
        } else if (transaction.status === "success" && !transaction.payment_verified) {
          const { error: incrementError } = await supabase.rpc("increment_candidate_votes", {
            candidate_id: candidateId,
            vote_amount: voteCount,
          })

if (incrementError) throw incrementError

// Mark as processed
          await supabase.from("transactions").update({ payment_verified: true }).eq("order_id", orderId)

setStatus("success")
          setMessage(`Terima kasih! ${voteCount} vote telah ditambahkan untuk kandidat ini.`)
          setProcessedOrderIds(new Set([...processedOrderIds, orderId]))
        } else if (transaction.status === "rejected") {
          setStatus("error")
          setMessage(`Pembayaran ditolak: ${transaction.rejection_reason || "Tidak ada informasi"}`)
        } else {
          setStatus("error")
          setMessage("Status pembayaran tidak valid. Silakan hubungi support.")
        }
      } catch (error) {
        console.error("Error verifying vote:", error)
        setStatus("error")
        setMessage("Terjadi kesalahan saat memproses vote. Silakan hubungi support.")
      }
    }

verifyAndUpdateVote()
  }, [candidateId, eventId, voteCount, orderId, supabase, processedOrderIds])

return (
    <div className="min-h-screen bg-background">
      <Navbar />
      {status === "success" && <Confetti />}

<section className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <motion.div
          initial={{ opacity: 0, scale: 0.9 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.5 }}
          className="text-center space-y-8"
        >
          {/* Status Icon */}
          {status === "loading" && (
            <motion.div animate={{ rotate: 360 }} transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY }}>
              <Loader className="w-24 h-24 mx-auto text-primary" />
            </motion.div>
          )}

{status === "success" && (
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              transition={{ type: "spring", stiffness: 200, damping: 10 }}
            >
              <CheckCircle className="w-24 h-24 mx-auto text-green-500 animate-pulse-scale" />
            </motion.div>
          )}

{status === "error" && (
            <div className="w-24 h-24 mx-auto bg-red-100 rounded-full flex items-center justify-center">
              <span className="text-4xl">❌</span>
            </div>
          )}

{/* Status Message */}
          <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.3 }}>
            <h1
              className={`text-4xl font-bold mb-4 ${status === "success" ? "text-green-600" : status === "error" ? "text-red-600" : "text-primary"}`}
            >
              {status === "loading" && "Memproses Pembayaran..."}
              {status === "success" && "Pembayaran Berhasil!"}
              {status === "error" && "Pembayaran Gagal"}
            </h1>
            <p className="text-lg text-muted-foreground">{message}</p>
          </motion.div>

{/* Details Card */}
          {status === "success" && (
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.5 }}
              className="bg-card border border-border rounded-lg p-8 space-y-4"
            >
              <div className="space-y-3">
                <div className="flex justify-between items-center pb-3 border-b border-border">
                  <span className="text-muted-foreground">Vote Akan Diproses</span>
                  <span className="font-bold text-xl text-primary">{voteCount}</span>
                </div>
                {orderId && (
                  <div className="flex justify-between items-center">
                    <span className="text-muted-foreground">Order ID</span>
                    <span className="font-mono text-sm">{orderId}</span>
                  </div>
                )}
                <div className="bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 rounded p-3 mt-4">
                  <p className="text-xs text-blue-900 dark:text-blue-200">
                    <span className="font-semibold">Info:</span> Admin akan memverifikasi pembayaran Anda dalam 12 jam.
                    Vote akan bertambah setelah disetujui.
                  </p>
                </div>
              </div>
            </motion.div>
          )}

{/* Action Buttons */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.7 }}
            className="flex flex-col sm:flex-row gap-4 justify-center pt-4"
          >
            {status === "success" && (
              <>
                <Link href={`/events/${eventId}`}>
                  <Button className="gap-2 bg-primary hover:bg-primary/90">Lihat Event</Button>
                </Link>
                <Link href="/events">
                  <Button variant="outline">Kembali ke Events</Button>
                </Link>
              </>
            )}

{status === "error" && (
              <>
                <Button onClick={() => router.back()} variant="outline">
                  Kembali
                </Button>
                <Link href="/events">
                  <Button className="bg-primary hover:bg-primary/90">Coba Lagi</Button>
                </Link>
              </>
            )}
          </motion.div>
        </motion.div>
      </section>
    </div>
  )
}
[V0_FILE]sql:file="scripts/06-add-order-id-column.sql" isMerged="true"
-- Add order_id column to transactions table if it doesn't exist
ALTER TABLE transactions
ADD COLUMN IF NOT EXISTS order_id VARCHAR(255) UNIQUE,
ADD COLUMN IF NOT EXISTS rejection_reason TEXT,
ADD COLUMN IF NOT EXISTS verified_by_admin UUID,
ADD COLUMN IF NOT EXISTS verified_at TIMESTAMP;

-- Create index for order_id for faster lookup
CREATE INDEX IF NOT EXISTS idx_transactions_order_id ON transactions(order_id);
[V0_FILE]typescriptreact:file="app/events/[id]/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useParams } from "next/navigation"
import { Navbar } from "@/components/navbar"
import { createClient } from "@/lib/supabase/client"
import { CandidateCard } from "@/components/candidate-card"
import { Skeleton } from "@/components/ui/skeleton"
import { Badge } from "@/components/ui/badge"
import { motion } from "framer-motion"
import { Calendar, Users } from "lucide-react"
import type { Database } from "@/lib/database.types"

type Event = Database["public"]["Tables"]["events"]["Row"]
type Candidate = Database["public"]["Tables"]["candidates"]["Row"]
type VoteSetting = Database["public"]["Tables"]["vote_settings"]["Row"]

export default function EventDetailPage() {
  const params = useParams()
  const eventId = params.id as string
  const [event, setEvent] = useState<Event | null>(null)
  const [candidates, setCandidates] = useState<Candidate[]>([])
  const [voteSetting, setVoteSetting] = useState<VoteSetting | null>(null)
  const [loading, setLoading] = useState(true)
  const supabase = createClient()

useEffect(() => {
    if (!eventId) return

const fetchEventData = async () => {
      try {
        const { data: eventData, error: eventError } = await supabase
          .from("events")
          .select("*")
          .eq("id", eventId)
          .single()

if (eventError) {
          console.error("[v0] Event fetch error:", eventError)
          setLoading(false)
          return
        }

if (eventData) {
          setEvent(eventData)

const { data: settingsData } = await supabase
            .from("vote_settings")
            .select("*")
            .eq("event_id", eventId)
            .single()

if (settingsData) {
            setVoteSetting(settingsData)
          }

const { data: candidatesData } = await supabase
            .from("candidates")
            .select("*")
            .eq("event_id", eventId)
            .order("nomor_urut", { ascending: true })

if (candidatesData) {
            setCandidates(candidatesData)
          }
        }
      } catch (error) {
        console.error("[v0] Error fetching event data:", error)
      } finally {
        setLoading(false)
      }
    }

fetchEventData()

// Poll for updates every 5 seconds instead of using problematic realtime
    const interval = setInterval(fetchEventData, 5000)

return () => clearInterval(interval)
  }, [eventId, supabase])

if (loading) {
    return (
      <div className="min-h-screen bg-background">
        <Navbar />
        <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
          <Skeleton className="w-1/2 h-10 mb-8" />
          <div className="grid md:grid-cols-2 gap-6">
            {[...Array(4)].map((_, i) => (
              <Skeleton key={i} className="w-full h-64" />
            ))}
          </div>
        </section>
      </div>
    )
  }

if (!event) {
    return (
      <div className="min-h-screen bg-background">
        <Navbar />
        <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
          <p className="text-muted-foreground text-lg">Event tidak ditemukan</p>
        </section>
      </div>
    )
  }

const isActive = new Date(event.end_date) > new Date()
  const startDate = new Date(event.start_date).toLocaleDateString("id-ID", {
    year: "numeric",
    month: "long",
    day: "numeric",
  })
  const endDate = new Date(event.end_date).toLocaleDateString("id-ID", {
    year: "numeric",
    month: "long",
    day: "numeric",
  })

const sortedCandidates = [...candidates].sort((a, b) => (b.total_votes || 0) - (a.total_votes || 0))

return (
    <div className="min-h-screen bg-background">
      <Navbar />

<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="space-y-12">
          {/* Event Header */}
          <div className="space-y-4">
            <div className="flex items-start justify-between gap-4">
              <div className="space-y-2">
                <h1 className="text-4xl font-bold text-foreground">{event.title}</h1>
                <p className="text-lg text-muted-foreground">{event.description}</p>
              </div>
              <Badge variant={isActive ? "default" : "secondary"} className="text-base px-4 py-2">
                {isActive ? "Aktif" : "Selesai"}
              </Badge>
            </div>

{/* Event Info */}
            <div className="grid md:grid-cols-3 gap-4 pt-4">
              <div className="flex items-center gap-3 p-4 bg-card rounded-lg border border-border">
                <Calendar className="w-5 h-5 text-primary" />
                <div>
                  <p className="text-sm text-muted-foreground">Periode Voting</p>
                  <p className="font-semibold">
                    {startDate} - {endDate}
                  </p>
                </div>
              </div>

<div className="flex items-center gap-3 p-4 bg-card rounded-lg border border-border">
                <Users className="w-5 h-5 text-primary" />
                <div>
                  <p className="text-sm text-muted-foreground">Total Kandidat</p>
                  <p className="font-semibold">{candidates.length} Kandidat</p>
                </div>
              </div>

{voteSetting && (
                <div className="flex items-center gap-3 p-4 bg-primary/10 rounded-lg border border-primary/30">
                  <span className="text-3xl">💰</span>
                  <div>
                    <p className="text-sm text-muted-foreground">Harga Per Vote</p>
                    <p className="font-semibold text-primary">
                      Rp {voteSetting.price_per_vote.toLocaleString("id-ID")}
                    </p>
                  </div>
                </div>
              )}
            </div>
          </div>

{/* Candidates Grid */}
          <div className="space-y-4">
            <h2 className="text-2xl font-bold text-foreground">Kandidat</h2>

{candidates.length === 0 ? (
              <div className="text-center py-12">
                <p className="text-muted-foreground text-lg">Belum ada kandidat untuk event ini</p>
              </div>
            ) : (
              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                {sortedCandidates.map((candidate, idx) => (
                  <motion.div
                    key={candidate.id}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: idx * 0.1 }}
                  >
                    <CandidateCard
                      candidate={candidate}
                      pricePerVote={voteSetting?.price_per_vote || 0}
                      eventId={eventId}
                      isActive={isActive}
                      paymentLink={voteSetting?.payment_link || undefined}
                    />
                  </motion.div>
                ))}
              </div>
            )}
          </div>
        </motion.div>
      </section>
    </div>
  )
}
[V0_FILE]css:file="styles/globals.css" isEdit="true" isMerged="true"
@import "tailwindcss";

/* Removed non-existent tw-animate-css import */

:root {
  --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);
  --destructive-foreground: 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);
  --radius: 0.625rem;
  --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.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 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.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 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(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --font-sans: "Geist", "Geist Fallback";
  --font-mono: "Geist Mono", "Geist Mono Fallback";
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]sql:file="scripts/07-ensure-vote-settings.sql" isEdit="true" isMerged="true"
-- Removed ON CONFLICT clause since we're already checking with WHERE NOT EXISTS
-- Ensure vote_settings has proper data
INSERT INTO vote_settings (event_id, price_per_vote, payment_link, note_text)
SELECT 
  e.id,
  10000, -- Default 10k per vote
  'https://doku.com/checkout', -- Default payment link
  'Pastikan nominal transfer sesuai dengan total vote'
FROM events e
WHERE NOT EXISTS (
  SELECT 1 FROM vote_settings vs WHERE vs.event_id = e.id
);
[V0_FILE]png:file="public/images/hero-jakarta-background.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ChatGPT%20Image%2015%20Jan%202026%2C%2018.14.49-nL0Ntiyqn9AzGo1NnpW3C88odO6yAe.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Navbar } from "@/components/navbar"
import { ArrowRight } from "lucide-react"
import Link from "next/link"

export default function Home() {
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.2,
        delayChildren: 0.3,
      },
    },
  }

const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.8, ease: "easeOut" },
    },
  }

return (
    <div className="min-h-screen bg-background">
      <Navbar />

<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32 w-full">
          <motion.div variants={containerVariants} initial="hidden" animate="visible" className="space-y-8">
            <motion.h1
              variants={itemVariants}
              className="text-5xl md:text-7xl lg:text-8xl font-black text-white text-balance leading-tight tracking-tighter"
            >
              Platform Voting
              <br />
              <span className="bg-gradient-to-r from-green-400 via-emerald-400 to-green-300 bg-clip-text text-transparent">
                Nomor 1 Indonesia
              </span>
            </motion.h1>

<motion.p
              variants={itemVariants}
              className="text-lg md:text-2xl text-white/85 max-w-3xl text-balance font-light leading-relaxed"
            >
              Vote kandidat favorit Anda dengan aman, transparan, dan real-time. Sistem voting terpercaya untuk
              kompetisi yang adil di seluruh Indonesia.
            </motion.p>

<motion.div variants={itemVariants} className="flex flex-wrap gap-4 pt-8">
              <Link href="/events">
                <Button
                  size="lg"
                  className="gap-2 bg-primary hover:bg-primary/90 text-white font-semibold px-8 py-6 rounded-full shadow-lg hover:shadow-xl transition-all text-base"
                >
                  Vote Sekarang
                  <ArrowRight className="w-5 h-5" />
                </Button>
              </Link>
              <Link href="/about">
                <Button
                  size="lg"
                  variant="outline"
                  className="border-2 border-white text-white hover:bg-white/10 bg-white/5 backdrop-blur-sm font-semibold px-8 py-6 rounded-full transition-all text-base"
                >
                  Pelajari Lebih Lanjut
                </Button>
              </Link>
            </motion.div>
          </motion.div>
        </div>
      </section>

{/* Features Section */}
      <section className="bg-card py-20 border-y border-border">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            transition={{ duration: 0.8 }}
            className="grid md:grid-cols-3 gap-8"
          >
            {[
              { title: "Transparan", desc: "Semua data voting bersifat publik dan real-time" },
              { title: "Aman", desc: "Sistem keamanan berlapis untuk melindungi suara Anda" },
              { title: "Terpercaya", desc: "Platform nomor 1 untuk kompetisi Indonesia" },
            ].map((feature, idx) => (
              <motion.div
                key={feature.title}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ delay: idx * 0.2 }}
                className="p-6 bg-background rounded-lg border border-border hover:border-primary/50 transition-colors"
              >
                <h3 className="text-lg font-semibold text-foreground mb-2">{feature.title}</h3>
                <p className="text-muted-foreground">{feature.desc}</p>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
"use client"
import { useEffect, useState } from "react"
import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, useTheme as useNextTheme } from "next-themes"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  const [mounted, setMounted] = useState(false)

useEffect(() => {
    setMounted(true)
  }, [])

if (!mounted) {
    return <>{children}</>
  }

return (
    <NextThemesProvider attribute="class" enableSystem disableTransitionOnChange storageKey="provote-theme" {...props}>
      {children}
    </NextThemesProvider>
  )
}

export function useTheme() {
  const { theme, setTheme } = useNextTheme()

const toggleTheme = () => {
    setTheme(theme === "dark" ? "light" : "dark")
  }

return { theme, toggleTheme, setTheme }
}
[V0_FILE]typescriptreact:file="components/ui/chart.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as RechartsPrimitive from 'recharts'

import { cn } from '@/lib/utils'

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: '', dark: '.dark' } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

if (!context) {
    throw new Error('useChart must be used within a <ChartContainer />')
  }

return context
}

function ChartContainer({
  id,
  className,
  children,
  config,
  ...props
}: React.ComponentProps<'div'> & {
  config: ChartConfig
  children: React.ComponentProps<
    typeof RechartsPrimitive.ResponsiveContainer
  >['children']
}) {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`

return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-slot="chart"
        data-chart={chartId}
        className={cn(
          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
          className,
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
}

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const [mounted, setMounted] = React.useState(false)

React.useEffect(() => {
    setMounted(true)
  }, [])

const colorConfig = Object.entries(config).filter(
    ([, config]) => config.theme || config.color,
  )

if (!colorConfig.length || !mounted) {
    return null
  }

return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(
            ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color
    return color ? `  --color-${key}: ${color};` : null
  })
  .join('\n')}
}
`,
          )
          .join('\n'),
      }}
    />
  )
}

const ChartTooltip = RechartsPrimitive.Tooltip

function ChartTooltipContent({
  active,
  payload,
  className,
  indicator = 'dot',
  hideLabel = false,
  hideIndicator = false,
  label,
  labelFormatter,
  labelClassName,
  formatter,
  color,
  nameKey,
  labelKey,
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
  React.ComponentProps<'div'> & {
    hideLabel?: boolean
    hideIndicator?: boolean
    indicator?: 'line' | 'dot' | 'dashed'
    nameKey?: string
    labelKey?: string
  }) {
  const { config } = useChart()

const tooltipLabel = React.useMemo(() => {
    if (hideLabel || !payload?.length) {
      return null
    }

const [item] = payload
    const key = `${labelKey || item?.dataKey || item?.name || 'value'}`
    const itemConfig = getPayloadConfigFromPayload(config, item, key)
    const value =
      !labelKey && typeof label === 'string'
        ? config[label as keyof typeof config]?.label || label
        : itemConfig?.label

if (labelFormatter) {
      return (
        <div className={cn('font-medium', labelClassName)}>
          {labelFormatter(value, payload)}
        </div>
      )
    }

if (!value) {
      return null
    }

return <div className={cn('font-medium', labelClassName)}>{value}</div>
  }, [
    label,
    labelFormatter,
    payload,
    hideLabel,
    labelClassName,
    config,
    labelKey,
  ])

if (!active || !payload?.length) {
    return null
  }

const nestLabel = payload.length === 1 && indicator !== 'dot'

return (
    <div
      className={cn(
        'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
        className,
      )}
    >
      {!nestLabel ? tooltipLabel : null}
      <div className="grid gap-1.5">
        {payload.map((item, index) => {
          const key = `${nameKey || item.name || item.dataKey || 'value'}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)
          const indicatorColor = color || item.payload.fill || item.color

return (
            <div
              key={item.dataKey}
              className={cn(
                '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
                indicator === 'dot' && 'items-center',
              )}
            >
              {formatter && item?.value !== undefined && item.name ? (
                formatter(item.value, item.name, item, index, item.payload)
              ) : (
                <>
                  {itemConfig?.icon ? (
                    <itemConfig.icon />
                  ) : (
                    !hideIndicator && (
                      <div
                        className={cn(
                          'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',
                          {
                            'h-2.5 w-2.5': indicator === 'dot',
                            'w-1': indicator === 'line',
                            'w-0 border-[1.5px] border-dashed bg-transparent':
                              indicator === 'dashed',
                            'my-0.5': nestLabel && indicator === 'dashed',
                          },
                        )}
                        style={
                          {
                            '--color-bg': indicatorColor,
                            '--color-border': indicatorColor,
                          } as React.CSSProperties
                        }
                      />
                    )
                  )}
                  <div
                    className={cn(
                      'flex flex-1 justify-between leading-none',
                      nestLabel ? 'items-end' : 'items-center',
                    )}
                  >
                    <div className="grid gap-1.5">
                      {nestLabel ? tooltipLabel : null}
                      <span className="text-muted-foreground">
                        {itemConfig?.label || item.name}
                      </span>
                    </div>
                    {item.value && (
                      <span className="text-foreground font-mono font-medium tabular-nums">
                        {item.value.toLocaleString()}
                      </span>
                    )}
                  </div>
                </>
              )}
            </div>
          )
        })}
      </div>
    </div>
  )
}

const ChartLegend = RechartsPrimitive.Legend

function ChartLegendContent({
  className,
  hideIcon = false,
  payload,
  verticalAlign = 'bottom',
  nameKey,
}: React.ComponentProps<'div'> &
  Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
    hideIcon?: boolean
    nameKey?: string
  }) {
  const { config } = useChart()

if (!payload?.length) {
    return null
  }

return (
    <div
      className={cn(
        'flex items-center justify-center gap-4',
        verticalAlign === 'top' ? 'pb-3' : 'pt-3',
        className,
      )}
    >
      {payload.map((item) => {
        const key = `${nameKey || item.dataKey || 'value'}`
        const itemConfig = getPayloadConfigFromPayload(config, item, key)

return (
          <div
            key={item.value}
            className={
              '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3'
            }
          >
            {itemConfig?.icon && !hideIcon ? (
              <itemConfig.icon />
            ) : (
              <div
                className="h-2 w-2 shrink-0 rounded-[2px]"
                style={{
                  backgroundColor: item.color,
                }}
              />
            )}
            {itemConfig?.label}
          </div>
        )
      })}
    </div>
  )
}

// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string,
) {
  if (typeof payload !== 'object' || payload === null) {
    return undefined
  }

const payloadPayload =
    'payload' in payload &&
    typeof payload.payload === 'object' &&
    payload.payload !== null
      ? payload.payload
      : undefined

let configLabelKey: string = key

if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === 'string'
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Geist, Geist_Mono } from "next/font/google"
import { Analytics } from "@vercel/analytics/next"
import { RealtimeProvider } from "@/components/realtime-provider"
import "./globals.css"

const _geist = Geist({ subsets: ["latin"] })
const _geistMono = Geist_Mono({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "PROVOTE.ID - Platform Voting Indonesia",
  description: "Platform voting nomor 1 di Indonesia - transparan, kompetitif, dan terpercaya",
  generator: "v0.app",
  icons: {
    icon: [
      {
        url: "/icon-light-32x32.png",
        media: "(prefers-color-scheme: light)",
      },
      {
        url: "/icon-dark-32x32.png",
        media: "(prefers-color-scheme: dark)",
      },
      {
        url: "/icon.svg",
        type: "image/svg+xml",
      },
    ],
    apple: "/apple-icon.png",
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="id">
      <body className={`font-sans antialiased`}>
        <RealtimeProvider>{children}</RealtimeProvider>
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]sql:file="scripts/08-add-pamphlet-column.sql" isMerged="true"
-- Add pamphlet_url column to events table for storing event posters/pamphlets
ALTER TABLE events ADD COLUMN IF NOT EXISTS pamphlet_url VARCHAR(500);
[V0_FILE]typescriptreact:file="components/create-event-modal.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { X, Upload } from "lucide-react"
import { motion } from "framer-motion"

interface CreateEventModalProps {
  isOpen: boolean
  onClose: () => void
  onSuccess: () => void
}

export function CreateEventModal({ isOpen, onClose, onSuccess }: CreateEventModalProps) {
  const [formData, setFormData] = useState({
    title: "",
    description: "",
    start_date: "",
    end_date: "",
    pamphlet_url: "",
    status: "active" as const,
  })
  const [loading, setLoading] = useState(false)
  const [previewImage, setPreviewImage] = useState<string | null>(null)
  const supabase = createClient()

const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      const reader = new FileReader()
      reader.onload = (event) => {
        const imageUrl = event.target?.result as string
        setPreviewImage(imageUrl)
        setFormData({ ...formData, pamphlet_url: imageUrl })
      }
      reader.readAsDataURL(file)
    }
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

try {
      const { error } = await supabase.from("events").insert([formData])

if (!error) {
        setFormData({
          title: "",
          description: "",
          start_date: "",
          end_date: "",
          pamphlet_url: "",
          status: "active",
        })
        setPreviewImage(null)
        onSuccess()
        onClose()
      }
    } catch (error) {
      console.error("Error creating event:", error)
    } finally {
      setLoading(false)
    }
  }

if (!isOpen) return null

return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
      <motion.div initial={{ scale: 0.95, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} className="w-full max-w-2xl">
        <Card className="m-4 max-h-[90vh] overflow-y-auto">
          <CardHeader className="flex flex-row items-center justify-between space-y-0">
            <CardTitle>Buat Event Baru</CardTitle>
            <button onClick={onClose} className="text-muted-foreground hover:text-foreground">
              <X className="w-5 h-5" />
            </button>
          </CardHeader>

<CardContent>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label className="block text-sm font-medium mb-1">Judul Event</label>
                <Input
                  required
                  value={formData.title}
                  onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                  placeholder="Mis: Pemilihan Ketua OSIS 2024"
                />
              </div>

<div>
                <label className="block text-sm font-medium mb-1">Deskripsi</label>
                <Textarea
                  value={formData.description}
                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                  placeholder="Jelaskan event ini..."
                  rows={3}
                />
              </div>

<div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium mb-1">Tanggal Mulai</label>
                  <Input
                    required
                    type="datetime-local"
                    value={formData.start_date}
                    onChange={(e) => setFormData({ ...formData, start_date: e.target.value })}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1">Tanggal Selesai</label>
                  <Input
                    required
                    type="datetime-local"
                    value={formData.end_date}
                    onChange={(e) => setFormData({ ...formData, end_date: e.target.value })}
                  />
                </div>
              </div>

<div>
                <label className="block text-sm font-medium mb-2">Pamflet / Poster Event</label>
                <div className="border-2 border-dashed border-primary/50 rounded-lg p-4">
                  {previewImage ? (
                    <div className="space-y-2">
                      <img src={previewImage} alt="Preview" className="w-full h-40 object-cover rounded-lg" />
                      <Input
                        type="file"
                        accept="image/*"
                        onChange={handleImageChange}
                        className="cursor-pointer"
                      />
                    </div>
                  ) : (
                    <label className="flex flex-col items-center justify-center cursor-pointer py-6">
                      <Upload className="w-8 h-8 text-primary/50 mb-2" />
                      <span className="text-sm text-muted-foreground">Klik untuk upload gambar</span>
                      <Input
                        type="file"
                        accept="image/*"
                        onChange={handleImageChange}
                        className="hidden"
                      />
                    </label>
                  )}
                </div>
              </div>

<div className="flex justify-end gap-2 pt-4">
                <Button type="button" variant="outline" onClick={onClose}>
                  Batal
                </Button>
                <Button type="submit" disabled={loading}>
                  {loading ? "Menyimpan..." : "Buat Event"}
                </Button>
              </div>
            </form>
          </CardContent>
        </Card>
      </motion.div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/event-card.tsx"
"use client"

import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Calendar } from "lucide-react"
import { motion } from "framer-motion"
import type { Database } from "@/lib/database.types"
import Image from "next/image"

type Event = Database["public"]["Tables"]["events"]["Row"]
type VoteSetting = Database["public"]["Tables"]["vote_settings"]["Row"]

interface EventCardProps {
  event: Event
  voteSetting?: VoteSetting
}

export function EventCard({ event, voteSetting }: EventCardProps) {
  const isActive = new Date(event.end_date) > new Date()
  const startDate = new Date(event.start_date).toLocaleDateString("id-ID")
  const endDate = new Date(event.end_date).toLocaleDateString("id-ID")
  const formattedPrice = voteSetting?.price_per_vote
    ? `Rp ${voteSetting.price_per_vote.toLocaleString("id-ID")}`
    : "TBA"

return (
    <motion.div whileHover={{ y: -5 }} transition={{ duration: 0.2 }}>
      <Link href={`/events/${event.id}`}>
        <Card className="h-full cursor-pointer hover:border-primary/50 transition-colors overflow-hidden">
          {/* Pamphlet Image or Gradient Background */}
          <div className="h-40 bg-gradient-to-br from-primary/20 to-primary/5 overflow-hidden">
            {event.pamphlet_url ? (
              <img
                src={event.pamphlet_url}
                alt={event.title}
                className="w-full h-full object-cover"
              />
            ) : (
              <div className="w-full h-full bg-gradient-to-br from-primary/20 to-primary/5" />
            )}
          </div>

<CardHeader className="space-y-3">
            <div className="flex items-start justify-between gap-2">
              <CardTitle className="text-xl line-clamp-2">{event.title}</CardTitle>
              <Badge variant={isActive ? "default" : "secondary"}>{isActive ? "Active" : "Ended"}</Badge>
            </div>

<CardDescription className="line-clamp-2">{event.description}</CardDescription>
          </CardHeader>

<CardContent className="space-y-4">
            {/* Voting Period */}
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <Calendar className="w-4 h-4" />
              <span>
                {startDate} - {endDate}
              </span>
            </div>

{/* Price Per Vote */}
            <div className="flex items-center justify-between p-3 bg-secondary rounded-lg">
              <span className="text-sm font-medium">Harga Vote</span>
              <span className="font-semibold text-primary">{formattedPrice}</span>
            </div>

{/* View Button */}
            <Button className="w-full">Lihat Event</Button>
          </CardContent>
        </Card>
      </Link>
    </motion.div>
  )
}</article></body></html>