[V0_FILE]typescriptreact:file="app/login/page.tsx" isMerged="true" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useToast } from "@/hooks/use-toast" import Link from "next/link" import { useRouter } from "next/navigation" import { useState } from "react" export default function LoginPage() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const { toast } = useToast() const router = useRouter() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) // Simulate login setTimeout(() => { if (email && password) { localStorage.setItem("user", JSON.stringify({ email, name: "User" })) toast({ title: "Login successful!", description: "Welcome back to PadelBook", }) router.push("/booking") } else { toast({ title: "Login failed", description: "Please check your credentials", variant: "destructive", }) } setIsLoading(false) }, 1000) } return (

PadelBook

Welcome Back Sign in to your account to book courts

Don't have an account?{" "} Sign up

Back to Home

) } [V0_FILE]typescriptreact:file="app/register/page.tsx" isMerged="true" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useToast } from "@/hooks/use-toast" import Link from "next/link" import { useRouter } from "next/navigation" import { useState } from "react" export default function RegisterPage() { const [name, setName] = useState("") const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [confirmPassword, setConfirmPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const { toast } = useToast() const router = useRouter() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) if (password !== confirmPassword) { toast({ title: "Password mismatch", description: "Passwords do not match", variant: "destructive", }) setIsLoading(false) return } // Simulate registration setTimeout(() => { if (name && email && password) { localStorage.setItem("user", JSON.stringify({ email, name })) toast({ title: "Registration successful!", description: "Welcome to PadelBook", }) router.push("/booking") } else { toast({ title: "Registration failed", description: "Please fill in all fields", variant: "destructive", }) } setIsLoading(false) }, 1000) } return (

PadelBook

Create Account Join PadelBook to start booking courts

Already have an account?{" "} Sign in

Back to Home

) } [V0_FILE]typescriptreact:file="components/ui/radio-group.tsx" isMerged="true" "use client" import * as React from "react" import * as RadioGroupPrimitive from "@radix-ui/react-radio-group" import { Circle } from "lucide-react" import { cn } from "@/lib/utils" const RadioGroup = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => { return }) RadioGroup.displayName = RadioGroupPrimitive.Root.displayName const RadioGroupItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => { return ( ) }) RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName export { RadioGroup, RadioGroupItem } [V0_FILE]typescriptreact:file="components/ui/separator.tsx" isMerged="true" "use client" import * as React from "react" import * as SeparatorPrimitive from "@radix-ui/react-separator" import { cn } from "@/lib/utils" const Separator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => ( )) Separator.displayName = SeparatorPrimitive.Root.displayName export { Separator } [V0_FILE]typescriptreact:file="app/booking/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Calendar } from "@/components/ui/calendar" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { MapPin, LogOut, Users, Clock, Star } from "lucide-react" import { useRouter } from "next/navigation" import { useEffect, useState } from "react" import { useToast } from "@/hooks/use-toast" import Link from "next/link" interface Court { id: number name: string price: number image: string rating: number } interface TimeSlot { time: string available: boolean disabled: boolean } interface OpenMatch { id: string courtId: number courtName: string date: string time: string organizer: string currentPlayers: number maxPlayers: number level: string price: number } const courts: Court[] = [ { id: 1, name: "Court 1", price: 150000, image: "/placeholder.svg?height=200&width=300", rating: 4.8 }, { id: 2, name: "Court 2", price: 150000, image: "/placeholder.svg?height=200&width=300", rating: 4.7 }, { id: 3, name: "Court 3", price: 175000, image: "/placeholder.svg?height=200&width=300", rating: 4.9 }, ] const openMatches: OpenMatch[] = [ { id: "1", courtId: 1, courtName: "Court 1", date: new Date().toISOString().split("T")[0], time: "19:00", organizer: "John Doe", currentPlayers: 2, maxPlayers: 4, level: "Intermediate", price: 75000, }, { id: "2", courtId: 2, courtName: "Court 2", date: new Date(Date.now() + 86400000).toISOString().split("T")[0], time: "20:00", organizer: "Jane Smith", currentPlayers: 1, maxPlayers: 4, level: "Beginner", price: 75000, }, { id: "3", courtId: 3, courtName: "Court 3", date: new Date().toISOString().split("T")[0], time: "18:00", organizer: "Mike Johnson", currentPlayers: 3, maxPlayers: 4, level: "Advanced", price: 87500, }, ] export default function BookingPage() { const [selectedDate, setSelectedDate] = useState(new Date()) const [selectedCourt, setSelectedCourt] = useState(null) const [selectedTime, setSelectedTime] = useState("") const [user, setUser] = useState(null) const [activeTab, setActiveTab] = useState<"book" | "open-match">("book") const router = useRouter() const { toast } = useToast() useEffect(() => { const userData = localStorage.getItem("user") if (!userData) { router.push("/login") return } setUser(JSON.parse(userData)) }, [router]) const generateTimeSlots = (): TimeSlot[] => { const slots: TimeSlot[] = [] const now = new Date() const isToday = selectedDate.toDateString() === now.toDateString() for (let hour = 8; hour <= 23; hour++) { const timeString = `${hour.toString().padStart(2, "0")}:00` const slotTime = new Date(selectedDate) slotTime.setHours(hour, 0, 0, 0) const isPast = isToday && slotTime <= now const isBooked = Math.random() > 0.7 // Random booking simulation slots.push({ time: timeString, available: !isBooked && !isPast, disabled: isPast, }) } return slots } const timeSlots = generateTimeSlots() const handleLogout = () => { localStorage.removeItem("user") router.push("/") } const handleBooking = () => { if (!selectedCourt || !selectedTime) { toast({ title: "Incomplete selection", description: "Please select a court and time slot", variant: "destructive", }) return } const bookingData = { court: selectedCourt, date: selectedDate.toISOString().split("T")[0], time: selectedTime, price: selectedCourt.price, type: "private", } localStorage.setItem("currentBooking", JSON.stringify(bookingData)) router.push("/checkout") } const handleJoinOpenMatch = (match: OpenMatch) => { const bookingData = { court: { id: match.courtId, name: match.courtName, price: match.price }, date: match.date, time: match.time, price: match.price, type: "open-match", matchId: match.id, organizer: match.organizer, } localStorage.setItem("currentBooking", JSON.stringify(bookingData)) router.push("/checkout") } if (!user) return null return (

