How to Build a Property Management System with Lovable

1-- Run in Supabase SQL Editor
2create table public.profiles (
3  id uuid primary key references auth.users(id) on delete cascade,
4  role text not null check (role in ('landlord', 'tenant')),
5  full_name text
6);
7
8create table public.properties (
9  id uuid primary key default gen_random_uuid(),
10  landlord_id uuid not null references public.profiles(id),
11  address text not null,
12  unit_count integer not null default 1,
13  created_at timestamptz not null default now()
14);
15
16create table public.tenants (
17  id uuid primary key default gen_random_uuid(),
18  user_id uuid references public.profiles(id),
19  property_id uuid not null references public.properties(id) on delete cascade,
20  landlord_id uuid not null references public.profiles(id),
21  full_name text not null,
22  email text not null,
23  rent_amount numeric not null,
24  lease_start date not null,
25  lease_end date not null
26);
27
28create table public.payments (
29  id uuid primary key default gen_random_uuid(),
30  tenant_id uuid not null references public.tenants(id) on delete cascade,
31  amount numeric not null,
32  due_date date not null,
33  paid_at timestamptz,
34  status text not null default 'pending' check (status in ('pending','paid','overdue'))
35);
36
37create table public.maintenance_requests (
38  id uuid primary key default gen_random_uuid(),
39  tenant_id uuid not null references public.tenants(id),
40  property_id uuid not null references public.properties(id),
41  title text not null,
42  description text,
43  priority text not null default 'medium' check (priority in ('low','medium','high','urgent')),
44  status text not null default 'open' check (status in ('open','in-progress','resolved')),
45  photo_url text,
46  created_at timestamptz not null default now()
47);
48
49alter table public.properties enable row level security;
50alter table public.tenants enable row level security;
51alter table public.payments enable row level security;
52alter table public.maintenance_requests enable row level security;
53alter table public.profiles enable row level security;
54
55-- Landlord sees all their properties
56create policy "landlord_properties" on public.properties for all to authenticated
57  using (landlord_id = auth.uid()) with check (landlord_id = auth.uid());
58
59-- Tenants see their own record; landlords see all their tenants
60create policy "tenant_self" on public.tenants for select to authenticated
61  using (user_id = auth.uid() or landlord_id = auth.uid());
62create policy "landlord_manage_tenants" on public.tenants for insert to authenticated
63  with check (landlord_id = auth.uid());
64create policy "landlord_update_tenants" on public.tenants for update to authenticated
65  using (landlord_id = auth.uid());
66
67-- Payments: tenant sees own, landlord sees all theirs
68create policy "payment_access" on public.payments for select to authenticated
69  using (tenant_id in (select id from public.tenants where user_id = auth.uid() or landlord_id = auth.uid()));
70create policy "landlord_manage_payments" on public.payments for all to authenticated
71  using (tenant_id in (select id from public.tenants where landlord_id = auth.uid()))
72  with check (tenant_id in (select id from public.tenants where landlord_id = auth.uid()));
73
74-- Maintenance: tenant sees/creates own; landlord sees all
75create policy "maintenance_access" on public.maintenance_requests for select to authenticated
76  using (tenant_id in (select id from public.tenants where user_id = auth.uid() or landlord_id = auth.uid()));
77create policy "tenant_create_maintenance" on public.maintenance_requests for insert to authenticated
78  with check (tenant_id in (select id from public.tenants where user_id = auth.uid()));
79create policy "landlord_update_maintenance" on public.maintenance_requests for update to authenticated
80  using (property_id in (select id from public.properties where landlord_id = auth.uid()));

1// Lovable prompt — paste into chat
2// Build a property management system with Supabase and two user roles: landlord and tenant.
3// On login, read the user's role from the profiles table.
4// Landlord routes (/admin/*):
5//   /admin/properties — DataTable: address, unit_count, occupancy, actions (View, Add Tenant)
6//   /admin/tenants — DataTable: name, property, rent_amount, lease_end, payment status Badge
7//   /admin/maintenance — DataTable: tenant, property, title, priority Badge, status Badge, actions
8//   /admin/payments — Calendar view showing due dates, Badge for paid/overdue/pending
9// Tenant routes (/portal):
10//   Single dashboard page: Card with lease details, payment history list, maintenance requests list
11//   Button to open a Dialog for new maintenance request (title, description, priority Select, photo upload)
12// Use shadcn/ui throughout. Protect landlord routes — redirect tenant users to /portal.
13// Use Supabase Auth for login/signup.

