[V0_FILE]typescriptreact:file="components/navigation.tsx" isMerged="true" "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { MapPin, Zap, User } from "lucide-react" import { Button } from "@/components/ui/button" export default function Navigation() { const pathname = usePathname() const isActive = (path: string) => pathname === path return (

Para

) } [V0_FILE]typescriptreact:file="app/profile/page.tsx" isMerged="true" "use client" import { useState } from "react" import { CreditCard, Edit2, LogOut, Mail, Phone, Wallet, Plus } from "lucide-react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import Navigation from "@/components/navigation" interface UserProfile { name: string email: string phone: string walletBalance: number totalRides: number rating: number } export default function ProfilePage() { const [profile, setProfile] = useState({ name: "Maria Santos", email: "maria.santos@email.com", phone: "+63 912 345 6789", walletBalance: 1850, totalRides: 24, rating: 4.9, }) const [isEditing, setIsEditing] = useState(false) const [editValues, setEditValues] = useState(profile) const [showTopupForm, setShowTopupForm] = useState(false) const [topupAmount, setTopupAmount] = useState("") const [showPassword, setShowPassword] = useState(false) const handleSaveProfile = () => { setProfile(editValues) setIsEditing(false) } const handleTopup = () => { if (topupAmount && Number.parseInt(topupAmount) > 0) { setProfile((prev) => ({ ...prev, walletBalance: prev.walletBalance + Number.parseInt(topupAmount), })) setTopupAmount("") setShowTopupForm(false) } } const quickTopupAmounts = [100, 250, 500, 1000] return (

👤

{profile.name}

Member since 2024

Total Rides

{profile.totalRides}

Rating

⭐ {profile.rating}

Rides This Month

Wallet Balance

₱{profile.walletBalance}

{showTopupForm && (

Add Funds

{quickTopupAmounts.map((amount) => ( ))}

setTopupAmount(e.target.value)} placeholder="Enter custom amount" className="w-full px-4 py-2 border border-border rounded-lg bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary mb-4" min="0" />

)}

Profile Information

Full Name isEditing && setEditValues({ ...editValues, name: e.target.value })} disabled={!isEditing} className={`w-full px-4 py-2 rounded-lg border transition-all ${ isEditing ? "bg-background border-border focus:ring-2 focus:ring-primary focus:outline-none" : "bg-muted border-transparent cursor-default" }`} />

Email Address isEditing && setEditValues({ ...editValues, email: e.target.value })} disabled={!isEditing} className={`w-full px-4 py-2 rounded-lg border transition-all ${ isEditing ? "bg-background border-border focus:ring-2 focus:ring-primary focus:outline-none" : "bg-muted border-transparent cursor-default" }`} />

Phone Number isEditing && setEditValues({ ...editValues, phone: e.target.value })} disabled={!isEditing} className={`w-full px-4 py-2 rounded-lg border transition-all ${ isEditing ? "bg-background border-border focus:ring-2 focus:ring-primary focus:outline-none" : "bg-muted border-transparent cursor-default" }`} />

Payment Methods

Mastercard

•••• 4242