{/* Header */}

PadelBook

Hi, {user.name}

{/* Tab Navigation */}

{activeTab === "book" ? ( <>

Book Your Court

{/* Mobile-First Layout */}

{/* Date Selection */} Select Date { if (date) { setSelectedDate(date) setSelectedTime("") // Reset time when date changes } }} disabled={(date) => date < new Date(new Date().setHours(0, 0, 0, 0))} className="rounded-md border w-full" /> {/* Court Selection */} Select Court {courts.map((court) => (

{ setSelectedCourt(court) setSelectedTime("") // Reset time when court changes }} >

{court.name}

{court.rating}

Premium Indoor Court

Rp {court.price.toLocaleString()}

per hour

))} {/* Time Selection - Calendar Style */} Select Time {selectedCourt ? `Available slots for ${selectedDate.toLocaleDateString()}` : "Please select a court first"} {!selectedCourt ? (

Select a court to view available time slots

) : (

{timeSlots.map((slot) => ( ))}

)} {selectedCourt && (

• Green: Available slots

• Gray: Unavailable/Past slots

• Red: Already booked

)} {/* Booking Summary */} {selectedCourt && selectedTime && ( Booking Summary

Court

{selectedCourt.name}

Date

{selectedDate.toLocaleDateString()}

Time

{selectedTime} -{" "} {(Number.parseInt(selectedTime.split(":")[0]) + 1).toString().padStart(2, "0")}:00

Duration

1 hour

Total Rp {selectedCourt.price.toLocaleString()}

)}

) : ( <>

Open Matches

Join other players and split the court cost!

{openMatches.map((match) => (

{match.courtName}

{match.level}

{new Date(match.date).toLocaleDateString()}

{match.time}

{match.organizer .split(" ") .map((n) => n[0]) .join("")} by {match.organizer}

{match.currentPlayers}/{match.maxPlayers} players

Rp {match.price.toLocaleString()} per person

))}

{openMatches.length === 0 && (

No open matches available

Be the first to create an open match or check back later!

)} )}

) } [V0_FILE]typescriptreact:file="app/checkout/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Separator } from "@/components/ui/separator" import { ArrowLeft, CreditCard, Smartphone, Building2, Copy, Check } from "lucide-react" import { useRouter } from "next/navigation" import { useEffect, useState } from "react" import { useToast } from "@/hooks/use-toast" import Link from "next/link" interface BookingData { court: { id: number name: string price: number } date: string time: string price: number type: "private" | "open-match" matchId?: string organizer?: string } export default function CheckoutPage() { const [bookingData, setBookingData] = useState(null) const [paymentMethod, setPaymentMethod] = useState("") const [isProcessing, setIsProcessing] = useState(false) const [copied, setCopied] = useState("") // Credit Card Form const [cardNumber, setCardNumber] = useState("") const [expiryDate, setExpiryDate] = useState("") const [cvv, setCvv] = useState("") const [cardName, setCardName] = useState("") // E-Wallet Selection const [selectedEWallet, setSelectedEWallet] = useState("") // Bank Transfer Selection const [selectedBank, setSelectedBank] = useState("") const router = useRouter() const { toast } = useToast() useEffect(() => { const booking = localStorage.getItem("currentBooking") if (!booking) { router.push("/booking") return } setBookingData(JSON.parse(booking)) }, [router]) const formatCardNumber = (value: string) => { const v = value.replace(/\s+/g, "").replace(/[^0-9]/gi, "") const matches = v.match(/\d{4,16}/g) const match = (matches && matches[0]) || "" const parts = [] for (let i = 0, len = match.length; i < len; i += 4) { parts.push(match.substring(i, i + 4)) } if (parts.length) { return parts.join(" ") } else { return v } } const formatExpiryDate = (value: string) => { const v = value.replace(/\D/g, "") if (v.length >= 2) { return v.substring(0, 2) + "/" + v.substring(2, 4) } return v } const handleCardNumberChange = (e: React.ChangeEvent) => { const formatted = formatCardNumber(e.target.value) if (formatted.length <= 19) { setCardNumber(formatted) } } const handleExpiryChange = (e: React.ChangeEvent) => { const formatted = formatExpiryDate(e.target.value) if (formatted.length <= 5) { setExpiryDate(formatted) } } const copyToClipboard = (text: string, type: string) => { navigator.clipboard.writeText(text) setCopied(type) setTimeout(() => setCopied(""), 2000) toast({ title: "Copied!", description: "Account number copied to clipboard", }) } const eWalletAccounts = { gopay: "081234567890", ovo: "081234567890", dana: "081234567890", shopeepay: "081234567890", } const bankAccounts = { bca: "1234567890", mandiri: "1370012345678", bni: "1234567890", bri: "123401234567890", } const handlePayment = async () => { if (!paymentMethod) { toast({ title: "Payment method required", description: "Please select a payment method", variant: "destructive", }) return } // Validate payment details based on method if (paymentMethod === "credit-card") { if (!cardNumber || !expiryDate || !cvv || !cardName) { toast({ title: "Incomplete card details", description: "Please fill in all card information", variant: "destructive", }) return } } else if (paymentMethod === "e-wallet" && !selectedEWallet) { toast({ title: "E-Wallet not selected", description: "Please select an e-wallet provider", variant: "destructive", }) return } else if (paymentMethod === "bank-transfer" && !selectedBank) { toast({ title: "Bank not selected", description: "Please select a bank for transfer", variant: "destructive", }) return } setIsProcessing(true) // Simulate payment processing setTimeout(() => { const transaction = { id: Date.now().toString(), ...bookingData, paymentMethod, paymentDetails: { ...(paymentMethod === "credit-card" && { cardNumber: cardNumber.replace(/\d(?=\d{4})/g, "*"), cardName, }), ...(paymentMethod === "e-wallet" && { provider: selectedEWallet }), ...(paymentMethod === "bank-transfer" && { bank: selectedBank }), }, status: "confirmed", createdAt: new Date().toISOString(), totalAmount: bookingData?.price || 0, } // Save transaction const existingTransactions = JSON.parse(localStorage.getItem("transactions") || "[]") existingTransactions.push(transaction) localStorage.setItem("transactions", JSON.stringify(existingTransactions)) // Clear current booking localStorage.removeItem("currentBooking") toast({ title: "Payment successful!", description: bookingData?.type === "open-match" ? "You've joined the open match successfully!" : "Your court has been successfully booked", }) router.push("/transactions") }, 2000) } if (!bookingData) return null const endTime = (Number.parseInt(bookingData.time.split(":")[0]) + 1).toString().padStart(2, "0") + ":00" return (

