[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { UserAppLayout } from "@/components/user-app-layout" import { VendorDashboard } from "@/components/vendor-dashboard" import { AdminPanel } from "@/components/admin-panel" import { SuperadminPanel } from "@/components/superadmin-panel" export default function Home() { return (

User App Vendor App Admin Panel Superadmin Panel

) } [V0_FILE]typescriptreact:file="components/user-app-layout.tsx" isMerged="true" "use client" import { useState } from "react" import { Home, Calendar, User, Search } from "lucide-react" import { SplashScreen } from "@/components/splash-screen" import { OnboardingScreen } from "@/components/onboarding-screen" import { LoginScreen } from "@/components/login-screen" import { UserDashboard } from "@/components/user-dashboard" import { ServiceSearch } from "@/components/service-search" import { ServiceDetail } from "@/components/service-detail" import { BookingFlow } from "@/components/booking-flow" import { MyBookings } from "@/components/my-bookings" import { UserProfile } from "@/components/user-profile" export function UserAppLayout() { const [showSplash, setShowSplash] = useState(true) const [showOnboarding, setShowOnboarding] = useState(false) const [showLogin, setShowLogin] = useState(false) const [isLoggedIn, setIsLoggedIn] = useState(false) const [currentScreen, setCurrentScreen] = useState("dashboard") const [selectedService, setSelectedService] = useState(null) // Simulate app flow if (showSplash) { setTimeout(() => { setShowSplash(false) setShowOnboarding(true) }, 3000) return } if (showOnboarding) { return ( { setShowOnboarding(false) setShowLogin(true) }} /> ) } if (showLogin) { return ( { setShowLogin(false) setIsLoggedIn(true) }} /> ) } if (!isLoggedIn) { return setIsLoggedIn(true)} /> } const renderScreen = () => { switch (currentScreen) { case "dashboard": return ( { setSelectedService(service) setCurrentScreen("serviceDetail") }} /> ) case "search": return ( { setSelectedService(service) setCurrentScreen("serviceDetail") }} /> ) case "serviceDetail": return setCurrentScreen("booking")} /> case "booking": return setCurrentScreen("bookings")} /> case "bookings": return case "profile": return default: return } } return (

{renderScreen()}

) } [V0_FILE]typescriptreact:file="components/splash-screen.tsx" isMerged="true" "use client" import { motion } from "framer-motion" export function SplashScreen() { return (

SevaSphere

Poora Duniya Ka Service Ecosystem Ek Jagah

) } [V0_FILE]typescriptreact:file="components/onboarding-screen.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import { ChevronRight } from "lucide-react" import { Button } from "@/components/ui/button" import { motion } from "framer-motion" interface OnboardingScreenProps { onComplete: () => void } export function OnboardingScreen({ onComplete }: OnboardingScreenProps) { const [currentSlide, setCurrentSlide] = useState(0) const slides = [ { title: "Welcome to SevaSphere", description: "Your one-stop solution for all services", image: "/placeholder.svg?height=200&width=200", }, { title: "Find Trusted Service Providers", description: "Verified professionals at your fingertips", image: "/placeholder.svg?height=200&width=200", }, { title: "Book & Pay Seamlessly", description: "Easy scheduling and secure payments", image: "/placeholder.svg?height=200&width=200", }, ] const nextSlide = () => { if (currentSlide < slides.length - 1) { setCurrentSlide(currentSlide + 1) } else { onComplete() } } return (

{slides[currentSlide].title}

{slides[currentSlide].description}

{slides.map((_, index) => (

))}

) } [V0_FILE]typescriptreact:file="components/login-screen.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ArrowLeft } from "lucide-react" interface LoginScreenProps { onLogin: () => void } export function LoginScreen({ onLogin }: LoginScreenProps) { const [phoneNumber, setPhoneNumber] = useState("") const [otpSent, setOtpSent] = useState(false) const [otp, setOtp] = useState("") const handleSendOtp = () => { if (phoneNumber.length === 10) { setOtpSent(true) } } const handleVerifyOtp = () => { if (otp.length === 6) { onLogin() } } return (

Login / Sign Up

Welcome to SevaSphere

Phone Number Social Login {!otpSent ? ( <>

Phone Number

+91

setPhoneNumber(e.target.value)} maxLength={10} />

) : ( <>

Enter OTP sent to +91 {phoneNumber} setOtp(e.target.value)} maxLength={6} />

)}

By continuing, you agree to SevaSphere's{" "} Terms of Service {" "} and{" "} Privacy Policy

) } [V0_FILE]typescriptreact:file="components/user-dashboard.tsx" isMerged="true" import Image from "next/image" import { Bell, Mic, Search, Star } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent } from "@/components/ui/card" import { ScrollArea } from "@/components/ui/scroll-area" import { Badge } from "@/components/ui/badge" interface UserDashboardProps { onServiceSelect: (service: any) => void } export function UserDashboard({ onServiceSelect }: UserDashboardProps) { const categories = [ { id: 1, name: "Home Cleaning", icon: "/placeholder.svg?height=40&width=40" }, { id: 2, name: "Plumbing", icon: "/placeholder.svg?height=40&width=40" }, { id: 3, name: "Electrician", icon: "/placeholder.svg?height=40&width=40" }, { id: 4, name: "Salon", icon: "/placeholder.svg?height=40&width=40" }, { id: 5, name: "Appliance Repair", icon: "/placeholder.svg?height=40&width=40" }, { id: 6, name: "Painting", icon: "/placeholder.svg?height=40&width=40" }, { id: 7, name: "Pest Control", icon: "/placeholder.svg?height=40&width=40" }, { id: 8, name: "Carpentry", icon: "/placeholder.svg?height=40&width=40" }, ] const recommendedServices = [ { id: 1, name: "Premium Home Cleaning", vendor: "CleanMaster Pro", rating: 4.8, price: "₹499", image: "/placeholder.svg?height=120&width=120", }, { id: 2, name: "AC Service & Repair", vendor: "CoolTech Solutions", rating: 4.6, price: "₹799", image: "/placeholder.svg?height=120&width=120", }, { id: 3, name: "Salon at Home", vendor: "GlamStyle", rating: 4.9, price: "₹599", image: "/placeholder.svg?height=120&width=120", }, ] const offers = [ { id: 1, title: "50% OFF on first booking", code: "FIRST50", image: "/placeholder.svg?height=80&width=240" }, { id: 2, title: "Flat ₹200 OFF on Plumbing", code: "PLUMB200", image: "/placeholder.svg?height=80&width=240" }, ] return (

SevaSphere

Noida, Sector 62

{/* Search Bar */}

{/* Last Booking */}

Last Booked

Home Cleaning

{/* Categories */}

Recommended for You

{recommendedServices.map((service) => ( onServiceSelect(service)} >

{service.name}

{service.vendor}

{service.rating}

{service.price}

))}

{/* Offers */}

Offers & Promotions

{offers.map((offer) => (

{offer.code}

{offer.title}

))}

) } [V0_FILE]typescriptreact:file="components/service-detail.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import { ArrowLeft, Clock, Heart, MapPin, Share, Star } from "lucide-react" import { Button } from "@/components/ui/button" import { ScrollArea } from "@/components/ui/scroll-area" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" interface ServiceDetailProps { service: any onBook: () => void } export function ServiceDetail({ service, onBook }: ServiceDetailProps) { const [isWishlisted, setIsWishlisted] = useState(false) // Mock data const serviceData = { id: 1, name: "Premium Home Cleaning", vendor: "CleanMaster Pro", rating: 4.8, reviewCount: 243, price: "₹499", duration: "2 hours", description: "Our premium home cleaning service includes dusting, vacuuming, mopping, bathroom cleaning, kitchen cleaning, and more. We use eco-friendly products and ensure your home is spotless.", images: [ "/placeholder.svg?height=200&width=375", "/placeholder.svg?height=200&width=375", "/placeholder.svg?height=200&width=375", ], services: [ { name: "Basic Cleaning", price: "₹349", duration: "1.5 hours" }, { name: "Premium Cleaning", price: "₹499", duration: "2 hours" }, { name: "Deep Cleaning", price: "₹799", duration: "3 hours" }, ], reviews: [ { user: "Rahul S.", rating: 5, date: "2 days ago", comment: "Excellent service! The cleaner was professional and thorough. My house looks spotless.", images: ["/placeholder.svg?height=60&width=60"], }, { user: "Priya M.", rating: 4, date: "1 week ago", comment: "Good service overall. They were a bit late but did a great job cleaning.", }, { user: "Amit K.", rating: 5, date: "2 weeks ago", comment: "Very satisfied with the cleaning. Will definitely book again!", images: ["/placeholder.svg?height=60&width=60", "/placeholder.svg?height=60&width=60"], }, ], } return (

Service Details

{/* Image Gallery */}

{serviceData.images.map((image, index) => ( {`${serviceData.name}

))}

1/{serviceData.images.length}

{/* Service Info */}

{serviceData.name}

{serviceData.vendor}

{serviceData.rating} ({serviceData.reviewCount} reviews)

{serviceData.duration} At your home

About this service

{serviceData.description}

Services Reviews {serviceData.services.map((item, index) => (

{item.name}

{item.duration}

{item.price}

))} {serviceData.reviews.map((review, index) => (

{review.user}

{review.rating}

{review.date}

{review.comment}

{review.images && (

{review.images.map((image, imgIndex) => ( {`Review

))}

)}

))}

About the vendor

{serviceData.vendor}

Service Provider since 2020

{serviceData.rating} • {serviceData.reviewCount} reviews

Starting from

{serviceData.price}

) } [V0_FILE]typescriptreact:file="components/booking-flow.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import { ArrowLeft, Clock } from "lucide-react" import { Button } from "@/components/ui/button" import { ScrollArea } from "@/components/ui/scroll-area" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Badge } from "@/components/ui/badge" interface BookingFlowProps { service: any onComplete: () => void } export function BookingFlow({ service, onComplete }: BookingFlowProps) { const [step, setStep] = useState(1) const [selectedDate, setSelectedDate] = useState(null) const [selectedTime, setSelectedTime] = useState(null) const [selectedPayment, setSelectedPayment] = useState(null) // Mock data const serviceData = { id: 1, name: "Premium Home Cleaning", vendor: "CleanMaster Pro", price: "₹499", duration: "2 hours", image: "/placeholder.svg?height=60&width=60", } const dates = [ { date: "Today, 15 May", available: true }, { date: "Tomorrow, 16 May", available: true }, { date: "Wednesday, 17 May", available: true }, { date: "Thursday, 18 May", available: true }, { date: "Friday, 19 May", available: false }, { date: "Saturday, 20 May", available: true }, { date: "Sunday, 21 May", available: true }, ] const timeSlots = [ { time: "09:00 AM - 11:00 AM", available: true }, { time: "11:30 AM - 01:30 PM", available: true }, { time: "02:00 PM - 04:00 PM", available: false }, { time: "04:30 PM - 06:30 PM", available: true }, { time: "07:00 PM - 09:00 PM", available: true }, ] const paymentMethods = [ { id: "upi", name: "UPI", icon: "/placeholder.svg?height=24&width=24" }, { id: "card", name: "Credit/Debit Card", icon: "/placeholder.svg?height=24&width=24" }, { id: "wallet", name: "Paytm Wallet", icon: "/placeholder.svg?height=24&width=24" }, { id: "cod", name: "Cash on Delivery", icon: "/placeholder.svg?height=24&width=24" }, ] const handleNext = () => { if (step < 3) { setStep(step + 1) } else { onComplete() } } const handleBack = () => { if (step > 1) { setStep(step - 1) } } const renderStepContent = () => { switch (step) { case 1: return (

