[V0_FILE]sql:file="scripts/01-initial-schema.sql" isMerged="true" -- Enable UUID extension CREATE EXTENSION IF NOT EXISTS "uuid-ossp"; -- Users table (customers, restaurant staff, admins) CREATE TABLE users ( id UUID PRIMARY KEY DEFAULT uuid_generate_v4(), email TEXT UNIQUE NOT NULL, full_name TEXT NOT NULL, role TEXT NOT NULL CHECK (role IN ('customer', 'restaurant', 'admin')), created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Restaurants table CREATE TABLE restaurants ( id UUID PRIMARY KEY DEFAULT uuid_generate_v4(), name TEXT NOT NULL, description TEXT, logo_url TEXT, category TEXT, address TEXT, phone TEXT, is_active BOOLEAN DEFAULT true, earn_rate DECIMAL(10,2) DEFAULT 1.00, -- points per dollar spent redeem_rate DECIMAL(10,2) DEFAULT 0.10, -- dollar value per point owner_id UUID REFERENCES users(id), created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Customer favorites CREATE TABLE favorites ( id UUID PRIMARY KEY DEFAULT uuid_generate_v4(), user_id UUID REFERENCES users(id) ON DELETE CASCADE, restaurant_id UUID REFERENCES restaurants(id) ON DELETE CASCADE, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), UNIQUE(user_id, restaurant_id) ); -- Points balances CREATE TABLE point_balances ( id UUID PRIMARY KEY DEFAULT uuid_generate_v4(), user_id UUID REFERENCES users(id) ON DELETE CASCADE, restaurant_id UUID REFERENCES restaurants(id) ON DELETE CASCADE, balance INTEGER DEFAULT 0, lifetime_earned INTEGER DEFAULT 0, UNIQUE(user_id, restaurant_id) ); -- Transactions (earn and redeem) CREATE TABLE transactions ( id UUID PRIMARY KEY DEFAULT uuid_generate_v4(), user_id UUID REFERENCES users(id) ON DELETE CASCADE, restaurant_id UUID REFERENCES restaurants(id) ON DELETE CASCADE, type TEXT NOT NULL CHECK (type IN ('earn', 'redeem')), points INTEGER NOT NULL, amount_spent DECIMAL(10,2), -- for earn transactions pin_code TEXT, -- for verification status TEXT DEFAULT 'pending' CHECK (status IN ('pending', 'completed', 'expired')), expires_at TIMESTAMP WITH TIME ZONE, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Indexes for performance CREATE INDEX idx_transactions_user ON transactions(user_id); CREATE INDEX idx_transactions_restaurant ON transactions(restaurant_id); CREATE INDEX idx_point_balances_user ON point_balances(user_id); CREATE INDEX idx_favorites_user ON favorites(user_id); [V0_FILE]typescript:file="lib/supabase/client.ts" isMerged="true" "use client" import { createBrowserClient } from "@supabase/ssr" let client: ReturnType | null = null export function getSupabaseBrowserClient() { if (client) { return client } client = createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!) return client } [V0_FILE]typescript:file="lib/supabase/server.ts" isMerged="true" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" export async function getSupabaseServerClient() { 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 { // The `setAll` method was called from a Server Component. // This can be ignored if you have middleware refreshing // user sessions. } }, }, }) } [V0_FILE]typescript:file="app/customer/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { getSupabaseServerClient } from "@/lib/supabase/server" import { CustomerDashboard } from "@/components/customer/dashboard" export default async function CustomerPage() { const supabase = await getSupabaseServerClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { redirect("/login") } return } [V0_FILE]typescript:file="components/customer/dashboard.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Star, Home, CreditCard, History, Gift, Heart, Plus } from "lucide-react" import { getSupabaseBrowserClient } from "@/lib/supabase/client" import { DiscoverRestaurants } from "./discover-restaurants" import { EarnPoints } from "./earn-points" import { RedeemPoints } from "./redeem-points" import { TransactionHistory } from "./transaction-history" interface CustomerDashboardProps { userId: string userName: string } interface RestaurantBalance { restaurant_id: string restaurant_name: string balance: number is_favorite: boolean } export function CustomerDashboard({ userId, userName }: CustomerDashboardProps) { const [activeTab, setActiveTab] = useState("home") const [showEarnDialog, setShowEarnDialog] = useState(false) const [showRedeemDialog, setShowRedeemDialog] = useState(false) const [balances, setBalances] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { loadBalances() }, []) async function loadBalances() { const supabase = getSupabaseBrowserClient() const { data: balanceData } = await supabase .from("point_balances") .select("*, restaurants(name)") .eq("user_id", userId) .order("balance", { ascending: false }) const { data: favoritesData } = await supabase.from("favorites").select("restaurant_id").eq("user_id", userId) const favoriteIds = new Set(favoritesData?.map((f) => f.restaurant_id) || []) const balancesWithFavorites = balanceData?.map((b) => ({ restaurant_id: b.restaurant_id, restaurant_name: b.restaurants.name, balance: b.balance, is_favorite: favoriteIds.has(b.restaurant_id), })) || [] setBalances(balancesWithFavorites) setLoading(false) } const topRestaurant = balances[0] const totalPoints = balances.reduce((sum, b) => sum + b.balance, 0) const favoriteRestaurants = balances.filter((b) => b.is_favorite) return (

{/* Header */}

Hello, {userName.split(" ")[0]}

{/* Home Tab */} {activeTab === "home" && ( <> {/* Total Points Summary */}

Total Points Across All Restaurants

{totalPoints}

{/* Top Restaurant */} {topRestaurant && (

Your Top Restaurant

{topRestaurant.restaurant_name}

{topRestaurant.is_favorite && }

{topRestaurant.balance} points available

)} {/* Favorites */} {favoriteRestaurants.length > 0 && (

Your Favorites

{favoriteRestaurants.slice(0, 4).map((restaurant) => (

{restaurant.restaurant_name}

{restaurant.balance}

))}

)} {/* Recent Activity Preview */}

Recent Activity

)} {/* Cards Tab - All Restaurants */} {activeTab === "cards" && (

Discover Restaurants

)} {/* History Tab */} {activeTab === "history" && (

Transaction History

)} {/* Rewards Tab */} {activeTab === "gift" && (

Redeem Your Points

)}

{/* Earn Points Dialog */} {/* Redeem Points Dialog */} {/* Bottom Navigation */}

) } [V0_FILE]typescript:file="app/login/page.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Star } from "lucide-react" export default function LoginPage() { return (

RewardHub

Welcome Back

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

) } [V0_FILE]typescript:file="app/signup/page.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Star } from "lucide-react" export default function SignupPage() { return (

RewardHub

Join RewardHub

Start earning rewards at local restaurants

