[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState } from "react" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Clock } from "lucide-react" import { BusCard } from "@/components/bus-card" import { BookingDetailsModal } from "@/components/booking-details-modal" import { AddBusForm } from "@/components/add-bus-form" // Demo bus data sorted by departure time const DEMO_BUSES = [ { id: 1, busNumber: "MH-12-AB-1234", operator: "Sunil Travels", totalSeats: 40, availableSeats: 12, departureTime: "08:00", departureDate: "2024-01-15", arrivalTime: "16:30", route: "Mumbai - Pune", }, { id: 2, busNumber: "DL-01-CD-5678", operator: "Sharma Transports", totalSeats: 35, availableSeats: 5, departureTime: "10:15", departureDate: "2024-01-15", arrivalTime: "20:00", route: "Delhi - Agra", }, { id: 3, busNumber: "KA-03-EF-9012", operator: "National Travels", totalSeats: 45, availableSeats: 28, departureTime: "21:30", departureDate: "2024-01-15", arrivalTime: "06:00", route: "Bangalore - Mysore", }, ] // Demo booking data const DEMO_BOOKINGS: { [key: number]: any[] } = { 1: [ { id: "BK001", passengerName: "Rajesh Kumar", seats: ["12", "13"], status: "Confirmed", createdAt: "2024-01-10 14:30", }, { id: "BK002", passengerName: "Priya Singh", seats: ["15"], status: "Pending", createdAt: "2024-01-11 10:15", }, { id: "BK003", passengerName: "Amit Patel", seats: ["20", "21", "22"], status: "Confirmed", createdAt: "2024-01-12 09:45", }, { id: "BK004", passengerName: "Neha Gupta", seats: ["5"], status: "Cancelled", createdAt: "2024-01-12 16:20", }, ], 2: [ { id: "BK005", passengerName: "Vikram Singh", seats: ["1", "2"], status: "Confirmed", createdAt: "2024-01-11 08:00", }, { id: "BK006", passengerName: "Anjali Sharma", seats: ["8", "9", "10"], status: "Confirmed", createdAt: "2024-01-12 12:30", }, { id: "BK007", passengerName: "Suresh Kumar", seats: ["25"], status: "Pending", createdAt: "2024-01-13 11:00", }, ], 3: [ { id: "BK008", passengerName: "Meera Verma", seats: ["3", "4", "5", "6"], status: "Confirmed", createdAt: "2024-01-09 15:45", }, { id: "BK009", passengerName: "Rohan Sharma", seats: ["11", "12"], status: "Confirmed", createdAt: "2024-01-10 09:20", }, ], } export default function AdminBusDashboard() { const [selectedBusId, setSelectedBusId] = useState(null) const [searchTerm, setSearchTerm] = useState("") const [buses, setBuses] = useState(DEMO_BUSES) // Sort buses by departure time const sortedBuses = [...buses].sort((a, b) => { const timeA = Number.parseInt(a.departureTime.replace(":", "")) const timeB = Number.parseInt(b.departureTime.replace(":", "")) return timeA - timeB }) // Filter buses based on search const filteredBuses = sortedBuses.filter( (bus) => bus.busNumber.toLowerCase().includes(searchTerm.toLowerCase()) || bus.operator.toLowerCase().includes(searchTerm.toLowerCase()) || bus.route.toLowerCase().includes(searchTerm.toLowerCase()), ) return (

{/* Header */}

Admin Bus Management

Manage buses and view booking details

{/* Add New Bus Form */} setBuses([...buses, newBus])} /> {/* Search Bar */}

setSearchTerm(e.target.value)} className="w-full max-w-md" />

{/* Time-based Bus Grid */}

Buses by Departure Time

{filteredBuses.length > 0 ? (

{filteredBuses.map((bus) => ( setSelectedBusId(bus.id)} /> ))}

) : (

No buses found matching your search

)}

