How to Build Property management system with V0

1// Paste this prompt into V0's AI chat:
2// Build a property management system. Create a Supabase schema with:
3// 1. properties: id (uuid PK), owner_id (uuid FK), name (text), address (text), type (text check residential/commercial), units_count (integer), created_at (timestamptz)
4// 2. units: id (uuid PK), property_id (uuid FK), unit_number (text), bedrooms (integer), bathrooms (numeric), rent_amount (integer), status (text check vacant/occupied/maintenance), created_at (timestamptz)
5// 3. tenants: id (uuid PK), user_id (uuid nullable), first_name (text), last_name (text), email (text), phone (text), created_at (timestamptz)
6// 4. leases: id (uuid PK), unit_id (uuid FK), tenant_id (uuid FK), start_date (date), end_date (date), monthly_rent (integer), deposit (integer), status (text check active/expired/terminated), created_at (timestamptz)
7// 5. payments: id (uuid PK), lease_id (uuid FK), amount (integer), payment_date (date), method (text), status (text check paid/pending/overdue/partial), created_at (timestamptz)
8// 6. maintenance_requests: id (uuid PK), unit_id (uuid FK), tenant_id (uuid FK nullable), title (text), description (text), priority (text check low/medium/high/emergency), status (text check open/in_progress/completed), created_at (timestamptz)
9// RLS: owner_id = auth.uid() for all property-related queries.
10// Generate SQL migration and TypeScript types.

1// Paste this prompt into V0's AI chat:
2// Build a property management dashboard at app/properties/page.tsx.
3// Requirements:
4// - Protected by Clerk auth
5// - Top row of 4 metric Cards:
6//   - Total Units (count of units), Occupied (count where status=occupied), Occupancy Rate (percentage), Monthly Revenue (sum of active lease monthly_rent)
7// - Property list below as Cards showing: property name, address, units count, occupancy Badge
8// - Each property Card is clickable → navigates to app/properties/[id]/page.tsx
9// - Use Tabs to switch between: All Properties, Residential, Commercial
10// - Use shadcn/ui Badge for property type (residential=blue, commercial=purple)
11// - Data fetched server-side using Supabase database views joining units and leases
12// - Server Components for all data fetching

1import { createClient } from '@/lib/supabase/server'
2import { Card } from '@/components/ui/card'
3import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
4import { Badge } from '@/components/ui/badge'
5
6const statusColors = {
7  paid: 'default',
8  pending: 'secondary',
9  overdue: 'destructive',
10  partial: 'outline',
11} as const
12
13export default async function PaymentsPage() {
14  const supabase = await createClient()
15
16  const { data: leases } = await supabase
17    .from('leases')
18    .select(`
19      id, monthly_rent, status,
20      units!inner(unit_number, properties!inner(name)),
21      tenants!inner(first_name, last_name, email),
22      payments(amount, payment_date, status)
23    `)
24    .eq('status', 'active')
25    .order('created_at', { ascending: false })
26
27  const totalExpected = leases?.reduce((sum, l) => sum + l.monthly_rent, 0) ?? 0
28  const totalCollected = leases?.reduce((sum, l) => {
29    const paid = l.payments?.filter((p: { status: string }) => p.status === 'paid')
30      .reduce((s: number, p: { amount: number }) => s + p.amount, 0) ?? 0
31    return sum + paid
32  }, 0) ?? 0
33
34  return (
35    <div className="p-6 space-y-6">
36      <div className="grid grid-cols-3 gap-4">
37        <Card className="p-4">
38          <p className="text-sm text-muted-foreground">Expected</p>
39          <p className="text-2xl font-bold">${(totalExpected / 100).toLocaleString()}</p>
40        </Card>
41        <Card className="p-4">
42          <p className="text-sm text-muted-foreground">Collected</p>
43          <p className="text-2xl font-bold">${(totalCollected / 100).toLocaleString()}</p>
44        </Card>
45        <Card className="p-4">
46          <p className="text-sm text-muted-foreground">Outstanding</p>
47          <p className="text-2xl font-bold text-destructive">
48            ${((totalExpected - totalCollected) / 100).toLocaleString()}
49          </p>
50        </Card>
51      </div>
52
53      <Table>
54        <TableHeader>
55          <TableRow>
56            <TableHead>Property</TableHead>
57            <TableHead>Unit</TableHead>
58            <TableHead>Tenant</TableHead>
59            <TableHead>Rent</TableHead>
60            <TableHead>Status</TableHead>
61          </TableRow>
62        </TableHeader>
63        <TableBody>
64          {leases?.map((lease) => (
65            <TableRow key={lease.id}>
66              <TableCell>{(lease.units as any).properties.name}</TableCell>
67              <TableCell>{(lease.units as any).unit_number}</TableCell>
68              <TableCell>
69                {(lease.tenants as any).first_name} {(lease.tenants as any).last_name}
70              </TableCell>
71              <TableCell>${(lease.monthly_rent / 100).toLocaleString()}</TableCell>
72              <TableCell>
73                <Badge variant={statusColors[(lease.payments?.[0] as any)?.status ?? 'pending'] ?? 'secondary'}>
74                  {(lease.payments?.[0] as any)?.status ?? 'pending'}
75                </Badge>
76              </TableCell>
77            </TableRow>
78          ))}
79        </TableBody>
80      </Table>
81    </div>
82  )
83}

1// Paste this prompt into V0's AI chat:
2// Build a maintenance request page at app/maintenance/page.tsx.
3// Requirements:
4// - Show all maintenance requests in a shadcn/ui Table
5// - Columns: unit number, tenant name, title, priority Badge (emergency=red, high=orange, medium=blue, low=gray), status Badge (open=yellow, in_progress=blue, completed=green), created_at
6// - Filter by status using shadcn/ui Tabs: All, Open, In Progress, Completed
7// - Filter by priority using Select dropdown
8// - Sort by priority (emergency first) then created_at
9// - Clicking a row opens a Dialog with full description and status update controls
10// - Status update: Select for new status, Textarea for notes, Button to save
11// - "New Request" Button opens Dialog with: Select for unit, Input for title, Textarea for description, Select for priority
12// - Server Actions: createMaintenanceRequest(), updateMaintenanceStatus()
13// - Use Server Components for data fetching

1// Paste this prompt into V0's AI chat:
2// Build tenant and lease management:
3// 1. Tenant directory at app/tenants/page.tsx:
4//    - Searchable Table of all tenants with first_name, last_name, email, phone, active lease unit
5//    - "Add Tenant" Button opens Dialog with Input fields for name, email, phone
6//    - Clicking a tenant row shows their lease history and payment history
7//    - Server Action: createTenant()
8// 2. Lease creation at app/properties/[id]/page.tsx:
9//    - In the property detail view, each unit Card has an "Add Lease" Button (only for vacant units)
10//    - Dialog with: Select for tenant (from tenants table), Calendar for start_date and end_date, Input for monthly_rent and deposit
11//    - Creating a lease automatically sets unit status to 'occupied'
12//    - AlertDialog for lease termination ("This will mark the unit as vacant")
13//    - Server Actions: createLease(), terminateLease()
14// 3. Both use Server Components for data fetching, 'use client' for interactive forms