Already have an account?{" "} Sign in

) } [V0_FILE]typescript: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 "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "RewardHub - Multi-Restaurant Loyalty Rewards", description: "Earn points and rewards at all your favorite local restaurants in one app", 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 ( {children} ) } [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :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.5 0.15 160); --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.985 0 0); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.5 0.15 160); --chart-1: oklch(0.5 0.15 160); --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]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" }, "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]typescript:file="components/customer/discover-restaurants.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Star, Heart, Search, MapPin } from "lucide-react" import { getSupabaseBrowserClient } from "@/lib/supabase/client" interface Restaurant { id: string name: string description: string category: string address: string logo_url: string earn_rate: number is_favorite?: boolean } export function DiscoverRestaurants({ userId }: { userId: string }) { const [restaurants, setRestaurants] = useState([]) const [searchQuery, setSearchQuery] = useState("") const [loading, setLoading] = useState(true) useEffect(() => { loadRestaurants() }, []) async function loadRestaurants() { const supabase = getSupabaseBrowserClient() const { data: restaurantsData } = await supabase.from("restaurants").select("*").eq("is_active", true).order("name") const { data: favoritesData } = await supabase.from("favorites").select("restaurant_id").eq("user_id", userId) const favoriteIds = new Set(favoritesData?.map((f) => f.restaurant_id) || []) const restaurantsWithFavorites = restaurantsData?.map((r) => ({ ...r, is_favorite: favoriteIds.has(r.id), })) || [] setRestaurants(restaurantsWithFavorites) setLoading(false) } async function toggleFavorite(restaurantId: string) { const supabase = getSupabaseBrowserClient() const restaurant = restaurants.find((r) => r.id === restaurantId) if (restaurant?.is_favorite) { await supabase.from("favorites").delete().eq("user_id", userId).eq("restaurant_id", restaurantId) } else { await supabase.from("favorites").insert({ user_id: userId, restaurant_id: restaurantId }) } setRestaurants(restaurants.map((r) => (r.id === restaurantId ? { ...r, is_favorite: !r.is_favorite } : r))) } const filteredRestaurants = restaurants.filter( (r) => r.name.toLowerCase().includes(searchQuery.toLowerCase()) || r.category.toLowerCase().includes(searchQuery.toLowerCase()), ) if (loading) { return (

Loading restaurants...

) } return (

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

{filteredRestaurants.map((restaurant) => (

{restaurant.logo_url ? ( {restaurant.name}

) : ( )}

{restaurant.name}

{restaurant.category}

{restaurant.description}

${(1 / restaurant.earn_rate).toFixed(0)} = 1 point

{restaurant.address && (

{restaurant.address.split(",")[0]}

)}

))} {filteredRestaurants.length === 0 && (

No restaurants found

)}

) } function Store({ className }: { className?: string }) { return ( ) } [V0_FILE]typescript:file="components/customer/earn-points.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Star, Check } from "lucide-react" import { getSupabaseBrowserClient } from "@/lib/supabase/client" interface EarnPointsProps { userId: string onSuccess?: () => void } export function EarnPoints({ userId, onSuccess }: EarnPointsProps) { const [pinCode, setPinCode] = useState("") const [loading, setLoading] = useState(false) const [success, setSuccess] = useState(false) const [error, setError] = useState("") const [earnedPoints, setEarnedPoints] = useState(0) const [restaurantName, setRestaurantName] = useState("") async function handleSubmit(e: React.FormEvent) { e.preventDefault() setLoading(true) setError("") setSuccess(false) try { const supabase = getSupabaseBrowserClient() // Find the transaction with this PIN const { data: transaction, error: findError } = await supabase .from("transactions") .select("*, restaurants(name)") .eq("pin_code", pinCode.toUpperCase()) .eq("type", "earn") .eq("status", "pending") .single() if (findError || !transaction) { setError("Invalid or expired code. Please check and try again.") setLoading(false) return } // Check if code has expired if (transaction.expires_at && new Date(transaction.expires_at) < new Date()) { setError("This code has expired.") setLoading(false) return } // Update transaction status await supabase.from("transactions").update({ status: "completed", user_id: userId }).eq("id", transaction.id) // Update or create point balance const { data: existingBalance } = await supabase .from("point_balances") .select("*") .eq("user_id", userId) .eq("restaurant_id", transaction.restaurant_id) .single() if (existingBalance) { await supabase .from("point_balances") .update({ balance: existingBalance.balance + transaction.points, lifetime_earned: existingBalance.lifetime_earned + transaction.points, }) .eq("id", existingBalance.id) } else { await supabase.from("point_balances").insert({ user_id: userId, restaurant_id: transaction.restaurant_id, balance: transaction.points, lifetime_earned: transaction.points, }) } setEarnedPoints(transaction.points) setRestaurantName(transaction.restaurants.name) setSuccess(true) setPinCode("") setTimeout(() => { setSuccess(false) onSuccess?.() }, 3000) } catch (err) { console.error("[v0] Error claiming points:", err) setError("Something went wrong. Please try again.") } finally { setLoading(false) } } if (success) { return (

Points Earned!

+{earnedPoints}

from {restaurantName}

) } return (

Earn Points

Enter the code from your receipt or server

Tip: Ask your server for a code after paying your bill, or scan the QR code on your receipt.

) } [V0_FILE]typescript:file="components/customer/redeem-points.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Star, Gift, Copy, Check } from "lucide-react" import { getSupabaseBrowserClient } from "@/lib/supabase/client" interface PointBalance { restaurant_id: string balance: number restaurant_name: string redeem_rate: number } interface RedeemPointsProps { userId: string } export function RedeemPoints({ userId }: RedeemPointsProps) { const [balances, setBalances] = useState([]) const [selectedRestaurant, setSelectedRestaurant] = useState("") const [pointsToRedeem, setPointsToRedeem] = useState(0) const [generatedPin, setGeneratedPin] = useState("") const [loading, setLoading] = useState(false) const [copied, setCopied] = useState(false) useEffect(() => { loadBalances() }, []) async function loadBalances() { const supabase = getSupabaseBrowserClient() const { data } = await supabase .from("point_balances") .select("*, restaurants(name, redeem_rate)") .eq("user_id", userId) .gt("balance", 0) const balancesData = data?.map((b) => ({ restaurant_id: b.restaurant_id, balance: b.balance, restaurant_name: b.restaurants.name, redeem_rate: b.restaurants.redeem_rate, })) || [] setBalances(balancesData) } async function handleRedeem() { if (!selectedRestaurant || pointsToRedeem <= 0) return setLoading(true) try { const supabase = getSupabaseBrowserClient() // Generate PIN const pin = Math.random().toString(36).substring(2, 8).toUpperCase() // Create redemption transaction await supabase.from("transactions").insert({ user_id: userId, restaurant_id: selectedRestaurant, type: "redeem", points: pointsToRedeem, pin_code: pin, status: "pending", expires_at: new Date(Date.now() + 15 * 60 * 1000).toISOString(), // 15 minutes }) setGeneratedPin(pin) } catch (err) { console.error("[v0] Error generating redemption PIN:", err) } finally { setLoading(false) } } function copyPin() { navigator.clipboard.writeText(generatedPin) setCopied(true) setTimeout(() => setCopied(false), 2000) } const selectedBalance = balances.find((b) => b.restaurant_id === selectedRestaurant) const dollarValue = selectedBalance ? (pointsToRedeem * selectedBalance.redeem_rate).toFixed(2) : "0.00" if (generatedPin) { return (

Redemption Code

Show this code to your server

{generatedPin}

Expires in 15 minutes

Redeeming

{pointsToRedeem}