Default

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="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: "Para PH - Book Your Ride", description: "Track Jeeps and Book Trikes", 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]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": "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.3", "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" } } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Custom color scheme while preserving all default shadcn/ui tokens */ --background: oklch(0.98 0 0); --foreground: oklch(0.15 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.15 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.15 0 0); --primary: oklch(0.58 0.22 31.5); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.5 0.2 264); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.92 0 0); --muted-foreground: oklch(0.5 0 0); --accent: oklch(0.58 0.22 31.5); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.9 0 0); --input: oklch(0.95 0 0); --ring: oklch(0.58 0.22 31.5); --chart-1: oklch(0.58 0.22 31.5); --chart-2: oklch(0.5 0.2 264); --chart-3: oklch(0.65 0.18 125); --chart-4: oklch(0.55 0.2 15); --chart-5: oklch(0.6 0.19 275); --radius: 0.75rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.58 0.22 31.5); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.92 0 0); --sidebar-accent-foreground: oklch(0.15 0 0); --sidebar-border: oklch(0.9 0 0); --sidebar-ring: oklch(0.58 0.22 31.5); } .dark { --background: oklch(0.12 0 0); --foreground: oklch(0.95 0 0); --card: oklch(0.18 0 0); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.18 0 0); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.65 0.22 31.5); --primary-foreground: oklch(0.12 0 0); --secondary: oklch(0.58 0.2 264); --secondary-foreground: oklch(0.12 0 0); --muted: oklch(0.3 0 0); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.65 0.22 31.5); --accent-foreground: oklch(0.12 0 0); --destructive: oklch(0.596 0.194 27.055); --destructive-foreground: oklch(0.596 0.194 27.055); --border: oklch(0.25 0 0); --input: oklch(0.2 0 0); --ring: oklch(0.65 0.22 31.5); --chart-1: oklch(0.72 0.22 31.5); --chart-2: oklch(0.68 0.2 264); --chart-3: oklch(0.75 0.18 125); --chart-4: oklch(0.7 0.2 15); --chart-5: oklch(0.72 0.19 275); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.72 0.22 31.5); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.3 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.25 0 0); --sidebar-ring: oklch(0.65 0.22 31.5); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --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]typescriptreact:file="components/interactive-map.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { Card } from "@/components/ui/card" import VehicleMarker from "@/components/vehicle-marker" interface Vehicle { id: string type: "tricycle" | "jeepney" route: number x: number y: number color: string plate: string passengers: number maxPassengers: number progress: number } const ROUTE_COLORS: Record = { 1: "#FF6B35", 2: "#004E89", 3: "#1AC8ED", 4: "#F77F00", } const ROUTE_PATHS: Record = { 1: [ [10, 30], [25, 25], [40, 28], [55, 35], [70, 32], [85, 28], [95, 35], [85, 40], [70, 38], [55, 42], [40, 40], [25, 38], ], 2: [ [30, 100], [35, 80], [40, 60], [50, 40], [60, 25], [70, 15], [75, 10], [70, 20], [60, 35], [50, 50], [40, 70], [35, 90], ], 3: [ [5, 50], [20, 45], [35, 48], [50, 52], [65, 50], [80, 48], [95, 52], [80, 56], [65, 58], [50, 55], [35, 57], [20, 55], ], 4: [ [100, 20], [80, 30], [65, 40], [50, 55], [40, 65], [25, 75], [15, 85], [30, 78], [45, 65], [60, 50], [75, 38], [90, 25], ], } const generateSVGPath = (points: [number, number][]): string => { if (points.length === 0) return "" const pathData = points.map((point, index) => { const command = index === 0 ? "M" : "L" return `${command} ${point[0]} ${point[1]}` }) return pathData.join(" ") } export default function InteractiveMap({ selectedRoutes }: { selectedRoutes: number[] }) { const [vehicles, setVehicles] = useState([]) useEffect(() => { const initialVehicles: Vehicle[] = [ { id: "t1", type: "tricycle", route: 1, x: 10, y: 30, color: "#FF6B35", plate: "TRX-001", passengers: 3, maxPassengers: 4, progress: 0, }, { id: "t2", type: "tricycle", route: 2, x: 30, y: 100, color: "#004E89", plate: "TRX-002", passengers: 2, maxPassengers: 4, progress: 0, }, { id: "t3", type: "tricycle", route: 3, x: 5, y: 50, color: "#1AC8ED", plate: "TRX-003", passengers: 4, maxPassengers: 4, progress: 0, }, { id: "j1", type: "jeepney", route: 1, x: 40, y: 28, color: "#FF6B35", plate: "JEP-001", passengers: 12, maxPassengers: 14, progress: 3, }, { id: "j2", type: "jeepney", route: 4, x: 100, y: 20, color: "#F77F00", plate: "JEP-002", passengers: 8, maxPassengers: 14, progress: 0, }, { id: "j3", type: "jeepney", route: 2, x: 50, y: 40, color: "#004E89", plate: "JEP-003", passengers: 10, maxPassengers: 14, progress: 4, }, ] setVehicles(initialVehicles) }, []) useEffect(() => { const interval = setInterval(() => { setVehicles((prev) => prev.map((vehicle) => { const routePath = ROUTE_PATHS[vehicle.route] const totalSteps = routePath.length const nextProgress = (vehicle.progress + 1) % totalSteps const [nextX, nextY] = routePath[nextProgress] return { ...vehicle, x: nextX, y: nextY, progress: nextProgress, } }), ) }, 2000) return () => clearInterval(interval) }, []) const filteredVehicles = selectedRoutes.length > 0 ? vehicles.filter((v) => selectedRoutes.includes(v.route)) : vehicles const visibleRoutes = selectedRoutes.length > 0 ? selectedRoutes : Object.keys(ROUTE_PATHS).map(Number) return (

