[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" import { Analytics } from "@vercel/analytics/next" import { Suspense } from "react" import "./globals.css" export const metadata: Metadata = { title: "HETA Maldives - Professional AC Servicing | Repair, Maintenance & Installation", description: "Expert air conditioning services in the Maldives. 24/7 emergency AC repair, maintenance, and installation. Serving all islands with certified technicians.", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]sql:file="scripts/001_create_customers_table.sql" isMerged="true" -- Create customers table CREATE TABLE IF NOT EXISTS public.customers ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), name TEXT NOT NULL, email TEXT NOT NULL UNIQUE, phone TEXT NOT NULL, island TEXT NOT NULL, address TEXT, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Enable RLS ALTER TABLE public.customers ENABLE ROW LEVEL SECURITY; -- Create policies for customers (public access for booking, but customers can only see their own data) CREATE POLICY "customers_select_own" ON public.customers FOR SELECT USING (true); -- Allow reading for booking system CREATE POLICY "customers_insert_public" ON public.customers FOR INSERT WITH CHECK (true); -- Allow public insert for new bookings CREATE POLICY "customers_update_own" ON public.customers FOR UPDATE USING (email = current_setting('request.jwt.claims', true)::json->>'email'); -- Create index for performance CREATE INDEX IF NOT EXISTS customers_email_idx ON public.customers(email); CREATE INDEX IF NOT EXISTS customers_phone_idx ON public.customers(phone); [V0_FILE]sql:file="scripts/002_create_services_table.sql" isMerged="true" -- Create services table CREATE TABLE IF NOT EXISTS public.services ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), name TEXT NOT NULL, description TEXT, base_price DECIMAL(10,2) NOT NULL, duration_hours INTEGER DEFAULT 2, category TEXT NOT NULL CHECK (category IN ('repair', 'maintenance', 'installation', 'inspection')), is_active BOOLEAN DEFAULT true, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Enable RLS ALTER TABLE public.services ENABLE ROW LEVEL SECURITY; -- Create policies for services (public read access) CREATE POLICY "services_select_public" ON public.services FOR SELECT USING (is_active = true); -- Insert default services INSERT INTO public.services (name, description, base_price, duration_hours, category) VALUES ('AC Repair', 'Complete AC unit repair and troubleshooting', 150.00, 3, 'repair'), ('AC Maintenance', 'Regular maintenance and cleaning service', 80.00, 2, 'maintenance'), ('AC Installation', 'New AC unit installation service', 300.00, 4, 'installation'), ('AC Inspection', 'Comprehensive AC system inspection', 60.00, 1, 'inspection'), ('Emergency Repair', 'Emergency AC repair service (24/7)', 200.00, 2, 'repair'), ('Duct Cleaning', 'Air duct cleaning and sanitization', 120.00, 3, 'maintenance'); [V0_FILE]sql:file="scripts/003_create_bookings_table.sql" isMerged="true" -- Create bookings table CREATE TABLE IF NOT EXISTS public.bookings ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), customer_id UUID NOT NULL REFERENCES public.customers(id) ON DELETE CASCADE, service_id UUID NOT NULL REFERENCES public.services(id) ON DELETE RESTRICT, preferred_date DATE NOT NULL, preferred_time TIME NOT NULL, status TEXT NOT NULL DEFAULT 'pending' CHECK (status IN ('pending', 'confirmed', 'in_progress', 'completed', 'cancelled')), priority TEXT NOT NULL DEFAULT 'normal' CHECK (priority IN ('low', 'normal', 'high', 'emergency')), problem_description TEXT, location_details TEXT, estimated_price DECIMAL(10,2), actual_price DECIMAL(10,2), technician_notes TEXT, customer_notes TEXT, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Enable RLS ALTER TABLE public.bookings ENABLE ROW LEVEL SECURITY; -- Create policies for bookings CREATE POLICY "bookings_select_own" ON public.bookings FOR SELECT USING ( customer_id IN ( SELECT id FROM public.customers WHERE email = current_setting('request.jwt.claims', true)::json->>'email' ) ); CREATE POLICY "bookings_insert_public" ON public.bookings FOR INSERT WITH CHECK (true); -- Allow public insert for new bookings CREATE POLICY "bookings_update_own" ON public.bookings FOR UPDATE USING ( customer_id IN ( SELECT id FROM public.customers WHERE email = current_setting('request.jwt.claims', true)::json->>'email' ) ); -- Create indexes for performance CREATE INDEX IF NOT EXISTS bookings_customer_id_idx ON public.bookings(customer_id); CREATE INDEX IF NOT EXISTS bookings_service_id_idx ON public.bookings(service_id); CREATE INDEX IF NOT EXISTS bookings_status_idx ON public.bookings(status); CREATE INDEX IF NOT EXISTS bookings_date_idx ON public.bookings(preferred_date); [V0_FILE]sql:file="scripts/004_create_technicians_table.sql" isMerged="true" -- Create technicians table CREATE TABLE IF NOT EXISTS public.technicians ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), name TEXT NOT NULL, email TEXT NOT NULL UNIQUE, phone TEXT NOT NULL, specialization TEXT[] DEFAULT ARRAY['general'], is_available BOOLEAN DEFAULT true, hourly_rate DECIMAL(10,2) DEFAULT 25.00, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Enable RLS ALTER TABLE public.technicians ENABLE ROW LEVEL SECURITY; -- Create policies for technicians (admin access only) CREATE POLICY "technicians_select_admin" ON public.technicians FOR SELECT USING (false); -- Will be updated when admin auth is implemented -- Insert default technicians INSERT INTO public.technicians (name, email, phone, specialization, hourly_rate) VALUES ('Ahmed Hassan', 'ahmed@hetamaldives.com', '+960-123-4567', ARRAY['repair', 'maintenance'], 30.00), ('Mohamed Ali', 'mohamed@hetamaldives.com', '+960-123-4568', ARRAY['installation', 'repair'], 35.00), ('Ibrahim Waheed', 'ibrahim@hetamaldives.com', '+960-123-4569', ARRAY['maintenance', 'inspection'], 25.00); [V0_FILE]sql:file="scripts/005_create_invoices_table.sql" isMerged="true" -- Create invoices table CREATE TABLE IF NOT EXISTS public.invoices ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), booking_id UUID NOT NULL REFERENCES public.bookings(id) ON DELETE CASCADE, invoice_number TEXT NOT NULL UNIQUE, subtotal DECIMAL(10,2) NOT NULL, tax_amount DECIMAL(10,2) DEFAULT 0.00, total_amount DECIMAL(10,2) NOT NULL, status TEXT NOT NULL DEFAULT 'draft' CHECK (status IN ('draft', 'sent', 'paid', 'overdue', 'cancelled')), due_date DATE NOT NULL, paid_date DATE, payment_method TEXT, notes TEXT, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Enable RLS ALTER TABLE public.invoices ENABLE ROW LEVEL SECURITY; -- Create policies for invoices CREATE POLICY "invoices_select_own" ON public.invoices FOR SELECT USING ( booking_id IN ( SELECT b.id FROM public.bookings b JOIN public.customers c ON b.customer_id = c.id WHERE c.email = current_setting('request.jwt.claims', true)::json->>'email' ) ); -- Create indexes CREATE INDEX IF NOT EXISTS invoices_booking_id_idx ON public.invoices(booking_id); CREATE INDEX IF NOT EXISTS invoices_status_idx ON public.invoices(status); CREATE INDEX IF NOT EXISTS invoices_due_date_idx ON public.invoices(due_date); -- Create function to generate invoice numbers CREATE OR REPLACE FUNCTION generate_invoice_number() RETURNS TEXT AS $$ DECLARE next_num INTEGER; invoice_num TEXT; BEGIN SELECT COALESCE(MAX(CAST(SUBSTRING(invoice_number FROM 'INV-(\d+)') AS INTEGER)), 0) + 1 INTO next_num FROM public.invoices; invoice_num := 'INV-' || LPAD(next_num::TEXT, 6, '0'); RETURN invoice_num; END; $$ LANGUAGE plpgsql; [V0_FILE]typescriptreact:file="lib/supabase/client.ts" isMerged="true" import { createBrowserClient } from "@supabase/ssr" export function createClient() { return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!) } [V0_FILE]typescriptreact:file="lib/supabase/server.ts" isMerged="true" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" /** * Especially important if using Fluid compute: Don't put this client in a * global variable. Always create a new client within each function when using * it. */ export async function createClient() { const cookieStore = await cookies() return createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) } catch { // The "setAll" method was called from a Server Component. // This can be ignored if you have middleware refreshing // user sessions. } }, }, }) } [V0_FILE]typescriptreact:file="lib/supabase/middleware.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { createServerClient } from "@supabase/ssr" import { NextResponse, type NextRequest } from "next/server" export async function updateSession(request: NextRequest) { let supabaseResponse = NextResponse.next({ request, }) // With Fluid compute, don't put this client in a global environment // variable. Always create a new one on each request. const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return request.cookies.getAll() }, setAll(cookiesToSet) { cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value)) supabaseResponse = NextResponse.next({ request, }) cookiesToSet.forEach(({ name, value, options }) => supabaseResponse.cookies.set(name, value, options)) }, }, }, ) // Do not run code between createServerClient and // supabase.auth.getUser(). A simple mistake could make it very hard to debug // issues with users being randomly logged out. // IMPORTANT: If you remove getUser() and you use server-side rendering // with the Supabase client, your users may be randomly logged out. const { data: { user }, } = await supabase.auth.getUser() // Protect admin routes (AC servicing business) and staff routes (Staff CMS) if ( !user && (request.nextUrl.pathname.startsWith("/admin") || request.nextUrl.pathname.startsWith("/dashboard") || request.nextUrl.pathname.startsWith("/staff/dashboard") || request.nextUrl.pathname.startsWith("/staff/orders") || request.nextUrl.pathname.startsWith("/staff/products") || request.nextUrl.pathname.startsWith("/staff/services") || request.nextUrl.pathname.startsWith("/staff/customers") || request.nextUrl.pathname.startsWith("/staff/activity") || request.nextUrl.pathname.startsWith("/staff/manage")) ) { // Redirect to appropriate login page based on path const url = request.nextUrl.clone() if (request.nextUrl.pathname.startsWith("/staff")) { url.pathname = "/staff/login" } else { url.pathname = "/auth/login" } return NextResponse.redirect(url) } // IMPORTANT: You *must* return the supabaseResponse object as it is. return supabaseResponse } [V0_FILE]typescriptreact:file="middleware.ts" isMerged="true" import { updateSession } from "@/lib/supabase/middleware" import type { NextRequest } from "next/server" export async function middleware(request: NextRequest) { return await updateSession(request) } export const config = { matcher: [ /* * Match all request paths except: * - _next/static (static files) * - _next/image (image optimization files) * - favicon.ico (favicon file) * - images - .svg, .png, .jpg, .jpeg, .gif, .webp * Feel free to modify this pattern to include more paths. */ "/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)", ], } [V0_FILE]typescriptreact:file="app/auth/login/page.tsx" isMerged="true" "use client" import type React from "react" import { createClient } from "@/lib/supabase/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 Link from "next/link" import { useRouter } from "next/navigation" import { useState } from "react" export default function Page() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [error, setError] = useState(null) const [isLoading, setIsLoading] = useState(false) const router = useRouter() const handleLogin = async (e: React.FormEvent) => { e.preventDefault() const supabase = createClient() setIsLoading(true) setError(null) try { const { error } = await supabase.auth.signInWithPassword({ email, password, options: { emailRedirectTo: process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || `${window.location.origin}/protected`, }, }) if (error) throw error router.push("/protected") } catch (error: unknown) { setError(error instanceof Error ? error.message : "An error occurred") } finally { setIsLoading(false) } } return (

) } [V0_FILE]typescriptreact:file="app/auth/sign-up/page.tsx" isMerged="true" "use client" import type React from "react" import { createClient } from "@/lib/supabase/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 Link from "next/link" import { useRouter } from "next/navigation" import { useState } from "react" export default function Page() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [repeatPassword, setRepeatPassword] = useState("") const [error, setError] = useState(null) const [isLoading, setIsLoading] = useState(false) const router = useRouter() const handleSignUp = async (e: React.FormEvent) => { e.preventDefault() const supabase = createClient() setIsLoading(true) setError(null) if (password !== repeatPassword) { setError("Passwords do not match") setIsLoading(false) return } try { const { error } = await supabase.auth.signUp({ email, password, options: { emailRedirectTo: process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || `${window.location.origin}/protected`, }, }) if (error) throw error router.push("/auth/sign-up-success") } catch (error: unknown) { setError(error instanceof Error ? error.message : "An error occurred") } finally { setIsLoading(false) } } return (

Email setEmail(e.target.value)} />

Password

setPassword(e.target.value)} />

Repeat Password

setRepeatPassword(e.target.value)} />

{error &&

{error}

}

Already have an account?{" "} Login

) } [V0_FILE]typescriptreact:file="app/admin/bookings/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { createClient } from "@/lib/supabase/server" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { CalendarDays, MapPin, Phone, Mail, Clock, AlertTriangle } from "lucide-react" export default async function BookingsPage() { const supabase = await createClient() const { data, error } = await supabase.auth.getUser() if (error || !data?.user) { redirect("/auth/login") } // Fetch bookings with customer and service details const { data: bookings } = await supabase .from("bookings") .select(` *, customers (name, email, phone, island), services (name, category) `) .order("created_at", { ascending: false }) return (

{/* Header */}

Bookings Management

Manage all service bookings

{/* Bookings List */}

{bookings && bookings.length > 0 ? ( bookings.map((booking) => (

{booking.priority === "emergency" ? ( ) : ( )}

{booking.services?.name || "Service"} Booking #{booking.id.slice(0, 8)} • {booking.services?.category}

{booking.status} {booking.priority === "emergency" && Emergency}

{/* Customer Info */}

Customer Details

{booking.customers?.name}

{booking.customers?.email}

{booking.customers?.phone}

{booking.customers?.island}

{/* Booking Details */}

Booking Details

{new Date(booking.preferred_date).toLocaleDateString()} at {booking.preferred_time}

Created:{" "} {new Date(booking.created_at).toLocaleDateString()}

{booking.estimated_price && (

Estimated:{" "} ${Number.parseFloat(booking.estimated_price).toFixed(2)}

)}

{/* Problem Description */}

Problem Description

{booking.problem_description || "No description provided"}

{booking.location_details && (

Location:

{booking.location_details}

)}

{/* Action Buttons */}

)) ) : (

No bookings found

When customers make bookings, they will appear here.

)}

) } [V0_FILE]typescriptreact:file="app/admin/customers/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { createClient } from "@/lib/supabase/server" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Users, Mail, Phone, MapPin, Calendar } from "lucide-react" export default async function CustomersPage() { const supabase = await createClient() const { data, error } = await supabase.auth.getUser() if (error || !data?.user) { redirect("/auth/login") } // Fetch customers with booking count const { data: customers } = await supabase .from("customers") .select(` *, bookings (id) `) .order("created_at", { ascending: false }) return (

{/* Header */}

Customer Management

View and manage customer information

{/* Customers Grid */}

{customers && customers.length > 0 ? ( customers.map((customer) => (

{customer.name} {customer.bookings?.length || 0} booking{customer.bookings?.length !== 1 ? "s" : ""}

{customer.email}

{customer.phone}

{customer.island}

{customer.address && (

Address: {customer.address}

)}

Joined {new Date(customer.created_at).toLocaleDateString()}

)) ) : (

No customers found

Customer information will appear here as bookings are made.

)}

) } [V0_FILE]typescriptreact:file="app/admin/technicians/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { createClient } from "@/lib/supabase/server" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Wrench, Mail, Phone, DollarSign, CheckCircle, XCircle } from "lucide-react" export default async function TechniciansPage() { const supabase = await createClient() const { data, error } = await supabase.auth.getUser() if (error || !data?.user) { redirect("/auth/login") } // Fetch technicians const { data: technicians } = await supabase.from("technicians").select("*").order("name", { ascending: true }) return (

{/* Header */}

Technician Management

Manage your service technicians

{/* Technicians Grid */}

{technicians && technicians.length > 0 ? ( technicians.map((technician) => (

{technician.name} Service Technician

{technician.is_available ? ( ) : ( )}

{technician.email}

{technician.phone}

${technician.hourly_rate}/hour

{/* Specializations */}

Specializations:

{technician.specialization?.map((spec, index) => ( {spec} ))}

{/* Availability Status */}

{technician.is_available ? "Available" : "Busy"}

)) ) : (

No technicians found

Add technicians to manage your service team.

)}

) } [V0_FILE]typescriptreact:file="app/customer/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import { redirect } from "next/navigation" import { createClient } from "@/lib/supabase/server" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { CalendarDays, Clock, Wrench, FileText, User, Plus, Calendar } from "lucide-react" export default async function CustomerPortal() { const supabase = await createClient() const { data, error } = await supabase.auth.getUser() if (error || !data?.user) { redirect("/auth/login") } // Get customer information const { data: customer } = await supabase.from("customers").select("*").eq("email", data.user.email).single() if (!customer) { redirect("/auth/login") } // Fetch customer's bookings with service details const { data: bookings } = await supabase .from("bookings") .select(` *, services (name, category, description) `) .eq("customer_id", customer.id) .order("created_at", { ascending: false }) const { data: subscriptions } = await supabase .from("customer_subscriptions") .select(` *, subscription_plans (name, price, billing_cycle, service_frequency) `) .eq("customer_id", customer.id) .order("created_at", { ascending: false }) const { data: upcomingServices } = await supabase .from("bookings") .select(` *, services (name, category), customer_subscriptions ( subscription_plans (name) ) `) .eq("customer_id", customer.id) .eq("is_subscription_service", true) .gte("preferred_date", new Date().toISOString().split("T")[0]) .order("preferred_date", { ascending: true }) .limit(5) // Fetch customer's invoices const { data: invoices } = await supabase .from("invoices") .select(` *, bookings ( services (name) ) `) .in("booking_id", bookings?.map((b) => b.id) || []) .order("created_at", { ascending: false }) const activeBookings = bookings?.filter((b) => ["pending", "confirmed", "in_progress"].includes(b.status)) || [] const completedBookings = bookings?.filter((b) => b.status === "completed") || [] const unpaidInvoices = invoices?.filter((i) => i.status !== "paid") || [] const activeSubscriptions = subscriptions?.filter((s) => s.status === "active") || [] return (

{/* Header */}

HETA Maldives

Customer Portal

Welcome, {customer.name}

{/* Welcome Section */}

Welcome back, {customer.name}!

Manage your AC service bookings and subscription plans.

{/* Quick Stats */}

Active Bookings

{activeBookings.length}

Pending or in progress

Active Subscriptions

{activeSubscriptions.length}

Maintenance plans

Completed Services

{completedBookings.length}

Total completed

Pending Invoices

{unpaidInvoices.length}

Awaiting payment

{activeSubscriptions.length > 0 && ( Your Subscription Plans Active maintenance subscriptions

{activeSubscriptions.map((subscription) => (

{subscription.subscription_plans?.name}

Active

Service: {subscription.subscription_plans?.service_frequency}

Billing: ${Number.parseFloat(subscription.subscription_plans?.price || "0").toFixed(2)} per{" "} {subscription.subscription_plans?.billing_cycle}

Next Service:{" "} {subscription.next_service_date ? new Date(subscription.next_service_date).toLocaleDateString() : "TBD"}

))}

)} {/* Quick Actions */}

Quick Actions Common tasks and services Upcoming Services Your scheduled maintenance and service appointments

{upcomingServices && upcomingServices.length > 0 ? ( upcomingServices.map((service) => (

{service.services?.name}

{new Date(service.preferred_date).toLocaleDateString()} at {service.preferred_time}

{service.customer_subscriptions?.subscription_plans?.name && (

{service.customer_subscriptions.subscription_plans.name} Plan

)}

Scheduled

Subscription Service

)) ) : activeBookings.length > 0 ? ( activeBookings.slice(0, 3).map((booking) => (

{booking.services?.name}

{new Date(booking.preferred_date).toLocaleDateString()} at {booking.preferred_time}

{booking.status} {booking.estimated_price && (

${Number.parseFloat(booking.estimated_price).toFixed(2)}

)}

)) ) : (

No upcoming services

Book a service or subscribe to a maintenance plan

)}

{/* Recent Bookings History */}

Booking History Your recent service history

{bookings && bookings.length > 0 ? ( bookings.slice(0, 5).map((booking) => (

{booking.services?.name}

{new Date(booking.preferred_date).toLocaleDateString()}

{booking.is_subscription_service && (

Subscription Service

)}

{booking.status} {booking.estimated_price && (

${Number.parseFloat(booking.estimated_price).toFixed(2)}

)}

)) ) : (

No booking history

Your service history will appear here

)}

) } [V0_FILE]typescriptreact:file="app/customer/profile/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { createClient } from "@/lib/supabase/server" 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 { User, Mail, Phone, MapPin, Calendar } from "lucide-react" export default async function CustomerProfile() { const supabase = await createClient() const { data, error } = await supabase.auth.getUser() if (error || !data?.user) { redirect("/auth/login") } // Get customer information const { data: customer } = await supabase.from("customers").select("*").eq("email", data.user.email).single() if (!customer) { redirect("/auth/login") } return (

{/* Header */}

Profile Settings

Manage your account information

{/* Profile Information */}

Personal Information Update your personal details

{/* Account Information */} Account Information Your account details and statistics

{customer.email}

Phone

{customer.phone}

Location

{customer.island}

Member Since

{new Date(customer.created_at).toLocaleDateString()}

) } [V0_FILE]typescriptreact:file="app/customer/bookings/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { createClient } from "@/lib/supabase/server" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { CalendarDays, Clock, Wrench, MapPin, FileText } from "lucide-react" export default async function CustomerBookings() { const supabase = await createClient() const { data, error } = await supabase.auth.getUser() if (error || !data?.user) { redirect("/auth/login") } // Get customer information const { data: customer } = await supabase.from("customers").select("*").eq("email", data.user.email).single() if (!customer) { redirect("/auth/login") } // Fetch customer's bookings with service details const { data: bookings } = await supabase .from("bookings") .select(` *, services (name, category, description) `) .eq("customer_id", customer.id) .order("created_at", { ascending: false }) return (

{/* Header */}

My Bookings

View all your service bookings

{/* Bookings List */}

{bookings && bookings.length > 0 ? ( bookings.map((booking) => (

{booking.services?.name} Booking #{booking.id.slice(0, 8)} • {booking.services?.category}

{booking.status} {booking.priority === "emergency" && Emergency}

{/* Booking Details */}

Booking Details

{new Date(booking.preferred_date).toLocaleDateString()}

{booking.preferred_time}

Booked:{" "} {new Date(booking.created_at).toLocaleDateString()}

{booking.estimated_price && (

Estimated Cost:{" "} ${Number.parseFloat(booking.estimated_price).toFixed(2)}

)}

{/* Service Description */}

Service Description

{booking.services?.description || "No description available"}

{/* Problem Description */}

Problem Description

{booking.problem_description || "No description provided"}

{booking.location_details && (

{booking.location_details}

)}

{/* Technician Notes */} {booking.technician_notes && (

Technician Notes

{booking.technician_notes}

)} {/* Action Buttons */}

{booking.status === "pending" && ( )} {booking.status === "completed" && ( )}

)) ) : (

No bookings found

You haven't made any service bookings yet.

)}

) } [V0_FILE]typescriptreact:file="app/customer/invoices/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { createClient } from "@/lib/supabase/server" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { FileText, Download, Calendar, DollarSign } from "lucide-react" export default async function CustomerInvoices() { const supabase = await createClient() const { data, error } = await supabase.auth.getUser() if (error || !data?.user) { redirect("/auth/login") } // Get customer information const { data: customer } = await supabase.from("customers").select("*").eq("email", data.user.email).single() if (!customer) { redirect("/auth/login") } // Fetch customer's bookings to get booking IDs const { data: bookings } = await supabase.from("bookings").select("id").eq("customer_id", customer.id) // Fetch customer's invoices const { data: invoices } = await supabase .from("invoices") .select(` *, bookings ( services (name, category), preferred_date ) `) .in("booking_id", bookings?.map((b) => b.id) || []) .order("created_at", { ascending: false }) return (

{/* Header */}

My Invoices

View and manage your service invoices

{/* Invoices List */}

{invoices && invoices.length > 0 ? ( invoices.map((invoice) => (

Invoice {invoice.invoice_number} {invoice.bookings?.services?.name} • {invoice.bookings?.services?.category}

{invoice.status}

{/* Invoice Details */}

Invoice Details

Issued:{" "} {new Date(invoice.created_at).toLocaleDateString()}

Due:{" "} {new Date(invoice.due_date).toLocaleDateString()}

{invoice.paid_date && (

Paid:{" "} {new Date(invoice.paid_date).toLocaleDateString()}

)}

{/* Amount Details */}

Amount Details

Subtotal: ${Number.parseFloat(invoice.subtotal).toFixed(2)}

Tax: ${Number.parseFloat(invoice.tax_amount || "0").toFixed(2)}

Total: ${Number.parseFloat(invoice.total_amount).toFixed(2)}

{/* Payment Information */}

Payment Information

{invoice.payment_method && (

Method: {invoice.payment_method}

)}

Status:{" "} {invoice.status.charAt(0).toUpperCase() + invoice.status.slice(1)}

{/* Notes */} {invoice.notes && (

Notes

{invoice.notes}

)} {/* Action Buttons */}

{invoice.status !== "paid" && ( )}

)) ) : (

No invoices found

Your service invoices will appear here after booking.

)}

) } [V0_FILE]typescriptreact:file="app/admin/invoices/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { createClient } from "@/lib/supabase/server" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { FileText, Plus, Calendar, DollarSign, User, AlertTriangle } from "lucide-react" export default async function InvoicesPage() { const supabase = await createClient() const { data, error } = await supabase.auth.getUser() if (error || !data?.user) { redirect("/auth/login") } // Fetch invoices with booking and customer details const { data: invoices } = await supabase .from("invoices") .select(` *, bookings ( id, services (name, category), customers (name, email, phone), preferred_date ) `) .order("created_at", { ascending: false }) // Calculate statistics const totalInvoices = invoices?.length || 0 const paidInvoices = invoices?.filter((i) => i.status === "paid").length || 0 const overdueInvoices = invoices?.filter((i) => i.status === "overdue").length || 0 const totalRevenue = invoices ?.filter((i) => i.status === "paid") .reduce((sum, invoice) => sum + Number.parseFloat(invoice.total_amount), 0) || 0 return (