Discount Value ${dollarValue}

) } return (

Redeem Points

Turn your points into rewards

{balances.length === 0 ? (

No points available to redeem yet

Start earning points at your favorite restaurants!

) : (

Select Restaurant

{selectedBalance && ( <>

Available Balance

{selectedBalance.balance}

1 point = ${selectedBalance.redeem_rate.toFixed(2)}

Points to Redeem setPointsToRedeem(Math.min(Number(e.target.value), selectedBalance.balance))} className="w-full mt-2 px-4 py-2 border rounded-lg text-center text-2xl font-bold" />

{pointsToRedeem > 0 && (

Discount Value ${dollarValue}

)} )}

)} ) } [V0_FILE]typescript:file="components/customer/transaction-history.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Star, TrendingUp, TrendingDown } from "lucide-react" import { getSupabaseBrowserClient } from "@/lib/supabase/client" import { formatDistanceToNow } from "date-fns" interface Transaction { id: string type: "earn" | "redeem" points: number status: string created_at: string restaurant_name: string amount_spent?: number } export function TransactionHistory({ userId }: { userId: string }) { const [transactions, setTransactions] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { loadTransactions() }, []) async function loadTransactions() { const supabase = getSupabaseBrowserClient() const { data } = await supabase .from("transactions") .select("*, restaurants(name)") .eq("user_id", userId) .eq("status", "completed") .order("created_at", { ascending: false }) .limit(50) const transactionsData = data?.map((t) => ({ id: t.id, type: t.type, points: t.points, status: t.status, created_at: t.created_at, restaurant_name: t.restaurants.name, amount_spent: t.amount_spent, })) || [] setTransactions(transactionsData) setLoading(false) } if (loading) { return (

) } if (transactions.length === 0) { return (

No transactions yet

Start earning and redeeming points!

) } return (

{transactions.map((transaction) => (

{transaction.type === "earn" ? ( ) : ( )}

{transaction.restaurant_name}

{formatDistanceToNow(new Date(transaction.created_at), { addSuffix: true })}

{transaction.type === "earn" ? "+" : "-"} {transaction.points}

{transaction.type === "earn" ? "Earned" : "Redeemed"}

))}

) } [V0_FILE]typescript:file="app/restaurant/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { getSupabaseServerClient } from "@/lib/supabase/server" import { RestaurantDashboard } from "@/components/restaurant/dashboard" export default async function RestaurantPage() { const supabase = await getSupabaseServerClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { redirect("/login") } // Get restaurant data for this user const { data: restaurant } = await supabase.from("restaurants").select("*").eq("owner_id", user.id).single() if (!restaurant) { return (

No Restaurant Found

Your account is not linked to a restaurant.

) } return } [V0_FILE]typescript:file="components/restaurant/dashboard.tsx" isMerged="true" "use client" import { useState } from "react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { GenerateCode } from "./generate-code" import { ValidateRedemption } from "./validate-redemption" import { RestaurantSettings } from "./restaurant-settings" import { RestaurantAnalytics } from "./restaurant-analytics" import { Store, QrCode, CheckCircle, Settings, BarChart3 } from "lucide-react" interface Restaurant { id: string name: string description: string logo_url: string category: string address: string phone: string is_active: boolean earn_rate: number redeem_rate: number } interface RestaurantDashboardProps { restaurant: Restaurant } export function RestaurantDashboard({ restaurant }: RestaurantDashboardProps) { const [activeTab, setActiveTab] = useState("generate") return (

{/* Header */}

{restaurant.name}

{restaurant.category}

Generate Code Validate Analytics Settings

) } [V0_FILE]typescript:file="components/restaurant/generate-code.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Copy, Check } from "lucide-react" import { getSupabaseBrowserClient } from "@/lib/supabase/client" interface GenerateCodeProps { restaurantId: string earnRate: number } export function GenerateCode({ restaurantId, earnRate }: GenerateCodeProps) { const [amountSpent, setAmountSpent] = useState("") const [generatedPin, setGeneratedPin] = useState("") const [loading, setLoading] = useState(false) const [copied, setCopied] = useState(false) async function handleGenerate() { if (!amountSpent || Number(amountSpent) <= 0) return setLoading(true) try { const supabase = getSupabaseBrowserClient() // Generate PIN const pin = Math.random().toString(36).substring(2, 8).toUpperCase() // Calculate points const points = Math.floor(Number(amountSpent) * earnRate) // Create transaction await supabase.from("transactions").insert({ restaurant_id: restaurantId, type: "earn", points, amount_spent: Number(amountSpent), pin_code: pin, status: "pending", expires_at: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(), // 24 hours }) setGeneratedPin(pin) setAmountSpent("") } catch (err) { console.error("[v0] Error generating PIN:", err) } finally { setLoading(false) } } function copyPin() { navigator.clipboard.writeText(generatedPin) setCopied(true) setTimeout(() => setCopied(false), 2000) } const calculatedPoints = amountSpent ? Math.floor(Number(amountSpent) * earnRate) : 0 return (

Generate Earn Code Create a PIN code for customers to earn points

Bill Amount ($) setAmountSpent(e.target.value)} placeholder="0.00" className="text-2xl font-bold mt-2" />

{calculatedPoints > 0 && (

Customer will earn

{calculatedPoints} points

)}

Note: The code expires in 24 hours. Customer enters this code in their app to claim points.

{generatedPin && ( Generated Code Give this code to the customer

{generatedPin}

Valid for 24 hours

Bill Amount: ${amountSpent}

Points to Earn: {calculatedPoints}

)}

) } [V0_FILE]typescript:file="components/restaurant/validate-redemption.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Alert, AlertDescription } from "@/components/ui/alert" import { CheckCircle, XCircle, AlertCircle } from "lucide-react" import { getSupabaseBrowserClient } from "@/lib/supabase/client" interface ValidateRedemptionProps { restaurantId: string redeemRate: number } export function ValidateRedemption({ restaurantId, redeemRate }: ValidateRedemptionProps) { const [pinCode, setPinCode] = useState("") const [loading, setLoading] = useState(false) const [result, setResult] = useState<{ status: "success" | "error" | "expired" message: string points?: number discountValue?: number customerName?: string } | null>(null) async function handleValidate() { if (!pinCode || pinCode.length !== 6) return setLoading(true) setResult(null) try { const supabase = getSupabaseBrowserClient() // Find the redemption transaction const { data: transaction, error: findError } = await supabase .from("transactions") .select("*, users(full_name)") .eq("pin_code", pinCode.toUpperCase()) .eq("restaurant_id", restaurantId) .eq("type", "redeem") .eq("status", "pending") .single() if (findError || !transaction) { setResult({ status: "error", message: "Invalid redemption code. Please check and try again.", }) setLoading(false) return } // Check if expired if (transaction.expires_at && new Date(transaction.expires_at) < new Date()) { setResult({ status: "expired", message: "This redemption code has expired.", }) setLoading(false) return } // Mark transaction as completed await supabase.from("transactions").update({ status: "completed" }).eq("id", transaction.id) // Update point balance const { data: balance } = await supabase .from("point_balances") .select("*") .eq("user_id", transaction.user_id) .eq("restaurant_id", restaurantId) .single() if (balance) { await supabase .from("point_balances") .update({ balance: balance.balance - transaction.points, }) .eq("id", balance.id) } const discountValue = transaction.points * redeemRate setResult({ status: "success", message: "Redemption validated successfully!", points: transaction.points, discountValue, customerName: transaction.users?.full_name, }) setPinCode("") } catch (err) { console.error("[v0] Error validating redemption:", err) setResult({ status: "error", message: "Something went wrong. Please try again.", }) } finally { setLoading(false) } } return ( Validate Redemption Enter the customer's redemption code to apply their discount

Redemption PIN setPinCode(e.target.value.toUpperCase())} placeholder="Enter 6-digit code" maxLength={6} className="text-center text-2xl font-mono tracking-widest mt-2" />

{result && ( {result.status === "success" ? ( ) : result.status === "expired" ? ( ) : ( )}

{result.message}

{result.status === "success" && result.points && (

{result.customerName && (

Customer: {result.customerName}

)}

Points Redeemed: {result.points}

Discount to Apply: ${result.discountValue?.toFixed(2)}

Next Step: Manually apply ${result.discountValue?.toFixed(2)} discount to their bill.

)} )}

How it works: Customer generates a redemption code in their app. Enter it here to validate and see the discount amount to apply manually.

) } [V0_FILE]typescript:file="components/restaurant/restaurant-settings.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Switch } from "@/components/ui/switch" import { getSupabaseBrowserClient } from "@/lib/supabase/client" import { Alert, AlertDescription } from "@/components/ui/alert" import { CheckCircle } from "lucide-react" interface Restaurant { id: string name: string description: string category: string address: string phone: string is_active: boolean earn_rate: number redeem_rate: number } interface RestaurantSettingsProps { restaurant: Restaurant } export function RestaurantSettings({ restaurant: initialRestaurant }: RestaurantSettingsProps) { const [restaurant, setRestaurant] = useState(initialRestaurant) const [loading, setLoading] = useState(false) const [saved, setSaved] = useState(false) async function handleSave() { setLoading(true) setSaved(false) try { const supabase = getSupabaseBrowserClient() await supabase .from("restaurants") .update({ name: restaurant.name, description: restaurant.description, category: restaurant.category, address: restaurant.address, phone: restaurant.phone, is_active: restaurant.is_active, earn_rate: restaurant.earn_rate, redeem_rate: restaurant.redeem_rate, }) .eq("id", restaurant.id) setSaved(true) setTimeout(() => setSaved(false), 3000) } catch (err) { console.error("[v0] Error saving settings:", err) } finally { setLoading(false) } } return (

Basic Information Update your restaurant's profile information

Restaurant Name setRestaurant({ ...restaurant, name: e.target.value })} className="mt-2" />

Description

setRestaurant({ ...restaurant, description: e.target.value })}
              className="mt-2"
              rows={3}
            />
          </div>

<div className="grid md:grid-cols-2 gap-4">
            <div>
              <Label htmlFor="category">Category</Label>
              <Input
                id="category"
                value={restaurant.category || ""}
                onChange={(e) => setRestaurant({ ...restaurant, category: e.target.value })}
                className="mt-2"
              />
            </div>

<div>
              <Label htmlFor="phone">Phone</Label>
              <Input
                id="phone"
                value={restaurant.phone || ""}
                onChange={(e) => setRestaurant({ ...restaurant, phone: e.target.value })}
                className="mt-2"
              />
            </div>
          </div>

<div>
            <Label htmlFor="address">Address</Label>
            <Input
              id="address"
              value={restaurant.address || ""}
              onChange={(e) => setRestaurant({ ...restaurant, address: e.target.value })}
              className="mt-2"
            />
          </div>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>Loyalty Program Rules</CardTitle>
          <CardDescription>Configure how customers earn and redeem points</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <Label htmlFor="earn-rate">Earn Rate (points per dollar spent)</Label>
            <Input
              id="earn-rate"
              type="number"
              step="0.01"
              min="0"
              value={restaurant.earn_rate}
              onChange={(e) => setRestaurant({ ...restaurant, earn_rate: Number(e.target.value) })}
              className="mt-2"
            />
            <p className="text-sm text-muted-foreground mt-1">Example: 1.0 means customer earns 1 point per $1 spent</p>
          </div>

<div>
            <Label htmlFor="redeem-rate">Redeem Rate (dollar value per point)</Label>
            <Input
              id="redeem-rate"
              type="number"
              step="0.01"
              min="0"
              value={restaurant.redeem_rate}
              onChange={(e) => setRestaurant({ ...restaurant, redeem_rate: Number(e.target.value) })}
              className="mt-2"
            />
            <p className="text-sm text-muted-foreground mt-1">Example: 0.10 means each point is worth $0.10 off</p>
          </div>

<div className="bg-emerald-50 border border-emerald-200 rounded-lg p-4">
            <p className="text-sm font-medium text-emerald-900 mb-2">Current Configuration:</p>
            <ul className="text-sm text-emerald-800 space-y-1">
              <li>Customer spends $100 = earns {(100 * restaurant.earn_rate).toFixed(0)} points</li>
              <li>100 points = ${(100 * restaurant.redeem_rate).toFixed(2)} discount</li>
            </ul>
          </div>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>Restaurant Status</CardTitle>
          <CardDescription>Control whether your restaurant is visible to customers</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex items-center justify-between">
            <div>
              <p className="font-medium">Active Status</p>
              <p className="text-sm text-muted-foreground">
                {restaurant.is_active
                  ? "Your restaurant is visible to customers"
                  : "Your restaurant is hidden from customers"}
              </p>
            </div>
            <Switch
              checked={restaurant.is_active}
              onCheckedChange={(checked) => setRestaurant({ ...restaurant, is_active: checked })}
            />
          </div>
        </CardContent>
      </Card>

{saved && (
        <Alert className="bg-emerald-50 border-emerald-200">
          <CheckCircle className="h-5 w-5 text-emerald-600" />
          <AlertDescription className="text-emerald-800 font-medium">Settings saved successfully!</AlertDescription>
        </Alert>
      )}

<Button onClick={handleSave} disabled={loading} className="w-full bg-emerald-600 hover:bg-emerald-700">
        {loading ? "Saving..." : "Save Changes"}
      </Button>
    </div>
  )
}
[V0_FILE]typescript:file="components/restaurant/restaurant-analytics.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { TrendingUp, TrendingDown, Users, Star } from "lucide-react"
import { getSupabaseBrowserClient } from "@/lib/supabase/client"

interface RestaurantAnalyticsProps {
  restaurantId: string
}

interface AnalyticsData {
  totalCustomers: number
  totalPointsEarned: number
  totalPointsRedeemed: number
  totalRevenue: number
  recentTransactions: Array<{
    id: string
    type: string
    points: number
    created_at: string
    customer_name: string
  }>
}

