[V0_FILE]css:file="app/globals.css" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: #ffffff; --foreground: #4b5563; --card: #f9fafb; --card-foreground: #4b5563; --popover: #ffffff; --popover-foreground: #4b5563; --primary: #0891b2; --primary-foreground: #ffffff; --secondary: #ec4899; --secondary-foreground: #ffffff; --muted: #f9fafb; --muted-foreground: #4b5563; --accent: #ec4899; --accent-foreground: #ffffff; --destructive: #be123c; --destructive-foreground: #ffffff; --border: #e5e7eb; --input: #f9fafb; --ring: rgba(8, 145, 178, 0.5); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.5rem; --sidebar: #f9fafb; --sidebar-foreground: #4b5563; --sidebar-primary: #ffffff; --sidebar-primary-foreground: #4b5563; --sidebar-accent: #ec4899; --sidebar-accent-foreground: #ffffff; --sidebar-border: #e5e7eb; --sidebar-ring: rgba(8, 145, 178, 0.5); } .dark { --background: #1f2937; --foreground: #f9fafb; --card: #374151; --card-foreground: #f9fafb; --popover: #1f2937; --popover-foreground: #f9fafb; --primary: #0891b2; --primary-foreground: #ffffff; --secondary: #ec4899; --secondary-foreground: #ffffff; --muted: #374151; --muted-foreground: #9ca3af; --accent: #ec4899; --accent-foreground: #ffffff; --destructive: #be123c; --destructive-foreground: #ffffff; --border: #4b5563; --input: #374151; --ring: rgba(8, 145, 178, 0.5); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: #374151; --sidebar-foreground: #f9fafb; --sidebar-primary: #1f2937; --sidebar-primary-foreground: #f9fafb; --sidebar-accent: #ec4899; --sidebar-accent-foreground: #ffffff; --sidebar-border: #4b5563; --sidebar-ring: rgba(8, 145, 178, 0.5); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67", "@supabase/ssr": "0.7.0" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescript:file="lib/supabase/client.ts" isMerged="true" import { createBrowserClient } from "@supabase/ssr" export function createClient() { return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!) } [V0_FILE]typescript:file="lib/supabase/server.ts" isMerged="true" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" /** * Especially important if using Fluid compute: Don't put this client in a * global variable. Always create a new client within each function when using * it. */ export async function createClient() { const cookieStore = await cookies() return createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) } catch { // The "setAll" method was called from a Server Component. // This can be ignored if you have middleware refreshing // user sessions. } }, }, }) } [V0_FILE]sql:file="scripts/001_create_tables.sql" isMerged="true" -- Criar tabela de reservas CREATE TABLE IF NOT EXISTS public.bookings ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), passenger_name TEXT NOT NULL, passenger_phone TEXT NOT NULL, departure_city TEXT NOT NULL, departure_time TEXT NOT NULL, price DECIMAL(10,2) NOT NULL, seat_preference TEXT, booking_type TEXT NOT NULL CHECK (booking_type IN ('saida', 'retorno')), created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Criar tabela de avaliações CREATE TABLE IF NOT EXISTS public.reviews ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), reviewer_name TEXT NOT NULL, rating INTEGER NOT NULL CHECK (rating >= 1 AND rating <= 5), comment TEXT NOT NULL, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Inserir algumas avaliações de exemplo INSERT INTO public.reviews (reviewer_name, rating, comment) VALUES ('Maria Silva', 5, 'Excelente serviço! Pontualidade e conforto garantidos.'), ('João Santos', 4, 'Muito bom, recomendo. Apenas o ar condicionado poderia ser mais forte.'), ('Ana Costa', 5, 'Sempre viajo com eles. Motoristas educados e veículos limpos.'), ('Pedro Lima', 4, 'Boa experiência geral. Preços justos e horários respeitados.'); [V0_FILE]sql:file="scripts/002_create_tables_force.sql" isMerged="true" -- Forçar criação das tabelas necessárias para o app de viagens DROP TABLE IF EXISTS public.bookings CASCADE; DROP TABLE IF EXISTS public.reviews CASCADE; -- Criar tabela de reservas CREATE TABLE public.bookings ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), passenger_name TEXT NOT NULL, passenger_phone TEXT NOT NULL, departure_city TEXT NOT NULL, departure_time TEXT NOT NULL, price DECIMAL(10,2) NOT NULL, seat_preference TEXT, booking_type TEXT NOT NULL CHECK (booking_type IN ('saida', 'retorno')), created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Criar tabela de avaliações CREATE TABLE public.reviews ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), reviewer_name TEXT NOT NULL, rating INTEGER NOT NULL CHECK (rating >= 1 AND rating <= 5), comment TEXT NOT NULL, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Habilitar RLS (Row Level Security) ALTER TABLE public.bookings ENABLE ROW LEVEL SECURITY; ALTER TABLE public.reviews ENABLE ROW LEVEL SECURITY; -- Criar políticas para permitir acesso público (para este exemplo) CREATE POLICY "Allow all operations on bookings" ON public.bookings FOR ALL USING (true); CREATE POLICY "Allow all operations on reviews" ON public.reviews FOR ALL USING (true); -- Inserir algumas avaliações de exemplo INSERT INTO public.reviews (reviewer_name, rating, comment) VALUES ('Maria Silva', 5, 'Excelente serviço! Pontualidade e conforto garantidos.'), ('João Santos', 4, 'Muito bom, recomendo. Apenas o ar condicionado poderia ser mais forte.'), ('Ana Costa', 5, 'Sempre viajo com eles. Motoristas educados e veículos limpos.'), ('Pedro Lima', 4, 'Boa experiência geral. Preços justos e horários respeitados.'); [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Clock, MapPin, Star, Users, User, CreditCard, LogIn, Shield } from "lucide-react" import { createClient } from "@/lib/supabase/client" interface Trip { id: string city: string time: string price: number type: "departure" | "return" } interface Reservation { id: string trip: Trip passenger: { name: string phone: string email: string } seat: number status: "confirmed" | "pending" date: string } interface Review { id: string reviewer_name: string rating: number comment: string created_at: string } const departures: Trip[] = [ { id: "1", city: "Floresta", time: "5:40", price: 30, type: "departure" }, { id: "2", city: "Jaburu", time: "6:00", price: 25, type: "departure" }, { id: "3", city: "Carnaubeira", time: "6:15", price: 20, type: "departure" }, { id: "4", city: "Juazeiro Grande", time: "6:30", price: 15, type: "departure" }, { id: "5", city: "Mirandiba", time: "6:50", price: 10, type: "departure" }, ] const returns: Trip[] = [ { id: "6", city: "Mirandiba", time: "12:00", price: 30, type: "return" }, { id: "7", city: "Juazeiro Grande", time: "12:15", price: 25, type: "return" }, { id: "8", city: "Carnaubeira", time: "12:35", price: 20, type: "return" }, { id: "9", city: "Jaburu", time: "13:00", price: 15, type: "return" }, { id: "10", city: "Floresta", time: "13:20", price: 10, type: "return" }, ] const fallbackReviews: Review[] = [ { id: "1", reviewer_name: "Maria Silva", rating: 5, comment: "Excelente serviço! Pontualidade e conforto garantidos.", created_at: new Date().toISOString(), }, { id: "2", reviewer_name: "João Santos", rating: 4, comment: "Muito bom, recomendo. Apenas o ar condicionado poderia ser mais forte.", created_at: new Date().toISOString(), }, { id: "3", reviewer_name: "Ana Costa", rating: 5, comment: "Sempre viajo com eles. Motoristas educados e veículos limpos.", created_at: new Date().toISOString(), }, ] export default function TravelApp() { const [selectedTab, setSelectedTab] = useState<"departure" | "return">("departure") const [selectedTrip, setSelectedTrip] = useState(null) const [showReservationForm, setShowReservationForm] = useState(false) const [reservations, setReservations] = useState([]) const [reviews, setReviews] = useState(fallbackReviews) const [reservationForm, setReservationForm] = useState({ name: "", phone: "", email: "", seat: 1, }) const [currentView, setCurrentView] = useState<"trips" | "reservations">("trips") const [isLoading, setIsLoading] = useState(false) const [dbAvailable, setDbAvailable] = useState(false) const [currentUser, setCurrentUser] = useState("") const [isLoggedIn, setIsLoggedIn] = useState(false) const [showLoginForm, setShowLoginForm] = useState(false) const [isAdmin, setIsAdmin] = useState(false) const [loginForm, setLoginForm] = useState({ phone: "", isAdminLogin: false, }) const [adminView, setAdminView] = useState<"dashboard" | "reservations" | "reports">("dashboard") const supabase = createClient() useEffect(() => { const loadReviews = async () => { try { const { data, error } = await supabase .from("reviews") .select("*") .order("created_at", { ascending: false }) .limit(3) if (error) { console.log("[v0] Banco de dados não disponível, usando dados de fallback:", error.message) setDbAvailable(false) } else { setReviews(data || fallbackReviews) setDbAvailable(true) } } catch (error) { console.log("[v0] Erro ao conectar com banco, usando fallback:", error) setDbAvailable(false) } } loadReviews() }, [supabase]) useEffect(() => { const loadBookings = async () => { if (!dbAvailable) return try { let query = supabase.from("bookings").select("*").order("created_at", { ascending: false }) // Filter by current user phone if not admin if (!isAdmin && currentUser) { query = query.eq("passenger_phone", currentUser) } const { data, error } = await query if (error) { console.log("[v0] Erro ao carregar reservas:", error.message) } else { const formattedReservations: Reservation[] = (data || []).map((booking) => ({ id: booking.id, trip: { id: booking.id, city: booking.departure_city, time: booking.departure_time, price: booking.price, type: booking.booking_type as "departure" | "return", }, passenger: { name: booking.passenger_name, phone: booking.passenger_phone, email: "", }, seat: Number.parseInt(booking.seat_preference) || 1, status: "confirmed" as const, date: new Date(booking.created_at).toLocaleDateString("pt-BR"), })) setReservations(formattedReservations) } } catch (error) { console.log("[v0] Erro ao conectar para carregar reservas:", error) } } if (isLoggedIn) { loadBookings() } }, [supabase, dbAvailable, currentUser, isAdmin, isLoggedIn]) const currentTrips = selectedTab === "departure" ? departures : returns const handleReservation = async () => { if (!selectedTrip || !reservationForm.name || !reservationForm.phone) { alert("Por favor, preencha todos os campos obrigatórios.") return } // Auto-fill phone with current user if logged in const phoneToUse = isLoggedIn && !isAdmin ? currentUser : reservationForm.phone setIsLoading(true) if (!dbAvailable) { const newReservation: Reservation = { id: Date.now().toString(), trip: selectedTrip, passenger: { name: reservationForm.name, phone: phoneToUse, email: reservationForm.email, }, seat: reservationForm.seat, status: "confirmed", date: new Date().toLocaleDateString("pt-BR"), } setReservations([newReservation, ...reservations]) setSelectedTrip(null) setShowReservationForm(false) setReservationForm({ name: "", phone: "", email: "", seat: 1 }) setIsLoading(false) alert("Reserva confirmada localmente! (Banco de dados não disponível)") return } try { const { data, error } = await supabase .from("bookings") .insert({ passenger_name: reservationForm.name, passenger_phone: phoneToUse, departure_city: selectedTrip.city, departure_time: selectedTrip.time, price: selectedTrip.price, seat_preference: reservationForm.seat.toString(), booking_type: selectedTrip.type === "departure" ? "saida" : "retorno", }) .select() if (error) { console.error("Erro ao salvar reserva:", error) alert("Erro ao confirmar reserva. Tente novamente.") return } const newReservation: Reservation = { id: data[0].id, trip: selectedTrip, passenger: { name: reservationForm.name, phone: phoneToUse, email: reservationForm.email, }, seat: reservationForm.seat, status: "confirmed", date: new Date().toLocaleDateString("pt-BR"), } setReservations([newReservation, ...reservations]) setSelectedTrip(null) setShowReservationForm(false) setReservationForm({ name: "", phone: "", email: "", seat: 1 }) alert("Reserva confirmada com sucesso!") } catch (error) { console.error("Erro inesperado:", error) alert("Erro inesperado. Tente novamente.") } finally { setIsLoading(false) } } const handleLogin = () => { if (!loginForm.phone) { alert("Por favor, digite seu telefone.") return } // Admin login check (simple password for demo) if (loginForm.isAdminLogin) { const adminPassword = prompt("Digite a senha do administrador:") if (adminPassword === "admin123") { setIsAdmin(true) setCurrentUser("admin") setIsLoggedIn(true) setShowLoginForm(false) setLoginForm({ phone: "", isAdminLogin: false }) } else { alert("Senha incorreta!") return } } else { setCurrentUser(loginForm.phone) setIsLoggedIn(true) setShowLoginForm(false) setLoginForm({ phone: "", isAdminLogin: false }) } } const handleLogout = () => { setCurrentUser("") setIsLoggedIn(false) setIsAdmin(false) setReservations([]) setCurrentView("trips") } const getAdminStats = () => { const totalRevenue = reservations.reduce((sum, res) => sum + res.trip.price, 0) const todayReservations = reservations.filter((res) => res.date === new Date().toLocaleDateString("pt-BR")).length const occupancyByRoute = [...departures, ...returns].map((trip) => ({ city: trip.city, time: trip.time, type: trip.type, reservations: reservations.filter((res) => res.trip.city === trip.city && res.trip.time === trip.time).length, revenue: reservations .filter((res) => res.trip.city === trip.city && res.trip.time === trip.time) .reduce((sum, res) => sum + res.trip.price, 0), })) return { totalReservations: reservations.length, totalRevenue, todayReservations, occupancyByRoute: occupancyByRoute.filter((route) => route.reservations > 0), } } return (