{/* Booking Details Modal */} {selectedBusId !== null && ( b.id === selectedBusId)!} bookings={DEMO_BOOKINGS[selectedBusId] || []} onClose={() => setSelectedBusId(null)} /> )}

) } [V0_FILE]typescriptreact:file="components/bus-card.tsx" "use client" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Edit, Trash2 } from "lucide-react" interface Bus { id: number busNumber: string operator: string totalSeats: number availableSeats: number departureTime: string departureDate: string arrivalTime: string route: string } interface BusCardProps { bus: Bus onViewBookings: () => void } export function BusCard({ bus, onViewBookings }: BusCardProps) { // Alternate bus images for visual variety const busImages = ["/blue-bus-highway.jpg", "/white-bus-landscape.jpg", "/orange-bus-street.jpg"] const imageUrl = busImages[bus.id % busImages.length] return ( {/* Bus Image */}

{bus.availableSeats} Seats

{/* Card Content */}

{/* Bus Info */}

{bus.busNumber}

{bus.operator}

{/* Route */}

{bus.route}

{/* Timing Info */}

Departure: {bus.departureTime}

Arrival: {bus.arrivalTime}

Total Seats: {bus.totalSeats}

{/* Actions */}

) } [V0_FILE]typescriptreact:file="components/booking-details-modal.tsx" "use client" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { X } from "lucide-react" interface Booking { id: string passengerName: string seats: string[] status: string createdAt: string } interface Bus { busNumber: string operator: string route: string departureTime: string departureDate: string } interface BookingDetailsModalProps { bus: Bus bookings: Booking[] onClose: () => void } export function BookingDetailsModal({ bus, bookings, onClose }: BookingDetailsModalProps) { const getStatusColor = (status: string) => { switch (status) { case "Confirmed": return "bg-green-100 text-green-800" case "Pending": return "bg-yellow-100 text-yellow-800" case "Cancelled": return "bg-red-100 text-red-800" default: return "bg-gray-100 text-gray-800" } } return (

{/* Header */}

Booking Details

Bus: {bus.busNumber} - {bus.operator}

{/* Bus Info Summary */}

Route

{bus.route}

Date

{bus.departureDate}

Departure

{bus.departureTime}

Total Bookings

{bookings.length}

{/* Bookings Table */}

{bookings.length > 0 ? (

{bookings.map((booking) => ( ))}

Booking ID	Passenger Name	Seats	Status	Created At
{booking.id}	{booking.passengerName}	{booking.seats.map((seat) => ( {seat} ))}	{booking.status}	{booking.createdAt}

) : (

No bookings found for this bus

)}

{/* Footer */}

) } [V0_FILE]typescriptreact:file="components/add-bus-form.tsx" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Clock } from "lucide-react" interface AddBusFormProps { onBusAdded: (bus: any) => void } export function AddBusForm({ onBusAdded }: AddBusFormProps) { const [formData, setFormData] = useState({ busNumber: "", operator: "", departureTime: "", arrivalTime: "", availableSeats: "", route: "", }) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() const newBus = { id: Math.floor(Math.random() * 10000), busNumber: formData.busNumber, operator: formData.operator, departureTime: formData.departureTime, arrivalTime: formData.arrivalTime, totalSeats: Number.parseInt(formData.availableSeats) || 0, availableSeats: Number.parseInt(formData.availableSeats) || 0, departureDate: new Date().toISOString().split("T")[0], route: formData.route, } onBusAdded(newBus) setFormData({ busNumber: "", operator: "", departureTime: "", arrivalTime: "", availableSeats: "", route: "", }) } return (

Add New Bus

setFormData({ ...formData, busNumber: e.target.value })} required /> setFormData({ ...formData, operator: e.target.value })} required />

setFormData({ ...formData, departureTime: e.target.value })} className="pl-9" required />

setFormData({ ...formData, arrivalTime: e.target.value })} className="pl-9" required />

setFormData({ ...formData, availableSeats: e.target.value })} required /> setFormData({ ...formData, route: e.target.value })} required />

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Admin Bus Management", description: "Manage buses and view booking details", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]jpg:file="public/blue-bus-highway.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/blue-bus-highway-bsA5nKRf91Sx3m98vb9vu2iV2WltGT.jpg" [V0_FILE]jpg:file="public/white-bus-landscape.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/white-bus-landscape-tyog8OmtVvp08yEFl3mCMyxpujheej.jpg" [V0_FILE]jpg:file="public/orange-bus-street.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/orange-bus-street-mqNwFkdHXTbZeXSawz5KygiW3FY7Te.jpg" [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.0", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } }