[V0_FILE]sql:file="scripts/03-seed-data.sql" -- Insert sample business categories INSERT INTO business_categories (name, payout_amount, checklist) VALUES ('Restaurant', 20000, '{ "questions": [ { "id": "cleanliness_rating", "question": "Cleanliness rating (1-10)?", "type": "rating", "min": 1, "max": 10, "required": true }, { "id": "ingredient_quality", "question": "Quality of ingredients used?", "type": "text_input", "required": true }, { "id": "health_certificates", "question": "Are health and safety certificates visible?", "type": "checkbox", "required": true }, { "id": "kitchen_photo", "question": "Upload photo of kitchen cleanliness.", "type": "photo_upload", "required": true } ] }'), ('Medical Clinic', 25000, '{ "questions": [ { "id": "facility_cleanliness", "question": "Overall facility cleanliness (1-10)?", "type": "rating", "min": 1, "max": 10, "required": true }, { "id": "equipment_condition", "question": "Condition of medical equipment?", "type": "text_input", "required": true }, { "id": "staff_hygiene", "question": "Staff following proper hygiene protocols?", "type": "checkbox", "required": true }, { "id": "facility_photo", "question": "Upload photo of main facility area.", "type": "photo_upload", "required": true } ] }'), ('Retail Store', 15000, '{ "questions": [ { "id": "store_organization", "question": "Store organization and cleanliness (1-10)?", "type": "rating", "min": 1, "max": 10, "required": true }, { "id": "product_quality", "question": "Overall product quality assessment?", "type": "text_input", "required": true }, { "id": "customer_service", "question": "Staff provides good customer service?", "type": "checkbox", "required": true }, { "id": "store_photo", "question": "Upload photo of store interior.", "type": "photo_upload", "required": true } ] }'); [V0_FILE]typescriptreact:file="app/consumer/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]plaintext:file=".env.example" # Supabase Configuration NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key # Optional: For production deployment SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key [V0_FILE]typescriptreact:file="lib/supabase.ts" isQuickEdit="true" import { createClient } from "@supabase/supabase-js" const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || "https://placeholder.supabase.co" const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || "placeholder-key" // Check if we have valid Supabase configuration const hasValidConfig = process.env.NEXT_PUBLIC_SUPABASE_URL && process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY if (!hasValidConfig && typeof window !== "undefined") { console.warn( "Supabase configuration missing. Please set NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY environment variables.", ) } export const supabase = createClient(supabaseUrl, supabaseAnonKey) // Export a flag to check if Supabase is properly configured export const isSupabaseConfigured = hasValidConfig export type Database = { public: { Tables: { profiles: { Row: { id: string role: "admin" | "business" | "auditor" | "supplier" | "consumer" full_name: string email: string phone_number: string | null address: string | null city: string | null pin_code: string | null aadhaar_card_url: string | null pan_card_url: string | null driving_license_url: string | null upi_handle: string | null bank_account_number: string | null created_at: string updated_at: string } Insert: { id: string role?: "admin" | "business" | "auditor" | "supplier" | "consumer" full_name: string email: string phone_number?: string | null address?: string | null city?: string | null pin_code?: string | null aadhaar_card_url?: string | null pan_card_url?: string | null driving_license_url?: string | null upi_handle?: string | null bank_account_number?: string | null } Update: { role?: "admin" | "business" | "auditor" | "supplier" | "consumer" full_name?: string email?: string phone_number?: string | null address?: string | null city?: string | null pin_code?: string | null aadhaar_card_url?: string | null pan_card_url?: string | null driving_license_url?: string | null upi_handle?: string | null bank_account_number?: string | null } } business_categories: { Row: { id: string name: string payout_amount: number checklist: any created_at: string updated_at: string } Insert: { name: string payout_amount: number checklist: any } Update: { name?: string payout_amount?: number checklist?: any } } businesses: { Row: { id: string name: string category_id: string address: string city: string pin_code: string phone_number: string | null email: string | null created_at: string updated_at: string } Insert: { name: string category_id: string address: string city: string pin_code: string phone_number?: string | null email?: string | null } Update: { name?: string category_id?: string address?: string city?: string pin_code?: string phone_number?: string | null email?: string | null } } } } } [V0_FILE]typescriptreact:file="app/auth/register/page.tsx" isQuickEdit="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import { supabase, isSupabaseConfigured } from "@/lib/supabase" 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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Textarea } from "@/components/ui/textarea" import { Alert, AlertDescription } from "@/components/ui/alert" import { useToast } from "@/hooks/use-toast" import { AlertTriangle } from "lucide-react" import { Info } from "lucide-react" import { demoUsers } from "@/lib/demo-data" import { Badge } from "@/components/ui/badge" const isDemoMode = !isSupabaseConfigured export default function RegisterPage() { const [formData, setFormData] = useState({ email: "", password: "", fullName: "", phoneNumber: "", address: "", city: "", pinCode: "", role: "consumer" as "consumer" | "auditor" | "supplier", upiHandle: "", bankAccountNumber: "", }) const [loading, setLoading] = useState(false) const router = useRouter() const { toast } = useToast() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setLoading(true) try { if (isDemoMode) { // Demo mode registration const newUser = { id: `user-${Date.now()}`, role: formData.role, full_name: formData.fullName, email: formData.email, phone_number: formData.phoneNumber, address: formData.address, city: formData.city, pin_code: formData.pinCode, upi_handle: formData.role === "auditor" ? formData.upiHandle : null, bank_account_number: formData.role === "auditor" ? formData.bankAccountNumber : null, } // Add to demo users array demoUsers.push(newUser) toast({ title: "Success", description: "Account created successfully! (Demo Mode) You can now sign in.", }) router.push("/auth/login") } else { // Real Supabase registration const { data: authData, error: authError } = await supabase.auth.signUp({ email: formData.email, password: formData.password, }) if (authError) throw authError if (authData.user) { const { error: profileError } = await supabase.from("profiles").insert({ id: authData.user.id, role: formData.role, full_name: formData.fullName, email: formData.email, phone_number: formData.phoneNumber, address: formData.address, city: formData.city, pin_code: formData.pinCode, upi_handle: formData.role === "auditor" ? formData.upiHandle : null, bank_account_number: formData.role === "auditor" ? formData.bankAccountNumber : null, }) if (profileError) throw profileError toast({ title: "Success", description: "Account created successfully! Please check your email to verify your account.", }) router.push("/auth/login") } } } catch (error: any) { toast({ title: "Error", description: error.message, variant: "destructive", }) } finally { setLoading(false) } } return (

AuditX-Biz {isDemoMode && Demo}

Create your account {isDemoMode && ( Demo Mode: Registration will create a demo account. You can then sign in with your email and "demo123" as the password. )} {!isSupabaseConfigured && !isDemoMode && ( Supabase configuration is required to register. Please check your environment variables. )}

Full Name setFormData({ ...formData, fullName: e.target.value })} required />

Email setFormData({ ...formData, email: e.target.value })} required />

Password setFormData({ ...formData, password: e.target.value })} required />

Phone Number setFormData({ ...formData, phoneNumber: e.target.value })} />

Address