{/* Header */}

Viagens Locais

Transporte intermunicipal confiável

{isLoggedIn ? (

{isAdmin ? ( Admin ) : ( {currentUser} )}

) : ( )}

{!dbAvailable && (

⚠️ Modo offline - Execute o script SQL para ativar persistência

)}

{isAdmin ? (

) : (

)} {isAdmin && adminView === "dashboard" && (

Dashboard Administrativo

{/* Stats Cards */}

{getAdminStats().totalReservations}

Total de Reservas

R$ {getAdminStats().totalRevenue}

Faturamento Total

{getAdminStats().todayReservations}

Reservas Hoje

4.8

Avaliação Média

{/* Recent Reservations */} Reservas Recentes {reservations.slice(0, 5).map((reservation) => (

{reservation.passenger.name}

{reservation.trip.city} - {reservation.trip.time}

R$ {reservation.trip.price}

{reservation.date}

))} {reservations.length === 0 && (

Nenhuma reserva encontrada

)}

)} {isAdmin && adminView === "reports" && (

Relatórios de Ocupação

Ocupação por Rota {getAdminStats().occupancyByRoute.map((route, index) => (

{route.city}

{route.time} - {route.type === "departure" ? "Saída" : "Retorno"}

{route.reservations} reservas

Faturamento: R$ {route.revenue}

))} {getAdminStats().occupancyByRoute.length === 0 && (

Nenhuma reserva para exibir

)}

Rotas Mais Populares {getAdminStats() .occupancyByRoute.sort((a, b) => b.reservations - a.reservations) .slice(0, 3) .map((route, index) => (

{route.city} - {route.time} {route.reservations}

))} Maior Faturamento {getAdminStats() .occupancyByRoute.sort((a, b) => b.revenue - a.revenue) .slice(0, 3) .map((route, index) => (

{route.city} - {route.time} R$ {route.revenue}

))}

)} {isAdmin && adminView === "reservations" && (

Todas as Reservas

{reservations.length === 0 ? (

Nenhuma reserva encontrada no sistema.

) : ( reservations.map((reservation) => (

{reservation.status === "confirmed" ? "Confirmada" : "Pendente"} Reserva #{reservation.id.slice(-4)}

Destino:

{reservation.trip.city}

Horário:

{reservation.trip.time}

Passageiro:

{reservation.passenger.name}

Telefone:

{reservation.passenger.phone}

R$ {reservation.trip.price}

{reservation.date}

)) )}

)} {currentView === "reservations" && !isLoggedIn ? (

Faça login para ver suas reservas

) : currentView === "trips" && !isAdmin ? ( <> {/* Navigation Tabs */}

{/* Trip List */}

{selectedTab === "departure" ? "Horários de Saída" : "Horários de Retorno"}

{currentTrips.map((trip) => (

Horário

{trip.time}

{selectedTab === "departure" ? "Destino" : "Origem"}

{trip.city}

R$ {trip.price}

))}

{/* Reviews Section */} Avaliações dos Usuários {reviews.length > 0 ? ( reviews.map((review) => (

{[...Array(5)].map((_, i) => ( ))}

{review.reviewer_name}

"{review.comment}"

)) ) : (

Carregando avaliações...

)} {/* Quick Stats */}

500+

Passageiros Atendidos

4.8

Avaliação Média

) : currentView === "reservations" && !isAdmin ? (

Minhas Reservas

{reservations.length === 0 ? (

Você ainda não possui reservas.

) : ( reservations.map((reservation) => (

{reservation.status === "confirmed" ? "Confirmada" : "Pendente"} Reserva #{reservation.id.slice(-4)}

Destino:

{reservation.trip.city}

Horário:

{reservation.trip.time}

Passageiro:

{reservation.passenger.name}

Assento:

#{reservation.seat}

R$ {reservation.trip.price}

{reservation.date}

)) )}

) : (

Todas as Reservas

{reservations.length === 0 ? (

Nenhuma reserva encontrada no sistema.

) : ( reservations.map((reservation) => (

{reservation.status === "confirmed" ? "Confirmada" : "Pendente"} Reserva #{reservation.id.slice(-4)}

Destino:

{reservation.trip.city}

Horário:

{reservation.trip.time}

Passageiro:

{reservation.passenger.name}

Telefone:

{reservation.passenger.phone}

R$ {reservation.trip.price}

{reservation.date}

)) )}

)}

{showLoginForm && (

Fazer Login

Telefone setLoginForm({ ...loginForm, phone: e.target.value })} placeholder="(00) 00000-0000" />

setLoginForm({ ...loginForm, isAdminLogin: e.target.checked })} /> Login como administrador

)} {selectedTrip && showReservationForm && (

Dados da Reserva {/* Trip Details */}

Destino: {selectedTrip.city}

Horário: {selectedTrip.time}

Valor: R$ {selectedTrip.price}

{/* Passenger Form */}

Nome Completo * setReservationForm({ ...reservationForm, name: e.target.value })} placeholder="Digite seu nome completo" />

Telefone * setReservationForm({ ...reservationForm, phone: e.target.value })} placeholder="(00) 00000-0000" disabled={isLoggedIn && !isAdmin} /> {isLoggedIn && !isAdmin && (

Telefone preenchido automaticamente

)}

E-mail (opcional) setReservationForm({ ...reservationForm, email: e.target.value })} placeholder="seu@email.com" />

Preferência de Assento

)}

) }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This