How to Build a Vehicle Rentals Backend with Lovable

1-- Run in Supabase SQL Editor
2create table vehicles (
3  id uuid primary key default gen_random_uuid(),
4  make text not null,
5  model text not null,
6  year int,
7  license_plate text unique,
8  daily_rate numeric(10,2) not null,
9  category text default 'sedan' check (category in ('sedan','suv','truck','van','luxury','electric')),
10  status text default 'available' check (status in ('available','maintenance','retired')),
11  photo_path text,
12  created_at timestamptz default now()
13);
14
15create table renters (
16  id uuid primary key default gen_random_uuid(),
17  user_id uuid references auth.users(id),
18  full_name text not null,
19  email text not null,
20  phone text,
21  license_number text,
22  created_at timestamptz default now()
23);
24
25create table bookings (
26  id uuid primary key default gen_random_uuid(),
27  vehicle_id uuid references vehicles(id) on delete restrict,
28  renter_id uuid references renters(id) on delete restrict,
29  start_date date not null,
30  end_date date not null,
31  total_amount numeric(10,2),
32  status text default 'pending' check (status in ('pending','confirmed','active','completed','cancelled')),
33  notes text,
34  created_at timestamptz default now(),
35  constraint valid_dates check (end_date > start_date)
36);
37
38create index idx_bookings_vehicle_dates on bookings(vehicle_id, start_date, end_date);
39
40-- Availability check function
41create or replace function check_vehicle_availability(
42  p_vehicle_id uuid,
43  p_start date,
44  p_end date,
45  p_exclude_booking_id uuid default null
46) returns boolean language sql as $$
47  select not exists (
48    select 1 from bookings
49    where vehicle_id = p_vehicle_id
50      and status not in ('cancelled')
51      and (p_exclude_booking_id is null or id != p_exclude_booking_id)
52      and start_date < p_end
53      and end_date > p_start
54  );
55$$;
56
57-- RLS
58alter table vehicles enable row level security;
59alter table renters enable row level security;
60alter table bookings enable row level security;
61
62create policy "Public read vehicles" on vehicles for select using (true);
63create policy "Auth read renters own" on renters for select using (auth.uid() = user_id);
64create policy "Auth manage own bookings" on bookings for all using (renter_id in (select id from renters where user_id = auth.uid()));
65create policy "Service role full access" on bookings for all using (auth.role() = 'service_role');

1Build a /fleet page showing all vehicles as a responsive grid (3 columns on desktop, 1 on mobile).
2
3For each vehicle, render a shadcn Card with:
4- Top: vehicle photo from Supabase Storage (photo_path field), aspect-video, object-cover, rounded top
5- If no photo, show a gray placeholder with a car icon
6- Body: '{year} {make} {model}' as the title
7- Category Badge (sedan=blue, suv=green, truck=orange, luxury=purple, electric=teal)
8- Daily rate in large text: '$X.XX / day'
9- Status: green dot 'Available' or red dot 'In Maintenance'
10- 'Book Now' Button (disabled if status != 'available')
11
12Fetch vehicles from Supabase ordered by daily_rate ascending.
13Add a filter bar above the grid with category Select and max price Slider.
14Clicking 'Book Now' opens the BookingDialog component.
15All TypeScript, use a Vehicle interface.