export function RestaurantAnalytics({ restaurantId }: RestaurantAnalyticsProps) {
  const [analytics, setAnalytics] = useState<AnalyticsData>({
    totalCustomers: 0,
    totalPointsEarned: 0,
    totalPointsRedeemed: 0,
    totalRevenue: 0,
    recentTransactions: [],
  })
  const [loading, setLoading] = useState(true)

useEffect(() => {
    loadAnalytics()
  }, [])

async function loadAnalytics() {
    const supabase = getSupabaseBrowserClient()

// Get all transactions
    const { data: transactions } = await supabase
      .from("transactions")
      .select("*, users(full_name)")
      .eq("restaurant_id", restaurantId)
      .eq("status", "completed")
      .order("created_at", { ascending: false })

// Get unique customers
    const { count: customerCount } = await supabase
      .from("point_balances")
      .select("*", { count: "exact", head: true })
      .eq("restaurant_id", restaurantId)

const earnTransactions = transactions?.filter((t) => t.type === "earn") || []
    const redeemTransactions = transactions?.filter((t) => t.type === "redeem") || []

const totalPointsEarned = earnTransactions.reduce((sum, t) => sum + t.points, 0)
    const totalPointsRedeemed = redeemTransactions.reduce((sum, t) => sum + t.points, 0)
    const totalRevenue = earnTransactions.reduce((sum, t) => sum + (t.amount_spent || 0), 0)

const recentTransactions =
      transactions?.slice(0, 10).map((t) => ({
        id: t.id,
        type: t.type,
        points: t.points,
        created_at: t.created_at,
        customer_name: t.users?.full_name || "Unknown",
      })) || []

setAnalytics({
      totalCustomers: customerCount || 0,
      totalPointsEarned,
      totalPointsRedeemed,
      totalRevenue,
      recentTransactions,
    })

setLoading(false)
  }

if (loading) {
    return (
      <div className="flex items-center justify-center py-12">
        <div className="h-8 w-8 border-4 border-emerald-600 border-t-transparent rounded-full animate-spin"></div>
      </div>
    )
  }

return (
    <div className="space-y-6">
      <div className="grid md:grid-cols-4 gap-4">
        <Card>
          <CardHeader className="pb-2">
            <CardDescription>Total Customers</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center gap-2">
              <Users className="h-5 w-5 text-muted-foreground" />
              <span className="text-3xl font-bold">{analytics.totalCustomers}</span>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardDescription>Total Revenue</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center gap-2">
              <TrendingUp className="h-5 w-5 text-emerald-600" />
              <span className="text-3xl font-bold">${analytics.totalRevenue.toFixed(2)}</span>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardDescription>Points Earned</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center gap-2">
              <Star className="h-5 w-5 fill-emerald-600 text-emerald-600" />
              <span className="text-3xl font-bold">{analytics.totalPointsEarned}</span>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardDescription>Points Redeemed</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center gap-2">
              <TrendingDown className="h-5 w-5 text-blue-600" />
              <span className="text-3xl font-bold">{analytics.totalPointsRedeemed}</span>
            </div>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Recent Transactions</CardTitle>
          <CardDescription>Latest customer activity</CardDescription>
        </CardHeader>
        <CardContent>
          {analytics.recentTransactions.length === 0 ? (
            <p className="text-center text-muted-foreground py-8">No transactions yet</p>
          ) : (
            <div className="space-y-3">
              {analytics.recentTransactions.map((transaction) => (
                <div key={transaction.id} className="flex items-center justify-between border-b pb-3 last:border-0">
                  <div>
                    <p className="font-medium">{transaction.customer_name}</p>
                    <p className="text-xs text-muted-foreground">
                      {new Date(transaction.created_at).toLocaleDateString()} at{" "}
                      {new Date(transaction.created_at).toLocaleTimeString()}
                    </p>
                  </div>
                  <div className="text-right">
                    <p className={`font-bold ${transaction.type === "earn" ? "text-emerald-600" : "text-blue-600"}`}>
                      {transaction.type === "earn" ? "+" : "-"}
                      {transaction.points} pts
                    </p>
                    <p className="text-xs text-muted-foreground capitalize">{transaction.type}</p>
                  </div>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescript:file="app/admin/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { getSupabaseServerClient } from "@/lib/supabase/server"
import { AdminDashboard } from "@/components/admin/dashboard"

export default async function AdminPage() {
  const supabase = await getSupabaseServerClient()

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

if (!user) {
    redirect("/login")
  }

// Check if user has admin role
  const { data: userData } = await supabase.from("users").select("role").eq("id", user.id).single()

if (userData?.role !== "admin") {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-2xl font-bold mb-2">Access Denied</h1>
          <p className="text-muted-foreground">You do not have permission to access the admin panel.</p>
        </div>
      </div>
    )
  }

return <AdminDashboard />
}
[V0_FILE]typescript:file="components/admin/dashboard.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { OnboardRestaurant } from "./onboard-restaurant"
import { ManageRestaurants } from "./manage-restaurants"
import { PlatformAnalytics } from "./platform-analytics"
import { ActivityMonitor } from "./activity-monitor"
import { Shield, Store, BarChart3, Activity } from "lucide-react"

export function AdminDashboard() {
  const [activeTab, setActiveTab] = useState("restaurants")

return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white border-b">
        <div className="container mx-auto px-4 py-6">
          <div className="flex items-center gap-3">
            <div className="h-12 w-12 bg-purple-100 rounded-lg flex items-center justify-center">
              <Shield className="h-6 w-6 text-purple-600" />
            </div>
            <div>
              <h1 className="text-2xl font-bold">Admin Dashboard</h1>
              <p className="text-sm text-muted-foreground">RewardHub Platform Management</p>
            </div>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8 max-w-7xl">
        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
          <TabsList className="grid w-full grid-cols-4">
            <TabsTrigger value="restaurants" className="flex items-center gap-2">
              <Store className="h-4 w-4" />
              Restaurants
            </TabsTrigger>
            <TabsTrigger value="analytics" className="flex items-center gap-2">
              <BarChart3 className="h-4 w-4" />
              Analytics
            </TabsTrigger>
            <TabsTrigger value="activity" className="flex items-center gap-2">
              <Activity className="h-4 w-4" />
              Activity
            </TabsTrigger>
            <TabsTrigger value="onboard" className="flex items-center gap-2">
              <Store className="h-4 w-4" />
              Onboard New
            </TabsTrigger>
          </TabsList>

<TabsContent value="onboard">
            <OnboardRestaurant />
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="components/admin/onboard-restaurant.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { CheckCircle, AlertCircle } from "lucide-react"
import { getSupabaseBrowserClient } from "@/lib/supabase/client"

export function OnboardRestaurant() {
  const [formData, setFormData] = useState({
    name: "",
    description: "",
    category: "",
    address: "",
    phone: "",
    ownerEmail: "",
    ownerName: "",
    ownerPassword: "",
    earnRate: "1.0",
    redeemRate: "0.10",
  })
  const [loading, setLoading] = useState(false)
  const [result, setResult] = useState<{ type: "success" | "error"; message: string } | null>(null)

async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setLoading(true)
    setResult(null)

try {
      const supabase = getSupabaseBrowserClient()

// Create restaurant owner account
      const { data: authData, error: authError } = await supabase.auth.signUp({
        email: formData.ownerEmail,
        password: formData.ownerPassword,
        options: {
          data: {
            full_name: formData.ownerName,
            role: "restaurant",
          },
        },
      })

if (authError) {
        throw authError
      }

if (!authData.user) {
        throw new Error("Failed to create user account")
      }

// Create user record
      await supabase.from("users").insert({
        id: authData.user.id,
        email: formData.ownerEmail,
        full_name: formData.ownerName,
        role: "restaurant",
      })

// Create restaurant record
      await supabase.from("restaurants").insert({
        name: formData.name,
        description: formData.description,
        category: formData.category,
        address: formData.address,
        phone: formData.phone,
        owner_id: authData.user.id,
        earn_rate: Number(formData.earnRate),
        redeem_rate: Number(formData.redeemRate),
        is_active: true,
      })

setResult({
        type: "success",
        message: `Restaurant "${formData.name}" has been successfully onboarded! Owner can login with ${formData.ownerEmail}`,
      })

// Reset form
      setFormData({
        name: "",
        description: "",
        category: "",
        address: "",
        phone: "",
        ownerEmail: "",
        ownerName: "",
        ownerPassword: "",
        earnRate: "1.0",
        redeemRate: "0.10",
      })
    } catch (err) {
      console.error("[v0] Error onboarding restaurant:", err)
      setResult({
        type: "error",
        message: err instanceof Error ? err.message : "Failed to onboard restaurant. Please try again.",
      })
    } finally {
      setLoading(false)
    }
  }

return (
    <form onSubmit={handleSubmit} className="max-w-3xl space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Restaurant Information</CardTitle>
          <CardDescription>Enter the new restaurant's details</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <Label htmlFor="name">Restaurant Name</Label>
            <Input
              id="name"
              value={formData.name}
              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
              required
              className="mt-2"
            />
          </div>

<div>
            <Label htmlFor="description">Description</Label>
            <Textarea
              id="description"
              value={formData.description}
              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
              className="mt-2"
              rows={3}
            />
          </div>

<div className="grid md:grid-cols-2 gap-4">
            <div>
              <Label htmlFor="category">Category</Label>
              <Input
                id="category"
                value={formData.category}
                onChange={(e) => setFormData({ ...formData, category: e.target.value })}
                placeholder="e.g., Italian, Cafe, Japanese"
                className="mt-2"
              />
            </div>

<div>
              <Label htmlFor="phone">Phone</Label>
              <Input
                id="phone"
                value={formData.phone}
                onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                className="mt-2"
              />
            </div>
          </div>

<div>
            <Label htmlFor="address">Address</Label>
            <Input
              id="address"
              value={formData.address}
              onChange={(e) => setFormData({ ...formData, address: e.target.value })}
              className="mt-2"
            />
          </div>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>Owner Account</CardTitle>
          <CardDescription>Create login credentials for the restaurant owner</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <Label htmlFor="ownerName">Owner Full Name</Label>
            <Input
              id="ownerName"
              value={formData.ownerName}
              onChange={(e) => setFormData({ ...formData, ownerName: e.target.value })}
              required
              className="mt-2"
            />
          </div>

<div>
            <Label htmlFor="ownerEmail">Owner Email</Label>
            <Input
              id="ownerEmail"
              type="email"
              value={formData.ownerEmail}
              onChange={(e) => setFormData({ ...formData, ownerEmail: e.target.value })}
              required
              className="mt-2"
            />
          </div>

<div>
            <Label htmlFor="ownerPassword">Temporary Password</Label>
            <Input
              id="ownerPassword"
              type="password"
              value={formData.ownerPassword}
              onChange={(e) => setFormData({ ...formData, ownerPassword: e.target.value })}
              required
              minLength={6}
              className="mt-2"
            />
            <p className="text-xs text-muted-foreground mt-1">Minimum 6 characters</p>
          </div>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>Loyalty Program Configuration</CardTitle>
          <CardDescription>Set default earning and redemption rates</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <Label htmlFor="earnRate">Earn Rate (points per dollar)</Label>
            <Input
              id="earnRate"
              type="number"
              step="0.01"
              min="0"
              value={formData.earnRate}
              onChange={(e) => setFormData({ ...formData, earnRate: e.target.value })}
              required
              className="mt-2"
            />
            <p className="text-xs text-muted-foreground mt-1">Default: 1.0 (customer earns 1 point per $1 spent)</p>
          </div>

<div>
            <Label htmlFor="redeemRate">Redeem Rate (dollar value per point)</Label>
            <Input
              id="redeemRate"
              type="number"
              step="0.01"
              min="0"
              value={formData.redeemRate}
              onChange={(e) => setFormData({ ...formData, redeemRate: e.target.value })}
              required
              className="mt-2"
            />
            <p className="text-xs text-muted-foreground mt-1">Default: 0.10 (each point is worth $0.10 off)</p>
          </div>

<div className="bg-emerald-50 border border-emerald-200 rounded-lg p-4">
            <p className="text-sm font-medium text-emerald-900 mb-2">Configuration Preview:</p>
            <ul className="text-sm text-emerald-800 space-y-1">
              <li>Customer spends $100 = earns {(100 * Number(formData.earnRate)).toFixed(0)} points</li>
              <li>100 points = ${(100 * Number(formData.redeemRate)).toFixed(2)} discount</li>
            </ul>
          </div>
        </CardContent>
      </Card>

{result && (
        <Alert className={result.type === "success" ? "bg-emerald-50 border-emerald-200" : "bg-red-50 border-red-200"}>
          {result.type === "success" ? (
            <CheckCircle className="h-5 w-5 text-emerald-600" />
          ) : (
            <AlertCircle className="h-5 w-5 text-red-600" />
          )}
          <AlertDescription
            className={result.type === "success" ? "text-emerald-800 font-medium" : "text-red-800 font-medium"}
          >
            {result.message}
          </AlertDescription>
        </Alert>
      )}

<Button type="submit" disabled={loading} className="w-full bg-purple-600 hover:bg-purple-700">
        {loading ? "Creating Restaurant..." : "Onboard Restaurant"}
      </Button>
    </form>
  )
}
[V0_FILE]typescript:file="components/admin/manage-restaurants.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Switch } from "@/components/ui/switch"
import { Input } from "@/components/ui/input"
import { Search, Store } from "lucide-react"
import { getSupabaseBrowserClient } from "@/lib/supabase/client"

interface Restaurant {
  id: string
  name: string
  category: string
  address: string
  is_active: boolean
  earn_rate: number
  redeem_rate: number
  created_at: string
  owner_email: string
}

export function ManageRestaurants() {
  const [restaurants, setRestaurants] = useState<Restaurant[]>([])
  const [searchQuery, setSearchQuery] = useState("")
  const [loading, setLoading] = useState(true)

useEffect(() => {
    loadRestaurants()
  }, [])

async function loadRestaurants() {
    const supabase = getSupabaseBrowserClient()

const { data } = await supabase
      .from("restaurants")
      .select("*, users!restaurants_owner_id_fkey(email)")
      .order("created_at", { ascending: false })

const restaurantsData =
      data?.map((r) => ({
        id: r.id,
        name: r.name,
        category: r.category,
        address: r.address,
        is_active: r.is_active,
        earn_rate: r.earn_rate,
        redeem_rate: r.redeem_rate,
        created_at: r.created_at,
        owner_email: r.users?.email || "N/A",
      })) || []

setRestaurants(restaurantsData)
    setLoading(false)
  }

async function toggleRestaurantStatus(restaurantId: string, currentStatus: boolean) {
    const supabase = getSupabaseBrowserClient()

await supabase.from("restaurants").update({ is_active: !currentStatus }).eq("id", restaurantId)

setRestaurants(restaurants.map((r) => (r.id === restaurantId ? { ...r, is_active: !currentStatus } : r)))
  }

const filteredRestaurants = restaurants.filter(
    (r) =>
      r.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      r.category.toLowerCase().includes(searchQuery.toLowerCase()),
  )

if (loading) {
    return (
      <div className="flex items-center justify-center py-12">
        <div className="h-8 w-8 border-4 border-purple-600 border-t-transparent rounded-full animate-spin"></div>
      </div>
    )
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold">Manage Restaurants</h2>
          <p className="text-sm text-muted-foreground">View and control all restaurants on the platform</p>
        </div>
        <Badge variant="secondary" className="text-lg px-4 py-2">
          {restaurants.length} Total
        </Badge>
      </div>

<div className="relative">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
        <Input
          placeholder="Search restaurants..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          className="pl-10"
        />
      </div>

<div className="grid gap-4">
        {filteredRestaurants.map((restaurant) => (
          <Card key={restaurant.id}>
            <CardHeader>
              <div className="flex items-start justify-between">
                <div className="flex items-start gap-4">
                  <div className="h-12 w-12 bg-emerald-100 rounded-lg flex items-center justify-center flex-shrink-0">
                    <Store className="h-6 w-6 text-emerald-600" />
                  </div>
                  <div>
                    <CardTitle>{restaurant.name}</CardTitle>
                    <CardDescription className="mt-1">
                      <Badge variant="secondary" className="mr-2">
                        {restaurant.category}
                      </Badge>
                      <span className="text-xs">{restaurant.address}</span>
                    </CardDescription>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-sm text-muted-foreground">{restaurant.is_active ? "Active" : "Inactive"}</span>
                  <Switch
                    checked={restaurant.is_active}
                    onCheckedChange={() => toggleRestaurantStatus(restaurant.id, restaurant.is_active)}
                  />
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="grid md:grid-cols-4 gap-4 text-sm">
                <div>
                  <p className="text-muted-foreground mb-1">Owner Email</p>
                  <p className="font-medium">{restaurant.owner_email}</p>
                </div>
                <div>
                  <p className="text-muted-foreground mb-1">Earn Rate</p>
                  <p className="font-medium">{restaurant.earn_rate} pts/$</p>
                </div>
                <div>
                  <p className="text-muted-foreground mb-1">Redeem Rate</p>
                  <p className="font-medium">${restaurant.redeem_rate}/pt</p>
                </div>
                <div>
                  <p className="text-muted-foreground mb-1">Joined</p>
                  <p className="font-medium">{new Date(restaurant.created_at).toLocaleDateString()}</p>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}

{filteredRestaurants.length === 0 && (
          <div className="text-center py-12">
            <Store className="h-12 w-12 text-muted-foreground mx-auto mb-4 opacity-30" />
            <p className="text-muted-foreground">No restaurants found</p>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="components/admin/platform-analytics.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Store, Users, Star, TrendingUp, DollarSign } from "lucide-react"
import { getSupabaseBrowserClient } from "@/lib/supabase/client"
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"

interface PlatformStats {
  totalRestaurants: number
  activeRestaurants: number
  totalCustomers: number
  totalTransactions: number
  totalPointsEarned: number
  totalPointsRedeemed: number
  totalRevenue: number
}

export function PlatformAnalytics() {
  const [stats, setStats] = useState<PlatformStats>({
    totalRestaurants: 0,
    activeRestaurants: 0,
    totalCustomers: 0,
    totalTransactions: 0,
    totalPointsEarned: 0,
    totalPointsRedeemed: 0,
    totalRevenue: 0,
  })
  const [loading, setLoading] = useState(true)

useEffect(() => {
    loadStats()
  }, [])

async function loadStats() {
    const supabase = getSupabaseBrowserClient()

// Get restaurant counts
    const { count: totalRestaurants } = await supabase.from("restaurants").select("*", { count: "exact", head: true })

const { count: activeRestaurants } = await supabase
      .from("restaurants")
      .select("*", { count: "exact", head: true })
      .eq("is_active", true)

// Get customer count
    const { count: totalCustomers } = await supabase
      .from("users")
      .select("*", { count: "exact", head: true })
      .eq("role", "customer")

// Get transactions
    const { data: transactions } = await supabase.from("transactions").select("*").eq("status", "completed")

const earnTransactions = transactions?.filter((t) => t.type === "earn") || []
    const redeemTransactions = transactions?.filter((t) => t.type === "redeem") || []

setStats({
      totalRestaurants: totalRestaurants || 0,
      activeRestaurants: activeRestaurants || 0,
      totalCustomers: totalCustomers || 0,
      totalTransactions: transactions?.length || 0,
      totalPointsEarned,
      totalPointsRedeemed,
      totalRevenue,
    })

setLoading(false)
  }

const chartData = [
    { name: "Earned", value: stats.totalPointsEarned },
    { name: "Redeemed", value: stats.totalPointsRedeemed },
    { name: "Active", value: stats.totalPointsEarned - stats.totalPointsRedeemed },
  ]

return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl font-bold mb-2">Platform Analytics</h2>
        <p className="text-sm text-muted-foreground">Overview of the entire RewardHub platform</p>
      </div>

<div className="grid md:grid-cols-4 gap-4">
        <Card>
          <CardHeader className="pb-2">
            <CardDescription>Total Restaurants</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center gap-2">
              <Store className="h-5 w-5 text-purple-600" />
              <span className="text-3xl font-bold">{stats.totalRestaurants}</span>
            </div>
            <p className="text-xs text-muted-foreground mt-2">{stats.activeRestaurants} active</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardDescription>Total Customers</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center gap-2">
              <Users className="h-5 w-5 text-blue-600" />
              <span className="text-3xl font-bold">{stats.totalCustomers}</span>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardDescription>Total Transactions</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center gap-2">
              <TrendingUp className="h-5 w-5 text-emerald-600" />
              <span className="text-3xl font-bold">{stats.totalTransactions}</span>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardDescription>Platform Revenue</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center gap-2">
              <DollarSign className="h-5 w-5 text-green-600" />
              <span className="text-3xl font-bold">${stats.totalRevenue.toFixed(0)}</span>
            </div>
          </CardContent>
        </Card>
      </div>

<div className="grid md:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Points Overview</CardTitle>
            <CardDescription>Total points earned vs redeemed</CardDescription>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={chartData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip />
                <Bar dataKey="value" fill="#10b981" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Key Metrics</CardTitle>
            <CardDescription>Important platform statistics</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between pb-3 border-b">
              <div className="flex items-center gap-2">
                <Star className="h-5 w-5 text-emerald-600 fill-emerald-600" />
                <span className="text-sm">Total Points Earned</span>
              </div>
              <span className="text-2xl font-bold">{stats.totalPointsEarned.toLocaleString()}</span>
            </div>

<div className="flex items-center justify-between pb-3 border-b">
              <div className="flex items-center gap-2">
                <Star className="h-5 w-5 text-blue-600 fill-blue-600" />
                <span className="text-sm">Total Points Redeemed</span>
              </div>
              <span className="text-2xl font-bold">{stats.totalPointsRedeemed.toLocaleString()}</span>
            </div>

<div className="flex items-center justify-between pb-3 border-b">
              <div className="flex items-center gap-2">
                <Star className="h-5 w-5 text-yellow-600 fill-yellow-600" />
                <span className="text-sm">Active Points</span>
              </div>
              <span className="text-2xl font-bold">
                {(stats.totalPointsEarned - stats.totalPointsRedeemed).toLocaleString()}
              </span>
            </div>

<div className="flex items-center justify-between">
              <span className="text-sm">Redemption Rate</span>
              <span className="text-2xl font-bold text-purple-600">
                {stats.totalPointsEarned > 0
                  ? ((stats.totalPointsRedeemed / stats.totalPointsEarned) * 100).toFixed(1)
                  : 0}
                %
              </span>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="components/admin/activity-monitor.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { TrendingUp, TrendingDown } from "lucide-react"
import { getSupabaseBrowserClient } from "@/lib/supabase/client"
import { formatDistanceToNow } from "date-fns"

interface ActivityItem {
  id: string
  type: "earn" | "redeem"
  points: number
  status: string
  created_at: string
  customer_name: string
  restaurant_name: string
  amount_spent?: number
}

export function ActivityMonitor() {
  const [activities, setActivities] = useState<ActivityItem[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    loadActivities()

// Set up real-time subscription
    const supabase = getSupabaseBrowserClient()
    const channel = supabase
      .channel("transactions")
      .on("postgres_changes", { event: "*", schema: "public", table: "transactions" }, () => {
        loadActivities()
      })
      .subscribe()

return () => {
      supabase.removeChannel(channel)
    }
  }, [])

async function loadActivities() {
    const supabase = getSupabaseBrowserClient()

const { data } = await supabase
      .from("transactions")
      .select("*, users(full_name), restaurants(name)")
      .order("created_at", { ascending: false })
      .limit(100)

const activitiesData =
      data?.map((t) => ({
        id: t.id,
        type: t.type,
        points: t.points,
        status: t.status,
        created_at: t.created_at,
        customer_name: t.users?.full_name || "Unknown",
        restaurant_name: t.restaurants?.name || "Unknown",
        amount_spent: t.amount_spent,
      })) || []

setActivities(activitiesData)
    setLoading(false)
  }

return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl font-bold mb-2">Activity Monitor</h2>
        <p className="text-sm text-muted-foreground">Real-time platform activity across all restaurants</p>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Recent Transactions</CardTitle>
          <CardDescription>Live feed of all earn and redeem activities</CardDescription>
        </CardHeader>
        <CardContent>
          {activities.length === 0 ? (
            <p className="text-center text-muted-foreground py-8">No activity yet</p>
          ) : (
            <div className="space-y-3">
              {activities.map((activity) => (
                <div key={activity.id} className="flex items-center justify-between border-b pb-3 last:border-0">
                  <div className="flex items-center gap-3">
                    <div
                      className={`h-10 w-10 rounded-full flex items-center justify-center ${
                        activity.type === "earn" ? "bg-emerald-100" : "bg-blue-100"
                      }`}
                    >
                      {activity.type === "earn" ? (
                        <TrendingUp className="h-5 w-5 text-emerald-600" />
                      ) : (
                        <TrendingDown className="h-5 w-5 text-blue-600" />
                      )}
                    </div>
                    <div>
                      <p className="font-medium">
                        {activity.customer_name}{" "}
                        <span className="text-muted-foreground">
                          {activity.type === "earn" ? "earned" : "redeemed"}
                        </span>{" "}
                        {activity.points} points
                      </p>
                      <p className="text-xs text-muted-foreground">
                        {activity.restaurant_name} •{" "}
                        {formatDistanceToNow(new Date(activity.created_at), { addSuffix: true })}
                      </p>
                    </div>
                  </div>
                  <div className="text-right">
                    <Badge
                      variant={
                        activity.status === "completed"
                          ? "default"
                          : activity.status === "pending"
                            ? "secondary"
                            : "outline"
                      }
                    >
                      {activity.status}
                    </Badge>
                    {activity.amount_spent && (
                      <p className="text-xs text-muted-foreground mt-1">${activity.amount_spent.toFixed(2)}</p>
                    )}
                  </div>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescript:file="components/ui/textarea.tsx" isMerged="true"
import * as React from 'react'

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

function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        className,
      )}
      {...props}
    />
  )
}

export { Textarea }
[V0_FILE]typescript:file="components/ui/switch.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as SwitchPrimitive from '@radix-ui/react-switch'

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

function Switch({
  className,
  ...props
}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
  return (
    <SwitchPrimitive.Root
      data-slot="switch"
      className={cn(
        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
        className,
      )}
      {...props}
    >
      <SwitchPrimitive.Thumb
        data-slot="switch-thumb"
        className={
          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
        }
      />
    </SwitchPrimitive.Root>
  )
}

export { Switch }
[V0_FILE]css:file="styles/globals.css" isDeleted="true"
...deleted...
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Star, Gift, Store } from "lucide-react"

export default function LandingPage() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-emerald-50 to-white">
      {/* Header */}
      <header className="border-b bg-white/80 backdrop-blur-sm sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Star className="h-8 w-8 text-emerald-600 fill-emerald-600" />
            <span className="text-2xl font-bold text-emerald-900">RewardHub</span>
          </div>
          <div className="flex gap-3">
            <Link href="/login">
              <Button variant="ghost">Sign In</Button>
            </Link>
            <Link href="/signup">
              <Button className="bg-emerald-600 hover:bg-emerald-700 text-white">Get Started</Button>
            </Link>
          </div>
        </div>
      </header>

{/* Hero Section */}
      <section className="container mx-auto px-4 py-20 text-center">
        <h1 className="text-5xl md:text-6xl font-bold text-emerald-900 mb-6 text-balance">
          All Your Favorite Restaurants.
          <br />
          One Loyalty App.
        </h1>
        <p className="text-xl text-emerald-800 mb-8 max-w-2xl mx-auto text-pretty">
          Earn points, unlock rewards, and get recognized at all your local spots. No more juggling multiple apps.
        </p>
        <Link href="/signup">
          <Button size="lg" className="bg-emerald-600 hover:bg-emerald-700 text-white text-lg px-8 py-6">
            Start Earning Rewards
          </Button>
        </Link>
      </section>

{/* Features Grid */}
      <section className="container mx-auto px-4 py-16">
        <div className="grid md:grid-cols-3 gap-8">
          <Card className="p-6 border-2 hover:border-emerald-300 transition-colors">
            <div className="h-12 w-12 bg-emerald-100 rounded-full flex items-center justify-center mb-4">
              <Store className="h-6 w-6 text-emerald-600" />
            </div>
            <h3 className="text-xl font-semibold mb-2 text-emerald-900">Discover Local Gems</h3>
            <p className="text-emerald-700">
              Find and favorite restaurants in your area. Each with their own unique rewards program.
            </p>
          </Card>

<Card className="p-6 border-2 hover:border-emerald-300 transition-colors">
            <div className="h-12 w-12 bg-emerald-100 rounded-full flex items-center justify-center mb-4">
              <Star className="h-6 w-6 text-emerald-600" />
            </div>
            <h3 className="text-xl font-semibold mb-2 text-emerald-900">Earn Points Instantly</h3>
            <p className="text-emerald-700">
              Get a code from your server, enter it in the app, and watch your points add up automatically.
            </p>
          </Card>

<Card className="p-6 border-2 hover:border-emerald-300 transition-colors">
            <div className="h-12 w-12 bg-emerald-100 rounded-full flex items-center justify-center mb-4">
              <Gift className="h-6 w-6 text-emerald-600" />
            </div>
            <h3 className="text-xl font-semibold mb-2 text-emerald-900">Redeem Rewards</h3>
            <p className="text-emerald-700">
              Turn your points into discounts. Generate a code and show it to your server next visit.
            </p>
          </Card>
        </div>
      </section>

{/* How It Works */}
      <section className="bg-emerald-600 text-white py-16">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-12">How It Works</h2>
          <div className="grid md:grid-cols-4 gap-8 max-w-5xl mx-auto">
            <div className="text-center">
              <div className="h-16 w-16 bg-white text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">
                1
              </div>
              <h3 className="font-semibold mb-2">Dine & Pay</h3>
              <p className="text-emerald-100 text-sm">Pay your bill normally at the restaurant</p>
            </div>
            <div className="text-center">
              <div className="h-16 w-16 bg-white text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">
                2
              </div>
              <h3 className="font-semibold mb-2">Get Code</h3>
              <p className="text-emerald-100 text-sm">Server gives you a PIN or QR code</p>
            </div>
            <div className="text-center">
              <div className="h-16 w-16 bg-white text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">
                3
              </div>
              <h3 className="font-semibold mb-2">Enter & Earn</h3>
              <p className="text-emerald-100 text-sm">Scan or enter code to claim your points</p>
            </div>
            <div className="text-center">
              <div className="h-16 w-16 bg-white text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">
                4
              </div>
              <h3 className="font-semibold mb-2">Redeem</h3>
              <p className="text-emerald-100 text-sm">Use points for discounts on future visits</p>
            </div>
          </div>
        </div>
      </section>

{/* CTA */}
      <section className="container mx-auto px-4 py-16 text-center">
        <h2 className="text-3xl font-bold text-emerald-900 mb-4">Ready to Start Earning?</h2>
        <p className="text-emerald-700 mb-8 text-lg">Join thousands of diners saving at local restaurants</p>
        <Link href="/signup">
          <Button size="lg" className="bg-emerald-600 hover:bg-emerald-700 text-white">
            Create Free Account
          </Button>
        </Link>
      </section>

{/* Footer */}
      <footer className="border-t bg-emerald-50 py-8">
        <div className="container mx-auto px-4 text-center text-emerald-700">
          <p>RewardHub - Your Multi-Restaurant Loyalty Platform</p>
        </div>
      </footer>
    </div>
  )
}</article></body></html>