{/* Header */}

Invoice Management

Manage billing and payments

{/* Statistics Cards */}

Total Invoices

{totalInvoices}

All time

Paid Invoices

{paidInvoices}

{totalInvoices > 0 ? Math.round((paidInvoices / totalInvoices) * 100) : 0}% of total

Overdue

{overdueInvoices}

Need attention

Total Revenue

${totalRevenue.toFixed(2)}

From paid invoices

{/* Invoices List */}

{invoices && invoices.length > 0 ? ( invoices.map((invoice) => (

Invoice {invoice.invoice_number} {invoice.bookings?.services?.name} • {invoice.bookings?.customers?.name}

{invoice.status} {invoice.status === "overdue" && }

{/* Customer Info */}

Customer

{invoice.bookings?.customers?.name}

{invoice.bookings?.customers?.email}

{invoice.bookings?.customers?.phone}

{/* Invoice Details */}

Invoice Details

Issued: {new Date(invoice.created_at).toLocaleDateString()}

Due: {new Date(invoice.due_date).toLocaleDateString()}

{invoice.paid_date && (

Paid: {new Date(invoice.paid_date).toLocaleDateString()}

)}

{/* Amount Details */}

Amount

Subtotal: ${Number.parseFloat(invoice.subtotal).toFixed(2)}

Tax: ${Number.parseFloat(invoice.tax_amount || "0").toFixed(2)}

Total: ${Number.parseFloat(invoice.total_amount).toFixed(2)}

{/* Payment Info */}

Payment

Method:{" "} {invoice.payment_method || "Not specified"}

Status:{" "} {invoice.status.charAt(0).toUpperCase() + invoice.status.slice(1)}

{/* Action Buttons */}

{invoice.status === "draft" && ( )} {invoice.status !== "paid" && ( )}

)) ) : (

No invoices found

Create invoices for completed bookings.

)}

) } [V0_FILE]typescriptreact:file="app/admin/invoices/create/page.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { createClient } from "@/lib/supabase/client" 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" import { FileText, Calculator, Save } from "lucide-react" import { useRouter } from "next/navigation" interface Booking { id: string preferred_date: string estimated_price: string actual_price: string customers: { name: string email: string } services: { name: string base_price: string } } export default function CreateInvoice() { const [bookings, setBookings] = useState([]) const [selectedBooking, setSelectedBooking] = useState(null) const [subtotal, setSubtotal] = useState("") const [taxAmount, setTaxAmount] = useState("") const [totalAmount, setTotalAmount] = useState("") const [dueDate, setDueDate] = useState("") const [notes, setNotes] = useState("") const [isLoading, setIsLoading] = useState(false) const router = useRouter() useEffect(() => { fetchCompletedBookings() }, []) useEffect(() => { calculateTotal() }, [subtotal, taxAmount]) const fetchCompletedBookings = async () => { const supabase = createClient() const { data } = await supabase .from("bookings") .select(` id, preferred_date, estimated_price, actual_price, customers (name, email), services (name, base_price) `) .eq("status", "completed") .is("invoices", null) // Only bookings without invoices if (data) { setBookings(data as Booking[]) } } const calculateTotal = () => { const sub = Number.parseFloat(subtotal || "0") const tax = Number.parseFloat(taxAmount || "0") setTotalAmount((sub + tax).toFixed(2)) } const handleBookingSelect = (bookingId: string) => { const booking = bookings.find((b) => b.id === bookingId) if (booking) { setSelectedBooking(booking) const price = booking.actual_price || booking.estimated_price || booking.services.base_price setSubtotal(price) setTaxAmount((Number.parseFloat(price) * 0.1).toFixed(2)) // 10% tax // Set due date to 30 days from now const due = new Date() due.setDate(due.getDate() + 30) setDueDate(due.toISOString().split("T")[0]) } } const handleCreateInvoice = async (e: React.FormEvent) => { e.preventDefault() if (!selectedBooking) return setIsLoading(true) const supabase = createClient() try { const { error } = await supabase.from("invoices").insert({ booking_id: selectedBooking.id, invoice_number: `INV-${Date.now()}`, // Simple invoice number generation subtotal: Number.parseFloat(subtotal), tax_amount: Number.parseFloat(taxAmount), total_amount: Number.parseFloat(totalAmount), due_date: dueDate, notes: notes || null, status: "draft", }) if (error) throw error router.push("/admin/invoices") } catch (error) { console.error("Error creating invoice:", error) } finally { setIsLoading(false) } } return (

{/* Header */}

Create Invoice

Generate invoice for completed service

{/* Booking Selection */}

Select Booking Choose a completed booking to invoice

Completed Booking

{selectedBooking && (

Booking Details

Customer: {selectedBooking.customers.name}

Email: {selectedBooking.customers.email}

Service: {selectedBooking.services.name}

Date:{" "} {new Date(selectedBooking.preferred_date).toLocaleDateString()}

)}

{/* Invoice Details */} {selectedBooking && (

Invoice Details Set pricing and payment terms

Subtotal ($) setSubtotal(e.target.value)} required />

Tax Amount ($) setTaxAmount(e.target.value)} />

Total Amount ($)

Due Date setDueDate(e.target.value)} required />

Notes (Optional)

setNotes(e.target.value)}
                        rows={4}
                      />
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          )}

{/* Actions */}
          {selectedBooking && (
            <div className="flex gap-2">
              <Button type="submit" disabled={isLoading}>
                <Save className="h-4 w-4 mr-2" />
                {isLoading ? "Creating..." : "Create Invoice"}
              </Button>
              <Button type="button" variant="outline" onClick={() => router.push("/admin/invoices")}>
                Cancel
              </Button>
            </div>
          )}
        </form>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/006_update_invoice_functions.sql" isMerged="true"
-- Update the invoice number generation function to be more robust
CREATE OR REPLACE FUNCTION generate_invoice_number()
RETURNS TEXT AS $$
DECLARE
  next_num INTEGER;
  invoice_num TEXT;
  current_year TEXT;
BEGIN
  current_year := EXTRACT(YEAR FROM NOW())::TEXT;
  
  SELECT COALESCE(MAX(CAST(SUBSTRING(invoice_number FROM 'INV-' || current_year || '-(\d+)') AS INTEGER)), 0) + 1
  INTO next_num
  FROM public.invoices
  WHERE invoice_number LIKE 'INV-' || current_year || '-%';
  
  invoice_num := 'INV-' || current_year || '-' || LPAD(next_num::TEXT, 4, '0');
  RETURN invoice_num;
END;
$$ LANGUAGE plpgsql;

-- Create trigger to auto-generate invoice numbers
CREATE OR REPLACE FUNCTION set_invoice_number()
RETURNS TRIGGER AS $$
BEGIN
  IF NEW.invoice_number IS NULL OR NEW.invoice_number = '' THEN
    NEW.invoice_number := generate_invoice_number();
  END IF;
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Create trigger
DROP TRIGGER IF EXISTS trigger_set_invoice_number ON public.invoices;
CREATE TRIGGER trigger_set_invoice_number
  BEFORE INSERT ON public.invoices
  FOR EACH ROW
  EXECUTE FUNCTION set_invoice_number();

-- Create function to automatically mark invoices as overdue
CREATE OR REPLACE FUNCTION update_overdue_invoices()
RETURNS void AS $$
BEGIN
  UPDATE public.invoices
  SET status = 'overdue'
  WHERE status IN ('draft', 'sent')
    AND due_date < CURRENT_DATE;
END;
$$ LANGUAGE plpgsql;

-- Create indexes for better performance
CREATE INDEX IF NOT EXISTS invoices_status_due_date_idx ON public.invoices(status, due_date);
CREATE INDEX IF NOT EXISTS invoices_invoice_number_idx ON public.invoices(invoice_number);
[V0_FILE]typescriptreact:file="app/api/invoices/route.ts" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"