{/* Header */}

PadelBook

Checkout

{/* Booking Details */} Booking Details {bookingData.type === "open-match" && ( Open Match )}

Court

{bookingData.court.name}

Date

{new Date(bookingData.date).toLocaleDateString()}

Time

{bookingData.time} - {endTime}

Duration

1 hour

{bookingData.type === "open-match" && bookingData.organizer && (

Organizer: {bookingData.organizer}

You'll be joining this open match with other players

)}

Total Amount Rp {bookingData.price.toLocaleString()}

{/* Payment Method */} Payment Method Choose your preferred payment method {/* Credit Card */}

Credit/Debit Card

Visa, Mastercard, etc.

{paymentMethod === "credit-card" && (

Card Number

Cardholder Name setCardName(e.target.value)} />

Expiry Date

CVV setCvv(e.target.value.replace(/\D/g, "").slice(0, 4))} maxLength={4} />

)}

{/* E-Wallet */}

E-Wallet

GoPay, OVO, DANA, ShopeePay

{paymentMethod === "e-wallet" && (

Select E-Wallet Provider

{selectedEWallet && (

Send payment to this {selectedEWallet.toUpperCase()} number:

{eWalletAccounts[selectedEWallet as keyof typeof eWalletAccounts]}

Amount: Rp {bookingData.price.toLocaleString()}

)}

{/* Bank Transfer */}

Bank Transfer

BCA, Mandiri, BNI, BRI

{paymentMethod === "bank-transfer" && (

Select Bank

{selectedBank && (

Transfer to this {selectedBank.toUpperCase()} account:

Account Number

{bankAccounts[selectedBank as keyof typeof bankAccounts]}

Account Name

PT PadelBook Indonesia

Amount: Rp {bookingData.price.toLocaleString()}

)}

{/* Confirm Payment */}

By confirming payment, you agree to our terms and conditions

) } [V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true" "use client" import * as React from "react" import * as SelectPrimitive from "@radix-ui/react-select" import { Check, ChevronDown, ChevronUp } from "lucide-react" import { cn } from "@/lib/utils" const Select = SelectPrimitive.Root const SelectGroup = SelectPrimitive.Group const SelectValue = SelectPrimitive.Value const SelectTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( span]:line-clamp-1", className, )} {...props} > {children} )) SelectTrigger.displayName = SelectPrimitive.Trigger.displayName const SelectScrollUpButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName const SelectScrollDownButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName const SelectContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, position = "popper", ...props }, ref) => ( {children} )) SelectContent.displayName = SelectPrimitive.Content.displayName const SelectLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectLabel.displayName = SelectPrimitive.Label.displayName const SelectItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) SelectItem.displayName = SelectPrimitive.Item.displayName const SelectSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectSeparator.displayName = SelectPrimitive.Separator.displayName export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, } [V0_FILE]typescriptreact:file="app/transactions/page.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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ArrowLeft, Calendar, Clock, CreditCard, Users, User } from "lucide-react" import { useRouter } from "next/navigation" import { useEffect, useState } from "react" import Link from "next/link" interface Transaction { id: string court: { id: number name: string price: number } date: string time: string paymentMethod: string status: string createdAt: string totalAmount: number type: "private" | "open-match" matchId?: string organizer?: string paymentDetails?: any } const getStatusColor = (status: string) => { switch (status) { case "confirmed": return "bg-green-100 text-green-800" case "pending": return "bg-yellow-100 text-yellow-800" case "cancelled": return "bg-red-100 text-red-800" case "completed": return "bg-blue-100 text-blue-800" default: return "bg-gray-100 text-gray-800" } } const getPaymentMethodIcon = (method: string) => { switch (method) { case "credit-card": return case "e-wallet": return