{filteredVehicles.map((vehicle) => ( ))}

) } [V0_FILE]typescriptreact:file="components/vehicle-marker.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card } from "@/components/ui/card" import { Users, Zap } from "lucide-react" interface Vehicle { id: string type: "tricycle" | "jeepney" route: number x: number y: number color: string plate: string passengers: number maxPassengers: number progress: number } export default function VehicleMarker({ vehicle }: { vehicle: Vehicle }) { const [showInfo, setShowInfo] = useState(false) const occupancyPercent = (vehicle.passengers / vehicle.maxPassengers) * 100 return (

{showInfo && (

{vehicle.plate}

{vehicle.type} • Route {String.fromCharCode(64 + vehicle.route)}

Passengers {vehicle.passengers}/{vehicle.maxPassengers}

{occupancyPercent === 100 ? "Full" : `${Math.round(occupancyPercent)}% full`}

)}

) } [V0_FILE]typescriptreact:file="components/booking-map.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState, useRef } from "react" import { Card } from "@/components/ui/card" interface BookingMapProps { booking: any } export default function BookingMap({ booking }: BookingMapProps) { const [vehiclePos, setVehiclePos] = useState({ x: 70, y: 30 }) const [userPos] = useState({ x: 20, y: 50 }) const [finishPos] = useState({ x: 75, y: 75 }) const [progress, setProgress] = useState(0) const [stage, setStage] = useState<"to-user" | "to-finish">("to-user") const startTimeRef = useRef(null) const stageStartTimeRef = useRef(null) useEffect(() => { if (!booking) { setVehiclePos({ x: 70, y: 30 }) setProgress(0) setStage("to-user") startTimeRef.current = null stageStartTimeRef.current = null return } if (!startTimeRef.current) { startTimeRef.current = Date.now() stageStartTimeRef.current = Date.now() } let animationFrame: NodeJS.Timeout const animate = () => { const now = Date.now() const stageDuration = 5000 const stageElapsed = now - (stageStartTimeRef.current || now) const t = Math.min(stageElapsed / stageDuration, 1) if (stage === "to-user") { // Move to user position over 5 seconds const newX = 70 + (userPos.x - 70) * t const newY = 30 + (userPos.y - 30) * t setVehiclePos({ x: newX, y: newY }) setProgress(t) if (t >= 1) { // Transition to finish stage setStage("to-finish") stageStartTimeRef.current = Date.now() } } else { // Move from user to finish position over 5 seconds const newX = userPos.x + (finishPos.x - userPos.x) * t const newY = userPos.y + (finishPos.y - userPos.y) * t setVehiclePos({ x: newX, y: newY }) setProgress(t) } animationFrame = setTimeout(animate, 16) } animationFrame = setTimeout(animate, 16) return () => clearTimeout(animationFrame) }, [booking, userPos, finishPos, stage]) return (

📍

{booking && (

🛺

)}

🏁

{booking && (

{stage === "to-finish" ? "Heading to destination!" : `${booking.eta}m until arrival`}

)}

) } [V0_FILE]typescriptreact:file="app/booking/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import Navigation from "@/components/navigation" import BookingMap from "@/components/booking-map" import { ChevronDown, ChevronUp } from "lucide-react" interface BookingDetails { id: string type: "tricycle" status: "searching" | "found" | "arriving" | "arrived" plate: string color: string eta: number distance: number fare: number driver: string rating: number } export default function BookingPage() { const [isSearching, setIsSearching] = useState(false) const [booking, setBooking] = useState(null) const [pickupLocation, setPickupLocation] = useState("My Location") const [destinationLocation, setDestinationLocation] = useState("Destination") const [isBookingMinimized, setIsBookingMinimized] = useState(false) const [isMobile, setIsMobile] = useState(false) useEffect(() => { const checkMobile = () => setIsMobile(window.innerWidth < 1024) checkMobile() window.addEventListener("resize", checkMobile) return () => window.removeEventListener("resize", checkMobile) }, []) const handleBooking = () => { setIsSearching(true) // Simulate finding a tricycle setTimeout(() => { setBooking({ id: "t1", type: "tricycle", status: "found", plate: "TRX-001", color: "#FF6B35", eta: 5, distance: 2.4, fare: 85, driver: "Juan Santos", rating: 4.8, }) setIsSearching(false) }, 3000) } useEffect(() => { if (booking && booking.status === "found") { // Animate ETA countdown const interval = setInterval(() => { setBooking((prev) => { if (!prev) return null const newEta = Math.max(0, prev.eta - 1) return { ...prev, eta: newEta, status: newEta === 0 ? "arrived" : prev.status, } }) }, 1000) return () => clearInterval(interval) } }, [booking]) return (