1// src/components/MaintenanceDialog.tsx
2import { useState } from 'react'
3import { useForm } from 'react-hook-form'
4import { zodResolver } from '@hookform/resolvers/zod'
5import { z } from 'zod'
6import { supabase } from '@/lib/supabase'
7import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
8import { Button } from '@/components/ui/button'
9import { Input } from '@/components/ui/input'
10import { Textarea } from '@/components/ui/textarea'
11import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
12import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
13import { toast } from 'sonner'
14
15const schema = z.object({
16  title: z.string().min(5).max(120),
17  description: z.string().max(800).optional(),
18  priority: z.enum(['low', 'medium', 'high', 'urgent'])
19})
20type FormValues = z.infer<typeof schema>
21
22type Props = { tenantId: string; propertyId: string; open: boolean; onClose: () => void; onSaved: () => void }
23
24export function MaintenanceDialog({ tenantId, propertyId, open, onClose, onSaved }: Props) {
25  const form = useForm<FormValues>({ resolver: zodResolver(schema), defaultValues: { priority: 'medium' } })
26  const [file, setFile] = useState<File | null>(null)
27  const [uploading, setUploading] = useState(false)
28
29  async function onSubmit(values: FormValues) {
30    setUploading(true)
31    let photoUrl: string | null = null
32    if (file) {
33      const path = `maintenance/${Date.now()}_${file.name}`
34      const { error: upErr } = await supabase.storage.from('maintenance-photos').upload(path, file)
35      if (upErr) { toast.error('Photo upload failed'); setUploading(false); return }
36      const { data } = supabase.storage.from('maintenance-photos').getPublicUrl(path)
37      photoUrl = data.publicUrl
38    }
39    const { error } = await supabase.from('maintenance_requests').insert({
40      ...values, tenant_id: tenantId, property_id: propertyId, photo_url: photoUrl
41    })
42    setUploading(false)
43    if (error) { toast.error('Failed to submit request'); return }
44    toast.success('Maintenance request submitted')
45    form.reset(); setFile(null); onSaved(); onClose()
46  }
47
48  return (
49    <Dialog open={open} onOpenChange={onClose}>
50      <DialogContent className="max-w-md">
51        <DialogHeader><DialogTitle>New Maintenance Request</DialogTitle></DialogHeader>
52        <Form {...form}>
53          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
54            <FormField control={form.control} name="title" render={({ field }) => (
55              <FormItem><FormLabel>Issue</FormLabel><FormControl><Input placeholder="Leaking tap in kitchen" {...field} /></FormControl><FormMessage /></FormItem>
56            )} />
57            <FormField control={form.control} name="description" render={({ field }) => (
58              <FormItem><FormLabel>Details</FormLabel><FormControl><Textarea placeholder="Describe the issue" {...field} /></FormControl><FormMessage /></FormItem>
59            )} />
60            <FormField control={form.control} name="priority" render={({ field }) => (
61              <FormItem><FormLabel>Priority</FormLabel>
62                <Select onValueChange={field.onChange} defaultValue={field.value}>
63                  <FormControl><SelectTrigger><SelectValue /></SelectTrigger></FormControl>
64                  <SelectContent>
65                    <SelectItem value="low">Low</SelectItem>
66                    <SelectItem value="medium">Medium</SelectItem>
67                    <SelectItem value="high">High</SelectItem>
68                    <SelectItem value="urgent">Urgent</SelectItem>
69                  </SelectContent>
70                </Select>
71                <FormMessage /></FormItem>
72            )} />
73            <div className="space-y-1">
74              <label className="text-sm font-medium">Photo (optional)</label>
75              <Input type="file" accept="image/*" onChange={e => setFile(e.target.files?.[0] ?? null)} />
76            </div>
77            <DialogFooter>
78              <Button variant="ghost" type="button" onClick={onClose}>Cancel</Button>
79              <Button type="submit" disabled={uploading}>{uploading ? 'Submitting...' : 'Submit'}</Button>
80            </DialogFooter>
81          </form>
82        </Form>
83      </DialogContent>
84    </Dialog>
85  )
86}