export async function POST(request: Request) {
  try {
    const supabase = await createClient()

// Check authentication
    const {
      data: { user },
      error: authError,
    } = await supabase.auth.getUser()
    if (authError || !user) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const body = await request.json()
    const { booking_id, subtotal, tax_amount, total_amount, due_date, notes } = body

// Create invoice
    const { data, error } = await supabase
      .from("invoices")
      .insert({
        booking_id,
        subtotal: Number.parseFloat(subtotal),
        tax_amount: Number.parseFloat(tax_amount || "0"),
        total_amount: Number.parseFloat(total_amount),
        due_date,
        notes: notes || null,
        status: "draft",
      })
      .select()
      .single()

if (error) {
      console.error("Database error:", error)
      return NextResponse.json({ error: "Failed to create invoice" }, { status: 500 })
    }

return NextResponse.json({ data })
  } catch (error) {
    console.error("API error:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

export async function PATCH(request: Request) {
  try {
    const supabase = await createClient()

const body = await request.json()
    const { id, status, payment_method, paid_date } = body

const updateData: any = { status }

if (status === "paid") {
      updateData.paid_date = paid_date || new Date().toISOString().split("T")[0]
      if (payment_method) {
        updateData.payment_method = payment_method
      }
    }

// Update invoice
    const { data, error } = await supabase.from("invoices").update(updateData).eq("id", id).select().single()

if (error) {
      console.error("Database error:", error)
      return NextResponse.json({ error: "Failed to update invoice" }, { status: 500 })
    }

return NextResponse.json({ data })
  } catch (error) {
    console.error("API error:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/admin/layout.tsx" isMerged="true"
import type React from "react"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"

export default async function AdminLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const supabase = await createClient()

const { data, error } = await supabase.auth.getUser()
  if (error || !data?.user) {
    redirect("/auth/login")
  }

return <>{children}</>
}
[V0_FILE]json:file="package.json" isQuickEdit="true" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@supabase/ssr": "^0.5.2",
    "@supabase/supabase-js": "^2.46.1",
    "@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",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.25",
    "next-themes": "^0.4.6",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "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": "^0.9.9",
    "zod": "3.25.67"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]sql:file="scripts/007_create_subscription_plans_table.sql" isMerged="true"
-- Create subscription_plans table
CREATE TABLE IF NOT EXISTS public.subscription_plans (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT NOT NULL,
  description TEXT,
  price DECIMAL(10,2) NOT NULL,
  billing_cycle TEXT NOT NULL CHECK (billing_cycle IN ('monthly', 'quarterly', 'yearly')),
  service_frequency TEXT NOT NULL CHECK (service_frequency IN ('monthly', 'quarterly', 'bi-annual', 'annual')),
  included_services UUID[] DEFAULT ARRAY[]::UUID[], -- Array of service IDs
  max_emergency_calls INTEGER DEFAULT 0,
  priority_level TEXT DEFAULT 'normal' CHECK (priority_level IN ('normal', 'high', 'premium')),
  discount_percentage DECIMAL(5,2) DEFAULT 0.00,
  is_active BOOLEAN DEFAULT true,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Enable RLS
ALTER TABLE public.subscription_plans ENABLE ROW LEVEL SECURITY;

-- Create policies for subscription plans (public read access for active plans)
CREATE POLICY "subscription_plans_select_public" ON public.subscription_plans 
  FOR SELECT USING (is_active = true);

-- Insert default subscription plans
INSERT INTO public.subscription_plans (name, description, price, billing_cycle, service_frequency, max_emergency_calls, priority_level, discount_percentage) VALUES
('Basic Maintenance', 'Regular AC maintenance to keep your system running efficiently', 25.00, 'monthly', 'quarterly', 1, 'normal', 10.00),
('Premium Care', 'Comprehensive AC care with priority service and emergency support', 45.00, 'monthly', 'monthly', 3, 'high', 15.00),
('Annual Protection', 'Complete yearly AC protection plan with maximum benefits', 480.00, 'yearly', 'quarterly', 5, 'premium', 20.00);

-- Create indexes
CREATE INDEX IF NOT EXISTS subscription_plans_active_idx ON public.subscription_plans(is_active);
CREATE INDEX IF NOT EXISTS subscription_plans_billing_cycle_idx ON public.subscription_plans(billing_cycle);
[V0_FILE]sql:file="scripts/008_create_customer_subscriptions_table.sql" isMerged="true"
-- Create customer_subscriptions table
CREATE TABLE IF NOT EXISTS public.customer_subscriptions (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  customer_id UUID NOT NULL REFERENCES public.customers(id) ON DELETE CASCADE,
  subscription_plan_id UUID NOT NULL REFERENCES public.subscription_plans(id) ON DELETE RESTRICT,
  status TEXT NOT NULL DEFAULT 'active' CHECK (status IN ('active', 'paused', 'cancelled', 'expired')),
  start_date DATE NOT NULL DEFAULT CURRENT_DATE,
  end_date DATE,
  next_billing_date DATE NOT NULL,
  next_service_date DATE,
  emergency_calls_used INTEGER DEFAULT 0,
  auto_renew BOOLEAN DEFAULT true,
  cancellation_reason TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Enable RLS
ALTER TABLE public.customer_subscriptions ENABLE ROW LEVEL SECURITY;

-- Create policies for customer subscriptions
CREATE POLICY "customer_subscriptions_select_own" ON public.customer_subscriptions 
  FOR SELECT USING (
    customer_id IN (
      SELECT id FROM public.customers 
      WHERE email = current_setting('request.jwt.claims', true)::json->>'email'
    )
  );

CREATE POLICY "customer_subscriptions_insert_own" ON public.customer_subscriptions 
  FOR INSERT WITH CHECK (
    customer_id IN (
      SELECT id FROM public.customers 
      WHERE email = current_setting('request.jwt.claims', true)::json->>'email'
    )
  );

CREATE POLICY "customer_subscriptions_update_own" ON public.customer_subscriptions 
  FOR UPDATE USING (
    customer_id IN (
      SELECT id FROM public.customers 
      WHERE email = current_setting('request.jwt.claims', true)::json->>'email'
    )
  );

-- Create indexes
CREATE INDEX IF NOT EXISTS customer_subscriptions_customer_id_idx ON public.customer_subscriptions(customer_id);
CREATE INDEX IF NOT EXISTS customer_subscriptions_plan_id_idx ON public.customer_subscriptions(subscription_plan_id);
CREATE INDEX IF NOT EXISTS customer_subscriptions_status_idx ON public.customer_subscriptions(status);
CREATE INDEX IF NOT EXISTS customer_subscriptions_next_billing_idx ON public.customer_subscriptions(next_billing_date);
CREATE INDEX IF NOT EXISTS customer_subscriptions_next_service_idx ON public.customer_subscriptions(next_service_date);
[V0_FILE]sql:file="scripts/009_create_subscription_billing_table.sql" isMerged="true"
-- Create subscription_billing table for tracking recurring payments
CREATE TABLE IF NOT EXISTS public.subscription_billing (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  subscription_id UUID NOT NULL REFERENCES public.customer_subscriptions(id) ON DELETE CASCADE,
  billing_period_start DATE NOT NULL,
  billing_period_end DATE NOT NULL,
  amount DECIMAL(10,2) NOT NULL,
  status TEXT NOT NULL DEFAULT 'pending' CHECK (status IN ('pending', 'paid', 'failed', 'refunded')),
  payment_date TIMESTAMP WITH TIME ZONE,
  payment_method TEXT,
  transaction_id TEXT,
  failure_reason TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Enable RLS
ALTER TABLE public.subscription_billing ENABLE ROW LEVEL SECURITY;

-- Create policies for subscription billing
CREATE POLICY "subscription_billing_select_own" ON public.subscription_billing 
  FOR SELECT USING (
    subscription_id IN (
      SELECT cs.id FROM public.customer_subscriptions cs
      JOIN public.customers c ON cs.customer_id = c.id
      WHERE c.email = current_setting('request.jwt.claims', true)::json->>'email'
    )
  );

-- Create indexes
CREATE INDEX IF NOT EXISTS subscription_billing_subscription_id_idx ON public.subscription_billing(subscription_id);
CREATE INDEX IF NOT EXISTS subscription_billing_status_idx ON public.subscription_billing(status);
CREATE INDEX IF NOT EXISTS subscription_billing_period_idx ON public.subscription_billing(billing_period_start, billing_period_end);
[V0_FILE]sql:file="scripts/010_update_bookings_for_subscriptions.sql" isMerged="true"
-- Add subscription support to existing bookings table
ALTER TABLE public.bookings 
ADD COLUMN IF NOT EXISTS subscription_id UUID REFERENCES public.customer_subscriptions(id) ON DELETE SET NULL,
ADD COLUMN IF NOT EXISTS is_subscription_service BOOLEAN DEFAULT false,
ADD COLUMN IF NOT EXISTS service_type TEXT DEFAULT 'one_time' CHECK (service_type IN ('one_time', 'subscription', 'emergency'));

-- Create index for subscription bookings
CREATE INDEX IF NOT EXISTS bookings_subscription_id_idx ON public.bookings(subscription_id);
CREATE INDEX IF NOT EXISTS bookings_service_type_idx ON public.bookings(service_type);

-- Create function to calculate next service date based on subscription frequency
CREATE OR REPLACE FUNCTION calculate_next_service_date(frequency TEXT, current_date DATE DEFAULT CURRENT_DATE)
RETURNS DATE AS $$
BEGIN
  CASE frequency
    WHEN 'monthly' THEN RETURN current_date + INTERVAL '1 month';
    WHEN 'quarterly' THEN RETURN current_date + INTERVAL '3 months';
    WHEN 'bi-annual' THEN RETURN current_date + INTERVAL '6 months';
    WHEN 'annual' THEN RETURN current_date + INTERVAL '1 year';
    ELSE RETURN current_date + INTERVAL '3 months'; -- Default to quarterly
  END CASE;
END;
$$ LANGUAGE plpgsql;

-- Create function to calculate next billing date based on billing cycle
CREATE OR REPLACE FUNCTION calculate_next_billing_date(cycle TEXT, current_date DATE DEFAULT CURRENT_DATE)
RETURNS DATE AS $$
BEGIN
  CASE cycle
    WHEN 'monthly' THEN RETURN current_date + INTERVAL '1 month';
    WHEN 'quarterly' THEN RETURN current_date + INTERVAL '3 months';
    WHEN 'yearly' THEN RETURN current_date + INTERVAL '1 year';
    ELSE RETURN current_date + INTERVAL '1 month'; -- Default to monthly
  END CASE;
END;
$$ LANGUAGE plpgsql;
[V0_FILE]typescriptreact:file="app/admin/subscriptions/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Plus, Edit, Trash2, Users, DollarSign, CalendarDays } from "lucide-react"

export default async function SubscriptionPlansPage() {
  const supabase = await createClient()

const { data, error } = await supabase.auth.getUser()
  if (error || !data?.user) {
    redirect("/auth/login")
  }

// Fetch subscription plans
  const { data: plans } = await supabase
    .from("subscription_plans")
    .select("*")
    .order("created_at", { ascending: false })

// Fetch subscription statistics
  const { data: subscriptionStats } = await supabase
    .from("customer_subscriptions")
    .select("subscription_plan_id, status")

// Calculate plan usage statistics
  const planStats =
    plans?.map((plan) => {
      const planSubscriptions = subscriptionStats?.filter((sub) => sub.subscription_plan_id === plan.id) || []
      const activeCount = planSubscriptions.filter((sub) => sub.status === "active").length
      const totalCount = planSubscriptions.length
      return { ...plan, activeCount, totalCount }
    }) || []

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b bg-card">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-2xl font-bold text-emerald-600">Subscription Plans</h1>
              <p className="text-muted-foreground">Manage subscription plans and pricing</p>
            </div>
            <div className="flex items-center gap-4">
              <Button asChild>
                <a href="/admin/subscriptions/create" className="flex items-center gap-2">
                  <Plus className="h-4 w-4" />
                  Create Plan
                </a>
              </Button>
              <Button variant="outline" asChild>
                <a href="/admin">Back to Dashboard</a>
              </Button>
            </div>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        {/* Plans Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {planStats.map((plan) => (
            <Card key={plan.id} className="relative">
              <CardHeader>
                <div className="flex items-center justify-between">
                  <CardTitle className="text-lg">{plan.name}</CardTitle>
                  <Badge variant={plan.is_active ? "default" : "secondary"}>
                    {plan.is_active ? "Active" : "Inactive"}
                  </Badge>
                </div>
                <CardDescription>{plan.description}</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                {/* Pricing */}
                <div className="text-center p-4 bg-emerald-50 rounded-lg">
                  <div className="text-2xl font-bold text-emerald-600">${Number.parseFloat(plan.price).toFixed(2)}</div>
                  <div className="text-sm text-muted-foreground">per {plan.billing_cycle}</div>
                </div>

{/* Plan Details */}
                <div className="space-y-2 text-sm">
                  <div className="flex justify-between">
                    <span>Service Frequency:</span>
                    <span className="font-medium capitalize">{plan.service_frequency}</span>
                  </div>
                  <div className="flex justify-between">
                    <span>Emergency Calls:</span>
                    <span className="font-medium">{plan.max_emergency_calls}</span>
                  </div>
                  <div className="flex justify-between">
                    <span>Priority Level:</span>
                    <Badge variant="outline" className="text-xs">
                      {plan.priority_level}
                    </Badge>
                  </div>
                  <div className="flex justify-between">
                    <span>Discount:</span>
                    <span className="font-medium">{plan.discount_percentage}%</span>
                  </div>
                </div>

{/* Usage Statistics */}
                <div className="pt-4 border-t">
                  <div className="flex items-center justify-between text-sm">
                    <div className="flex items-center gap-1">
                      <Users className="h-4 w-4 text-muted-foreground" />
                      <span>Active Subscribers</span>
                    </div>
                    <span className="font-medium">{plan.activeCount}</span>
                  </div>
                  <div className="flex items-center justify-between text-sm mt-1">
                    <div className="flex items-center gap-1">
                      <DollarSign className="h-4 w-4 text-muted-foreground" />
                      <span>Monthly Revenue</span>
                    </div>
                    <span className="font-medium">
                      $
                      {(
                        plan.activeCount *
                        Number.parseFloat(plan.price) *
                        (plan.billing_cycle === "yearly" ? 1 / 12 : plan.billing_cycle === "quarterly" ? 1 / 3 : 1)
                      ).toFixed(2)}
                    </span>
                  </div>
                </div>

{/* Actions */}
                <div className="flex gap-2 pt-4">
                  <Button variant="outline" size="sm" className="flex-1 bg-transparent" asChild>
                    <a href={`/admin/subscriptions/edit/${plan.id}`}>
                      <Edit className="h-4 w-4 mr-1" />
                      Edit
                    </a>
                  </Button>
                  <Button variant="outline" size="sm" className="text-red-600 hover:text-red-700 bg-transparent">
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}

{/* Empty State */}
          {planStats.length === 0 && (
            <Card className="col-span-full">
              <CardContent className="flex flex-col items-center justify-center py-12">
                <CalendarDays className="h-12 w-12 text-muted-foreground mb-4" />
                <h3 className="text-lg font-medium mb-2">No subscription plans yet</h3>
                <p className="text-muted-foreground text-center mb-4">
                  Create your first subscription plan to start offering recurring services to customers.
                </p>
                <Button asChild>
                  <a href="/admin/subscriptions/create">
                    <Plus className="h-4 w-4 mr-2" />
                    Create First Plan
                  </a>
                </Button>
              </CardContent>
            </Card>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/subscriptions/create/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { ArrowLeft, Save } from "lucide-react"
import { createClient } from "@/lib/supabase/client"

export default function CreateSubscriptionPlan() {
  const router = useRouter()
  const supabase = createClient()
  const [loading, setLoading] = useState(false)
  const [formData, setFormData] = useState({
    name: "",
    description: "",
    price: "",
    billing_cycle: "monthly",
    service_frequency: "monthly",
    max_emergency_calls: "0",
    priority_level: "normal",
    discount_percentage: "0",
    is_active: true,
  })

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

try {
      const { error } = await supabase.from("subscription_plans").insert([
        {
          name: formData.name,
          description: formData.description,
          price: Number.parseFloat(formData.price),
          billing_cycle: formData.billing_cycle,
          service_frequency: formData.service_frequency,
          max_emergency_calls: Number.parseInt(formData.max_emergency_calls),
          priority_level: formData.priority_level,
          discount_percentage: Number.parseFloat(formData.discount_percentage),
          is_active: formData.is_active,
        },
      ])

if (error) throw error

router.push("/admin/subscriptions")
    } catch (error) {
      console.error("Error creating subscription plan:", error)
      alert("Failed to create subscription plan. Please try again.")
    } finally {
      setLoading(false)
    }
  }

<div className="container mx-auto px-4 py-8">
        <div className="max-w-2xl mx-auto">
          <Card>
            <CardHeader>
              <CardTitle>Plan Details</CardTitle>
              <CardDescription>Configure the subscription plan settings and pricing</CardDescription>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleSubmit} className="space-y-6">
                {/* Basic Information */}
                <div className="space-y-4">
                  <div>
                    <Label htmlFor="name">Plan Name</Label>
                    <Input
                      id="name"
                      value={formData.name}
                      onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                      placeholder="e.g., Premium Care Plan"
                      required
                    />
                  </div>

<div>
                    <Label htmlFor="description">Description</Label>
                    <Textarea
                      id="description"
                      value={formData.description}
                      onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                      placeholder="Describe what's included in this plan..."
                      rows={3}
                    />
                  </div>
                </div>

{/* Pricing */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="price">Price ($)</Label>
                    <Input
                      id="price"
                      type="number"
                      step="0.01"
                      min="0"
                      value={formData.price}
                      onChange={(e) => setFormData({ ...formData, price: e.target.value })}
                      placeholder="25.00"
                      required
                    />
                  </div>

<div>
                    <Label htmlFor="billing_cycle">Billing Cycle</Label>
                    <Select
                      value={formData.billing_cycle}
                      onValueChange={(value) => setFormData({ ...formData, billing_cycle: value })}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="monthly">Monthly</SelectItem>
                        <SelectItem value="quarterly">Quarterly</SelectItem>
                        <SelectItem value="yearly">Yearly</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

{/* Service Configuration */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="service_frequency">Service Frequency</Label>
                    <Select
                      value={formData.service_frequency}
                      onValueChange={(value) => setFormData({ ...formData, service_frequency: value })}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="monthly">Monthly</SelectItem>
                        <SelectItem value="quarterly">Quarterly</SelectItem>
                        <SelectItem value="bi-annual">Bi-Annual</SelectItem>
                        <SelectItem value="annual">Annual</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div>
                    <Label htmlFor="max_emergency_calls">Emergency Calls Included</Label>
                    <Input
                      id="max_emergency_calls"
                      type="number"
                      min="0"
                      value={formData.max_emergency_calls}
                      onChange={(e) => setFormData({ ...formData, max_emergency_calls: e.target.value })}
                      placeholder="0"
                    />
                  </div>
                </div>

{/* Additional Settings */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="priority_level">Priority Level</Label>
                    <Select
                      value={formData.priority_level}
                      onValueChange={(value) => setFormData({ ...formData, priority_level: value })}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="normal">Normal</SelectItem>
                        <SelectItem value="high">High</SelectItem>
                        <SelectItem value="premium">Premium</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div>
                    <Label htmlFor="discount_percentage">Discount Percentage (%)</Label>
                    <Input
                      id="discount_percentage"
                      type="number"
                      step="0.01"
                      min="0"
                      max="100"
                      value={formData.discount_percentage}
                      onChange={(e) => setFormData({ ...formData, discount_percentage: e.target.value })}
                      placeholder="0"
                    />
                  </div>
                </div>

{/* Active Status */}
                <div className="flex items-center space-x-2">
                  <Switch
                    id="is_active"
                    checked={formData.is_active}
                    onCheckedChange={(checked) => setFormData({ ...formData, is_active: checked })}
                  />
                  <Label htmlFor="is_active">Plan is active and available to customers</Label>
                </div>

{/* Submit Button */}
                <div className="flex gap-4 pt-6">
                  <Button type="submit" disabled={loading} className="flex-1">
                    <Save className="h-4 w-4 mr-2" />
                    {loading ? "Creating..." : "Create Plan"}
                  </Button>
                  <Button type="button" variant="outline" onClick={() => router.back()}>
                    Cancel
                  </Button>
                </div>
              </form>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/subscriptions/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { CheckCircle, Calendar, ArrowLeft, Star } from "lucide-react"

export default async function SubscriptionsPage() {
  const supabase = await createClient()

// Fetch all active subscription plans
  const { data: subscriptionPlans } = await supabase
    .from("subscription_plans")
    .select("*")
    .eq("is_active", true)
    .order("price", { ascending: true })

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b bg-card">
        <div className="container mx-auto px-4 py-6">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold text-primary">AC Maintenance Subscriptions</h1>
              <p className="text-muted-foreground mt-2">Choose the perfect maintenance plan for your AC system</p>
            </div>
            <Button variant="outline" asChild>
              <a href="/" className="flex items-center gap-2">
                <ArrowLeft className="h-4 w-4" />
                Back to Home
              </a>
            </Button>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-12">
        {/* Benefits Section */}
        <div className="text-center mb-16">
          <h2 className="text-2xl font-bold mb-4">Why Choose a Subscription Plan?</h2>
          <div className="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
            <div className="text-center">
              <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <CheckCircle className="w-8 h-8 text-primary" />
              </div>
              <h3 className="font-semibold mb-2">Save Money</h3>
              <p className="text-muted-foreground text-sm">Up to 20% savings compared to individual service calls</p>
            </div>
            <div className="text-center">
              <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <Calendar className="w-8 h-8 text-primary" />
              </div>
              <h3 className="font-semibold mb-2">Regular Maintenance</h3>
              <p className="text-muted-foreground text-sm">Scheduled services to prevent costly breakdowns</p>
            </div>
            <div className="text-center">
              <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <Star className="w-8 h-8 text-primary" />
              </div>
              <h3 className="font-semibold mb-2">Priority Service</h3>
              <p className="text-muted-foreground text-sm">Skip the queue with priority booking and support</p>
            </div>
          </div>
        </div>

{/* Subscription Plans */}
        <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
          {subscriptionPlans?.map((plan) => (
            <Card
              key={plan.id}
              className={`relative hover:shadow-lg transition-shadow ${plan.priority_level === "premium" ? "border-primary shadow-md scale-105" : ""}`}
            >
              {plan.priority_level === "premium" && (
                <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
                  <Badge className="bg-primary text-primary-foreground">Most Popular</Badge>
                </div>
              )}
              <CardHeader className="text-center pb-4">
                <CardTitle className="text-2xl">{plan.name}</CardTitle>
                <CardDescription className="text-base">{plan.description}</CardDescription>
                <div className="mt-6">
                  <div className="text-4xl font-bold text-primary">${Number.parseFloat(plan.price).toFixed(2)}</div>
                  <div className="text-muted-foreground">per {plan.billing_cycle}</div>
                  {plan.discount_percentage > 0 && (
                    <Badge variant="secondary" className="mt-2">
                      Save {plan.discount_percentage}%
                    </Badge>
                  )}
                </div>
              </CardHeader>
              <CardContent className="pt-0">
                <ul className="space-y-4 mb-8">
                  <li className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
                    <div>
                      <span className="font-medium">Service Frequency</span>
                      <p className="text-sm text-muted-foreground">
                        Professional maintenance every {plan.service_frequency}
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
                    <div>
                      <span className="font-medium">Emergency Calls</span>
                      <p className="text-sm text-muted-foreground">
                        {plan.max_emergency_calls} emergency calls included per year
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
                    <div>
                      <span className="font-medium">Priority Level</span>
                      <p className="text-sm text-muted-foreground capitalize">
                        {plan.priority_level} priority service and support
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
                    <div>
                      <span className="font-medium">Complete Service</span>
                      <p className="text-sm text-muted-foreground">
                        Filter cleaning, coil maintenance, and performance optimization
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
                    <div>
                      <span className="font-medium">Warranty</span>
                      <p className="text-sm text-muted-foreground">Extended warranty on all maintenance work</p>
                    </div>
                  </li>
                </ul>
                <Button
                  className={`w-full ${plan.priority_level === "premium" ? "" : "variant-outline bg-transparent"}`}
                  variant={plan.priority_level === "premium" ? "default" : "outline"}
                  size="lg"
                  asChild
                >
                  <a href={`/subscriptions/subscribe/${plan.id}`}>Subscribe to {plan.name}</a>
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>

{/* FAQ Section */}
        <div className="mt-20 max-w-4xl mx-auto">
          <h2 className="text-2xl font-bold text-center mb-12">Frequently Asked Questions</h2>
          <div className="grid md:grid-cols-2 gap-8">
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">Can I cancel anytime?</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground">
                  Yes, you can cancel your subscription at any time. Your plan will remain active until the end of your
                  current billing period.
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">What's included in maintenance?</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground">
                  Complete AC system cleaning, filter replacement, coil maintenance, refrigerant level check, and
                  performance optimization.
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">Do you serve all islands?</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground">
                  Yes, our subscription plans are available across all inhabited islands in the Maldives with the same
                  quality service.
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">What if I need extra services?</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground">
                  Subscribers get discounted rates on additional services not covered by their plan, plus priority
                  scheduling.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/011_create_scheduling_functions.sql" isMerged="true"
-- Create function to automatically generate subscription bookings
CREATE OR REPLACE FUNCTION generate_subscription_bookings()
RETURNS void AS $$
DECLARE
  subscription_record RECORD;
  service_record RECORD;
  booking_date DATE;
  booking_time TIME;
BEGIN
  -- Loop through active subscriptions that need service scheduling
  FOR subscription_record IN 
    SELECT cs.*, sp.service_frequency, sp.name as plan_name
    FROM customer_subscriptions cs
    JOIN subscription_plans sp ON cs.subscription_plan_id = sp.id
    WHERE cs.status = 'active' 
    AND cs.next_service_date <= CURRENT_DATE + INTERVAL '7 days'
    AND cs.next_service_date IS NOT NULL
  LOOP
    -- Get a default maintenance service (you can customize this logic)
    SELECT * INTO service_record 
    FROM services 
    WHERE category = 'maintenance' 
    AND is_active = true 
    LIMIT 1;
    
    IF service_record.id IS NOT NULL THEN
      -- Set booking date to next service date
      booking_date := subscription_record.next_service_date;
      
      -- Set a default time (can be customized based on customer preferences)
      booking_time := '09:00:00';
      
      -- Create the booking
      INSERT INTO bookings (
        customer_id,
        service_id,
        subscription_id,
        preferred_date,
        preferred_time,
        status,
        priority,
        is_subscription_service,
        service_type,
        problem_description,
        estimated_price
      ) VALUES (
        subscription_record.customer_id,
        service_record.id,
        subscription_record.id,
        booking_date,
        booking_time,
        'confirmed',
        CASE 
          WHEN subscription_record.priority_level = 'premium' THEN 'high'
          WHEN subscription_record.priority_level = 'high' THEN 'normal'
          ELSE 'low'
        END,
        true,
        'subscription',
        'Scheduled maintenance service for ' || subscription_record.plan_name || ' subscription',
        service_record.base_price
      );
      
      -- Update next service date
      UPDATE customer_subscriptions 
      SET next_service_date = calculate_next_service_date(
        (SELECT service_frequency FROM subscription_plans WHERE id = subscription_record.subscription_plan_id),
        subscription_record.next_service_date
      )
      WHERE id = subscription_record.id;
    END IF;
  END LOOP;
END;
$$ LANGUAGE plpgsql;

-- Create function to assign technicians to subscription bookings
CREATE OR REPLACE FUNCTION assign_technicians_to_bookings()
RETURNS void AS $$
DECLARE
  booking_record RECORD;
  technician_record RECORD;
BEGIN
  -- Loop through confirmed bookings without assigned technicians
  FOR booking_record IN 
    SELECT b.*, c.island
    FROM bookings b
    JOIN customers c ON b.customer_id = c.id
    WHERE b.status = 'confirmed' 
    AND b.technician_notes IS NULL
    AND b.preferred_date >= CURRENT_DATE
    ORDER BY b.priority DESC, b.preferred_date ASC
  LOOP
    -- Find available technician (simple round-robin assignment)
    SELECT * INTO technician_record
    FROM technicians 
    WHERE is_available = true
    ORDER BY RANDOM()
    LIMIT 1;
    
    IF technician_record.id IS NOT NULL THEN
      -- Update booking with technician assignment
      UPDATE bookings 
      SET technician_notes = 'Assigned to technician: ' || technician_record.name || ' (' || technician_record.email || ')'
      WHERE id = booking_record.id;
    END IF;
  END LOOP;
END;
$$ LANGUAGE plpgsql;

-- Create function to handle subscription billing generation
CREATE OR REPLACE FUNCTION generate_subscription_billing()
RETURNS void AS $$
DECLARE
  subscription_record RECORD;
  billing_amount DECIMAL(10,2);
  billing_end_date DATE;
BEGIN
  -- Loop through active subscriptions that need billing
  FOR subscription_record IN 
    SELECT cs.*, sp.price, sp.billing_cycle
    FROM customer_subscriptions cs
    JOIN subscription_plans sp ON cs.subscription_plan_id = sp.id
    WHERE cs.status = 'active' 
    AND cs.next_billing_date <= CURRENT_DATE
  LOOP
    -- Calculate billing amount and period
    billing_amount := subscription_record.price;
    
    -- Calculate billing period end date
    billing_end_date := calculate_next_billing_date(
      subscription_record.billing_cycle,
      subscription_record.next_billing_date
    ) - INTERVAL '1 day';
    
    -- Create billing record
    INSERT INTO subscription_billing (
      subscription_id,
      billing_period_start,
      billing_period_end,
      amount,
      status
    ) VALUES (
      subscription_record.id,
      subscription_record.next_billing_date,
      billing_end_date,
      billing_amount,
      'pending'
    );
    
    -- Update next billing date
    UPDATE customer_subscriptions 
    SET next_billing_date = calculate_next_billing_date(
      subscription_record.billing_cycle,
      subscription_record.next_billing_date
    )
    WHERE id = subscription_record.id;
  END LOOP;
END;
$$ LANGUAGE plpgsql;

-- Create indexes for better performance
CREATE INDEX IF NOT EXISTS customer_subscriptions_next_service_date_idx ON customer_subscriptions(next_service_date) WHERE status = 'active';
CREATE INDEX IF NOT EXISTS customer_subscriptions_next_billing_date_idx ON customer_subscriptions(next_billing_date) WHERE status = 'active';
CREATE INDEX IF NOT EXISTS bookings_technician_assignment_idx ON bookings(status, preferred_date) WHERE technician_notes IS NULL;
[V0_FILE]typescriptreact:file="app/api/scheduling/generate/route.ts" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"

export async function POST() {
  try {
    const supabase = await createClient()

// Check if user is authenticated (optional - this could be called by a cron job)
    const {
      data: { user },
      error: authError,
    } = await supabase.auth.getUser()

// For now, allow unauthenticated access for cron jobs
    // In production, you'd want to secure this with API keys or other authentication

// Generate subscription bookings
    const { error: bookingsError } = await supabase.rpc("generate_subscription_bookings")
    if (bookingsError) {
      console.error("Error generating subscription bookings:", bookingsError)
      throw bookingsError
    }

// Assign technicians to bookings
    const { error: assignmentError } = await supabase.rpc("assign_technicians_to_bookings")
    if (assignmentError) {
      console.error("Error assigning technicians:", assignmentError)
      throw assignmentError
    }

// Generate subscription billing
    const { error: billingError } = await supabase.rpc("generate_subscription_billing")
    if (billingError) {
      console.error("Error generating subscription billing:", billingError)
      throw billingError
    }

return NextResponse.json({
      success: true,
      message: "Scheduling operations completed successfully",
    })
  } catch (error) {
    console.error("Scheduling error:", error)
    return NextResponse.json({ error: "Failed to run scheduling operations" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/admin/scheduling/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Calendar, Clock, Users, Zap, ArrowLeft, Play } from "lucide-react"

export default async function SchedulingPage() {
  const supabase = await createClient()

const { data, error } = await supabase.auth.getUser()
  if (error || !data?.user) {
    redirect("/auth/login")
  }

// Fetch scheduling statistics
  const [upcomingBookingsResult, activeSubscriptionsResult, pendingBillingResult] = await Promise.all([
    supabase
      .from("bookings")
      .select("*, customers(name, island), services(name)")
      .eq("is_subscription_service", true)
      .gte("preferred_date", new Date().toISOString().split("T")[0])
      .order("preferred_date", { ascending: true })
      .limit(10),
    supabase
      .from("customer_subscriptions")
      .select("*, customers(name, email), subscription_plans(name)")
      .eq("status", "active")
      .not("next_service_date", "is", null)
      .lte("next_service_date", new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().split("T")[0])
      .order("next_service_date", { ascending: true }),
    supabase
      .from("subscription_billing")
      .select("*, customer_subscriptions(customers(name))")
      .eq("status", "pending")
      .order("created_at", { ascending: false })
      .limit(5),
  ])

const upcomingBookings = upcomingBookingsResult.data || []
  const activeSubscriptions = activeSubscriptionsResult.data || []
  const pendingBilling = pendingBillingResult.data || []

const handleRunScheduling = async () => {
    "use server"

try {
      const response = await fetch(
        `${process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000"}/api/scheduling/generate`,
        {
          method: "POST",
        },
      )

if (!response.ok) {
        throw new Error("Failed to run scheduling")
      }

// Redirect to refresh the page
      redirect("/admin/scheduling")
    } catch (error) {
      console.error("Error running scheduling:", error)
    }
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b bg-card">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-2xl font-bold text-emerald-600">Automated Scheduling</h1>
              <p className="text-muted-foreground">Manage subscription bookings and automated scheduling</p>
            </div>
            <div className="flex items-center gap-4">
              <form action={handleRunScheduling}>
                <Button type="submit" className="flex items-center gap-2">
                  <Play className="h-4 w-4" />
                  Run Scheduling
                </Button>
              </form>
              <Button variant="outline" asChild>
                <a href="/admin" className="flex items-center gap-2">
                  <ArrowLeft className="h-4 w-4" />
                  Back to Dashboard
                </a>
              </Button>
            </div>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        {/* Stats Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Upcoming Subscription Services</CardTitle>
              <Calendar className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{upcomingBookings.length}</div>
              <p className="text-xs text-muted-foreground">Next 30 days</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Due for Scheduling</CardTitle>
              <Clock className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{activeSubscriptions.length}</div>
              <p className="text-xs text-muted-foreground">Next 7 days</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Pending Billing</CardTitle>
              <Users className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{pendingBilling.length}</div>
              <p className="text-xs text-muted-foreground">Awaiting payment</p>
            </CardContent>
          </Card>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Upcoming Subscription Bookings */}
          <Card>
            <CardHeader>
              <CardTitle>Upcoming Subscription Services</CardTitle>
              <CardDescription>Automatically scheduled maintenance visits</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {upcomingBookings.length > 0 ? (
                  upcomingBookings.map((booking) => (
                    <div key={booking.id} className="flex items-center justify-between p-3 rounded-lg border">
                      <div className="flex items-center gap-3">
                        <div className="flex items-center justify-center w-10 h-10 rounded-full bg-emerald-100">
                          <Calendar className="h-5 w-5 text-emerald-600" />
                        </div>
                        <div>
                          <p className="font-medium">{booking.customers?.name}</p>
                          <p className="text-sm text-muted-foreground">{booking.services?.name}</p>
                          <p className="text-xs text-muted-foreground">{booking.customers?.island}</p>
                        </div>
                      </div>
                      <div className="text-right">
                        <p className="text-sm font-medium">{new Date(booking.preferred_date).toLocaleDateString()}</p>
                        <p className="text-xs text-muted-foreground">{booking.preferred_time}</p>
                        <Badge variant="secondary" className="mt-1">
                          {booking.status}
                        </Badge>
                      </div>
                    </div>
                  ))
                ) : (
                  <p className="text-sm text-muted-foreground text-center py-8">
                    No upcoming subscription services scheduled
                  </p>
                )}
              </div>
            </CardContent>
          </Card>

{/* Subscriptions Due for Scheduling */}
          <Card>
            <CardHeader>
              <CardTitle>Due for Scheduling</CardTitle>
              <CardDescription>Subscriptions that need service scheduling</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {activeSubscriptions.length > 0 ? (
                  activeSubscriptions.map((subscription) => (
                    <div key={subscription.id} className="flex items-center justify-between p-3 rounded-lg border">
                      <div className="flex items-center gap-3">
                        <div className="flex items-center justify-center w-10 h-10 rounded-full bg-orange-100">
                          <Clock className="h-5 w-5 text-orange-600" />
                        </div>
                        <div>
                          <p className="font-medium">{subscription.customers?.name}</p>
                          <p className="text-sm text-muted-foreground">{subscription.subscription_plans?.name}</p>
                          <p className="text-xs text-muted-foreground">{subscription.customers?.email}</p>
                        </div>
                      </div>
                      <div className="text-right">
                        <p className="text-sm font-medium">
                          {new Date(subscription.next_service_date).toLocaleDateString()}
                        </p>
                        <Badge variant="outline" className="mt-1">
                          {subscription.status}
                        </Badge>
                      </div>
                    </div>
                  ))
                ) : (
                  <p className="text-sm text-muted-foreground text-center py-8">No subscriptions due for scheduling</p>
                )}
              </div>
            </CardContent>
          </Card>
        </div>

{/* Scheduling Information */}
        <Card className="mt-6">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Zap className="h-5 w-5 text-emerald-600" />
              Automated Scheduling System
            </CardTitle>
            <CardDescription>How the automated scheduling works</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid md:grid-cols-3 gap-6">
              <div className="text-center">
                <div className="w-12 h-12 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-3">
                  <span className="text-lg font-bold text-emerald-600">1</span>
                </div>
                <h4 className="font-semibold mb-2">Monitor Subscriptions</h4>
                <p className="text-sm text-muted-foreground">
                  System checks for subscriptions due for service within the next 7 days
                </p>
              </div>
              <div className="text-center">
                <div className="w-12 h-12 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-3">
                  <span className="text-lg font-bold text-emerald-600">2</span>
                </div>
                <h4 className="font-semibold mb-2">Create Bookings</h4>
                <p className="text-sm text-muted-foreground">
                  Automatically generates confirmed bookings based on subscription frequency
                </p>
              </div>
              <div className="text-center">
                <div className="w-12 h-12 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-3">
                  <span className="text-lg font-bold text-emerald-600">3</span>
                </div>
                <h4 className="font-semibold mb-2">Assign Technicians</h4>
                <p className="text-sm text-muted-foreground">
                  Assigns available technicians and updates next service dates
                </p>
              </div>
            </div>
            <div className="bg-muted/50 p-4 rounded-lg mt-6">
              <p className="text-sm text-muted-foreground">
                <strong>Note:</strong> The scheduling system runs automatically, but you can also trigger it manually
                using the "Run Scheduling" button above. This is useful for testing or handling urgent scheduling needs.
              </p>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/billing/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { DollarSign, Calendar, Users, AlertCircle, ArrowLeft, Download } from "lucide-react"

export default async function BillingPage() {
  const supabase = await createClient()

const { data, error } = await supabase.auth.getUser()
  if (error || !data?.user) {
    redirect("/auth/login")
  }

// Fetch billing statistics and data
  const [billingResult, subscriptionsResult, revenueResult] = await Promise.all([
    supabase
      .from("subscription_billing")
      .select(`
        *,
        customer_subscriptions (
          customers (name, email, island),
          subscription_plans (name, billing_cycle)
        )
      `)
      .order("created_at", { ascending: false })
      .limit(20),
    supabase.from("customer_subscriptions").select("status").eq("status", "active"),
    supabase.from("subscription_billing").select("amount, status").eq("status", "paid"),
  ])

const billingRecords = billingResult.data || []
  const activeSubscriptions = subscriptionsResult.data || []
  const paidBilling = revenueResult.data || []

// Calculate statistics
  const totalRevenue = paidBilling.reduce((sum, bill) => sum + Number.parseFloat(bill.amount), 0)
  const pendingBills = billingRecords.filter((b) => b.status === "pending").length
  const failedBills = billingRecords.filter((b) => b.status === "failed").length
  const monthlyRevenue = paidBilling
    .filter((bill) => {
      const billDate = new Date(bill.created_at || new Date())
      const currentMonth = new Date().getMonth()
      const currentYear = new Date().getFullYear()
      return billDate.getMonth() === currentMonth && billDate.getFullYear() === currentYear
    })
    .reduce((sum, bill) => sum + Number.parseFloat(bill.amount), 0)

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b bg-card">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-2xl font-bold text-emerald-600">Subscription Billing</h1>
              <p className="text-muted-foreground">Manage subscription payments and billing</p>
            </div>
            <div className="flex items-center gap-4">
              <Button variant="outline" className="flex items-center gap-2 bg-transparent">
                <Download className="h-4 w-4" />
                Export Report
              </Button>
              <Button variant="outline" asChild>
                <a href="/admin" className="flex items-center gap-2">
                  <ArrowLeft className="h-4 w-4" />
                  Back to Dashboard
                </a>
              </Button>
            </div>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        {/* Stats Grid */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
              <DollarSign className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">${totalRevenue.toFixed(2)}</div>
              <p className="text-xs text-muted-foreground">All-time subscription revenue</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">This Month</CardTitle>
              <Calendar className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">${monthlyRevenue.toFixed(2)}</div>
              <p className="text-xs text-muted-foreground">Current month revenue</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Active Subscriptions</CardTitle>
              <Users className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{activeSubscriptions.length}</div>
              <p className="text-xs text-muted-foreground">Recurring customers</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Pending Bills</CardTitle>
              <AlertCircle className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{pendingBills}</div>
              <p className="text-xs text-muted-foreground">{failedBills} failed payments</p>
            </CardContent>
          </Card>
        </div>

{/* Billing Records */}
        <Card>
          <CardHeader>
            <CardTitle>Recent Billing Records</CardTitle>
            <CardDescription>Subscription billing history and payment status</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {billingRecords.length > 0 ? (
                billingRecords.map((bill) => (
                  <div key={bill.id} className="flex items-center justify-between p-4 rounded-lg border">
                    <div className="flex items-center gap-4">
                      <div className="flex items-center justify-center w-12 h-12 rounded-full bg-emerald-100">
                        <DollarSign className="h-6 w-6 text-emerald-600" />
                      </div>
                      <div>
                        <p className="font-medium">{bill.customer_subscriptions?.customers?.name}</p>
                        <p className="text-sm text-muted-foreground">
                          {bill.customer_subscriptions?.subscription_plans?.name} Plan
                        </p>
                        <p className="text-xs text-muted-foreground">
                          {bill.customer_subscriptions?.customers?.email} •{" "}
                          {bill.customer_subscriptions?.customers?.island}
                        </p>
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="flex items-center gap-2 mb-1">
                        <span className="font-bold">${Number.parseFloat(bill.amount).toFixed(2)}</span>
                        <Badge
                          variant={
                            bill.status === "paid" ? "default" : bill.status === "pending" ? "secondary" : "destructive"
                          }
                        >
                          {bill.status}
                        </Badge>
                      </div>
                      <p className="text-xs text-muted-foreground">
                        {new Date(bill.billing_period_start).toLocaleDateString()} -{" "}
                        {new Date(bill.billing_period_end).toLocaleDateString()}
                      </p>
                      {bill.payment_date && (
                        <p className="text-xs text-muted-foreground">
                          Paid: {new Date(bill.payment_date).toLocaleDateString()}
                        </p>
                      )}
                    </div>
                  </div>
                ))
              ) : (
                <div className="text-center py-12">
                  <DollarSign className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
                  <h3 className="text-lg font-medium mb-2">No billing records</h3>
                  <p className="text-muted-foreground">
                    Billing records will appear here as subscriptions are processed
                  </p>
                </div>
              )}
            </div>
          </CardContent>
        </Card>

{/* Payment Actions */}
        <Card className="mt-6">
          <CardHeader>
            <CardTitle>Billing Actions</CardTitle>
            <CardDescription>Manage subscription billing and payments</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid md:grid-cols-3 gap-4">
              <Button variant="outline" className="flex items-center gap-2 bg-transparent">
                <Calendar className="h-4 w-4" />
                Process Monthly Billing
              </Button>
              <Button variant="outline" className="flex items-center gap-2 bg-transparent">
                <AlertCircle className="h-4 w-4" />
                Retry Failed Payments
              </Button>
              <Button variant="outline" className="flex items-center gap-2 bg-transparent">
                <Download className="h-4 w-4" />
                Generate Invoice Report
              </Button>
            </div>
            <div className="bg-muted/50 p-4 rounded-lg">
              <p className="text-sm text-muted-foreground">
                <strong>Note:</strong> Billing is processed automatically based on subscription billing cycles. Use the
                manual actions above for special cases or to retry failed payments.
              </p>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/customer/billing/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { DollarSign, Calendar, CreditCard, ArrowLeft, Download } from "lucide-react"

export default async function CustomerBillingPage() {
  const supabase = await createClient()

const { data, error } = await supabase.auth.getUser()
  if (error || !data?.user) {
    redirect("/auth/login")
  }

// Get customer information
  const { data: customer } = await supabase.from("customers").select("*").eq("email", data.user.email).single()

if (!customer) {
    redirect("/auth/login")
  }

// Fetch customer's subscription billing
  const { data: billingRecords } = await supabase
    .from("subscription_billing")
    .select(`
      *,
      customer_subscriptions (
        subscription_plans (name, billing_cycle)
      )
    `)
    .in(
      "subscription_id",
      await supabase
        .from("customer_subscriptions")
        .select("id")
        .eq("customer_id", customer.id)
        .then((res) => res.data?.map((s) => s.id) || []),
    )
    .order("created_at", { ascending: false })

// Fetch active subscriptions for billing summary
  const { data: activeSubscriptions } = await supabase
    .from("customer_subscriptions")
    .select(`
      *,
      subscription_plans (name, price, billing_cycle)
    `)
    .eq("customer_id", customer.id)
    .eq("status", "active")

const totalPaid =
    billingRecords?.filter((b) => b.status === "paid").reduce((sum, bill) => sum + Number.parseFloat(bill.amount), 0) ||
    0
  const pendingAmount =
    billingRecords
      ?.filter((b) => b.status === "pending")
      .reduce((sum, bill) => sum + Number.parseFloat(bill.amount), 0) || 0
  const monthlyTotal =
    activeSubscriptions?.reduce((sum, sub) => {
      const price = Number.parseFloat(sub.subscription_plans?.price || "0")
      const cycle = sub.subscription_plans?.billing_cycle
      if (cycle === "yearly") return sum + price / 12
      if (cycle === "quarterly") return sum + price / 3
      return sum + price
    }, 0) || 0

<div className="container mx-auto px-4 py-8">
        {/* Billing Summary */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Monthly Total</CardTitle>
              <Calendar className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">${monthlyTotal.toFixed(2)}</div>
              <p className="text-xs text-muted-foreground">Estimated monthly cost</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Total Paid</CardTitle>
              <DollarSign className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">${totalPaid.toFixed(2)}</div>
              <p className="text-xs text-muted-foreground">All-time payments</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Pending Amount</CardTitle>
              <CreditCard className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">${pendingAmount.toFixed(2)}</div>
              <p className="text-xs text-muted-foreground">Outstanding balance</p>
            </CardContent>
          </Card>
        </div>

{/* Active Subscriptions */}
        {activeSubscriptions && activeSubscriptions.length > 0 && (
          <Card className="mb-8">
            <CardHeader>
              <CardTitle>Active Subscriptions</CardTitle>
              <CardDescription>Your current subscription plans and billing</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {activeSubscriptions.map((subscription) => (
                  <div key={subscription.id} className="flex items-center justify-between p-4 rounded-lg border">
                    <div className="flex items-center gap-3">
                      <div className="flex items-center justify-center w-10 h-10 rounded-full bg-emerald-100">
                        <Calendar className="h-5 w-5 text-emerald-600" />
                      </div>
                      <div>
                        <p className="font-medium">{subscription.subscription_plans?.name}</p>
                        <p className="text-sm text-muted-foreground">
                          Next billing:{" "}
                          {subscription.next_billing_date
                            ? new Date(subscription.next_billing_date).toLocaleDateString()
                            : "TBD"}
                        </p>
                      </div>
                    </div>
                    <div className="text-right">
                      <p className="font-bold">
                        ${Number.parseFloat(subscription.subscription_plans?.price || "0").toFixed(2)}
                      </p>
                      <p className="text-sm text-muted-foreground">
                        per {subscription.subscription_plans?.billing_cycle}
                      </p>
                      <Badge variant="default" className="mt-1">
                        Active
                      </Badge>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        )}

{/* Billing History */}
        <Card>
          <CardHeader>
            <div className="flex items-center justify-between">
              <div>
                <CardTitle>Billing History</CardTitle>
                <CardDescription>Your subscription payment history</CardDescription>
              </div>
              <Button variant="outline" size="sm" className="flex items-center gap-2 bg-transparent">
                <Download className="h-4 w-4" />
                Download
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {billingRecords && billingRecords.length > 0 ? (
                billingRecords.map((bill) => (
                  <div key={bill.id} className="flex items-center justify-between p-4 rounded-lg border">
                    <div className="flex items-center gap-3">
                      <div className="flex items-center justify-center w-10 h-10 rounded-full bg-emerald-100">
                        <DollarSign className="h-5 w-5 text-emerald-600" />
                      </div>
                      <div>
                        <p className="font-medium">{bill.customer_subscriptions?.subscription_plans?.name} Plan</p>
                        <p className="text-sm text-muted-foreground">
                          Billing Period: {new Date(bill.billing_period_start).toLocaleDateString()} -{" "}
                          {new Date(bill.billing_period_end).toLocaleDateString()}
                        </p>
                        {bill.payment_date && (
                          <p className="text-xs text-muted-foreground">
                            Paid on {new Date(bill.payment_date).toLocaleDateString()}
                          </p>
                        )}
                      </div>
                    </div>
                    <div className="text-right">
                      <p className="font-bold">${Number.parseFloat(bill.amount).toFixed(2)}</p>
                      <Badge
                        variant={
                          bill.status === "paid" ? "default" : bill.status === "pending" ? "secondary" : "destructive"
                        }
                      >
                        {bill.status}
                      </Badge>
                      {bill.status === "pending" && (
                        <Button size="sm" className="mt-2">
                          Pay Now
                        </Button>
                      )}
                    </div>
                  </div>
                ))
              ) : (
                <div className="text-center py-12">
                  <CreditCard className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
                  <h3 className="text-lg font-medium mb-2">No billing history</h3>
                  <p className="text-muted-foreground mb-4">Your subscription billing history will appear here</p>
                  <Button asChild>
                    <a href="/subscriptions">Browse Subscription Plans</a>
                  </Button>
                </div>
              )}
            </div>
          </CardContent>
        </Card>

{/* Payment Information */}
        <Card className="mt-6">
          <CardHeader>
            <CardTitle>Payment Information</CardTitle>
            <CardDescription>Manage your payment methods and billing preferences</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="bg-muted/50 p-4 rounded-lg">
              <h4 className="font-semibold mb-2">Payment Methods</h4>
              <p className="text-sm text-muted-foreground mb-4">
                Currently, payments are processed manually. Our team will contact you for payment when bills are due.
              </p>
              <div className="flex gap-2">
                <Button variant="outline" size="sm" className="bg-transparent">
                  Add Payment Method
                </Button>
                <Button variant="outline" size="sm" className="bg-transparent">
                  Update Billing Info
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/billing/process/route.ts" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"

export async function POST() {
  try {
    const supabase = await createClient()

// Check if user is authenticated (optional for cron jobs)
    const {
      data: { user },
      error: authError,
    } = await supabase.auth.getUser()

// Process subscription billing
    const { error: billingError } = await supabase.rpc("generate_subscription_billing")
    if (billingError) {
      console.error("Error generating subscription billing:", billingError)
      throw billingError
    }

// Get pending billing records to process
    const { data: pendingBills, error: fetchError } = await supabase
      .from("subscription_billing")
      .select(`
        *,
        customer_subscriptions (
          customers (name, email),
          subscription_plans (name)
        )
      `)
      .eq("status", "pending")
      .lte("billing_period_start", new Date().toISOString().split("T")[0])

if (fetchError) throw fetchError

// In a real implementation, you would integrate with a payment processor here
    // For now, we'll just log the billing records that need processing
    console.log(`Found ${pendingBills?.length || 0} pending bills to process`)

return NextResponse.json({
      success: true,
      message: `Processed billing for ${pendingBills?.length || 0} records`,
      pendingBills: pendingBills?.length || 0,
    })
  } catch (error) {
    console.error("Billing processing error:", error)
    return NextResponse.json({ error: "Failed to process billing" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/billing/update-status/route.ts" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { type NextRequest, NextResponse } from "next/server"

export async function POST(request: NextRequest) {
  try {
    const supabase = await createClient()
    const { billingId, status, paymentMethod, transactionId } = await request.json()

// Validate required fields
    if (!billingId || !status) {
      return NextResponse.json({ error: "Missing required fields: billingId and status" }, { status: 400 })
    }

// Update billing record
    const updateData: any = {
      status,
      updated_at: new Date().toISOString(),
    }

if (status === "paid") {
      updateData.payment_date = new Date().toISOString()
      if (paymentMethod) updateData.payment_method = paymentMethod
      if (transactionId) updateData.transaction_id = transactionId
    }

if (status === "failed" && request.body) {
      const { failure_reason } = await request.json()
      if (failure_reason) updateData.failure_reason = failure_reason
    }

const { error } = await supabase.from("subscription_billing").update(updateData).eq("id", billingId)

if (error) throw error

return NextResponse.json({
      success: true,
      message: `Billing status updated to ${status}`,
    })
  } catch (error) {
    console.error("Error updating billing status:", error)
    return NextResponse.json({ error: "Failed to update billing status" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/admin/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { CalendarDays, Users, Wrench, DollarSign, Clock, AlertTriangle, CreditCard } from "lucide-react"

export default async function AdminDashboard() {
  const supabase = await createClient()

const { data, error } = await supabase.auth.getUser()
  if (error || !data?.user) {
    redirect("/auth/login")
  }

// Fetch dashboard statistics
  const [bookingsResult, customersResult, techniciansResult, revenueResult, subscriptionsResult] = await Promise.all([
    supabase.from("bookings").select("status, created_at, estimated_price, priority"),
    supabase.from("customers").select("id"),
    supabase.from("technicians").select("id, is_available"),
    supabase.from("invoices").select("total_amount, status").eq("status", "paid"),
    supabase.from("customer_subscriptions").select("status").eq("status", "active"),
  ])

const bookings = bookingsResult.data || []
  const customers = customersResult.data || []
  const technicians = techniciansResult.data || []
  const paidInvoices = revenueResult.data || []
  const activeSubscriptions = subscriptionsResult.data || []

// Calculate statistics
  const totalBookings = bookings.length
  const pendingBookings = bookings.filter((b) => b.status === "pending").length
  const completedBookings = bookings.filter((b) => b.status === "completed").length
  const totalCustomers = customers.length
  const availableTechnicians = technicians.filter((t) => t.is_available).length
  const totalRevenue = paidInvoices.reduce((sum, invoice) => sum + Number.parseFloat(invoice.total_amount || "0"), 0)
  const totalActiveSubscriptions = activeSubscriptions.length

// Recent bookings (last 5)
  const recentBookings = bookings
    .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
    .slice(0, 5)

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b bg-card">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-2xl font-bold text-emerald-600">HETA Maldives</h1>
              <p className="text-muted-foreground">Admin Dashboard</p>
            </div>
            <div className="flex items-center gap-4">
              <span className="text-sm text-muted-foreground">Welcome, {data.user.email}</span>
              <form action="/auth/signout" method="post">
                <button className="text-sm text-red-600 hover:text-red-700">Sign Out</button>
              </form>
            </div>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        {/* Stats Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Total Bookings</CardTitle>
              <CalendarDays className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{totalBookings}</div>
              <p className="text-xs text-muted-foreground">
                {pendingBookings} pending, {completedBookings} completed
              </p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Total Customers</CardTitle>
              <Users className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{totalCustomers}</div>
              <p className="text-xs text-muted-foreground">Registered customers</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Available Technicians</CardTitle>
              <Wrench className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{availableTechnicians}</div>
              <p className="text-xs text-muted-foreground">Out of {technicians.length} total</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
              <DollarSign className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">${totalRevenue.toFixed(2)}</div>
              <p className="text-xs text-muted-foreground">From paid invoices</p>
            </CardContent>
          </Card>

{/* Active Subscriptions */}
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Active Subscriptions</CardTitle>
              <CalendarDays className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{totalActiveSubscriptions}</div>
              <p className="text-xs text-muted-foreground">Recurring customers</p>
            </CardContent>
          </Card>
        </div>

{/* Quick Actions & Recent Bookings */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Quick Actions */}
          <Card>
            <CardHeader>
              <CardTitle>Quick Actions</CardTitle>
              <CardDescription>Common administrative tasks</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <a
                  href="/admin/bookings"
                  className="flex items-center gap-2 p-3 rounded-lg border hover:bg-accent transition-colors"
                >
                  <CalendarDays className="h-4 w-4 text-emerald-600" />
                  <span className="text-sm font-medium">Manage Bookings</span>
                </a>
                <a
                  href="/admin/customers"
                  className="flex items-center gap-2 p-3 rounded-lg border hover:bg-accent transition-colors"
                >
                  <Users className="h-4 w-4 text-emerald-600" />
                  <span className="text-sm font-medium">View Customers</span>
                </a>
                <a
                  href="/admin/technicians"
                  className="flex items-center gap-2 p-3 rounded-lg border hover:bg-accent transition-colors"
                >
                  <Wrench className="h-4 w-4 text-emerald-600" />
                  <span className="text-sm font-medium">Manage Staff</span>
                </a>
                <a
                  href="/admin/invoices"
                  className="flex items-center gap-2 p-3 rounded-lg border hover:bg-accent transition-colors"
                >
                  <DollarSign className="h-4 w-4 text-emerald-600" />
                  <span className="text-sm font-medium">View Invoices</span>
                </a>
                <a
                  href="/admin/subscriptions"
                  className="flex items-center gap-2 p-3 rounded-lg border hover:bg-accent transition-colors"
                >
                  <CalendarDays className="h-4 w-4 text-emerald-600" />
                  <span className="text-sm font-medium">Subscriptions</span>
                </a>
                <a
                  href="/admin/scheduling"
                  className="flex items-center gap-2 p-3 rounded-lg border hover:bg-accent transition-colors"
                >
                  <Clock className="h-4 w-4 text-emerald-600" />
                  <span className="text-sm font-medium">Scheduling</span>
                </a>
                <a
                  href="/admin/billing"
                  className="flex items-center gap-2 p-3 rounded-lg border hover:bg-accent transition-colors"
                >
                  <CreditCard className="h-4 w-4 text-emerald-600" />
                  <span className="text-sm font-medium">Billing</span>
                </a>
                <a
                  href="/admin/manage-subscriptions"
                  className="flex items-center gap-2 p-3 rounded-lg border hover:bg-accent transition-colors"
                >
                  <Users className="h-4 w-4 text-emerald-600" />
                  <span className="text-sm font-medium">Manage Subs</span>
                </a>
              </div>
            </CardContent>
          </Card>

{/* Recent Bookings */}
          <Card>
            <CardHeader>
              <CardTitle>Recent Bookings</CardTitle>
              <CardDescription>Latest service requests</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {recentBookings.length > 0 ? (
                  recentBookings.map((booking, index) => (
                    <div key={index} className="flex items-center justify-between p-3 rounded-lg border">
                      <div className="flex items-center gap-3">
                        <div className="flex items-center justify-center w-8 h-8 rounded-full bg-emerald-100">
                          {booking.priority === "emergency" ? (
                            <AlertTriangle className="h-4 w-4 text-red-600" />
                          ) : (
                            <Clock className="h-4 w-4 text-emerald-600" />
                          )}
                        </div>
                        <div>
                          <p className="text-sm font-medium">Booking #{booking.id?.slice(0, 8)}</p>
                          <p className="text-xs text-muted-foreground">
                            {new Date(booking.created_at).toLocaleDateString()}
                          </p>
                        </div>
                      </div>
                      <div className="text-right">
                        <Badge
                          variant={
                            booking.status === "pending"
                              ? "secondary"
                              : booking.status === "confirmed"
                                ? "default"
                                : booking.status === "completed"
                                  ? "default"
                                  : "destructive"
                          }
                        >
                          {booking.status}
                        </Badge>
                        {booking.estimated_price && (
                          <p className="text-xs text-muted-foreground mt-1">
                            ${Number.parseFloat(booking.estimated_price).toFixed(2)}
                          </p>
                        )}
                      </div>
                    </div>
                  ))
                ) : (
                  <p className="text-sm text-muted-foreground text-center py-4">No recent bookings</p>
                )}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/manage-subscriptions/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Users, Calendar, DollarSign, ArrowLeft, Pause, Play, X, Edit } from "lucide-react"

export default async function ManageSubscriptionsPage() {
  const supabase = await createClient()

const { data, error } = await supabase.auth.getUser()
  if (error || !data?.user) {
    redirect("/auth/login")
  }

// Fetch all customer subscriptions with customer and plan details
  const { data: subscriptions } = await supabase
    .from("customer_subscriptions")
    .select(`
      *,
      customers (name, email, phone, island),
      subscription_plans (name, price, billing_cycle, service_frequency)
    `)
    .order("created_at", { ascending: false })

// Group subscriptions by status
  const activeSubscriptions = subscriptions?.filter((s) => s.status === "active") || []
  const pausedSubscriptions = subscriptions?.filter((s) => s.status === "paused") || []
  const cancelledSubscriptions = subscriptions?.filter((s) => s.status === "cancelled") || []

<div className="container mx-auto px-4 py-8">
        {/* Stats Overview */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Active Subscriptions</CardTitle>
              <Users className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-emerald-600">{activeSubscriptions.length}</div>
              <p className="text-xs text-muted-foreground">Currently active</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Paused Subscriptions</CardTitle>
              <Pause className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-orange-600">{pausedSubscriptions.length}</div>
              <p className="text-xs text-muted-foreground">Temporarily paused</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Cancelled Subscriptions</CardTitle>
              <X className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-red-600">{cancelledSubscriptions.length}</div>
              <p className="text-xs text-muted-foreground">Cancelled accounts</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Monthly Revenue</CardTitle>
              <DollarSign className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-emerald-600">
                $
                {activeSubscriptions
                  .reduce((sum, sub) => {
                    const price = Number.parseFloat(sub.subscription_plans?.price || "0")
                    const cycle = sub.subscription_plans?.billing_cycle
                    if (cycle === "yearly") return sum + price / 12
                    if (cycle === "quarterly") return sum + price / 3
                    return sum + price
                  }, 0)
                  .toFixed(2)}
              </div>
              <p className="text-xs text-muted-foreground">Estimated monthly</p>
            </CardContent>
          </Card>
        </div>

{/* Active Subscriptions */}
        <Card className="mb-8">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Users className="h-5 w-5 text-emerald-600" />
              Active Subscriptions ({activeSubscriptions.length})
            </CardTitle>
            <CardDescription>Currently active customer subscription accounts</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {activeSubscriptions.length > 0 ? (
                activeSubscriptions.map((subscription) => (
                  <div key={subscription.id} className="flex items-center justify-between p-4 rounded-lg border">
                    <div className="flex items-center gap-4">
                      <div className="flex items-center justify-center w-12 h-12 rounded-full bg-emerald-100">
                        <Users className="h-6 w-6 text-emerald-600" />
                      </div>
                      <div>
                        <p className="font-medium">{subscription.customers?.name}</p>
                        <p className="text-sm text-muted-foreground">{subscription.subscription_plans?.name} Plan</p>
                        <p className="text-xs text-muted-foreground">
                          {subscription.customers?.email} • {subscription.customers?.island}
                        </p>
                      </div>
                    </div>
                    <div className="flex items-center gap-4">
                      <div className="text-right">
                        <p className="font-bold">
                          ${Number.parseFloat(subscription.subscription_plans?.price || "0").toFixed(2)}
                        </p>
                        <p className="text-sm text-muted-foreground">
                          per {subscription.subscription_plans?.billing_cycle}
                        </p>
                        <p className="text-xs text-muted-foreground">
                          Next: {new Date(subscription.next_billing_date).toLocaleDateString()}
                        </p>
                      </div>
                      <div className="flex gap-2">
                        <Button variant="outline" size="sm" className="bg-transparent">
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button variant="outline" size="sm" className="bg-transparent">
                          <Pause className="h-4 w-4" />
                        </Button>
                        <Button variant="outline" size="sm" className="text-red-600 hover:text-red-700 bg-transparent">
                          <X className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  </div>
                ))
              ) : (
                <div className="text-center py-8">
                  <Users className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
                  <h3 className="text-lg font-medium mb-2">No active subscriptions</h3>
                  <p className="text-muted-foreground">Active customer subscriptions will appear here</p>
                </div>
              )}
            </div>
          </CardContent>
        </Card>

{/* Paused Subscriptions */}
        {pausedSubscriptions.length > 0 && (
          <Card className="mb-8">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Pause className="h-5 w-5 text-orange-600" />
                Paused Subscriptions ({pausedSubscriptions.length})
              </CardTitle>
              <CardDescription>Temporarily paused subscription accounts</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {pausedSubscriptions.map((subscription) => (
                  <div key={subscription.id} className="flex items-center justify-between p-4 rounded-lg border">
                    <div className="flex items-center gap-4">
                      <div className="flex items-center justify-center w-12 h-12 rounded-full bg-orange-100">
                        <Pause className="h-6 w-6 text-orange-600" />
                      </div>
                      <div>
                        <p className="font-medium">{subscription.customers?.name}</p>
                        <p className="text-sm text-muted-foreground">{subscription.subscription_plans?.name} Plan</p>
                        <p className="text-xs text-muted-foreground">
                          {subscription.customers?.email} • {subscription.customers?.island}
                        </p>
                      </div>
                    </div>
                    <div className="flex items-center gap-4">
                      <Badge variant="secondary">Paused</Badge>
                      <div className="flex gap-2">
                        <Button variant="outline" size="sm" className="bg-transparent">
                          <Play className="h-4 w-4" />
                        </Button>
                        <Button variant="outline" size="sm" className="text-red-600 hover:text-red-700 bg-transparent">
                          <X className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        )}

{/* Management Actions */}
        <Card>
          <CardHeader>
            <CardTitle>Subscription Management Actions</CardTitle>
            <CardDescription>Bulk operations and subscription management tools</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid md:grid-cols-3 gap-4">
              <Button variant="outline" className="flex items-center gap-2 bg-transparent">
                <Calendar className="h-4 w-4" />
                Export Subscription Report
              </Button>
              <Button variant="outline" className="flex items-center gap-2 bg-transparent">
                <DollarSign className="h-4 w-4" />
                Process Billing Cycle
              </Button>
              <Button variant="outline" className="flex items-center gap-2 bg-transparent">
                <Users className="h-4 w-4" />
                Send Renewal Notices
              </Button>
            </div>
            <div className="bg-muted/50 p-4 rounded-lg">
              <p className="text-sm text-muted-foreground">
                <strong>Management Tips:</strong> Use the action buttons next to each subscription to pause, resume, or
                cancel individual accounts. Bulk operations above can help manage multiple subscriptions at once.
              </p>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/001_create_staff_cms_schema.sql" isMerged="true"
-- Staff table (with roles)
create table staff (
    id uuid primary key default gen_random_uuid(),
    name text not null,
    email text unique not null,
    password_hash text not null,
    role text check (role in ('admin','manager','staff')) default 'staff',
    created_at timestamptz default now()
);

-- Products table
create table products (
    id uuid primary key default gen_random_uuid(),
    name text not null,
    description text,
    category text,
    price numeric(10,2) not null,
    available boolean default true,
    image_url text,
    created_at timestamptz default now(),
    updated_at timestamptz default now()
);

-- Services table
create table services (
    id uuid primary key default gen_random_uuid(),
    name text not null,
    description text,
    price numeric(10,2) not null,
    available boolean default true,
    created_at timestamptz default now(),
    updated_at timestamptz default now()
);

-- Orders table
create table orders (
    id uuid primary key default gen_random_uuid(),
    customer_id uuid,
    items jsonb not null, -- stores product/service ids with quantities
    status text check (status in ('pending','accepted','in-progress','completed','rejected')) default 'pending',
    assigned_staff uuid references staff(id) on delete set null,
    created_at timestamptz default now(),
    updated_at timestamptz default now()
);

-- Activity log
create table activity_log (
    id uuid primary key default gen_random_uuid(),
    staff_id uuid references staff(id) on delete set null,
    action text not null,
    details jsonb,
    created_at timestamptz default now()
);

-- Customers table
create table customers (
    id uuid primary key default gen_random_uuid(),
    name text,
    email text unique,
    phone text,
    created_at timestamptz default now()
);
[V0_FILE]sql:file="scripts/002_enable_rls_policies.sql" isMerged="true"
-- Enable RLS for all tables
alter table staff enable row level security;
alter table products enable row level security;
alter table services enable row level security;
alter table orders enable row level security;
alter table activity_log enable row level security;
alter table customers enable row level security;

-- Staff table policies - Only admins can manage staff
create policy "Admins can manage staff"
on staff for all
using (
  exists (
    select 1 from staff s 
    where s.id = auth.uid() and s.role = 'admin'
  )
)
with check (
  exists (
    select 1 from staff s 
    where s.id = auth.uid() and s.role = 'admin'
  )
);

-- Products policies
create policy "All staff can view products"
on products for select
using (
  exists (
    select 1 from staff s 
    where s.id = auth.uid()
  )
);

create policy "Managers/Admins can modify products"
on products for all
using (
  exists (
    select 1 from staff s 
    where s.id = auth.uid() and s.role in ('manager','admin')
  )
)
with check (
  exists (
    select 1 from staff s 
    where s.id = auth.uid() and s.role in ('manager','admin')
  )
);

-- Services policies
create policy "All staff can view services"
on services for select
using (
  exists (
    select 1 from staff s 
    where s.id = auth.uid()
  )
);

create policy "Managers/Admins can modify services"
on services for all
using (
  exists (
    select 1 from staff s 
    where s.id = auth.uid() and s.role in ('manager','admin')
  )
)
with check (
  exists (
    select 1 from staff s 
    where s.id = auth.uid() and s.role in ('manager','admin')
  )
);

-- Orders policies
create policy "Staff can read all orders"
on orders for select
using (
  exists (
    select 1 from staff s 
    where s.id = auth.uid()
  )
);

create policy "Assigned staff can update their orders"
on orders for update
using (auth.uid() = assigned_staff);

create policy "Managers/Admins can update any order"
on orders for update
using (
  exists (
    select 1 from staff s 
    where s.id = auth.uid() and s.role in ('manager','admin')
  )
)
with check (
  exists (
    select 1 from staff s 
    where s.id = auth.uid() and s.role in ('manager','admin')
  )
);

create policy "Managers/Admins can insert orders"
on orders for insert
with check (
  exists (
    select 1 from staff s 
    where s.id = auth.uid() and s.role in ('manager','admin')
  )
);

-- Activity log policies
create policy "Managers/Admins can view logs"
on activity_log for select
using (
  exists (
    select 1 from staff s 
    where s.id = auth.uid() and s.role in ('manager','admin')
  )
);

create policy "Staff can insert logs"
on activity_log for insert
with check (
  exists (
    select 1 from staff s 
    where s.id = auth.uid()
  )
);

-- Customers policies
create policy "All staff can view customers"
on customers for select
using (
  exists (
    select 1 from staff s 
    where s.id = auth.uid()
  )
);

create policy "Managers/Admins can modify customers"
on customers for all
using (
  exists (
    select 1 from staff s 
    where s.id = auth.uid() and s.role in ('manager','admin')
  )
)
with check (
  exists (
    select 1 from staff s 
    where s.id = auth.uid() and s.role in ('manager','admin')
  )
);
[V0_FILE]sql:file="scripts/003_seed_initial_data.sql" isMerged="true"
-- Insert initial admin user (password: admin123)
insert into staff (id, name, email, password_hash, role) values 
('00000000-0000-0000-0000-000000000001', 'Admin User', 'admin@company.com', '$2a$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', 'admin');

-- Insert sample products
insert into products (name, description, category, price, available) values 
('Laptop Pro', 'High-performance laptop for professionals', 'Electronics', 1299.99, true),
('Wireless Mouse', 'Ergonomic wireless mouse with precision tracking', 'Electronics', 49.99, true),
('Office Chair', 'Comfortable ergonomic office chair', 'Furniture', 299.99, true),
('Standing Desk', 'Adjustable height standing desk', 'Furniture', 599.99, true);

-- Insert sample services
insert into services (name, description, price, available) values 
('IT Support', 'Technical support and troubleshooting', 75.00, true),
('Software Installation', 'Installation and setup of software applications', 50.00, true),
('Hardware Repair', 'Repair and maintenance of computer hardware', 100.00, true),
('Network Setup', 'Setup and configuration of network infrastructure', 150.00, true);

-- Insert sample customers
insert into customers (name, email, phone) values 
('John Smith', 'john.smith@email.com', '+1-555-0123'),
('Sarah Johnson', 'sarah.johnson@email.com', '+1-555-0124'),
('Mike Wilson', 'mike.wilson@email.com', '+1-555-0125');
[V0_FILE]typescriptreact:file="app/staff/login/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { createClient } from "@/lib/supabase/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 { useRouter } from "next/navigation"
import { useState } from "react"

export default function StaffLoginPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()

const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault()
    const supabase = createClient()
    setIsLoading(true)
    setError(null)

try {
      // First authenticate with Supabase Auth
      const { data: authData, error: authError } = await supabase.auth.signInWithPassword({
        email,
        password,
        options: {
          emailRedirectTo:
            process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || `${window.location.origin}/staff/dashboard`,
        },
      })

if (authError) throw authError

// Check if user exists in staff table
      const { data: staffData, error: staffError } = await supabase
        .from("staff")
        .select("id, name, email, role")
        .eq("email", email)
        .single()

if (staffError || !staffData) {
        await supabase.auth.signOut()
        throw new Error("Access denied. Staff account not found.")
      }

// Log activity
      await supabase.from("activity_log").insert({
        staff_id: staffData.id,
        action: "login",
        details: { timestamp: new Date().toISOString() },
      })

router.push("/staff/dashboard")
    } catch (error: unknown) {
      setError(error instanceof Error ? error.message : "An error occurred")
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
      <div className="w-full max-w-sm">
        <div className="flex flex-col gap-6">
          <Card>
            <CardHeader>
              <CardTitle className="text-2xl">Staff Login</CardTitle>
              <CardDescription>Enter your staff credentials to access the CMS</CardDescription>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleLogin}>
                <div className="flex flex-col gap-6">
                  <div className="grid gap-2">
                    <Label htmlFor="email">Email</Label>
                    <Input
                      id="email"
                      type="email"
                      placeholder="staff@company.com"
                      required
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                    />
                  </div>
                  <div className="grid gap-2">
                    <Label htmlFor="password">Password</Label>
                    <Input
                      id="password"
                      type="password"
                      required
                      value={password}
                      onChange={(e) => setPassword(e.target.value)}
                    />
                  </div>
                  {error && <p className="text-sm text-red-500">{error}</p>}
                  <Button type="submit" className="w-full" disabled={isLoading}>
                    {isLoading ? "Logging in..." : "Login"}
                  </Button>
                </div>
              </form>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/auth/signout/route.ts" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"

export async function POST() {
  const supabase = await createClient()

const { error } = await supabase.auth.signOut()

if (error) {
    return NextResponse.json({ error: error.message }, { status: 400 })
  }

return NextResponse.redirect(new URL("/staff/login", process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000"))
}
[V0_FILE]typescriptreact:file="app/staff/orders/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import Link from "next/link"
import { OrderStatusUpdater } from "./order-status-updater"
import { OrderAssigner } from "./order-assigner"

export default async function OrdersPage({
  searchParams,
}: {
  searchParams: { status?: string; search?: string; staff?: string }
}) {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()
  if (!user) {
    redirect("/staff/login")
  }

// Get current staff information
  const { data: currentStaff } = await supabase
    .from("staff")
    .select("id, name, email, role")
    .eq("email", user.email)
    .single()

if (!currentStaff) {
    redirect("/staff/login")
  }

// Build query for orders
  let ordersQuery = supabase.from("orders").select(`
    id,
    status,
    items,
    created_at,
    updated_at,
    customers (id, name, email, phone),
    assigned_staff:staff!orders_assigned_staff_fkey (id, name, email)
  `)

// Apply filters
  if (searchParams.status && searchParams.status !== "all") {
    ordersQuery = ordersQuery.eq("status", searchParams.status)
  }

if (searchParams.staff && searchParams.staff !== "all") {
    ordersQuery = ordersQuery.eq("assigned_staff", searchParams.staff)
  }

// If regular staff, only show their assigned orders
  if (currentStaff.role === "staff") {
    ordersQuery = ordersQuery.eq("assigned_staff", currentStaff.id)
  }

const { data: orders } = await ordersQuery.order("created_at", { ascending: false })

// Get all staff for assignment dropdown (managers and admins only)
  let allStaff = null
  if (currentStaff.role === "admin" || currentStaff.role === "manager") {
    const { data: staffList } = await supabase.from("staff").select("id, name, email, role").order("name")
    allStaff = staffList
  }

// Get order statistics
  const [{ count: totalOrders }, { count: pendingOrders }, { count: inProgressOrders }, { count: completedOrders }] =
    await Promise.all([
      supabase.from("orders").select("*", { count: "exact", head: true }),
      supabase.from("orders").select("*", { count: "exact", head: true }).eq("status", "pending"),
      supabase.from("orders").select("*", { count: "exact", head: true }).eq("status", "in-progress"),
      supabase.from("orders").select("*", { count: "exact", head: true }).eq("status", "completed"),
    ])

const getStatusBadgeColor = (status: string) => {
    switch (status) {
      case "pending":
        return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
      case "accepted":
        return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
      case "in-progress":
        return "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200"
      case "completed":
        return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
      case "rejected":
        return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
      default:
        return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200"
    }
  }

const formatItems = (items: any) => {
    if (!items || typeof items !== "object") return "No items"
    if (Array.isArray(items)) {
      return items.map((item) => `${item.name} (${item.quantity})`).join(", ")
    }
    return JSON.stringify(items)
  }

return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      {/* Header */}
      <div className="bg-white dark:bg-gray-800 shadow">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center py-6">
            <div className="flex items-center space-x-4">
              <Link href="/staff/dashboard">
                <Button variant="outline" size="sm">
                  ← Back to Dashboard
                </Button>
              </Link>
              <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Order Management</h1>
            </div>
            <div className="flex items-center space-x-4">
              <span className="text-sm text-gray-600 dark:text-gray-300">{currentStaff.name}</span>
              <Badge className="bg-blue-100 text-blue-800">{currentStaff.role.toUpperCase()}</Badge>
            </div>
          </div>
        </div>
      </div>

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Statistics */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium">Total Orders</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{totalOrders || 0}</div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium">Pending</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-yellow-600">{pendingOrders || 0}</div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium">In Progress</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-purple-600">{inProgressOrders || 0}</div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium">Completed</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-green-600">{completedOrders || 0}</div>
            </CardContent>
          </Card>
        </div>

{/* Filters */}
        <Card className="mb-6">
          <CardHeader>
            <CardTitle>Filters</CardTitle>
            <CardDescription>Filter orders by status, staff assignment, or search</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex flex-col md:flex-row gap-4">
              <div className="flex-1">
                <Input placeholder="Search orders..." defaultValue={searchParams.search} />
              </div>
              <Select defaultValue={searchParams.status || "all"}>
                <SelectTrigger className="w-full md:w-48">
                  <SelectValue placeholder="Filter by status" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Statuses</SelectItem>
                  <SelectItem value="pending">Pending</SelectItem>
                  <SelectItem value="accepted">Accepted</SelectItem>
                  <SelectItem value="in-progress">In Progress</SelectItem>
                  <SelectItem value="completed">Completed</SelectItem>
                  <SelectItem value="rejected">Rejected</SelectItem>
                </SelectContent>
              </Select>
              {(currentStaff.role === "admin" || currentStaff.role === "manager") && (
                <Select defaultValue={searchParams.staff || "all"}>
                  <SelectTrigger className="w-full md:w-48">
                    <SelectValue placeholder="Filter by staff" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Staff</SelectItem>
                    <SelectItem value="unassigned">Unassigned</SelectItem>
                    {allStaff?.map((staff) => (
                      <SelectItem key={staff.id} value={staff.id}>
                        {staff.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              )}
            </div>
          </CardContent>
        </Card>

{/* Orders List */}
        <div className="space-y-4">
          {orders && orders.length > 0 ? (
            orders.map((order) => (
              <Card key={order.id} className="hover:shadow-md transition-shadow">
                <CardContent className="p-6">
                  <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-4 lg:space-y-0">
                    <div className="flex-1 space-y-2">
                      <div className="flex items-center space-x-3">
                        <h3 className="text-lg font-semibold">Order #{order.id.slice(0, 8)}</h3>
                        <Badge className={getStatusBadgeColor(order.status)} variant="secondary">
                          {order.status}
                        </Badge>
                      </div>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-gray-600 dark:text-gray-300">
                        <div>
                          <p>
                            <strong>Customer:</strong> {order.customers?.name || "Unknown"}
                          </p>
                          <p>
                            <strong>Email:</strong> {order.customers?.email || "N/A"}
                          </p>
                          <p>
                            <strong>Phone:</strong> {order.customers?.phone || "N/A"}
                          </p>
                        </div>
                        <div>
                          <p>
                            <strong>Created:</strong> {new Date(order.created_at).toLocaleString()}
                          </p>
                          <p>
                            <strong>Updated:</strong> {new Date(order.updated_at).toLocaleString()}
                          </p>
                          <p>
                            <strong>Assigned to:</strong> {order.assigned_staff?.name || "Unassigned"}
                          </p>
                        </div>
                      </div>
                      <div className="mt-2">
                        <p className="text-sm">
                          <strong>Items:</strong> {formatItems(order.items)}
                        </p>
                      </div>
                    </div>

<div className="flex flex-col space-y-2 lg:ml-6">
                      {/* Status Update */}
                      {(currentStaff.role === "admin" ||
                        currentStaff.role === "manager" ||
                        order.assigned_staff?.id === currentStaff.id) && (
                        <OrderStatusUpdater orderId={order.id} currentStatus={order.status} staffId={currentStaff.id} />
                      )}

{/* Staff Assignment (managers and admins only) */}
                      {(currentStaff.role === "admin" || currentStaff.role === "manager") && allStaff && (
                        <OrderAssigner
                          orderId={order.id}
                          currentStaffId={order.assigned_staff?.id}
                          allStaff={allStaff}
                          currentUserStaffId={currentStaff.id}
                        />
                      )}
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))
          ) : (
            <Card>
              <CardContent className="p-8 text-center">
                <p className="text-gray-500 dark:text-gray-400">No orders found matching your criteria.</p>
              </CardContent>
            </Card>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/staff/orders/order-status-updater.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useRouter } from "next/navigation"

interface OrderStatusUpdaterProps {
  orderId: string
  currentStatus: string
  staffId: string
}

export function OrderStatusUpdater({ orderId, currentStatus, staffId }: OrderStatusUpdaterProps) {
  const [status, setStatus] = useState(currentStatus)
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()

const handleStatusUpdate = async () => {
    if (status === currentStatus) return

setIsLoading(true)
    const supabase = createClient()

try {
      // Update order status
      const { error: orderError } = await supabase
        .from("orders")
        .update({
          status,
          updated_at: new Date().toISOString(),
        })
        .eq("id", orderId)

if (orderError) throw orderError

// Log activity
      await supabase.from("activity_log").insert({
        staff_id: staffId,
        action: `Updated order ${orderId.slice(0, 8)} status to ${status}`,
        details: {
          order_id: orderId,
          old_status: currentStatus,
          new_status: status,
          timestamp: new Date().toISOString(),
        },
      })

router.refresh()
    } catch (error) {
      console.error("Error updating order status:", error)
      setStatus(currentStatus) // Reset on error
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="flex items-center space-x-2">
      <Select value={status} onValueChange={setStatus}>
        <SelectTrigger className="w-32">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="pending">Pending</SelectItem>
          <SelectItem value="accepted">Accepted</SelectItem>
          <SelectItem value="in-progress">In Progress</SelectItem>
          <SelectItem value="completed">Completed</SelectItem>
          <SelectItem value="rejected">Rejected</SelectItem>
        </SelectContent>
      </Select>
      {status !== currentStatus && (
        <Button size="sm" onClick={handleStatusUpdate} disabled={isLoading}>
          {isLoading ? "Updating..." : "Update"}
        </Button>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/staff/orders/order-assigner.tsx" isMerged="true"
"use client"

interface Staff {
  id: string
  name: string
  email: string
  role: string
}

interface OrderAssignerProps {
  orderId: string
  currentStaffId?: string
  allStaff: Staff[]
  currentUserStaffId: string
}

export function OrderAssigner({ orderId, currentStaffId, allStaff, currentUserStaffId }: OrderAssignerProps) {
  const [assignedStaff, setAssignedStaff] = useState(currentStaffId || "unassigned")
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()

const handleAssignment = async () => {
    if (assignedStaff === currentStaffId || (assignedStaff === "unassigned" && !currentStaffId)) return

setIsLoading(true)
    const supabase = createClient()

try {
      // Update order assignment
      const { error: orderError } = await supabase
        .from("orders")
        .update({
          assigned_staff: assignedStaff === "unassigned" ? null : assignedStaff,
          updated_at: new Date().toISOString(),
        })
        .eq("id", orderId)

if (orderError) throw orderError

// Log activity
      const assignedStaffName =
        assignedStaff === "unassigned" ? "Unassigned" : allStaff.find((s) => s.id === assignedStaff)?.name || "Unknown"

await supabase.from("activity_log").insert({
        staff_id: currentUserStaffId,
        action: `Assigned order ${orderId.slice(0, 8)} to ${assignedStaffName}`,
        details: {
          order_id: orderId,
          assigned_to: assignedStaff === "unassigned" ? null : assignedStaff,
          assigned_to_name: assignedStaffName,
          timestamp: new Date().toISOString(),
        },
      })

router.refresh()
    } catch (error) {
      console.error("Error assigning order:", error)
      setAssignedStaff(currentStaffId || "unassigned") // Reset on error
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="flex items-center space-x-2">
      <Select value={assignedStaff} onValueChange={setAssignedStaff}>
        <SelectTrigger className="w-40">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="unassigned">Unassigned</SelectItem>
          {allStaff.map((staff) => (
            <SelectItem key={staff.id} value={staff.id}>
              {staff.name}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      {assignedStaff !== (currentStaffId || "unassigned") && (
        <Button size="sm" onClick={handleAssignment} disabled={isLoading}>
          {isLoading ? "Assigning..." : "Assign"}
        </Button>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/staff/products/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { createBrowserClient } from "@supabase/ssr"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Plus, Search, Edit, Trash2, Package } from "lucide-react"
import Link from "next/link"

type Product = {
  id: string
  name: string
  description: string | null
  price: number
  stock_quantity: number
  category: string | null
  is_active: boolean
  created_at: string
  updated_at: string
}

type StaffMember = {
  id: string
  role: "admin" | "manager" | "staff"
}

export default function ProductsPage() {
  const [products, setProducts] = useState<Product[]>([])
  const [filteredProducts, setFilteredProducts] = useState<Product[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [categoryFilter, setCategoryFilter] = useState<string>("all")
  const [statusFilter, setStatusFilter] = useState<string>("all")
  const [loading, setLoading] = useState(true)
  const [staff, setStaff] = useState<StaffMember | null>(null)
  const [showAddModal, setShowAddModal] = useState(false)
  const [editingProduct, setEditingProduct] = useState<Product | null>(null)

const supabase = createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  )

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

useEffect(() => {
    filterProducts()
  }, [products, searchTerm, categoryFilter, statusFilter])

async function fetchStaffAndProducts() {
    try {
      const {
        data: { user },
      } = await supabase.auth.getUser()
      if (!user) return

const { data: staffData } = await supabase.from("staff").select("id, role").eq("user_id", user.id).single()

if (staffData) {
        setStaff(staffData)
      }

const { data: productsData, error } = await supabase
        .from("products")
        .select("*")
        .order("created_at", { ascending: false })

if (error) throw error
      setProducts(productsData || [])
    } catch (error) {
      console.error("Error fetching data:", error)
    } finally {
      setLoading(false)
    }
  }

function filterProducts() {
    let filtered = [...products]

if (searchTerm) {
      filtered = filtered.filter(
        (p) =>
          p.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
          p.description?.toLowerCase().includes(searchTerm.toLowerCase()),
      )
    }

if (categoryFilter !== "all") {
      filtered = filtered.filter((p) => p.category === categoryFilter)
    }

if (statusFilter !== "all") {
      filtered = filtered.filter((p) => (statusFilter === "active" ? p.is_active : !p.is_active))
    }

setFilteredProducts(filtered)
  }

async function deleteProduct(productId: string) {
    if (!confirm("Are you sure you want to delete this product?")) return

try {
      const { error } = await supabase.from("products").delete().eq("id", productId)

if (error) throw error

// Log activity
      const {
        data: { user },
      } = await supabase.auth.getUser()
      if (user && staff) {
        await supabase.from("activity_log").insert({
          staff_id: staff.id,
          action: "delete",
          entity_type: "product",
          entity_id: productId,
          details: { action: "Product deleted" },
        })
      }

setProducts(products.filter((p) => p.id !== productId))
    } catch (error) {
      console.error("Error deleting product:", error)
      alert("Failed to delete product")
    }
  }

const categories = Array.from(new Set(products.map((p) => p.category).filter(Boolean)))
  const canManage = staff?.role === "admin" || staff?.role === "manager"

const stats = {
    total: products.length,
    active: products.filter((p) => p.is_active).length,
    lowStock: products.filter((p) => p.stock_quantity < 10).length,
    totalValue: products.reduce((sum, p) => sum + p.price * p.stock_quantity, 0),
  }

if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-center">
          <Package className="h-12 w-12 animate-pulse mx-auto mb-4 text-muted-foreground" />
          <p className="text-muted-foreground">Loading products...</p>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background p-6">
      <div className="max-w-7xl mx-auto space-y-6">
        {/* Header */}
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold">Product Management</h1>
            <p className="text-muted-foreground mt-1">Manage your product inventory and pricing</p>
          </div>
          <div className="flex gap-3">
            <Link href="/staff/dashboard">
              <Button variant="outline">Back to Dashboard</Button>
            </Link>
            {canManage && (
              <Link href="/staff/products/new">
                <Button>
                  <Plus className="h-4 w-4 mr-2" />
                  Add Product
                </Button>
              </Link>
            )}
          </div>
        </div>

{/* Stats */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          <Card className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Total Products</p>
                <p className="text-2xl font-bold mt-1">{stats.total}</p>
              </div>
              <Package className="h-8 w-8 text-muted-foreground" />
            </div>
          </Card>
          <Card className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Active Products</p>
                <p className="text-2xl font-bold mt-1">{stats.active}</p>
              </div>
              <Badge variant="default" className="h-8 px-3">
                Active
              </Badge>
            </div>
          </Card>
          <Card className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Low Stock</p>
                <p className="text-2xl font-bold mt-1">{stats.lowStock}</p>
              </div>
              <Badge variant="destructive" className="h-8 px-3">
                Alert
              </Badge>
            </div>
          </Card>
          <Card className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Total Value</p>
                <p className="text-2xl font-bold mt-1">${stats.totalValue.toFixed(2)}</p>
              </div>
            </div>
          </Card>
        </div>

{/* Filters */}
        <Card className="p-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Search products..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-9"
              />
            </div>
            <select
              value={categoryFilter}
              onChange={(e) => setCategoryFilter(e.target.value)}
              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
            >
              <option value="all">All Categories</option>
              {categories.map((cat) => (
                <option key={cat} value={cat || ""}>
                  {cat}
                </option>
              ))}
            </select>
            <select
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value)}
              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
            >
              <option value="all">All Status</option>
              <option value="active">Active</option>
              <option value="inactive">Inactive</option>
            </select>
          </div>
        </Card>

{/* Products List */}
        <div className="grid grid-cols-1 gap-4">
          {filteredProducts.length === 0 ? (
            <Card className="p-12 text-center">
              <Package className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
              <h3 className="text-lg font-semibold mb-2">No products found</h3>
              <p className="text-muted-foreground mb-4">
                {searchTerm || categoryFilter !== "all" || statusFilter !== "all"
                  ? "Try adjusting your filters"
                  : "Get started by adding your first product"}
              </p>
              {canManage && (
                <Link href="/staff/products/new">
                  <Button>
                    <Plus className="h-4 w-4 mr-2" />
                    Add Product
                  </Button>
                </Link>
              )}
            </Card>
          ) : (
            filteredProducts.map((product) => (
              <Card key={product.id} className="p-4 hover:shadow-md transition-shadow">
                <div className="flex items-start justify-between">
                  <div className="flex-1">
                    <div className="flex items-center gap-3 mb-2">
                      <h3 className="text-lg font-semibold">{product.name}</h3>
                      <Badge variant={product.is_active ? "default" : "secondary"}>
                        {product.is_active ? "Active" : "Inactive"}
                      </Badge>
                      {product.stock_quantity < 10 && <Badge variant="destructive">Low Stock</Badge>}
                    </div>
                    {product.description && <p className="text-sm text-muted-foreground mb-3">{product.description}</p>}
                    <div className="flex items-center gap-6 text-sm">
                      <div>
                        <span className="text-muted-foreground">Price: </span>
                        <span className="font-semibold">${product.price.toFixed(2)}</span>
                      </div>
                      <div>
                        <span className="text-muted-foreground">Stock: </span>
                        <span className="font-semibold">{product.stock_quantity}</span>
                      </div>
                      {product.category && (
                        <div>
                          <span className="text-muted-foreground">Category: </span>
                          <span className="font-semibold">{product.category}</span>
                        </div>
                      )}
                    </div>
                  </div>
                  {canManage && (
                    <div className="flex gap-2">
                      <Link href={`/staff/products/${product.id}/edit`}>
                        <Button variant="outline" size="sm">
                          <Edit className="h-4 w-4" />
                        </Button>
                      </Link>
                      <Button variant="outline" size="sm" onClick={() => deleteProduct(product.id)}>
                        <Trash2 className="h-4 w-4 text-destructive" />
                      </Button>
                    </div>
                  )}
                </div>
              </Card>
            ))
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/staff/products/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/staff/products/new/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { createBrowserClient } from "@supabase/ssr"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card } from "@/components/ui/card"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"
import { useRouter } from "next/navigation"

type StaffMember = {
  id: string
  role: "admin" | "manager" | "staff"
}

export default function NewProductPage() {
  const router = useRouter()
  const [staff, setStaff] = useState<StaffMember | null>(null)
  const [loading, setLoading] = useState(false)
  const [formData, setFormData] = useState({
    name: "",
    description: "",
    price: "",
    stock_quantity: "",
    category: "",
    is_active: true,
  })

const supabase = createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  )

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

async function checkPermissions() {
    const {
      data: { user },
    } = await supabase.auth.getUser()
    if (!user) {
      router.push("/staff/login")
      return
    }

const { data: staffData } = await supabase.from("staff").select("id, role").eq("user_id", user.id).single()

if (!staffData || (staffData.role !== "admin" && staffData.role !== "manager")) {
      router.push("/staff/dashboard")
      return
    }

setStaff(staffData)
  }

async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    if (!staff) return

setLoading(true)
    try {
      const { data, error } = await supabase
        .from("products")
        .insert({
          name: formData.name,
          description: formData.description || null,
          price: Number.parseFloat(formData.price),
          stock_quantity: Number.parseInt(formData.stock_quantity),
          category: formData.category || null,
          is_active: formData.is_active,
        })
        .select()
        .single()

if (error) throw error

// Log activity
      await supabase.from("activity_log").insert({
        staff_id: staff.id,
        action: "create",
        entity_type: "product",
        entity_id: data.id,
        details: { name: formData.name },
      })

router.push("/staff/products")
    } catch (error) {
      console.error("Error creating product:", error)
      alert("Failed to create product")
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="min-h-screen bg-background p-6">
      <div className="max-w-2xl mx-auto space-y-6">
        <div className="flex items-center gap-4">
          <Link href="/staff/products">
            <Button variant="outline" size="sm">
              <ArrowLeft className="h-4 w-4 mr-2" />
              Back
            </Button>
          </Link>
          <div>
            <h1 className="text-3xl font-bold">Add New Product</h1>
            <p className="text-muted-foreground mt-1">Create a new product in your inventory</p>
          </div>
        </div>

<Card className="p-6">
          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label className="text-sm font-medium mb-2 block">Product Name *</label>
              <Input
                required
                value={formData.name}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                placeholder="Enter product name"
              />
            </div>

<div>
              <label className="text-sm font-medium mb-2 block">Description</label>
              <textarea
                value={formData.description}
                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                placeholder="Enter product description"
                className="flex min-h-[100px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
              />
            </div>

<div className="grid grid-cols-2 gap-4">
              <div>
                <label className="text-sm font-medium mb-2 block">Price ($) *</label>
                <Input
                  required
                  type="number"
                  step="0.01"
                  min="0"
                  value={formData.price}
                  onChange={(e) => setFormData({ ...formData, price: e.target.value })}
                  placeholder="0.00"
                />
              </div>

<div>
                <label className="text-sm font-medium mb-2 block">Stock Quantity *</label>
                <Input
                  required
                  type="number"
                  min="0"
                  value={formData.stock_quantity}
                  onChange={(e) => setFormData({ ...formData, stock_quantity: e.target.value })}
                  placeholder="0"
                />
              </div>
            </div>

<div>
              <label className="text-sm font-medium mb-2 block">Category</label>
              <Input
                value={formData.category}
                onChange={(e) => setFormData({ ...formData, category: e.target.value })}
                placeholder="Enter category"
              />
            </div>

<div className="flex items-center gap-2">
              <input
                type="checkbox"
                id="is_active"
                checked={formData.is_active}
                onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
                className="h-4 w-4 rounded border-input"
              />
              <label htmlFor="is_active" className="text-sm font-medium">
                Active (available for orders)
              </label>
            </div>

<div className="flex gap-3 pt-4">
              <Button type="submit" disabled={loading} className="flex-1">
                {loading ? "Creating..." : "Create Product"}
              </Button>
              <Link href="/staff/products" className="flex-1">
                <Button type="button" variant="outline" className="w-full bg-transparent">
                  Cancel
                </Button>
              </Link>
            </div>
          </form>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/staff/services/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { createBrowserClient } from "@supabase/ssr"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Plus, Search, Edit, Trash2, Wrench } from "lucide-react"
import Link from "next/link"

type Service = {
  id: string
  name: string
  description: string | null
  price: number
  duration_minutes: number | null
  category: string | null
  is_active: boolean
  created_at: string
  updated_at: string
}

type StaffMember = {
  id: string
  role: "admin" | "manager" | "staff"
}

export default function ServicesPage() {
  const [services, setServices] = useState<Service[]>([])
  const [filteredServices, setFilteredServices] = useState<Service[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [categoryFilter, setCategoryFilter] = useState<string>("all")
  const [statusFilter, setStatusFilter] = useState<string>("all")
  const [loading, setLoading] = useState(true)
  const [staff, setStaff] = useState<StaffMember | null>(null)

const supabase = createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  )

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

useEffect(() => {
    filterServices()
  }, [services, searchTerm, categoryFilter, statusFilter])

async function fetchStaffAndServices() {
    try {
      const {
        data: { user },
      } = await supabase.auth.getUser()
      if (!user) return

const { data: staffData } = await supabase.from("staff").select("id, role").eq("user_id", user.id).single()

if (staffData) {
        setStaff(staffData)
      }

const { data: servicesData, error } = await supabase
        .from("services")
        .select("*")
        .order("created_at", { ascending: false })

if (error) throw error
      setServices(servicesData || [])
    } catch (error) {
      console.error("Error fetching data:", error)
    } finally {
      setLoading(false)
    }
  }

function filterServices() {
    let filtered = [...services]

if (searchTerm) {
      filtered = filtered.filter(
        (s) =>
          s.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
          s.description?.toLowerCase().includes(searchTerm.toLowerCase()),
      )
    }

if (categoryFilter !== "all") {
      filtered = filtered.filter((s) => s.category === categoryFilter)
    }

if (statusFilter !== "all") {
      filtered = filtered.filter((s) => (statusFilter === "active" ? s.is_active : !s.is_active))
    }

setFilteredServices(filtered)
  }

async function deleteService(serviceId: string) {
    if (!confirm("Are you sure you want to delete this service?")) return

try {
      const { error } = await supabase.from("services").delete().eq("id", serviceId)

if (error) throw error

// Log activity
      const {
        data: { user },
      } = await supabase.auth.getUser()
      if (user && staff) {
        await supabase.from("activity_log").insert({
          staff_id: staff.id,
          action: "delete",
          entity_type: "service",
          entity_id: serviceId,
          details: { action: "Service deleted" },
        })
      }

setServices(services.filter((s) => s.id !== serviceId))
    } catch (error) {
      console.error("Error deleting service:", error)
      alert("Failed to delete service")
    }
  }

const categories = Array.from(new Set(services.map((s) => s.category).filter(Boolean)))
  const canManage = staff?.role === "admin" || staff?.role === "manager"

const stats = {
    total: services.length,
    active: services.filter((s) => s.is_active).length,
    avgPrice: services.length > 0 ? services.reduce((sum, s) => sum + s.price, 0) / services.length : 0,
    avgDuration:
      services.filter((s) => s.duration_minutes).length > 0
        ? services.reduce((sum, s) => sum + (s.duration_minutes || 0), 0) /
          services.filter((s) => s.duration_minutes).length
        : 0,
  }

if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-center">
          <Wrench className="h-12 w-12 animate-pulse mx-auto mb-4 text-muted-foreground" />
          <p className="text-muted-foreground">Loading services...</p>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background p-6">
      <div className="max-w-7xl mx-auto space-y-6">
        {/* Header */}
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold">Service Management</h1>
            <p className="text-muted-foreground mt-1">Manage your service offerings and pricing</p>
          </div>
          <div className="flex gap-3">
            <Link href="/staff/dashboard">
              <Button variant="outline">Back to Dashboard</Button>
            </Link>
            {canManage && (
              <Link href="/staff/services/new">
                <Button>
                  <Plus className="h-4 w-4 mr-2" />
                  Add Service
                </Button>
              </Link>
            )}
          </div>
        </div>

{/* Stats */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          <Card className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Total Services</p>
                <p className="text-2xl font-bold mt-1">{stats.total}</p>
              </div>
              <Wrench className="h-8 w-8 text-muted-foreground" />
            </div>
          </Card>
          <Card className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Active Services</p>
                <p className="text-2xl font-bold mt-1">{stats.active}</p>
              </div>
              <Badge variant="default" className="h-8 px-3">
                Active
              </Badge>
            </div>
          </Card>
          <Card className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Avg Price</p>
                <p className="text-2xl font-bold mt-1">${stats.avgPrice.toFixed(2)}</p>
              </div>
            </div>
          </Card>
          <Card className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Avg Duration</p>
                <p className="text-2xl font-bold mt-1">{Math.round(stats.avgDuration)} min</p>
              </div>
            </div>
          </Card>
        </div>

{/* Filters */}
        <Card className="p-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Search services..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-9"
              />
            </div>
            <select
              value={categoryFilter}
              onChange={(e) => setCategoryFilter(e.target.value)}
              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
            >
              <option value="all">All Categories</option>
              {categories.map((cat) => (
                <option key={cat} value={cat || ""}>
                  {cat}
                </option>
              ))}
            </select>
            <select
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value)}
              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
            >
              <option value="all">All Status</option>
              <option value="active">Active</option>
              <option value="inactive">Inactive</option>
            </select>
          </div>
        </Card>

{/* Services List */}
        <div className="grid grid-cols-1 gap-4">
          {filteredServices.length === 0 ? (
            <Card className="p-12 text-center">
              <Wrench className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
              <h3 className="text-lg font-semibold mb-2">No services found</h3>
              <p className="text-muted-foreground mb-4">
                {searchTerm || categoryFilter !== "all" || statusFilter !== "all"
                  ? "Try adjusting your filters"
                  : "Get started by adding your first service"}
              </p>
              {canManage && (
                <Link href="/staff/services/new">
                  <Button>
                    <Plus className="h-4 w-4 mr-2" />
                    Add Service
                  </Button>
                </Link>
              )}
            </Card>
          ) : (
            filteredServices.map((service) => (
              <Card key={service.id} className="p-4 hover:shadow-md transition-shadow">
                <div className="flex items-start justify-between">
                  <div className="flex-1">
                    <div className="flex items-center gap-3 mb-2">
                      <h3 className="text-lg font-semibold">{service.name}</h3>
                      <Badge variant={service.is_active ? "default" : "secondary"}>
                        {service.is_active ? "Active" : "Inactive"}
                      </Badge>
                    </div>
                    {service.description && <p className="text-sm text-muted-foreground mb-3">{service.description}</p>}
                    <div className="flex items-center gap-6 text-sm">
                      <div>
                        <span className="text-muted-foreground">Price: </span>
                        <span className="font-semibold">${service.price.toFixed(2)}</span>
                      </div>
                      {service.duration_minutes && (
                        <div>
                          <span className="text-muted-foreground">Duration: </span>
                          <span className="font-semibold">{service.duration_minutes} min</span>
                        </div>
                      )}
                      {service.category && (
                        <div>
                          <span className="text-muted-foreground">Category: </span>
                          <span className="font-semibold">{service.category}</span>
                        </div>
                      )}
                    </div>
                  </div>
                  {canManage && (
                    <div className="flex gap-2">
                      <Link href={`/staff/services/${service.id}/edit`}>
                        <Button variant="outline" size="sm">
                          <Edit className="h-4 w-4" />
                        </Button>
                      </Link>
                      <Button variant="outline" size="sm" onClick={() => deleteService(service.id)}>
                        <Trash2 className="h-4 w-4 text-destructive" />
                      </Button>
                    </div>
                  )}
                </div>
              </Card>
            ))
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/staff/services/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/staff/services/new/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { createBrowserClient } from "@supabase/ssr"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card } from "@/components/ui/card"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"
import { useRouter } from "next/navigation"

type StaffMember = {
  id: string
  role: "admin" | "manager" | "staff"
}

export default function NewServicePage() {
  const router = useRouter()
  const [staff, setStaff] = useState<StaffMember | null>(null)
  const [loading, setLoading] = useState(false)
  const [formData, setFormData] = useState({
    name: "",
    description: "",
    price: "",
    duration_minutes: "",
    category: "",
    is_active: true,
  })

const supabase = createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  )

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

async function checkPermissions() {
    const {
      data: { user },
    } = await supabase.auth.getUser()
    if (!user) {
      router.push("/staff/login")
      return
    }

const { data: staffData } = await supabase.from("staff").select("id, role").eq("user_id", user.id).single()

if (!staffData || (staffData.role !== "admin" && staffData.role !== "manager")) {
      router.push("/staff/dashboard")
      return
    }

setStaff(staffData)
  }

async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    if (!staff) return

setLoading(true)
    try {
      const { data, error } = await supabase
        .from("services")
        .insert({
          name: formData.name,
          description: formData.description || null,
          price: Number.parseFloat(formData.price),
          duration_minutes: formData.duration_minutes ? Number.parseInt(formData.duration_minutes) : null,
          category: formData.category || null,
          is_active: formData.is_active,
        })
        .select()
        .single()

if (error) throw error

// Log activity
      await supabase.from("activity_log").insert({
        staff_id: staff.id,
        action: "create",
        entity_type: "service",
        entity_id: data.id,
        details: { name: formData.name },
      })

router.push("/staff/services")
    } catch (error) {
      console.error("Error creating service:", error)
      alert("Failed to create service")
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="min-h-screen bg-background p-6">
      <div className="max-w-2xl mx-auto space-y-6">
        <div className="flex items-center gap-4">
          <Link href="/staff/services">
            <Button variant="outline" size="sm">
              <ArrowLeft className="h-4 w-4 mr-2" />
              Back
            </Button>
          </Link>
          <div>
            <h1 className="text-3xl font-bold">Add New Service</h1>
            <p className="text-muted-foreground mt-1">Create a new service offering</p>
          </div>
        </div>

<Card className="p-6">
          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label className="text-sm font-medium mb-2 block">Service Name *</label>
              <Input
                required
                value={formData.name}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                placeholder="Enter service name"
              />
            </div>

<div>
              <label className="text-sm font-medium mb-2 block">Description</label>
              <textarea
                value={formData.description}
                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                placeholder="Enter service description"
                className="flex min-h-[100px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
              />
            </div>

<div>
                <label className="text-sm font-medium mb-2 block">Duration (minutes)</label>
                <Input
                  type="number"
                  min="0"
                  value={formData.duration_minutes}
                  onChange={(e) => setFormData({ ...formData, duration_minutes: e.target.value })}
                  placeholder="60"
                />
              </div>
            </div>

<div className="flex gap-3 pt-4">
              <Button type="submit" disabled={loading} className="flex-1">
                {loading ? "Creating..." : "Create Service"}
              </Button>
              <Link href="/staff/services" className="flex-1">
                <Button type="button" variant="outline" className="w-full bg-transparent">
                  Cancel
                </Button>
              </Link>
            </div>
          </form>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/staff/activity/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { createBrowserClient } from "@supabase/ssr"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Search, Activity } from "lucide-react"
import Link from "next/link"

type ActivityLog = {
  id: string
  staff_id: string
  action: "create" | "update" | "delete"
  entity_type: "order" | "product" | "service" | "customer"
  entity_id: string
  details: Record<string, unknown>
  created_at: string
  staff: {
    name: string
    email: string
  }
}

type StaffMember = {
  id: string
  name: string
  role: "admin" | "manager" | "staff"
}

export default function ActivityLogPage() {
  const [activities, setActivities] = useState<ActivityLog[]>([])
  const [filteredActivities, setFilteredActivities] = useState<ActivityLog[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [actionFilter, setActionFilter] = useState<string>("all")
  const [entityFilter, setEntityFilter] = useState<string>("all")
  const [staffFilter, setStaffFilter] = useState<string>("all")
  const [loading, setLoading] = useState(true)
  const [staff, setStaff] = useState<StaffMember | null>(null)
  const [allStaff, setAllStaff] = useState<StaffMember[]>([])

const supabase = createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  )

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

useEffect(() => {
    filterActivities()
  }, [activities, searchTerm, actionFilter, entityFilter, staffFilter])

async function fetchData() {
    try {
      const {
        data: { user },
      } = await supabase.auth.getUser()
      if (!user) return

const { data: staffData } = await supabase.from("staff").select("id, name, role").eq("user_id", user.id).single()

if (!staffData || staffData.role === "staff") {
        // Only admins and managers can view activity logs
        window.location.href = "/staff/dashboard"
        return
      }

setStaff(staffData)

// Fetch all staff for filter
      const { data: allStaffData } = await supabase.from("staff").select("id, name, role").order("name")
      setAllStaff(allStaffData || [])

// Fetch activity logs with staff info
      const { data: activityData, error } = await supabase
        .from("activity_log")
        .select(
          `
          *,
          staff:staff_id (
            name,
            email
          )
        `,
        )
        .order("created_at", { ascending: false })
        .limit(500)

if (error) throw error
      setActivities(activityData || [])
    } catch (error) {
      console.error("Error fetching data:", error)
    } finally {
      setLoading(false)
    }
  }

function filterActivities() {
    let filtered = [...activities]

if (searchTerm) {
      filtered = filtered.filter(
        (a) =>
          a.staff.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
          a.staff.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
          a.entity_type.toLowerCase().includes(searchTerm.toLowerCase()) ||
          JSON.stringify(a.details).toLowerCase().includes(searchTerm.toLowerCase()),
      )
    }

if (actionFilter !== "all") {
      filtered = filtered.filter((a) => a.action === actionFilter)
    }

if (entityFilter !== "all") {
      filtered = filtered.filter((a) => a.entity_type === entityFilter)
    }

if (staffFilter !== "all") {
      filtered = filtered.filter((a) => a.staff_id === staffFilter)
    }

setFilteredActivities(filtered)
  }

function getActionColor(action: string) {
    switch (action) {
      case "create":
        return "default"
      case "update":
        return "secondary"
      case "delete":
        return "destructive"
      default:
        return "outline"
    }
  }

function formatDetails(details: Record<string, unknown>) {
    if (!details || Object.keys(details).length === 0) return "No details"

return Object.entries(details)
      .map(([key, value]) => `${key}: ${JSON.stringify(value)}`)
      .join(", ")
  }

function formatDate(dateString: string) {
    const date = new Date(dateString)
    return new Intl.DateTimeFormat("en-US", {
      month: "short",
      day: "numeric",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    }).format(date)
  }

const stats = {
    total: activities.length,
    creates: activities.filter((a) => a.action === "create").length,
    updates: activities.filter((a) => a.action === "update").length,
    deletes: activities.filter((a) => a.action === "delete").length,
  }

if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-center">
          <Activity className="h-12 w-12 animate-pulse mx-auto mb-4 text-muted-foreground" />
          <p className="text-muted-foreground">Loading activity logs...</p>
        </div>
      </div>
    )
  }

{/* Stats */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          <Card className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Total Activities</p>
                <p className="text-2xl font-bold mt-1">{stats.total}</p>
              </div>
              <Activity className="h-8 w-8 text-muted-foreground" />
            </div>
          </Card>
          <Card className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Creates</p>
                <p className="text-2xl font-bold mt-1">{stats.creates}</p>
              </div>
              <Badge variant="default" className="h-8 px-3">
                New
              </Badge>
            </div>
          </Card>
          <Card className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Updates</p>
                <p className="text-2xl font-bold mt-1">{stats.updates}</p>
              </div>
              <Badge variant="secondary" className="h-8 px-3">
                Edit
              </Badge>
            </div>
          </Card>
          <Card className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Deletes</p>
                <p className="text-2xl font-bold mt-1">{stats.deletes}</p>
              </div>
              <Badge variant="destructive" className="h-8 px-3">
                Delete
              </Badge>
            </div>
          </Card>
        </div>

{/* Filters */}
        <Card className="p-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Search activities..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-9"
              />
            </div>
            <select
              value={actionFilter}
              onChange={(e) => setActionFilter(e.target.value)}
              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
            >
              <option value="all">All Actions</option>
              <option value="create">Create</option>
              <option value="update">Update</option>
              <option value="delete">Delete</option>
            </select>
            <select
              value={entityFilter}
              onChange={(e) => setEntityFilter(e.target.value)}
              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
            >
              <option value="all">All Entities</option>
              <option value="order">Orders</option>
              <option value="product">Products</option>
              <option value="service">Services</option>
              <option value="customer">Customers</option>
            </select>
            <select
              value={staffFilter}
              onChange={(e) => setStaffFilter(e.target.value)}
              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
            >
              <option value="all">All Staff</option>
              {allStaff.map((s) => (
                <option key={s.id} value={s.id}>
                  {s.name}
                </option>
              ))}
            </select>
          </div>
        </Card>

{/* Activity List */}
        <div className="space-y-3">
          {filteredActivities.length === 0 ? (
            <Card className="p-12 text-center">
              <Activity className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
              <h3 className="text-lg font-semibold mb-2">No activities found</h3>
              <p className="text-muted-foreground">
                {searchTerm || actionFilter !== "all" || entityFilter !== "all" || staffFilter !== "all"
                  ? "Try adjusting your filters"
                  : "Activity logs will appear here as staff make changes"}
              </p>
            </Card>
          ) : (
            filteredActivities.map((activity) => (
              <Card key={activity.id} className="p-4 hover:shadow-md transition-shadow">
                <div className="flex items-start justify-between gap-4">
                  <div className="flex-1">
                    <div className="flex items-center gap-3 mb-2">
                      <Badge variant={getActionColor(activity.action)}>{activity.action.toUpperCase()}</Badge>
                      <Badge variant="outline">{activity.entity_type}</Badge>
                      <span className="text-sm text-muted-foreground">{formatDate(activity.created_at)}</span>
                    </div>
                    <div className="space-y-1">
                      <p className="text-sm">
                        <span className="font-semibold">{activity.staff.name}</span>
                        <span className="text-muted-foreground"> ({activity.staff.email})</span>
                      </p>
                      <p className="text-sm text-muted-foreground">{formatDetails(activity.details)}</p>
                      <p className="text-xs text-muted-foreground">Entity ID: {activity.entity_id}</p>
                    </div>
                  </div>
                </div>
              </Card>
            ))
          )}
        </div>

{filteredActivities.length > 0 && (
          <div className="text-center text-sm text-muted-foreground">
            Showing {filteredActivities.length} of {activities.length} activities
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/staff/activity/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/staff/dashboard/page.tsx" isEdit="true" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import Link from "next/link"

export default async function StaffDashboard() {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()
  if (!user) {
    redirect("/staff/login")
  }

// Get staff information
  const { data: staff } = await supabase.from("staff").select("id, name, email, role").eq("email", user.email).single()

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

// Get comprehensive dashboard statistics
  const [
    { count: totalOrders },
    { count: pendingOrders },
    { count: inProgressOrders },
    { count: completedOrders },
    { count: totalProducts },
    { count: availableProducts },
    { count: totalServices },
    { count: availableServices },
    { count: totalCustomers },
  ] = await Promise.all([
    supabase.from("orders").select("*", { count: "exact", head: true }),
    supabase.from("orders").select("*", { count: "exact", head: true }).eq("status", "pending"),
    supabase.from("orders").select("*", { count: "exact", head: true }).eq("status", "in-progress"),
    supabase.from("orders").select("*", { count: "exact", head: true }).eq("status", "completed"),
    supabase.from("products").select("*", { count: "exact", head: true }),
    supabase.from("products").select("*", { count: "exact", head: true }).eq("available", true),
    supabase.from("services").select("*", { count: "exact", head: true }),
    supabase.from("services").select("*", { count: "exact", head: true }).eq("available", true),
    supabase.from("customers").select("*", { count: "exact", head: true }),
  ])

// Get recent orders
  const { data: recentOrders } = await supabase
    .from("orders")
    .select(`
      id,
      status,
      created_at,
      customers (name, email)
    `)
    .order("created_at", { ascending: false })
    .limit(5)

// Get recent activity (if user has permission)
  let recentActivity = null
  if (staff.role === "admin" || staff.role === "manager") {
    const { data: activity } = await supabase
      .from("activity_log")
      .select(`
        id,
        action,
        created_at,
        staff (name)
      `)
      .order("created_at", { ascending: false })
      .limit(10)
    recentActivity = activity
  }

const getRoleBadgeColor = (role: string) => {
    switch (role) {
      case "admin":
        return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
      case "manager":
        return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
      default:
        return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
    }
  }

// Calculate completion rates
  const orderCompletionRate = totalOrders ? Math.round((completedOrders! / totalOrders) * 100) : 0
  const productAvailabilityRate = totalProducts ? Math.round((availableProducts! / totalProducts) * 100) : 0
  const serviceAvailabilityRate = totalServices ? Math.round((availableServices! / totalServices) * 100) : 0

return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      {/* Header */}
      <div className="bg-white dark:bg-gray-800 shadow">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center py-6">
            <div className="flex items-center space-x-4">
              <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Staff CMS Dashboard</h1>
              <Badge className={getRoleBadgeColor(staff.role)}>{staff.role.toUpperCase()}</Badge>
            </div>
            <div className="flex items-center space-x-4">
              <span className="text-sm text-gray-600 dark:text-gray-300">Welcome, {staff.name}</span>
              <form action="/auth/signout" method="post">
                <Button variant="outline" size="sm">
                  Sign Out
                </Button>
              </form>
            </div>
          </div>
        </div>
      </div>

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Key Metrics */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Total Orders</CardTitle>
              <div className="h-4 w-4 text-muted-foreground">📋</div>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{totalOrders || 0}</div>
              <p className="text-xs text-muted-foreground">
                {pendingOrders || 0} pending, {inProgressOrders || 0} in progress
              </p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Order Completion</CardTitle>
              <div className="h-4 w-4 text-muted-foreground">✅</div>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{orderCompletionRate}%</div>
              <Progress value={orderCompletionRate} className="mt-2" />
              <p className="text-xs text-muted-foreground mt-1">{completedOrders || 0} completed orders</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Products</CardTitle>
              <div className="h-4 w-4 text-muted-foreground">📦</div>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{totalProducts || 0}</div>
              <Progress value={productAvailabilityRate} className="mt-2" />
              <p className="text-xs text-muted-foreground mt-1">{availableProducts || 0} available</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Services</CardTitle>
              <div className="h-4 w-4 text-muted-foreground">🔧</div>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{totalServices || 0}</div>
              <Progress value={serviceAvailabilityRate} className="mt-2" />
              <p className="text-xs text-muted-foreground mt-1">{availableServices || 0} available</p>
            </CardContent>
          </Card>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Main Navigation */}
          <div className="lg:col-span-2">
            <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Quick Actions</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <Card className="hover:shadow-md transition-shadow">
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <span>📋</span>
                    <span>Order Management</span>
                  </CardTitle>
                  <CardDescription>View and manage customer orders</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex justify-between items-center mb-3">
                    <span className="text-sm text-gray-600">Pending Orders</span>
                    <Badge variant="secondary">{pendingOrders || 0}</Badge>
                  </div>
                  <Link href="/staff/orders">
                    <Button className="w-full">Manage Orders</Button>
                  </Link>
                </CardContent>
              </Card>

{(staff.role === "admin" || staff.role === "manager") && (
                <>
                  <Card className="hover:shadow-md transition-shadow">
                    <CardHeader>
                      <CardTitle className="flex items-center space-x-2">
                        <span>📦</span>
                        <span>Products</span>
                      </CardTitle>
                      <CardDescription>Manage product catalog</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="flex justify-between items-center mb-3">
                        <span className="text-sm text-gray-600">Total Products</span>
                        <Badge variant="secondary">{totalProducts || 0}</Badge>
                      </div>
                      <Link href="/staff/products">
                        <Button className="w-full">Manage Products</Button>
                      </Link>
                    </CardContent>
                  </Card>

<Card className="hover:shadow-md transition-shadow">
                    <CardHeader>
                      <CardTitle className="flex items-center space-x-2">
                        <span>🔧</span>
                        <span>Services</span>
                      </CardTitle>
                      <CardDescription>Manage service offerings</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="flex justify-between items-center mb-3">
                        <span className="text-sm text-gray-600">Total Services</span>
                        <Badge variant="secondary">{totalServices || 0}</Badge>
                      </div>
                      <Link href="/staff/services">
                        <Button className="w-full">Manage Services</Button>
                      </Link>
                    </CardContent>
                  </Card>
                </>
              )}

<Card className="hover:shadow-md transition-shadow">
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <span>👥</span>
                    <span>Customers</span>
                  </CardTitle>
                  <CardDescription>View customer information</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex justify-between items-center mb-3">
                    <span className="text-sm text-gray-600">Total Customers</span>
                    <Badge variant="secondary">{totalCustomers || 0}</Badge>
                  </div>
                  <Link href="/staff/customers">
                    <Button className="w-full">View Customers</Button>
                  </Link>
                </CardContent>
              </Card>

{(staff.role === "admin" || staff.role === "manager") && (
                <Card className="hover:shadow-md transition-shadow">
                  <CardHeader>
                    <CardTitle className="flex items-center space-x-2">
                      <span>📊</span>
                      <span>Activity Log</span>
                    </CardTitle>
                    <CardDescription>View system activity and logs</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <Link href="/staff/activity">
                      <Button className="w-full">View Activity</Button>
                    </Link>
                  </CardContent>
                </Card>
              )}

{staff.role === "admin" && (
                <Card className="hover:shadow-md transition-shadow">
                  <CardHeader>
                    <CardTitle className="flex items-center space-x-2">
                      <span>⚙️</span>
                      <span>Staff Management</span>
                    </CardTitle>
                    <CardDescription>Manage staff accounts</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <Link href="/staff/manage">
                      <Button className="w-full">Manage Staff</Button>
                    </Link>
                  </CardContent>
                </Card>
              )}
            </div>
          </div>

{/* Sidebar with Recent Activity */}
          <div className="space-y-6">
            {/* Recent Orders */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">Recent Orders</CardTitle>
                <CardDescription>Latest customer orders</CardDescription>
              </CardHeader>
              <CardContent className="space-y-3">
                {recentOrders && recentOrders.length > 0 ? (
                  recentOrders.map((order) => (
                    <div
                      key={order.id}
                      className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg"
                    >
                      <div className="flex-1">
                        <p className="text-sm font-medium">{order.customers?.name || "Unknown Customer"}</p>
                        <p className="text-xs text-gray-500">{new Date(order.created_at).toLocaleDateString()}</p>
                      </div>
                      <Badge className={getStatusBadgeColor(order.status)} variant="secondary">
                        {order.status}
                      </Badge>
                    </div>
                  ))
                ) : (
                  <p className="text-sm text-gray-500">No recent orders</p>
                )}
                <Link href="/staff/orders">
                  <Button variant="outline" size="sm" className="w-full bg-transparent">
                    View All Orders
                  </Button>
                </Link>
              </CardContent>
            </Card>

{/* Recent Activity (for managers and admins) */}
            {recentActivity && (
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">Recent Activity</CardTitle>
                  <CardDescription>System activity log</CardDescription>
                </CardHeader>
                <CardContent className="space-y-3">
                  {recentActivity.length > 0 ? (
                    recentActivity.slice(0, 5).map((activity) => (
                      <div
                        key={activity.id}
                        className="flex items-start space-x-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg"
                      >
                        <div className="flex-1">
                          <p className="text-sm font-medium">{activity.action}</p>
                          <p className="text-xs text-gray-500">
                            by {activity.staff?.name || "Unknown"} • {new Date(activity.created_at).toLocaleString()}
                          </p>
                        </div>
                      </div>
                    ))
                  ) : (
                    <p className="text-sm text-gray-500">No recent activity</p>
                  )}
                  <Link href="/staff/activity">
                    <Button variant="outline" size="sm" className="w-full bg-transparent">
                      View All Activity
                    </Button>
                  </Link>
                </CardContent>
              </Card>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/012_fix_subscription_rls_policies.sql" isMerged="true"
-- Fix RLS policies for customer_subscriptions and subscription_billing tables
-- This adds policies for public subscription creation and admin management

-- Drop existing restrictive policies on customer_subscriptions
DROP POLICY IF EXISTS "customer_subscriptions_select_own" ON public.customer_subscriptions;
DROP POLICY IF EXISTS "customer_subscriptions_insert_own" ON public.customer_subscriptions;
DROP POLICY IF EXISTS "customer_subscriptions_update_own" ON public.customer_subscriptions;

-- Add comprehensive RLS policies for customer_subscriptions

-- Allow public users to insert subscriptions (for public subscription flow)
CREATE POLICY "public_can_create_subscriptions" ON public.customer_subscriptions
  FOR INSERT
  WITH CHECK (true);

-- Allow customers to view their own subscriptions
CREATE POLICY "customers_can_view_own_subscriptions" ON public.customer_subscriptions
  FOR SELECT
  USING (
    customer_id IN (
      SELECT id FROM public.customers 
      WHERE email = current_setting('request.jwt.claims', true)::json->>'email'
    )
  );

-- Allow customers to update their own subscriptions (pause, cancel, etc.)
CREATE POLICY "customers_can_update_own_subscriptions" ON public.customer_subscriptions
  FOR UPDATE
  USING (
    customer_id IN (
      SELECT id FROM public.customers 
      WHERE email = current_setting('request.jwt.claims', true)::json->>'email'
    )
  );

-- Allow admin users to view all subscriptions
CREATE POLICY "admins_can_view_all_subscriptions" ON public.customer_subscriptions
  FOR SELECT
  USING (
    EXISTS (
      SELECT 1 FROM public.staff
      WHERE id = (current_setting('request.jwt.claims', true)::json->>'sub')::uuid
    )
  );

-- Allow admin/manager users to manage all subscriptions
CREATE POLICY "admins_can_manage_subscriptions" ON public.customer_subscriptions
  FOR ALL
  USING (
    EXISTS (
      SELECT 1 FROM public.staff
      WHERE id = (current_setting('request.jwt.claims', true)::json->>'sub')::uuid
      AND role IN ('admin', 'manager')
    )
  )
  WITH CHECK (
    EXISTS (
      SELECT 1 FROM public.staff
      WHERE id = (current_setting('request.jwt.claims', true)::json->>'sub')::uuid
      AND role IN ('admin', 'manager')
    )
  );

-- Fix RLS policies for subscription_billing table

-- Drop existing restrictive policy
DROP POLICY IF EXISTS "subscription_billing_select_own" ON public.subscription_billing;

-- Allow public users to insert billing records (for automated billing)
CREATE POLICY "public_can_create_billing_records" ON public.subscription_billing
  FOR INSERT
  WITH CHECK (true);

-- Allow customers to view their own billing records
CREATE POLICY "customers_can_view_own_billing" ON public.subscription_billing
  FOR SELECT
  USING (
    subscription_id IN (
      SELECT cs.id FROM public.customer_subscriptions cs
      JOIN public.customers c ON cs.customer_id = c.id
      WHERE c.email = current_setting('request.jwt.claims', true)::json->>'email'
    )
  );

-- Allow admin users to view all billing records
CREATE POLICY "admins_can_view_all_billing" ON public.subscription_billing
  FOR SELECT
  USING (
    EXISTS (
      SELECT 1 FROM public.staff
      WHERE id = (current_setting('request.jwt.claims', true)::json->>'sub')::uuid
    )
  );

-- Allow admin/manager users to manage all billing records
CREATE POLICY "admins_can_manage_billing" ON public.subscription_billing
  FOR ALL
  USING (
    EXISTS (
      SELECT 1 FROM public.staff
      WHERE id = (current_setting('request.jwt.claims', true)::json->>'sub')::uuid
      AND role IN ('admin', 'manager')
    )
  )
  WITH CHECK (
    EXISTS (
      SELECT 1 FROM public.staff
      WHERE id = (current_setting('request.jwt.claims', true)::json->>'sub')::uuid
      AND role IN ('admin', 'manager')
    )
  );
[V0_FILE]typescript:file="app/actions/subscriptions.ts" isMerged="true"
"use server"

import { createClient } from "@supabase/supabase-js"

// Create a Supabase client with service role to bypass RLS
const supabaseAdmin = createClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY!, {
  auth: {
    autoRefreshToken: false,
    persistSession: false,
  },
})

interface SubscriptionFormData {
  name: string
  email: string
  phone: string
  island: string
  address: string
  planId: string
}

export async function createSubscription(formData: SubscriptionFormData) {
  try {
    // First, get the subscription plan details
    const { data: plan, error: planError } = await supabaseAdmin
      .from("subscription_plans")
      .select("*")
      .eq("id", formData.planId)
      .eq("is_active", true)
      .single()

if (planError || !plan) {
      return { success: false, error: "Subscription plan not found or inactive" }
    }

// Check if customer exists
    let customerId: string

const { data: existingCustomer } = await supabaseAdmin
      .from("customers")
      .select("id")
      .eq("email", formData.email)
      .single()

if (existingCustomer) {
      customerId = existingCustomer.id

// Update customer information
      await supabaseAdmin
        .from("customers")
        .update({
          name: formData.name,
          phone: formData.phone,
          island: formData.island,
          address: formData.address,
          updated_at: new Date().toISOString(),
        })
        .eq("id", customerId)
    } else {
      // Create new customer
      const { data: newCustomer, error: customerError } = await supabaseAdmin
        .from("customers")
        .insert([
          {
            name: formData.name,
            email: formData.email,
            phone: formData.phone,
            island: formData.island,
            address: formData.address,
          },
        ])
        .select("id")
        .single()

if (customerError || !newCustomer) {
        return { success: false, error: "Failed to create customer record" }
      }
      customerId = newCustomer.id
    }

// Calculate next billing and service dates
    const startDate = new Date()
    const nextBillingDate = new Date(startDate)
    const nextServiceDate = new Date(startDate)

// Add billing cycle to start date
    if (plan.billing_cycle === "monthly") {
      nextBillingDate.setMonth(nextBillingDate.getMonth() + 1)
    } else if (plan.billing_cycle === "quarterly") {
      nextBillingDate.setMonth(nextBillingDate.getMonth() + 3)
    } else if (plan.billing_cycle === "yearly") {
      nextBillingDate.setFullYear(nextBillingDate.getFullYear() + 1)
    }

// Add service frequency to start date
    if (plan.service_frequency === "monthly") {
      nextServiceDate.setMonth(nextServiceDate.getMonth() + 1)
    } else if (plan.service_frequency === "quarterly") {
      nextServiceDate.setMonth(nextServiceDate.getMonth() + 3)
    } else if (plan.service_frequency === "bi-annual") {
      nextServiceDate.setMonth(nextServiceDate.getMonth() + 6)
    } else if (plan.service_frequency === "annual") {
      nextServiceDate.setFullYear(nextServiceDate.getFullYear() + 1)
    }

// Create subscription
    const { data: subscription, error: subscriptionError } = await supabaseAdmin
      .from("customer_subscriptions")
      .insert([
        {
          customer_id: customerId,
          subscription_plan_id: plan.id,
          start_date: startDate.toISOString().split("T")[0],
          next_billing_date: nextBillingDate.toISOString().split("T")[0],
          next_service_date: nextServiceDate.toISOString().split("T")[0],
          status: "active",
          emergency_calls_used: 0,
          auto_renew: true,
        },
      ])
      .select("id")
      .single()

if (subscriptionError || !subscription) {
      return { success: false, error: "Failed to create subscription" }
    }

return { success: true, subscriptionId: subscription.id }
  } catch (error) {
    console.error("Error in createSubscription:", error)
    return { success: false, error: "An unexpected error occurred" }
  }
}
[V0_FILE]typescriptreact:file="app/subscriptions/subscribe/[planId]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { createSubscription } from "@/app/actions/subscriptions"
import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
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 { Badge } from "@/components/ui/badge"
import { ArrowLeft, CheckCircle, CreditCard } from "lucide-react"
import { createClient } from "@/lib/supabase/client"

interface SubscriptionPlan {
  id: string
  name: string
  description: string
  price: string
  billing_cycle: string
  service_frequency: string
  max_emergency_calls: number
  priority_level: string
  discount_percentage: string
}

export default function SubscribePage({ params }: { params: { planId: string } }) {
  const router = useRouter()
  const supabase = createClient()
  const [plan, setPlan] = useState<SubscriptionPlan | null>(null)
  const [loading, setLoading] = useState(true)
  const [subscribing, setSubscribing] = useState(false)
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    island: "",
    address: "",
  })

useEffect(() => {
    fetchPlan()
  }, [params.planId])

const fetchPlan = async () => {
    try {
      const { data, error } = await supabase
        .from("subscription_plans")
        .select("*")
        .eq("id", params.planId)
        .eq("is_active", true)
        .single()

if (error) throw error
      setPlan(data)
    } catch (error) {
      console.error("Error fetching plan:", error)
      router.push("/subscriptions")
    } finally {
      setLoading(false)
    }
  }

const handleSubscribe = async (e: React.FormEvent) => {
    e.preventDefault()
    setSubscribing(true)

try {
      const result = await createSubscription({
        name: formData.name,
        email: formData.email,
        phone: formData.phone,
        island: formData.island,
        address: formData.address,
        planId: params.planId,
      })

if (!result.success) {
        throw new Error(result.error || "Failed to create subscription")
      }

// Redirect to success page
      router.push("/subscriptions/success")
    } catch (error) {
      console.error("Error creating subscription:", error)
      alert(error instanceof Error ? error.message : "Failed to create subscription. Please try again.")
    } finally {
      setSubscribing(false)
    }
  }

if (loading) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
          <p className="text-muted-foreground">Loading subscription plan...</p>
        </div>
      </div>
    )
  }

if (!plan) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-2xl font-bold mb-4">Plan Not Found</h1>
          <p className="text-muted-foreground mb-6">
            The subscription plan you're looking for doesn't exist or is no longer available.
          </p>
          <Button asChild>
            <a href="/subscriptions">View Available Plans</a>
          </Button>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b bg-card">
        <div className="container mx-auto px-4 py-6">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-2xl font-bold text-primary">Subscribe to {plan.name}</h1>
              <p className="text-muted-foreground">Complete your subscription and start saving on AC maintenance</p>
            </div>
            <Button variant="outline" asChild>
              <a href="/subscriptions" className="flex items-center gap-2">
                <ArrowLeft className="h-4 w-4" />
                Back to Plans
              </a>
            </Button>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-12">
        <div className="max-w-4xl mx-auto grid md:grid-cols-2 gap-12">
          {/* Plan Summary */}
          <div>
            <Card className="sticky top-8">
              <CardHeader>
                <CardTitle className="flex items-center justify-between">
                  {plan.name}
                  <Badge variant="secondary">Save {plan.discount_percentage}%</Badge>
                </CardTitle>
                <CardDescription>{plan.description}</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="text-center p-6 bg-primary/5 rounded-lg">
                  <div className="text-3xl font-bold text-primary">${Number.parseFloat(plan.price).toFixed(2)}</div>
                  <div className="text-muted-foreground">per {plan.billing_cycle}</div>
                </div>

<div className="space-y-4">
                  <h4 className="font-semibold">What's Included:</h4>
                  <ul className="space-y-3">
                    <li className="flex items-center gap-3">
                      <CheckCircle className="w-5 h-5 text-primary flex-shrink-0" />
                      <span className="text-sm">Service every {plan.service_frequency}</span>
                    </li>
                    <li className="flex items-center gap-3">
                      <CheckCircle className="w-5 h-5 text-primary flex-shrink-0" />
                      <span className="text-sm">{plan.max_emergency_calls} emergency calls per year</span>
                    </li>
                    <li className="flex items-center gap-3">
                      <CheckCircle className="w-5 h-5 text-primary flex-shrink-0" />
                      <span className="text-sm capitalize">{plan.priority_level} priority service</span>
                    </li>
                    <li className="flex items-center gap-3">
                      <CheckCircle className="w-5 h-5 text-primary flex-shrink-0" />
                      <span className="text-sm">Complete AC maintenance</span>
                    </li>
                    <li className="flex items-center gap-3">
                      <CheckCircle className="w-5 h-5 text-primary flex-shrink-0" />
                      <span className="text-sm">Filter cleaning & replacement</span>
                    </li>
                  </ul>
                </div>
              </CardContent>
            </Card>
          </div>

{/* Subscription Form */}
          <div>
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <CreditCard className="w-5 h-5" />
                  Subscription Details
                </CardTitle>
                <CardDescription>Enter your information to start your AC maintenance subscription</CardDescription>
              </CardHeader>
              <CardContent>
                <form onSubmit={handleSubscribe} className="space-y-6">
                  <div className="grid grid-cols-1 gap-4">
                    <div>
                      <Label htmlFor="name">Full Name</Label>
                      <Input
                        id="name"
                        value={formData.name}
                        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                        placeholder="Enter your full name"
                        required
                      />
                    </div>

<div>
                      <Label htmlFor="email">Email Address</Label>
                      <Input
                        id="email"
                        type="email"
                        value={formData.email}
                        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                        placeholder="Enter your email"
                        required
                      />
                    </div>

<div>
                      <Label htmlFor="phone">Phone Number</Label>
                      <Input
                        id="phone"
                        value={formData.phone}
                        onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                        placeholder="Enter your phone number"
                        required
                      />
                    </div>

<div>
                      <Label htmlFor="island">Island</Label>
                      <Input
                        id="island"
                        value={formData.island}
                        onChange={(e) => setFormData({ ...formData, island: e.target.value })}
                        placeholder="Enter your island"
                        required
                      />
                    </div>

<div>
                      <Label htmlFor="address">Address</Label>
                      <Input
                        id="address"
                        value={formData.address}
                        onChange={(e) => setFormData({ ...formData, address: e.target.value })}
                        placeholder="Enter your address"
                      />
                    </div>
                  </div>

<div className="bg-muted/50 p-4 rounded-lg">
                    <h4 className="font-semibold mb-2">Billing Information</h4>
                    <p className="text-sm text-muted-foreground mb-2">
                      Your first payment of ${Number.parseFloat(plan.price).toFixed(2)} will be processed after
                      subscription confirmation.
                    </p>
                    <p className="text-sm text-muted-foreground">You can cancel anytime. No long-term contracts.</p>
                  </div>

<Button type="submit" disabled={subscribing} className="w-full" size="lg">
                    {subscribing
                      ? "Processing..."
                      : `Subscribe for $${Number.parseFloat(plan.price).toFixed(2)}/${plan.billing_cycle}`}
                  </Button>
                </form>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[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 {
  /* Updated color tokens to match HETA Maldives emerald green brand theme */
  --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.55 0.18 165);
  --primary-foreground: oklch(0.99 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.85 0.12 165);
  --accent-foreground: oklch(0.25 0.15 165);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.99 0 0);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.55 0.18 165);
  --chart-1: oklch(0.55 0.18 165);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.55 0.18 165);
  --sidebar-primary-foreground: oklch(0.99 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.55 0.18 165);
}

.dark {
  /* Updated dark mode tokens to maintain emerald theme consistency */
  --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.65 0.18 165);
  --primary-foreground: oklch(0.99 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.35 0.15 165);
  --accent-foreground: oklch(0.85 0.12 165);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.99 0 0);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.65 0.18 165);
  --chart-1: oklch(0.65 0.18 165);
  --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.65 0.18 165);
  --sidebar-primary-foreground: oklch(0.99 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.65 0.18 165);
}

@theme inline {
  /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */
  --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]css:file="styles/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);
  /* Updated to use emerald green as primary brand color */
  --primary: oklch(0.55 0.18 165);
  --primary-foreground: oklch(0.99 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.85 0.12 165);
  --accent-foreground: oklch(0.25 0.15 165);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.99 0 0);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.55 0.18 165);
  --chart-1: oklch(0.55 0.18 165);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.55 0.18 165);
  --sidebar-primary-foreground: oklch(0.99 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.55 0.18 165);
}

.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);
  /* Updated dark mode to maintain emerald green brand consistency */
  --primary: oklch(0.65 0.18 165);
  --primary-foreground: oklch(0.99 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.35 0.15 165);
  --accent-foreground: oklch(0.85 0.12 165);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.99 0 0);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.65 0.18 165);
  --chart-1: oklch(0.65 0.18 165);
  --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.65 0.18 165);
  --sidebar-primary-foreground: oklch(0.99 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.65 0.18 165);
}

@theme inline {
  --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]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Phone, Mail, MapPin, Clock, CheckCircle, Star, Wrench, Shield, Zap, Calendar } from "lucide-react"
import { createClient } from "@/lib/supabase/server"

export default async function HomePage() {
  const supabase = await createClient()

// Fetch active subscription plans
  const { data: subscriptionPlans } = await supabase
    .from("subscription_plans")
    .select("*")
    .eq("is_active", true)
    .order("price", { ascending: true })
    .limit(3)

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b bg-card/50 backdrop-blur-sm sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
                <Zap className="w-6 h-6 text-primary-foreground" />
              </div>
              <div>
                <h1 className="text-xl font-bold text-foreground">HETA Maldives</h1>
                <p className="text-sm text-muted-foreground">AC Servicing Experts</p>
              </div>
            </div>
            <nav className="hidden md:flex items-center gap-6">
              <a href="#services" className="text-foreground hover:text-primary transition-colors">
                Services
              </a>
              <a href="#subscriptions" className="text-foreground hover:text-primary transition-colors">
                Subscriptions
              </a>
              <a href="#about" className="text-foreground hover:text-primary transition-colors">
                About
              </a>
              <a href="#contact" className="text-foreground hover:text-primary transition-colors">
                Contact
              </a>
              <Button asChild>
                <a href="/booking">Book Service</a>
              </Button>
            </nav>
            <Button variant="outline" size="sm" className="md:hidden bg-transparent">
              <a href="/booking">Book Now</a>
            </Button>
          </div>
        </div>
      </header>

{/* Hero Section */}
      <section className="py-20 bg-gradient-to-br from-background to-muted">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <Badge className="mb-4" variant="secondary">
              Trusted AC Experts in Maldives
            </Badge>
            <h1 className="text-4xl md:text-6xl font-bold text-balance mb-6">
              Professional AC Services for Your <span className="text-primary">Tropical Paradise</span>
            </h1>
            <p className="text-xl text-muted-foreground text-pretty mb-8 max-w-2xl mx-auto">
              Keep your home and business cool with HETA Maldives' expert air conditioning repair, maintenance, and
              installation services. Available 24/7 across all islands.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button size="lg" className="text-lg px-8">
                <Phone className="w-5 h-5 mr-2" />
                Call Now: +960 9287455
              </Button>
              <Button size="lg" variant="outline" className="text-lg px-8 bg-transparent" asChild>
                <a href="/booking">Schedule Online</a>
              </Button>
            </div>
          </div>
        </div>
      </section>

{/* Services Section */}
      <section id="services" className="py-20">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-4">Our AC Services</h2>
            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
              Comprehensive air conditioning solutions designed for the unique climate of the Maldives
            </p>
          </div>

<div className="grid md:grid-cols-3 gap-8">
            <Card className="text-center hover:shadow-lg transition-shadow">
              <CardHeader>
                <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Wrench className="w-8 h-8 text-primary" />
                </div>
                <CardTitle>AC Repair</CardTitle>
                <CardDescription>Fast and reliable repair services for all AC brands and models</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="text-left space-y-2 mb-6">
                  <li className="flex items-center gap-2">
                    <CheckCircle className="w-4 h-4 text-primary" />
                    <span className="text-sm">Emergency 24/7 service</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="w-4 h-4 text-primary" />
                    <span className="text-sm">All brands supported</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="w-4 h-4 text-primary" />
                    <span className="text-sm">Same-day service</span>
                  </li>
                </ul>
                <Button variant="outline" className="w-full bg-transparent" asChild>
                  <a href="/booking">Book Repair</a>
                </Button>
              </CardContent>
            </Card>

<Card className="text-center hover:shadow-lg transition-shadow">
              <CardHeader>
                <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Shield className="w-8 h-8 text-primary" />
                </div>
                <CardTitle>AC Maintenance</CardTitle>
                <CardDescription>Regular maintenance to keep your AC running efficiently year-round</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="text-left space-y-2 mb-6">
                  <li className="flex items-center gap-2">
                    <CheckCircle className="w-4 h-4 text-primary" />
                    <span className="text-sm">Monthly service plans</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="w-4 h-4 text-primary" />
                    <span className="text-sm">Filter cleaning & replacement</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="w-4 h-4 text-primary" />
                    <span className="text-sm">Energy efficiency optimization</span>
                  </li>
                </ul>
                <Button variant="outline" className="w-full bg-transparent" asChild>
                  <a href="/booking">Schedule Maintenance</a>
                </Button>
              </CardContent>
            </Card>

<Card className="text-center hover:shadow-lg transition-shadow">
              <CardHeader>
                <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Zap className="w-8 h-8 text-primary" />
                </div>
                <CardTitle>AC Installation</CardTitle>
                <CardDescription>Professional installation of new AC systems for homes and businesses</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="text-left space-y-2 mb-6">
                  <li className="flex items-center gap-2">
                    <CheckCircle className="w-4 h-4 text-primary" />
                    <span className="text-sm">Free consultation</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="w-4 h-4 text-primary" />
                    <span className="text-sm">Energy-efficient models</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="w-4 h-4 text-primary" />
                    <span className="text-sm">2-year warranty</span>
                  </li>
                </ul>
                <Button variant="outline" className="w-full bg-transparent" asChild>
                  <a href="/booking">Get Quote</a>
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Subscription Plans Section */}
      <section id="subscriptions" className="py-20 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <Badge className="mb-4" variant="secondary">
              Save with Subscription Plans
            </Badge>
            <h2 className="text-3xl md:text-4xl font-bold mb-4">AC Maintenance Subscriptions</h2>
            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
              Keep your AC running perfectly year-round with our affordable maintenance plans. Save money and ensure
              optimal performance.
            </p>
          </div>

<div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
            {subscriptionPlans && subscriptionPlans.length > 0 ? (
              subscriptionPlans.map((plan) => (
                <Card
                  key={plan.id}
                  className={`relative hover:shadow-lg transition-shadow ${plan.priority_level === "premium" ? "border-primary shadow-md" : ""}`}
                >
                  {plan.priority_level === "premium" && (
                    <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
                      <Badge className="bg-primary text-primary-foreground">Most Popular</Badge>
                    </div>
                  )}
                  <CardHeader className="text-center">
                    <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                      <Calendar className="w-8 h-8 text-primary" />
                    </div>
                    <CardTitle className="text-xl">{plan.name}</CardTitle>
                    <CardDescription>{plan.description}</CardDescription>
                    <div className="mt-4">
                      <div className="text-3xl font-bold text-primary">${Number.parseFloat(plan.price).toFixed(2)}</div>
                      <div className="text-sm text-muted-foreground">per {plan.billing_cycle}</div>
                      {plan.discount_percentage > 0 && (
                        <Badge variant="secondary" className="mt-2">
                          {plan.discount_percentage}% savings
                        </Badge>
                      )}
                    </div>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-3 mb-6">
                      <li className="flex items-center gap-2">
                        <CheckCircle className="w-4 h-4 text-primary flex-shrink-0" />
                        <span className="text-sm">Service every {plan.service_frequency}</span>
                      </li>
                      <li className="flex items-center gap-2">
                        <CheckCircle className="w-4 h-4 text-primary flex-shrink-0" />
                        <span className="text-sm">{plan.max_emergency_calls} emergency calls included</span>
                      </li>
                      <li className="flex items-center gap-2">
                        <CheckCircle className="w-4 h-4 text-primary flex-shrink-0" />
                        <span className="text-sm">{plan.priority_level} priority service</span>
                      </li>
                      <li className="flex items-center gap-2">
                        <CheckCircle className="w-4 h-4 text-primary flex-shrink-0" />
                        <span className="text-sm">Filter cleaning & replacement</span>
                      </li>
                      <li className="flex items-center gap-2">
                        <CheckCircle className="w-4 h-4 text-primary flex-shrink-0" />
                        <span className="text-sm">Performance optimization</span>
                      </li>
                    </ul>
                    <Button
                      className={`w-full ${plan.priority_level === "premium" ? "" : "variant-outline bg-transparent"}`}
                      variant={plan.priority_level === "premium" ? "default" : "outline"}
                      asChild
                    >
                      <a href={`/subscriptions/subscribe/${plan.id}`}>Choose {plan.name}</a>
                    </Button>
                  </CardContent>
                </Card>
              ))
            ) : (
              <div className="col-span-full text-center py-12">
                <Calendar className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
                <h3 className="text-xl font-semibold mb-2">Subscription Plans Coming Soon</h3>
                <p className="text-muted-foreground">
                  We're preparing amazing maintenance plans for you. Check back soon!
                </p>
              </div>
            )}
          </div>

<div className="text-center mt-12">
            <Button variant="outline" size="lg" className="bg-transparent" asChild>
              <a href="/subscriptions">View All Plans</a>
            </Button>
          </div>
        </div>
      </section>

{/* Why Choose Us Section */}
      <section className="py-20 bg-muted/50">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-16">
              <h2 className="text-3xl md:text-4xl font-bold mb-4">Why Choose HETA Maldives?</h2>
              <p className="text-xl text-muted-foreground">
                Over 10 years of experience serving the Maldives with reliable AC solutions
              </p>
            </div>

<div className="grid md:grid-cols-2 gap-12 items-center">
              <div>
                <div className="space-y-6">
                  <div className="flex items-start gap-4">
                    <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
                      <Clock className="w-6 h-6 text-primary" />
                    </div>
                    <div>
                      <h3 className="text-xl font-semibold mb-2">24/7 Emergency Service</h3>
                      <p className="text-muted-foreground">
                        AC problems don't wait for business hours. We're available around the clock for emergency
                        repairs.
                      </p>
                    </div>
                  </div>

<div className="flex items-start gap-4">
                    <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
                      <Star className="w-6 h-6 text-primary" />
                    </div>
                    <div>
                      <h3 className="text-xl font-semibold mb-2">Certified Technicians</h3>
                      <p className="text-muted-foreground">
                        Our team is fully certified and trained on the latest AC technologies and tropical climate
                        requirements.
                      </p>
                    </div>
                  </div>

<div className="flex items-start gap-4">
                    <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
                      <MapPin className="w-6 h-6 text-primary" />
                    </div>
                    <div>
                      <h3 className="text-xl font-semibold mb-2">Island-Wide Coverage</h3>
                      <p className="text-muted-foreground">
                        We serve all inhabited islands in the Maldives with fast response times and reliable service.
                      </p>
                    </div>
                  </div>
                </div>
              </div>

<div className="bg-card p-8 rounded-lg">
                <h3 className="text-2xl font-bold mb-6 text-center">Ready to Book?</h3>
                <p className="text-muted-foreground text-center mb-6">
                  Get started with our easy online booking system or call us directly for immediate assistance.
                </p>
                <div className="space-y-4">
                  <Button asChild className="w-full" size="lg">
                    <a href="/booking">Book Service Online</a>
                  </Button>
                  <Button variant="outline" className="w-full bg-transparent" size="lg">
                    <Phone className="w-4 h-4 mr-2" />
                    Call +960 9287455
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Contact Section */}
      <section id="contact" className="py-20">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-4">Contact HETA Maldives</h2>
            <p className="text-xl text-muted-foreground">
              Ready to fix your AC? Get in touch with our expert team today
            </p>
          </div>

<div className="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
            <Card className="text-center">
              <CardHeader>
                <Phone className="w-12 h-12 text-primary mx-auto mb-4" />
                <CardTitle>Call Us</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-2xl font-bold text-primary mb-2">+960 9287455</p>
                <p className="text-muted-foreground">24/7 Emergency Hotline</p>
              </CardContent>
            </Card>

<Card className="text-center">
              <CardHeader>
                <Mail className="w-12 h-12 text-primary mx-auto mb-4" />
                <CardTitle>Email Us</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-lg font-semibold mb-2">service@hetamaldives.com</p>
                <p className="text-muted-foreground">We'll respond within 2 hours</p>
              </CardContent>
            </Card>

<Card className="text-center">
              <CardHeader>
                <MapPin className="w-12 h-12 text-primary mx-auto mb-4" />
                <CardTitle>Service Area</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-lg font-semibold mb-2">All Maldives Islands</p>
                <p className="text-muted-foreground">Fast response nationwide</p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="bg-card border-t py-12">
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-4 gap-8">
            <div>
              <div className="flex items-center gap-2 mb-4">
                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
                  <Zap className="w-5 h-5 text-primary-foreground" />
                </div>
                <span className="text-lg font-bold">HETA Maldives</span>
              </div>
              <p className="text-muted-foreground mb-4">
                Your trusted partner for all AC servicing needs in the Maldives. Professional, reliable, and available
                24/7.
              </p>
              <div className="flex gap-4">
                <Button asChild size="sm">
                  <a href="/customer">Customer Portal</a>
                </Button>
                <Button asChild variant="outline" size="sm" className="bg-transparent">
                  <a href="/admin">Staff Login</a>
                </Button>
              </div>
            </div>

<div>
              <h4 className="font-semibold mb-4">Services</h4>
              <ul className="space-y-2 text-muted-foreground">
                <li>
                  <a href="/booking" className="hover:text-primary transition-colors">
                    AC Repair
                  </a>
                </li>
                <li>
                  <a href="/booking" className="hover:text-primary transition-colors">
                    AC Maintenance
                  </a>
                </li>
                <li>
                  <a href="/booking" className="hover:text-primary transition-colors">
                    AC Installation
                  </a>
                </li>
                <li>
                  <a href="/booking" className="hover:text-primary transition-colors">
                    Emergency Service
                  </a>
                </li>
              </ul>
            </div>

<div>
              <h4 className="font-semibold mb-4">Subscriptions</h4>
              <ul className="space-y-2 text-muted-foreground">
                <li>
                  <a href="/subscriptions" className="hover:text-primary transition-colors">
                    View All Plans
                  </a>
                </li>
                <li>
                  <a href="/customer" className="hover:text-primary transition-colors">
                    Manage Subscription
                  </a>
                </li>
                <li>
                  <a href="/customer/billing" className="hover:text-primary transition-colors">
                    Billing History
                  </a>
                </li>
              </ul>
            </div>

<div>
              <h4 className="font-semibold mb-4">Contact Info</h4>
              <div className="space-y-2 text-muted-foreground">
                <p className="flex items-center gap-2">
                  <Phone className="w-4 h-4" />
                  +960 9287455
                </p>
                <p className="flex items-center gap-2">
                  <Mail className="w-4 h-4" />
                  service@hetamaldives.com
                </p>
                <p className="flex items-center gap-2">
                  <MapPin className="w-4 h-4" />
                  Serving All Maldives
                </p>
              </div>
            </div>
          </div>

<div className="border-t mt-8 pt-8 text-center text-muted-foreground">
            <p>© 2024 HETA Maldives. All rights reserved. Professional AC servicing across the Maldives.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/booking/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Calendar, Phone, User, Wrench, Shield, Zap, ArrowLeft, CheckCircle } from "lucide-react"
import Link from "next/link"

export default function BookingPage() {
  const [currentStep, setCurrentStep] = useState(1)
  const [formData, setFormData] = useState({
    serviceType: "",
    urgency: "",
    date: "",
    time: "",
    name: "",
    phone: "",
    email: "",
    island: "",
    address: "",
    description: "",
    acBrand: "",
    acAge: "",
  })

const handleInputChange = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

const nextStep = () => {
    if (currentStep < 4) setCurrentStep(currentStep + 1)
  }

const prevStep = () => {
    if (currentStep > 1) setCurrentStep(currentStep - 1)
  }

const handleSubmit = () => {
    // Here you would typically send the data to your backend
    console.log("Booking submitted:", formData)
    setCurrentStep(5) // Show confirmation
  }

<div className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          {/* Progress Bar */}
          <div className="mb-8">
            <div className="flex items-center justify-between mb-4">
              <h1 className="text-3xl font-bold">Book Your AC Service</h1>
              <Badge variant="secondary">Step {currentStep} of 4</Badge>
            </div>
            <div className="w-full bg-muted rounded-full h-2">
              <div
                className="bg-primary h-2 rounded-full transition-all duration-300"
                style={{ width: `${(currentStep / 4) * 100}%` }}
              ></div>
            </div>
          </div>

{currentStep === 1 && (
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Wrench className="w-6 h-6 text-primary" />
                  Select Your Service
                </CardTitle>
                <CardDescription>Choose the type of AC service you need</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid md:grid-cols-3 gap-4">
                  <Card
                    className={`cursor-pointer transition-all hover:shadow-md ${formData.serviceType === "repair" ? "ring-2 ring-primary bg-primary/5" : ""}`}
                    onClick={() => handleInputChange("serviceType", "repair")}
                  >
                    <CardContent className="p-6 text-center">
                      <Wrench className="w-12 h-12 text-primary mx-auto mb-4" />
                      <h3 className="font-semibold mb-2">AC Repair</h3>
                      <p className="text-sm text-muted-foreground">Fix broken or malfunctioning AC units</p>
                    </CardContent>
                  </Card>

<Card
                    className={`cursor-pointer transition-all hover:shadow-md ${formData.serviceType === "maintenance" ? "ring-2 ring-primary bg-primary/5" : ""}`}
                    onClick={() => handleInputChange("serviceType", "maintenance")}
                  >
                    <CardContent className="p-6 text-center">
                      <Shield className="w-12 h-12 text-primary mx-auto mb-4" />
                      <h3 className="font-semibold mb-2">AC Maintenance</h3>
                      <p className="text-sm text-muted-foreground">Regular cleaning and maintenance</p>
                    </CardContent>
                  </Card>

<Card
                    className={`cursor-pointer transition-all hover:shadow-md ${formData.serviceType === "installation" ? "ring-2 ring-primary bg-primary/5" : ""}`}
                    onClick={() => handleInputChange("serviceType", "installation")}
                  >
                    <CardContent className="p-6 text-center">
                      <Zap className="w-12 h-12 text-primary mx-auto mb-4" />
                      <h3 className="font-semibold mb-2">AC Installation</h3>
                      <p className="text-sm text-muted-foreground">Install new AC systems</p>
                    </CardContent>
                  </Card>
                </div>

<div>
                  <label className="block text-sm font-medium mb-3">Service Urgency</label>
                  <div className="grid md:grid-cols-3 gap-4">
                    <Card
                      className={`cursor-pointer transition-all hover:shadow-md ${formData.urgency === "emergency" ? "ring-2 ring-destructive bg-destructive/5" : ""}`}
                      onClick={() => handleInputChange("urgency", "emergency")}
                    >
                      <CardContent className="p-4 text-center">
                        <h4 className="font-semibold text-destructive">Emergency</h4>
                        <p className="text-xs text-muted-foreground">Within 2 hours</p>
                      </CardContent>
                    </Card>

<Card
                      className={`cursor-pointer transition-all hover:shadow-md ${formData.urgency === "urgent" ? "ring-2 ring-primary bg-primary/5" : ""}`}
                      onClick={() => handleInputChange("urgency", "urgent")}
                    >
                      <CardContent className="p-4 text-center">
                        <h4 className="font-semibold text-primary">Urgent</h4>
                        <p className="text-xs text-muted-foreground">Same day</p>
                      </CardContent>
                    </Card>

<Card
                      className={`cursor-pointer transition-all hover:shadow-md ${formData.urgency === "scheduled" ? "ring-2 ring-primary bg-primary/5" : ""}`}
                      onClick={() => handleInputChange("urgency", "scheduled")}
                    >
                      <CardContent className="p-4 text-center">
                        <h4 className="font-semibold">Scheduled</h4>
                        <p className="text-xs text-muted-foreground">Plan ahead</p>
                      </CardContent>
                    </Card>
                  </div>
                </div>

<div className="flex justify-end">
                  <Button onClick={nextStep} disabled={!formData.serviceType || !formData.urgency} size="lg">
                    Continue
                  </Button>
                </div>
              </CardContent>
            </Card>
          )}

{currentStep === 2 && (
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Calendar className="w-6 h-6 text-primary" />
                  Schedule Your Service
                </CardTitle>
                <CardDescription>Choose your preferred date and time</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid md:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-sm font-medium mb-2">Preferred Date</label>
                    <input
                      type="date"
                      value={formData.date}
                      onChange={(e) => handleInputChange("date", e.target.value)}
                      min={new Date().toISOString().split("T")[0]}
                      className="w-full p-3 border border-border rounded-lg bg-input"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium mb-2">Preferred Time</label>
                    <select
                      value={formData.time}
                      onChange={(e) => handleInputChange("time", e.target.value)}
                      className="w-full p-3 border border-border rounded-lg bg-input"
                    >
                      <option value="">Select time slot</option>
                      <option value="08:00">8:00 AM - 10:00 AM</option>
                      <option value="10:00">10:00 AM - 12:00 PM</option>
                      <option value="12:00">12:00 PM - 2:00 PM</option>
                      <option value="14:00">2:00 PM - 4:00 PM</option>
                      <option value="16:00">4:00 PM - 6:00 PM</option>
                      <option value="18:00">6:00 PM - 8:00 PM</option>
                    </select>
                  </div>
                </div>

<div>
                  <label className="block text-sm font-medium mb-2">AC Brand (if known)</label>
                  <select
                    value={formData.acBrand}
                    onChange={(e) => handleInputChange("acBrand", e.target.value)}
                    className="w-full p-3 border border-border rounded-lg bg-input"
                  >
                    <option value="">Select AC brand</option>
                    <option value="daikin">Daikin</option>
                    <option value="mitsubishi">Mitsubishi</option>
                    <option value="lg">LG</option>
                    <option value="samsung">Samsung</option>
                    <option value="carrier">Carrier</option>
                    <option value="york">York</option>
                    <option value="other">Other</option>
                  </select>
                </div>

<div>
                  <label className="block text-sm font-medium mb-2">AC Age (approximate)</label>
                  <select
                    value={formData.acAge}
                    onChange={(e) => handleInputChange("acAge", e.target.value)}
                    className="w-full p-3 border border-border rounded-lg bg-input"
                  >
                    <option value="">Select age range</option>
                    <option value="0-2">0-2 years</option>
                    <option value="3-5">3-5 years</option>
                    <option value="6-10">6-10 years</option>
                    <option value="10+">10+ years</option>
                  </select>
                </div>

<div className="flex justify-between">
                  <Button variant="outline" onClick={prevStep}>
                    Back
                  </Button>
                  <Button onClick={nextStep} disabled={!formData.date || !formData.time} size="lg">
                    Continue
                  </Button>
                </div>
              </CardContent>
            </Card>
          )}

{currentStep === 3 && (
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <User className="w-6 h-6 text-primary" />
                  Your Information
                </CardTitle>
                <CardDescription>Please provide your contact details and location</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid md:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-sm font-medium mb-2">Full Name *</label>
                    <input
                      type="text"
                      value={formData.name}
                      onChange={(e) => handleInputChange("name", e.target.value)}
                      placeholder="Enter your full name"
                      className="w-full p-3 border border-border rounded-lg bg-input"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium mb-2">Phone Number *</label>
                    <input
                      type="tel"
                      value={formData.phone}
                      onChange={(e) => handleInputChange("phone", e.target.value)}
                      placeholder="+960 9287455"
                      className="w-full p-3 border border-border rounded-lg bg-input"
                    />
                  </div>
                </div>

<div>
                  <label className="block text-sm font-medium mb-2">Email Address</label>
                  <input
                    type="email"
                    value={formData.email}
                    onChange={(e) => handleInputChange("email", e.target.value)}
                    placeholder="your.email@example.com"
                    className="w-full p-3 border border-border rounded-lg bg-input"
                  />
                </div>

<div className="grid md:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-sm font-medium mb-2">Island/Atoll *</label>
                    <select
                      value={formData.island}
                      onChange={(e) => handleInputChange("island", e.target.value)}
                      className="w-full p-3 border border-border rounded-lg bg-input"
                    >
                      <option value="">Select your island</option>
                      <option value="male">Malé</option>
                      <option value="hulhumale">Hulhumalé</option>
                      <option value="vilimale">Vilimalé</option>
                      <option value="addu">Addu City</option>
                      <option value="fuvahmulah">Fuvahmulah</option>
                      <option value="other">Other Island</option>
                    </select>
                  </div>
                  <div>
                    <label className="block text-sm font-medium mb-2">Address/Location *</label>
                    <input
                      type="text"
                      value={formData.address}
                      onChange={(e) => handleInputChange("address", e.target.value)}
                      placeholder="House number, street, area"
                      className="w-full p-3 border border-border rounded-lg bg-input"
                    />
                  </div>
                </div>

<div>
                  <label className="block text-sm font-medium mb-2">Problem Description</label>
                  <textarea
                    value={formData.description}
                    onChange={(e) => handleInputChange("description", e.target.value)}
                    placeholder="Describe the AC issue or your requirements in detail..."
                    rows={4}
                    className="w-full p-3 border border-border rounded-lg bg-input"
                  >

)} {currentStep === 4 && ( Review Your Booking Please review your booking details before confirming

SERVICE TYPE

{formData.serviceType}

URGENCY

{formData.urgency}

DATE & TIME

{formData.date} at {formData.time}

{formData.acBrand && (

AC BRAND

{formData.acBrand}

)}

CUSTOMER

{formData.name}

{formData.phone}

{formData.email &&

{formData.email}

}

LOCATION

{formData.island}

{formData.address}

{formData.description && (

DESCRIPTION

{formData.description}

)}

What happens next?

• We'll call you within 30 minutes to confirm your booking
• Our technician will arrive at your scheduled time
• You'll receive SMS updates about your service

)} {currentStep === 5 && (

Booking Confirmed!

Thank you {formData.name}! Your AC service has been scheduled.

Booking Reference: #AC{Date.now().toString().slice(-6)}

We'll call you at {formData.phone} within 30 minutes to confirm the details.

)}

) } [V0_FILE]typescriptreact:file="app/subscriptions/success/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { CheckCircle, Calendar, Phone, Mail } from "lucide-react" export default function SubscriptionSuccessPage() { return (

Subscription Activated!

Welcome to HETA Maldives! Your AC maintenance subscription is now active and we'll be in touch soon to schedule your first service.

What Happens Next? Here's what you can expect from your new subscription

Confirmation Call

We'll call you within 24 hours to confirm your subscription and schedule your first maintenance visit.

First Service

Our certified technician will visit your location for a comprehensive AC maintenance service.

Regular Maintenance

We'll automatically schedule your regular maintenance visits according to your plan.

Need Help?

Call us at +960 9287455

Email Support

service@hetamaldives.com

) } [V0_FILE]typescriptreact:file="app/auth/sign-up-success/page.tsx" isEdit="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import Link from "next/link" export default function Page() { return (

Thank you for signing up! Check your email to confirm

You've successfully signed up. Please check your email to confirm your account before signing in.

) }