{!isBookingMinimized && (

Book a Ride

{booking && isMobile && ( )}

Pickup Location setPickupLocation(e.target.value)} className="w-full px-4 py-2 border border-border rounded-lg bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Enter pickup location" />

Destination setDestinationLocation(e.target.value)} className="w-full px-4 py-2 border border-border rounded-lg bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Enter destination" />

{booking && (

Estimated Fare ₱{booking.fare}

Distance: {booking.distance} km

)} {booking && ( <>

Status {booking.status === "arrived" ? "Arrived" : `${booking.eta}m away`}

{booking.driver}

⭐ {booking.rating} {booking.plate}

)}

)} {isBookingMinimized && isMobile && ( )}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Filter, ChevronUp, ChevronDown, Bell } from "lucide-react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import InteractiveMap from "@/components/interactive-map" import Navigation from "@/components/navigation" const ROUTES = [ { id: 1, name: "Batangas City - Balagtas", color: "#FF6B35", description: "Main commercial district" }, { id: 2, name: "Batangas City - Sorosoro", color: "#004E89", description: "Residential area" }, { id: 3, name: "Batangas City - Bauan", color: "#1AC8ED", description: "Shopping & entertainment" }, { id: 4, name: "Batangas City - Alangilan", color: "#F77F00", description: "Business hub" }, ] export default function HomePage() { const [selectedRoutes, setSelectedRoutes] = useState([]) const [isFilterExpanded, setIsFilterExpanded] = useState(false) const [isTransitMinimized, setIsTransitMinimized] = useState(false) const [notifyRoutes, setNotifyRoutes] = useState([]) const [isNotifyExpanded, setIsNotifyExpanded] = useState(false) const [activeTab, setActiveTab] = useState<"filter" | "notify">("filter") const toggleRoute = (routeId: number) => { setSelectedRoutes((prev) => (prev.includes(routeId) ? prev.filter((id) => id !== routeId) : [...prev, routeId])) } const toggleNotifyRoute = (routeId: number) => { setNotifyRoutes((prev) => (prev.includes(routeId) ? prev.filter((id) => id !== routeId) : [...prev, routeId])) } const clearFilters = () => setSelectedRoutes([]) const clearNotifications = () => setNotifyRoutes([]) return (

{!isTransitMinimized && (

{selectedRoutes.length > 0 ? selectedRoutes.length : "All"} Route(s)

{selectedRoutes.length > 0 ? "Filtered" : "All routes active"}

)} {isTransitMinimized && ( )}

{selectedRoutes.length > 0 ? selectedRoutes.length : "All"} Route(s)

{selectedRoutes.length > 0 ? "Filtered" : "All routes active"}

Filter Routes

{ROUTES.map((route) => ( toggleRoute(route.id)} className="mt-1 w-4 h-4 rounded cursor-pointer" />

{route.name}

))}

{selectedRoutes.length > 0 && (

)}

Notify Me

{ROUTES.map((route) => ( toggleNotifyRoute(route.id)} className="mt-1 w-4 h-4 rounded cursor-pointer" />

{route.name}

))}

{notifyRoutes.length > 0 && (

)}

{isFilterExpanded ? (

Routes

{activeTab === "filter" && ROUTES.map((route) => ( toggleRoute(route.id)} className="mt-1 w-4 h-4 rounded cursor-pointer" />

{route.name}

))} {activeTab === "notify" && ROUTES.map((route) => ( toggleNotifyRoute(route.id)} className="mt-1 w-4 h-4 rounded cursor-pointer" />

{route.name}

))}