Select Date

{dates.map((date) => (

{date.date}

{!date.available && Unavailable} ))}

Select Time Slot

{timeSlots.map((slot) => (

{slot.time}

{!slot.available && Unavailable} ))}

) case 2: return (

Address Details

Full Address

</div>
                <div className="grid grid-cols-2 gap-3">
                  <div className="space-y-1">
                    <Label htmlFor="city">City</Label>
                    <Input id="city" placeholder="City" defaultValue="Noida" />
                  </div>
                  <div className="space-y-1">
                    <Label htmlFor="pincode">Pincode</Label>
                    <Input id="pincode" placeholder="Pincode" />
                  </div>
                </div>
                <div className="space-y-1">
                  <Label htmlFor="landmark">Landmark (Optional)</Label>
                  <Input id="landmark" placeholder="Nearby landmark" />
                </div>
              </div>
            </div>

<div>
              <h3 className="text-sm font-medium mb-3">Contact Details</h3>
              <div className="space-y-3">
                <div className="space-y-1">
                  <Label htmlFor="name">Full Name</Label>
                  <Input id="name" placeholder="Enter your name" />
                </div>
                <div className="space-y-1">
                  <Label htmlFor="phone">Phone Number</Label>
                  <Input id="phone" placeholder="Enter your phone number" defaultValue="+91 9876543210" />
                </div>
              </div>
            </div>
          </div>
        )
      case 3:
        return (
          <div className="space-y-6">
            <div>
              <h3 className="text-sm font-medium mb-3">Select Payment Method</h3>
              <RadioGroup value={selectedPayment || ""} onValueChange={setSelectedPayment}>
                <div className="space-y-2">
                  {paymentMethods.map((method) => (
                    <Label
                      key={method.id}
                      htmlFor={method.id}
                      className="flex items-center justify-between p-3 border rounded-lg"
                    >
                      <div className="flex items-center">
                        <RadioGroupItem value={method.id} id={method.id} />
                        <div className="ml-2 flex items-center">
                          <Image
                            src={method.icon || "/placeholder.svg"}
                            alt={method.name}
                            width={24}
                            height={24}
                            className="mr-2"
                          />
                          <span>{method.name}</span>
                        </div>
                      </div>
                    </Label>
                  ))}
                </div>
              </RadioGroup>
            </div>

<div className="border rounded-lg p-3 space-y-3">
              <h3 className="text-sm font-medium">Order Summary</h3>
              <div className="flex justify-between text-sm">
                <span>Service Charge</span>
                <span>{serviceData.price}</span>
              </div>
              <div className="flex justify-between text-sm">
                <span>Convenience Fee</span>
                <span>₹49</span>
              </div>
              <div className="flex justify-between text-sm">
                <span>GST (18%)</span>
                <span>₹98</span>
              </div>
              <div className="flex justify-between font-medium pt-2 border-t">
                <span>Total Amount</span>
                <span>₹646</span>
              </div>
            </div>
          </div>
        )
      default:
        return null
    }
  }

return (
    <div className="flex flex-col h-full">
      <div className="p-4 flex items-center border-b">
        <Button variant="ghost" size="icon" onClick={handleBack}>
          <ArrowLeft className="h-5 w-5" />
        </Button>
        <h1 className="text-lg font-semibold ml-2">Book Service</h1>
      </div>

<div className="p-4 flex items-center gap-3 border-b">
        <Image
          src={serviceData.image || "/placeholder.svg"}
          alt={serviceData.name}
          width={60}
          height={60}
          className="rounded-md object-cover"
        />
        <div className="flex-1">
          <h2 className="font-medium">{serviceData.name}</h2>
          <p className="text-sm text-muted-foreground">{serviceData.vendor}</p>
          <div className="flex items-center gap-2 mt-1">
            <Badge variant="outline" className="text-xs flex items-center gap-1">
              <Clock className="h-3 w-3" />
              {serviceData.duration}
            </Badge>
          </div>
        </div>
        <div className="font-medium">{serviceData.price}</div>
      </div>

<ScrollArea className="flex-1">
        <div className="p-4">{renderStepContent()}</div>
      </ScrollArea>

<div className="p-4 border-t flex items-center justify-between bg-background">
        <div>
          {step === 3 && (
            <>
              <p className="text-xs text-muted-foreground">Total Amount</p>
              <p className="text-xl font-bold">₹646</p>
            </>
          )}
        </div>
        <Button
          onClick={handleNext}
          disabled={(step === 1 && (!selectedDate || !selectedTime)) || (step === 3 && !selectedPayment)}
        >
          {step === 3 ? "Confirm & Pay" : "Continue"}
        </Button>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/user-profile.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { ArrowLeft, ChevronRight, Edit, Gift, LogOut, Settings, Share, User } from "lucide-react"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Progress } from "@/components/ui/progress"