case "bank-transfer": return

default: return } } const getPaymentMethodName = (method: string) => { switch (method) { case "credit-card": return "Credit Card" case "e-wallet": return "E-Wallet" case "bank-transfer": return "Bank Transfer" default: return method } } export default function TransactionsPage() { const [transactions, setTransactions] = useState([]) const [user, setUser] = useState(null) const router = useRouter() useEffect(() => { const userData = localStorage.getItem("user") if (!userData) { router.push("/login") return } setUser(JSON.parse(userData)) const transactionData = localStorage.getItem("transactions") if (transactionData) { const parsedTransactions = JSON.parse(transactionData) // Sort by creation date (newest first) parsedTransactions.sort( (a: Transaction, b: Transaction) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(), ) setTransactions(parsedTransactions) } }, [router]) if (!user) return null const courtBookings = transactions.filter((t) => t.type === "private" || !t.type) const openMatchBookings = transactions.filter((t) => t.type === "open-match") const TransactionCard = ({ transaction }: { transaction: Transaction }) => { const endTime = (Number.parseInt(transaction.time.split(":")[0]) + 1).toString().padStart(2, "0") + ":00" return (

{transaction.type === "open-match" ? ( ) : ( )}

{transaction.court.name} ID: {transaction.id} {transaction.type === "open-match" && ( Open Match )}

{transaction.status.charAt(0).toUpperCase() + transaction.status.slice(1)}

Date

{new Date(transaction.date).toLocaleDateString()}

Time

{transaction.time} - {endTime}

{getPaymentMethodIcon(transaction.paymentMethod)}

Payment

{getPaymentMethodName(transaction.paymentMethod)}

Total

Rp {transaction.totalAmount.toLocaleString()}

{transaction.type === "open-match" && transaction.organizer && (

Organizer: {transaction.organizer}

You joined this open match with other players

)}

Booked on {new Date(transaction.createdAt).toLocaleDateString()} at{" "} {new Date(transaction.createdAt).toLocaleTimeString()}

) } return (

{/* Header */}

PadelBook

Welcome, {user.name}

My Bookings

{transactions.length === 0 ? (

No bookings yet

You haven't made any court bookings yet. Start by booking your first court!

) : ( All Bookings ({transactions.length}) Court Bookings ({courtBookings.length}) Open Matches ({openMatchBookings.length}) {transactions.map((transaction) => ( ))} {courtBookings.length === 0 ? (

No private court bookings yet

) : ( courtBookings.map((transaction) => ) )} {openMatchBookings.length === 0 ? (

No open match bookings yet

) : ( openMatchBookings.map((transaction) => ( )) )} )}

) } [V0_FILE]typescriptreact:file="app/admin/login/page.tsx" isMerged="true" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useToast } from "@/hooks/use-toast" import { Shield } from "lucide-react" import Link from "next/link" import { useRouter } from "next/navigation" import { useState } from "react" export default function AdminLoginPage() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const { toast } = useToast() const router = useRouter() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) // Simple admin authentication (in real app, use proper auth) setTimeout(() => { if (email === "admin@padelbook.com" && password === "admin123") { localStorage.setItem("admin", JSON.stringify({ email, name: "Super Admin", role: "admin" })) toast({ title: "Admin login successful!", description: "Welcome to PadelBook Admin Dashboard", }) router.push("/admin/dashboard") } else { toast({ title: "Login failed", description: "Invalid admin credentials", variant: "destructive", }) } setIsLoading(false) }, 1000) } return (

Admin Portal

Super Admin Login Access the PadelBook admin dashboard

Demo credentials:

Email: admin@padelbook.com

Password: admin123