1import { useState } from 'react'
2import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
3import { Calendar } from '@/components/ui/calendar'
4import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
5import { Button } from '@/components/ui/button'
6import { Alert } from '@/components/ui/alert'
7import { Badge } from '@/components/ui/badge'
8import { DateRange } from 'react-day-picker'
9import { format, differenceInDays } from 'date-fns'
10import { supabase } from '@/lib/supabase'
11import { toast } from 'sonner'
12
13interface Vehicle {
14  id: string
15  make: string
16  model: string
17  year: number
18  daily_rate: number
19}
20
21interface BookingDialogProps {
22  vehicle: Vehicle | null
23  onClose: () => void
24  renterId: string
25}
26
27export function BookingDialog({ vehicle, onClose, renterId }: BookingDialogProps) {
28  const [dateRange, setDateRange] = useState<DateRange | undefined>()
29  const [available, setAvailable] = useState<boolean | null>(null)
30  const [loading, setLoading] = useState(false)
31
32  const nights = dateRange?.from && dateRange?.to
33    ? differenceInDays(dateRange.to, dateRange.from)
34    : 0
35  const total = nights * (vehicle?.daily_rate ?? 0)
36
37  const checkAvailability = async (range: DateRange) => {
38    if (!range.from || !range.to || !vehicle) return
39    const { data } = await supabase.rpc('check_vehicle_availability', {
40      p_vehicle_id: vehicle.id,
41      p_start: format(range.from, 'yyyy-MM-dd'),
42      p_end: format(range.to, 'yyyy-MM-dd')
43    })
44    setAvailable(data as boolean)
45  }
46
47  const handleDateChange = (range: DateRange | undefined) => {
48    setDateRange(range)
49    setAvailable(null)
50    if (range?.from && range?.to) checkAvailability(range)
51  }
52
53  const confirmBooking = async () => {
54    if (!vehicle || !dateRange?.from || !dateRange?.to) return
55    setLoading(true)
56    const { error } = await supabase.from('bookings').insert({
57      vehicle_id: vehicle.id,
58      renter_id: renterId,
59      start_date: format(dateRange.from, 'yyyy-MM-dd'),
60      end_date: format(dateRange.to, 'yyyy-MM-dd'),
61      total_amount: total,
62      status: 'pending'
63    })
64    setLoading(false)
65    if (error) { toast.error('Booking failed: ' + error.message); return }
66    toast.success('Booking confirmed!')
67    onClose()
68  }
69
70  return (
71    <Dialog open={!!vehicle} onOpenChange={onClose}>
72      <DialogContent className="max-w-md">
73        <DialogHeader>
74          <DialogTitle>{vehicle?.year} {vehicle?.make} {vehicle?.model}</DialogTitle>
75        </DialogHeader>
76        <div className="space-y-4">
77          <Popover>
78            <PopoverTrigger asChild>
79              <Button variant="outline" className="w-full justify-start">
80                {dateRange?.from && dateRange?.to
81                  ? `${format(dateRange.from, 'MMM d')} - ${format(dateRange.to, 'MMM d, yyyy')}`
82                  : 'Select pickup and return dates'}
83              </Button>
84            </PopoverTrigger>
85            <PopoverContent className="w-auto p-0" align="start">
86              <Calendar mode="range" selected={dateRange} onSelect={handleDateChange}
87                disabled={{ before: new Date() }} numberOfMonths={2} />
88            </PopoverContent>
89          </Popover>
90          {available === false && (
91            <Alert variant="destructive">These dates are not available. Please choose different dates.</Alert>
92          )}
93          {available === true && nights > 0 && (
94            <div className="bg-muted rounded-lg p-4 space-y-1">
95              <div className="flex justify-between text-sm"><span>{nights} nights</span><span>${vehicle?.daily_rate}/night</span></div>
96              <div className="flex justify-between font-semibold"><span>Total</span><span>${total.toFixed(2)}</span></div>
97            </div>
98          )}
99        </div>
100        <DialogFooter>
101          <Button variant="outline" onClick={onClose}>Cancel</Button>
102          <Button onClick={confirmBooking} disabled={!available || loading}>Confirm Booking</Button>
103        </DialogFooter>
104      </DialogContent>
105    </Dialog>
106  )
107}

1Build an /admin/bookings page (protected route, require admin role).
2
3Fetch bookings with a join to vehicles (make, model) and renters (full_name, email).
4
5Render a shadcn DataTable with columns:
6- renter_name (text)
7- vehicle ('{year} {make} {model}')
8- start_date (formatted)
9- end_date (formatted)
10- nights (calculated: end_date - start_date)
11- total_amount ('$X.XX')
12- status Badge: pending=yellow, confirmed=blue, active=green, completed=gray, cancelled=red
13- Actions: DropdownMenu with 'Confirm', 'Mark Active', 'Mark Completed', 'Cancel'
14
15Above the table add:
16- Status Select filter (all/pending/confirmed/active/completed/cancelled)
17- Date range Popover filter for start_date
18- Search Input filtering by renter name or vehicle
19
20Updating status via the DropdownMenu does an immediate Supabase update and refreshes the row.
21Show total revenue and active booking count in two Card components above the table.

1Add two features to the fleet:
2
31. Vehicle photo upload (admin only):
4   - In the vehicle edit form, add a file Input (accept image/*)
5   - On upload, send to Supabase Storage bucket 'vehicle-photos' (public bucket)
6   - Use path: `${vehicleId}/cover.${extension}`
7   - Store the public URL in vehicles.photo_path
8   - Show a Progress bar during upload
9
102. Vehicle detail page at /fleet/:id:
11   - Show the vehicle photo, full specs, and daily rate
12   - Fetch all active bookings for this vehicle (status not in 'cancelled')
13   - Pass booked date ranges to a Calendar component's disabled prop
14   - Booked dates appear grayed out
15   - Show a legend: gray = unavailable, white = available
16   - 'Book This Vehicle' Button below the calendar opens BookingDialog
17
18For the public photo URL, use Supabase's getPublicUrl() method, not signed URLs.