import { Separator } from "@/components/ui/separator"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function UserProfile() {
  const [showEditDialog, setShowEditDialog] = useState(false)

// Mock user data
  const userData = {
    name: "Rahul Sharma",
    phone: "+91 9876543210",
    email: "rahul.sharma@example.com",
    loyaltyPoints: 350,
    nextReward: 500,
    bookingsCompleted: 12,
    memberSince: "May 2022",
  }

return (
    <div className="flex flex-col h-full">
      <div className="p-4 flex items-center border-b">
        <ArrowLeft className="h-5 w-5 mr-2" />
        <h1 className="text-lg font-semibold">My Profile</h1>
      </div>

<ScrollArea className="flex-1">
        <div className="p-4 space-y-6">
          {/* User Info */}
          <div className="flex items-center gap-4">
            <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center">
              <User className="h-8 w-8 text-primary" />
            </div>
            <div className="flex-1">
              <h2 className="font-bold text-lg">{userData.name}</h2>
              <p className="text-sm text-muted-foreground">{userData.phone}</p>
              <p className="text-sm text-muted-foreground">{userData.email}</p>
            </div>
            <Button size="icon" variant="ghost" onClick={() => setShowEditDialog(true)}>
              <Edit className="h-5 w-5" />
            </Button>
          </div>

{/* Loyalty Points */}
          <div className="bg-primary/10 rounded-lg p-4">
            <div className="flex justify-between items-center mb-2">
              <h3 className="font-medium">Loyalty Points</h3>
              <span className="text-lg font-bold">{userData.loyaltyPoints}</span>
            </div>
            <Progress value={(userData.loyaltyPoints / userData.nextReward) * 100} className="h-2 mb-2" />
            <p className="text-xs text-muted-foreground">
              {userData.nextReward - userData.loyaltyPoints} more points to unlock ₹100 discount
            </p>
          </div>

{/* Stats */}
          <div className="grid grid-cols-2 gap-4">
            <div className="border rounded-lg p-3 text-center">
              <p className="text-2xl font-bold">{userData.bookingsCompleted}</p>
              <p className="text-xs text-muted-foreground">Bookings Completed</p>
            </div>
            <div className="border rounded-lg p-3 text-center">
              <p className="text-2xl font-bold">{userData.memberSince}</p>
              <p className="text-xs text-muted-foreground">Member Since</p>
            </div>
          </div>

{/* Menu Items */}
          <div className="space-y-1">
            <Button variant="ghost" className="w-full justify-start" asChild>
              <div className="flex items-center">
                <Gift className="h-5 w-5 mr-3" />
                <span>Invite & Earn</span>
                <ChevronRight className="h-5 w-5 ml-auto" />
              </div>
            </Button>
            <Button variant="ghost" className="w-full justify-start" asChild>
              <div className="flex items-center">
                <Settings className="h-5 w-5 mr-3" />
                <span>Settings</span>
                <ChevronRight className="h-5 w-5 ml-auto" />
              </div>
            </Button>
            <Button variant="ghost" className="w-full justify-start" asChild>
              <div className="flex items-center">
                <Share className="h-5 w-5 mr-3" />
                <span>Share App</span>
                <ChevronRight className="h-5 w-5 ml-auto" />
              </div>
            </Button>
            <Button variant="ghost" className="w-full justify-start text-red-500" asChild>
              <div className="flex items-center">
                <LogOut className="h-5 w-5 mr-3" />
                <span>Logout</span>
              </div>
            </Button>
          </div>

<div className="text-center text-xs text-muted-foreground pt-4">
            <p>SevaSphere v1.0.0</p>
            <p className="mt-1">© 2023 SevaSphere. All rights reserved.</p>
          </div>
        </div>
      </ScrollArea>

<Dialog open={showEditDialog} onOpenChange={setShowEditDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Edit Profile</DialogTitle>
            <DialogDescription>Update your personal information</DialogDescription>
          </DialogHeader>

<div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input id="email" type="email" defaultValue={userData.email} />
            </div>

<div className="space-y-2">
              <Label htmlFor="phone">Phone Number</Label>
              <Input id="phone" defaultValue={userData.phone} disabled />
              <p className="text-xs text-muted-foreground">Phone number cannot be changed</p>
            </div>
          </div>

<DialogFooter>
            <Button type="submit">Save Changes</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/admin-panel.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Bell, FileText, Home, Package, Search, Star, Users } from "lucide-react"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export function AdminPanel() {
  const [activeTab, setActiveTab] = useState("dashboard")

// Mock data
  const pendingVendors = [
    {
      id: 1,
      name: "Rajesh Kumar",
      service: "Plumbing",
      location: "Noida, UP",
      status: "Pending",
      appliedDate: "2 days ago",
      image: "/placeholder.svg?height=40&width=40",
    },
    {
      id: 2,
      name: "Sunil Verma",
      service: "Electrician",
      location: "Delhi",
      status: "Pending",
      appliedDate: "3 days ago",
      image: "/placeholder.svg?height=40&width=40",
    },
    {
      id: 3,
      name: "Meena Sharma",
      service: "Salon",
      location: "Gurgaon, Haryana",
      status: "Pending",
      appliedDate: "1 week ago",
      image: "/placeholder.svg?height=40&width=40",
    },
  ]

const topServices = [
    { id: 1, name: "Home Cleaning", bookings: 245, growth: "+12%" },
    { id: 2, name: "AC Repair", bookings: 187, growth: "+8%" },
    { id: 3, name: "Plumbing", bookings: 156, growth: "+5%" },
    { id: 4, name: "Salon at Home", bookings: 134, growth: "+15%" },
    { id: 5, name: "Electrician", bookings: 112, growth: "-3%" },
  ]

const regionData = [
    { id: 1, name: "Noida", vendors: 120, users: 3450, bookings: 1245 },
    { id: 2, name: "Delhi", vendors: 210, users: 5670, bookings: 2340 },
    { id: 3, name: "Gurgaon", vendors: 95, users: 2890, bookings: 980 },
    { id: 4, name: "Ghaziabad", vendors: 65, users: 1780, bookings: 720 },
  ]

const renderContent = () => {
    switch (activeTab) {
      case "dashboard":
        return (
          <div className="space-y-6">
            {/* Regional Overview */}
            <div>
              <h2 className="font-semibold mb-3">Regional Overview</h2>
              <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
                {regionData.map((region) => (
                  <Card key={region.id}>
                    <CardHeader className="p-3 pb-0">
                      <CardTitle className="text-sm font-medium">{region.name}</CardTitle>
                    </CardHeader>
                    <CardContent className="p-3 pt-1">
                      <div className="text-2xl font-bold">{region.bookings}</div>
                      <p className="text-xs text-muted-foreground">Bookings this month</p>
                      <div className="grid grid-cols-2 gap-2 mt-2 text-xs">
                        <div>
                          <p className="text-muted-foreground">Vendors</p>
                          <p className="font-medium">{region.vendors}</p>
                        </div>
                        <div>
                          <p className="text-muted-foreground">Users</p>
                          <p className="font-medium">{region.users}</p>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>

{/* Pending Vendor Applications */}
            <div>
              <div className="flex justify-between items-center mb-3">
                <h2 className="font-semibold">Pending Vendor Applications</h2>
                <Button variant="link" size="sm" className="text-xs p-0">
                  View All
                </Button>
              </div>
              <div className="space-y-3">
                {pendingVendors.map((vendor) => (
                  <Card key={vendor.id} className="border shadow-sm">
                    <CardContent className="p-3">
                      <div className="flex items-center gap-3">
                        <Avatar>
                          <AvatarImage src={vendor.image} alt={vendor.name} />
                          <AvatarFallback>{vendor.name.charAt(0)}</AvatarFallback>
                        </Avatar>
                        <div className="flex-1">
                          <h3 className="font-medium text-sm">{vendor.name}</h3>
                          <p className="text-xs text-muted-foreground">
                            {vendor.service} • {vendor.location}
                          </p>
                          <div className="flex items-center gap-2 mt-1">
                            <Badge variant="outline" className="text-xs">
                              {vendor.status}
                            </Badge>
                            <span className="text-xs text-muted-foreground">{vendor.appliedDate}</span>
                          </div>
                        </div>
                        <div className="flex gap-1">
                          <Button size="sm" variant="outline">
                            Reject
                          </Button>
                          <Button size="sm">Approve</Button>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>

{/* Top Performing Services */}
            <div>
              <h2 className="font-semibold mb-3">Top Performing Services</h2>
              <Card>
                <CardContent className="p-3">
                  <div className="space-y-2">
                    {topServices.map((service) => (
                      <div key={service.id} className="flex items-center justify-between py-1">
                        <div className="flex items-center gap-2">
                          <div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center">
                            <span className="text-xs font-medium">{service.id}</span>
                          </div>
                          <span className="font-medium">{service.name}</span>
                        </div>
                        <div className="flex items-center gap-4">
                          <span className="text-sm">{service.bookings} bookings</span>
                          <Badge
                            variant={service.growth.startsWith("+") ? "default" : "destructive"}
                            className="text-xs"
                          >
                            {service.growth}
                          </Badge>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        )
      case "vendors":
        return (
          <div className="space-y-6">
            <div className="flex items-center gap-2">
              <div className="relative flex-1">
                <Search className="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
                <Input placeholder="Search vendors..." className="pl-9" />
              </div>
              <Select defaultValue="all">
                <SelectTrigger className="w-[180px]">
                  <SelectValue placeholder="Filter by status" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Vendors</SelectItem>
                  <SelectItem value="active">Active</SelectItem>
                  <SelectItem value="pending">Pending</SelectItem>
                  <SelectItem value="rejected">Rejected</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-3">
              {pendingVendors.map((vendor) => (
                <Card key={vendor.id} className="border shadow-sm">
                  <CardContent className="p-3">
                    <div className="flex items-center gap-3">
                      <Avatar>
                        <AvatarImage src={vendor.image} alt={vendor.name} />
                        <AvatarFallback>{vendor.name.charAt(0)}</AvatarFallback>
                      </Avatar>
                      <div className="flex-1">
                        <h3 className="font-medium text-sm">{vendor.name}</h3>
                        <p className="text-xs text-muted-foreground">
                          {vendor.service} • {vendor.location}
                        </p>
                        <div className="flex items-center gap-2 mt-1">
                          <Badge variant="outline" className="text-xs">
                            {vendor.status}
                          </Badge>
                          <span className="text-xs text-muted-foreground">{vendor.appliedDate}</span>
                        </div>
                      </div>
                      <Button size="sm" variant="outline">
                        View Details
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              ))}

<Card className="border shadow-sm">
                <CardContent className="p-3">
                  <div className="flex items-center gap-3">
                    <Avatar>
                      <AvatarImage src="/placeholder.svg?height=40&width=40" alt="Vendor" />
                      <AvatarFallback>AK</AvatarFallback>
                    </Avatar>
                    <div className="flex-1">
                      <h3 className="font-medium text-sm">Amit Kumar</h3>
                      <p className="text-xs text-muted-foreground">Home Cleaning • Noida, UP</p>
                      <div className="flex items-center gap-2 mt-1">
                        <Badge variant="default" className="text-xs">
                          Active
                        </Badge>
                        <div className="flex items-center">
                          <Star className="h-3 w-3 fill-yellow-400 text-yellow-400 mr-1" />
                          <span className="text-xs">4.8</span>
                        </div>
                      </div>
                    </div>
                    <Button size="sm" variant="outline">
                      View Details
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        )
      case "offers":
        return (
          <div className="space-y-6">
            <div className="flex justify-between items-center">
              <h2 className="font-semibold">Regional Offers</h2>
              <Button size="sm">Create Offer</Button>
            </div>

<div className="space-y-3">
              <Card className="border shadow-sm">
                <CardContent className="p-0">
                  <div className="relative h-[100px] bg-primary/10">
                    <div className="absolute inset-0 p-4 flex flex-col justify-between">
                      <Badge className="self-start">FIRST50</Badge>
                      <div>
                        <h3 className="font-bold text-lg">50% OFF on first booking</h3>
                        <p className="text-sm">Valid for all services in Delhi NCR</p>
                      </div>
                    </div>
                  </div>
                  <div className="p-3 flex justify-between items-center">
                    <div className="text-sm">
                      <p>
                        Valid till: <span className="font-medium">31 May 2023</span>
                      </p>
                      <p className="text-xs text-muted-foreground">245 users claimed</p>
                    </div>
                    <Button size="sm" variant="outline">
                      Edit
                    </Button>
                  </div>
                </CardContent>
              </Card>

<Card className="border shadow-sm">
                <CardContent className="p-0">
                  <div className="relative h-[100px] bg-primary/10">
                    <div className="absolute inset-0 p-4 flex flex-col justify-between">
                      <Badge className="self-start">PLUMB200</Badge>
                      <div>
                        <h3 className="font-bold text-lg">Flat ₹200 OFF on Plumbing</h3>
                        <p className="text-sm">Valid for Noida region only</p>
                      </div>
                    </div>
                  </div>
                  <div className="p-3 flex justify-between items-center">
                    <div className="text-sm">
                      <p>
                        Valid till: <span className="font-medium">15 June 2023</span>
                      </p>
                      <p className="text-xs text-muted-foreground">87 users claimed</p>
                    </div>
                    <Button size="sm" variant="outline">
                      Edit
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        )
      case "feedback":
        return (
          <div className="space-y-6">
            <h2 className="font-semibold">Feedback Management</h2>

<Tabs defaultValue="escalations">
              <TabsList className="grid w-full grid-cols-2">
                <TabsTrigger value="escalations">Escalations</TabsTrigger>
                <TabsTrigger value="complaints">Complaints</TabsTrigger>
              </TabsList>
              <TabsContent value="escalations" className="space-y-3 mt-3">
                <Card className="border shadow-sm">
                  <CardContent className="p-3">
                    <div className="flex justify-between mb-1">
                      <div className="flex items-center gap-2">
                        <Badge variant="destructive" className="text-xs">
                          High Priority
                        </Badge>
                        <h3 className="font-medium text-sm">Service Quality Issue</h3>
                      </div>
                      <span className="text-xs text-muted-foreground">2 days ago</span>
                    </div>
                    <p className="text-xs text-muted-foreground mb-2">Rahul Sharma • Home Cleaning • Noida</p>
                    <p className="text-sm mb-2">The cleaner did not clean the bathroom properly and left early.</p>
                    <div className="flex justify-between items-center">
                      <Badge variant="outline" className="text-xs">
                        Assigned to Supervisor
                      </Badge>
                      <Button size="sm">Resolve</Button>
                    </div>
                  </CardContent>
                </Card>

<Card className="border shadow-sm">
                  <CardContent className="p-3">
                    <div className="flex justify-between mb-1">
                      <div className="flex items-center gap-2">
                        <Badge variant="destructive" className="text-xs">
                          High Priority
                        </Badge>
                        <h3 className="font-medium text-sm">Payment Dispute</h3>
                      </div>
                      <span className="text-xs text-muted-foreground">3 days ago</span>
                    </div>
                    <p className="text-xs text-muted-foreground mb-2">Priya Mehta • AC Repair • Delhi</p>
                    <p className="text-sm mb-2">Customer claims they were charged for parts that weren't replaced.</p>
                    <div className="flex justify-between items-center">
                      <Badge variant="outline" className="text-xs">
                        Under Investigation
                      </Badge>
                      <Button size="sm">Resolve</Button>
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>
              <TabsContent value="complaints" className="space-y-3 mt-3">
                <Card className="border shadow-sm">
                  <CardContent className="p-3">
                    <div className="flex justify-between mb-1">
                      <div className="flex items-center gap-2">
                        <Badge variant="secondary" className="text-xs">
                          Medium Priority
                        </Badge>
                        <h3 className="font-medium text-sm">Late Arrival</h3>
                      </div>
                      <span className="text-xs text-muted-foreground">1 week ago</span>
                    </div>
                    <p className="text-xs text-muted-foreground mb-2">Amit Kumar • Plumbing • Gurgaon</p>
                    <p className="text-sm mb-2">The plumber arrived 1 hour late without any prior notice.</p>
                    <div className="flex justify-between items-center">
                      <Badge variant="outline" className="text-xs">
                        Resolved
                      </Badge>
                      <Button size="sm" variant="outline">
                        View Details
                      </Button>
                    </div>
                  </CardContent>
                </Card>

return (
    <div className="flex h-screen w-full bg-background">
      <div className="w-64 border-r bg-muted/20 p-4 hidden md:block">
        <div className="flex items-center gap-2 mb-6">
          <div className="w-8 h-8 bg-primary rounded-md flex items-center justify-center">
            <span className="text-primary-foreground font-bold">SS</span>
          </div>
          <h1 className="font-bold text-xl">SevaSphere</h1>
        </div>

<div className="space-y-1">
          <Button
            variant={activeTab === "dashboard" ? "default" : "ghost"}
            className="w-full justify-start"
            onClick={() => setActiveTab("dashboard")}
          >
            <Home className="h-4 w-4 mr-2" />
            Dashboard
          </Button>
          <Button
            variant={activeTab === "vendors" ? "default" : "ghost"}
            className="w-full justify-start"
            onClick={() => setActiveTab("vendors")}
          >
            <Users className="h-4 w-4 mr-2" />
            Vendor Management
          </Button>
          <Button
            variant={activeTab === "offers" ? "default" : "ghost"}
            className="w-full justify-start"
            onClick={() => setActiveTab("offers")}
          >
            <Package className="h-4 w-4 mr-2" />
            Regional Offers
          </Button>
          <Button
            variant={activeTab === "feedback" ? "default" : "ghost"}
            className="w-full justify-start"
            onClick={() => setActiveTab("feedback")}
          >
            <FileText className="h-4 w-4 mr-2" />
            Feedback Management
          </Button>
        </div>
      </div>

<div className="flex-1 flex flex-col">
        <div className="p-4 border-b flex items-center justify-between">
          <div className="md:hidden">
            <Button variant="outline" size="icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="lucide lucide-menu"
              >
                <line x1="4" x2="20" y1="12" y2="12" />
                <line x1="4" x2="20" y1="6" y2="6" />
                <line x1="4" x2="20" y1="18" y2="18" />
              </svg>
            </Button>
          </div>
          <div className="md:flex items-center gap-2 hidden">
            <h1 className="font-semibold text-lg">Admin Panel</h1>
            <Badge>Noida Region</Badge>
          </div>
          <div className="flex items-center gap-2">
            <Button size="icon" variant="ghost">
              <Bell className="h-5 w-5" />
            </Button>
            <Avatar>
              <AvatarImage src="/placeholder.svg?height=32&width=32" alt="Admin" />
              <AvatarFallback>AD</AvatarFallback>
            </Avatar>
          </div>
        </div>

<ScrollArea className="flex-1">
          <div className="p-4">{renderContent()}</div>
        </ScrollArea>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/superadmin-panel.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { BarChart2, Bell, FileText, Globe, Languages, Package, Plus, User, Users } from "lucide-react"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

export function SuperadminPanel() {
  const [activeTab, setActiveTab] = useState("dashboard")

// Mock data
  const regionData = [
    { id: 1, name: "Delhi NCR", vendors: 490, users: 12450, bookings: 4580, growth: "+12%" },
    { id: 2, name: "Mumbai", vendors: 380, users: 9870, bookings: 3240, growth: "+8%" },
    { id: 3, name: "Bangalore", vendors: 320, users: 8450, bookings: 2980, growth: "+15%" },
    { id: 4, name: "Hyderabad", vendors: 210, users: 5670, bookings: 1840, growth: "+5%" },
  ]

const admins = [
    {
      id: 1,
      name: "Vikram Singh",
      region: "Delhi NCR",
      email: "vikram.s@sevasphere.com",
      status: "Active",
      image: "/placeholder.svg?height=40&width=40",
    },
    {
      id: 2,
      name: "Priya Sharma",
      region: "Mumbai",
      email: "priya.s@sevasphere.com",
      status: "Active",
      image: "/placeholder.svg?height=40&width=40",
    },
    {
      id: 3,
      name: "Rahul Mehta",
      region: "Bangalore",
      email: "rahul.m@sevasphere.com",
      status: "Active",
      image: "/placeholder.svg?height=40&width=40",
    },
  ]

const serviceCategories = [
    { id: 1, name: "Home Cleaning", services: 5, vendors: 120 },
    { id: 2, name: "Plumbing", services: 8, vendors: 95 },
    { id: 3, name: "Electrician", services: 6, vendors: 87 },
    { id: 4, name: "Salon at Home", services: 12, vendors: 76 },
    { id: 5, name: "Appliance Repair", services: 10, vendors: 68 },
  ]

const languages = [
    { id: 1, name: "English", status: "Active", translationComplete: "100%" },
    { id: 2, name: "Hindi", status: "Active", translationComplete: "100%" },
    { id: 3, name: "Marathi", status: "Active", translationComplete: "85%" },
    { id: 4, name: "Tamil", status: "In Progress", translationComplete: "60%" },
    { id: 5, name: "Telugu", status: "In Progress", translationComplete: "45%" },
  ]

const renderContent = () => {
    switch (activeTab) {
      case "dashboard":
        return (
          <div className="space-y-6">
            {/* Platform Overview */}
            <div>
              <h2 className="font-semibold mb-3">Platform Overview</h2>
              <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
                <Card>
                  <CardHeader className="p-3 pb-0">
                    <CardTitle className="text-sm font-medium text-muted-foreground">Total Users</CardTitle>
                  </CardHeader>
                  <CardContent className="p-3 pt-1">
                    <div className="text-2xl font-bold">36,450</div>
                    <Badge className="mt-1">+8.5% this month</Badge>
                  </CardContent>
                </Card>
                <Card>
                  <CardHeader className="p-3 pb-0">
                    <CardTitle className="text-sm font-medium text-muted-foreground">Total Vendors</CardTitle>
                  </CardHeader>
                  <CardContent className="p-3 pt-1">
                    <div className="text-2xl font-bold">1,400</div>
                    <Badge className="mt-1">+5.2% this month</Badge>
                  </CardContent>
                </Card>
                <Card>
                  <CardHeader className="p-3 pb-0">
                    <CardTitle className="text-sm font-medium text-muted-foreground">Total Bookings</CardTitle>
                  </CardHeader>
                  <CardContent className="p-3 pt-1">
                    <div className="text-2xl font-bold">12,640</div>
                    <Badge className="mt-1">+12.3% this month</Badge>
                  </CardContent>
                </Card>
                <Card>
                  <CardHeader className="p-3 pb-0">
                    <CardTitle className="text-sm font-medium text-muted-foreground">Revenue</CardTitle>
                  </CardHeader>
                  <CardContent className="p-3 pt-1">
                    <div className="text-2xl font-bold">₹24.5L</div>
                    <Badge className="mt-1">+15.7% this month</Badge>
                  </CardContent>
                </Card>
              </div>
            </div>

{/* Regional Performance */}
            <div>
              <div className="flex justify-between items-center mb-3">
                <h2 className="font-semibold">Regional Performance</h2>
                <Button variant="link" size="sm" className="text-xs p-0">
                  View All
                </Button>
              </div>
              <div className="space-y-3">
                {regionData.map((region) => (
                  <Card key={region.id} className="border shadow-sm">
                    <CardContent className="p-3">
                      <div className="flex items-center justify-between">
                        <div>
                          <h3 className="font-medium">{region.name}</h3>
                          <div className="flex items-center gap-4 mt-1">
                            <div className="flex items-center gap-1">
                              <Users className="h-3 w-3 text-muted-foreground" />
                              <span className="text-xs">{region.vendors} vendors</span>
                            </div>
                            <div className="flex items-center gap-1">
                              <User className="h-3 w-3 text-muted-foreground" />
                              <span className="text-xs">{region.users} users</span>
                            </div>
                          </div>
                        </div>
                        <div className="text-right">
                          <div className="text-lg font-bold">{region.bookings}</div>
                          <Badge
                            variant={region.growth.startsWith("+") ? "default" : "destructive"}
                            className="text-xs"
                          >
                            {region.growth}
                          </Badge>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>

{/* Revenue Analytics */}
            <div>
              <h2 className="font-semibold mb-3">Revenue Analytics</h2>
              <Card>
                <CardContent className="p-3">
                  <div className="h-[200px] flex items-center justify-center">
                    <p className="text-muted-foreground">Revenue chart will be displayed here</p>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        )
      case "admins":
        return (
          <div className="space-y-6">
            <div className="flex justify-between items-center">
              <h2 className="font-semibold">Admin Management</h2>
              <Button size="sm">
                <Plus className="h-4 w-4 mr-2" />
                Add Admin
              </Button>
            </div>

<div className="space-y-3">
              {admins.map((admin) => (
                <Card key={admin.id} className="border shadow-sm">
                  <CardContent className="p-3">
                    <div className="flex items-center gap-3">
                      <Avatar>
                        <AvatarImage src={admin.image} alt={admin.name} />
                        <AvatarFallback>{admin.name.charAt(0)}</AvatarFallback>
                      </Avatar>
                      <div className="flex-1">
                        <h3 className="font-medium text-sm">{admin.name}</h3>
                        <p className="text-xs text-muted-foreground">{admin.email}</p>
                        <div className="flex items-center gap-2 mt-1">
                          <Badge variant="outline" className="text-xs">
                            {admin.region}
                          </Badge>
                          <Badge variant={admin.status === "Active" ? "default" : "secondary"} className="text-xs">
                            {admin.status}
                          </Badge>
                        </div>
                      </div>
                      <div className="flex gap-1">
                        <Button size="sm" variant="outline">
                          Edit
                        </Button>
                        <Button size="sm" variant="outline" className="text-red-500">
                          Remove
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        )
      case "categories":
        return (
          <div className="space-y-6">
            <div className="flex justify-between items-center">
              <h2 className="font-semibold">Service Category Management</h2>
              <Button size="sm">
                <Plus className="h-4 w-4 mr-2" />
                Add Category
              </Button>
            </div>

<div className="space-y-3">
              {serviceCategories.map((category) => (
                <Card key={category.id} className="border shadow-sm">
                  <CardContent className="p-3">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center">
                        <span className="text-primary font-medium">{category.id}</span>
                      </div>
                      <div className="flex-1">
                        <h3 className="font-medium">{category.name}</h3>
                        <div className="flex items-center gap-4 mt-1">
                          <span className="text-xs text-muted-foreground">{category.services} services</span>
                          <span className="text-xs text-muted-foreground">{category.vendors} vendors</span>
                        </div>
                      </div>
                      <div className="flex gap-1">
                        <Button size="sm" variant="outline">
                          Edit
                        </Button>
                        <Button size="sm" variant="outline">
                          View Services
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        )
      case "qualifications":
        return (
          <div className="space-y-6">
            <h2 className="font-semibold">Qualification Rules</h2>

<div className="space-y-4">
              <Card>
                <CardHeader className="p-4 pb-2">
                  <CardTitle className="text-lg">Vendor Qualification Criteria</CardTitle>
                  <CardDescription>Set global qualification criteria for all vendors</CardDescription>
                </CardHeader>
                <CardContent className="p-4 pt-0 space-y-4">
                  <div className="space-y-2">
                    <h3 className="text-sm font-medium">Document Requirements</h3>
                    <div className="flex items-center justify-between p-2 border rounded-md">
                      <span>ID Proof (Aadhaar/PAN/Voter ID)</span>
                      <Badge>Required</Badge>
                    </div>
                    <div className="flex items-center justify-between p-2 border rounded-md">
                      <span>Address Proof</span>
                      <Badge>Required</Badge>
                    </div>
                    <div className="flex items-center justify-between p-2 border rounded-md">
                      <span>Professional Certificate</span>
                      <Badge variant="outline">Optional</Badge>
                    </div>
                    <div className="flex items-center justify-between p-2 border rounded-md">
                      <span>Introduction Video</span>
                      <Badge>Required</Badge>
                    </div>
                  </div>

<div className="space-y-2">
                    <h3 className="text-sm font-medium">Experience Requirements</h3>
                    <div className="flex items-center justify-between p-2 border rounded-md">
                      <span>Minimum Experience</span>
                      <span className="font-medium">1 Year</span>
                    </div>
                  </div>

<div className="space-y-2">
                    <h3 className="text-sm font-medium">Background Verification</h3>
                    <div className="flex items-center justify-between p-2 border rounded-md">
                      <span>Police Verification</span>
                      <Badge>Required</Badge>
                    </div>
                    <div className="flex items-center justify-between p-2 border rounded-md">
                      <span>Reference Check</span>
                      <Badge variant="outline">Optional</Badge>
                    </div>
                  </div>
                </CardContent>
                <CardFooter className="p-4 pt-0">
                  <Button>Update Criteria</Button>
                </CardFooter>
              </Card>
            </div>
          </div>
        )
      case "languages":
        return (
          <div className="space-y-6">
            <div className="flex justify-between items-center">
              <h2 className="font-semibold">Languages & Notifications</h2>
              <Button size="sm">
                <Plus className="h-4 w-4 mr-2" />
                Add Language
              </Button>
            </div>

<div className="space-y-3">
              {languages.map((language) => (
                <Card key={language.id} className="border shadow-sm">
                  <CardContent className="p-3">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center">
                        <Globe className="h-5 w-5 text-primary" />
                      </div>
                      <div className="flex-1">
                        <h3 className="font-medium">{language.name}</h3>
                        <div className="flex items-center gap-2 mt-1">
                          <Badge variant={language.status === "Active" ? "default" : "secondary"} className="text-xs">
                            {language.status}
                          </Badge>
                          <span className="text-xs text-muted-foreground">
                            Translation: {language.translationComplete}
                          </span>
                        </div>
                      </div>
                      <div className="flex gap-1">
                        <Button size="sm" variant="outline">
                          Edit
                        </Button>
                        <Button size="sm" variant="outline">
                          Manage
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>

<div className="pt-4">
              <h2 className="font-semibold mb-3">Global Notifications</h2>
              <Card>
                <CardContent className="p-4 space-y-4">
                  <div className="flex items-center justify-between p-2 border rounded-md">
                    <div>
                      <h3 className="font-medium">App Update Notification</h3>
                      <p className="text-xs text-muted-foreground">Notify users about new app version</p>
                    </div>
                    <Button size="sm">Send</Button>
                  </div>
                  <div className="flex items-center justify-between p-2 border rounded-md">
                    <div>
                      <h3 className="font-medium">Promotional Notification</h3>
                      <p className="text-xs text-muted-foreground">Send offers and promotions to all users</p>
                    </div>
                    <Button size="sm">Send</Button>
                  </div>
                  <div className="flex items-center justify-between p-2 border rounded-md">
                    <div>
                      <h3 className="font-medium">Service Announcement</h3>
                      <p className="text-xs text-muted-foreground">Notify about new service categories</p>
                    </div>
                    <Button size="sm">Send</Button>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        )
      default:
        return null
    }
  }

<div className="space-y-1">
          <Button
            variant={activeTab === "dashboard" ? "default" : "ghost"}
            className="w-full justify-start"
            onClick={() => setActiveTab("dashboard")}
          >
            <BarChart2 className="h-4 w-4 mr-2" />
            Global Dashboard
          </Button>
          <Button
            variant={activeTab === "admins" ? "default" : "ghost"}
            className="w-full justify-start"
            onClick={() => setActiveTab("admins")}
          >
            <Users className="h-4 w-4 mr-2" />
            Admin Management
          </Button>
          <Button
            variant={activeTab === "categories" ? "default" : "ghost"}
            className="w-full justify-start"
            onClick={() => setActiveTab("categories")}
          >
            <Package className="h-4 w-4 mr-2" />
            Service Categories
          </Button>
          <Button
            variant={activeTab === "qualifications" ? "default" : "ghost"}
            className="w-full justify-start"
            onClick={() => setActiveTab("qualifications")}
          >
            <FileText className="h-4 w-4 mr-2" />
            Qualification Rules
          </Button>
          <Button
            variant={activeTab === "languages" ? "default" : "ghost"}
            className="w-full justify-start"
            onClick={() => setActiveTab("languages")}
          >
            <Languages className="h-4 w-4 mr-2" />
            Languages & Notifications
          </Button>
        </div>
      </div>

<div className="flex-1 flex flex-col">
        <div className="p-4 border-b flex items-center justify-between">
          <div className="md:hidden">
            <Button variant="outline" size="icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="lucide lucide-menu"
              >
                <line x1="4" x2="20" y1="12" y2="12" />
                <line x1="4" x2="20" y1="6" y2="6" />
                <line x1="4" x2="20" y1="18" y2="18" />
              </svg>
            </Button>
          </div>
          <div className="md:flex items-center gap-2 hidden">
            <h1 className="font-semibold text-lg">Superadmin Panel</h1>
            <Badge variant="secondary">Global Access</Badge>
          </div>
          <div className="flex items-center gap-2">
            <Button size="icon" variant="ghost">
              <Bell className="h-5 w-5" />
            </Button>
            <Avatar>
              <AvatarImage src="/placeholder.svg?height=32&width=32" alt="Superadmin" />
              <AvatarFallback>SA</AvatarFallback>
            </Avatar>
          </div>
        </div>

<ScrollArea className="flex-1">
          <div className="p-4">{renderContent()}</div>
        </ScrollArea>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/vendor-dashboard.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import {
  Calendar,
  Clock,
  Edit,
  MessageCircle,
  Phone,
  Settings,
  Star,
  Package,
  Clipboard,
  CreditCard,
  BarChart2,
  Bell,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

export function VendorDashboard() {
  const [activeTab, setActiveTab] = useState("dashboard")

// Mock data
  const todayBookings = [
    {
      id: 1,
      service: "Premium Home Cleaning",
      customer: "Rahul Sharma",
      time: "11:30 AM - 01:30 PM",
      status: "Confirmed",
      address: "123 Main Street, Sector 62, Noida",
      image: "/placeholder.svg?height=40&width=40",
    },
    {
      id: 2,
      service: "Basic Home Cleaning",
      customer: "Priya Mehta",
      time: "03:00 PM - 04:30 PM",
      status: "Pending",
      address: "456 Park Avenue, Sector 18, Noida",
      image: "/placeholder.svg?height=40&width=40",
    },
  ]

const revenueData = {
    today: "₹1,499",
    week: "₹8,745",
    month: "₹32,450",
    pendingPayouts: "₹4,250",
  }

const feedbackHighlights = [
    {
      id: 1,
      customer: "Amit Kumar",
      service: "Deep Home Cleaning",
      rating: 5,
      comment: "Excellent service! Very professional and thorough cleaning.",
      date: "2 days ago",
    },
    {
      id: 2,
      customer: "Neha Singh",
      service: "Premium Home Cleaning",
      rating: 4,
      comment: "Good service, but arrived a bit late. Otherwise very satisfied with the cleaning.",
      date: "1 week ago",
    },
  ]

const services = [
    { id: 1, name: "Basic Home Cleaning", price: "₹349", status: "Active" },
    { id: 2, name: "Premium Home Cleaning", price: "₹499", status: "Active" },
    { id: 3, name: "Deep Home Cleaning", price: "₹799", status: "Active" },
    { id: 4, name: "Kitchen Cleaning", price: "₹399", status: "Inactive" },
    { id: 5, name: "Bathroom Deep Clean", price: "₹599", status: "Active" },
  ]

const renderContent = () => {
    switch (activeTab) {
      case "dashboard":
        return (
          <div className="space-y-6">
            {/* Today's Bookings */}
            <div>
              <div className="flex justify-between items-center mb-3">
                <h2 className="font-semibold">Today's Bookings</h2>
                <Button variant="link" size="sm" className="text-xs p-0">
                  View All
                </Button>
              </div>
              <div className="space-y-3">
                {todayBookings.map((booking) => (
                  <Card key={booking.id} className="border shadow-sm">
                    <CardContent className="p-3">
                      <div className="flex items-center gap-3">
                        <Avatar>
                          <AvatarImage src={booking.image} alt={booking.customer} />
                          <AvatarFallback>{booking.customer.charAt(0)}</AvatarFallback>
                        </Avatar>
                        <div className="flex-1">
                          <h3 className="font-medium text-sm">{booking.service}</h3>
                          <p className="text-xs text-muted-foreground">{booking.customer}</p>
                          <div className="flex items-center gap-2 mt-1">
                            <Badge variant={booking.status === "Confirmed" ? "default" : "outline"} className="text-xs">
                              {booking.status}
                            </Badge>
                          </div>
                        </div>
                        <div className="text-right">
                          <div className="flex items-center text-xs">
                            <Clock className="h-3 w-3 mr-1 text-muted-foreground" />
                            <span>{booking.time}</span>
                          </div>
                          <div className="flex mt-2 gap-1">
                            <Button size="icon" variant="outline" className="h-7 w-7">
                              <Phone className="h-3 w-3" />
                            </Button>
                            <Button size="icon" variant="outline" className="h-7 w-7">
                              <MessageCircle className="h-3 w-3" />
                            </Button>
                          </div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>

{/* Revenue Snapshot */}
            <div>
              <h2 className="font-semibold mb-3">Revenue Snapshot</h2>
              <div className="grid grid-cols-2 gap-3">
                <Card>
                  <CardHeader className="p-3 pb-0">
                    <CardTitle className="text-sm font-medium text-muted-foreground">Today's Earnings</CardTitle>
                  </CardHeader>
                  <CardContent className="p-3 pt-1">
                    <div className="text-2xl font-bold">{revenueData.today}</div>
                    <p className="text-xs text-muted-foreground">From 3 bookings</p>
                  </CardContent>
                </Card>
                <Card>
                  <CardHeader className="p-3 pb-0">
                    <CardTitle className="text-sm font-medium text-muted-foreground">This Week</CardTitle>
                  </CardHeader>
                  <CardContent className="p-3 pt-1">
                    <div className="text-2xl font-bold">{revenueData.week}</div>
                    <p className="text-xs text-muted-foreground">From 15 bookings</p>
                  </CardContent>
                </Card>
                <Card>
                  <CardHeader className="p-3 pb-0">
                    <CardTitle className="text-sm font-medium text-muted-foreground">This Month</CardTitle>
                  </CardHeader>
                  <CardContent className="p-3 pt-1">
                    <div className="text-2xl font-bold">{revenueData.month}</div>
                    <p className="text-xs text-muted-foreground">From 52 bookings</p>
                  </CardContent>
                </Card>
                <Card>
                  <CardHeader className="p-3 pb-0">
                    <CardTitle className="text-sm font-medium text-muted-foreground">Pending Payouts</CardTitle>
                  </CardHeader>
                  <CardContent className="p-3 pt-1">
                    <div className="text-2xl font-bold">{revenueData.pendingPayouts}</div>
                    <Button size="sm" variant="outline" className="mt-1 text-xs">
                      Withdraw
                    </Button>
                  </CardContent>
                </Card>
              </div>
            </div>

{/* Feedback Highlights */}
            <div>
              <div className="flex justify-between items-center mb-3">
                <h2 className="font-semibold">Feedback Highlights</h2>
                <Button variant="link" size="sm" className="text-xs p-0">
                  View All
                </Button>
              </div>
              <div className="space-y-3">
                {feedbackHighlights.map((feedback) => (
                  <Card key={feedback.id} className="border shadow-sm">
                    <CardContent className="p-3">
                      <div className="flex justify-between mb-1">
                        <h3 className="font-medium text-sm">{feedback.customer}</h3>
                        <div className="flex items-center">
                          <Star className="h-3 w-3 fill-yellow-400 text-yellow-400 mr-1" />
                          <span className="text-xs">{feedback.rating}</span>
                        </div>
                      </div>
                      <p className="text-xs text-muted-foreground mb-2">
                        {feedback.service} • {feedback.date}
                      </p>
                      <p className="text-sm">{feedback.comment}</p>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>
          </div>
        )
      case "services":
        return (
          <div className="space-y-6">
            <div className="flex justify-between items-center">
              <h2 className="font-semibold">Service Management</h2>
              <Button size="sm">Add Service</Button>
            </div>

<div className="space-y-3">
              {services.map((service) => (
                <Card key={service.id} className="border shadow-sm">
                  <CardContent className="p-3 flex justify-between items-center">
                    <div>
                      <h3 className="font-medium">{service.name}</h3>
                      <p className="text-sm font-medium">{service.price}</p>
                    </div>
                    <div className="flex items-center gap-2">
                      <Badge variant={service.status === "Active" ? "default" : "secondary"} className="text-xs">
                        {service.status}
                      </Badge>
                      <Button size="icon" variant="ghost">
                        <Edit className="h-4 w-4" />
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        )
      case "calendar":
        return (
          <div className="space-y-6">
            <h2 className="font-semibold">Calendar & Availability</h2>
            <div className="border rounded-lg p-4">
              <div className="grid grid-cols-7 gap-1 text-center mb-2">
                {["S", "M", "T", "W", "T", "F", "S"].map((day, i) => (
                  <div key={i} className="text-xs font-medium text-muted-foreground">
                    {day}
                  </div>
                ))}
              </div>
              <div className="grid grid-cols-7 gap-1">
                {Array.from({ length: 31 }, (_, i) => (
                  <div
                    key={i}
                    className={`aspect-square flex items-center justify-center text-sm rounded-md ${
                      i === 14 ? "bg-primary text-primary-foreground" : i % 7 === 0 || i % 7 === 6 ? "bg-muted" : ""
                    }`}
                  >
                    {i + 1}
                  </div>
                ))}
              </div>
            </div>

<div>
              <h3 className="text-sm font-medium mb-3">Set Your Working Hours</h3>
              <div className="space-y-2">
                {["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"].map((day) => (
                  <div key={day} className="flex justify-between items-center p-3 border rounded-lg">
                    <span>{day}</span>
                    <div className="flex items-center gap-2">
                      <Badge variant={day === "Sunday" ? "secondary" : "outline"} className="text-xs">
                        {day === "Sunday" ? "Off Day" : "09:00 AM - 07:00 PM"}
                      </Badge>
                      <Button size="icon" variant="ghost">
                        <Edit className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )
      case "orders":
        return (
          <div className="space-y-6">
            <h2 className="font-semibold">Order Management</h2>

<Tabs defaultValue="upcoming">
              <TabsList className="grid w-full grid-cols-3">
                <TabsTrigger value="upcoming">Upcoming</TabsTrigger>
                <TabsTrigger value="ongoing">Ongoing</TabsTrigger>
                <TabsTrigger value="completed">Completed</TabsTrigger>
              </TabsList>
              <TabsContent value="upcoming" className="space-y-3 mt-3">
                {todayBookings.map((booking) => (
                  <Card key={booking.id} className="border shadow-sm">
                    <CardContent className="p-3">
                      <div className="flex items-center gap-3">
                        <Avatar>
                          <AvatarImage src={booking.image} alt={booking.customer} />
                          <AvatarFallback>{booking.customer.charAt(0)}</AvatarFallback>
                        </Avatar>
                        <div className="flex-1">
                          <h3 className="font-medium text-sm">{booking.service}</h3>
                          <p className="text-xs text-muted-foreground">{booking.customer}</p>
                          <div className="flex items-center text-xs mt-1">
                            <Calendar className="h-3 w-3 mr-1 text-muted-foreground" />
                            <span>Today</span>
                            <span className="mx-1">•</span>
                            <Clock className="h-3 w-3 mr-1 text-muted-foreground" />
                            <span>{booking.time}</span>
                          </div>
                        </div>
                        <div className="flex gap-1">
                          <Button size="sm" variant="outline">
                            Reschedule
                          </Button>
                          <Button size="sm">Accept</Button>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </TabsContent>
              <TabsContent value="ongoing" className="space-y-3 mt-3">
                <div className="flex flex-col items-center justify-center py-8 text-center">
                  <Package className="h-12 w-12 text-muted-foreground mb-4" />
                  <h3 className="font-medium">No ongoing orders</h3>
                  <p className="text-sm text-muted-foreground mt-1">You don't have any ongoing orders at the moment</p>
                </div>
              </TabsContent>
              <TabsContent value="completed" className="space-y-3 mt-3">
                <Card className="border shadow-sm">
                  <CardContent className="p-3">
                    <div className="flex items-center gap-3">
                      <Avatar>
                        <AvatarImage src="/placeholder.svg?height=40&width=40" alt="Amit Kumar" />
                        <AvatarFallback>AK</AvatarFallback>
                      </Avatar>
                      <div className="flex-1">
                        <h3 className="font-medium text-sm">Deep Home Cleaning</h3>
                        <p className="text-xs text-muted-foreground">Amit Kumar</p>
                        <div className="flex items-center text-xs mt-1">
                          <Calendar className="h-3 w-3 mr-1 text-muted-foreground" />
                          <span>Yesterday</span>
                          <span className="mx-1">•</span>
                          <div className="flex items-center">
                            <Star className="h-3 w-3 fill-yellow-400 text-yellow-400 mr-1" />
                            <span>5.0</span>
                          </div>
                        </div>
                      </div>
                      <div>
                        <span className="font-medium">₹799</span>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>
            </Tabs>
          </div>
        )
      case "inventory":
        return (
          <div className="space-y-6">
            <div className="flex justify-between items-center">
              <h2 className="font-semibold">Product Inventory</h2>
              <Button size="sm">Add Product</Button>
            </div>

<div className="space-y-3">
              <Card className="border shadow-sm">
                <CardContent className="p-3 flex items-center gap-3">
                  <Image
                    src="/placeholder.svg?height=60&width=60"
                    alt="Cleaning Solution"
                    width={60}
                    height={60}
                    className="rounded-md object-cover"
                  />
                  <div className="flex-1">
                    <h3 className="font-medium">Eco-Friendly Cleaning Solution</h3>
                    <div className="flex justify-between items-center mt-1">
                      <p className="text-sm font-medium">₹299</p>
                      <Badge className="text-xs">In Stock: 15</Badge>
                    </div>
                  </div>
                  <Button size="icon" variant="ghost">
                    <Edit className="h-4 w-4" />
                  </Button>
                </CardContent>
              </Card>

<Card className="border shadow-sm">
                <CardContent className="p-3 flex items-center gap-3">
                  <Image
                    src="/placeholder.svg?height=60&width=60"
                    alt="Microfiber Cloth"
                    width={60}
                    height={60}
                    className="rounded-md object-cover"
                  />
                  <div className="flex-1">
                    <h3 className="font-medium">Microfiber Cleaning Cloth (Pack of 5)</h3>
                    <div className="flex justify-between items-center mt-1">
                      <p className="text-sm font-medium">₹199</p>
                      <Badge className="text-xs">In Stock: 8</Badge>
                    </div>
                  </div>
                  <Button size="icon" variant="ghost">
                    <Edit className="h-4 w-4" />
                  </Button>
                </CardContent>
              </Card>

<Card className="border shadow-sm">
                <CardContent className="p-3 flex items-center gap-3">
                  <Image
                    src="/placeholder.svg?height=60&width=60"
                    alt="Vacuum Cleaner"
                    width={60}
                    height={60}
                    className="rounded-md object-cover"
                  />
                  <div className="flex-1">
                    <h3 className="font-medium">Portable Vacuum Cleaner</h3>
                    <div className="flex justify-between items-center mt-1">
                      <p className="text-sm font-medium">₹1,499</p>
                      <Badge variant="secondary" className="text-xs">
                        Out of Stock
                      </Badge>
                    </div>
                  </div>
                  <Button size="icon" variant="ghost">
                    <Edit className="h-4 w-4" />
                  </Button>
                </CardContent>
              </Card>
            </div>
          </div>
        )
      case "feedback":
        return (
          <div className="space-y-6">
            <h2 className="font-semibold">Feedback & Ratings</h2>

<div className="bg-muted/30 rounded-lg p-4 flex items-center justify-between">
              <div>
                <h3 className="text-2xl font-bold">4.8</h3>
                <div className="flex items-center mt-1">
                  <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                  <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                  <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                  <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                  <Star className="h-4 w-4 fill-yellow-400 text-yellow-400 opacity-50" />
                </div>
                <p className="text-xs text-muted-foreground mt-1">Based on 56 reviews</p>
              </div>
              <div className="space-y-1">
                <div className="flex items-center gap-2">
                  <span className="text-xs w-2">5</span>
                  <Progress value={80} className="h-2 w-24" />
                  <span className="text-xs">80%</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-xs w-2">4</span>
                  <Progress value={15} className="h-2 w-24" />
                  <span className="text-xs">15%</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-xs w-2">3</span>
                  <Progress value={5} className="h-2 w-24" />
                  <span className="text-xs">5%</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-xs w-2">2</span>
                  <Progress value={0} className="h-2 w-24" />
                  <span className="text-xs">0%</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-xs w-2">1</span>
                  <Progress value={0} className="h-2 w-24" />
                  <span className="text-xs">0%</span>
                </div>
              </div>
            </div>

<div className="space-y-3">
              {feedbackHighlights.map((feedback) => (
                <Card key={feedback.id} className="border shadow-sm">
                  <CardContent className="p-3">
                    <div className="flex justify-between mb-1">
                      <h3 className="font-medium text-sm">{feedback.customer}</h3>
                      <div className="flex items-center">
                        <Star className="h-3 w-3 fill-yellow-400 text-yellow-400 mr-1" />
                        <span className="text-xs">{feedback.rating}</span>
                      </div>
                    </div>
                    <p className="text-xs text-muted-foreground mb-2">
                      {feedback.service} • {feedback.date}
                    </p>
                    <p className="text-sm">{feedback.comment}</p>
                    <div className="flex justify-end mt-2">
                      <Button variant="outline" size="sm">
                        Reply
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        )
      default:
        return null
    }
  }

return (
    <div className="flex flex-col h-[667px] w-[375px] mx-auto border rounded-xl overflow-hidden bg-background">
      <div className="p-4 flex items-center justify-between border-b">
        <div className="flex items-center">
          <h1 className="text-lg font-bold">Vendor Dashboard</h1>
        </div>
        <div className="flex items-center gap-2">
          <Button size="icon" variant="ghost">
            <Bell className="h-5 w-5" />
          </Button>
          <Avatar>
            <AvatarImage src="/placeholder.svg?height=32&width=32" alt="Vendor" />
            <AvatarFallback>VS</AvatarFallback>
          </Avatar>
        </div>
      </div>

<div className="flex-1 flex">
        <div className="w-16 border-r bg-muted/20 flex flex-col items-center py-4">
          <Button
            size="icon"
            variant={activeTab === "dashboard" ? "default" : "ghost"}
            className="mb-4"
            onClick={() => setActiveTab("dashboard")}
          >
            <BarChart2 className="h-5 w-5" />
          </Button>
          <Button
            size="icon"
            variant={activeTab === "services" ? "default" : "ghost"}
            className="mb-4"
            onClick={() => setActiveTab("services")}
          >
            <Clipboard className="h-5 w-5" />
          </Button>
          <Button
            size="icon"
            variant={activeTab === "calendar" ? "default" : "ghost"}
            className="mb-4"
            onClick={() => setActiveTab("calendar")}
          >
            <Calendar className="h-5 w-5" />
          </Button>
          <Button
            size="icon"
            variant={activeTab === "orders" ? "default" : "ghost"}
            className="mb-4"
            onClick={() => setActiveTab("orders")}
          >
            <CreditCard className="h-5 w-5" />
          </Button>
          <Button
            size="icon"
            variant={activeTab === "inventory" ? "default" : "ghost"}
            className="mb-4"
            onClick={() => setActiveTab("inventory")}
          >
            <Package className="h-5 w-5" />
          </Button>
          <Button
            size="icon"
            variant={activeTab === "feedback" ? "default" : "ghost"}
            className="mb-4"
            onClick={() => setActiveTab("feedback")}
          >
            <MessageCircle className="h-5 w-5" />
          </Button>
          <div className="mt-auto">
            <Button size="icon" variant="ghost" onClick={() => setActiveTab("settings")}>
              <Settings className="h-5 w-5" />
            </Button>
          </div>
        </div>

<ScrollArea className="flex-1">
          <div className="p-4">{renderContent()}</div>
        </ScrollArea>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/my-bookings.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import { ArrowLeft, Calendar, Clock, MapPin, MessageCircle, Phone, Star } from "lucide-react"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Textarea } from "@/components/ui/textarea"

export function MyBookings() {
  const [showFeedbackDialog, setShowFeedbackDialog] = useState(false)
  const [selectedBooking, setSelectedBooking] = useState<any>(null)

// Mock data
  const upcomingBookings = [
    {
      id: 1,
      service: "Premium Home Cleaning",
      vendor: "CleanMaster Pro",
      date: "Today, 15 May",
      time: "11:30 AM - 01:30 PM",
      status: "Confirmed",
      address: "123 Main Street, Sector 62, Noida",
      image: "/placeholder.svg?height=60&width=60",
    },
    {
      id: 2,
      service: "AC Service & Repair",
      vendor: "CoolTech Solutions",
      date: "Tomorrow, 16 May",
      time: "09:00 AM - 11:00 AM",
      status: "Pending",
      address: "456 Park Avenue, Sector 18, Noida",
      image: "/placeholder.svg?height=60&width=60",
    },
  ]

const pastBookings = [
    {
      id: 3,
      service: "Salon at Home",
      vendor: "GlamStyle",
      date: "10 May, 2023",
      time: "04:30 PM - 06:30 PM",
      status: "Completed",
      rating: 5,
      address: "123 Main Street, Sector 62, Noida",
      image: "/placeholder.svg?height=60&width=60",
    },
    {
      id: 4,
      service: "Plumbing Service",
      vendor: "FixIt Plumbers",
      date: "05 May, 2023",
      time: "02:00 PM - 03:00 PM",
      status: "Completed",
      rating: 4,
      address: "789 Lake View, Sector 50, Noida",
      image: "/placeholder.svg?height=60&width=60",
    },
    {
      id: 5,
      service: "Electrician Service",
      vendor: "PowerFix",
      date: "01 May, 2023",
      time: "10:00 AM - 11:30 AM",
      status: "Completed",
      rating: 4,
      address: "321 Green Park, Sector 41, Noida",
      image: "/placeholder.svg?height=60&width=60",
    },
  ]

const handleOpenFeedback = (booking: any) => {
    setSelectedBooking(booking)
    setShowFeedbackDialog(true)
  }

<Tabs defaultValue="upcoming" className="flex-1 flex flex-col">
        <TabsList className="grid w-full grid-cols-2">
          <TabsTrigger value="upcoming">Upcoming</TabsTrigger>
          <TabsTrigger value="past">Past</TabsTrigger>
        </TabsList>

<TabsContent value="upcoming" className="flex-1">
          <ScrollArea className="h-full">
            <div className="p-4 space-y-4">
              {upcomingBookings.map((booking) => (
                <div key={booking.id} className="border rounded-lg overflow-hidden">
                  <div className="p-3 flex gap-3">
                    <Image
                      src={booking.image || "/placeholder.svg"}
                      alt={booking.service}
                      width={60}
                      height={60}
                      className="rounded-md object-cover"
                    />
                    <div className="flex-1">
                      <h3 className="font-medium">{booking.service}</h3>
                      <p className="text-sm text-muted-foreground">{booking.vendor}</p>
                      <div className="flex items-center gap-2 mt-1">
                        <Badge variant={booking.status === "Confirmed" ? "default" : "outline"} className="text-xs">
                          {booking.status}
                        </Badge>
                      </div>
                    </div>
                  </div>

<div className="bg-muted/30 p-3 flex flex-col gap-2">
                    <div className="flex items-center text-sm">
                      <Calendar className="h-4 w-4 mr-2 text-muted-foreground" />
                      <span>{booking.date}</span>
                      <span className="mx-2">•</span>
                      <Clock className="h-4 w-4 mr-2 text-muted-foreground" />
                      <span>{booking.time}</span>
                    </div>
                    <div className="flex items-center text-sm">
                      <MapPin className="h-4 w-4 mr-2 text-muted-foreground" />
                      <span className="text-muted-foreground">{booking.address}</span>
                    </div>
                  </div>

<div className="p-3 flex justify-between">
                    <Button variant="outline" size="sm" className="gap-1">
                      <Phone className="h-4 w-4" />
                      <span>Call</span>
                    </Button>
                    <Button variant="outline" size="sm" className="gap-1">
                      <MessageCircle className="h-4 w-4" />
                      <span>Chat</span>
                    </Button>
                    <Button variant="outline" size="sm">
                      Reschedule
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          </ScrollArea>
        </TabsContent>

<TabsContent value="past" className="flex-1">
          <ScrollArea className="h-full">
            <div className="p-4 space-y-4">
              {pastBookings.map((booking) => (
                <div key={booking.id} className="border rounded-lg overflow-hidden">
                  <div className="p-3 flex gap-3">
                    <Image
                      src={booking.image || "/placeholder.svg"}
                      alt={booking.service}
                      width={60}
                      height={60}
                      className="rounded-md object-cover"
                    />
                    <div className="flex-1">
                      <h3 className="font-medium">{booking.service}</h3>
                      <p className="text-sm text-muted-foreground">{booking.vendor}</p>
                      <div className="flex items-center gap-2 mt-1">
                        <Badge variant="outline" className="text-xs">
                          {booking.status}
                        </Badge>
                        {booking.rating && (
                          <div className="flex items-center">
                            <Star className="h-3 w-3 fill-yellow-400 text-yellow-400 mr-1" />
                            <span className="text-xs">{booking.rating}</span>
                          </div>
                        )}
                      </div>
                    </div>
                  </div>

<div className="p-3 flex justify-between">
                    <Button variant="outline" size="sm">
                      Book Again
                    </Button>
                    {booking.rating ? (
                      <Button variant="outline" size="sm" onClick={() => handleOpenFeedback(booking)}>
                        View Feedback
                      </Button>
                    ) : (
                      <Button size="sm" onClick={() => handleOpenFeedback(booking)}>
                        Give Feedback
                      </Button>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </ScrollArea>
        </TabsContent>
      </Tabs>

<Dialog open={showFeedbackDialog} onOpenChange={setShowFeedbackDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Service Feedback</DialogTitle>
            <DialogDescription>
              {selectedBooking?.rating ? "Your feedback for this service" : "Share your experience with this service"}
            </DialogDescription>
          </DialogHeader>

{selectedBooking?.rating ? (
            <div className="space-y-4">
              <div className="flex items-center gap-1">
                {[1, 2, 3, 4, 5].map((star) => (
                  <Star
                    key={star}
                    className={`h-6 w-6 ${star <= (selectedBooking?.rating || 0) ? "fill-yellow-400 text-yellow-400" : "text-muted"}`}
                  />
                ))}
                <span className="ml-2">{selectedBooking?.rating}/5</span>
              </div>

<div className="border rounded-md p-3">
                <p className="text-sm">The service was excellent! The professional was on time and did a great job.</p>
              </div>

<div>
                <p className="text-sm font-medium mb-2">Add Photos (Optional)</p>
                <div className="flex gap-2">
                  <Button variant="outline" size="icon" className="h-20 w-20">
                    +
                  </Button>
                </div>
              </div>
            </div>
          )}

<DialogFooter>
            {!selectedBooking?.rating && (
              <Button type="submit" className="w-full">
                Submit Feedback
              </Button>
            )}
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/service-search.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import { ArrowLeft, Filter, MapPin, Mic, Search, Star } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent } from "@/components/ui/card"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Badge } from "@/components/ui/badge"
import { Slider } from "@/components/ui/slider"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"

interface ServiceSearchProps {
  onServiceSelect: (service: any) => void
}

export function ServiceSearch({ onServiceSelect }: ServiceSearchProps) {
  const [searchQuery, setSearchQuery] = useState("")
  const [priceRange, setPriceRange] = useState([0, 2000])

const services = [
    {
      id: 1,
      name: "Premium Home Cleaning",
      vendor: "CleanMaster Pro",
      rating: 4.8,
      price: "₹499",
      location: "2.5 km away",
      image: "/placeholder.svg?height=80&width=80",
    },
    {
      id: 2,
      name: "Basic Home Cleaning",
      vendor: "HomeSweep",
      rating: 4.5,
      price: "₹349",
      location: "3.1 km away",
      image: "/placeholder.svg?height=80&width=80",
    },
    {
      id: 3,
      name: "Deep Home Cleaning",
      vendor: "SparkleHome",
      rating: 4.7,
      price: "₹799",
      location: "1.8 km away",
      image: "/placeholder.svg?height=80&width=80",
    },
    {
      id: 4,
      name: "Kitchen Cleaning",
      vendor: "KitchenBright",
      rating: 4.6,
      price: "₹399",
      location: "4.2 km away",
      image: "/placeholder.svg?height=80&width=80",
    },
    {
      id: 5,
      name: "Bathroom Deep Clean",
      vendor: "CleanMaster Pro",
      rating: 4.9,
      price: "₹599",
      location: "2.5 km away",
      image: "/placeholder.svg?height=80&width=80",
    },
  ]

<div className="p-4 flex items-center gap-2 border-b">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Search for services..."
            className="pl-9 pr-12"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
          <Button size="icon" variant="ghost" className="absolute right-1 top-1">
            <Mic className="h-4 w-4" />
          </Button>
        </div>
        <Sheet>
          <SheetTrigger asChild>
            <Button size="icon" variant="outline">
              <Filter className="h-4 w-4" />
            </Button>
          </SheetTrigger>
          <SheetContent>
            <SheetHeader>
              <SheetTitle>Filter Services</SheetTitle>
            </SheetHeader>
            <div className="py-4 space-y-6">
              <div className="space-y-2">
                <h3 className="text-sm font-medium">Sort By</h3>
                <RadioGroup defaultValue="relevance">
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="relevance" id="relevance" />
                    <Label htmlFor="relevance">Relevance</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="rating" id="rating" />
                    <Label htmlFor="rating">Rating (High to Low)</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="price-low" id="price-low" />
                    <Label htmlFor="price-low">Price (Low to High)</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="price-high" id="price-high" />
                    <Label htmlFor="price-high">Price (High to Low)</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="distance" id="distance" />
                    <Label htmlFor="distance">Distance (Near to Far)</Label>
                  </div>
                </RadioGroup>
              </div>

<div className="space-y-2">
                <h3 className="text-sm font-medium">Price Range</h3>
                <div className="pt-4">
                  <Slider
                    defaultValue={[0, 2000]}
                    max={5000}
                    step={100}
                    onValueChange={(value) => setPriceRange(value as number[])}
                  />
                  <div className="flex justify-between mt-2">
                    <span className="text-xs">₹{priceRange[0]}</span>
                    <span className="text-xs">₹{priceRange[1]}</span>
                  </div>
                </div>
              </div>

<div className="space-y-2">
                <h3 className="text-sm font-medium">Rating</h3>
                <div className="space-y-1">
                  {[4, 3, 2, 1].map((rating) => (
                    <div key={rating} className="flex items-center space-x-2">
                      <Checkbox id={`rating-${rating}`} />
                      <Label htmlFor={`rating-${rating}`} className="flex items-center">
                        {rating}+ <Star className="h-3 w-3 ml-1 fill-yellow-400 text-yellow-400" />
                      </Label>
                    </div>
                  ))}
                </div>
              </div>

<div className="space-y-2">
                <h3 className="text-sm font-medium">Availability</h3>
                <div className="space-y-1">
                  <div className="flex items-center space-x-2">
                    <Checkbox id="available-now" />
                    <Label htmlFor="available-now">Available Now</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Checkbox id="available-today" />
                    <Label htmlFor="available-today">Available Today</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Checkbox id="available-tomorrow" />
                    <Label htmlFor="available-tomorrow">Available Tomorrow</Label>
                  </div>
                </div>
              </div>

<div className="flex gap-2 pt-4">
                <Button variant="outline" className="flex-1">
                  Reset
                </Button>
                <Button className="flex-1">Apply Filters</Button>
              </div>
            </div>
          </SheetContent>
        </Sheet>
      </div>

<ScrollArea className="flex-1">
        <div className="p-4 space-y-4">
          {services.map((service) => (
            <Card key={service.id} className="border shadow-sm" onClick={() => onServiceSelect(service)}>
              <CardContent className="p-3 flex gap-3">
                <Image
                  src={service.image || "/placeholder.svg"}
                  alt={service.name}
                  width={80}
                  height={80}
                  className="rounded-md object-cover"
                />
                <div className="flex-1">
                  <h3 className="font-medium text-sm">{service.name}</h3>
                  <p className="text-xs text-muted-foreground">{service.vendor}</p>
                  <div className="flex items-center mt-1">
                    <Star className="h-3 w-3 fill-yellow-400 text-yellow-400 mr-1" />
                    <span className="text-xs">{service.rating}</span>
                  </div>
                  <div className="flex items-center mt-1 text-xs text-muted-foreground">
                    <MapPin className="h-3 w-3 mr-1" />
                    <span>{service.location}</span>
                  </div>
                </div>
                <div className="flex flex-col items-end justify-between">
                  <span className="font-medium">{service.price}</span>
                  <Badge variant="outline" className="text-xs">
                    Available Today
                  </Badge>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </ScrollArea>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/vendor-registration.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { ArrowLeft, Camera, Check, Upload } from "lucide-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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"

export function VendorRegistration() {
  const [step, setStep] = useState(1)

const handleNext = () => {
    if (step < 4) {
      setStep(step + 1)
    }
  }

const handleBack = () => {
    if (step > 1) {
      setStep(step - 1)
    }
  }

const renderStepContent = () => {
    switch (step) {
      case 1:
        return (
          <div className="space-y-6">
            <h2 className="text-xl font-bold">Basic Details</h2>
            <p className="text-sm text-muted-foreground">Let's start with your personal information</p>

<div className="space-y-2">
                <Label htmlFor="phone">Phone Number</Label>
                <Input id="phone" placeholder="Enter your phone number" defaultValue="+91 " />
              </div>

<div className="space-y-2">
                <Label htmlFor="email">Email Address</Label>
                <Input id="email" type="email" placeholder="Enter your email address" />
              </div>

<div className="space-y-2">
                <Label htmlFor="address">Address</Label>
                <Textarea id="address" placeholder="Enter your full address" />
              </div>

<div className="grid grid-cols-2 gap-3">
                <div className="space-y-2">
                  <Label htmlFor="city">City</Label>
                  <Select defaultValue="noida">
                    <SelectTrigger id="city">
                      <SelectValue placeholder="Select city" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="noida">Noida</SelectItem>
                      <SelectItem value="delhi">Delhi</SelectItem>
                      <SelectItem value="gurgaon">Gurgaon</SelectItem>
                      <SelectItem value="ghaziabad">Ghaziabad</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="pincode">Pincode</Label>
                  <Input id="pincode" placeholder="Enter pincode" />
                </div>
              </div>
            </div>
          </div>
        )
      case 2:
        return (
          <div className="space-y-6">
            <h2 className="text-xl font-bold">Service Selection</h2>
            <p className="text-sm text-muted-foreground">Select the services you want to offer</p>

<div className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="category">Service Category</Label>
                <Select>
                  <SelectTrigger id="category">
                    <SelectValue placeholder="Select category" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="cleaning">Home Cleaning</SelectItem>
                    <SelectItem value="plumbing">Plumbing</SelectItem>
                    <SelectItem value="electrical">Electrical</SelectItem>
                    <SelectItem value="salon">Salon</SelectItem>
                    <SelectItem value="appliance">Appliance Repair</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label>Select Services</Label>
                <div className="space-y-2 border rounded-lg p-3">
                  <div className="flex items-center space-x-2">
                    <Checkbox id="service-1" />
                    <Label htmlFor="service-1">Basic Home Cleaning (₹349)</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Checkbox id="service-2" />
                    <Label htmlFor="service-2">Premium Home Cleaning (₹499)</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Checkbox id="service-3" />
                    <Label htmlFor="service-3">Deep Home Cleaning (₹799)</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Checkbox id="service-4" />
                    <Label htmlFor="service-4">Kitchen Cleaning (₹399)</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Checkbox id="service-5" />
                    <Label htmlFor="service-5">Bathroom Deep Clean (₹599)</Label>
                  </div>
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="experience">Years of Experience</Label>
                <Select>
                  <SelectTrigger id="experience">
                    <SelectValue placeholder="Select experience" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="0-1">Less than 1 year</SelectItem>
                    <SelectItem value="1-3">1-3 years</SelectItem>
                    <SelectItem value="3-5">3-5 years</SelectItem>
                    <SelectItem value="5+">More than 5 years</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="availability">Availability</Label>
                <div className="grid grid-cols-3 gap-2">
                  {["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].map((day) => (
                    <div key={day} className="flex items-center space-x-2 border rounded-md p-2">
                      <Checkbox id={`day-${day}`} />
                      <Label htmlFor={`day-${day}`}>{day}</Label>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        )
      case 3:
        return (
          <div className="space-y-6">
            <h2 className="text-xl font-bold">Document Verification</h2>
            <p className="text-sm text-muted-foreground">Upload your documents for verification</p>

<div className="space-y-4">
              <div className="space-y-2">
                <Label>ID Proof (Aadhaar/PAN/Voter ID)</Label>
                <div className="border border-dashed rounded-lg p-6 flex flex-col items-center justify-center">
                  <Upload className="h-8 w-8 text-muted-foreground mb-2" />
                  <p className="text-sm font-medium">Upload ID Proof</p>
                  <p className="text-xs text-muted-foreground mt-1">JPG, PNG or PDF (Max 5MB)</p>
                  <Button variant="outline" size="sm" className="mt-4">
                    Choose File
                  </Button>
                </div>
              </div>

<div className="space-y-2">
                <Label>Address Proof</Label>
                <div className="border border-dashed rounded-lg p-6 flex flex-col items-center justify-center">
                  <Upload className="h-8 w-8 text-muted-foreground mb-2" />
                  <p className="text-sm font-medium">Upload Address Proof</p>
                  <p className="text-xs text-muted-foreground mt-1">JPG, PNG or PDF (Max 5MB)</p>
                  <Button variant="outline" size="sm" className="mt-4">
                    Choose File
                  </Button>
                </div>
              </div>

<div className="space-y-2">
                <Label>Professional Certificate (if any)</Label>
                <div className="border border-dashed rounded-lg p-6 flex flex-col items-center justify-center">
                  <Upload className="h-8 w-8 text-muted-foreground mb-2" />
                  <p className="text-sm font-medium">Upload Certificate</p>
                  <p className="text-xs text-muted-foreground mt-1">JPG, PNG or PDF (Max 5MB)</p>
                  <Button variant="outline" size="sm" className="mt-4">
                    Choose File
                  </Button>
                </div>
              </div>
            </div>
          </div>
        )
      case 4:
        return (
          <div className="space-y-6">
            <h2 className="text-xl font-bold">Introduction Video</h2>
            <p className="text-sm text-muted-foreground">Record a short introduction video to showcase your skills</p>

<div className="space-y-4">
              <div className="border rounded-lg overflow-hidden">
                <div className="aspect-video bg-muted flex flex-col items-center justify-center">
                  <Camera className="h-12 w-12 text-muted-foreground mb-2" />
                  <p className="text-sm font-medium">Record a Video</p>
                  <p className="text-xs text-muted-foreground mt-1">30-60 seconds introduction</p>
                </div>
                <div className="p-3 flex justify-between">
                  <Button variant="outline" size="sm">
                    Upload Video
                  </Button>
                  <Button size="sm">Record Now</Button>
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="bio">Professional Bio</Label>
                <Textarea
                  id="bio"
                  placeholder="Write a short bio about your professional experience and skills..."
                  className="min-h-[100px]"
                />
                <p className="text-xs text-muted-foreground">This will be shown to customers on your profile</p>
              </div>

<div className="flex items-start space-x-2 pt-4">
                <Checkbox id="terms" />
                <div className="grid gap-1.5 leading-none">
                  <Label
                    htmlFor="terms"
                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                  >
                    I agree to the terms and conditions
                  </Label>
                  <p className="text-xs text-muted-foreground">
                    By submitting this application, I agree to SevaSphere's Terms of Service and Privacy Policy.
                  </p>
                </div>
              </div>
            </div>
          </div>
        )
      default:
        return null
    }
  }

return (
    <div className="flex flex-col h-[667px] w-[375px] mx-auto border rounded-xl overflow-hidden bg-background">
      <div className="p-4 flex items-center justify-between border-b">
        <div className="flex items-center">
          <Button variant="ghost" size="icon" onClick={handleBack} disabled={step === 1}>
            <ArrowLeft className="h-5 w-5" />
          </Button>
          <h1 className="text-lg font-semibold ml-2">Vendor Registration</h1>
        </div>
        <p className="text-sm text-muted-foreground">Step {step}/4</p>
      </div>

<div className="p-4 flex justify-between border-b">
        <div className={`flex flex-col items-center ${step >= 1 ? "text-primary" : "text-muted-foreground"}`}>
          <div
            className={`w-8 h-8 rounded-full flex items-center justify-center mb-1 ${step >= 1 ? "bg-primary text-white" : "bg-muted"}`}
          >
            {step > 1 ? <Check className="h-5 w-5" /> : 1}
          </div>
          <span className="text-xs">Basic</span>
        </div>
        <div className={`flex flex-col items-center ${step >= 2 ? "text-primary" : "text-muted-foreground"}`}>
          <div
            className={`w-8 h-8 rounded-full flex items-center justify-center mb-1 ${step >= 2 ? "bg-primary text-white" : "bg-muted"}`}
          >
            {step > 2 ? <Check className="h-5 w-5" /> : 2}
          </div>
          <span className="text-xs">Services</span>
        </div>
        <div className={`flex flex-col items-center ${step >= 3 ? "text-primary" : "text-muted-foreground"}`}>
          <div
            className={`w-8 h-8 rounded-full flex items-center justify-center mb-1 ${step >= 3 ? "bg-primary text-white" : "bg-muted"}`}
          >
            {step > 3 ? <Check className="h-5 w-5" /> : 3}
          </div>
          <span className="text-xs">Documents</span>
        </div>
        <div className={`flex flex-col items-center ${step >= 4 ? "text-primary" : "text-muted-foreground"}`}>
          <div
            className={`w-8 h-8 rounded-full flex items-center justify-center mb-1 ${step >= 4 ? "bg-primary text-white" : "bg-muted"}`}
          >
            {step > 4 ? <Check className="h-5 w-5" /> : 4}
          </div>
          <span className="text-xs">Video</span>
        </div>
      </div>
      <div className="p-4">{renderStepContent()}</div>
      <div className="p-4 flex justify-end">
        <Button onClick={handleNext} disabled={step === 4}>
          {step === 4 ? "Submit" : "Next"}
        </Button>
      </div>
    </div>
  )
}
</article></body></html>