1// src/components/PaymentsCalendar.tsx
2import { useEffect, useState } from 'react'
3import { Calendar } from '@/components/ui/calendar'
4import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'
5import { Badge } from '@/components/ui/badge'
6import { Card, CardContent } from '@/components/ui/card'
7import { supabase } from '@/lib/supabase'
8import { format, isPast, isSameDay } from 'date-fns'
9
10type Payment = { id: string; due_date: string; amount: number; status: string; tenants: { full_name: string } }
11
12export function PaymentsCalendar() {
13  const [payments, setPayments] = useState<Payment[]>([])
14  const [selected, setSelected] = useState<Date | undefined>()
15  const [sheetOpen, setSheetOpen] = useState(false)
16
17  useEffect(() => {
18    supabase.from('payments').select('*, tenants(full_name)').then(({ data }) => setPayments(data ?? []))
19  }, [])
20
21  const dueDates = payments.map(p => new Date(p.due_date))
22
23  function handleSelect(date: Date | undefined) {
24    setSelected(date)
25    if (date) setSheetOpen(true)
26  }
27
28  const dayPayments = selected
29    ? payments.filter(p => isSameDay(new Date(p.due_date), selected))
30    : []
31
32  function statusVariant(p: Payment): 'default' | 'destructive' | 'outline' {
33    if (p.status === 'paid') return 'outline'
34    if (isPast(new Date(p.due_date)) && p.status !== 'paid') return 'destructive'
35    return 'default'
36  }
37
38  function statusLabel(p: Payment) {
39    if (p.status === 'paid') return 'Paid'
40    if (isPast(new Date(p.due_date))) return 'Overdue'
41    return 'Pending'
42  }
43
44  return (
45    <>
46      <Calendar
47        mode="single"
48        selected={selected}
49        onSelect={handleSelect}
50        modifiers={{ hasDue: dueDates }}
51        modifiersClassNames={{ hasDue: 'font-bold underline text-primary' }}
52      />
53      <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
54        <SheetContent>
55          <SheetHeader><SheetTitle>Payments due {selected ? format(selected, 'MMM d, yyyy') : ''}</SheetTitle></SheetHeader>
56          <div className="space-y-3 mt-4">
57            {dayPayments.length === 0 && <p className="text-muted-foreground text-sm">No payments due this day.</p>}
58            {dayPayments.map(p => (
59              <Card key={p.id}><CardContent className="pt-4 flex justify-between items-center">
60                <div><p className="font-medium">{p.tenants?.full_name}</p><p className="text-sm text-muted-foreground">${p.amount}/mo</p></div>
61                <Badge variant={statusVariant(p)}>{statusLabel(p)}</Badge>
62              </CardContent></Card>
63            ))}
64          </div>
65        </SheetContent>
66      </Sheet>
67    </>
68  )
69}

1// src/pages/TenantPortal.tsx
2import { useEffect, useState } from 'react'
3import { supabase } from '@/lib/supabase'
4import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
5import { Badge } from '@/components/ui/badge'
6import { Button } from '@/components/ui/button'
7import { MaintenanceDialog } from '@/components/MaintenanceDialog'
8import { format } from 'date-fns'
9
10export function TenantPortal() {
11  const [tenant, setTenant] = useState<any>(null)
12  const [payments, setPayments] = useState<any[]>([])
13  const [requests, setRequests] = useState<any[]>([])
14  const [dialogOpen, setDialogOpen] = useState(false)
15
16  async function load() {
17    const { data: { user } } = await supabase.auth.getUser()
18    if (!user) return
19    const { data: t } = await supabase.from('tenants').select('*, properties(address)').eq('user_id', user.id).single()
20    setTenant(t)
21    if (t) {
22      const [p, r] = await Promise.all([
23        supabase.from('payments').select('*').eq('tenant_id', t.id).order('due_date', { ascending: false }),
24        supabase.from('maintenance_requests').select('*').eq('tenant_id', t.id).order('created_at', { ascending: false })
25      ])
26      setPayments(p.data ?? [])
27      setRequests(r.data ?? [])
28    }
29  }
30
31  useEffect(() => { load() }, [])
32
33  if (!tenant) return <p className="p-6 text-muted-foreground">Loading your portal...</p>
34
35  return (
36    <div className="p-6 space-y-6 max-w-2xl">
37      <Card>
38        <CardHeader><CardTitle>Your Lease</CardTitle></CardHeader>
39        <CardContent className="space-y-1">
40          <p><span className="font-medium">Property:</span> {tenant.properties?.address}</p>
41          <p><span className="font-medium">Rent:</span> ${tenant.rent_amount}/mo</p>
42          <p><span className="font-medium">Lease:</span> {format(new Date(tenant.lease_start), 'MMM d, yyyy')} – {format(new Date(tenant.lease_end), 'MMM d, yyyy')}</p>
43        </CardContent>
44      </Card>
45      <Card>
46        <CardHeader><CardTitle>Payment History</CardTitle></CardHeader>
47        <CardContent className="space-y-2">
48          {payments.slice(0, 6).map(p => (
49            <div key={p.id} className="flex justify-between text-sm">
50              <span>{format(new Date(p.due_date), 'MMM yyyy')}</span>
51              <Badge variant={p.status === 'paid' ? 'outline' : p.status === 'overdue' ? 'destructive' : 'default'}>{p.status}</Badge>
52            </div>
53          ))}
54        </CardContent>
55      </Card>
56      <Card>
57        <CardHeader className="flex flex-row items-center justify-between">
58          <CardTitle>Maintenance Requests</CardTitle>
59          <Button size="sm" onClick={() => setDialogOpen(true)}>New Request</Button>
60        </CardHeader>
61        <CardContent className="space-y-2">
62          {requests.map(r => (
63            <div key={r.id} className="flex justify-between text-sm">
64              <span>{r.title}</span>
65              <Badge variant="outline">{r.status}</Badge>
66            </div>
67          ))}
68        </CardContent>
69      </Card>
70      {tenant && <MaintenanceDialog tenantId={tenant.id} propertyId={tenant.properties?.id} open={dialogOpen} onClose={() => setDialogOpen(false)} onSaved={load} />}
71    </div>
72  )
73}