Back to Home

) } [V0_FILE]typescriptreact:file="app/admin/dashboard/page.tsx" 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 { BarChart3, Calendar, CrownIcon as Court, LogOut, Shield, TrendingUp, Users, Wallet } from "lucide-react" import Link from "next/link" import { useRouter } from "next/navigation" import { useEffect, useState } from "react" export default function AdminDashboardPage() { const [admin, setAdmin] = useState(null) const [stats, setStats] = useState({ totalBookings: 0, totalRevenue: 0, totalUsers: 0, totalCourts: 3, todayBookings: 0, pendingBookings: 0, }) const router = useRouter() useEffect(() => { const adminData = localStorage.getItem("admin") if (!adminData) { router.push("/admin/login") return } setAdmin(JSON.parse(adminData)) // Calculate stats from localStorage const transactions = JSON.parse(localStorage.getItem("transactions") || "[]") const users = JSON.parse(localStorage.getItem("users") || "[]") const today = new Date().toDateString() const todayBookings = transactions.filter((t: any) => new Date(t.createdAt).toDateString() === today).length const pendingBookings = transactions.filter((t: any) => t.status === "pending").length const totalRevenue = transactions.reduce((sum: number, t: any) => sum + t.totalAmount, 0) setStats({ totalBookings: transactions.length, totalRevenue, totalUsers: users.length + 1, // +1 for demo user totalCourts: 3, todayBookings, pendingBookings, }) }, [router]) const handleLogout = () => { localStorage.removeItem("admin") router.push("/admin/login") } if (!admin) return null return (

{/* Header */}

Admin Dashboard

Welcome, {admin.name}

Dashboard Overview

{/* Stats Cards */}

Total Bookings

{stats.totalBookings}

{stats.todayBookings} today

Total Revenue

Rp {stats.totalRevenue.toLocaleString()}

+12% from last month

Total Users

{stats.totalUsers}

Active users

Active Courts

{stats.totalCourts}

All operational

{/* Quick Actions */}

Manage Courts Add courts, configure schedules, block time slots

{stats.totalCourts} courts configured

Transactions View and manage all booking transactions

{stats.totalBookings} total bookings

{stats.pendingBookings > 0 && {stats.pendingBookings} pending}

User Management View users, booking history, and user details

{stats.totalUsers} registered users

{/* Recent Activity */} Recent Activity Latest bookings and system events

New booking for Court 1

2 minutes ago

Confirmed

User joined open match

15 minutes ago

Open Match

Payment pending verification

1 hour ago

Pending

) } [V0_FILE]typescriptreact:file="app/admin/transactions/page.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { ArrowLeft, Calendar, Clock, CreditCard, Users, User, Eye } from "lucide-react" import Link from "next/link" import { useRouter } from "next/navigation" import { useEffect, useState } from "react" import { useToast } from "@/hooks/use-toast" interface Transaction { id: string court: { id: number name: string price: number } date: string time: string paymentMethod: string status: string createdAt: string totalAmount: number type: "private" | "open-match" matchId?: string organizer?: string paymentDetails?: any } const getStatusColor = (status: string) => { switch (status) { case "confirmed": return "bg-green-100 text-green-800" case "pending": return "bg-yellow-100 text-yellow-800" case "cancelled": return "bg-red-100 text-red-800" case "completed": return "bg-blue-100 text-blue-800" default: return "bg-gray-100 text-gray-800" } } export default function AdminTransactionsPage() { const [admin, setAdmin] = useState(null) const [transactions, setTransactions] = useState([]) const [selectedTransaction, setSelectedTransaction] = useState(null) const [statusFilter, setStatusFilter] = useState("all") const [typeFilter, setTypeFilter] = useState("all") const router = useRouter() const { toast } = useToast() useEffect(() => { const adminData = localStorage.getItem("admin") if (!adminData) { router.push("/admin/login") return } setAdmin(JSON.parse(adminData)) const transactionData = localStorage.getItem("transactions") if (transactionData) { const parsedTransactions = JSON.parse(transactionData) parsedTransactions.sort( (a: Transaction, b: Transaction) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(), ) setTransactions(parsedTransactions) } }, [router]) const updateTransactionStatus = (transactionId: string, newStatus: string) => { const updatedTransactions = transactions.map((transaction) => transaction.id === transactionId ? { ...transaction, status: newStatus } : transaction, ) setTransactions(updatedTransactions) localStorage.setItem("transactions", JSON.stringify(updatedTransactions)) toast({ title: "Status updated", description: `Transaction ${transactionId} status changed to ${newStatus}`, }) } const filteredTransactions = transactions.filter((transaction) => { const statusMatch = statusFilter === "all" || transaction.status === statusFilter const typeMatch = typeFilter === "all" || transaction.type === typeFilter return statusMatch && typeMatch }) if (!admin) return null return (

{/* Header */}

Transaction Management

All Transactions

{/* Stats Cards */}

{transactions.length}

Total Transactions

{transactions.filter((t) => t.status === "pending").length}

Pending

{transactions.filter((t) => t.status === "confirmed").length}

Confirmed

Rp {transactions.reduce((sum, t) => sum + t.totalAmount, 0).toLocaleString()}

Total Revenue

{/* Transactions List */}

{filteredTransactions.map((transaction) => { const endTime = (Number.parseInt(transaction.time.split(":")[0]) + 1).toString().padStart(2, "0") + ":00" return (

{transaction.type === "open-match" ? ( ) : ( )}

{transaction.court.name}

ID: {transaction.id}

{transaction.status.charAt(0).toUpperCase() + transaction.status.slice(1)} {transaction.type === "open-match" && ( Open Match )}

Date

{new Date(transaction.date).toLocaleDateString()}

Time

{transaction.time} - {endTime}

Payment

{transaction.paymentMethod}

Amount

Rp {transaction.totalAmount.toLocaleString()}

{transaction.type === "open-match" && transaction.organizer && (

Organizer: {transaction.organizer}

)}

) })}

{filteredTransactions.length === 0 && (

No transactions found

No transactions match your current filters.

)}

) } [V0_FILE]typescriptreact:file="app/admin/users/page.tsx" isEdit="true" isQuickEdit="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 { Input } from "@/components/ui/input" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { ArrowLeft, Users, Search, Eye, Calendar } from "lucide-react" import Link from "next/link" import { useRouter } from "next/navigation" import { useEffect, useState } from "react" interface User { id: string name: string email: string joinDate: string totalBookings: number totalSpent: number lastBooking?: string status: "active" | "inactive" } interface Transaction { id: string court: { id: number name: string price: number } date: string time: string paymentMethod: string status: string createdAt: string totalAmount: number type: "private" | "open-match" userEmail?: string } export default function AdminUsersPage() { const [admin, setAdmin] = useState(null) const [users, setUsers] = useState([]) const [selectedUser, setSelectedUser] = useState(null) const [userTransactions, setUserTransactions] = useState([]) const [searchTerm, setSearchTerm] = useState("") const router = useRouter() useEffect(() => { const adminData = localStorage.getItem("admin") if (!adminData) { router.push("/admin/login") return } setAdmin(JSON.parse(adminData)) // Get transactions to calculate user stats const transactions = JSON.parse(localStorage.getItem("transactions") || "[]") // Create user data (in real app, this would come from user registration) const userData = localStorage.getItem("user") const demoUsers: User[] = [] if (userData) { const user = JSON.parse(userData) const userTransactions = transactions.filter((t: Transaction) => t.userEmail === user.email || !t.userEmail) demoUsers.push({ id: "1", name: user.name, email: user.email, joinDate: "2024-01-15", totalBookings: userTransactions.length, totalSpent: userTransactions.reduce((sum: number, t: Transaction) => sum + t.totalAmount, 0), lastBooking: userTransactions.length > 0 ? userTransactions[0].createdAt : undefined, status: "active", }) } // Add some demo users demoUsers.push( { id: "2", name: "John Doe", email: "john@example.com", joinDate: "2024-01-10", totalBookings: 15, totalSpent: 2250000, lastBooking: "2024-01-20T10:00:00Z", status: "active", }, { id: "3", name: "Jane Smith", email: "jane@example.com", joinDate: "2024-01-05", totalBookings: 8, totalSpent: 1200000, lastBooking: "2024-01-18T14:00:00Z", status: "active", }, { id: "4", name: "Mike Johnson", email: "mike@example.com", joinDate: "2023-12-20", totalBookings: 25, totalSpent: 3750000, lastBooking: "2024-01-19T16:00:00Z", status: "active", }, { id: "5", name: "Sarah Wilson", email: "sarah@example.com", joinDate: "2024-01-12", totalBookings: 3, totalSpent: 450000, lastBooking: "2024-01-17T09:00:00Z", status: "inactive", }, ) setUsers(demoUsers) }, [router]) const handleViewUserDetails = (user: User) => { setSelectedUser(user) // Generate demo transactions for the selected user const demoTransactions: Transaction[] = [] for (let i = 0; i < user.totalBookings; i++) { const date = new Date() date.setDate(date.getDate() - Math.floor(Math.random() * 30)) demoTransactions.push({ id: `${user.id}-${i + 1}`, court: { id: Math.floor(Math.random() * 3) + 1, name: `Court ${Math.floor(Math.random() * 3) + 1}`, price: 150000, }, date: date.toISOString().split("T")[0], time: `${Math.floor(Math.random() * 8) + 8}:00`, paymentMethod: ["credit-card", "e-wallet", "bank-transfer"][Math.floor(Math.random() * 3)], status: ["confirmed", "completed", "pending"][Math.floor(Math.random() * 3)], createdAt: date.toISOString(), totalAmount: 150000, type: Math.random() > 0.7 ? "open-match" : "private", userEmail: user.email, }) } setUserTransactions( demoTransactions.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()), ) } const filteredUsers = users.filter( (user) => user.name.toLowerCase().includes(searchTerm.toLowerCase()) || user.email.toLowerCase().includes(searchTerm.toLowerCase()), ) const getStatusColor = (status: string) => { return status === "active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800" } if (!admin) return null return (