{activeTab === "filter" && selectedRoutes.length > 0 && (

)} {activeTab === "notify" && notifyRoutes.length > 0 && (

)} ) : ( )}

) } [V0_FILE]plaintext:file="api/.gitkeep" isDeleted="true" [V0_FILE]plaintext:file="app/api/.gitkeep" [V0_FILE]plaintext:file="app/api/update-location/.gitkeep" [V0_FILE]plaintext:file="app/api/get-vehicles/.gitkeep" [V0_FILE]typescript:file="app/api/get-vehicles/route.ts" import { NextResponse } from "next/server" import { getReadContract } from "@/lib/contract" export async function GET() { const contract = getReadContract() const vehicles = await contract.getAllVehicles() return NextResponse.json(vehicles) } [V0_FILE]typescript:file="app/api/update-location/route.ts" import { NextResponse } from "next/server" import { getWriteContract } from "@/lib/contract" export async function POST(req: Request) { const { id, x, y } = await req.json() const contract = getWriteContract() const tx = await contract.updateLocation(id, x, y) await tx.wait() return NextResponse.json({ success: true }) } [V0_FILE]plaintext:file="scaffold-backend/.gitkeep" [V0_FILE]plaintext:file="lib/.gitkeep" [V0_FILE]plaintext:file="scaffold-backend/contracts/.gitkeep" [V0_FILE]plaintext:file="scaffold-backend/scripts/.gitkeep" [V0_FILE]plaintext:file="scaffold-backend/contracts/BookingEscrow.sol" // SPDX-License-Identifier: MIT pragma solidity ^0.8.20; /* Simplified Booking + Escrow contract for ride bookings (tricycles/jeeps). - Uses ERC20 token for payments (could be a stablecoin) - Minimal: safe, emits events - NOT production-ready: audit, tests, and gas optimizations required */ interface IERC20 { function transferFrom(address from, address to, uint256 amount) external returns (bool); function transfer(address to, uint256 amount) external returns (bool); } /* Basic reentrancy guard */ abstract contract ReentrancyGuard { uint256 private _status; constructor() { _status = 1; } modifier nonReentrant() { require(_status == 1, "Reentrant"); _status = 2; _; _status = 1; } } contract BookingEscrow is ReentrancyGuard { address public owner; IERC20 public stable; // payment token uint256 public platformFeeBps = 200; // 2% default constructor(address _token) { owner = msg.sender; stable = IERC20(_token); } enum Status { None, Created, Accepted, Started, Completed, Cancelled, Disputed, Refunded } struct Booking { address passenger; address driver; uint256 amount; // in token smallest unit uint256 fee; // platform fee portion Status status; uint256 createdAt; } // bookingId -> Booking mapping(bytes32 => Booking) public bookings; // reputation (simple): sumRatings and count mapping(address => uint256) public ratingSum; mapping(address => uint256) public ratingCount; // events event BookingCreated(bytes32 indexed id, address indexed passenger, address indexed driver, uint256 amount); event BookingAccepted(bytes32 indexed id, address driver); event RideStarted(bytes32 indexed id); event RideCompleted(bytes32 indexed id); event BookingCancelled(bytes32 indexed id, address by); event PaymentReleased(bytes32 indexed id, address to, uint256 amount); event Disputed(bytes32 indexed id); modifier onlyOwner() { require(msg.sender == owner, "owner only"); _; } modifier onlyPassenger(bytes32 id) { require(bookings[id].passenger == msg.sender, "not passenger"); _; } modifier onlyDriver(bytes32 id) { require(bookings[id].driver == msg.sender, "not driver"); _; } modifier inStatus(bytes32 id, Status s) { require(bookings[id].status == s, "invalid status"); _; } // Administrator functions function setPlatformFee(uint256 bps) external onlyOwner { require(bps <= 1000, "fee too high"); platformFeeBps = bps; } // Create a booking and transfer tokens from passenger into escrow // bookingId should be a client-side generated unique id (e.g. keccak256 of passenger+timestamp+nonce) function createBooking(bytes32 bookingId, address driver, uint256 amount) external nonReentrant { require(bookings[bookingId].status == Status.None, "exists"); require(amount > 0, "amount 0"); uint256 fee = (amount * platformFeeBps) / 10000; // transferFrom passenger -> contract (passenger must approve first) require(stable.transferFrom(msg.sender, address(this), amount), "transfer failed"); bookings[bookingId] = Booking({ passenger: msg.sender, driver: driver, amount: amount, fee: fee, status: Status.Created, createdAt: block.timestamp }); emit BookingCreated(bookingId, msg.sender, driver, amount); } // Driver accepts function acceptBooking(bytes32 bookingId) external inStatus(bookingId, Status.Created) { require(bookings[bookingId].driver == msg.sender, "not assigned driver"); bookings[bookingId].status = Status.Accepted; emit BookingAccepted(bookingId, msg.sender); } // Passenger/Driver action to mark start function startRide(bytes32 bookingId) external inStatus(bookingId, Status.Accepted) { // allow either party to call start (or only driver). Here allow driver only. require(bookings[bookingId].driver == msg.sender, "driver only"); bookings[bookingId].status = Status.Started; emit RideStarted(bookingId); } // Complete the ride — either passenger or driver can call, but require Started function completeRide(bytes32 bookingId) external inStatus(bookingId, Status.Started) nonReentrant { Booking storage b = bookings[bookingId]; b.status = Status.Completed; uint256 net = b.amount - b.fee; // transfer net to driver require(stable.transfer(b.driver, net), "pay driver failed"); // transfer fee to owner (platform) if (b.fee > 0) { require(stable.transfer(owner, b.fee), "pay fee failed"); } emit RideCompleted(bookingId); emit PaymentReleased(bookingId, b.driver, net); } // passenger can cancel before acceptance and get refund function cancelBeforeAccept(bytes32 bookingId) external onlyPassenger(bookingId) inStatus(bookingId, Status.Created) nonReentrant { Booking storage b = bookings[bookingId]; b.status = Status.Cancelled; require(stable.transfer(b.passenger, b.amount), "refund failed"); emit BookingCancelled(bookingId, msg.sender); } // driver or passenger can raise dispute -> funds frozen until resolve function raiseDispute(bytes32 bookingId) external { Booking storage b = bookings[bookingId]; require(b.status == Status.Created || b.status == Status.Accepted || b.status == Status.Started, "cannot dispute"); require(msg.sender == b.passenger || msg.sender == b.driver, "not involved"); b.status = Status.Disputed; emit Disputed(bookingId); } // admin/arbitrator resolves dispute: release to driver or refund to passenger function resolveDispute(bytes32 bookingId, bool payDriver) external onlyOwner nonReentrant { Booking storage b = bookings[bookingId]; require(b.status == Status.Disputed, "not disputed"); b.status = payDriver ? Status.Completed : Status.Refunded; if (payDriver) { uint256 net = b.amount - b.fee; require(stable.transfer(b.driver, net), "pay driver failed"); if (b.fee > 0) require(stable.transfer(owner, b.fee), "pay fee failed"); emit PaymentReleased(bookingId, b.driver, net); } else { require(stable.transfer(b.passenger, b.amount), "refund failed"); } } // Ratings: 1..5 function rate(bytes32 bookingId, address target, uint8 score) external { require(score >= 1 && score <= 5, "score 1-5"); Booking storage b = bookings[bookingId]; require(b.status == Status.Completed || b.status == Status.Refunded, "not finished"); require(msg.sender == b.passenger || msg.sender == b.driver, "not a party"); // update simple aggregates ratingSum[target] += score; ratingCount[target] += 1; // NOTE: this allows duplicate ratings; in production track who rated whom per booking } // helper to get average rating *100 (two decimals) function avgRating(address who) external view returns (uint256) { if (ratingCount[who] == 0) return 0; return (ratingSum[who] * 100) / ratingCount[who]; } // Emergency: owner withdraw stuck tokens (use sparingly) function emergencyWithdraw(address tokenAddr, address to, uint256 amt) external onlyOwner { IERC20 t = IERC20(tokenAddr); require(t.transfer(to, amt), "withdraw failed"); } } [V0_FILE]javascript:file="scaffold-backend/scripts/scaffolddeployjs" isMoved="true" [V0_FILE]javascript:file="scaffold-backend/hardhat.config.js" [V0_FILE]json:file="scaffold-backend/package.json" [V0_FILE]markdown:file="scaffold-backend/README.md" [V0_FILE]typescript:file="lib/contract.ts" import { ethers } from "ethers" import ABI from "./VehicleTrackerABI.json" export function getReadContract() { const provider = new ethers.JsonRpcProvider(process.env.NEXT_PUBLIC_RPC_URL) return new ethers.Contract( process.env.NEXT_PUBLIC_CONTRACT_ADDRESS!, ABI, provider ) } export function getWriteContract() { const provider = new ethers.JsonRpcProvider(process.env.NEXT_PUBLIC_RPC_URL) const wallet = new ethers.Wallet( process.env.PRIVATE_KEY!, provider ) return new ethers.Contract( process.env.NEXT_PUBLIC_CONTRACT_ADDRESS!, ABI, wallet ) } [V0_FILE]json:file="lib/BookingEscrowABI.json"