setFormData({ ...formData, address: e.target.value })}
              />
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="city">City</Label>
                <Input
                  id="city"
                  placeholder="Enter your city"
                  value={formData.city}
                  onChange={(e) => setFormData({ ...formData, city: e.target.value })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="pinCode">PIN Code</Label>
                <Input
                  id="pinCode"
                  placeholder="Enter your PIN code"
                  value={formData.pinCode}
                  onChange={(e) => setFormData({ ...formData, pinCode: e.target.value })}
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="role">Role</Label>
              <Select
                value={formData.role}
                onValueChange={(value: "consumer" | "auditor" | "supplier") =>
                  setFormData({ ...formData, role: value })
                }
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select your role" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="consumer">Consumer</SelectItem>
                  <SelectItem value="auditor">Auditor</SelectItem>
                  <SelectItem value="supplier">Supplier</SelectItem>
                </SelectContent>
              </Select>
            </div>

{formData.role === "auditor" && (
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="upiHandle">UPI Handle</Label>
                  <Input
                    id="upiHandle"
                    placeholder="Enter your UPI handle"
                    value={formData.upiHandle}
                    onChange={(e) => setFormData({ ...formData, upiHandle: e.target.value })}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="bankAccountNumber">Bank Account Number</Label>
                  <Input
                    id="bankAccountNumber"
                    placeholder="Enter your bank account number"
                    value={formData.bankAccountNumber}
                    onChange={(e) => setFormData({ ...formData, bankAccountNumber: e.target.value })}
                  />
                </div>
              </div>
            )}

<Button type="submit" className="w-full" disabled={loading}>
              {loading ? "Creating Account..." : "Create Account"}
            </Button>
          </form>
          <div className="mt-4 text-center text-sm">
            Already have an account?{" "}
            <Link href="/auth/login" className="text-blue-600 hover:underline">
              Sign in here
            </Link>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/onboard/supplier/page.tsx"
"use client"

import type React from "react"

import { useState } from "react"
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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { useToast } from "@/hooks/use-toast"
import { Truck, ArrowLeft, CheckCircle } from "lucide-react"
import Link from "next/link"

export default function SupplierOnboardingPage() {
  const [formData, setFormData] = useState({
    fullName: "",
    email: "",
    phoneNumber: "",
    address: "",
    city: "",
    pinCode: "",
    vehicleType: "",
    vehicleNumber: "",
    drivingLicense: "",
    experience: "",
  })
  const [loading, setLoading] = useState(false)
  const [submitted, setSubmitted] = useState(false)
  const { toast } = useToast()

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

try {
      // Simulate API call - in real implementation, this would:
      // 1. Create supplier application record
      // 2. Send for admin approval
      // 3. Send confirmation email

await new Promise((resolve) => setTimeout(resolve, 2000))

setSubmitted(true)

toast({
        title: "Application Submitted!",
        description: "Your delivery partner application is under review.",
      })
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message,
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

if (submitted) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center py-12 px-4">
        <Card className="w-full max-w-2xl">
          <CardContent className="text-center p-8">
            <CheckCircle className="h-16 w-16 text-orange-600 mx-auto mb-4" />
            <h1 className="text-2xl font-bold text-gray-900 mb-4">Application Submitted!</h1>
            <p className="text-gray-600 mb-6">Thank you for applying to become a delivery partner with AuditX-Biz.</p>
            <div className="space-y-4 text-left bg-gray-50 p-6 rounded-lg mb-6">
              <div className="flex items-start gap-3">
                <div className="bg-orange-100 rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mt-0.5">
                  <span className="text-xs font-bold text-orange-600">1</span>
                </div>
                <div>
                  <p className="font-medium">Application Review</p>
                  <p className="text-sm text-gray-600">Our team will review your application</p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <div className="bg-orange-100 rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mt-0.5">
                  <span className="text-xs font-bold text-orange-600">2</span>
                </div>
                <div>
                  <p className="font-medium">Document Verification</p>
                  <p className="text-sm text-gray-600">We'll verify your vehicle and license details</p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <div className="bg-orange-100 rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mt-0.5">
                  <span className="text-xs font-bold text-orange-600">3</span>
                </div>
                <div>
                  <p className="font-medium">Account Activation</p>
                  <p className="text-sm text-gray-600">Once approved, you'll receive login credentials</p>
                </div>
              </div>
            </div>
            <Link href="/">
              <Button>Return to Home</Button>
            </Link>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gray-50 py-12 px-4">
      <div className="max-w-2xl mx-auto">
        <div className="mb-6">
          <Link href="/">
            <Button variant="ghost" size="sm">
              <ArrowLeft className="h-4 w-4 mr-2" />
              Back to Home
            </Button>
          </Link>
        </div>

<Card>
          <CardHeader>
            <div className="flex items-center gap-2">
              <Truck className="h-6 w-6 text-orange-600" />
              <CardTitle className="text-2xl">Become a Delivery Partner</CardTitle>
            </div>
            <CardDescription>Join our network of delivery partners and help onboard new businesses</CardDescription>
          </CardHeader>
          <CardContent>
            <Alert className="mb-6">
              <AlertDescription>
                <strong>Requirements:</strong>
                <br />• Valid driving license
                <br />• Own vehicle (bike/car/van)
                <br />• Smartphone for task updates
                <br />• Ability to deliver within your city
              </AlertDescription>
            </Alert>

<form onSubmit={handleSubmit} className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="fullName">Full Name *</Label>
                  <Input
                    id="fullName"
                    placeholder="Enter your full name"
                    value={formData.fullName}
                    onChange={(e) => setFormData({ ...formData, fullName: e.target.value })}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="email">Email Address *</Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="Enter your email"
                    value={formData.email}
                    onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                    required
                  />
                </div>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="phoneNumber">Phone Number *</Label>
                  <Input
                    id="phoneNumber"
                    placeholder="Enter phone number"
                    value={formData.phoneNumber}
                    onChange={(e) => setFormData({ ...formData, phoneNumber: e.target.value })}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="city">City *</Label>
                  <Input
                    id="city"
                    placeholder="Enter your city"
                    value={formData.city}
                    onChange={(e) => setFormData({ ...formData, city: e.target.value })}
                    required
                  />
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="address">Address *</Label>
                <Textarea
                  id="address"
                  placeholder="Enter your complete address"
                  value={formData.address}
                  onChange={(e) => setFormData({ ...formData, address: e.target.value })}
                  required
                />
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="vehicleType">Vehicle Type *</Label>
                  <Input
                    id="vehicleType"
                    placeholder="e.g., Motorcycle, Car, Van"
                    value={formData.vehicleType}
                    onChange={(e) => setFormData({ ...formData, vehicleType: e.target.value })}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="vehicleNumber">Vehicle Number *</Label>
                  <Input
                    id="vehicleNumber"
                    placeholder="Enter vehicle registration number"
                    value={formData.vehicleNumber}
                    onChange={(e) => setFormData({ ...formData, vehicleNumber: e.target.value })}
                    required
                  />
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="drivingLicense">Driving License Number *</Label>
                <Input
                  id="drivingLicense"
                  placeholder="Enter driving license number"
                  value={formData.drivingLicense}
                  onChange={(e) => setFormData({ ...formData, drivingLicense: e.target.value })}
                  required
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="experience">Delivery Experience</Label>
                <Textarea
                  id="experience"
                  placeholder="Describe any delivery or logistics experience (optional)"
                  value={formData.experience}
                  onChange={(e) => setFormData({ ...formData, experience: e.target.value })}
                />
              </div>

<Button type="submit" className="w-full" disabled={loading}>
                {loading ? "Submitting Application..." : "Submit Application"}
              </Button>
            </form>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/01-create-tables.sql"
-- Enable PostGIS extension for geographic operations
CREATE EXTENSION IF NOT EXISTS postgis;

-- Enable RLS (Row Level Security)
ALTER DATABASE postgres SET "app.jwt_secret" TO 'your-jwt-secret';

-- Create enum types
CREATE TYPE user_role AS ENUM ('admin', 'business', 'auditor', 'supplier', 'consumer');
CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'package_sent', 'package_delivered', 'completed');
CREATE TYPE audit_status AS ENUM ('not_started', 'on_field', 'in_progress', 'completed');

-- Users table (extends Supabase auth.users)
CREATE TABLE profiles (
  id UUID REFERENCES auth.users(id) PRIMARY KEY,
  role user_role NOT NULL DEFAULT 'consumer',
  full_name TEXT NOT NULL,
  email TEXT NOT NULL,
  phone_number TEXT,
  address TEXT,
  city TEXT,
  pin_code TEXT,
  latitude DECIMAL(10, 8),
  longitude DECIMAL(11, 8),
  location GEOGRAPHY(Point, 4326), -- PostGIS geography column
  aadhaar_card_url TEXT,
  pan_card_url TEXT,
  driving_license_url TEXT,
  upi_handle TEXT, -- For auditors
  bank_account_number TEXT, -- For auditors
  ifsc_code TEXT, -- For auditors
  vehicle_type TEXT, -- For suppliers
  vehicle_number TEXT, -- For suppliers
  is_approved BOOLEAN DEFAULT false, -- For self-onboarded users
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Business categories table
CREATE TABLE business_categories (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL UNIQUE,
  payout_amount INTEGER NOT NULL, -- Amount in paise (₹200 = 20000 paise)
  checklist JSONB NOT NULL, -- JSON structure for audit questions
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Businesses table
CREATE TABLE businesses (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  category_id UUID REFERENCES business_categories(id) NOT NULL,
  owner_name TEXT NOT NULL,
  address TEXT NOT NULL,
  city TEXT NOT NULL,
  pin_code TEXT NOT NULL,
  latitude DECIMAL(10, 8),
  longitude DECIMAL(11, 8),
  location GEOGRAPHY(Point, 4326), -- PostGIS geography column
  phone_number TEXT,
  email TEXT,
  description TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Supplier tasks table
CREATE TABLE supplier_tasks (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  supplier_id UUID REFERENCES profiles(id) NOT NULL,
  business_id UUID REFERENCES businesses(id) NOT NULL,
  status task_status DEFAULT 'todo',
  distance_km DECIMAL(8, 2), -- Distance from supplier to business
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Auditor tasks table
CREATE TABLE auditor_tasks (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  auditor_id UUID REFERENCES profiles(id) NOT NULL,
  business_id UUID REFERENCES businesses(id) NOT NULL,
  category_id UUID REFERENCES business_categories(id) NOT NULL,
  status audit_status DEFAULT 'not_started',
  payout_amount INTEGER NOT NULL,
  distance_km DECIMAL(8, 2), -- Distance from auditor to business
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Audit reports table
CREATE TABLE audit_reports (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  auditor_task_id UUID REFERENCES auditor_tasks(id) NOT NULL,
  auditor_id UUID REFERENCES profiles(id) NOT NULL,
  business_id UUID REFERENCES businesses(id) NOT NULL,
  responses JSONB NOT NULL, -- JSON structure containing answers to checklist questions
  photos TEXT[], -- Array of photo URLs
  submitted_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Onboarding applications table (for self-onboarded users)
CREATE TABLE onboarding_applications (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  role user_role NOT NULL,
  full_name TEXT NOT NULL,
  email TEXT NOT NULL,
  phone_number TEXT,
  address TEXT,
  city TEXT,
  pin_code TEXT,
  latitude DECIMAL(10, 8),
  longitude DECIMAL(11, 8),
  location GEOGRAPHY(Point, 4326),
  application_data JSONB, -- Store role-specific data
  status TEXT DEFAULT 'pending', -- pending, approved, rejected
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Enable RLS
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
ALTER TABLE business_categories ENABLE ROW LEVEL SECURITY;
ALTER TABLE businesses ENABLE ROW LEVEL SECURITY;
ALTER TABLE supplier_tasks ENABLE ROW LEVEL SECURITY;
ALTER TABLE auditor_tasks ENABLE ROW LEVEL SECURITY;
ALTER TABLE audit_reports ENABLE ROW LEVEL SECURITY;
ALTER TABLE onboarding_applications ENABLE ROW LEVEL SECURITY;

-- RLS Policies
-- Profiles: Users can read their own profile, admins can read all
CREATE POLICY "Users can view own profile" ON profiles FOR SELECT USING (auth.uid() = id);
CREATE POLICY "Users can update own profile" ON profiles FOR UPDATE USING (auth.uid() = id);

-- Business categories: Everyone can read, only admins can modify
CREATE POLICY "Anyone can view business categories" ON business_categories FOR SELECT TO authenticated USING (true);

-- Businesses: Everyone can read, only admins can modify
CREATE POLICY "Anyone can view businesses" ON businesses FOR SELECT TO authenticated USING (true);

-- Supplier tasks: Suppliers can view/update their own tasks, admins can view all
CREATE POLICY "Suppliers can view own tasks" ON supplier_tasks FOR SELECT USING (
  supplier_id = auth.uid() OR 
  EXISTS (SELECT 1 FROM profiles WHERE id = auth.uid() AND role = 'admin')
);

CREATE POLICY "Suppliers can update own tasks" ON supplier_tasks FOR UPDATE USING (supplier_id = auth.uid());

-- Auditor tasks: Auditors can view their own tasks, admins can view all
CREATE POLICY "Auditors can view own tasks" ON auditor_tasks FOR SELECT USING (
  auditor_id = auth.uid() OR 
  EXISTS (SELECT 1 FROM profiles WHERE id = auth.uid() AND role = 'admin')
);

-- Audit reports: Auditors can create their own reports, admins can view all
CREATE POLICY "Auditors can create own reports" ON audit_reports FOR INSERT WITH CHECK (auditor_id = auth.uid());
CREATE POLICY "Anyone can view audit reports" ON audit_reports FOR SELECT TO authenticated USING (true);

-- Onboarding applications: Admins can view all
CREATE POLICY "Admins can view applications" ON onboarding_applications FOR SELECT USING (
  EXISTS (SELECT 1 FROM profiles WHERE id = auth.uid() AND role = 'admin')
);

-- Create indexes for better performance on location queries
CREATE INDEX idx_profiles_location ON profiles USING GIST (location);
CREATE INDEX idx_businesses_location ON businesses USING GIST (location);
CREATE INDEX idx_onboarding_applications_location ON onboarding_applications USING GIST (location);
[V0_FILE]typescriptreact:file="app/onboard/business/page.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { useToast } from "@/hooks/use-toast"
import { Building, ArrowLeft, CheckCircle, MapPin } from "lucide-react"
import { LocationPicker } from "@/components/location-picker"
import Link from "next/link"

export default function BusinessOnboardingPage() {
  const [formData, setFormData] = useState({
    businessName: "",
    category: "",
    ownerName: "",
    email: "",
    phoneNumber: "",
    address: "",
    city: "",
    pinCode: "",
    description: "",
    latitude: null as number | null,
    longitude: null as number | null,
  })
  const [loading, setLoading] = useState(false)
  const [submitted, setSubmitted] = useState(false)
  const [showLocationPicker, setShowLocationPicker] = useState(false)
  const router = useRouter()
  const { toast } = useToast()

const businessCategories = [
    "Restaurant",
    "Medical Clinic",
    "Retail Store",
    "Pharmacy",
    "Grocery Store",
    "Beauty Salon",
    "Fitness Center",
    "Educational Institute",
  ]

const handleLocationSelect = (lat: number, lng: number, address?: string) => {
    setFormData({
      ...formData,
      latitude: lat,
      longitude: lng,
      // If we got an address from reverse geocoding, we could update the address field
      // address: address || formData.address,
    })
  }

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

try {
      // Validate location
      if (!formData.latitude || !formData.longitude) {
        throw new Error("Please select your business location on the map")
      }

// Simulate API call - in real implementation, this would:
      // 1. Create business record with lat/lng
      // 2. PostGIS will auto-assign nearest auditor and supplier
      // 3. Generate tasks for both with calculated distances
      // 4. Send confirmation email

console.log("Submitting business with location:", {
        ...formData,
        location: { lat: formData.latitude, lng: formData.longitude },
      })

await new Promise((resolve) => setTimeout(resolve, 2000))

setSubmitted(true)

toast({
        title: "Success!",
        description: "Your business has been registered with location-based assignment.",
      })
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message,
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

if (submitted) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center py-12 px-4">
        <Card className="w-full max-w-2xl">
          <CardContent className="text-center p-8">
            <CheckCircle className="h-16 w-16 text-green-600 mx-auto mb-4" />
            <h1 className="text-2xl font-bold text-gray-900 mb-4">Registration Successful!</h1>
            <p className="text-gray-600 mb-6">
              Thank you for registering your business with AuditX-Biz. Here's what happens next:
            </p>
            <div className="space-y-4 text-left bg-gray-50 p-6 rounded-lg mb-6">
              <div className="flex items-start gap-3">
                <div className="bg-blue-100 rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mt-0.5">
                  <span className="text-xs font-bold text-blue-600">1</span>
                </div>
                <div>
                  <p className="font-medium">Location-Based Assignment</p>
                  <p className="text-sm text-gray-600">
                    The nearest supplier and auditor will be automatically assigned based on your location
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <div className="bg-blue-100 rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mt-0.5">
                  <span className="text-xs font-bold text-blue-600">2</span>
                </div>
                <div>
                  <p className="font-medium">Kit Delivery</p>
                  <p className="text-sm text-gray-600">
                    Your assigned delivery partner will contact you to deliver the onboarding kit
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <div className="bg-blue-100 rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mt-0.5">
                  <span className="text-xs font-bold text-blue-600">3</span>
                </div>
                <div>
                  <p className="font-medium">Audit Scheduling</p>
                  <p className="text-sm text-gray-600">
                    Your assigned auditor will visit your business to conduct the transparency audit
                  </p>
                </div>
              </div>
            </div>
            <Link href="/">
              <Button>Return to Home</Button>
            </Link>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gray-50 py-12 px-4">
      <div className="max-w-4xl mx-auto">
        <div className="mb-6">
          <Link href="/">
            <Button variant="ghost" size="sm">
              <ArrowLeft className="h-4 w-4 mr-2" />
              Back to Home
            </Button>
          </Link>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* Form Section */}
          <Card>
            <CardHeader>
              <div className="flex items-center gap-2">
                <Building className="h-6 w-6 text-blue-600" />
                <CardTitle className="text-2xl">Register Your Business</CardTitle>
              </div>
              <CardDescription>
                Join AuditX-Biz to get transparent audits and build customer trust. Location-based assignment ensures
                the nearest auditor and supplier are assigned to you.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Alert className="mb-6">
                <AlertDescription>
                  <strong>What happens after registration:</strong>
                  <br />• Nearest delivery partner assigned automatically
                  <br />• Nearest auditor assigned based on your location
                  <br />• You'll receive email updates throughout the process
                </AlertDescription>
              </Alert>

<form onSubmit={handleSubmit} className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="businessName">Business Name *</Label>
                    <Input
                      id="businessName"
                      placeholder="Enter your business name"
                      value={formData.businessName}
                      onChange={(e) => setFormData({ ...formData, businessName: e.target.value })}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="category">Business Category *</Label>
                    <Select
                      value={formData.category}
                      onValueChange={(value) => setFormData({ ...formData, category: value })}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Select category" />
                      </SelectTrigger>
                      <SelectContent>
                        {businessCategories.map((category) => (
                          <SelectItem key={category} value={category}>
                            {category}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="ownerName">Owner Name *</Label>
                    <Input
                      id="ownerName"
                      placeholder="Enter owner's full name"
                      value={formData.ownerName}
                      onChange={(e) => setFormData({ ...formData, ownerName: e.target.value })}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="phoneNumber">Phone Number *</Label>
                    <Input
                      id="phoneNumber"
                      placeholder="Enter phone number"
                      value={formData.phoneNumber}
                      onChange={(e) => setFormData({ ...formData, phoneNumber: e.target.value })}
                      required
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="email">Email Address</Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="Enter email for updates (optional)"
                    value={formData.email}
                    onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="address">Business Address *</Label>
                  <Textarea
                    id="address"
                    placeholder="Enter complete business address"
                    value={formData.address}
                    onChange={(e) => setFormData({ ...formData, address: e.target.value })}
                    required
                  />
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="city">City *</Label>
                    <Input
                      id="city"
                      placeholder="Enter city"
                      value={formData.city}
                      onChange={(e) => setFormData({ ...formData, city: e.target.value })}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="pinCode">PIN Code *</Label>
                    <Input
                      id="pinCode"
                      placeholder="Enter PIN code"
                      value={formData.pinCode}
                      onChange={(e) => setFormData({ ...formData, pinCode: e.target.value })}
                      required
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="description">Business Description</Label>
                  <Textarea
                    id="description"
                    placeholder="Brief description of your business (optional)"
                    value={formData.description}
                    onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                  />
                </div>

{/* Location Status */}
                <div className="p-4 border rounded-lg">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <MapPin className="h-4 w-4" />
                      <span className="font-medium">Location Selection</span>
                      {formData.latitude && formData.longitude && (
                        <span className="text-green-600 text-sm">✓ Selected</span>
                      )}
                    </div>
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      onClick={() => setShowLocationPicker(!showLocationPicker)}
                    >
                      {showLocationPicker ? "Hide Map" : "Select Location"}
                    </Button>
                  </div>
                  {formData.latitude && formData.longitude && (
                    <p className="text-sm text-gray-600 mt-2">
                      Selected: {formData.latitude.toFixed(6)}, {formData.longitude.toFixed(6)}
                    </p>
                  )}
                </div>

<Button type="submit" className="w-full" disabled={loading}>
                  {loading ? "Registering Business..." : "Register Business"}
                </Button>
              </form>
            </CardContent>
          </Card>

{/* Location Picker Section */}
          <div className="space-y-6">
            {showLocationPicker && <LocationPicker onLocationSelect={handleLocationSelect} showMap={true} />}

{!showLocationPicker && (
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <MapPin className="h-5 w-5 text-blue-600" />
                    Why Location Matters
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-start gap-3">
                    <div className="bg-blue-100 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0">
                      <span className="text-sm font-bold text-blue-600">1</span>
                    </div>
                    <div>
                      <p className="font-medium">Smart Assignment</p>
                      <p className="text-sm text-gray-600">
                        We automatically assign the nearest auditor and supplier to minimize travel time and costs
                      </p>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <div className="bg-blue-100 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0">
                      <span className="text-sm font-bold text-blue-600">2</span>
                    </div>
                    <div>
                      <p className="font-medium">Faster Service</p>
                      <p className="text-sm text-gray-600">
                        Local auditors and suppliers can reach you quickly, speeding up the entire process
                      </p>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <div className="bg-blue-100 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0">
                      <span className="text-sm font-bold text-blue-600">3</span>
                    </div>
                    <div>
                      <p className="font-medium">Cost Effective</p>
                      <p className="text-sm text-gray-600">
                        Reduced travel distances mean lower costs and more competitive pricing
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/onboard/auditor/page.tsx"
"use client"

import type React from "react"

import { useState } from "react"
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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { useToast } from "@/hooks/use-toast"
import { FileText, ArrowLeft, CheckCircle, Upload, MapPin } from "lucide-react"
import { LocationPicker } from "@/components/location-picker"
import Link from "next/link"

export default function AuditorOnboardingPage() {
  const [formData, setFormData] = useState({
    fullName: "",
    email: "",
    phoneNumber: "",
    address: "",
    city: "",
    pinCode: "",
    experience: "",
    aadhaarNumber: "",
    panNumber: "",
    drivingLicense: "",
    upiHandle: "",
    bankAccount: "",
    ifscCode: "",
    latitude: null as number | null,
    longitude: null as number | null,
  })
  const [loading, setLoading] = useState(false)
  const [submitted, setSubmitted] = useState(false)
  const [showLocationPicker, setShowLocationPicker] = useState(false)
  const { toast } = useToast()

const handleLocationSelect = (lat: number, lng: number, address?: string) => {
    setFormData({
      ...formData,
      latitude: lat,
      longitude: lng,
    })
  }

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

try {
      // Validate location
      if (!formData.latitude || !formData.longitude) {
        throw new Error("Please select your location on the map")
      }

// Simulate API call - in real implementation, this would:
      // 1. Create auditor application record with lat/lng
      // 2. Send for admin approval
      // 3. Send confirmation email
      // 4. Once approved, location will be used for task assignment

console.log("Submitting auditor application with location:", {
        ...formData,
        location: { lat: formData.latitude, lng: formData.longitude },
      })

await new Promise((resolve) => setTimeout(resolve, 2000))

setSubmitted(true)

toast({
        title: "Application Submitted!",
        description: "Your auditor application with location is under review.",
      })
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message,
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

if (submitted) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center py-12 px-4">
        <Card className="w-full max-w-2xl">
          <CardContent className="text-center p-8">
            <CheckCircle className="h-16 w-16 text-green-600 mx-auto mb-4" />
            <h1 className="text-2xl font-bold text-gray-900 mb-4">Application Submitted!</h1>
            <p className="text-gray-600 mb-6">
              Thank you for applying to become an auditor with AuditX-Biz. Your location has been recorded for optimal
              task assignment.
            </p>
            <div className="space-y-4 text-left bg-gray-50 p-6 rounded-lg mb-6">
              <div className="flex items-start gap-3">
                <div className="bg-green-100 rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mt-0.5">
                  <span className="text-xs font-bold text-green-600">1</span>
                </div>
                <div>
                  <p className="font-medium">Application Review</p>
                  <p className="text-sm text-gray-600">Our team will review your application and documents</p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <div className="bg-green-100 rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mt-0.5">
                  <span className="text-xs font-bold text-green-600">2</span>
                </div>
                <div>
                  <p className="font-medium">Location-Based Assignment</p>
                  <p className="text-sm text-gray-600">
                    Once approved, you'll receive audit tasks for businesses near your location
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <div className="bg-green-100 rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mt-0.5">
                  <span className="text-xs font-bold text-green-600">3</span>
                </div>
                <div>
                  <p className="font-medium">Account Activation</p>
                  <p className="text-sm text-gray-600">You'll receive login credentials and mobile app access</p>
                </div>
              </div>
            </div>
            <Link href="/">
              <Button>Return to Home</Button>
            </Link>
          </CardContent>
        </Card>
      </div>
    )
  }

<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* Form Section */}
          <Card>
            <CardHeader>
              <div className="flex items-center gap-2">
                <FileText className="h-6 w-6 text-green-600" />
                <CardTitle className="text-2xl">Become an Auditor</CardTitle>
              </div>
              <CardDescription>
                Join our network of independent auditors and earn ₹150-250 per audit. Location-based assignment ensures
                you get tasks near you.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Alert className="mb-6">
                <AlertDescription>
                  <strong>Requirements:</strong>
                  <br />• Valid government ID (Aadhaar, PAN, Driving License)
                  <br />• Mobile phone with camera for field work
                  <br />• Ability to travel within your city
                  <br />• Basic English/Hindi communication skills
                </AlertDescription>
              </Alert>

<form onSubmit={handleSubmit} className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="fullName">Full Name *</Label>
                    <Input
                      id="fullName"
                      placeholder="Enter your full name"
                      value={formData.fullName}
                      onChange={(e) => setFormData({ ...formData, fullName: e.target.value })}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="email">Email Address *</Label>
                    <Input
                      id="email"
                      type="email"
                      placeholder="Enter your email"
                      value={formData.email}
                      onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                      required
                    />
                  </div>
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="phoneNumber">Phone Number *</Label>
                    <Input
                      id="phoneNumber"
                      placeholder="Enter phone number"
                      value={formData.phoneNumber}
                      onChange={(e) => setFormData({ ...formData, phoneNumber: e.target.value })}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="city">City *</Label>
                    <Input
                      id="city"
                      placeholder="Enter your city"
                      value={formData.city}
                      onChange={(e) => setFormData({ ...formData, city: e.target.value })}
                      required
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="address">Address *</Label>
                  <Textarea
                    id="address"
                    placeholder="Enter your complete address"
                    value={formData.address}
                    onChange={(e) => setFormData({ ...formData, address: e.target.value })}
                    required
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="experience">Relevant Experience</Label>
                  <Textarea
                    id="experience"
                    placeholder="Describe any relevant experience (quality control, inspection, etc.)"
                    value={formData.experience}
                    onChange={(e) => setFormData({ ...formData, experience: e.target.value })}
                  />
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="aadhaarNumber">Aadhaar Number *</Label>
                    <Input
                      id="aadhaarNumber"
                      placeholder="Enter Aadhaar number"
                      value={formData.aadhaarNumber}
                      onChange={(e) => setFormData({ ...formData, aadhaarNumber: e.target.value })}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="panNumber">PAN Number *</Label>
                    <Input
                      id="panNumber"
                      placeholder="Enter PAN number"
                      value={formData.panNumber}
                      onChange={(e) => setFormData({ ...formData, panNumber: e.target.value })}
                      required
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="drivingLicense">Driving License Number</Label>
                  <Input
                    id="drivingLicense"
                    placeholder="Enter driving license number (optional)"
                    value={formData.drivingLicense}
                    onChange={(e) => setFormData({ ...formData, drivingLicense: e.target.value })}
                  />
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="upiHandle">UPI Handle *</Label>
                    <Input
                      id="upiHandle"
                      placeholder="yourname@paytm"
                      value={formData.upiHandle}
                      onChange={(e) => setFormData({ ...formData, upiHandle: e.target.value })}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="bankAccount">Bank Account Number *</Label>
                    <Input
                      id="bankAccount"
                      placeholder="Enter bank account number"
                      value={formData.bankAccount}
                      onChange={(e) => setFormData({ ...formData, bankAccount: e.target.value })}
                      required
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="ifscCode">IFSC Code *</Label>
                  <Input
                    id="ifscCode"
                    placeholder="Enter bank IFSC code"
                    value={formData.ifscCode}
                    onChange={(e) => setFormData({ ...formData, ifscCode: e.target.value })}
                    required
                  />
                </div>

{/* Location Status */}
                <div className="p-4 border rounded-lg">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <MapPin className="h-4 w-4" />
                      <span className="font-medium">Location Selection *</span>
                      {formData.latitude && formData.longitude && (
                        <span className="text-green-600 text-sm">✓ Selected</span>
                      )}
                    </div>
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      onClick={() => setShowLocationPicker(!showLocationPicker)}
                    >
                      {showLocationPicker ? "Hide Map" : "Select Location"}
                    </Button>
                  </div>
                  {formData.latitude && formData.longitude && (
                    <p className="text-sm text-gray-600 mt-2">
                      Selected: {formData.latitude.toFixed(6)}, {formData.longitude.toFixed(6)}
                    </p>
                  )}
                </div>

<div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
                  <Upload className="mx-auto h-12 w-12 text-gray-400 mb-2" />
                  <p className="text-sm text-gray-600 mb-2">Upload Documents (Optional)</p>
                  <p className="text-xs text-gray-500">Aadhaar, PAN, Driving License copies</p>
                  <Button type="button" variant="outline" size="sm" className="mt-2">
                    Choose Files
                  </Button>
                </div>

{/* Location Picker Section */}
          <div className="space-y-6">
            {showLocationPicker && <LocationPicker onLocationSelect={handleLocationSelect} showMap={true} />}

{!showLocationPicker && (
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <MapPin className="h-5 w-5 text-green-600" />
                    Location-Based Task Assignment
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-start gap-3">
                    <div className="bg-green-100 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0">
                      <span className="text-sm font-bold text-green-600">1</span>
                    </div>
                    <div>
                      <p className="font-medium">Nearby Assignments</p>
                      <p className="text-sm text-gray-600">
                        Get audit tasks for businesses closest to your location, reducing travel time
                      </p>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <div className="bg-green-100 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0">
                      <span className="text-sm font-bold text-green-600">2</span>
                    </div>
                    <div>
                      <p className="font-medium">Higher Earnings</p>
                      <p className="text-sm text-gray-600">
                        Less travel means more audits per day and higher overall earnings
                      </p>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <div className="bg-green-100 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0">
                      <span className="text-sm font-bold text-green-600">3</span>
                    </div>
                    <div>
                      <p className="font-medium">Fair Distribution</p>
                      <p className="text-sm text-gray-600">
                        Our algorithm ensures fair task distribution based on proximity and availability
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/animated-counter.tsx"
"use client"

import { useEffect, useState } from "react"

interface AnimatedCounterProps {
  end: number
  duration?: number
  prefix?: string
  suffix?: string
}

export function AnimatedCounter({ end, duration = 2000, prefix = "", suffix = "" }: AnimatedCounterProps) {
  const [count, setCount] = useState(0)

useEffect(() => {
    let startTime: number
    let animationFrame: number

const animate = (currentTime: number) => {
      if (!startTime) startTime = currentTime
      const progress = Math.min((currentTime - startTime) / duration, 1)

// Easing function for smooth animation
      const easeOutQuart = 1 - Math.pow(1 - progress, 4)
      setCount(Math.floor(easeOutQuart * end))

if (progress < 1) {
        animationFrame = requestAnimationFrame(animate)
      }
    }

animationFrame = requestAnimationFrame(animate)

return () => {
      if (animationFrame) {
        cancelAnimationFrame(animationFrame)
      }
    }
  }, [end, duration])

return (
    <span>
      {prefix}
      {count.toLocaleString()}
      {suffix}
    </span>
  )
}
[V0_FILE]typescriptreact:file="components/ui/fade-in.tsx"
"use client"

import type React from "react"

import { useEffect, useRef, useState } from "react"

interface FadeInProps {
  children: React.ReactNode
  delay?: number
  direction?: "up" | "down" | "left" | "right"
  className?: string
}

export function FadeIn({ children, delay = 0, direction = "up", className = "" }: FadeInProps) {
  const [isVisible, setIsVisible] = useState(false)
  const ref = useRef<HTMLDivElement>(null)

useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setTimeout(() => setIsVisible(true), delay)
        }
      },
      { threshold: 0.1 },
    )

if (ref.current) {
      observer.observe(ref.current)
    }

return () => observer.disconnect()
  }, [delay])

const getTransform = () => {
    switch (direction) {
      case "up":
        return "translateY(30px)"
      case "down":
        return "translateY(-30px)"
      case "left":
        return "translateX(30px)"
      case "right":
        return "translateX(-30px)"
      default:
        return "translateY(30px)"
    }
  }

return (
    <div
      ref={ref}
      className={`transition-all duration-700 ease-out ${className}`}
      style={{
        opacity: isVisible ? 1 : 0,
        transform: isVisible ? "translate(0)" : getTransform(),
      }}
    >
      {children}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/loading-spinner.tsx"
"use client"

interface LoadingSpinnerProps {
  size?: "sm" | "md" | "lg"
  className?: string
}

export function LoadingSpinner({ size = "md", className = "" }: LoadingSpinnerProps) {
  const sizeClasses = {
    sm: "h-4 w-4",
    md: "h-8 w-8",
    lg: "h-12 w-12",
  }

return (
    <div className={`${sizeClasses[size]} ${className}`}>
      <div className="relative h-full w-full">
        <div className="absolute inset-0 rounded-full border-2 border-gray-200"></div>
        <div className="absolute inset-0 rounded-full border-2 border-blue-600 border-t-transparent animate-spin"></div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/floating-action-button.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Plus, X } from "lucide-react"

interface FloatingAction {
  icon: React.ReactNode
  label: string
  onClick: () => void
}

interface FloatingActionButtonProps {
  actions: FloatingAction[]
}

export function FloatingActionButton({ actions }: FloatingActionButtonProps) {
  const [isOpen, setIsOpen] = useState(false)

return (
    <div className="fixed bottom-6 right-6 z-50">
      <div className="relative">
        {/* Action buttons */}
        <div
          className={`absolute bottom-16 right-0 space-y-3 transition-all duration-300 ${
            isOpen ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4 pointer-events-none"
          }`}
        >
          {actions.map((action, index) => (
            <div key={index} className="flex items-center gap-3" style={{ transitionDelay: `${index * 50}ms` }}>
              <span className="bg-gray-900 text-white px-3 py-1 rounded-lg text-sm whitespace-nowrap">
                {action.label}
              </span>
              <Button
                size="sm"
                onClick={action.onClick}
                className="h-12 w-12 rounded-full shadow-lg hover:shadow-xl transition-all duration-200"
              >
                {action.icon}
              </Button>
            </div>
          ))}
        </div>

{/* Main FAB */}
        <Button
          size="lg"
          onClick={() => setIsOpen(!isOpen)}
          className="h-14 w-14 rounded-full shadow-lg hover:shadow-xl transition-all duration-200 bg-blue-600 hover:bg-blue-700"
        >
          <div className={`transition-transform duration-200 ${isOpen ? "rotate-45" : ""}`}>
            {isOpen ? <X className="h-6 w-6" /> : <Plus className="h-6 w-6" />}
          </div>
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/demo-banner.tsx"
"use client"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Info, RefreshCw } from "lucide-react"
import { useAuth } from "@/contexts/auth-context"

export function DemoBanner() {
  const { isDemoMode } = useAuth()

if (!isDemoMode) return null

return (
    <div className="fixed top-0 left-0 right-0 z-50 bg-gradient-to-r from-amber-400 to-orange-400 text-white shadow-lg">
      <div className="container mx-auto px-4 py-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="flex items-center gap-2">
              <Info className="h-5 w-5" />
              <span className="font-semibold">Demo Mode Active</span>
            </div>
            <Badge variant="secondary" className="bg-white/20 text-white border-white/30">
              No data will be saved
            </Badge>
          </div>
          <Button
            variant="ghost"
            size="sm"
            className="text-white hover:bg-white/20"
            onClick={() => window.location.reload()}
          >
            <RefreshCw className="h-4 w-4 mr-2" />
            Reset Demo
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx"
"use client"

import { useEffect } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/auth-context"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { FadeIn } from "@/components/ui/fade-in"
import { AnimatedCounter } from "@/components/ui/animated-counter"
import { LoadingSpinner } from "@/components/ui/loading-spinner"
import {
  Info,
  Shield,
  FileText,
  Truck,
  Building,
  Package,
  IndianRupee,
  MapPin,
  Phone,
  Map,
  CheckCircle,
  TrendingUp,
  Globe,
  Award,
} from "lucide-react"
import Link from "next/link"

export default function HomePage() {
  const { user, profile, loading, isDemoMode } = useAuth()
  const router = useRouter()

useEffect(() => {
    if (!loading) {
      if (user && profile) {
        router.push("/dashboard")
      }
    }
  }, [user, profile, loading, router])

if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
        <Card className="w-full max-w-md">
          <CardContent className="flex flex-col items-center justify-center p-8">
            <LoadingSpinner size="lg" className="mb-4" />
            <p className="text-gray-600">Loading AuditPro...</p>
          </CardContent>
        </Card>
      </div>
    )
  }

if (user && profile) {
    return null // Will redirect to dashboard
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50">
      {/* Hero Section */}
      <div className="relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-r from-blue-600/10 to-purple-600/10"></div>
        <div className="container mx-auto px-4 py-20">
          <FadeIn>
            <div className="text-center mb-12">
              <div className="flex items-center justify-center gap-3 mb-6">
                <div className="relative">
                  <h1 className="text-6xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                    AuditPro
                  </h1>
                  <div className="absolute -top-2 -right-2">
                    {isDemoMode && (
                      <Badge variant="secondary" className="animate-pulse">
                        Demo
                      </Badge>
                    )}
                  </div>
                </div>
                <Badge variant="outline" className="text-sm">
                  POC v1.0
                </Badge>
              </div>
              <p className="text-xl text-gray-600 mb-8 max-w-4xl mx-auto leading-relaxed">
                Revolutionary transparency platform connecting businesses with independent auditors. Combat fake reviews
                with <span className="font-semibold text-blue-600">verifiable audit reports</span> and build genuine
                customer trust.
              </p>

{/* Stats */}
              <div className="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-2xl mx-auto mb-12">
                <div className="text-center">
                  <div className="text-3xl font-bold text-blue-600">
                    <AnimatedCounter end={500} suffix="+" />
                  </div>
                  <p className="text-sm text-gray-600">Businesses Audited</p>
                </div>
                <div className="text-center">
                  <div className="text-3xl font-bold text-green-600">
                    <AnimatedCounter end={150} suffix="+" />
                  </div>
                  <p className="text-sm text-gray-600">Certified Auditors</p>
                </div>
                <div className="text-center">
                  <div className="text-3xl font-bold text-purple-600">
                    <AnimatedCounter end={98} suffix="%" />
                  </div>
                  <p className="text-sm text-gray-600">Accuracy Rate</p>
                </div>
                <div className="text-center">
                  <div className="text-3xl font-bold text-orange-600">
                    <AnimatedCounter end={25} suffix="+" />
                  </div>
                  <p className="text-sm text-gray-600">Cities Covered</p>
                </div>
              </div>
            </div>
          </FadeIn>

{isDemoMode && (
            <FadeIn delay={200}>
              <div className="max-w-3xl mx-auto mb-12">
                <Alert className="border-amber-200 bg-amber-50">
                  <Info className="h-4 w-4 text-amber-600" />
                  <AlertTitle className="text-amber-800">Experience Demo Mode</AlertTitle>
                  <AlertDescription className="mt-2 text-amber-700">
                    Explore all features with sample data. Try these demo accounts:
                    <div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-3">
                      <div className="bg-white/60 p-3 rounded-lg text-sm">
                        <strong className="text-blue-700">Admin Dashboard:</strong> admin@auditpro.com / demo123
                      </div>
                      <div className="bg-white/60 p-3 rounded-lg text-sm">
                        <strong className="text-green-700">Field Auditor:</strong> john@auditpro.com / demo123
                      </div>
                    </div>
                  </AlertDescription>
                </Alert>
              </div>
            </FadeIn>
          )}

{/* CTA Buttons */}
          <FadeIn delay={400}>
            <div className="flex flex-wrap justify-center gap-4 mb-16">
              <Link href="/auth/login">
                <Button
                  size="lg"
                  className="bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 shadow-lg hover:shadow-xl transition-all duration-200"
                >
                  <Shield className="h-5 w-5 mr-2" />
                  Admin Dashboard
                </Button>
              </Link>
              <Link href="/onboard/business">
                <Button variant="outline" size="lg" className="border-2 hover:bg-blue-50 transition-all duration-200">
                  <Building className="h-5 w-5 mr-2" />
                  Register Business
                </Button>
              </Link>
              <Link href="/test-location">
                <Button variant="ghost" size="lg" className="hover:bg-white/50 transition-all duration-200">
                  <Map className="h-5 w-5 mr-2" />
                  Test Location Features
                </Button>
              </Link>
            </div>
          </FadeIn>
        </div>
      </div>

{/* Features Section */}
      <div className="py-20 bg-white/50">
        <div className="container mx-auto px-4">
          <FadeIn>
            <h2 className="text-4xl font-bold text-center text-gray-900 mb-4">Why Choose AuditPro?</h2>
            <p className="text-xl text-gray-600 text-center mb-16 max-w-3xl mx-auto">
              Built for transparency, powered by technology, trusted by businesses
            </p>
          </FadeIn>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
            <FadeIn delay={100}>
              <Card className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                <CardHeader className="text-center pb-4">
                  <div className="bg-blue-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
                    <Shield className="h-8 w-8 text-blue-600" />
                  </div>
                  <CardTitle className="text-xl">100% Transparent</CardTitle>
                </CardHeader>
                <CardContent className="text-center">
                  <p className="text-gray-600">
                    Every audit is documented with photos, ratings, and detailed reports. No hidden information.
                  </p>
                </CardContent>
              </Card>
            </FadeIn>

<FadeIn delay={200}>
              <Card className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                <CardHeader className="text-center pb-4">
                  <div className="bg-green-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
                    <MapPin className="h-8 w-8 text-green-600" />
                  </div>
                  <CardTitle className="text-xl">Location-Based</CardTitle>
                </CardHeader>
                <CardContent className="text-center">
                  <p className="text-gray-600">
                    Smart assignment system connects businesses with nearest auditors and suppliers automatically.
                  </p>
                </CardContent>
              </Card>
            </FadeIn>

<FadeIn delay={300}>
              <Card className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                <CardHeader className="text-center pb-4">
                  <div className="bg-purple-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
                    <Award className="h-8 w-8 text-purple-600" />
                  </div>
                  <CardTitle className="text-xl">Certified Auditors</CardTitle>
                </CardHeader>
                <CardContent className="text-center">
                  <p className="text-gray-600">
                    All auditors are verified, trained, and rated by the community for quality assurance.
                  </p>
                </CardContent>
              </Card>
            </FadeIn>
          </div>
        </div>
      </div>

{/* Self-Onboarding Section */}
      <div className="py-20">
        <div className="container mx-auto px-4">
          <FadeIn>
            <h2 className="text-4xl font-bold text-center text-gray-900 mb-4">Join the Network</h2>
            <p className="text-xl text-gray-600 text-center mb-16 max-w-3xl mx-auto">
              Whether you're a business owner, auditor, or delivery partner - there's a place for you
            </p>
          </FadeIn>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
            <FadeIn delay={100}>
              <Card className="border-2 border-blue-200 hover:border-blue-300 hover:shadow-xl transition-all duration-300 hover:-translate-y-2 group">
                <CardHeader>
                  <div className="flex items-center gap-3 mb-4">
                    <div className="bg-blue-100 group-hover:bg-blue-200 rounded-lg p-2 transition-colors duration-200">
                      <Building className="h-6 w-6 text-blue-600" />
                    </div>
                    <CardTitle className="text-xl text-blue-600">Business Owner</CardTitle>
                  </div>
                  <CardDescription>Get your business audited and build customer trust</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3 mb-6">
                    <div className="flex items-center gap-3">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span className="text-sm">Submit business details online</span>
                    </div>
                    <div className="flex items-center gap-3">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span className="text-sm">Auto-assign nearest auditor & supplier</span>
                    </div>
                    <div className="flex items-center gap-3">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span className="text-sm">Get transparent audit report</span>
                    </div>
                    <div className="flex items-center gap-3">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span className="text-sm">Boost customer confidence</span>
                    </div>
                  </div>
                  <Link href="/onboard/business">
                    <Button className="w-full bg-blue-600 hover:bg-blue-700 transition-colors duration-200">
                      Register Business
                    </Button>
                  </Link>
                </CardContent>
              </Card>
            </FadeIn>

<FadeIn delay={200}>
              <Card className="border-2 border-green-200 hover:border-green-300 hover:shadow-xl transition-all duration-300 hover:-translate-y-2 group">
                <CardHeader>
                  <div className="flex items-center gap-3 mb-4">
                    <div className="bg-green-100 group-hover:bg-green-200 rounded-lg p-2 transition-colors duration-200">
                      <FileText className="h-6 w-6 text-green-600" />
                    </div>
                    <CardTitle className="text-xl text-green-600">Become an Auditor</CardTitle>
                  </div>
                  <CardDescription>Join as an independent auditor and earn money</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3 mb-6">
                    <div className="flex items-center gap-3">
                      <IndianRupee className="h-4 w-4 text-green-500" />
                      <span className="text-sm">Earn ₹150-250 per audit</span>
                    </div>
                    <div className="flex items-center gap-3">
                      <MapPin className="h-4 w-4 text-green-500" />
                      <span className="text-sm">Work in your local area</span>
                    </div>
                    <div className="flex items-center gap-3">
                      <Phone className="h-4 w-4 text-green-500" />
                      <span className="text-sm">Mobile app for field work</span>
                    </div>
                    <div className="flex items-center gap-3">
                      <TrendingUp className="h-4 w-4 text-green-500" />
                      <span className="text-sm">Flexible working hours</span>
                    </div>
                  </div>
                  <Link href="/onboard/auditor">
                    <Button
                      variant="outline"
                      className="w-full border-green-600 text-green-600 hover:bg-green-50 transition-colors duration-200"
                    >
                      Apply as Auditor
                    </Button>
                  </Link>
                </CardContent>
              </Card>
            </FadeIn>

<FadeIn delay={300}>
              <Card className="border-2 border-orange-200 hover:border-orange-300 hover:shadow-xl transition-all duration-300 hover:-translate-y-2 group">
                <CardHeader>
                  <div className="flex items-center gap-3 mb-4">
                    <div className="bg-orange-100 group-hover:bg-orange-200 rounded-lg p-2 transition-colors duration-200">
                      <Truck className="h-6 w-6 text-orange-600" />
                    </div>
                    <CardTitle className="text-xl text-orange-600">Delivery Partner</CardTitle>
                  </div>
                  <CardDescription>Join as a supplier/delivery partner</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3 mb-6">
                    <div className="flex items-center gap-3">
                      <Package className="h-4 w-4 text-orange-500" />
                      <span className="text-sm">Deliver onboarding kits</span>
                    </div>
                    <div className="flex items-center gap-3">
                      <MapPin className="h-4 w-4 text-orange-500" />
                      <span className="text-sm">Local delivery routes</span>
                    </div>
                    <div className="flex items-center gap-3">
                      <Phone className="h-4 w-4 text-orange-500" />
                      <span className="text-sm">Mobile app for tracking</span>
                    </div>
                    <div className="flex items-center gap-3">
                      <Globe className="h-4 w-4 text-orange-500" />
                      <span className="text-sm">Expand your network</span>
                    </div>
                  </div>
                  <Link href="/onboard/supplier">
                    <Button
                      variant="outline"
                      className="w-full border-orange-600 text-orange-600 hover:bg-orange-50 transition-colors duration-200"
                    >
                      Join as Partner
                    </Button>
                  </Link>
                </CardContent>
              </Card>
            </FadeIn>
          </div>
        </div>
      </div>

{/* How It Works */}
      <div className="py-20 bg-gradient-to-r from-gray-50 to-blue-50">
        <div className="container mx-auto px-4">
          <FadeIn>
            <h2 className="text-4xl font-bold text-center text-gray-900 mb-4">How It Works</h2>
            <p className="text-xl text-gray-600 text-center mb-16 max-w-3xl mx-auto">
              Simple, transparent, and efficient process from registration to audit report
            </p>
          </FadeIn>

<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <FadeIn delay={100}>
              <div className="text-center group">
                <div className="bg-gradient-to-br from-blue-500 to-blue-600 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6 shadow-lg group-hover:shadow-xl transition-all duration-300 group-hover:scale-110">
                  <Building className="h-10 w-10 text-white" />
                </div>
                <h3 className="font-bold text-lg mb-3">1. Business Registers</h3>
                <p className="text-gray-600">Business owner submits details via secure online form with location</p>
              </div>
            </FadeIn>

<FadeIn delay={200}>
              <div className="text-center group">
                <div className="bg-gradient-to-br from-orange-500 to-orange-600 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6 shadow-lg group-hover:shadow-xl transition-all duration-300 group-hover:scale-110">
                  <Truck className="h-10 w-10 text-white" />
                </div>
                <h3 className="font-bold text-lg mb-3">2. Smart Assignment</h3>
                <p className="text-gray-600">Nearest supplier and auditor automatically assigned based on location</p>
              </div>
            </FadeIn>

<FadeIn delay={300}>
              <div className="text-center group">
                <div className="bg-gradient-to-br from-green-500 to-green-600 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6 shadow-lg group-hover:shadow-xl transition-all duration-300 group-hover:scale-110">
                  <FileText className="h-10 w-10 text-white" />
                </div>
                <h3 className="font-bold text-lg mb-3">3. Audit Conducted</h3>
                <p className="text-gray-600">Certified auditor visits and completes comprehensive checklist</p>
              </div>
            </FadeIn>

<FadeIn delay={400}>
              <div className="text-center group">
                <div className="bg-gradient-to-br from-purple-500 to-purple-600 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6 shadow-lg group-hover:shadow-xl transition-all duration-300 group-hover:scale-110">
                  <Shield className="h-10 w-10 text-white" />
                </div>
                <h3 className="font-bold text-lg mb-3">4. Report Published</h3>
                <p className="text-gray-600">Transparent audit report made public with photos and ratings</p>
              </div>
            </FadeIn>
          </div>
        </div>
      </div>

{/* Admin Access */}
      <div className="py-20">
        <div className="container mx-auto px-4">
          <FadeIn>
            <div className="text-center bg-gradient-to-r from-blue-600 to-purple-600 p-12 rounded-2xl shadow-2xl text-white">
              <h2 className="text-3xl font-bold mb-4">Platform Administration</h2>
              <p className="text-blue-100 mb-8 max-w-2xl mx-auto">
                Comprehensive admin dashboard for managing users, businesses, categories, and monitoring all platform
                activities with real-time analytics
              </p>
              <div className="flex flex-wrap justify-center gap-4">
                <Link href="/auth/login">
                  <Button
                    size="lg"
                    variant="secondary"
                    className="bg-white text-blue-600 hover:bg-gray-100 shadow-lg hover:shadow-xl transition-all duration-200"
                  >
                    <Shield className="h-5 w-5 mr-2" />
                    Admin Dashboard
                  </Button>
                </Link>
                <Link href="/test-location">
                  <Button
                    size="lg"
                    variant="outline"
                    className="border-white text-white hover:bg-white/10 transition-all duration-200"
                  >
                    <Map className="h-5 w-5 mr-2" />
                    Test Location Features
                  </Button>
                </Link>
              </div>
            </div>
          </FadeIn>
        </div>
      </div>

{/* Footer */}
      <footer className="bg-gray-900 text-white py-12">
        <div className="container mx-auto px-4">
          <div className="text-center">
            <h3 className="text-2xl font-bold mb-4">AuditPro</h3>
            <p className="text-gray-400 mb-6">Building trust through transparency</p>
            <div className="flex justify-center space-x-6">
              <Badge variant="outline" className="border-gray-600 text-gray-400">
                POC v1.0
              </Badge>
              {isDemoMode && (
                <Badge variant="secondary" className="bg-amber-600">
                  Demo Mode
                </Badge>
              )}
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]css:file="app/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 84% 4.9%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 94.1%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Custom animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

.animate-slide-in-right {
  animation: slideInRight 0.6s ease-out;
}

.animate-pulse-glow {
  animation: pulse-glow 2s infinite;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Loading animation */
.loading-dots {
  display: inline-block;
}

.loading-dots::after {
  content: "";
  animation: loading-dots 1.5s infinite;
}

@keyframes loading-dots {
  0%,
  20% {
    content: "";
  }
  40% {
    content: ".";
  }
  60% {
    content: "..";
  }
  80%,
  100% {
    content: "...";
  }
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Card hover effects */
.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Button animations */
.btn-animate {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-animate::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn-animate:hover::before {
  left: 100%;
}

/* Demo mode styles */
.demo-banner {
  background: linear-gradient(90deg, #f59e0b, #f97316);
  animation: demo-pulse 2s infinite;
}

@keyframes demo-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.9;
  }
}

/* Floating action button */
.fab-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1000;
}

.fab-action {
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.fab-container.open .fab-action {
  transform: scale(1);
}

/* Professional loading spinner */
.spinner {
  border: 2px solid #f3f4f6;
  border-top: 2px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Responsive design helpers */
@media (max-width: 640px) {
  .mobile-padding {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Focus styles for accessibility */
.focus-ring:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
}
[V0_FILE]typescriptreact:file="app/auth/login/page.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { supabase, isSupabaseConfigured } from "@/lib/supabase"
import { demoUsers } from "@/lib/demo-data"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Badge } from "@/components/ui/badge"
import { LoadingSpinner } from "@/components/ui/loading-spinner"
import { useToast } from "@/hooks/use-toast"
import { Info, Eye, EyeOff } from "lucide-react"

export default function LoginPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [showPassword, setShowPassword] = useState(false)
  const [loading, setLoading] = useState(false)
  const router = useRouter()
  const { toast } = useToast()
  const isDemoMode = !isSupabaseConfigured

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

try {
      if (isDemoMode) {
        // Demo mode authentication
        const user = demoUsers.find((u) => u.email === email)
        if (user && password === "demo123") {
          localStorage.setItem("demo-user", JSON.stringify(user))

// Redirect based on role
          switch (user.role) {
            case "admin":
              window.location.href = "/admin"
              break
            case "auditor":
              window.location.href = "/auditor"
              break
            case "supplier":
              window.location.href = "/supplier"
              break
            case "consumer":
              window.location.href = "/consumer"
              break
            default:
              window.location.href = "/dashboard"
          }
        } else {
          throw new Error("Invalid credentials. Use 'demo123' as password for any demo account.")
        }
      } else {
        // Real Supabase authentication
        const { error } = await supabase.auth.signInWithPassword({
          email,
          password,
        })

if (error) throw error

router.push("/dashboard")
      }
    } catch (error: any) {
      toast({
        title: "Login Failed",
        description: error.message,
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

const fillDemoCredentials = (userEmail: string) => {
    setEmail(userEmail)
    setPassword("demo123")
  }

return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 py-12 px-4">
      <Card className="w-full max-w-md shadow-xl">
        <CardHeader className="space-y-1">
          <div className="flex items-center justify-center gap-2">
            <CardTitle className="text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
              AuditPro
            </CardTitle>
            {isDemoMode && <Badge variant="secondary">Demo</Badge>}
          </div>
          <CardDescription className="text-center">Sign in to your account</CardDescription>
        </CardHeader>
        <CardContent>
          {isDemoMode && (
            <Alert className="mb-6">
              <Info className="h-4 w-4" />
              <AlertDescription>
                <strong>Demo Mode:</strong> Use any demo email with password "demo123"
                <div className="mt-3 space-y-2">
                  <Button
                    variant="ghost"
                    size="sm"
                    className="w-full justify-start text-xs h-8"
                    onClick={() => fillDemoCredentials("admin@auditpro.com")}
                  >
                    <strong>Admin:</strong> admin@auditpro.com
                  </Button>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="w-full justify-start text-xs h-8"
                    onClick={() => fillDemoCredentials("john@auditpro.com")}
                  >
                    <strong>Auditor:</strong> john@auditpro.com
                  </Button>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="w-full justify-start text-xs h-8"
                    onClick={() => fillDemoCredentials("supplier@auditpro.com")}
                  >
                    <strong>Supplier:</strong> supplier@auditpro.com
                  </Button>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="w-full justify-start text-xs h-8"
                    onClick={() => fillDemoCredentials("jane@auditpro.com")}
                  >
                    <strong>Consumer:</strong> jane@auditpro.com
                  </Button>
                </div>
              </AlertDescription>
            </Alert>
          )}

<form onSubmit={handleLogin} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                type="email"
                placeholder="Enter your email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
                className="transition-all duration-200 focus:ring-2 focus:ring-blue-500"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="password">Password</Label>
              <div className="relative">
                <Input
                  id="password"
                  type={showPassword ? "text" : "password"}
                  placeholder={isDemoMode ? "Enter 'demo123'" : "Enter your password"}
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  required
                  className="pr-10 transition-all duration-200 focus:ring-2 focus:ring-blue-500"
                />
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                  onClick={() => setShowPassword(!showPassword)}
                >
                  {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                </Button>
              </div>
            </div>
            <Button
              type="submit"
              className="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 transition-all duration-200"
              disabled={loading}
            >
              {loading ? (
                <div className="flex items-center gap-2">
                  <LoadingSpinner size="sm" />
                  Signing in...
                </div>
              ) : (
                "Sign In"
              )}
            </Button>
          </form>
          <div className="mt-6 text-center text-sm">
            {"Don't have an account? "}
            <Link href="/auth/register" className="text-blue-600 hover:underline font-medium">
              Register here
            </Link>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/auditor/audit/[taskId]/page.tsx" isQuickEdit="true"
"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/auth-context"
import { supabase } from "@/lib/supabase"
import { demoAuditorTasks, demoCategories } from "@/lib/demo-data"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import { Slider } from "@/components/ui/slider"
import { LoadingSpinner } from "@/components/ui/loading-spinner"
import { useToast } from "@/hooks/use-toast"
import { ArrowLeft, Camera, Upload, CheckCircle } from "lucide-react"
import Link from "next/link"

type Question = {
  id: string
  question: string
  type: "rating" | "text_input" | "checkbox" | "photo_upload"
  min?: number
  max?: number
  required: boolean
}

type AuditTask = {
  id: string
  status: string
  payout_amount: number
  businesses: {
    id?: string
    name: string
    address: string
    city: string
    pin_code: string
  }
  business_categories: {
    name: string
    checklist: {
      questions: Question[]
    }
  }
}

export default function AuditPage({ params }: { params: { taskId: string } }) {
  const { profile, isDemoMode } = useAuth()
  const router = useRouter()
  const { toast } = useToast()
  const [task, setTask] = useState<AuditTask | null>(null)
  const [loading, setLoading] = useState(true)
  const [submitting, setSubmitting] = useState(false)
  const [responses, setResponses] = useState<Record<string, any>>({})
  const [photos, setPhotos] = useState<string[]>([])

useEffect(() => {
    if (profile?.role === "auditor") {
      fetchTask()
    } else if (!loading && profile?.role !== "auditor") {
      router.push("/auth/login")
    }
  }, [profile, params.taskId, isDemoMode, loading])

const fetchTask = async () => {
    try {
      if (isDemoMode) {
        // Demo mode - get task from demo data
        const demoTask = demoAuditorTasks.find((task) => task.id === params.taskId && task.auditor_id === profile?.id)

if (!demoTask) {
          throw new Error("Task not found")
        }

// Get the category checklist
        const category = demoCategories.find((cat) => cat.id === demoTask.category_id)
        if (!category) {
          throw new Error("Category not found")
        }

// Format the task data to match expected structure
        const formattedTask: AuditTask = {
          id: demoTask.id,
          status: demoTask.status,
          payout_amount: demoTask.payout_amount,
          businesses: {
            id: demoTask.business_id,
            name: demoTask.businesses.name,
            address: demoTask.businesses.address,
            city: demoTask.businesses.city,
            pin_code: demoTask.businesses.pin_code,
          },
          business_categories: {
            name: category.name,
            checklist: category.checklist,
          },
        }

setTask(formattedTask)

// Initialize responses
        const initialResponses: Record<string, any> = {}
        category.checklist.questions.forEach((q: Question) => {
          if (q.type === "rating") {
            initialResponses[q.id] = [q.min || 1]
          } else if (q.type === "checkbox") {
            initialResponses[q.id] = false
          } else {
            initialResponses[q.id] = ""
          }
        })
        setResponses(initialResponses)
      } else {
        // Real Supabase mode
        const { data, error } = await supabase
          .from("auditor_tasks")
          .select(`
            *,
            businesses (
              name,
              address,
              city,
              pin_code
            ),
            business_categories (
              name,
              checklist
            )
          `)
          .eq("id", params.taskId)
          .eq("auditor_id", profile?.id)
          .single()

if (error) throw error
        setTask(data)

// Initialize responses
        const initialResponses: Record<string, any> = {}
        data.business_categories.checklist.questions.forEach((q: Question) => {
          if (q.type === "rating") {
            initialResponses[q.id] = [q.min || 1]
          } else if (q.type === "checkbox") {
            initialResponses[q.id] = false
          } else {
            initialResponses[q.id] = ""
          }
        })
        setResponses(initialResponses)
      }
    } catch (error) {
      console.error("Error fetching task:", error)
      toast({
        title: "Error",
        description: "Failed to fetch audit task",
        variant: "destructive",
      })
      router.push("/auditor")
    } finally {
      setLoading(false)
    }
  }

const handleResponseChange = (questionId: string, value: any) => {
    setResponses((prev) => ({
      ...prev,
      [questionId]: value,
    }))
  }

const handlePhotoUpload = (questionId: string, photoUrl: string) => {
    setPhotos((prev) => [...prev, photoUrl])
    handleResponseChange(questionId, photoUrl)
  }

const validateResponses = () => {
    if (!task) return false

const questions = task.business_categories.checklist.questions
    for (const question of questions) {
      if (question.required) {
        const response = responses[question.id]
        if (question.type === "checkbox" && response !== true) {
          return { valid: false, message: `Please check: ${question.question}` }
        }
        if (question.type === "text_input" && (!response || response.trim() === "")) {
          return { valid: false, message: `Please answer: ${question.question}` }
        }
        if (question.type === "photo_upload" && (!response || response === "")) {
          return { valid: false, message: `Please upload photo for: ${question.question}` }
        }
        if (question.type === "rating" && (!response || response.length === 0)) {
          return { valid: false, message: `Please rate: ${question.question}` }
        }
      }
    }
    return { valid: true }
  }

const handleSubmit = async () => {
    if (!task) return

const validation = validateResponses()
    if (!validation.valid) {
      toast({
        title: "Incomplete Form",
        description: validation.message,
        variant: "destructive",
      })
      return
    }

setSubmitting(true)
    try {
      if (isDemoMode) {
        // Demo mode - simulate submission
        await new Promise((resolve) => setTimeout(resolve, 2000))

toast({
          title: "Success!",
          description: "Audit report submitted successfully! (Demo Mode)",
        })
        router.push("/auditor")
        return
      }

// Real Supabase submission
      const { error } = await supabase.from("audit_reports").insert({
        auditor_task_id: task.id,
        auditor_id: profile?.id,
        business_id: task.businesses.id,
        responses,
        photos,
      })

if (error) throw error

toast({
        title: "Success!",
        description: "Audit report submitted successfully!",
      })

router.push("/auditor")
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message,
        variant: "destructive",
      })
    } finally {
      setSubmitting(false)
    }
  }

if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 to-blue-50">
        <Card className="w-full max-w-md">
          <CardContent className="flex items-center justify-center p-8">
            <div className="text-center">
              <LoadingSpinner size="lg" className="mb-4" />
              <p className="text-gray-600">Loading audit task...</p>
            </div>
          </CardContent>
        </Card>
      </div>
    )
  }

if (!task) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 to-blue-50">
        <Card className="w-full max-w-md">
          <CardContent className="flex items-center justify-center p-8">
            <div className="text-center">
              <p className="text-gray-500 mb-4">Task not found</p>
              <Link href="/auditor">
                <Button>Back to Dashboard</Button>
              </Link>
            </div>
          </CardContent>
        </Card>
      </div>
    )
  }

<main className="max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
        <Card className="mb-8 shadow-lg">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <CheckCircle className="h-5 w-5 text-blue-600" />
              Business Information
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <p className="text-sm font-medium text-gray-500">Name</p>
                <p className="text-lg font-semibold">{task.businesses.name}</p>
              </div>
              <div>
                <p className="text-sm font-medium text-gray-500">Category</p>
                <p className="text-lg font-semibold">{task.business_categories.name}</p>
              </div>
              <div className="md:col-span-2">
                <p className="text-sm font-medium text-gray-500">Address</p>
                <p className="text-lg">
                  {task.businesses.address}, {task.businesses.city}, {task.businesses.pin_code}
                </p>
              </div>
            </div>
          </CardContent>
        </Card>

<Card className="shadow-lg">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Camera className="h-5 w-5 text-green-600" />
              Audit Checklist
            </CardTitle>
            <CardDescription>Please complete all required questions and upload necessary photos</CardDescription>
          </CardHeader>
          <CardContent className="space-y-8">
            {task.business_categories.checklist.questions.map((question, index) => (
              <div
                key={question.id}
                className="p-6 border rounded-lg space-y-4 hover:shadow-md transition-all duration-200"
              >
                <div className="flex items-start justify-between">
                  <Label className="text-base font-medium leading-relaxed">
                    {index + 1}. {question.question}
                    {question.required && <span className="text-red-500 ml-1">*</span>}
                  </Label>
                </div>

{question.type === "rating" && (
                  <div className="space-y-4">
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-500">{question.min || 1}</span>
                      <span className="text-2xl font-bold text-blue-600">
                        {responses[question.id]?.[0] || question.min || 1}
                      </span>
                      <span className="text-sm text-gray-500">{question.max || 10}</span>
                    </div>
                    <Slider
                      value={responses[question.id] || [question.min || 1]}
                      onValueChange={(value) => handleResponseChange(question.id, value)}
                      min={question.min || 1}
                      max={question.max || 10}
                      step={1}
                      className="w-full"
                    />
                  </div>
                )}

{question.type === "text_input" && (
                  <Textarea
                    placeholder="Enter your detailed response..."
                    value={responses[question.id] || ""}
                    onChange={(e) => handleResponseChange(question.id, e.target.value)}
                    className="w-full min-h-[100px] resize-none"
                  />
                )}

{question.type === "checkbox" && (
                  <div className="flex items-center space-x-3">
                    <Checkbox
                      id={question.id}
                      checked={responses[question.id] || false}
                      onCheckedChange={(checked) => handleResponseChange(question.id, checked)}
                      className="w-5 h-5"
                    />
                    <Label htmlFor={question.id} className="text-base">
                      Yes
                    </Label>
                  </div>
                )}

{question.type === "photo_upload" && (
                  <div className="space-y-4">
                    <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-blue-400 transition-colors duration-200">
                      <Camera className="mx-auto h-12 w-12 text-gray-400 mb-4" />
                      <div className="space-y-2">
                        <p className="text-sm text-gray-600">Take a photo or upload an image</p>
                        <input
                          type="file"
                          accept="image/*"
                          capture="environment"
                          id={`photo-${question.id}`}
                          className="hidden"
                          onChange={(e) => {
                            const file = e.target.files?.[0]
                            if (file) {
                              // Create a preview URL for the uploaded file
                              const previewUrl = URL.createObjectURL(file)
                              handlePhotoUpload(question.id, previewUrl)
                              toast({
                                title: "Photo Added",
                                description: "Photo has been added to the audit report",
                              })
                            }
                          }}
                        />
                        <Button
                          type="button"
                          variant="outline"
                          size="sm"
                          className="mt-2"
                          onClick={() => {
                            document.getElementById(`photo-${question.id}`)?.click()
                          }}
                        >
                          <Upload className="h-4 w-4 mr-2" />
                          Add Photo
                        </Button>
                      </div>
                    </div>
                    {responses[question.id] && (
                      <div className="mt-4">
                        <img
                          src={responses[question.id] || "/placeholder.svg"}
                          alt={`Photo for ${question.question}`}
                          className="h-40 w-60 object-cover rounded-lg border shadow-sm"
                        />
                      </div>
                    )}
                  </div>
                )}
              </div>
            ))}

<div className="flex justify-end space-x-4 pt-8 border-t">
              <Link href="/auditor">
                <Button variant="outline" size="lg">
                  Save Draft
                </Button>
              </Link>
              <Button
                onClick={handleSubmit}
                disabled={submitting}
                size="lg"
                className="bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800"
              >
                {submitting ? (
                  <div className="flex items-center gap-2">
                    <LoadingSpinner size="sm" />
                    Submitting...
                  </div>
                ) : (
                  <>
                    <CheckCircle className="h-4 w-4 mr-2" />
                    Submit Audit Report
                  </>
                )}
              </Button>
            </div>
          </CardContent>
        </Card>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/auditor/reports/[reportId]/page.tsx"
"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/auth-context"
import { supabase } from "@/lib/supabase"
import { demoAuditReports } from "@/lib/demo-data"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { LoadingSpinner } from "@/components/ui/loading-spinner"
import { ArrowLeft, FileText, Star, CheckCircle, X } from "lucide-react"
import Link from "next/link"

type AuditReport = {
  id: string
  responses: Record<string, any>
  photos: string[]
  submitted_at: string
  businesses: {
    name: string
    address: string
    city: string
    pin_code: string
  }
  profiles: {
    full_name: string
  }
}

export default function ViewReportPage({ params }: { params: { reportId: string } }) {
  const { profile, isDemoMode } = useAuth()
  const router = useRouter()
  const [report, setReport] = useState<AuditReport | null>(null)
  const [loading, setLoading] = useState(true)

useEffect(() => {
    if (profile) {
      fetchReport()
    }
  }, [profile, params.reportId, isDemoMode])

const fetchReport = async () => {
    try {
      if (isDemoMode) {
        const demoReport = demoAuditReports.find((r) => r.id === params.reportId)
        if (demoReport) {
          setReport(demoReport as AuditReport)
        }
      } else {
        const { data, error } = await supabase
          .from("audit_reports")
          .select(`
            *,
            businesses (
              name,
              address,
              city,
              pin_code
            ),
            profiles (
              full_name
            )
          `)
          .eq("id", params.reportId)
          .single()

if (error) throw error
        setReport(data)
      }
    } catch (error) {
      console.error("Error fetching report:", error)
    } finally {
      setLoading(false)
    }
  }

const renderResponse = (key: string, value: any) => {
    if (Array.isArray(value)) {
      // Rating response
      return (
        <div className="flex items-center gap-2">
          <div className="flex items-center">
            {[...Array(10)].map((_, i) => (
              <Star key={i} className={`h-4 w-4 ${i < value[0] ? "text-yellow-400 fill-current" : "text-gray-300"}`} />
            ))}
          </div>
          <span className="font-semibold text-lg">{value[0]}/10</span>
        </div>
      )
    } else if (typeof value === "boolean") {
      // Checkbox response
      return (
        <div className="flex items-center gap-2">
          {value ? <CheckCircle className="h-5 w-5 text-green-600" /> : <X className="h-5 w-5 text-red-600" />}
          <span className={value ? "text-green-600" : "text-red-600"}>{value ? "Yes" : "No"}</span>
        </div>
      )
    } else if (typeof value === "string" && value.includes("placeholder.svg")) {
      // Photo response
      return (
        <img
          src={value || "/placeholder.svg"}
          alt="Audit photo"
          className="h-32 w-48 object-cover rounded-lg border shadow-sm"
        />
      )
    } else {
      // Text response
      return <p className="text-gray-700">{value}</p>
    }
  }

if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <LoadingSpinner size="lg" />
      </div>
    )
  }

if (!report) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <Card className="w-full max-w-md">
          <CardContent className="text-center p-8">
            <p className="text-gray-500 mb-4">Report not found</p>
            <Link href="/auditor">
              <Button>Back to Dashboard</Button>
            </Link>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gray-50">
      <header className="bg-white shadow-sm border-b">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center py-4">
            <Link href="/auditor">
              <Button variant="ghost" size="sm">
                <ArrowLeft className="h-4 w-4 mr-2" />
                Back to Dashboard
              </Button>
            </Link>
            <h1 className="text-2xl font-bold text-gray-900 ml-4">Audit Report</h1>
          </div>
        </div>
      </header>

<main className="max-w-4xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <div className="space-y-6">
          {/* Business Info */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <FileText className="h-5 w-5 text-blue-600" />
                Business Information
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <p className="text-sm font-medium text-gray-500">Business Name</p>
                  <p className="text-lg font-semibold">{report.businesses.name}</p>
                </div>
                <div>
                  <p className="text-sm font-medium text-gray-500">Auditor</p>
                  <p className="text-lg font-semibold">{report.profiles.full_name}</p>
                </div>
                <div>
                  <p className="text-sm font-medium text-gray-500">Location</p>
                  <p className="text-sm text-gray-700">
                    {report.businesses.address}, {report.businesses.city}, {report.businesses.pin_code}
                  </p>
                </div>
                <div>
                  <p className="text-sm font-medium text-gray-500">Submitted</p>
                  <p className="text-sm text-gray-700">{new Date(report.submitted_at).toLocaleDateString()}</p>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Audit Responses */}
          <Card>
            <CardHeader>
              <CardTitle>Audit Results</CardTitle>
              <CardDescription>Detailed responses to audit questions</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                {Object.entries(report.responses).map(([key, value], index) => (
                  <div key={key} className="p-4 border rounded-lg">
                    <div className="mb-3">
                      <p className="font-medium text-gray-900">
                        {key.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase())}
                      </p>
                    </div>
                    {renderResponse(key, value)}
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

{/* Photos */}
          {report.photos && report.photos.length > 0 && (
            <Card>
              <CardHeader>
                <CardTitle>Photos</CardTitle>
                <CardDescription>Images captured during the audit</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                  {report.photos.map((photo, index) => (
                    <img
                      key={index}
                      src={photo || "/placeholder.svg"}
                      alt={`Audit photo ${index + 1}`}
                      className="h-48 w-full object-cover rounded-lg border shadow-sm"
                    />
                  ))}
                </div>
              </CardContent>
            </Card>
          )}
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/consumer/reports/page.tsx"
"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/auth-context"
import { supabase } from "@/lib/supabase"
import { demoAuditReports, demoBusinesses } from "@/lib/demo-data"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { LoadingSpinner } from "@/components/ui/loading-spinner"
import { ArrowLeft, Search, FileText, Star, Calendar, MapPin, Eye } from "lucide-react"
import Link from "next/link"

type AuditReport = {
  id: string
  responses: Record<string, any>
  submitted_at: string
  businesses: {
    id: string
    name: string
    address: string
    city: string
    pin_code: string
  }
  profiles: {
    full_name: string
  }
}

export default function ConsumerReportsPage() {
  const { profile, isDemoMode } = useAuth()
  const router = useRouter()
  const [reports, setReports] = useState<AuditReport[]>([])
  const [filteredReports, setFilteredReports] = useState<AuditReport[]>([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState("")

useEffect(() => {
    if (!profile || profile.role !== "consumer") {
      router.push("/auth/login")
      return
    }
    fetchReports()
  }, [profile, isDemoMode])

useEffect(() => {
    filterReports()
  }, [reports, searchTerm])

const fetchReports = async () => {
    try {
      if (isDemoMode) {
        // Combine demo reports with business data
        const reportsWithBusiness = demoAuditReports.map((report) => ({
          ...report,
          businesses: {
            ...report.businesses,
            id: report.business_id,
            address: demoBusinesses.find((b) => b.id === report.business_id)?.address || "",
            city: demoBusinesses.find((b) => b.id === report.business_id)?.city || "",
            pin_code: demoBusinesses.find((b) => b.id === report.business_id)?.pin_code || "",
          },
        }))
        setReports(reportsWithBusiness as AuditReport[])
      } else {
        const { data, error } = await supabase
          .from("audit_reports")
          .select(`
            *,
            businesses (
              id,
              name,
              address,
              city,
              pin_code
            ),
            profiles (
              full_name
            )
          `)
          .order("submitted_at", { ascending: false })

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

const filterReports = () => {
    let filtered = reports

if (searchTerm) {
      filtered = filtered.filter(
        (report) =>
          report.businesses.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
          report.businesses.city.toLowerCase().includes(searchTerm.toLowerCase()) ||
          report.profiles.full_name.toLowerCase().includes(searchTerm.toLowerCase()),
      )
    }

setFilteredReports(filtered)
  }

const getOverallRating = (responses: Record<string, any>) => {
    const ratings = Object.entries(responses)
      .filter(([key, value]) => Array.isArray(value) && typeof value[0] === "number")
      .map(([key, value]) => value[0])

if (ratings.length === 0) return null
    return Math.round(ratings.reduce((sum, rating) => sum + rating, 0) / ratings.length)
  }

if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <LoadingSpinner size="lg" />
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gray-50">
      <header className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center py-4">
            <Link href="/consumer">
              <Button variant="ghost" size="sm">
                <ArrowLeft className="h-4 w-4 mr-2" />
                Back to Directory
              </Button>
            </Link>
            <h1 className="text-2xl font-bold text-gray-900 ml-4">Audit Reports</h1>
          </div>
        </div>
      </header>

<main className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        {/* Search */}
        <Card className="mb-6">
          <CardHeader>
            <CardTitle>Search Audit Reports</CardTitle>
            <CardDescription>Find audit reports by business name, location, or auditor</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="relative">
              <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
              <Input
                placeholder="Search reports..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10"
              />
            </div>
          </CardContent>
        </Card>

{/* Reports Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredReports.map((report) => {
            const overallRating = getOverallRating(report.responses)

return (
              <Card key={report.id} className="hover:shadow-lg transition-shadow">
                <CardHeader>
                  <div className="flex justify-between items-start">
                    <CardTitle className="text-lg">{report.businesses.name}</CardTitle>
                    {overallRating && (
                      <div className="flex items-center gap-1">
                        <Star className="h-4 w-4 text-yellow-400 fill-current" />
                        <span className="font-semibold">{overallRating}/10</span>
                      </div>
                    )}
                  </div>
                </CardHeader>
                <CardContent className="space-y-3">
                  <div className="flex items-start gap-2">
                    <MapPin className="h-4 w-4 text-gray-500 mt-0.5" />
                    <div className="text-sm text-gray-600">
                      <p>{report.businesses.address}</p>
                      <p>
                        {report.businesses.city}, {report.businesses.pin_code}
                      </p>
                    </div>
                  </div>

<div className="flex items-center gap-2">
                    <Calendar className="h-4 w-4 text-gray-500" />
                    <span className="text-sm text-gray-600">{new Date(report.submitted_at).toLocaleDateString()}</span>
                  </div>

<div className="flex items-center gap-2">
                    <FileText className="h-4 w-4 text-gray-500" />
                    <span className="text-sm text-gray-600">Audited by {report.profiles.full_name}</span>
                  </div>

<div className="pt-2">
                    <Link href={`/consumer/reports/${report.id}`}>
                      <Button variant="outline" size="sm" className="w-full">
                        <Eye className="h-4 w-4 mr-2" />
                        View Full Report
                      </Button>
                    </Link>
                  </div>
                </CardContent>
              </Card>
            )
          })}
        </div>

{filteredReports.length === 0 && (
          <div className="text-center py-12">
            <FileText className="mx-auto h-12 w-12 text-gray-400" />
            <h3 className="mt-2 text-sm font-medium text-gray-900">No reports found</h3>
            <p className="mt-1 text-sm text-gray-500">
              {searchTerm ? "Try adjusting your search criteria" : "No audit reports available yet"}
            </p>
          </div>
        )}
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/consumer/reports/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/consumer/reports/[reportId]/page.tsx"
"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/auth-context"
import { supabase } from "@/lib/supabase"
import { demoAuditReports, demoBusinesses } from "@/lib/demo-data"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { LoadingSpinner } from "@/components/ui/loading-spinner"
import { ArrowLeft, FileText, Star, Calendar, MapPin, CheckCircle, X, Camera } from "lucide-react"
import Link from "next/link"

export default function ConsumerReportViewPage({ params }: { params: { reportId: string } }) {
  const { profile, isDemoMode } = useAuth()
  const router = useRouter()
  const [report, setReport] = useState<AuditReport | null>(null)
  const [loading, setLoading] = useState(true)

useEffect(() => {
    if (!profile || profile.role !== "consumer") {
      router.push("/auth/login")
      return
    }
    fetchReport()
  }, [profile, params.reportId, isDemoMode])

const fetchReport = async () => {
    try {
      if (isDemoMode) {
        const demoReport = demoAuditReports.find((r) => r.id === params.reportId)
        if (demoReport) {
          const business = demoBusinesses.find((b) => b.id === demoReport.business_id)
          const reportWithBusiness = {
            ...demoReport,
            businesses: {
              name: business?.name || demoReport.businesses.name,
              address: business?.address || "",
              city: business?.city || "",
              pin_code: business?.pin_code || "",
            },
          }
          setReport(reportWithBusiness as AuditReport)
        }
      } else {
        const { data, error } = await supabase
          .from("audit_reports")
          .select(`
            *,
            businesses (
              name,
              address,
              city,
              pin_code
            ),
            profiles (
              full_name
            )
          `)
          .eq("id", params.reportId)
          .single()

if (error) throw error
        setReport(data)
      }
    } catch (error) {
      console.error("Error fetching report:", error)
    } finally {
      setLoading(false)
    }
  }

const renderResponse = (key: string, value: any, questionText: string) => {
    if (Array.isArray(value)) {
      // Rating response
      return (
        <div className="space-y-2">
          <div className="flex items-center gap-2">
            <div className="flex items-center">
              {[...Array(10)].map((_, i) => (
                <Star
                  key={i}
                  className={`h-4 w-4 ${i < value[0] ? "text-yellow-400 fill-current" : "text-gray-300"}`}
                />
              ))}
            </div>
            <span className="font-semibold text-lg">{value[0]}/10</span>
          </div>
          <div className="w-full bg-gray-200 rounded-full h-2">
            <div className="bg-blue-600 h-2 rounded-full" style={{ width: `${(value[0] / 10) * 100}%` }}></div>
          </div>
        </div>
      )
    } else if (typeof value === "boolean") {
      // Checkbox response
      return (
        <div className="flex items-center gap-2">
          {value ? <CheckCircle className="h-5 w-5 text-green-600" /> : <X className="h-5 w-5 text-red-600" />}
          <span className={`font-medium ${value ? "text-green-600" : "text-red-600"}`}>{value ? "Yes" : "No"}</span>
        </div>
      )
    } else if (typeof value === "string" && value.includes("placeholder.svg")) {
      // Photo response
      return (
        <div className="space-y-2">
          <img
            src={value || "/placeholder.svg"}
            alt="Audit photo"
            className="h-48 w-full object-cover rounded-lg border shadow-sm"
          />
          <div className="flex items-center gap-2 text-sm text-gray-500">
            <Camera className="h-4 w-4" />
            <span>Photo evidence provided</span>
          </div>
        </div>
      )
    } else {
      // Text response
      return (
        <div className="p-3 bg-gray-50 rounded-lg">
          <p className="text-gray-700">{value}</p>
        </div>
      )
    }
  }

const getOverallRating = () => {
    if (!report) return null
    const ratings = Object.entries(report.responses)
      .filter(([key, value]) => Array.isArray(value) && typeof value[0] === "number")
      .map(([key, value]) => value[0])

if (ratings.length === 0) return null
    return Math.round(ratings.reduce((sum, rating) => sum + rating, 0) / ratings.length)
  }

if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <LoadingSpinner size="lg" />
      </div>
    )
  }

if (!report) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <Card className="w-full max-w-md">
          <CardContent className="text-center p-8">
            <p className="text-gray-500 mb-4">Report not found</p>
            <Link href="/consumer/reports">
              <Button>Back to Reports</Button>
            </Link>
          </CardContent>
        </Card>
      </div>
    )
  }

const overallRating = getOverallRating()

return (
    <div className="min-h-screen bg-gray-50">
      <header className="bg-white shadow-sm border-b">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center py-4">
            <Link href="/consumer/reports">
              <Button variant="ghost" size="sm">
                <ArrowLeft className="h-4 w-4 mr-2" />
                Back to Reports
              </Button>
            </Link>
            <div className="ml-4">
              <h1 className="text-2xl font-bold text-gray-900">{report.businesses.name}</h1>
              <p className="text-sm text-gray-600">Transparency Audit Report</p>
            </div>
          </div>
        </div>
      </header>

<main className="max-w-4xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <div className="space-y-6">
          {/* Overall Rating */}
          {overallRating && (
            <Card className="bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-200">
              <CardContent className="text-center py-8">
                <div className="flex items-center justify-center gap-4 mb-4">
                  <div className="flex items-center">
                    {[...Array(10)].map((_, i) => (
                      <Star
                        key={i}
                        className={`h-6 w-6 ${i < overallRating ? "text-yellow-400 fill-current" : "text-gray-300"}`}
                      />
                    ))}
                  </div>
                  <span className="text-3xl font-bold text-blue-600">{overallRating}/10</span>
                </div>
                <p className="text-lg font-medium text-gray-700">Overall Audit Score</p>
                <Badge
                  variant="outline"
                  className={`mt-2 ${
                    overallRating >= 8
                      ? "border-green-500 text-green-700"
                      : overallRating >= 6
                        ? "border-yellow-500 text-yellow-700"
                        : "border-red-500 text-red-700"
                  }`}
                >
                  {overallRating >= 8 ? "Excellent" : overallRating >= 6 ? "Good" : "Needs Improvement"}
                </Badge>
              </CardContent>
            </Card>
          )}

{/* Business Info */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <FileText className="h-5 w-5 text-blue-600" />
                Business Information
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <p className="text-sm font-medium text-gray-500">Business Name</p>
                  <p className="text-lg font-semibold">{report.businesses.name}</p>
                </div>
                <div>
                  <p className="text-sm font-medium text-gray-500">Audited By</p>
                  <p className="text-lg font-semibold">{report.profiles.full_name}</p>
                </div>
                <div>
                  <p className="text-sm font-medium text-gray-500">Location</p>
                  <div className="flex items-center gap-2">
                    <MapPin className="h-4 w-4 text-gray-500" />
                    <p className="text-sm text-gray-700">
                      {report.businesses.address}, {report.businesses.city}, {report.businesses.pin_code}
                    </p>
                  </div>
                </div>
                <div>
                  <p className="text-sm font-medium text-gray-500">Audit Date</p>
                  <div className="flex items-center gap-2">
                    <Calendar className="h-4 w-4 text-gray-500" />
                    <p className="text-sm text-gray-700">{new Date(report.submitted_at).toLocaleDateString()}</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Detailed Audit Results */}
          <Card>
            <CardHeader>
              <CardTitle>Detailed Audit Results</CardTitle>
              <CardDescription>Comprehensive evaluation across all audit criteria</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                {Object.entries(report.responses).map(([key, value], index) => {
                  const questionText = key.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase())

return (
                    <div key={key} className="p-6 border rounded-lg hover:shadow-md transition-shadow">
                      <div className="mb-4">
                        <h3 className="font-semibold text-gray-900 text-lg">{questionText}</h3>
                      </div>
                      {renderResponse(key, value, questionText)}
                    </div>
                  )
                })}
              </div>
            </CardContent>
          </Card>

{/* Additional Photos */}
          {report.photos && report.photos.length > 0 && (
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Camera className="h-5 w-5 text-blue-600" />
                  Audit Documentation
                </CardTitle>
                <CardDescription>Visual evidence captured during the audit</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                  {report.photos.map((photo, index) => (
                    <div key={index} className="space-y-2">
                      <img
                        src={photo || "/placeholder.svg"}
                        alt={`Audit documentation ${index + 1}`}
                        className="h-48 w-full object-cover rounded-lg border shadow-sm hover:shadow-md transition-shadow"
                      />
                      <p className="text-xs text-gray-500 text-center">Evidence #{index + 1}</p>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/categories/new/page.tsx"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/auth-context"
import { supabase } from "@/lib/supabase"
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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useToast } from "@/hooks/use-toast"
import { ArrowLeft, Plus, Trash2 } from "lucide-react"
import Link from "next/link"
import { LoadingSpinner } from "@/components/ui/loading-spinner"

type Question = {
  id: string
  question: string
  type: "rating" | "text_input" | "checkbox" | "photo_upload"
  min?: number
  max?: number
  required: boolean
}

export default function NewCategoryPage() {
  const { profile, loading: authLoading } = useAuth()
  const router = useRouter()
  const { toast } = useToast()
  const [submitting, setSubmitting] = useState(false)
  const [formData, setFormData] = useState({
    name: "",
    payoutAmount: "",
  })
  const [questions, setQuestions] = useState<Question[]>([
    {
      id: "1",
      question: "",
      type: "rating" as const,
      min: 1,
      max: 10,
      required: true,
    },
  ])

useEffect(() => {
    if (!authLoading && (!profile || profile.role !== "admin")) {
      router.push("/auth/login")
    }
  }, [profile, authLoading, router])

const addQuestion = () => {
    const newQuestion: Question = {
      id: Date.now().toString(),
      question: "",
      type: "rating",
      min: 1,
      max: 10,
      required: true,
    }
    setQuestions([...questions, newQuestion])
  }

const removeQuestion = (id: string) => {
    setQuestions(questions.filter((q) => q.id !== id))
  }

const updateQuestion = (id: string, updates: Partial<Question>) => {
    setQuestions(questions.map((q) => (q.id === id ? { ...q, ...updates } : q)))
  }

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

try {
      // Validate form
      if (!formData.name.trim()) {
        throw new Error("Category name is required")
      }

if (!formData.payoutAmount || Number(formData.payoutAmount) <= 0) {
        throw new Error("Valid payout amount is required")
      }

const validQuestions = questions.filter((q) => q.question.trim())
      if (validQuestions.length === 0) {
        throw new Error("Please add at least one question")
      }

// Create checklist JSON
      const checklist = {
        questions: validQuestions.map((q) => ({
          id: q.id,
          question: q.question.trim(),
          type: q.type,
          ...(q.type === "rating" && { min: q.min || 1, max: q.max || 10 }),
          required: q.required,
        })),
      }

console.log("Creating category with data:", {
        name: formData.name.trim(),
        payout_amount: Math.round(Number(formData.payoutAmount) * 100),
        checklist,
      })

// Insert category
      const { data, error } = await supabase
        .from("business_categories")
        .insert({
          name: formData.name.trim(),
          payout_amount: Math.round(Number(formData.payoutAmount) * 100), // Convert to paise
          checklist,
        })
        .select()

if (error) {
        console.error("Supabase error:", error)
        throw new Error(`Failed to create category: ${error.message}`)
      }

console.log("Category created successfully:", data)

toast({
        title: "Success!",
        description: `Business category "${formData.name}" created successfully`,
      })

// Reset form
      setFormData({ name: "", payoutAmount: "" })
      setQuestions([
        {
          id: "1",
          question: "",
          type: "rating",
          min: 1,
          max: 10,
          required: true,
        },
      ])

// Redirect after a short delay to show the success message
      setTimeout(() => {
        router.push("/admin")
      }, 1500)
    } catch (error: any) {
      console.error("Error creating category:", error)
      toast({
        title: "Error",
        description: error.message || "Failed to create category",
        variant: "destructive",
      })
    } finally {
      setSubmitting(false)
    }
  }

if (authLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <LoadingSpinner size="lg" />
      </div>
    )
  }

if (!profile || profile.role !== "admin") {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <Card className="w-full max-w-md">
          <CardContent className="text-center p-8">
            <p className="text-red-600 mb-4">Access denied. Admin privileges required.</p>
            <Link href="/auth/login">
              <Button>Sign In as Admin</Button>
            </Link>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gray-50">
      <header className="bg-white shadow-sm border-b">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center py-4">
            <Link href="/admin">
              <Button variant="ghost" size="sm">
                <ArrowLeft className="h-4 w-4 mr-2" />
                Back to Admin
              </Button>
            </Link>
            <h1 className="text-2xl font-bold text-gray-900 ml-4">Add New Category</h1>
          </div>
        </div>
      </header>

<main className="max-w-4xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <form onSubmit={handleSubmit} className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Category Details</CardTitle>
              <CardDescription>Basic information about the business category</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="name">Category Name *</Label>
                  <Input
                    id="name"
                    placeholder="e.g., Restaurant, Medical Clinic"
                    value={formData.name}
                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                    required
                    disabled={submitting}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="payoutAmount">Auditor Payout (₹) *</Label>
                  <Input
                    id="payoutAmount"
                    type="number"
                    min="1"
                    step="1"
                    placeholder="e.g., 200"
                    value={formData.payoutAmount}
                    onChange={(e) => setFormData({ ...formData, payoutAmount: e.target.value })}
                    required
                    disabled={submitting}
                  />
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <div className="flex justify-between items-center">
                <div>
                  <CardTitle>Audit Checklist</CardTitle>
                  <CardDescription>Define the questions auditors will answer for this category</CardDescription>
                </div>
                <Button type="button" onClick={addQuestion} variant="outline" disabled={submitting}>
                  <Plus className="h-4 w-4 mr-2" />
                  Add Question
                </Button>
              </div>
            </CardHeader>
            <CardContent className="space-y-6">
              {questions.map((question, index) => (
                <div key={question.id} className="p-4 border rounded-lg space-y-4">
                  <div className="flex justify-between items-center">
                    <h3 className="font-medium">Question {index + 1}</h3>
                    {questions.length > 1 && (
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        onClick={() => removeQuestion(question.id)}
                        disabled={submitting}
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    )}
                  </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label>Question Text *</Label>
                      <Textarea
                        placeholder="Enter your question"
                        value={question.question}
                        onChange={(e) => updateQuestion(question.id, { question: e.target.value })}
                        disabled={submitting}
                        required
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>Question Type</Label>
                      <Select
                        value={question.type}
                        onValueChange={(value: Question["type"]) => updateQuestion(question.id, { type: value })}
                        disabled={submitting}
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="rating">Rating (1-10)</SelectItem>
                          <SelectItem value="text_input">Text Input</SelectItem>
                          <SelectItem value="checkbox">Yes/No</SelectItem>
                          <SelectItem value="photo_upload">Photo Upload</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

{question.type === "rating" && (
                    <div className="grid grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label>Min Value</Label>
                        <Input
                          type="number"
                          min="1"
                          max="10"
                          value={question.min || 1}
                          onChange={(e) => updateQuestion(question.id, { min: Number.parseInt(e.target.value) || 1 })}
                          disabled={submitting}
                        />
                      </div>
                      <div className="space-y-2">
                        <Label>Max Value</Label>
                        <Input
                          type="number"
                          min="1"
                          max="10"
                          value={question.max || 10}
                          onChange={(e) => updateQuestion(question.id, { max: Number.parseInt(e.target.value) || 10 })}
                          disabled={submitting}
                        />
                      </div>
                    </div>
                  )}
                </div>
              ))}
            </CardContent>
          </Card>

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/auth-context"
import { supabase, isSupabaseConfigured } from "@/lib/supabase"
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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useToast } from "@/hooks/use-toast"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"
import { LoadingSpinner } from "@/components/ui/loading-spinner"
import { getDemoCategories, createDemoBusiness } from "@/lib/demo-data"

export default function NewBusinessPage() {
  const { profile, loading: authLoading } = useAuth()
  const router = useRouter()
  const { toast } = useToast()
  const [submitting, setSubmitting] = useState(false)
  const [categories, setCategories] = useState<any[]>([])
  const [categoriesLoading, setCategoriesLoading] = useState(true)
  const [formData, setFormData] = useState({
    name: "",
    categoryId: "",
    address: "",
    city: "",
    pinCode: "",
    phoneNumber: "",
    email: "",
  })

useEffect(() => {
    if (!authLoading && (!profile || profile.role !== "admin")) {
      router.push("/auth/login")
    }
  }, [profile, authLoading, router])

useEffect(() => {
    if (profile?.role === "admin") {
      fetchCategories()
    }
  }, [profile])

const fetchCategories = async () => {
    try {
      setCategoriesLoading(true)

if (!isSupabaseConfigured) {
        // Use demo data when Supabase is not configured
        console.log("Using demo categories data")
        const demoCategories = getDemoCategories()
        setCategories(demoCategories)
        return
      }

const { data, error } = await supabase.from("business_categories").select("*").order("name")

if (error) {
        console.error("Supabase error:", error)
        // Fallback to demo data on error
        console.log("Falling back to demo categories")
        const demoCategories = getDemoCategories()
        setCategories(demoCategories)
        return
      }

console.log("Fetched categories from Supabase:", data)
      setCategories(data || [])
    } catch (error: any) {
      console.error("Error fetching categories:", error)
      // Fallback to demo data on any error
      console.log("Using demo categories due to error")
      const demoCategories = getDemoCategories()
      setCategories(demoCategories)

toast({
        title: "Demo Mode",
        description: "Using demo data. Configure Supabase for full functionality.",
      })
    } finally {
      setCategoriesLoading(false)
    }
  }

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

try {
      // Validate form
      if (!formData.name.trim()) {
        throw new Error("Business name is required")
      }

if (!formData.categoryId) {
        throw new Error("Please select a category")
      }

if (!formData.address.trim()) {
        throw new Error("Address is required")
      }

if (!formData.city.trim()) {
        throw new Error("City is required")
      }

if (!formData.pinCode.trim()) {
        throw new Error("PIN code is required")
      }

// Validate PIN code format (6 digits)
      if (!/^\d{6}$/.test(formData.pinCode)) {
        throw new Error("PIN code must be 6 digits")
      }

// Validate email if provided
      if (formData.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
        throw new Error("Please enter a valid email address")
      }

const businessData = {
        name: formData.name.trim(),
        category_id: formData.categoryId,
        address: formData.address.trim(),
        city: formData.city.trim(),
        pin_code: formData.pinCode.trim(),
        phone_number: formData.phoneNumber.trim() || null,
        email: formData.email.trim() || null,
      }

console.log("Creating business with data:", businessData)

if (!isSupabaseConfigured) {
        // Demo mode - simulate business creation
        console.log("Demo mode: Simulating business creation")
        await new Promise((resolve) => setTimeout(resolve, 1000)) // Simulate API delay

const demoBusiness = createDemoBusiness(businessData)
        console.log("Demo business created:", demoBusiness)

toast({
          title: "Demo Success!",
          description: `Business "${formData.name}" created in demo mode. Configure Supabase for real functionality.`,
        })
      } else {
        // Real Supabase insertion
        const { data, error } = await supabase.from("businesses").insert(businessData).select()

if (error) {
          console.error("Supabase error:", error)
          throw new Error(`Failed to create business: ${error.message}`)
        }

console.log("Business created successfully:", data)

toast({
          title: "Success!",
          description: `Business "${formData.name}" created successfully. Tasks have been automatically assigned.`,
        })
      }

// Reset form
      setFormData({
        name: "",
        categoryId: "",
        address: "",
        city: "",
        pinCode: "",
        phoneNumber: "",
        email: "",
      })

// Redirect after a short delay to show the success message
      setTimeout(() => {
        router.push("/admin")
      }, 1500)
    } catch (error: any) {
      console.error("Error creating business:", error)
      toast({
        title: "Error",
        description: error.message || "Failed to create business",
        variant: "destructive",
      })
    } finally {
      setSubmitting(false)
    }
  }

if (authLoading || categoriesLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <LoadingSpinner size="lg" />
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gray-50">
      <header className="bg-white shadow-sm border-b">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center py-4">
            <Link href="/admin">
              <Button variant="ghost" size="sm">
                <ArrowLeft className="h-4 w-4 mr-2" />
                Back to Admin
              </Button>
            </Link>
            <h1 className="text-2xl font-bold text-gray-900 ml-4">Add New Business</h1>
          </div>
        </div>
      </header>

<main className="max-w-4xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        {!isSupabaseConfigured && (
          <Card className="mb-6 border-orange-200 bg-orange-50">
            <CardContent className="p-4">
              <div className="flex items-center space-x-2">
                <div className="w-2 h-2 bg-orange-500 rounded-full"></div>
                <p className="text-sm text-orange-800">
                  <strong>Demo Mode:</strong> Supabase not configured. Data will not persist.{" "}
                  <Link href="/.env.example" className="underline">
                    Configure environment variables
                  </Link>{" "}
                  for full functionality.
                </p>
              </div>
            </CardContent>
          </Card>
        )}

<Card>
          <CardHeader>
            <CardTitle>Business Information</CardTitle>
            <CardDescription>
              Add a new business to the platform. Tasks will be automatically created for suppliers and auditors.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="name">Business Name *</Label>
                  <Input
                    id="name"
                    placeholder="Enter business name"
                    value={formData.name}
                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                    required
                    disabled={submitting}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="category">Category *</Label>
                  <Select
                    value={formData.categoryId}
                    onValueChange={(value) => setFormData({ ...formData, categoryId: value })}
                    disabled={submitting}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select category" />
                    </SelectTrigger>
                    <SelectContent>
                      {categories.map((category) => (
                        <SelectItem key={category.id} value={category.id}>
                          {category.name} (₹{((category.payout_amount || 0) / 100).toFixed(2)})
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  {categories.length === 0 && (
                    <p className="text-sm text-gray-500">
                      No categories available.{" "}
                      <Link href="/admin/categories/new" className="text-blue-600 hover:underline">
                        Create one first
                      </Link>
                      .
                    </p>
                  )}
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="address">Address *</Label>
                <Textarea
                  id="address"
                  placeholder="Enter complete address"
                  value={formData.address}
                  onChange={(e) => setFormData({ ...formData, address: e.target.value })}
                  required
                  disabled={submitting}
                />
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="city">City *</Label>
                  <Input
                    id="city"
                    placeholder="Enter city"
                    value={formData.city}
                    onChange={(e) => setFormData({ ...formData, city: e.target.value })}
                    required
                    disabled={submitting}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="pinCode">PIN Code *</Label>
                  <Input
                    id="pinCode"
                    placeholder="Enter 6-digit PIN code"
                    value={formData.pinCode}
                    onChange={(e) => setFormData({ ...formData, pinCode: e.target.value })}
                    pattern="[0-9]{6}"
                    maxLength={6}
                    required
                    disabled={submitting}
                  />
                </div>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="phoneNumber">Phone Number</Label>
                  <Input
                    id="phoneNumber"
                    placeholder="Enter phone number"
                    value={formData.phoneNumber}
                    onChange={(e) => setFormData({ ...formData, phoneNumber: e.target.value })}
                    disabled={submitting}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="email">Email</Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="Enter email address"
                    value={formData.email}
                    onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                    disabled={submitting}
                  />
                </div>
              </div>

<div className="flex justify-end space-x-4">
                <Link href="/admin">
                  <Button type="button" variant="outline" disabled={submitting}>
                    Cancel
                  </Button>
                </Link>
                <Button type="submit" disabled={submitting || categories.length === 0}>
                  {submitting ? (
                    <>
                      <LoadingSpinner size="sm" className="mr-2" />
                      Creating...
                    </>
                  ) : (
                    "Create Business"
                  )}
                </Button>
              </div>
            </form>
          </CardContent>
        </Card>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/demo-data.ts"
// Demo data for the application
export const demoUsers = [
  {
    id: "admin-1",
    role: "admin" as const,
    full_name: "Admin User",
    email: "admin@auditpro.com",
    phone_number: "+91 9876543210",
    address: "123 Admin Street",
    city: "Mumbai",
    pin_code: "400001",
  },
  {
    id: "auditor-1",
    role: "auditor" as const,
    full_name: "John Auditor",
    email: "john@auditpro.com",
    phone_number: "+91 9876543211",
    address: "456 Auditor Lane",
    city: "Mumbai",
    pin_code: "400002",
    upi_handle: "john@paytm",
    bank_account_number: "1234567890",
  },
  {
    id: "supplier-1",
    role: "supplier" as const,
    full_name: "Supply Chain Co",
    email: "supplier@auditpro.com",
    phone_number: "+91 9876543212",
    address: "789 Supply Road",
    city: "Mumbai",
    pin_code: "400003",
  },
  {
    id: "consumer-1",
    role: "consumer" as const,
    full_name: "Jane Consumer",
    email: "jane@auditpro.com",
    phone_number: "+91 9876543213",
    address: "321 Consumer Street",
    city: "Mumbai",
    pin_code: "400004",
  },
]

export const demoCategories = [
  {
    id: "cat-1",
    name: "Restaurant",
    payout_amount: 20000,
    checklist: {
      questions: [
        {
          id: "cleanliness_rating",
          question: "Cleanliness rating (1-10)?",
          type: "rating",
          min: 1,
          max: 10,
          required: true,
        },
        {
          id: "ingredient_quality",
          question: "Quality of ingredients used?",
          type: "text_input",
          required: true,
        },
        {
          id: "health_certificates",
          question: "Are health and safety certificates visible?",
          type: "checkbox",
          required: true,
        },
        {
          id: "kitchen_photo",
          question: "Upload photo of kitchen cleanliness.",
          type: "photo_upload",
          required: true,
        },
      ],
    },
    created_at: "2024-01-01T00:00:00Z",
  },
  {
    id: "cat-2",
    name: "Medical Clinic",
    payout_amount: 25000,
    checklist: {
      questions: [
        {
          id: "facility_cleanliness",
          question: "Overall facility cleanliness (1-10)?",
          type: "rating",
          min: 1,
          max: 10,
          required: true,
        },
        {
          id: "equipment_condition",
          question: "Condition of medical equipment?",
          type: "text_input",
          required: true,
        },
        {
          id: "staff_hygiene",
          question: "Staff following proper hygiene protocols?",
          type: "checkbox",
          required: true,
        },
        {
          id: "facility_photo",
          question: "Upload photo of main facility area.",
          type: "photo_upload",
          required: true,
        },
      ],
    },
    created_at: "2024-01-02T00:00:00Z",
  },
  {
    id: "cat-3",
    name: "Retail Store",
    payout_amount: 15000,
    checklist: {
      questions: [
        {
          id: "store_organization",
          question: "Store organization and cleanliness (1-10)?",
          type: "rating",
          min: 1,
          max: 10,
          required: true,
        },
        {
          id: "product_quality",
          question: "Overall product quality assessment?",
          type: "text_input",
          required: true,
        },
        {
          id: "customer_service",
          question: "Staff provides good customer service?",
          type: "checkbox",
          required: true,
        },
        {
          id: "store_photo",
          question: "Upload photo of store interior.",
          type: "photo_upload",
          required: true,
        },
      ],
    },
    created_at: "2024-01-03T00:00:00Z",
  },
]

export const demoBusinesses = [
  {
    id: "biz-1",
    name: "Spice Garden Restaurant",
    category_id: "cat-1",
    address: "123 Food Street, Bandra West",
    city: "Mumbai",
    pin_code: "400050",
    phone_number: "+91 9876543220",
    email: "info@spicegarden.com",
    created_at: "2024-01-10T00:00:00Z",
    business_categories: { name: "Restaurant" },
  },
  {
    id: "biz-2",
    name: "HealthCare Plus Clinic",
    category_id: "cat-2",
    address: "456 Medical Lane, Andheri East",
    city: "Mumbai",
    pin_code: "400069",
    phone_number: "+91 9876543221",
    email: "contact@healthcareplus.com",
    created_at: "2024-01-11T00:00:00Z",
    business_categories: { name: "Medical Clinic" },
  },
  {
    id: "biz-3",
    name: "Fashion Hub Store",
    category_id: "cat-3",
    address: "789 Shopping Complex, Powai",
    city: "Mumbai",
    pin_code: "400076",
    phone_number: "+91 9876543222",
    email: "sales@fashionhub.com",
    created_at: "2024-01-12T00:00:00Z",
    business_categories: { name: "Retail Store" },
  },
  {
    id: "biz-4",
    name: "Cafe Delight",
    category_id: "cat-1",
    address: "321 Coffee Street, Juhu",
    city: "Mumbai",
    pin_code: "400049",
    phone_number: "+91 9876543223",
    email: "hello@cafedelight.com",
    created_at: "2024-01-13T00:00:00Z",
    business_categories: { name: "Restaurant" },
  },
  {
    id: "biz-5",
    name: "City Medical Center",
    category_id: "cat-2",
    address: "654 Health Avenue, Malad",
    city: "Mumbai",
    pin_code: "400064",
    phone_number: "+91 9876543224",
    email: "info@citymedical.com",
    created_at: "2024-01-14T00:00:00Z",
    business_categories: { name: "Medical Clinic" },
  },
  {
    id: "biz-6",
    name: "Tech Gadgets Store",
    category_id: "cat-3",
    address: "987 Electronics Market, Goregaon",
    city: "Mumbai",
    pin_code: "400062",
    phone_number: "+91 9876543225",
    email: "support@techgadgets.com",
    created_at: "2024-01-15T00:00:00Z",
    business_categories: { name: "Retail Store" },
  },
]

export const demoSupplierTasks = [
  {
    id: "st-1",
    supplier_id: "supplier-1",
    business_id: "biz-1",
    status: "package_delivered" as const,
    created_at: "2024-01-10T00:00:00Z",
    businesses: demoBusinesses[0],
    profiles: { full_name: "Supply Chain Co" },
  },
  {
    id: "st-2",
    supplier_id: "supplier-1",
    business_id: "biz-2",
    status: "package_sent" as const,
    created_at: "2024-01-11T00:00:00Z",
    businesses: demoBusinesses[1],
    profiles: { full_name: "Supply Chain Co" },
  },
  {
    id: "st-3",
    supplier_id: "supplier-1",
    business_id: "biz-3",
    status: "in_progress" as const,
    created_at: "2024-01-12T00:00:00Z",
    businesses: demoBusinesses[2],
    profiles: { full_name: "Supply Chain Co" },
  },
  {
    id: "st-4",
    supplier_id: "supplier-1",
    business_id: "biz-4",
    status: "todo" as const,
    created_at: "2024-01-13T00:00:00Z",
    businesses: demoBusinesses[3],
    profiles: { full_name: "Supply Chain Co" },
  },
]

export const demoAuditorTasks = [
  {
    id: "at-1",
    auditor_id: "auditor-1",
    business_id: "biz-1",
    category_id: "cat-1",
    status: "completed" as const,
    payout_amount: 20000,
    created_at: "2024-01-10T00:00:00Z",
    businesses: demoBusinesses[0],
    business_categories: { name: "Restaurant" },
    profiles: { full_name: "John Auditor" },
  },
  {
    id: "at-2",
    auditor_id: "auditor-1",
    business_id: "biz-2",
    category_id: "cat-2",
    status: "in_progress" as const,
    payout_amount: 25000,
    created_at: "2024-01-11T00:00:00Z",
    businesses: demoBusinesses[1],
    business_categories: { name: "Medical Clinic" },
    profiles: { full_name: "John Auditor" },
  },
  {
    id: "at-3",
    auditor_id: "auditor-1",
    business_id: "biz-3",
    category_id: "cat-3",
    status: "not_started" as const,
    payout_amount: 15000,
    created_at: "2024-01-12T00:00:00Z",
    businesses: demoBusinesses[2],
    business_categories: { name: "Retail Store" },
    profiles: { full_name: "John Auditor" },
  },
]

export const demoAuditReports = [
  {
    id: "ar-1",
    auditor_task_id: "at-1",
    auditor_id: "auditor-1",
    business_id: "biz-1",
    responses: {
      cleanliness_rating: [8],
      ingredient_quality: "Fresh ingredients, well-maintained storage",
      health_certificates: true,
      kitchen_photo: "/placeholder.svg?height=200&width=300&text=Kitchen+Photo",
    },
    photos: ["/placeholder.svg?height=200&width=300&text=Kitchen+Photo"],
    submitted_at: "2024-01-10T12:00:00Z",
    businesses: { name: "Spice Garden Restaurant" },
    profiles: { full_name: "John Auditor" },
  },
]

// Helper functions for demo data management
export const getDemoCategories = () => {
  return [...demoCategories]
}

export const createDemoCategory = (categoryData: any) => {
  const newCategory = {
    id: `cat-${Date.now()}`,
    ...categoryData,
    created_at: new Date().toISOString(),
  }
  demoCategories.push(newCategory)
  return newCategory
}

export const createDemoBusiness = (businessData: any) => {
  const categoryName = demoCategories.find((cat) => cat.id === businessData.category_id)?.name || "Unknown"

const newBusiness = {
    id: `biz-${Date.now()}`,
    ...businessData,
    created_at: new Date().toISOString(),
    business_categories: { name: categoryName },
  }

demoBusinesses.push(newBusiness)
  return newBusiness
}

export const getDemoBusinesses = () => {
  return [...demoBusinesses]
}

export const getDemoUsers = () => {
  return [...demoUsers]
}

export const getDemoSupplierTasks = () => {
  return [...demoSupplierTasks]
}

export const getDemoAuditorTasks = () => {
  return [...demoAuditorTasks]
}

export const getDemoAuditReports = () => {
  return [...demoAuditReports]
}

// Demo authentication
export const demoAuth = {
  currentUser: null as (typeof demoUsers)[0] | null,

signIn: (email: string, password: string) => {
    // Simple demo authentication
    const user = demoUsers.find((u) => u.email === email)
    if (user && password === "demo123") {
      demoAuth.currentUser = user
      return { success: true, user }
    }
    return { success: false, error: "Invalid credentials. Use demo123 as password." }
  },

signUp: (userData: any) => {
    // In demo mode, just create a new user
    const newUser = {
      id: `user-${Date.now()}`,
      ...userData,
    }
    demoUsers.push(newUser)
    return { success: true, user: newUser }
  },

signOut: () => {
    demoAuth.currentUser = null
  },

getCurrentUser: () => demoAuth.currentUser,
}
[V0_FILE]sql:file="scripts/04-admin-setup.sql"
-- Admin setup script
-- This script ensures admin functionality is properly configured

-- Create admin user if not exists (for demo purposes)
INSERT INTO profiles (id, role, full_name, email, phone_number, city, pin_code, created_at, updated_at)
VALUES (
  'admin-demo-user-id',
  'admin',
  'System Administrator',
  'admin@auditpro.com',
  '+91-9876543210',
  'Mumbai',
  '400001',
  NOW(),
  NOW()
) ON CONFLICT (id) DO NOTHING;

-- Ensure RLS policies allow admin access
-- Admin can read all profiles
CREATE POLICY IF NOT EXISTS "Admin can read all profiles" ON profiles
  FOR SELECT USING (
    EXISTS (
      SELECT 1 FROM profiles 
      WHERE profiles.id = auth.uid() 
      AND profiles.role = 'admin'
    )
  );

-- Admin can read all businesses
CREATE POLICY IF NOT EXISTS "Admin can read all businesses" ON businesses
  FOR SELECT USING (
    EXISTS (
      SELECT 1 FROM profiles 
      WHERE profiles.id = auth.uid() 
      AND profiles.role = 'admin'
    )
  );

-- Admin can read all business categories
CREATE POLICY IF NOT EXISTS "Admin can read all categories" ON business_categories
  FOR SELECT USING (
    EXISTS (
      SELECT 1 FROM profiles 
      WHERE profiles.id = auth.uid() 
      AND profiles.role = 'admin'
    )
  );

-- Admin can insert new categories
CREATE POLICY IF NOT EXISTS "Admin can insert categories" ON business_categories
  FOR INSERT WITH CHECK (
    EXISTS (
      SELECT 1 FROM profiles 
      WHERE profiles.id = auth.uid() 
      AND profiles.role = 'admin'
    )
  );

-- Admin can insert new businesses
CREATE POLICY IF NOT EXISTS "Admin can insert businesses" ON businesses
  FOR INSERT WITH CHECK (
    EXISTS (
      SELECT 1 FROM profiles 
      WHERE profiles.id = auth.uid() 
      AND profiles.role = 'admin'
    )
  );

-- Admin can read all tasks
CREATE POLICY IF NOT EXISTS "Admin can read supplier tasks" ON supplier_tasks
  FOR SELECT USING (
    EXISTS (
      SELECT 1 FROM profiles 
      WHERE profiles.id = auth.uid() 
      AND profiles.role = 'admin'
    )
  );

CREATE POLICY IF NOT EXISTS "Admin can read auditor tasks" ON auditor_tasks
  FOR SELECT USING (
    EXISTS (
      SELECT 1 FROM profiles 
      WHERE profiles.id = auth.uid() 
      AND profiles.role = 'admin'
    )
  );

-- Admin can read all audit reports
CREATE POLICY IF NOT EXISTS "Admin can read audit reports" ON audit_reports
  FOR SELECT USING (
    EXISTS (
      SELECT 1 FROM profiles 
      WHERE profiles.id = auth.uid() 
      AND profiles.role = 'admin'
    )
  );

-- Create indexes for better performance
CREATE INDEX IF NOT EXISTS idx_profiles_role ON profiles(role);
CREATE INDEX IF NOT EXISTS idx_businesses_category ON businesses(category_id);
CREATE INDEX IF NOT EXISTS idx_supplier_tasks_status ON supplier_tasks(status);
CREATE INDEX IF NOT EXISTS idx_auditor_tasks_status ON auditor_tasks(status);
CREATE INDEX IF NOT EXISTS idx_audit_reports_submitted ON audit_reports(submitted_at);

-- Grant necessary permissions
GRANT SELECT, INSERT, UPDATE ON profiles TO authenticated;
GRANT SELECT, INSERT, UPDATE ON businesses TO authenticated;
GRANT SELECT, INSERT, UPDATE ON business_categories TO authenticated;
GRANT SELECT ON supplier_tasks TO authenticated;
GRANT SELECT ON auditor_tasks TO authenticated;
GRANT SELECT ON audit_reports TO authenticated;
[V0_FILE]sql:file="scripts/05-update-demo-data.sql"
-- Update demo data script
-- This script ensures all demo data is consistent and up-to-date

-- Update existing demo categories with proper structure
UPDATE business_categories 
SET checklist = jsonb_build_object(
  'questions', jsonb_build_array(
    jsonb_build_object(
      'id', 'q1',
      'text', 'Is the business premises clean and well-maintained?',
      'type', 'rating',
      'required', true
    ),
    jsonb_build_object(
      'id', 'q2', 
      'text', 'Are safety protocols being followed?',
      'type', 'rating',
      'required', true
    ),
    jsonb_build_object(
      'id', 'q3',
      'text', 'Upload photos of the business premises',
      'type', 'photo',
      'required', true
    ),
    jsonb_build_object(
      'id', 'q4',
      'text', 'Additional comments',
      'type', 'text',
      'required', false
    )
  )
)
WHERE checklist IS NULL OR checklist = '{}';

-- Ensure all businesses have proper category relationships
UPDATE businesses 
SET category_id = (
  SELECT id FROM business_categories 
  WHERE name = 'Restaurant' 
  LIMIT 1
)
WHERE category_id IS NULL;

-- Update task statuses to be more realistic
UPDATE supplier_tasks 
SET status = CASE 
  WHEN random() < 0.3 THEN 'completed'
  WHEN random() < 0.6 THEN 'in_progress'
  ELSE 'todo'
END
WHERE status IS NULL;

UPDATE auditor_tasks 
SET status = CASE 
  WHEN random() < 0.4 THEN 'completed'
  WHEN random() < 0.7 THEN 'in_progress'
  ELSE 'not_started'
END
WHERE status IS NULL;

-- Ensure audit reports have proper structure
UPDATE audit_reports 
SET responses = jsonb_build_object(
  'q1', jsonb_build_object('type', 'rating', 'value', floor(random() * 5) + 1),
  'q2', jsonb_build_object('type', 'rating', 'value', floor(random() * 5) + 1),
  'q3', jsonb_build_object('type', 'photo', 'value', jsonb_build_array('/placeholder.svg?height=200&width=300')),
  'q4', jsonb_build_object('type', 'text', 'value', 'Business appears to be operating well with good standards.')
),
photos = jsonb_build_array('/placeholder.svg?height=200&width=300', '/placeholder.svg?height=200&width=200')
WHERE responses IS NULL OR responses = '{}';

-- Add some sample audit reports if none exist
INSERT INTO audit_reports (id, task_id, business_id, auditor_id, responses, photos, overall_rating, submitted_at, created_at, updated_at)
SELECT 
  'report-' || generate_random_uuid(),
  at.id,
  at.business_id,
  at.auditor_id,
  jsonb_build_object(
    'q1', jsonb_build_object('type', 'rating', 'value', floor(random() * 5) + 1),
    'q2', jsonb_build_object('type', 'rating', 'value', floor(random() * 5) + 1),
    'q3', jsonb_build_object('type', 'photo', 'value', jsonb_build_array('/placeholder.svg?height=200&width=300')),
    'q4', jsonb_build_object('type', 'text', 'value', 'Audit completed successfully.')
  ),
  jsonb_build_array('/placeholder.svg?height=200&width=300'),
  floor(random() * 5) + 1,
  NOW() - (random() * interval '30 days'),
  NOW(),
  NOW()
FROM auditor_tasks at
WHERE at.status = 'completed'
AND NOT EXISTS (
  SELECT 1 FROM audit_reports ar WHERE ar.task_id = at.id
)
LIMIT 5;

-- Refresh materialized views if any exist
-- (Add any materialized view refreshes here if needed)

COMMIT;
[V0_FILE]typescriptreact:file="contexts/auth-context.tsx"
"use client"

import type React from "react"

import { createContext, useContext, useEffect, useState } from "react"
import type { User } from "@supabase/supabase-js"
import { supabase, isSupabaseConfigured } from "@/lib/supabase"
import { demoAuth } from "@/lib/demo-data"

type Profile = {
  id: string
  role: "admin" | "business" | "auditor" | "supplier" | "consumer"
  full_name: string
  email: string
  phone_number?: string
  address?: string
  city?: string
  pin_code?: string
}

type AuthContextType = {
  user: User | null
  profile: Profile | null
  loading: boolean
  signOut: () => Promise<void>
  isConfigured: boolean
  isDemoMode: boolean
}

const AuthContext = createContext<AuthContextType>({
  user: null,
  profile: null,
  loading: true,
  signOut: async () => {},
  isConfigured: false,
  isDemoMode: true,
})

export const useAuth = () => {
  const context = useContext(AuthContext)
  if (!context) {
    throw new Error("useAuth must be used within an AuthProvider")
  }
  return context
}

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null)
  const [profile, setProfile] = useState<Profile | null>(null)
  const [loading, setLoading] = useState(true)
  const isDemoMode = !isSupabaseConfigured

useEffect(() => {
    if (isDemoMode) {
      // Demo mode - check for stored demo user
      const storedUser = localStorage.getItem("demo-user")
      if (storedUser) {
        try {
          const userData = JSON.parse(storedUser)
          setProfile(userData)
          setUser({ id: userData.id, email: userData.email } as User)
        } catch (error) {
          console.error("Error parsing stored demo user:", error)
          localStorage.removeItem("demo-user")
        }
      }
      setLoading(false)
      return
    }

// Real Supabase mode
    supabase.auth.getSession().then(({ data: { session } }) => {
      setUser(session?.user ?? null)
      if (session?.user) {
        fetchProfile(session.user.id)
      } else {
        setLoading(false)
      }
    })

const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange(async (event, session) => {
      setUser(session?.user ?? null)
      if (session?.user) {
        fetchProfile(session.user.id)
      } else {
        setProfile(null)
        setLoading(false)
      }
    })

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

const fetchProfile = async (userId: string) => {
    try {
      const { data, error } = await supabase.from("profiles").select("*").eq("id", userId).single()

if (error) throw error
      setProfile(data)
    } catch (error) {
      console.error("Error fetching profile:", error)
    } finally {
      setLoading(false)
    }
  }

const signOut = async () => {
    try {
      if (isDemoMode) {
        // Clear demo user data
        localStorage.removeItem("demo-user")
        setUser(null)
        setProfile(null)
        demoAuth.signOut()
      } else {
        // Sign out from Supabase
        const { error } = await supabase.auth.signOut()
        if (error) {
          console.error("Error signing out:", error)
        }
        // Clear local state regardless of error
        setUser(null)
        setProfile(null)
      }
    } catch (error) {
      console.error("Error during sign out:", error)
      // Clear local state even if there's an error
      setUser(null)
      setProfile(null)
      if (isDemoMode) {
        localStorage.removeItem("demo-user")
      }
    }
  }

return (
    <AuthContext.Provider value={{ user, profile, loading, signOut, isConfigured: isSupabaseConfigured, isDemoMode }}>
      {children}
    </AuthContext.Provider>
  )
}
[V0_FILE]typescriptreact:file="components/location-picker.tsx"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { LoadingSpinner } from "@/components/ui/loading-spinner"
import { MapPin, Navigation, Map, CheckCircle } from "lucide-react"

interface LocationPickerProps {
  onLocationSelect: (lat: number, lng: number, address?: string) => void
  initialLat?: number
  initialLng?: number
  showMap?: boolean
}

export function LocationPicker({ onLocationSelect, initialLat, initialLng, showMap = true }: LocationPickerProps) {
  const [location, setLocation] = useState<{ lat: number; lng: number; address?: string } | null>(
    initialLat && initialLng ? { lat: initialLat, lng: initialLng } : null,
  )
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [mapLoaded, setMapLoaded] = useState(false)
  const [mapInstance, setMapInstance] = useState<any>(null)

// Enhanced reverse geocoding with fallback
  const reverseGeocode = async (lat: number, lng: number): Promise<string> => {
    try {
      // Primary: OpenStreetMap Nominatim
      const response = await fetch(
        `https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}&zoom=18&addressdetails=1`,
        {
          headers: {
            "User-Agent": "AuditPro/1.0",
          },
        },
      )
      const data = await response.json()

if (data.display_name) {
        return data.display_name
      }

// Fallback: Basic coordinate display
      return `${lat.toFixed(6)}, ${lng.toFixed(6)}`
    } catch (error) {
      console.warn("Reverse geocoding failed:", error)
      return `${lat.toFixed(6)}, ${lng.toFixed(6)}`
    }
  }

// Get current location using browser geolocation
  const getCurrentLocation = () => {
    setLoading(true)
    setError(null)

if (!navigator.geolocation) {
      setError("Geolocation is not supported by this browser")
      setLoading(false)
      return
    }

navigator.geolocation.getCurrentPosition(
      async (position) => {
        const lat = position.coords.latitude
        const lng = position.coords.longitude

// Try to get address from coordinates (reverse geocoding)
        try {
          const address = await reverseGeocode(lat, lng)
          const newLocation = { lat, lng, address }
          setLocation(newLocation)
          onLocationSelect(lat, lng, address)

// Update map if loaded
          if (mapInstance) {
            updateMapLocation(lat, lng)
          }
        } catch (err) {
          const newLocation = { lat, lng }
          setLocation(newLocation)
          onLocationSelect(lat, lng)

// Update map if loaded
          if (mapInstance) {
            updateMapLocation(lat, lng)
          }
        }

setLoading(false)
      },
      (error) => {
        setError(`Location access denied: ${error.message}`)
        setLoading(false)
      },
      {
        enableHighAccuracy: true,
        timeout: 10000,
        maximumAge: 300000, // 5 minutes
      },
    )
  }

// Update map location
  const updateMapLocation = (lat: number, lng: number) => {
    if (mapInstance && mapInstance.marker) {
      mapInstance.map.setView([lat, lng], 15)
      mapInstance.marker.setLatLng([lat, lng])
    }
  }

// Initialize map (using Leaflet.js)
  useEffect(() => {
    if (showMap && typeof window !== "undefined") {
      loadLeafletMap()
    }
  }, [showMap])

const loadLeafletMap = async () => {
    try {
      // Dynamically import Leaflet to avoid SSR issues
      const L = await import("leaflet")

// Load CSS
      if (!document.querySelector('link[href*="leaflet"]')) {
        const link = document.createElement("link")
        link.rel = "stylesheet"
        link.href = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
        document.head.appendChild(link)
      }

// Fix for default markers in Leaflet
      delete (L.Icon.Default.prototype as any)._getIconUrl
      L.Icon.Default.mergeOptions({
        iconRetinaUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png",
        iconUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png",
        shadowUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png",
      })

const mapContainer = document.getElementById("location-map")
      if (!mapContainer) return

// Clear any existing map
      mapContainer.innerHTML = ""

// Default to Mumbai if no initial location
      const defaultLat = initialLat || location?.lat || 19.076
      const defaultLng = initialLng || location?.lng || 72.8777

const map = L.map("location-map").setView([defaultLat, defaultLng], 13)

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      }).addTo(map)

const marker = L.marker([defaultLat, defaultLng], { draggable: true }).addTo(map)

// Store map instance
      setMapInstance({ map, marker })

// Handle marker drag
      marker.on("dragend", async (e) => {
        const position = e.target.getLatLng()
        const lat = position.lat
        const lng = position.lng

try {
          const address = await reverseGeocode(lat, lng)
          const newLocation = { lat, lng, address }
          setLocation(newLocation)
          onLocationSelect(lat, lng, address)
        } catch (err) {
          const newLocation = { lat, lng }
          setLocation(newLocation)
          onLocationSelect(lat, lng)
        }
      })

// Handle map click
      map.on("click", async (e) => {
        const lat = e.latlng.lat
        const lng = e.latlng.lng

marker.setLatLng([lat, lng])

setMapLoaded(true)
    } catch (error) {
      console.error("Error loading map:", error)
      setError("Failed to load map. Please try refreshing the page.")
    }
  }

return (
    <Card className="shadow-lg">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <MapPin className="h-5 w-5 text-blue-600" />
          Select Location
        </CardTitle>
        <CardDescription>
          Choose your location by using GPS, clicking on the map, or dragging the marker
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        {error && (
          <Alert variant="destructive">
            <AlertDescription>{error}</AlertDescription>
          </Alert>
        )}

<div className="flex gap-3">
          <Button
            onClick={getCurrentLocation}
            disabled={loading}
            variant="outline"
            className="flex-1 hover:bg-blue-50 hover:border-blue-200"
          >
            {loading ? (
              <div className="flex items-center gap-2">
                <LoadingSpinner size="sm" />
                Getting Location...
              </div>
            ) : (
              <>
                <Navigation className="h-4 w-4 mr-2" />
                Use Current Location
              </>
            )}
          </Button>
        </div>

{location && (
          <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
            <div className="flex items-center gap-2 mb-2">
              <CheckCircle className="h-4 w-4 text-green-600" />
              <p className="text-sm font-medium text-green-900">Location Selected</p>
            </div>
            <p className="text-sm text-green-700">
              Coordinates: {location.lat.toFixed(6)}, {location.lng.toFixed(6)}
            </p>
            {location.address && <p className="text-sm text-green-700 mt-1">{location.address}</p>}
          </div>
        )}

{showMap && (
          <div className="space-y-3">
            <div className="flex items-center gap-2">
              <Map className="h-4 w-4 text-blue-600" />
              <span className="text-sm font-medium">Interactive Map</span>
            </div>
            <div
              id="location-map"
              className="w-full h-64 border rounded-lg shadow-sm"
              style={{ minHeight: "256px" }}
            ></div>
            {!mapLoaded && (
              <div className="flex items-center justify-center h-64 bg-gray-100 rounded-lg">
                <div className="text-center">
                  <LoadingSpinner size="lg" className="mb-2" />
                  <p className="text-gray-500">Loading map...</p>
                </div>
              </div>
            )}
            <p className="text-xs text-gray-500">Click on the map or drag the marker to select a location</p>
          </div>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/admin/analytics/page.tsx"
"use client"

import { useEffect, useState } from "react"
import { useAuth } from "@/contexts/auth-context"
import { supabase } from "@/lib/supabase"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { LoadingSpinner } from "@/components/ui/loading-spinner"
import { MapPin, Users, Building, TrendingUp, Target } from "lucide-react"

type CoverageStats = {
  city: string
  total_businesses: number
  total_auditors: number
  avg_distance_km: number
  coverage_ratio: number
}

export default function AnalyticsPage() {
  const { profile, isDemoMode } = useAuth()
  const [coverageStats, setCoverageStats] = useState<CoverageStats[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    if (profile?.role === "admin") {
      fetchCoverageStats()
    }
  }, [profile, isDemoMode])

const fetchCoverageStats = async () => {
    try {
      if (isDemoMode) {
        // Demo data for coverage stats
        setCoverageStats([
          { city: "Mumbai", total_businesses: 6, total_auditors: 1, avg_distance_km: 12.5, coverage_ratio: 0.17 },
          { city: "Delhi", total_businesses: 0, total_auditors: 0, avg_distance_km: 0, coverage_ratio: 0 },
          { city: "Bangalore", total_businesses: 0, total_auditors: 0, avg_distance_km: 0, coverage_ratio: 0 },
        ])
      } else {
        const { data, error } = await supabase.rpc("get_service_coverage_stats")
        if (error) throw error
        setCoverageStats(data || [])
      }
    } catch (error) {
      console.error("Error fetching coverage stats:", error)
    } finally {
      setLoading(false)
    }
  }

const getCoverageColor = (ratio: number) => {
    if (ratio >= 0.5) return "bg-green-100 text-green-700"
    if (ratio >= 0.25) return "bg-yellow-100 text-yellow-700"
    return "bg-red-100 text-red-700"
  }

const getCoverageLabel = (ratio: number) => {
    if (ratio >= 0.5) return "Good Coverage"
    if (ratio >= 0.25) return "Moderate Coverage"
    return "Low Coverage"
  }

if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <LoadingSpinner size="lg" />
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gray-50">
      <header className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center py-4">
            <h1 className="text-2xl font-bold text-gray-900">Location Analytics</h1>
            {isDemoMode && (
              <Badge variant="secondary" className="ml-2">
                Demo Mode
              </Badge>
            )}
          </div>
        </div>
      </header>

<main className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Target className="h-5 w-5 text-blue-600" />
                Service Coverage by City
              </CardTitle>
              <CardDescription>Auditor-to-business ratio and average distances</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {coverageStats.map((stat) => (
                  <div key={stat.city} className="p-4 border rounded-lg">
                    <div className="flex items-center justify-between mb-2">
                      <h3 className="font-semibold text-lg">{stat.city}</h3>
                      <Badge className={getCoverageColor(stat.coverage_ratio)}>
                        {getCoverageLabel(stat.coverage_ratio)}
                      </Badge>
                    </div>
                    <div className="grid grid-cols-2 gap-4 text-sm">
                      <div className="flex items-center gap-2">
                        <Building className="h-4 w-4 text-gray-500" />
                        <span>{stat.total_businesses} businesses</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <Users className="h-4 w-4 text-gray-500" />
                        <span>{stat.total_auditors} auditors</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <MapPin className="h-4 w-4 text-gray-500" />
                        <span>{stat.avg_distance_km}km avg distance</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <TrendingUp className="h-4 w-4 text-gray-500" />
                        <span>{stat.coverage_ratio.toFixed(2)} ratio</span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Location Features Status</CardTitle>
              <CardDescription>Current implementation status</CardDescription>
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                <span>PostGIS Extension</span>
                <Badge className="bg-green-100 text-green-700">✓ Active</Badge>
              </div>
              <div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                <span>GPS Location Capture</span>
                <Badge className="bg-green-100 text-green-700">✓ Active</Badge>
              </div>
              <div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                <span>Interactive Maps</span>
                <Badge className="bg-green-100 text-green-700">✓ Active</Badge>
              </div>
              <div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                <span>Auto-Assignment</span>
                <Badge className="bg-green-100 text-green-700">✓ Active</Badge>
              </div>
              <div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                <span>Distance Calculations</span>
                <Badge className="bg-green-100 text-green-700">✓ Active</Badge>
              </div>
              <div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
                <span>Reverse Geocoding</span>
                <Badge className="bg-blue-100 text-blue-700">✓ Enhanced</Badge>
              </div>
            </CardContent>
          </Card>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/test-location/page.tsx"
"use client"

import { useState } from "react"
import { LocationPicker } from "@/components/location-picker"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { MapPin, Navigation, Database, Users } from "lucide-react"

export default function TestLocationPage() {
  const [selectedLocation, setSelectedLocation] = useState<{
    lat: number
    lng: number
    address?: string
  } | null>(null)

const handleLocationSelect = (lat: number, lng: number, address?: string) => {
    setSelectedLocation({ lat, lng, address })
  }

const simulateNearbySearch = () => {
    if (!selectedLocation) return

// Simulate finding nearby auditors/suppliers
    const mockResults = [
      { type: "auditor", name: "Rajesh Kumar", distance: 2.3, rating: 4.8 },
      { type: "supplier", name: "Mumbai Logistics", distance: 1.7, rating: 4.5 },
      { type: "business", name: "Cafe Mocha", distance: 0.8, category: "Restaurant" },
    ]

alert(`Found nearby services:\n${mockResults.map((r) => `${r.name} (${r.distance}km away)`).join("\n")}`)
  }

return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">Location Features Demo</h1>
          <p className="text-gray-600">Test GPS location capture, interactive maps, and PostGIS integration</p>
          <Badge variant="secondary" className="mt-2">
            Demo Mode
          </Badge>
        </div>

<div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Database className="h-5 w-5 text-green-600" />
                  PostGIS Integration
                </CardTitle>
                <CardDescription>Location data processing capabilities</CardDescription>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                  <span>Geographic Point Storage</span>
                  <Badge className="bg-green-100 text-green-700">✓ Active</Badge>
                </div>
                <div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                  <span>Distance Calculations</span>
                  <Badge className="bg-green-100 text-green-700">✓ Active</Badge>
                </div>
                <div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                  <span>Nearest Neighbor Search</span>
                  <Badge className="bg-green-100 text-green-700">✓ Active</Badge>
                </div>
                <div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                  <span>Auto-Assignment Logic</span>
                  <Badge className="bg-green-100 text-green-700">✓ Active</Badge>
                </div>
              </CardContent>
            </Card>

{selectedLocation && (
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <MapPin className="h-5 w-5 text-blue-600" />
                    Selected Location
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  <div className="p-3 bg-blue-50 rounded-lg">
                    <p className="text-sm font-medium text-blue-900">Coordinates</p>
                    <p className="text-sm text-blue-700">
                      {selectedLocation.lat.toFixed(6)}, {selectedLocation.lng.toFixed(6)}
                    </p>
                  </div>
                  {selectedLocation.address && (
                    <div className="p-3 bg-blue-50 rounded-lg">
                      <p className="text-sm font-medium text-blue-900">Address</p>
                      <p className="text-sm text-blue-700">{selectedLocation.address}</p>
                    </div>
                  )}
                  <Button onClick={simulateNearbySearch} className="w-full" variant="outline">
                    <Users className="h-4 w-4 mr-2" />
                    Find Nearby Services
                  </Button>
                </CardContent>
              </Card>
            )}

<Card>
              <CardHeader>
                <CardTitle>Implementation Features</CardTitle>
                <CardDescription>What's included in this POC</CardDescription>
              </CardHeader>
              <CardContent className="space-y-2 text-sm">
                <div className="flex items-center gap-2">
                  <Navigation className="h-4 w-4 text-gray-500" />
                  <span>Browser GPS integration</span>
                </div>
                <div className="flex items-center gap-2">
                  <MapPin className="h-4 w-4 text-gray-500" />
                  <span>Interactive Leaflet.js maps</span>
                </div>
                <div className="flex items-center gap-2">
                  <Database className="h-4 w-4 text-gray-500" />
                  <span>PostGIS geographic functions</span>
                </div>
                <div className="flex items-center gap-2">
                  <Users className="h-4 w-4 text-gray-500" />
                  <span>Automatic auditor/supplier assignment</span>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/02-create-functions.sql"
-- Function to update location from lat/lng
CREATE OR REPLACE FUNCTION update_location_from_coordinates()
RETURNS TRIGGER AS $$
BEGIN
  IF NEW.latitude IS NOT NULL AND NEW.longitude IS NOT NULL THEN
    NEW.location = ST_MakePoint(NEW.longitude, NEW.latitude)::geography;
  END IF;
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Triggers to automatically update location when lat/lng changes
CREATE TRIGGER update_profiles_location
  BEFORE INSERT OR UPDATE ON profiles
  FOR EACH ROW
  EXECUTE FUNCTION update_location_from_coordinates();

CREATE TRIGGER update_businesses_location
  BEFORE INSERT OR UPDATE ON businesses
  FOR EACH ROW
  EXECUTE FUNCTION update_location_from_coordinates();

CREATE TRIGGER update_onboarding_location
  BEFORE INSERT OR UPDATE ON onboarding_applications
  FOR EACH ROW
  EXECUTE FUNCTION update_location_from_coordinates();

-- Function to find nearest auditor for a business
CREATE OR REPLACE FUNCTION find_nearest_auditor(business_lat DECIMAL, business_lng DECIMAL)
RETURNS UUID AS $$
DECLARE
  nearest_auditor_id UUID;
BEGIN
  SELECT id INTO nearest_auditor_id
  FROM profiles
  WHERE role = 'auditor' 
    AND is_approved = true
    AND location IS NOT NULL
  ORDER BY location <-> ST_MakePoint(business_lng, business_lat)::geography
  LIMIT 1;
  
  RETURN nearest_auditor_id;
END;
$$ LANGUAGE plpgsql;

-- Function to find nearest supplier for a business
CREATE OR REPLACE FUNCTION find_nearest_supplier(business_lat DECIMAL, business_lng DECIMAL)
RETURNS UUID AS $$
DECLARE
  nearest_supplier_id UUID;
BEGIN
  SELECT id INTO nearest_supplier_id
  FROM profiles
  WHERE role = 'supplier' 
    AND is_approved = true
    AND location IS NOT NULL
  ORDER BY location <-> ST_MakePoint(business_lng, business_lat)::geography
  LIMIT 1;
  
  RETURN nearest_supplier_id;
END;
$$ LANGUAGE plpgsql;

-- Function to automatically create tasks when a business is added
CREATE OR REPLACE FUNCTION create_business_tasks()
RETURNS TRIGGER AS $$
DECLARE
  nearest_supplier_id UUID;
  nearest_auditor_id UUID;
  category_payout INTEGER;
  supplier_distance DECIMAL;
  auditor_distance DECIMAL;
BEGIN
  -- Get the payout amount for this category
  SELECT payout_amount INTO category_payout
  FROM business_categories
  WHERE id = NEW.category_id;
  
  -- Find nearest supplier
  SELECT id INTO nearest_supplier_id
  FROM profiles
  WHERE role = 'supplier' 
    AND is_approved = true
    AND location IS NOT NULL
  ORDER BY location <-> NEW.location
  LIMIT 1;
  
  -- Find nearest auditor
  SELECT id INTO nearest_auditor_id
  FROM profiles
  WHERE role = 'auditor' 
    AND is_approved = true
    AND location IS NOT NULL
  ORDER BY location <-> NEW.location
  LIMIT 1;
  
  -- Create supplier task if supplier exists
  IF nearest_supplier_id IS NOT NULL THEN
    -- Calculate distance
    SELECT ST_Distance(location, NEW.location) / 1000 INTO supplier_distance
    FROM profiles
    WHERE id = nearest_supplier_id;
    
    INSERT INTO supplier_tasks (supplier_id, business_id, distance_km)
    VALUES (nearest_supplier_id, NEW.id, supplier_distance);
  END IF;
  
  -- Create auditor task if auditor exists
  IF nearest_auditor_id IS NOT NULL THEN
    -- Calculate distance
    SELECT ST_Distance(location, NEW.location) / 1000 INTO auditor_distance
    FROM profiles
    WHERE id = nearest_auditor_id;
    
    INSERT INTO auditor_tasks (auditor_id, business_id, category_id, payout_amount, distance_km)
    VALUES (nearest_auditor_id, NEW.id, NEW.category_id, category_payout, auditor_distance);
  END IF;
  
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Create trigger
CREATE TRIGGER create_business_tasks_trigger
  AFTER INSERT ON businesses
  FOR EACH ROW
  EXECUTE FUNCTION create_business_tasks();

-- Function to update audit task status when report is submitted
CREATE OR REPLACE FUNCTION update_audit_task_status()
RETURNS TRIGGER AS $$
BEGIN
  UPDATE auditor_tasks 
  SET status = 'completed', updated_at = NOW()
  WHERE id = NEW.auditor_task_id;
  
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Create trigger for audit report submission
CREATE TRIGGER update_audit_task_status_trigger
  AFTER INSERT ON audit_reports
  FOR EACH ROW
  EXECUTE FUNCTION update_audit_task_status();

-- Function to get nearby businesses for a user
CREATE OR REPLACE FUNCTION get_nearby_businesses(user_lat DECIMAL, user_lng DECIMAL, radius_km INTEGER DEFAULT 10)
RETURNS TABLE (
  id UUID,
  name TEXT,
  category_name TEXT,
  address TEXT,
  distance_km DECIMAL
) AS $$
BEGIN
  RETURN QUERY
  SELECT 
    b.id,
    b.name,
    bc.name as category_name,
    b.address,
    (ST_Distance(b.location, ST_MakePoint(user_lng, user_lat)::geography) / 1000)::DECIMAL(8,2) as distance_km
  FROM businesses b
  JOIN business_categories bc ON b.category_id = bc.id
  WHERE ST_DWithin(b.location, ST_MakePoint(user_lng, user_lat)::geography, radius_km * 1000)
  ORDER BY b.location <-> ST_MakePoint(user_lng, user_lat)::geography;
END;
$$ LANGUAGE plpgsql;

-- Function to find auditors within radius with capacity check
CREATE OR REPLACE FUNCTION find_available_auditors(
  business_lat DECIMAL, 
  business_lng DECIMAL, 
  radius_km INTEGER DEFAULT 25
)
RETURNS TABLE (
  auditor_id UUID,
  distance_km DECIMAL,
  current_tasks INTEGER,
  availability_score DECIMAL
) AS $$
BEGIN
  RETURN QUERY
  SELECT 
    p.id as auditor_id,
    (ST_Distance(p.location, ST_MakePoint(business_lng, business_lat)::geography) / 1000)::DECIMAL(8,2) as distance_km,
    COALESCE(task_counts.task_count, 0) as current_tasks,
    -- Availability score: closer distance + fewer tasks = higher score
    (100 - (ST_Distance(p.location, ST_MakePoint(business_lng, business_lat)::geography) / 1000) - (COALESCE(task_counts.task_count, 0) * 5))::DECIMAL(8,2) as availability_score
  FROM profiles p
  LEFT JOIN (
    SELECT 
      auditor_id, 
      COUNT(*) as task_count 
    FROM auditor_tasks 
    WHERE status IN ('not_started', 'in_progress') 
    GROUP BY auditor_id
  ) task_counts ON p.id = task_counts.auditor_id
  WHERE p.role = 'auditor' 
    AND p.is_approved = true
    AND p.location IS NOT NULL
    AND ST_DWithin(p.location, ST_MakePoint(business_lng, business_lat)::geography, radius_km * 1000)
  ORDER BY availability_score DESC, distance_km ASC;
END;
$$ LANGUAGE plpgsql;

-- Function to get service coverage stats
CREATE OR REPLACE FUNCTION get_service_coverage_stats()
RETURNS TABLE (
  city TEXT,
  total_businesses INTEGER,
  total_auditors INTEGER,
  avg_distance_km DECIMAL,
  coverage_ratio DECIMAL
) AS $$
BEGIN
  RETURN QUERY
  SELECT 
    b.city,
    COUNT(DISTINCT b.id)::INTEGER as total_businesses,
    COUNT(DISTINCT p.id)::INTEGER as total_auditors,
    AVG(ST_Distance(b.location, p.location) / 1000)::DECIMAL(8,2) as avg_distance_km,
    (COUNT(DISTINCT p.id)::DECIMAL / NULLIF(COUNT(DISTINCT b.id), 0))::DECIMAL(8,2) as coverage_ratio
  FROM businesses b
  CROSS JOIN profiles p
  WHERE p.role = 'auditor' 
    AND p.is_approved = true
    AND b.location IS NOT NULL 
    AND p.location IS NOT NULL
    AND p.city = b.city
  GROUP BY b.city
  ORDER BY coverage_ratio DESC;
END;
$$ LANGUAGE plpgsql;
[V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { AuthProvider } from "@/contexts/auth-context"
import { Toaster } from "@/components/ui/toaster"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "AuditPro - Professional Business Auditing Platform",
  description:
    "Revolutionary transparency platform connecting businesses with independent auditors. Combat fake reviews with verifiable audit reports.",
  keywords: "audit, business, transparency, reviews, verification, professional",
  authors: [{ name: "AuditPro Team" }],
  viewport: "width=device-width, initial-scale=1",
  themeColor: "#2563eb",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <AuthProvider>
          <div className="pt-0">{children}</div>
          <Toaster />
        </AuthProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/admin/page.tsx" isQuickEdit="true"
"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/auth-context"
import { supabase } from "@/lib/supabase"
import {
  demoCategories,
  demoBusinesses,
  demoUsers,
  demoSupplierTasks,
  demoAuditorTasks,
  demoAuditReports,
} from "@/lib/demo-data"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { FadeIn } from "@/components/ui/fade-in"
import { AnimatedCounter } from "@/components/ui/animated-counter"
import { LoadingSpinner } from "@/components/ui/loading-spinner"
import { FloatingActionButton } from "@/components/ui/floating-action-button"
import {
  LogOut,
  Plus,
  Users,
  Building,
  Package,
  FileText,
  TrendingUp,
  Activity,
  BarChart3,
  Truck,
  ArrowLeft,
} from "lucide-react"
import Link from "next/link"

export default function AdminDashboard() {
  const { profile, loading, signOut, isDemoMode } = useAuth()
  const router = useRouter()
  const [stats, setStats] = useState({
    totalUsers: 0,
    totalBusinesses: 0,
    totalCategories: 0,
    totalReports: 0,
  })
  const [statsLoading, setStatsLoading] = useState(true)

useEffect(() => {
    if (!loading && (!profile || profile.role !== "admin")) {
      router.push("/auth/login")
    }
  }, [profile, loading, router])

useEffect(() => {
    if (profile?.role === "admin") {
      if (isDemoMode) {
        setStats({
          totalUsers: demoUsers.length,
          totalBusinesses: demoBusinesses.length,
          totalCategories: demoCategories.length,
          totalReports: demoAuditReports.length,
        })
        setStatsLoading(false)
      } else {
        fetchStats()
      }
    }
  }, [profile, isDemoMode])

const fetchStats = async () => {
    try {
      const [usersResult, businessesResult, categoriesResult, reportsResult] = await Promise.all([
        supabase.from("profiles").select("id", { count: "exact" }),
        supabase.from("businesses").select("id", { count: "exact" }),
        supabase.from("business_categories").select("id", { count: "exact" }),
        supabase.from("audit_reports").select("id", { count: "exact" }),
      ])

setStats({
        totalUsers: usersResult.count || 0,
        totalBusinesses: businessesResult.count || 0,
        totalCategories: categoriesResult.count || 0,
        totalReports: reportsResult.count || 0,
      })
    } catch (error) {
      console.error("Error fetching stats:", error)
    } finally {
      setStatsLoading(false)
    }
  }

const handleSignOut = async () => {
    try {
      await signOut()
      router.push("/dashboard")
    } catch (error) {
      console.error("Error signing out:", error)
      // Still redirect even if there's an error
      router.push("/dashboard")
    }
  }

const floatingActions = [
    {
      icon: <Building className="h-4 w-4" />,
      label: "Add Business",
      onClick: () => router.push("/admin/businesses/new"),
    },
    {
      icon: <Package className="h-4 w-4" />,
      label: "Add Category",
      onClick: () => router.push("/admin/categories/new"),
    },
  ]

if (loading || statsLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <Card className="w-full max-w-md">
          <CardContent className="flex flex-col items-center justify-center p-8">
            <LoadingSpinner size="lg" className="mb-4" />
            <p className="text-gray-600">Loading admin dashboard...</p>
          </CardContent>
        </Card>
      </div>
    )
  }

if (!profile || profile.role !== "admin") {
    return null
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
      <header className="bg-white shadow-sm border-b backdrop-blur-sm bg-white/95 sticky top-0 z-40">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center py-4">
            <FadeIn>
              <div className="flex items-center gap-4">
                <Button
                  onClick={() => router.push("/dashboard")}
                  variant="ghost"
                  size="sm"
                  className="hover:bg-blue-50 hover:text-blue-600 transition-all duration-200"
                >
                  <ArrowLeft className="h-4 w-4 mr-2" />
                  Back to Dashboard
                </Button>
                <div>
                  <div className="flex items-center gap-3">
                    <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                      AuditPro Admin
                    </h1>
                    {isDemoMode && (
                      <Badge variant="secondary" className="animate-pulse">
                        Demo Mode
                      </Badge>
                    )}
                  </div>
                  <p className="text-sm text-gray-600">Welcome back, {profile.full_name}</p>
                </div>
              </div>
            </FadeIn>
            <div className="flex items-center gap-2">
              <Button
                onClick={handleSignOut}
                variant="outline"
                size="sm"
                className="hover:bg-red-50 hover:border-red-200 hover:text-red-600 transition-all duration-200 font-medium"
              >
                <LogOut className="h-4 w-4 mr-2" />
                Sign Out
              </Button>
            </div>
          </div>
        </div>
      </header>

<main className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
        {/* Stats Overview */}
        <FadeIn>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <Card className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 bg-gradient-to-br from-blue-500 to-blue-600 text-white">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium text-blue-100">Total Users</CardTitle>
                <Users className="h-4 w-4 text-blue-200" />
              </CardHeader>
              <CardContent>
                <div className="text-3xl font-bold">
                  <AnimatedCounter end={stats.totalUsers} />
                </div>
                <div className="flex items-center gap-1 mt-1">
                  <TrendingUp className="h-3 w-3 text-blue-200" />
                  <span className="text-xs text-blue-200">+12% from last month</span>
                </div>
              </CardContent>
            </Card>

<Card className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 bg-gradient-to-br from-green-500 to-green-600 text-white">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium text-green-100">Total Businesses</CardTitle>
                <Building className="h-4 w-4 text-green-200" />
              </CardHeader>
              <CardContent>
                <div className="text-3xl font-bold">
                  <AnimatedCounter end={stats.totalBusinesses} />
                </div>
                <div className="flex items-center gap-1 mt-1">
                  <TrendingUp className="h-3 w-3 text-green-200" />
                  <span className="text-xs text-green-200">+8% from last month</span>
                </div>
              </CardContent>
            </Card>

<Card className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 bg-gradient-to-br from-purple-500 to-purple-600 text-white">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium text-purple-100">Categories</CardTitle>
                <Package className="h-4 w-4 text-purple-200" />
              </CardHeader>
              <CardContent>
                <div className="text-3xl font-bold">
                  <AnimatedCounter end={stats.totalCategories} />
                </div>
                <div className="flex items-center gap-1 mt-1">
                  <Activity className="h-3 w-3 text-purple-200" />
                  <span className="text-xs text-purple-200">Active categories</span>
                </div>
              </CardContent>
            </Card>

<Card className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 bg-gradient-to-br from-orange-500 to-orange-600 text-white">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium text-orange-100">Audit Reports</CardTitle>
                <FileText className="h-4 w-4 text-orange-200" />
              </CardHeader>
              <CardContent>
                <div className="text-3xl font-bold">
                  <AnimatedCounter end={stats.totalReports} />
                </div>
                <div className="flex items-center gap-1 mt-1">
                  <BarChart3 className="h-3 w-3 text-orange-200" />
                  <span className="text-xs text-orange-200">Completed audits</span>
                </div>
              </CardContent>
            </Card>
          </div>
        </FadeIn>

{/* Management Tabs */}
        <FadeIn delay={200}>
          <Tabs defaultValue="categories" className="space-y-6">
            <TabsList className="grid w-full grid-cols-5 bg-white shadow-sm">
              <TabsTrigger
                value="categories"
                className="data-[state=active]:bg-blue-50 data-[state=active]:text-blue-600"
              >
                Categories
              </TabsTrigger>
              <TabsTrigger
                value="businesses"
                className="data-[state=active]:bg-green-50 data-[state=active]:text-green-600"
              >
                Businesses
              </TabsTrigger>
              <TabsTrigger
                value="users"
                className="data-[state=active]:bg-purple-50 data-[state=active]:text-purple-600"
              >
                Users
              </TabsTrigger>
              <TabsTrigger
                value="tasks"
                className="data-[state=active]:bg-orange-50 data-[state=active]:text-orange-600"
              >
                Tasks
              </TabsTrigger>
              <TabsTrigger value="reports" className="data-[state=active]:bg-red-50 data-[state=active]:text-red-600">
                Reports
              </TabsTrigger>
            </TabsList>

<TabsContent value="categories">
              <Card className="border-0 shadow-lg">
                <CardHeader>
                  <div className="flex justify-between items-center">
                    <div>
                      <CardTitle className="text-xl">Business Categories</CardTitle>
                      <CardDescription>Manage business categories and their audit checklists</CardDescription>
                    </div>
                    <Link href="/admin/categories/new">
                      <Button className="bg-blue-600 hover:bg-blue-700 shadow-lg hover:shadow-xl transition-all duration-200">
                        <Plus className="h-4 w-4 mr-2" />
                        Add Category
                      </Button>
                    </Link>
                  </div>
                </CardHeader>
                <CardContent>
                  <CategoriesList isDemoMode={isDemoMode} />
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="businesses">
              <Card className="border-0 shadow-lg">
                <CardHeader>
                  <div className="flex justify-between items-center">
                    <div>
                      <CardTitle className="text-xl">Businesses</CardTitle>
                      <CardDescription>Manage registered businesses</CardDescription>
                    </div>
                    <Link href="/admin/businesses/new">
                      <Button className="bg-green-600 hover:bg-green-700 shadow-lg hover:shadow-xl transition-all duration-200">
                        <Plus className="h-4 w-4 mr-2" />
                        Add Business
                      </Button>
                    </Link>
                  </div>
                </CardHeader>
                <CardContent>
                  <BusinessesList isDemoMode={isDemoMode} />
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="users">
              <Card className="border-0 shadow-lg">
                <CardHeader>
                  <CardTitle className="text-xl">Users</CardTitle>
                  <CardDescription>View all registered users</CardDescription>
                </CardHeader>
                <CardContent>
                  <UsersList isDemoMode={isDemoMode} />
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="tasks">
              <Card className="border-0 shadow-lg">
                <CardHeader>
                  <CardTitle className="text-xl">Tasks Overview</CardTitle>
                  <CardDescription>Monitor supplier and auditor tasks</CardDescription>
                </CardHeader>
                <CardContent>
                  <TasksOverview isDemoMode={isDemoMode} />
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="reports">
              <Card className="border-0 shadow-lg">
                <CardHeader>
                  <CardTitle className="text-xl">Audit Reports</CardTitle>
                  <CardDescription>View submitted audit reports (read-only)</CardDescription>
                </CardHeader>
                <CardContent>
                  <ReportsList isDemoMode={isDemoMode} />
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </FadeIn>
      </main>

<FloatingActionButton actions={floatingActions} />
    </div>
  )
}

// Component for Categories List
function CategoriesList({ isDemoMode }: { isDemoMode: boolean }) {
  const [categories, setCategories] = useState<any[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    if (isDemoMode) {
      setCategories(demoCategories)
      setLoading(false)
    } else {
      fetchCategories()
    }
  }, [isDemoMode])

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

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

if (loading) return <LoadingSpinner className="mx-auto" />

return (
    <div className="space-y-4">
      {categories.map((category, index) => (
        <FadeIn key={category.id} delay={index * 50}>
          <div className="flex items-center justify-between p-4 border rounded-lg hover:shadow-md transition-all duration-200 hover:border-blue-200">
            <div>
              <h3 className="font-semibold text-lg">{category.name}</h3>
              <p className="text-sm text-gray-600">Payout: ₹{(category.payout_amount / 100).toFixed(2)}</p>
              <p className="text-sm text-gray-600">Questions: {category.checklist?.questions?.length || 0}</p>
            </div>
            <Badge variant="default" className="bg-green-100 text-green-700">
              Active
            </Badge>
          </div>
        </FadeIn>
      ))}
      {categories.length === 0 && (
        <div className="text-center py-12">
          <Package className="h-12 w-12 text-gray-400 mx-auto mb-4" />
          <p className="text-gray-500">No categories found</p>
        </div>
      )}
    </div>
  )
}

// Component for Businesses List
function BusinessesList({ isDemoMode }: { isDemoMode: boolean }) {
  const [businesses, setBusinesses] = useState<any[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    if (isDemoMode) {
      setBusinesses(demoBusinesses)
      setLoading(false)
    } else {
      fetchBusinesses()
    }
  }, [isDemoMode])

const fetchBusinesses = async () => {
    try {
      const { data, error } = await supabase
        .from("businesses")
        .select(`
          *,
          business_categories (name)
        `)
        .order("created_at", { ascending: false })

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

if (loading) return <LoadingSpinner className="mx-auto" />

return (
    <div className="space-y-4">
      {businesses.map((business, index) => (
        <FadeIn key={business.id} delay={index * 50}>
          <div className="flex items-center justify-between p-4 border rounded-lg hover:shadow-md transition-all duration-200 hover:border-green-200">
            <div>
              <h3 className="font-semibold text-lg">{business.name}</h3>
              <p className="text-sm text-gray-600">Category: {business.business_categories?.name}</p>
              <p className="text-sm text-gray-600">
                Location: {business.city}, {business.pin_code}
              </p>
            </div>
            <Badge variant="default" className="bg-blue-100 text-blue-700">
              Active
            </Badge>
          </div>
        </FadeIn>
      ))}
      {businesses.length === 0 && (
        <div className="text-center py-12">
          <Building className="h-12 w-12 text-gray-400 mx-auto mb-4" />
          <p className="text-gray-500">No businesses found</p>
        </div>
      )}
    </div>
  )
}

// Component for Users List
function UsersList({ isDemoMode }: { isDemoMode: boolean }) {
  const [users, setUsers] = useState<any[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    if (isDemoMode) {
      setUsers(demoUsers)
      setLoading(false)
    } else {
      fetchUsers()
    }
  }, [isDemoMode])

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

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

if (loading) return <LoadingSpinner className="mx-auto" />

const getRoleBadgeColor = (role: string) => {
    switch (role) {
      case "admin":
        return "bg-red-100 text-red-700"
      case "auditor":
        return "bg-green-100 text-green-700"
      case "supplier":
        return "bg-orange-100 text-orange-700"
      case "consumer":
        return "bg-blue-100 text-blue-700"
      default:
        return "bg-gray-100 text-gray-700"
    }
  }

return (
    <div className="space-y-4">
      {users.map((user, index) => (
        <FadeIn key={user.id} delay={index * 50}>
          <div className="flex items-center justify-between p-4 border rounded-lg hover:shadow-md transition-all duration-200 hover:border-purple-200">
            <div>
              <h3 className="font-semibold text-lg">{user.full_name}</h3>
              <p className="text-sm text-gray-600">{user.email}</p>
              <p className="text-sm text-gray-600">
                Location: {user.city}, {user.pin_code}
              </p>
            </div>
            <Badge className={getRoleBadgeColor(user.role)}>{user.role}</Badge>
          </div>
        </FadeIn>
      ))}
    </div>
  )
}

// Component for Tasks Overview
function TasksOverview({ isDemoMode }: { isDemoMode: boolean }) {
  const [supplierTasks, setSupplierTasks] = useState<any[]>([])
  const [auditorTasks, setAuditorTasks] = useState<any[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    if (isDemoMode) {
      setSupplierTasks(demoSupplierTasks)
      setAuditorTasks(demoAuditorTasks)
      setLoading(false)
    } else {
      fetchTasks()
    }
  }, [isDemoMode])

const fetchTasks = async () => {
    try {
      const [supplierResult, auditorResult] = await Promise.all([
        supabase
          .from("supplier_tasks")
          .select(`
            *,
            businesses (name, address),
            profiles (full_name)
          `)
          .order("created_at", { ascending: false }),
        supabase
          .from("auditor_tasks")
          .select(`
            *,
            businesses (name, address),
            profiles (full_name)
          `)
          .order("created_at", { ascending: false }),
      ])

if (supplierResult.error) throw supplierResult.error
      if (auditorResult.error) throw auditorResult.error

setSupplierTasks(supplierResult.data || [])
      setAuditorTasks(auditorResult.data || [])
    } catch (error) {
      console.error("Error fetching tasks:", error)
    } finally {
      setLoading(false)
    }
  }

if (loading) return <LoadingSpinner className="mx-auto" />

const getStatusBadgeColor = (status: string) => {
    switch (status) {
      case "completed":
      case "package_delivered":
        return "bg-green-100 text-green-700"
      case "in_progress":
      case "package_sent":
        return "bg-blue-100 text-blue-700"
      case "todo":
      case "not_started":
        return "bg-gray-100 text-gray-700"
      default:
        return "bg-gray-100 text-gray-700"
    }
  }

return (
    <div className="space-y-8">
      <div>
        <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
          <Truck className="h-5 w-5 text-orange-600" />
          Supplier Tasks
        </h3>
        <div className="space-y-3">
          {supplierTasks.map((task, index) => (
            <FadeIn key={task.id} delay={index * 50}>
              <div className="flex items-center justify-between p-3 border rounded hover:shadow-md transition-all duration-200">
                <div>
                  <p className="font-medium">{task.businesses?.name}</p>
                  <p className="text-sm text-gray-600">Supplier: {task.profiles?.full_name}</p>
                </div>
                <Badge className={getStatusBadgeColor(task.status)}>{task.status.replace("_", " ")}</Badge>
              </div>
            </FadeIn>
          ))}
          {supplierTasks.length === 0 && <p className="text-gray-500 text-center py-4">No supplier tasks found</p>}
        </div>
      </div>

<div>
        <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
          <FileText className="h-5 w-5 text-green-600" />
          Auditor Tasks
        </h3>
        <div className="space-y-3">
          {auditorTasks.map((task, index) => (
            <FadeIn key={task.id} delay={index * 50}>
              <div className="flex items-center justify-between p-3 border rounded hover:shadow-md transition-all duration-200">
                <div>
                  <p className="font-medium">{task.businesses?.name}</p>
                  <p className="text-sm text-gray-600">Auditor: {task.profiles?.full_name}</p>
                  <p className="text-sm text-gray-600">Payout: ₹{(task.payout_amount / 100).toFixed(2)}</p>
                </div>
                <Badge className={getStatusBadgeColor(task.status)}>{task.status.replace("_", " ")}</Badge>
              </div>
            </FadeIn>
          ))}
          {auditorTasks.length === 0 && <p className="text-gray-500 text-center py-4">No auditor tasks found</p>}
        </div>
      </div>
    </div>
  )
}

// Component for Reports List
function ReportsList({ isDemoMode }: { isDemoMode: boolean }) {
  const [reports, setReports] = useState<any[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    if (isDemoMode) {
      setReports(demoAuditReports)
      setLoading(false)
    } else {
      fetchReports()
    }
  }, [isDemoMode])

const fetchReports = async () => {
    try {
      const { data, error } = await supabase
        .from("audit_reports")
        .select(`
          *,
          businesses (name),
          profiles (full_name)
        `)
        .order("submitted_at", { ascending: false })

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

if (loading) return <LoadingSpinner className="mx-auto" />

return (
    <div className="space-y-4">
      {reports.map((report, index) => (
        <FadeIn key={report.id} delay={index * 50}>
          <div className="p-4 border rounded-lg hover:shadow-md transition-all duration-200">
            <div className="flex items-center justify-between mb-2">
              <h3 className="font-semibold text-lg">{report.businesses?.name}</h3>
              <Badge className="bg-green-100 text-green-700">Completed</Badge>
            </div>
            <p className="text-sm text-gray-600">Auditor: {report.profiles?.full_name}</p>
            <p className="text-sm text-gray-600">Submitted: {new Date(report.submitted_at).toLocaleDateString()}</p>
            <p className="text-sm text-gray-600">Photos: {report.photos?.length || 0}</p>
            <div className="mt-3">
              <Button variant="outline" size="sm" className="hover:bg-blue-50 hover:border-blue-200">
                View Report
              </Button>
            </div>
          </div>
        </FadeIn>
      ))}
      {reports.length === 0 && (
        <div className="text-center py-12">
          <FileText className="h-12 w-12 text-gray-400 mx-auto mb-4" />
          <p className="text-gray-500">No reports found</p>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/auditor/page.tsx" isQuickEdit="true"
"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/auth-context"
import { supabase } from "@/lib/supabase"
import { demoAuditorTasks } from "@/lib/demo-data"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { useToast } from "@/hooks/use-toast"
import { LogOut, FileText, MapPin, Phone, IndianRupee, Eye, ArrowLeft } from "lucide-react"
import Link from "next/link"

type AuditorTask = {
  id: string
  status: "not_started" | "on_field" | "in_progress" | "completed"
  payout_amount: number
  created_at: string
  businesses: {
    name: string
    address: string
    city: string
    pin_code: string
    phone_number?: string
  }
  business_categories: {
    name: string
  }
}

export default function AuditorDashboard() {
  const { profile, loading, signOut, isDemoMode } = useAuth()
  const router = useRouter()
  const { toast } = useToast()
  const [tasks, setTasks] = useState<AuditorTask[]>([])
  const [tasksLoading, setTasksLoading] = useState(true)
  const [totalEarnings, setTotalEarnings] = useState(0)

useEffect(() => {
    if (!loading && (!profile || profile.role !== "auditor")) {
      router.push("/auth/login")
    }
  }, [profile, loading, router])

useEffect(() => {
    if (profile?.role === "auditor") {
      if (isDemoMode) {
        const auditorTasks = demoAuditorTasks.filter((task) => task.auditor_id === profile.id)
        setTasks(auditorTasks)
        const earnings = auditorTasks
          .filter((task) => task.status === "completed")
          .reduce((sum, task) => sum + task.payout_amount, 0)
        setTotalEarnings(earnings)
        setTasksLoading(false)
      } else {
        fetchTasks()
      }
    }
  }, [profile, isDemoMode])

const fetchTasks = async () => {
    try {
      const { data, error } = await supabase
        .from("auditor_tasks")
        .select(`
          *,
          businesses (
            name,
            address,
            city,
            pin_code,
            phone_number
          ),
          business_categories (
            name
          )
        `)
        .eq("auditor_id", profile?.id)
        .order("created_at", { ascending: false })

if (error) throw error
      setTasks(data || [])

// Calculate total earnings from completed tasks
      const completedTasks = data?.filter((task) => task.status === "completed") || []
      const earnings = completedTasks.reduce((sum, task) => sum + task.payout_amount, 0)
      setTotalEarnings(earnings)
    } catch (error) {
      console.error("Error fetching tasks:", error)
      toast({
        title: "Error",
        description: "Failed to fetch tasks",
        variant: "destructive",
      })
    } finally {
      setTasksLoading(false)
    }
  }

const handleSignOut = async () => {
    try {
      await signOut()
      router.push("/dashboard")
    } catch (error) {
      console.error("Error signing out:", error)
      router.push("/dashboard")
    }
  }

const getStatusColor = (status: AuditorTask["status"]) => {
    switch (status) {
      case "not_started":
        return "secondary"
      case "on_field":
        return "default"
      case "in_progress":
        return "default"
      case "completed":
        return "default"
      default:
        return "secondary"
    }
  }

const getStatusLabel = (status: AuditorTask["status"]) => {
    switch (status) {
      case "not_started":
        return "Not Started"
      case "on_field":
        return "On Field"
      case "in_progress":
        return "In Progress"
      case "completed":
        return "Completed"
      default:
        return status
    }
  }

if (loading || tasksLoading) {
    return <div className="flex items-center justify-center min-h-screen">Loading...</div>
  }

if (!profile || profile.role !== "auditor") {
    return null
  }

return (
    <div className="min-h-screen bg-gray-50">
      <header className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center py-4">
            <div className="flex items-center gap-4">
              <Button
                onClick={() => router.push("/dashboard")}
                variant="ghost"
                size="sm"
                className="hover:bg-blue-50 hover:text-blue-600 transition-all duration-200"
              >
                <ArrowLeft className="h-4 w-4 mr-2" />
                Back to Dashboard
              </Button>
              <div>
                <div className="flex items-center gap-2">
                  <h1 className="text-2xl font-bold text-gray-900">Auditor Dashboard</h1>
                  {isDemoMode && <Badge variant="secondary">Demo Mode</Badge>}
                </div>
                <p className="text-sm text-gray-600">Welcome back, {profile.full_name}</p>
              </div>
            </div>
            <Button
              onClick={handleSignOut}
              variant="outline"
              size="sm"
              className="hover:bg-red-50 hover:border-red-200 hover:text-red-600 transition-all duration-200 font-medium"
            >
              <LogOut className="h-4 w-4 mr-2" />
              Sign Out
            </Button>
          </div>
        </div>
      </header>

<main className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <div className="mb-6">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Total Tasks</CardTitle>
                <FileText className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{tasks.length}</div>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Pending</CardTitle>
                <FileText className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{tasks.filter((t) => t.status !== "completed").length}</div>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Completed</CardTitle>
                <FileText className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{tasks.filter((t) => t.status === "completed").length}</div>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Total Earnings</CardTitle>
                <IndianRupee className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">₹{(totalEarnings / 100).toFixed(2)}</div>
              </CardContent>
            </Card>
          </div>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <Card>
            <CardHeader>
              <CardTitle>Audit Tasks</CardTitle>
              <CardDescription>Your assigned audit tasks</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {tasks.map((task) => (
                  <div key={task.id} className="flex items-center justify-between p-4 border rounded-lg">
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-2">
                        <h3 className="font-semibold">{task.businesses.name}</h3>
                        <Badge variant={getStatusColor(task.status)}>{getStatusLabel(task.status)}</Badge>
                      </div>
                      <div className="space-y-1 text-sm text-gray-600">
                        <div className="flex items-center gap-2">
                          <span className="font-medium">Category:</span>
                          <span>{task.business_categories.name}</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <MapPin className="h-4 w-4" />
                          <span>{task.businesses.address}</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <span className="font-medium">City:</span>
                          <span>
                            {task.businesses.city}, {task.businesses.pin_code}
                          </span>
                        </div>
                        {task.businesses.phone_number && (
                          <div className="flex items-center gap-2">
                            <Phone className="h-4 w-4" />
                            <span>{task.businesses.phone_number}</span>
                          </div>
                        )}
                        <div className="flex items-center gap-2">
                          <IndianRupee className="h-4 w-4" />
                          <span className="font-medium">₹{(task.payout_amount / 100).toFixed(2)}</span>
                        </div>
                      </div>
                    </div>
                    <div className="ml-4 space-y-2">
                      {task.status !== "completed" && (
                        <Link href={`/auditor/audit/${task.id}`}>
                          <Button size="sm">{task.status === "not_started" ? "Start Audit" : "Continue"}</Button>
                        </Link>
                      )}
                      {task.status === "completed" && (
                        <Link href={`/auditor/reports/${task.id}`}>
                          <Button size="sm" variant="outline">
                            <Eye className="h-4 w-4 mr-2" />
                            View Report
                          </Button>
                        </Link>
                      )}
                    </div>
                  </div>
                ))}
                {tasks.length === 0 && (
                  <div className="text-center py-8 text-gray-500">No audit tasks assigned yet</div>
                )}
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Payouts</CardTitle>
              <CardDescription>Your earnings from completed audits</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {tasks
                  .filter((task) => task.status === "completed")
                  .map((task) => (
                    <div key={task.id} className="flex items-center justify-between p-3 border rounded">
                      <div>
                        <p className="font-medium">{task.businesses.name}</p>
                        <p className="text-sm text-gray-600">{task.business_categories.name}</p>
                      </div>
                      <div className="text-right">
                        <p className="font-semibold text-green-600">₹{(task.payout_amount / 100).toFixed(2)}</p>
                        <p className="text-xs text-gray-500">Completed</p>
                      </div>
                    </div>
                  ))}
                {tasks.filter((task) => task.status === "completed").length === 0 && (
                  <div className="text-center py-8 text-gray-500">No completed audits yet</div>
                )}
              </div>
            </CardContent>
          </Card>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/supplier/page.tsx" isQuickEdit="true"
"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/auth-context"
import { supabase } from "@/lib/supabase"
import { demoSupplierTasks } from "@/lib/demo-data"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useToast } from "@/hooks/use-toast"
import { LogOut, Package, MapPin, Phone, ArrowLeft } from "lucide-react"

type SupplierTask = {
  id: string
  status: "todo" | "in_progress" | "package_sent" | "package_delivered"
  created_at: string
  businesses: {
    name: string
    address: string
    city: string
    pin_code: string
    phone_number?: string
  }
}

export default function SupplierDashboard() {
  const { profile, loading, signOut, isDemoMode } = useAuth()
  const router = useRouter()
  const { toast } = useToast()
  const [tasks, setTasks] = useState<SupplierTask[]>([])
  const [tasksLoading, setTasksLoading] = useState(true)

useEffect(() => {
    if (!loading && (!profile || profile.role !== "supplier")) {
      router.push("/auth/login")
    }
  }, [profile, loading, router])

useEffect(() => {
    if (profile?.role === "supplier") {
      if (isDemoMode) {
        setTasks(demoSupplierTasks.filter((task) => task.supplier_id === profile.id))
        setTasksLoading(false)
      } else {
        fetchTasks()
      }
    }
  }, [profile, isDemoMode])

const fetchTasks = async () => {
    try {
      const { data, error } = await supabase
        .from("supplier_tasks")
        .select(`
          *,
          businesses (
            name,
            address,
            city,
            pin_code,
            phone_number
          )
        `)
        .eq("supplier_id", profile?.id)
        .order("created_at", { ascending: false })

if (error) throw error
      setTasks(data || [])
    } catch (error) {
      console.error("Error fetching tasks:", error)
      toast({
        title: "Error",
        description: "Failed to fetch tasks",
        variant: "destructive",
      })
    } finally {
      setTasksLoading(false)
    }
  }

const updateTaskStatus = async (taskId: string, newStatus: SupplierTask["status"]) => {
    try {
      if (isDemoMode) {
        // Update demo data
        setTasks(tasks.map((task) => (task.id === taskId ? { ...task, status: newStatus } : task)))
        toast({
          title: "Success",
          description: "Task status updated successfully (Demo Mode)",
        })
        return
      }

const { error } = await supabase
        .from("supplier_tasks")
        .update({ status: newStatus, updated_at: new Date().toISOString() })
        .eq("id", taskId)

if (error) throw error

// Update local state
      setTasks(tasks.map((task) => (task.id === taskId ? { ...task, status: newStatus } : task)))

toast({
        title: "Success",
        description: "Task status updated successfully",
      })
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message,
        variant: "destructive",
      })
    }
  }

const getStatusColor = (status: SupplierTask["status"]) => {
    switch (status) {
      case "todo":
        return "secondary"
      case "in_progress":
        return "default"
      case "package_sent":
        return "outline"
      case "package_delivered":
        return "default"
      default:
        return "secondary"
    }
  }

const getStatusLabel = (status: SupplierTask["status"]) => {
    switch (status) {
      case "todo":
        return "To Do"
      case "in_progress":
        return "In Progress"
      case "package_sent":
        return "Package Sent"
      case "package_delivered":
        return "Package Delivered"
      default:
        return status
    }
  }

if (loading || tasksLoading) {
    return <div className="flex items-center justify-center min-h-screen">Loading...</div>
  }

if (!profile || profile.role !== "supplier") {
    return null
  }

return (
    <div className="min-h-screen bg-gray-50">
      <header className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center py-4">
            <div className="flex items-center gap-4">
              <Button
                onClick={() => router.push("/dashboard")}
                variant="ghost"
                size="sm"
                className="hover:bg-blue-50 hover:text-blue-600 transition-all duration-200"
              >
                <ArrowLeft className="h-4 w-4 mr-2" />
                Back to Dashboard
              </Button>
              <div>
                <div className="flex items-center gap-2">
                  <h1 className="text-2xl font-bold text-gray-900">Supplier Dashboard</h1>
                  {isDemoMode && <Badge variant="secondary">Demo Mode</Badge>}
                </div>
                <p className="text-sm text-gray-600">Welcome back, {profile.full_name}</p>
              </div>
            </div>
            <Button
              onClick={handleSignOut}
              variant="outline"
              size="sm"
              className="hover:bg-red-50 hover:border-red-200 hover:text-red-600 transition-all duration-200 font-medium"
            >
              <LogOut className="h-4 w-4 mr-2" />
              Sign Out
            </Button>
          </div>
        </div>
      </header>

<main className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <div className="mb-6">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Total Tasks</CardTitle>
                <Package className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{tasks.length}</div>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">To Do</CardTitle>
                <Package className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{tasks.filter((t) => t.status === "todo").length}</div>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">In Progress</CardTitle>
                <Package className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{tasks.filter((t) => t.status === "in_progress").length}</div>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Completed</CardTitle>
                <Package className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{tasks.filter((t) => t.status === "package_delivered").length}</div>
              </CardContent>
            </Card>
          </div>
        </div>

<Card>
          <CardHeader>
            <CardTitle>Delivery Tasks</CardTitle>
            <CardDescription>Manage your assigned delivery tasks</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {tasks.map((task) => (
                <div key={task.id} className="flex items-center justify-between p-4 border rounded-lg">
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-2">
                      <h3 className="font-semibold">{task.businesses.name}</h3>
                      <Badge variant={getStatusColor(task.status)}>{getStatusLabel(task.status)}</Badge>
                    </div>
                    <div className="space-y-1 text-sm text-gray-600">
                      <div className="flex items-center gap-2">
                        <MapPin className="h-4 w-4" />
                        <span>{task.businesses.address}</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <span className="font-medium">City:</span>
                        <span>
                          {task.businesses.city}, {task.businesses.pin_code}
                        </span>
                      </div>
                      {task.businesses.phone_number && (
                        <div className="flex items-center gap-2">
                          <Phone className="h-4 w-4" />
                          <span>{task.businesses.phone_number}</span>
                        </div>
                      )}
                      <div className="flex items-center gap-2">
                        <span className="font-medium">Assigned:</span>
                        <span>{new Date(task.created_at).toLocaleDateString()}</span>
                      </div>
                    </div>
                  </div>
                  <div className="ml-4">
                    <Select
                      value={task.status}
                      onValueChange={(value: SupplierTask["status"]) => updateTaskStatus(task.id, value)}
                    >
                      <SelectTrigger className="w-40">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="todo">To Do</SelectItem>
                        <SelectItem value="in_progress">In Progress</SelectItem>
                        <SelectItem value="package_sent">Package Sent</SelectItem>
                        <SelectItem value="package_delivered">Package Delivered</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              ))}
              {tasks.length === 0 && (
                <div className="text-center py-8 text-gray-500">No delivery tasks assigned yet</div>
              )}
            </div>
          </CardContent>
        </Card>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/consumer/page.tsx" isQuickEdit="true"
"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/auth-context"
import { supabase } from "@/lib/supabase"
import { demoBusinesses } from "@/lib/demo-data"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { useToast } from "@/hooks/use-toast"
import { LogOut, Search, MapPin, Phone, Mail, Building, ArrowLeft } from "lucide-react"
import Link from "next/link"

type Business = {
  id: string
  name: string
  address: string
  city: string
  pin_code: string
  phone_number?: string
  email?: string
  business_categories: {
    name: string
  }
}

export default function ConsumerDashboard() {
  const { profile, loading, signOut, isDemoMode } = useAuth()
  const router = useRouter()
  const { toast } = useToast()
  const [businesses, setBusinesses] = useState<Business[]>([])
  const [filteredBusinesses, setFilteredBusinesses] = useState<Business[]>([])
  const [businessesLoading, setBusinessesLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState("")
  const [cityFilter, setCityFilter] = useState("")

useEffect(() => {
    if (!loading && (!profile || profile.role !== "consumer")) {
      router.push("/auth/login")
    }
  }, [profile, loading, router])

useEffect(() => {
    if (profile?.role === "consumer") {
      if (isDemoMode) {
        setBusinesses(demoBusinesses)
        setBusinessesLoading(false)
        if (profile.city) {
          setCityFilter(profile.city)
        }
      } else {
        fetchBusinesses()
        if (profile.city) {
          setCityFilter(profile.city)
        }
      }
    }
  }, [profile, isDemoMode])

useEffect(() => {
    filterBusinesses()
  }, [businesses, searchTerm, cityFilter])

const fetchBusinesses = async () => {
    try {
      const { data, error } = await supabase
        .from("businesses")
        .select(`
          *,
          business_categories (
            name
          )
        `)
        .order("created_at", { ascending: false })

if (error) throw error
      setBusinesses(data || [])
    } catch (error) {
      console.error("Error fetching businesses:", error)
      toast({
        title: "Error",
        description: "Failed to fetch businesses",
        variant: "destructive",
      })
    } finally {
      setBusinessesLoading(false)
    }
  }

const filterBusinesses = () => {
    let filtered = businesses

// Filter by city (prioritize user's city)
    if (cityFilter) {
      filtered = filtered.filter((business) => business.city.toLowerCase().includes(cityFilter.toLowerCase()))
    }

// Filter by search term
    if (searchTerm) {
      filtered = filtered.filter(
        (business) =>
          business.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
          business.business_categories.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
          business.address.toLowerCase().includes(searchTerm.toLowerCase()),
      )
    }

setFilteredBusinesses(filtered)
  }

const getUniqueCity = () => {
    const cities = businesses.map((b) => b.city)
    return [...new Set(cities)].sort()
  }

if (loading || businessesLoading) {
    return <div className="flex items-center justify-center min-h-screen">Loading...</div>
  }

if (!profile || profile.role !== "consumer") {
    return null
  }

return (
    <div className="min-h-screen bg-gray-50">
      <header className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center py-4">
            <div className="flex items-center gap-4">
              <Button
                onClick={() => router.push("/dashboard")}
                variant="ghost"
                size="sm"
                className="hover:bg-blue-50 hover:text-blue-600 transition-all duration-200"
              >
                <ArrowLeft className="h-4 w-4 mr-2" />
                Back to Dashboard
              </Button>
              <div>
                <div className="flex items-center gap-2">
                  <h1 className="text-2xl font-bold text-gray-900">AuditX-Biz</h1>
                  {isDemoMode && <Badge variant="secondary">Demo Mode</Badge>}
                </div>
                <p className="text-sm text-gray-600">Welcome back, {profile.full_name}</p>
              </div>
            </div>
            <Button
              onClick={handleSignOut}
              variant="outline"
              size="sm"
              className="hover:bg-red-50 hover:border-red-200 hover:text-red-600 transition-all duration-200 font-medium"
            >
              <LogOut className="h-4 w-4 mr-2" />
              Sign Out
            </Button>
          </div>
        </div>
      </header>

<main className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        {/* Search and Filter Section */}
        <Card className="mb-6">
          <CardHeader>
            <CardTitle>Find Businesses</CardTitle>
            <CardDescription>Discover verified businesses in your area</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <label className="text-sm font-medium">Search</label>
                <div className="relative">
                  <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
                  <Input
                    placeholder="Search businesses, categories, or locations..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="pl-10"
                  />
                </div>
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium">City</label>
                <select
                  value={cityFilter}
                  onChange={(e) => setCityFilter(e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                >
                  <option value="">All Cities</option>
                  {getUniqueCity().map((city) => (
                    <option key={city} value={city}>
                      {city}
                    </option>
                  ))}
                </select>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Stats */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Total Businesses</CardTitle>
              <Building className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{businesses.length}</div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">In Your City</CardTitle>
              <MapPin className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{businesses.filter((b) => b.city === profile.city).length}</div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Search Results</CardTitle>
              <Search className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{filteredBusinesses.length}</div>
            </CardContent>
          </Card>
        </div>

{/* Business Listings */}
        <Card>
          <CardHeader>
            <CardTitle>Business Directory</CardTitle>
            <CardDescription>Browse verified businesses with transparent audit information</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {filteredBusinesses.map((business) => (
                <Card key={business.id} className="hover:shadow-md transition-shadow">
                  <CardHeader>
                    <div className="flex justify-between items-start">
                      <CardTitle className="text-lg">{business.name}</CardTitle>
                      <Badge variant="secondary">{business.business_categories.name}</Badge>
                    </div>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    <div className="flex items-start gap-2">
                      <MapPin className="h-4 w-4 text-gray-500 mt-0.5" />
                      <div className="text-sm text-gray-600">
                        <p>{business.address}</p>
                        <p>
                          {business.city}, {business.pin_code}
                        </p>
                      </div>
                    </div>

{business.phone_number && (
                      <div className="flex items-center gap-2">
                        <Phone className="h-4 w-4 text-gray-500" />
                        <span className="text-sm text-gray-600">{business.phone_number}</span>
                      </div>
                    )}

{business.email && (
                      <div className="flex items-center gap-2">
                        <Mail className="h-4 w-4 text-gray-500" />
                        <span className="text-sm text-gray-600">{business.email}</span>
                      </div>
                    )}

<div className="pt-2">
                      <Link href="/consumer/reports">
                        <Button variant="outline" size="sm" className="w-full">
                          View Audit Reports
                        </Button>
                      </Link>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>

{filteredBusinesses.length === 0 && (
              <div className="text-center py-12">
                <Building className="mx-auto h-12 w-12 text-gray-400" />
                <h3 className="mt-2 text-sm font-medium text-gray-900">No businesses found</h3>
                <p className="mt-1 text-sm text-gray-500">
                  {searchTerm || cityFilter
                    ? "Try adjusting your search criteria"
                    : "No businesses have been added yet"}
                </p>
              </div>
            )}
          </CardContent>
        </Card>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isQuickEdit="true"
"use client"

export default function DashboardPage() {
  const { profile, loading } = useAuth()
  const router = useRouter()

useEffect(() => {
    if (!loading) {
      if (!profile) {
        router.push("/auth/login")
        return
      }

// Redirect based on user role immediately
      const redirectPath = {
        admin: "/admin",
        auditor: "/auditor",
        supplier: "/supplier",
        consumer: "/consumer",
      }[profile.role]

if (redirectPath) {
        window.location.href = redirectPath
      }
    }
  }, [profile, loading, router])

if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
        <Card className="w-full max-w-md">
          <CardContent className="flex items-center justify-center p-8">
            <div className="text-center">
              <LoadingSpinner size="lg" className="mb-4" />
              <p className="text-gray-600">Loading dashboard...</p>
            </div>
          </CardContent>
        </Card>
      </div>
    )
  }

if (!profile) {
    return null // Will redirect to login
  }

return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle className="text-center">Welcome to AuditPro</CardTitle>
          <CardDescription className="text-center">Redirecting you to your dashboard...</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="text-center">
            <LoadingSpinner size="lg" className="mb-4" />
            <p className="text-gray-600">Setting up your {profile.role} dashboard...</p>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}</article></body></html>