[V0_FILE]typescriptreact:file="app/page.tsx" import Header from "@/components/header" import Sidebar from "@/components/sidebar" import CalendarTable from "@/components/calendar-table" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/header.tsx" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/components/ui/dropdown-menu" import { Search, Bell, MessageSquare, ChevronDown } from "lucide-react" import Image from "next/image" export default function Header() { return (

English Spanish

) } [V0_FILE]typescriptreact:file="components/sidebar.tsx" "use client" import type React from "react" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Car, ChevronUp, ChevronDown, Users, Clock, Trash2, Wrench, EllipsisVertical, Settings } from "lucide-react" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" interface ServiceItemProps { name: string time?: string count?: number onDelete?: () => void } const ServiceItem = ({ name, time, count, onDelete }: ServiceItemProps) => (

{time && } {name} {time && count && {count}}

{onDelete && ( )}

) interface CollapsibleSectionProps { title: string icon: React.ElementType children: React.ReactNode initialOpen?: boolean showEllipsis?: boolean } const CollapsibleSection = ({ title, icon: Icon, children, initialOpen = false, showEllipsis = true, }: CollapsibleSectionProps) => { const [isOpen, setIsOpen] = useState(initialOpen) return (

setIsOpen(!isOpen)} role="button" aria-expanded={isOpen} aria-controls={`section-${title.toLowerCase().replace(/\s/g, "-")}`} >

{isOpen ? : } {title}

{showEllipsis && ( )}

{isOpen && (

{children}

)}

) } export default function Sidebar() { return ( ) } [V0_FILE]typescriptreact:file="components/calendar-table.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Switch } from "@/components/ui/switch" import { Search, SlidersHorizontal, LayoutGrid, List, CalendarDays } from "lucide-react" const dates = [ { day: 23, month: "MAY", weekday: "SUN" }, { day: 24, month: "MAY", weekday: "MON" }, { day: 25, month: "MAY", weekday: "TUE" }, { day: 26, month: "MAY", weekday: "WED" }, { day: 27, month: "MAY", weekday: "THU" }, { day: 28, month: "MAY", weekday: "FRI" }, { day: 29, month: "MAY", weekday: "SAT" }, { day: 30, month: "MAY", weekday: "SUN" }, { day: 1, month: "MAY", weekday: "MON" }, // Assuming May 31st, then June 1st, but keeping May for consistency with image { day: 2, month: "MAY", weekday: "TUE" }, { day: 3, month: "MAY", weekday: "WED" }, { day: 4, month: "MAY", weekday: "THU" }, ] interface TimeSlotData { timeSlot: string pricePlan: string availability: { [key: string]: { count: number; status: string; price: string } } } const mockData: TimeSlotData[] = [ { timeSlot: "1 TIME SLOT", pricePlan: "1 PRICE PLAN", availability: { "23": { count: 6, status: "2 Available", price: "$600" }, "24": { count: 2, status: "3 Available", price: "$600" }, "25": { count: 4, status: "4 Available", price: "$600" }, "26": { count: 2, status: "1 Available", price: "$600" }, "27": { count: 1, status: "5 Available", price: "$600" }, "28": { count: 3, status: "6 Available", price: "$600" }, "29": { count: 2, status: "All Booked", price: "$600" }, "30": { count: 2, status: "2 Available", price: "$600" }, "1": { count: 4, status: "1 Available", price: "$600" }, "2": { count: 2, status: "2 Available", price: "$600" }, "3": { count: 2, status: "2 Available", price: "$600" }, "4": { count: 4, status: "1 Available", price: "$600" }, }, }, { timeSlot: "Basic Foam Wash", pricePlan: "", availability: { "23": { count: 0, status: "", price: "$650" }, "24": { count: 0, status: "", price: "$650" }, "25": { count: 0, status: "", price: "$650" }, "26": { count: 0, status: "", price: "$650" }, "27": { count: 0, status: "", price: "$650" }, "28": { count: 0, status: "", price: "$650" }, "29": { count: 0, status: "", price: "$650" }, "30": { count: 0, status: "", price: "$650" }, "1": { count: 0, status: "", price: "$650" }, "2": { count: 0, status: "", price: "$650" }, "3": { count: 0, status: "", price: "$650" }, "4": { count: 0, status: "", price: "$650" }, }, }, { timeSlot: "Express Wax & Polish", pricePlan: "", availability: { "23": { count: 0, status: "", price: "$700" }, "24": { count: 0, status: "", price: "$700" }, "25": { count: 0, status: "", price: "$700" }, "26": { count: 0, status: "", price: "$700" }, "27": { count: 0, status: "", price: "$700" }, "28": { count: 0, status: "", price: "$700" }, "29": { count: 0, status: "", price: "$700" }, "30": { count: 0, status: "", price: "$700" }, "1": { count: 0, status: "", price: "$700" }, "2": { count: 0, status: "", price: "$700" }, "3": { count: 0, status: "", price: "$700" }, "4": { count: 0, status: "", price: "$700" }, }, }, { timeSlot: "Ceramic Coating Prep", pricePlan: "", availability: { "23": { count: 0, status: "1 Available", price: "$500" }, "24": { count: 0, status: "1 Available", price: "$500" }, "25": { count: 0, status: "1 Available", price: "$500" }, "26": { count: 0, status: "1 Available", price: "$500" }, "27": { count: 0, status: "All Booked", price: "$500" }, "28": { count: 0, status: "1 Available", price: "$500" }, "29": { count: 0, status: "1 Available", price: "$500" }, "30": { count: 0, status: "1 Available", price: "$500" }, "1": { count: 0, status: "1 Available", price: "$500" }, "2": { count: 0, status: "1 Available", price: "$500" }, "3": { count: 0, status: "1 Available", price: "$500" }, "4": { count: 0, status: "1 Available", price: "$500" }, }, }, { timeSlot: "Deep Pressure Wash", pricePlan: "", availability: { "23": { count: 0, status: "", price: "$500" }, "24": { count: 0, status: "", price: "$500" }, "25": { count: 0, status: "", price: "$500" }, "26": { count: 0, status: "", price: "$500" }, "27": { count: 0, status: "", price: "$500" }, "28": { count: 0, status: "", price: "$500" }, "29": { count: 0, status: "", price: "$500" }, "30": { count: 0, status: "", price: "$500" }, "1": { count: 0, status: "", price: "$500" }, "2": { count: 0, status: "", price: "$500" }, "3": { count: 0, status: "", price: "$500" }, "4": { count: 0, status: "", price: "$500" }, }, }, { timeSlot: "Premium Paint Protection", pricePlan: "", availability: { "23": { count: 0, status: "", price: "$600" }, "24": { count: 0, status: "", price: "$600" }, "25": { count: 0, status: "", price: "$600" }, "26": { count: 0, status: "", price: "$600" }, "27": { count: 0, status: "", price: "$600" }, "28": { count: 0, status: "", price: "$600" }, "29": { count: 0, status: "", price: "$600" }, "30": { count: 0, status: "", price: "$600" }, "1": { count: 0, status: "", price: "$600" }, "2": { count: 0, status: "", price: "$600" }, "3": { count: 0, status: "", price: "$600" }, "4": { count: 0, status: "", price: "$600" }, }, }, { timeSlot: "VIP Luxury Styling", pricePlan: "", availability: { "23": { count: 0, status: "", price: "$600" }, "24": { count: 0, status: "", price: "$600" }, "25": { count: 0, status: "", price: "$600" }, "26": { count: 0, status: "", price: "$600" }, "27": { count: 0, status: "", price: "$600" }, "28": { count: 0, status: "", price: "$600" }, "29": { count: 0, status: "", price: "$600" }, "30": { count: 0, status: "", price: "$600" }, "1": { count: 0, status: "", price: "$600" }, "2": { count: 0, status: "", price: "$600" }, "3": { count: 0, status: "", price: "$600" }, "4": { count: 0, status: "", price: "$600" }, }, }, { timeSlot: "1 TIME SLOT", pricePlan: "1 PRICE PLAN", availability: { "23": { count: 1, status: "1 Available", price: "$500" }, "24": { count: 1, status: "1 Available", price: "$500" }, "25": { count: 1, status: "All Booked", price: "$500" }, "26": { count: 2, status: "1 Available", price: "$500" }, "27": { count: 2, status: "1 Available", price: "$500" }, "28": { count: 4, status: "1 Available", price: "$500" }, "29": { count: 1, status: "1 Available", price: "$500" }, "30": { count: 2, status: "1 Available", price: "$500" }, "1": { count: 1, status: "1 Available", price: "$500" }, "2": { count: 2, status: "1 Available", price: "$500" }, "3": { count: 1, status: "1 Available", price: "$500" }, "4": { count: 1, status: "1 Available", price: "$500" }, }, }, { timeSlot: "Vacuum & Dashboard Polish", pricePlan: "", availability: { "23": { count: 0, status: "", price: "$500" }, "24": { count: 0, status: "", price: "$500" }, "25": { count: 0, status: "", price: "$500" }, "26": { count: 0, status: "", price: "$500" }, "27": { count: 0, status: "", price: "$500" }, "28": { count: 0, status: "", price: "$500" }, "29": { count: 0, status: "", price: "$500" }, "30": { count: 0, status: "", price: "$500" }, "1": { count: 0, status: "", price: "$500" }, "2": { count: 0, status: "", price: "$500" }, "3": { count: 0, status: "", price: "$500" }, "4": { count: 0, status: "", price: "$500" }, }, }, { timeSlot: "1 TIME SLOT", pricePlan: "1 PRICE PLAN", availability: { "23": { count: 1, status: "1 Available", price: "$500" }, "24": { count: 1, status: "1 Available", price: "$500" }, "25": { count: 1, status: "1 Available", price: "$500" }, "26": { count: 1, status: "1 Available", price: "$500" }, "27": { count: 1, status: "1 Available", price: "$500" }, "28": { count: 1, status: "1 Available", price: "$500" }, "29": { count: 1, status: "1 Available", price: "$500" }, "30": { count: 1, status: "1 Available", price: "$500" }, "1": { count: 1, status: "1 Available", price: "$500" }, "2": { count: 1, status: "1 Available", price: "$500" }, "3": { count: 1, status: "1 Available", price: "$500" }, "4": { count: 1, status: "1 Available", price: "$500" }, }, }, { timeSlot: "Alignment & Balancing", pricePlan: "", availability: { "23": { count: 0, status: "", price: "$500" }, "24": { count: 0, status: "", price: "$500" }, "25": { count: 0, status: "", price: "$500" }, "26": { count: 0, status: "", price: "$500" }, "27": { count: 0, status: "", price: "$500" }, "28": { count: 0, status: "", price: "$500" }, "29": { count: 0, status: "", price: "$500" }, "30": { count: 0, status: "", price: "$500" }, "1": { count: 0, status: "", price: "$500" }, "2": { count: 0, status: "", price: "$500" }, "3": { count: 0, status: "", price: "$500" }, "4": { count: 0, status: "", price: "$500" }, }, }, { timeSlot: "1 TIME SLOT", pricePlan: "1 PRICE PLAN", availability: { "23": { count: 0, status: "", price: "$500" }, "24": { count: 0, status: "", price: "$500" }, "25": { count: 0, status: "", price: "$500" }, "26": { count: 0, status: "", price: "$500" }, "27": { count: 0, status: "", price: "$500" }, "28": { count: 0, status: "", price: "$500" }, "29": { count: 0, status: "", price: "$500" }, "30": { count: 0, status: "", price: "$500" }, "1": { count: 0, status: "", price: "$500" }, "2": { count: 0, status: "", price: "$500" }, "3": { count: 0, status: "", price: "$500" }, "4": { count: 0, status: "", price: "$500" }, }, }, { timeSlot: "Engine Oil Top-up", pricePlan: "", availability: { "23": { count: 0, status: "", price: "$500" }, "24": { count: 0, status: "", price: "$500" }, "25": { count: 0, status: "", price: "$500" }, "26": { count: 0, status: "", price: "$500" }, "27": { count: 0, status: "", price: "$500" }, "28": { count: 0, status: "", price: "$500" }, "29": { count: 0, status: "", price: "$500" }, "30": { count: 0, status: "", price: "$500" }, "1": { count: 0, status: "", price: "$500" }, "2": { count: 0, status: "", price: "$500" }, "3": { count: 0, status: "", price: "$500" }, "4": { count: 0, status: "", price: "$500" }, }, }, ] export default function CalendarTable() { const [tableView, setTableView] = useState(true) return (

Table View

{/* Header Row */}

Service / Time Slot

{dates.map((date, index) => (

{date.day}

{date.month}

{date.weekday}

))} {/* Data Rows */} {mockData.map((row, rowIndex) => (

{row.timeSlot}

{dates.map((date, colIndex) => { const data = row.availability[date.day.toString()] const isBooked = data?.status === "All Booked" const isHighlightedDay = date.day === 29 return (

{data?.count > 0 && (

{data.count}

)} {data?.status && ( {data.status} )} {data?.price && {data.price}}

) })}

))}

) }