{/* Header */}

User Management

setSearchTerm(e.target.value)} className="pl-10" />

{/* Stats Cards */}

{users.length}

Total Users

{users.filter((u) => u.status === "active").length}

Active Users

{users.reduce((sum, u) => sum + u.totalBookings, 0)}

Total Bookings

Rp {users.reduce((sum, u) => sum + u.totalSpent, 0).toLocaleString()}

Total Revenue

{/* Users List */}

{filteredUsers.map((user) => (

{user.name .split(" ") .map((n) => n[0]) .join("")}

{user.name}

{user.email}

{user.status.charAt(0).toUpperCase() + user.status.slice(1)}

Join Date

{new Date(user.joinDate).toLocaleDateString()}

Total Bookings

{user.totalBookings}

Total Spent

Rp {user.totalSpent.toLocaleString()}

Last Booking

{user.lastBooking ? new Date(user.lastBooking).toLocaleDateString() : "Never"}

))}

{filteredUsers.length === 0 && (

No users found

No users match your search criteria.

)}

) } [V0_FILE]typescriptreact:file="app/admin/users/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true" "use client" import * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" const Tabs = TabsPrimitive.Root const TabsList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsList.displayName = TabsPrimitive.List.displayName const TabsTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsTrigger.displayName = TabsPrimitive.Trigger.displayName const TabsContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsContent.displayName = TabsPrimitive.Content.displayName export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isMerged="true" "use client" import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger const DialogPortal = DialogPrimitive.Portal const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} Close )) DialogContent.displayName = DialogPrimitive.Content.displayName const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (

) DialogHeader.displayName = "DialogHeader" const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (

) DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogTitle.displayName = DialogPrimitive.Title.displayName const DialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogDescription.displayName = DialogPrimitive.Description.displayName export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } [V0_FILE]typescriptreact:file="components/ui/switch.tsx" isMerged="true" "use client" import * as React from "react" import * as SwitchPrimitives from "@radix-ui/react-switch" import { cn } from "@/lib/utils" const Switch = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Switch.displayName = SwitchPrimitives.Root.displayName export { Switch } [V0_FILE]typescriptreact:file="app/admin/courts/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Textarea } from "@/components/ui/textarea" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Switch } from "@/components/ui/switch" import { Calendar } from "@/components/ui/calendar" import { ArrowLeft, Plus, Settings, Ban, CrownIcon as CourtIcon, Clock, CalendarDays, X } from "lucide-react" import Link from "next/link" import { useRouter } from "next/navigation" import { useEffect, useState } from "react" import { useToast } from "@/hooks/use-toast" interface Court { id: number name: string price: number rating: number status: "active" | "maintenance" description: string capacity: number facilities: string[] image: string schedule: { [key: string]: { enabled: boolean startTime: string endTime: string blockedSlots: string[] } } blockedDates: string[] } interface BlockedDate { date: string reason: string } const daysOfWeek = [ { key: "monday", label: "Monday" }, { key: "tuesday", label: "Tuesday" }, { key: "wednesday", label: "Wednesday" }, { key: "thursday", label: "Thursday" }, { key: "friday", label: "Friday" }, { key: "saturday", label: "Saturday" }, { key: "sunday", label: "Sunday" }, ] const facilitiesOptions = [ "Air Conditioning", "Lighting System", "Sound System", "Changing Room", "Shower", "Equipment Rental", "Parking", "WiFi", ] export default function AdminCourtsPage() { const [admin, setAdmin] = useState(null) const [courts, setCourts] = useState([]) const [selectedCourt, setSelectedCourt] = useState(null) const [isAddDialogOpen, setIsAddDialogOpen] = useState(false) const [isBlockDateDialogOpen, setIsBlockDateDialogOpen] = useState(false) const [selectedBlockDate, setSelectedBlockDate] = useState(new Date()) const [blockReason, setBlockReason] = useState("") // New court form state const [newCourt, setNewCourt] = useState({ name: "", price: "", description: "", capacity: "4", facilities: [] as string[], image: "", }) const router = useRouter() const { toast } = useToast() useEffect(() => { const adminData = localStorage.getItem("admin") if (!adminData) { router.push("/admin/login") return } setAdmin(JSON.parse(adminData)) // Initialize courts data with more complete structure const defaultCourts: Court[] = [ { id: 1, name: "Court 1", price: 150000, rating: 4.8, status: "active", description: "Premium indoor padel court with professional lighting and climate control", capacity: 4, facilities: ["Air Conditioning", "Lighting System", "Changing Room", "Parking"], image: "/placeholder.svg?height=200&width=300", schedule: { monday: { enabled: true, startTime: "08:00", endTime: "23:00", blockedSlots: [] }, tuesday: { enabled: true, startTime: "08:00", endTime: "23:00", blockedSlots: ["14:00", "15:00"] }, wednesday: { enabled: true, startTime: "08:00", endTime: "23:00", blockedSlots: [] }, thursday: { enabled: true, startTime: "08:00", endTime: "23:00", blockedSlots: [] }, friday: { enabled: true, startTime: "08:00", endTime: "23:00", blockedSlots: [] }, saturday: { enabled: true, startTime: "08:00", endTime: "23:00", blockedSlots: ["20:00"] }, sunday: { enabled: true, startTime: "10:00", endTime: "22:00", blockedSlots: [] }, }, blockedDates: ["2024-01-25", "2024-02-01"], }, { id: 2, name: "Court 2", price: 150000, rating: 4.7, status: "active", description: "Standard indoor court with excellent ventilation and modern facilities", capacity: 4, facilities: ["Lighting System", "Changing Room", "Equipment Rental", "WiFi"], image: "/placeholder.svg?height=200&width=300", schedule: { monday: { enabled: true, startTime: "08:00", endTime: "23:00", blockedSlots: [] }, tuesday: { enabled: true, startTime: "08:00", endTime: "23:00", blockedSlots: [] }, wednesday: { enabled: true, startTime: "08:00", endTime: "23:00", blockedSlots: [] }, thursday: { enabled: true, startTime: "08:00", endTime: "23:00", blockedSlots: [] }, friday: { enabled: true, startTime: "08:00", endTime: "23:00", blockedSlots: [] }, saturday: { enabled: true, startTime: "08:00", endTime: "23:00", blockedSlots: [] }, sunday: { enabled: false, startTime: "08:00", endTime: "23:00", blockedSlots: [] }, }, blockedDates: [], }, { id: 3, name: "Court 3", price: 175000, rating: 4.9, status: "maintenance", description: "Premium court with advanced sound system and luxury amenities", capacity: 4, facilities: ["Air Conditioning", "Sound System", "Shower", "Equipment Rental", "Parking"], image: "/placeholder.svg?height=200&width=300", schedule: { monday: { enabled: true, startTime: "08:00", endTime: "23:00", blockedSlots: [] }, tuesday: { enabled: true, startTime: "08:00", endTime: "23:00", blockedSlots: [] }, wednesday: { enabled: true, startTime: "08:00", endTime: "23:00", blockedSlots: [] }, thursday: { enabled: true, startTime: "08:00", endTime: "23:00", blockedSlots: [] }, friday: { enabled: true, startTime: "08:00", endTime: "23:00", blockedSlots: [] }, saturday: { enabled: true, startTime: "08:00", endTime: "23:00", blockedSlots: [] }, sunday: { enabled: true, startTime: "08:00", endTime: "23:00", blockedSlots: [] }, }, blockedDates: ["2024-01-20", "2024-01-21", "2024-01-22"], }, ] const savedCourts = localStorage.getItem("courts") if (savedCourts) { setCourts(JSON.parse(savedCourts)) } else { setCourts(defaultCourts) localStorage.setItem("courts", JSON.stringify(defaultCourts)) } }, [router]) const handleAddCourt = () => { if (!newCourt.name || !newCourt.price || !newCourt.description) { toast({ title: "Missing information", description: "Please fill in all required court details", variant: "destructive", }) return } const courtData: Court = { id: Date.now(), name: newCourt.name, price: Number.parseInt(newCourt.price), rating: 0, status: "active", description: newCourt.description, capacity: Number.parseInt(newCourt.capacity), facilities: newCourt.facilities, image: newCourt.image || "/placeholder.svg?height=200&width=300", schedule: { monday: { enabled: true, startTime: "08:00", endTime: "23:00", blockedSlots: [] }, tuesday: { enabled: true, startTime: "08:00", endTime: "23:00", blockedSlots: [] }, wednesday: { enabled: true, startTime: "08:00", endTime: "23:00", blockedSlots: [] }, thursday: { enabled: true, startTime: "08:00", endTime: "23:00", blockedSlots: [] }, friday: { enabled: true, startTime: "08:00", endTime: "23:00", blockedSlots: [] }, saturday: { enabled: true, startTime: "08:00", endTime: "23:00", blockedSlots: [] }, sunday: { enabled: true, startTime: "08:00", endTime: "23:00", blockedSlots: [] }, }, blockedDates: [], } const updatedCourts = [...courts, courtData] setCourts(updatedCourts) localStorage.setItem("courts", JSON.stringify(updatedCourts)) // Reset form setNewCourt({ name: "", price: "", description: "", capacity: "4", facilities: [], image: "", }) setIsAddDialogOpen(false) toast({ title: "Court added successfully!", description: `${courtData.name} has been added to the system`, }) } const updateCourtSchedule = (courtId: number, day: string, field: string, value: any) => { const updatedCourts = courts.map((court) => { if (court.id === courtId) { return { ...court, schedule: { ...court.schedule, [day]: { ...court.schedule[day], [field]: value, }, }, } } return court }) setCourts(updatedCourts) localStorage.setItem("courts", JSON.stringify(updatedCourts)) } const toggleBlockedSlot = (courtId: number, day: string, timeSlot: string) => { const court = courts.find((c) => c.id === courtId) if (!court) return const currentBlocked = court.schedule[day].blockedSlots const isBlocked = currentBlocked.includes(timeSlot) const newBlockedSlots = isBlocked ? currentBlocked.filter((slot) => slot !== timeSlot) : [...currentBlocked, timeSlot] updateCourtSchedule(courtId, day, "blockedSlots", newBlockedSlots) toast({ title: isBlocked ? "Time slot unblocked" : "Time slot blocked", description: `${timeSlot} on ${day} has been ${isBlocked ? "unblocked" : "blocked"}`, }) } const handleBlockDate = () => { if (!selectedCourt || !selectedBlockDate || !blockReason) { toast({ title: "Missing information", description: "Please select a date and provide a reason", variant: "destructive", }) return } const dateString = selectedBlockDate.toISOString().split("T")[0] const updatedCourts = courts.map((court) => { if (court.id === selectedCourt.id) { return { ...court, blockedDates: [...court.blockedDates, dateString], } } return court }) setCourts(updatedCourts) localStorage.setItem("courts", JSON.stringify(updatedCourts)) setBlockReason("") setIsBlockDateDialogOpen(false) toast({ title: "Date blocked successfully", description: `${dateString} has been blocked for ${selectedCourt.name}`, }) } const removeBlockedDate = (courtId: number, dateToRemove: string) => { const updatedCourts = courts.map((court) => { if (court.id === courtId) { return { ...court, blockedDates: court.blockedDates.filter((date) => date !== dateToRemove), } } return court }) setCourts(updatedCourts) localStorage.setItem("courts", JSON.stringify(updatedCourts)) toast({ title: "Date unblocked", description: `${dateToRemove} has been unblocked`, }) } const generateTimeSlots = (startTime: string, endTime: string) => { const slots = [] const start = Number.parseInt(startTime.split(":")[0]) const end = Number.parseInt(endTime.split(":")[0]) for (let hour = start; hour <= end; hour++) { slots.push(`${hour.toString().padStart(2, "0")}:00`) } return slots } const toggleFacility = (facility: string) => { setNewCourt((prev) => ({ ...prev, facilities: prev.facilities.includes(facility) ? prev.facilities.filter((f) => f !== facility) : [...prev.facilities, facility], })) } if (!admin) return null return (

{/* Header */}

Court Management