mirror of
https://github.com/renee-png/acmcc.git
synced 2026-06-21 01:40:01 +00:00
admin
f549f21c21
- Waitlist now captures a free-form Size (requested_size column) in place of the type field in the internal form/table. - Lot type selector (add + bulk edit) expanded to RV, Boat, Travel Trailer, Fifth Wheel, Camper, Car, Truck, Trailer, Other. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
898 lines
50 KiB
TypeScript
898 lines
50 KiB
TypeScript
import { useEffect, useMemo, useState } from "react";
|
|
import { supabase } from "@/integrations/supabase/client";
|
|
import { useAssociation } from "@/contexts/AssociationContext";
|
|
import { useAuth } from "@/contexts/AuthContext";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import GoogleMapPicker, { type MapPinData } from "@/components/association/GoogleMapPicker";
|
|
import { toast } from "sonner";
|
|
import { Plus, Trash2, Check, ArrowUp, ArrowDown, Copy, Pencil, X } from "lucide-react";
|
|
|
|
type Lot = {
|
|
id: string; association_id: string; lot_number: string; lot_type: string;
|
|
size: string | null; monthly_rate: number | null; status: string; notes: string | null;
|
|
};
|
|
type Rental = {
|
|
id: string; association_id: string; lot_id: string; renter_name: string;
|
|
renter_email: string | null; renter_phone: string | null; vehicle_description: string | null;
|
|
start_date: string; end_date: string | null; monthly_rate: number | null; status: string; notes: string | null;
|
|
is_owner?: boolean | null; user_id?: string | null; owner_id?: string | null; unit_id?: string | null;
|
|
insurance_carrier?: string | null; insurance_policy_number?: string | null;
|
|
insurance_expiration_date?: string | null; insurance_document_url?: string | null;
|
|
};
|
|
type WaitlistEntry = {
|
|
id: string; association_id: string; position: number;
|
|
requester_name: string; requester_email: string | null; requester_phone: string | null;
|
|
unit_address: string | null; requested_lot_type: string; requested_size: string | null;
|
|
vehicle_description: string | null; notes: string | null;
|
|
status: string; source: string; joined_at: string;
|
|
fulfilled_at: string | null; fulfilled_lot_number: string | null;
|
|
};
|
|
|
|
const VEHICLE_TYPES = [
|
|
{ value: "rv", label: "RV" },
|
|
{ value: "boat", label: "Boat" },
|
|
{ value: "travel_trailer", label: "Travel Trailer" },
|
|
{ value: "fifth_wheel", label: "Fifth Wheel" },
|
|
{ value: "camper", label: "Camper" },
|
|
{ value: "car", label: "Car" },
|
|
{ value: "truck", label: "Truck" },
|
|
{ value: "trailer", label: "Trailer" },
|
|
{ value: "other", label: "Other" },
|
|
];
|
|
const vehicleTypeLabel = (v: string) => VEHICLE_TYPES.find(t => t.value === v)?.label || v;
|
|
|
|
export default function RVBoatLotsPage() {
|
|
const associationCtx = useAssociation() as any;
|
|
const ctxAssociation = associationCtx?.selectedAssociation ?? null;
|
|
const { user } = useAuth();
|
|
|
|
const [associations, setAssociations] = useState<{ id: string; name: string }[]>([]);
|
|
const [localAssociationId, setLocalAssociationId] = useState<string>("");
|
|
|
|
useEffect(() => {
|
|
supabase.from("associations").select("id, name").eq("status", "active").order("name").then(({ data }) => {
|
|
const list = data || [];
|
|
setAssociations(list);
|
|
setLocalAssociationId((prev) => prev || ctxAssociation?.id || list[0]?.id || "");
|
|
});
|
|
}, [ctxAssociation?.id]);
|
|
|
|
const associationId = localAssociationId || ctxAssociation?.id || "";
|
|
|
|
const [lots, setLots] = useState<Lot[]>([]);
|
|
const [rentals, setRentals] = useState<Rental[]>([]);
|
|
const [waitlist, setWaitlist] = useState<WaitlistEntry[]>([]);
|
|
const [owners, setOwners] = useState<any[]>([]);
|
|
const [units, setUnits] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
// dialogs
|
|
const [lotDialogOpen, setLotDialogOpen] = useState(false);
|
|
const [rentalDialogOpen, setRentalDialogOpen] = useState(false);
|
|
const [waitlistDialogOpen, setWaitlistDialogOpen] = useState(false);
|
|
const [fulfillDialog, setFulfillDialog] = useState<{ open: boolean; entry: WaitlistEntry | null; lotNumber: string }>({ open: false, entry: null, lotNumber: "" });
|
|
|
|
// form state
|
|
const [lotForm, setLotForm] = useState({ lot_number: "", lot_type: "rv", size: "", monthly_rate: "", notes: "" });
|
|
const [rentalForm, setRentalForm] = useState({
|
|
lot_id: "", renter_name: "", renter_email: "", renter_phone: "",
|
|
vehicle_description: "", start_date: new Date().toISOString().slice(0, 10), monthly_rate: "", notes: "",
|
|
owner_id: "", unit_id: ""
|
|
});
|
|
const [waitlistForm, setWaitlistForm] = useState({
|
|
requester_name: "", requester_email: "", requester_phone: "",
|
|
unit_address: "", requested_lot_type: "either", requested_size: "", vehicle_description: "", notes: ""
|
|
});
|
|
|
|
// batch edit state
|
|
const [selectedLotIds, setSelectedLotIds] = useState<Set<string>>(new Set());
|
|
const [lotBulkOpen, setLotBulkOpen] = useState(false);
|
|
const [savingLotBulk, setSavingLotBulk] = useState(false);
|
|
const [lotBulk, setLotBulk] = useState({ lot_type: "no_change", status: "no_change", monthly_rate: "" });
|
|
|
|
const [selectedRentalIds, setSelectedRentalIds] = useState<Set<string>>(new Set());
|
|
const [rentalBulkOpen, setRentalBulkOpen] = useState(false);
|
|
const [savingRentalBulk, setSavingRentalBulk] = useState(false);
|
|
const [rentalBulk, setRentalBulk] = useState({ status: "no_change", monthly_rate: "", is_owner: "no_change" });
|
|
|
|
// internal map state
|
|
const [mapPins, setMapPins] = useState<MapPinData[]>([]);
|
|
const [mapZoom, setMapZoom] = useState<number>(17);
|
|
const [mapLockedView, setMapLockedView] = useState<{ lat: number; lng: number; zoom: number } | null>(null);
|
|
const [savingMap, setSavingMap] = useState(false);
|
|
|
|
const toggleSet = (setter: React.Dispatch<React.SetStateAction<Set<string>>>, id: string) =>
|
|
setter(prev => { const n = new Set(prev); n.has(id) ? n.delete(id) : n.add(id); return n; });
|
|
const toggleSetMany = (setter: React.Dispatch<React.SetStateAction<Set<string>>>, ids: string[], checked: boolean) =>
|
|
setter(prev => { const n = new Set(prev); ids.forEach(id => checked ? n.add(id) : n.delete(id)); return n; });
|
|
|
|
const publicUrl = useMemo(() => {
|
|
if (!associationId) return "";
|
|
return `${window.location.origin}/rv-boat-waitlist/${associationId}`;
|
|
}, [associationId]);
|
|
|
|
const load = async () => {
|
|
if (!associationId) return;
|
|
setLoading(true);
|
|
try {
|
|
const [lotsRes, rentalsRes, wlRes, ownersRes, unitsRes] = await Promise.all([
|
|
supabase.from("rv_boat_lots").select("*").eq("association_id", associationId).order("lot_number"),
|
|
supabase.from("rv_boat_lot_rentals").select("*").eq("association_id", associationId).order("start_date", { ascending: false }),
|
|
supabase.from("rv_boat_lot_waitlist").select("*").eq("association_id", associationId).order("position"),
|
|
supabase.from("owners").select("id, first_name, last_name, unit_id, email, phone").eq("association_id", associationId).eq("status", "active").order("last_name"),
|
|
supabase.from("units").select("id, unit_number").eq("association_id", associationId).order("unit_number"),
|
|
]);
|
|
if (lotsRes.error) throw lotsRes.error;
|
|
if (rentalsRes.error) throw rentalsRes.error;
|
|
if (wlRes.error) throw wlRes.error;
|
|
setLots(lotsRes.data || []);
|
|
setRentals(rentalsRes.data || []);
|
|
setWaitlist(wlRes.data || []);
|
|
setOwners(ownersRes.data || []);
|
|
setUnits(unitsRes.data || []);
|
|
const { data: mapRow } = await supabase.from("rv_boat_lot_maps").select("config").eq("association_id", associationId).maybeSingle();
|
|
const cfg = (mapRow?.config as any) || {};
|
|
setMapPins(Array.isArray(cfg.pins) ? cfg.pins : []);
|
|
setMapZoom(typeof cfg.zoom === "number" ? cfg.zoom : 17);
|
|
setMapLockedView(cfg.locked_view && typeof cfg.locked_view.lat === "number" ? cfg.locked_view : null);
|
|
} catch (e: any) {
|
|
toast.error(e.message || "Failed to load data");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => { load(); }, [associationId]);
|
|
|
|
const createLot = async () => {
|
|
if (!associationId || !lotForm.lot_number.trim()) { toast.error("Lot number required"); return; }
|
|
const { error } = await supabase.from("rv_boat_lots").insert({
|
|
association_id: associationId,
|
|
lot_number: lotForm.lot_number.trim(),
|
|
lot_type: lotForm.lot_type,
|
|
size: lotForm.size || null,
|
|
monthly_rate: lotForm.monthly_rate ? Number(lotForm.monthly_rate) : null,
|
|
notes: lotForm.notes || null,
|
|
});
|
|
if (error) { toast.error(error.message); return; }
|
|
toast.success("Lot added");
|
|
setLotDialogOpen(false);
|
|
setLotForm({ lot_number: "", lot_type: "rv", size: "", monthly_rate: "", notes: "" });
|
|
load();
|
|
};
|
|
|
|
const deleteLot = async (id: string) => {
|
|
if (!confirm("Delete this lot?")) return;
|
|
const { error } = await supabase.from("rv_boat_lots").delete().eq("id", id);
|
|
if (error) { toast.error(error.message); return; }
|
|
toast.success("Lot deleted");
|
|
load();
|
|
};
|
|
|
|
const applyLotBulk = async () => {
|
|
const ids = [...selectedLotIds];
|
|
if (!ids.length) return;
|
|
const patch: Record<string, any> = {};
|
|
if (lotBulk.lot_type !== "no_change") patch.lot_type = lotBulk.lot_type;
|
|
if (lotBulk.status !== "no_change") patch.status = lotBulk.status;
|
|
if (lotBulk.monthly_rate.trim() !== "") patch.monthly_rate = Number(lotBulk.monthly_rate) || 0;
|
|
if (Object.keys(patch).length === 0) { toast.error("No changes selected"); return; }
|
|
setSavingLotBulk(true);
|
|
const { error } = await supabase.from("rv_boat_lots").update(patch).in("id", ids);
|
|
setSavingLotBulk(false);
|
|
if (error) { toast.error(error.message); return; }
|
|
toast.success(`Updated ${ids.length} lot${ids.length === 1 ? "" : "s"}`);
|
|
setLotBulkOpen(false); setSelectedLotIds(new Set()); load();
|
|
};
|
|
|
|
const deleteLots = async () => {
|
|
const ids = [...selectedLotIds];
|
|
if (!ids.length) return;
|
|
if (!confirm(`Delete ${ids.length} lot${ids.length === 1 ? "" : "s"}? Lots with rentals may fail to delete.`)) return;
|
|
const { error } = await supabase.from("rv_boat_lots").delete().in("id", ids);
|
|
if (error) { toast.error(error.message); return; }
|
|
toast.success(`Deleted ${ids.length} lot${ids.length === 1 ? "" : "s"}`);
|
|
setSelectedLotIds(new Set()); load();
|
|
};
|
|
|
|
const applyRentalBulk = async () => {
|
|
const ids = [...selectedRentalIds];
|
|
if (!ids.length) return;
|
|
const patch: Record<string, any> = {};
|
|
if (rentalBulk.status !== "no_change") {
|
|
patch.status = rentalBulk.status;
|
|
if (rentalBulk.status === "ended") patch.end_date = new Date().toISOString().slice(0, 10);
|
|
}
|
|
if (rentalBulk.monthly_rate.trim() !== "") patch.monthly_rate = Number(rentalBulk.monthly_rate) || 0;
|
|
if (rentalBulk.is_owner !== "no_change") patch.is_owner = rentalBulk.is_owner === "true";
|
|
if (Object.keys(patch).length === 0) { toast.error("No changes selected"); return; }
|
|
setSavingRentalBulk(true);
|
|
const { error } = await supabase.from("rv_boat_lot_rentals").update(patch).in("id", ids);
|
|
setSavingRentalBulk(false);
|
|
if (error) { toast.error(error.message); return; }
|
|
toast.success(`Updated ${ids.length} rental${ids.length === 1 ? "" : "s"}`);
|
|
setRentalBulkOpen(false); setSelectedRentalIds(new Set()); load();
|
|
};
|
|
|
|
const createRental = async () => {
|
|
if (!associationId || !rentalForm.lot_id || !rentalForm.renter_name.trim()) {
|
|
toast.error("Lot and renter name required"); return;
|
|
}
|
|
const { error } = await supabase.from("rv_boat_lot_rentals").insert({
|
|
association_id: associationId,
|
|
lot_id: rentalForm.lot_id,
|
|
renter_name: rentalForm.renter_name.trim(),
|
|
renter_email: rentalForm.renter_email || null,
|
|
renter_phone: rentalForm.renter_phone || null,
|
|
vehicle_description: rentalForm.vehicle_description || null,
|
|
start_date: rentalForm.start_date,
|
|
monthly_rate: rentalForm.monthly_rate ? Number(rentalForm.monthly_rate) : null,
|
|
notes: rentalForm.notes || null,
|
|
owner_id: rentalForm.owner_id || null,
|
|
unit_id: rentalForm.unit_id || null,
|
|
status: "active",
|
|
});
|
|
if (error) { toast.error(error.message); return; }
|
|
toast.success("Rental created");
|
|
setRentalDialogOpen(false);
|
|
setRentalForm({ lot_id: "", renter_name: "", renter_email: "", renter_phone: "", vehicle_description: "", start_date: new Date().toISOString().slice(0, 10), monthly_rate: "", notes: "", owner_id: "", unit_id: "" });
|
|
load();
|
|
};
|
|
|
|
const endRental = async (r: Rental) => {
|
|
if (!confirm("End this rental? The lot will be marked available.")) return;
|
|
const { error } = await supabase.from("rv_boat_lot_rentals")
|
|
.update({ status: "ended", end_date: new Date().toISOString().slice(0, 10) })
|
|
.eq("id", r.id);
|
|
if (error) { toast.error(error.message); return; }
|
|
toast.success("Rental ended");
|
|
load();
|
|
};
|
|
|
|
const invitePortal = async (r: Rental, asOwner = false) => {
|
|
const label = asOwner ? "owner" : "renter";
|
|
const email = window.prompt(`Email address for the ${label}'s portal account:`, r.renter_email || "");
|
|
if (!email) return;
|
|
const trimmed = email.trim();
|
|
if (!trimmed) return;
|
|
try {
|
|
const { data, error } = await supabase.functions.invoke("invite-rv-renter", {
|
|
body: { rental_id: r.id, email: trimmed, as_owner: asOwner },
|
|
});
|
|
if (error) throw error;
|
|
if ((data as any)?.error) throw new Error((data as any).error);
|
|
toast.success((data as any)?.invited ? "Invitation email sent" : "Existing user linked; password reset emailed");
|
|
load();
|
|
} catch (e: any) {
|
|
toast.error(e.message || "Failed to invite");
|
|
}
|
|
};
|
|
|
|
const saveMap = async () => {
|
|
if (!associationId) return;
|
|
setSavingMap(true);
|
|
const { error } = await supabase.from("rv_boat_lot_maps").upsert({
|
|
association_id: associationId,
|
|
config: { pins: mapPins, zoom: mapZoom, locked_view: mapLockedView },
|
|
updated_at: new Date().toISOString(),
|
|
}, { onConflict: "association_id" });
|
|
setSavingMap(false);
|
|
if (error) { toast.error(error.message); return; }
|
|
toast.success("Map saved");
|
|
};
|
|
|
|
const requestInsurance = async (r: Rental) => {
|
|
if (!r.renter_email) { toast.error("Add a renter email first, then request insurance."); return; }
|
|
try {
|
|
const { data, error } = await supabase.functions.invoke("send-rv-renter-insurance-request", {
|
|
body: { rental_id: r.id },
|
|
});
|
|
if (error) throw error;
|
|
const res = data as any;
|
|
if (res?.error && !res?.link) throw new Error(res.error);
|
|
if (res?.ok) {
|
|
toast.success(`Insurance request emailed to ${res.sent_to}`);
|
|
} else if (res?.link) {
|
|
await navigator.clipboard.writeText(res.link).catch(() => {});
|
|
toast.message("Email didn't send — link copied", { description: "Share the submission link with the renter manually." });
|
|
}
|
|
load();
|
|
} catch (e: any) {
|
|
toast.error(e.message || "Failed to request insurance");
|
|
}
|
|
};
|
|
|
|
const toggleIsOwner = async (r: Rental) => {
|
|
const next = !r.is_owner;
|
|
const { error } = await supabase.from("rv_boat_lot_rentals")
|
|
.update({ is_owner: next })
|
|
.eq("id", r.id);
|
|
if (error) { toast.error(error.message); return; }
|
|
toast.success(next ? "Marked as owner" : "Marked as renter");
|
|
load();
|
|
};
|
|
|
|
const addWaitlist = async () => {
|
|
if (!associationId || !waitlistForm.requester_name.trim()) { toast.error("Name required"); return; }
|
|
const { error } = await supabase.from("rv_boat_lot_waitlist").insert({
|
|
association_id: associationId,
|
|
requester_name: waitlistForm.requester_name.trim(),
|
|
requester_email: waitlistForm.requester_email || null,
|
|
requester_phone: waitlistForm.requester_phone || null,
|
|
unit_address: waitlistForm.unit_address || null,
|
|
requested_lot_type: waitlistForm.requested_lot_type,
|
|
requested_size: waitlistForm.requested_size || null,
|
|
vehicle_description: waitlistForm.vehicle_description || null,
|
|
notes: waitlistForm.notes || null,
|
|
source: "manual",
|
|
status: "waiting",
|
|
position: 0,
|
|
});
|
|
if (error) { toast.error(error.message); return; }
|
|
toast.success("Added to waitlist");
|
|
setWaitlistDialogOpen(false);
|
|
setWaitlistForm({ requester_name: "", requester_email: "", requester_phone: "", unit_address: "", requested_lot_type: "either", requested_size: "", vehicle_description: "", notes: "" });
|
|
load();
|
|
};
|
|
|
|
const movePosition = async (entry: WaitlistEntry, direction: "up" | "down") => {
|
|
const waiting = waitlist.filter(w => w.status === "waiting").sort((a, b) => a.position - b.position);
|
|
const idx = waiting.findIndex(w => w.id === entry.id);
|
|
const swapIdx = direction === "up" ? idx - 1 : idx + 1;
|
|
if (swapIdx < 0 || swapIdx >= waiting.length) return;
|
|
const other = waiting[swapIdx];
|
|
// Use temporary position to avoid unique-ish collisions if any (none enforced, but safe)
|
|
const tempPos = -Math.floor(Math.random() * 100000) - 1;
|
|
await supabase.from("rv_boat_lot_waitlist").update({ position: tempPos }).eq("id", entry.id);
|
|
await supabase.from("rv_boat_lot_waitlist").update({ position: entry.position }).eq("id", other.id);
|
|
await supabase.from("rv_boat_lot_waitlist").update({ position: other.position }).eq("id", entry.id);
|
|
load();
|
|
};
|
|
|
|
const removeWaitlist = async (id: string) => {
|
|
if (!confirm("Remove this entry from the waitlist?")) return;
|
|
const { error } = await supabase.from("rv_boat_lot_waitlist").update({ status: "removed" }).eq("id", id);
|
|
if (error) { toast.error(error.message); return; }
|
|
toast.success("Removed");
|
|
load();
|
|
};
|
|
|
|
const openFulfill = (entry: WaitlistEntry) => {
|
|
setFulfillDialog({ open: true, entry, lotNumber: "" });
|
|
};
|
|
|
|
const confirmFulfill = async () => {
|
|
const entry = fulfillDialog.entry;
|
|
if (!entry) return;
|
|
if (!fulfillDialog.lotNumber.trim()) { toast.error("Enter the lot number assigned"); return; }
|
|
const { error } = await supabase.from("rv_boat_lot_waitlist").update({
|
|
status: "fulfilled",
|
|
fulfilled_at: new Date().toISOString(),
|
|
fulfilled_lot_number: fulfillDialog.lotNumber.trim(),
|
|
fulfilled_by: user?.id || null,
|
|
}).eq("id", entry.id);
|
|
if (error) { toast.error(error.message); return; }
|
|
toast.success("Marked fulfilled");
|
|
setFulfillDialog({ open: false, entry: null, lotNumber: "" });
|
|
load();
|
|
};
|
|
|
|
const copyPublicLink = async () => {
|
|
await navigator.clipboard.writeText(publicUrl);
|
|
toast.success("Public waitlist link copied");
|
|
};
|
|
|
|
const waitingEntries = waitlist.filter(w => w.status === "waiting").sort((a, b) => a.position - b.position);
|
|
const fulfilledEntries = waitlist.filter(w => w.status === "fulfilled" || w.status === "removed");
|
|
|
|
return (
|
|
<div className="p-6 space-y-6">
|
|
<div className="flex items-center justify-between flex-wrap gap-3">
|
|
<div>
|
|
<h1 className="text-2xl font-bold">RV / Boat Lot Rentals</h1>
|
|
<p className="text-sm text-muted-foreground">Manage lot inventory, active rentals, and the waitlist.</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Select value={associationId} onValueChange={setLocalAssociationId}>
|
|
<SelectTrigger className="w-[260px]"><SelectValue placeholder="Select association" /></SelectTrigger>
|
|
<SelectContent>
|
|
{associations.map(a => <SelectItem key={a.id} value={a.id}>{a.name}</SelectItem>)}
|
|
</SelectContent>
|
|
</Select>
|
|
<Button variant="outline" size="sm" onClick={copyPublicLink} disabled={!associationId}>
|
|
<Copy className="h-4 w-4 mr-2" /> Copy public waitlist link
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{!associationId ? (
|
|
<p className="text-muted-foreground">Select an association to manage RV/Boat lots.</p>
|
|
) : null}
|
|
|
|
<Tabs defaultValue="waitlist" className="w-full">
|
|
<TabsList>
|
|
<TabsTrigger value="waitlist">Waitlist ({waitingEntries.length})</TabsTrigger>
|
|
<TabsTrigger value="lots">Lots ({lots.length})</TabsTrigger>
|
|
<TabsTrigger value="rentals">Active Rentals ({rentals.filter(r => r.status === "active").length})</TabsTrigger>
|
|
<TabsTrigger value="map">Map</TabsTrigger>
|
|
<TabsTrigger value="history">History</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{/* Waitlist */}
|
|
<TabsContent value="waitlist" className="space-y-4">
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between">
|
|
<CardTitle>Current Waitlist</CardTitle>
|
|
<Dialog open={waitlistDialogOpen} onOpenChange={setWaitlistDialogOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button size="sm"><Plus className="h-4 w-4 mr-1" /> Add to waitlist</Button>
|
|
</DialogTrigger>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Add waitlist entry</DialogTitle>
|
|
<DialogDescription>New entries are added to the bottom of the list.</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="space-y-3">
|
|
<div><Label>Name *</Label><Input value={waitlistForm.requester_name} onChange={e => setWaitlistForm({ ...waitlistForm, requester_name: e.target.value })} /></div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div><Label>Email</Label><Input type="email" value={waitlistForm.requester_email} onChange={e => setWaitlistForm({ ...waitlistForm, requester_email: e.target.value })} /></div>
|
|
<div><Label>Phone</Label><Input value={waitlistForm.requester_phone} onChange={e => setWaitlistForm({ ...waitlistForm, requester_phone: e.target.value })} /></div>
|
|
</div>
|
|
<div><Label>Unit / Address</Label><Input value={waitlistForm.unit_address} onChange={e => setWaitlistForm({ ...waitlistForm, unit_address: e.target.value })} /></div>
|
|
<div><Label>Size</Label><Input placeholder="e.g. 30 ft, 10x30" value={waitlistForm.requested_size} onChange={e => setWaitlistForm({ ...waitlistForm, requested_size: e.target.value })} /></div>
|
|
<div><Label>Vehicle description</Label><Input value={waitlistForm.vehicle_description} onChange={e => setWaitlistForm({ ...waitlistForm, vehicle_description: e.target.value })} /></div>
|
|
<div><Label>Notes</Label><Textarea value={waitlistForm.notes} onChange={e => setWaitlistForm({ ...waitlistForm, notes: e.target.value })} /></div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setWaitlistDialogOpen(false)}>Cancel</Button>
|
|
<Button onClick={addWaitlist}>Add</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{loading ? <p className="text-sm text-muted-foreground">Loading…</p> :
|
|
waitingEntries.length === 0 ? <p className="text-sm text-muted-foreground">No one on the waitlist.</p> : (
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead className="w-16">#</TableHead>
|
|
<TableHead>Name</TableHead>
|
|
<TableHead>Contact</TableHead>
|
|
<TableHead>Size</TableHead>
|
|
<TableHead>Joined</TableHead>
|
|
<TableHead>Source</TableHead>
|
|
<TableHead className="text-right">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{waitingEntries.map((w, i) => (
|
|
<TableRow key={w.id}>
|
|
<TableCell className="font-semibold">{i + 1}</TableCell>
|
|
<TableCell>
|
|
<div className="font-medium">{w.requester_name}</div>
|
|
{w.unit_address && <div className="text-xs text-muted-foreground">{w.unit_address}</div>}
|
|
</TableCell>
|
|
<TableCell className="text-xs">
|
|
{w.requester_email && <div>{w.requester_email}</div>}
|
|
{w.requester_phone && <div>{w.requester_phone}</div>}
|
|
</TableCell>
|
|
<TableCell className="text-sm">{w.requested_size || "—"}</TableCell>
|
|
<TableCell className="text-xs">{new Date(w.joined_at).toLocaleDateString()}</TableCell>
|
|
<TableCell><Badge variant="secondary">{w.source === "public_form" ? "Public" : "Manual"}</Badge></TableCell>
|
|
<TableCell className="text-right space-x-1">
|
|
<Button size="icon" variant="ghost" onClick={() => movePosition(w, "up")} disabled={i === 0}><ArrowUp className="h-4 w-4" /></Button>
|
|
<Button size="icon" variant="ghost" onClick={() => movePosition(w, "down")} disabled={i === waitingEntries.length - 1}><ArrowDown className="h-4 w-4" /></Button>
|
|
<Button size="sm" variant="default" onClick={() => openFulfill(w)}><Check className="h-4 w-4 mr-1" /> Check off</Button>
|
|
<Button size="icon" variant="ghost" onClick={() => removeWaitlist(w.id)}><Trash2 className="h-4 w-4" /></Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
{/* Lots */}
|
|
<TabsContent value="lots" className="space-y-4">
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between">
|
|
<CardTitle>Lot Inventory</CardTitle>
|
|
<Dialog open={lotDialogOpen} onOpenChange={setLotDialogOpen}>
|
|
<DialogTrigger asChild><Button size="sm"><Plus className="h-4 w-4 mr-1" /> Add lot</Button></DialogTrigger>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Add lot</DialogTitle>
|
|
<DialogDescription>Add a new RV or boat lot to inventory.</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="space-y-3">
|
|
<div><Label>Lot number *</Label><Input value={lotForm.lot_number} onChange={e => setLotForm({ ...lotForm, lot_number: e.target.value })} /></div>
|
|
<div>
|
|
<Label>Type</Label>
|
|
<Select value={lotForm.lot_type} onValueChange={v => setLotForm({ ...lotForm, lot_type: v })}>
|
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
{VEHICLE_TYPES.map(t => <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>)}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div><Label>Size</Label><Input placeholder="10x30" value={lotForm.size} onChange={e => setLotForm({ ...lotForm, size: e.target.value })} /></div>
|
|
<div><Label>Monthly rate</Label><Input type="number" value={lotForm.monthly_rate} onChange={e => setLotForm({ ...lotForm, monthly_rate: e.target.value })} /></div>
|
|
</div>
|
|
<div><Label>Notes</Label><Textarea value={lotForm.notes} onChange={e => setLotForm({ ...lotForm, notes: e.target.value })} /></div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setLotDialogOpen(false)}>Cancel</Button>
|
|
<Button onClick={createLot}>Add</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{selectedLotIds.size > 0 && (
|
|
<div className="flex items-center justify-between rounded-md border bg-muted/40 px-3 py-2 mb-3">
|
|
<span className="text-sm font-medium">{selectedLotIds.size} selected</span>
|
|
<div className="flex items-center gap-2">
|
|
<Button size="sm" variant="outline" onClick={() => { setLotBulk({ lot_type: "no_change", status: "no_change", monthly_rate: "" }); setLotBulkOpen(true); }}><Pencil className="h-3.5 w-3.5 mr-1" /> Edit</Button>
|
|
<Button size="sm" variant="outline" className="text-destructive hover:text-destructive" onClick={deleteLots}><Trash2 className="h-3.5 w-3.5 mr-1" /> Delete</Button>
|
|
<Button size="sm" variant="ghost" onClick={() => setSelectedLotIds(new Set())}><X className="h-3.5 w-3.5 mr-1" /> Clear</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{lots.length === 0 ? <p className="text-sm text-muted-foreground">No lots yet.</p> : (
|
|
<Table>
|
|
<TableHeader><TableRow>
|
|
<TableHead className="w-10"><Checkbox aria-label="Select all lots" checked={lots.length > 0 && lots.every(l => selectedLotIds.has(l.id))} onCheckedChange={(c) => toggleSetMany(setSelectedLotIds, lots.map(l => l.id), !!c)} /></TableHead>
|
|
<TableHead>Lot #</TableHead><TableHead>Type</TableHead><TableHead>Size</TableHead>
|
|
<TableHead>Rate</TableHead><TableHead>Status</TableHead><TableHead className="text-right">Actions</TableHead>
|
|
</TableRow></TableHeader>
|
|
<TableBody>
|
|
{lots.map(lot => (
|
|
<TableRow key={lot.id}>
|
|
<TableCell><Checkbox aria-label={`Select lot ${lot.lot_number}`} checked={selectedLotIds.has(lot.id)} onCheckedChange={() => toggleSet(setSelectedLotIds, lot.id)} /></TableCell>
|
|
<TableCell className="font-medium">{lot.lot_number}</TableCell>
|
|
<TableCell><Badge variant="outline">{vehicleTypeLabel(lot.lot_type)}</Badge></TableCell>
|
|
<TableCell>{lot.size || "-"}</TableCell>
|
|
<TableCell>{lot.monthly_rate ? `$${lot.monthly_rate}` : "-"}</TableCell>
|
|
<TableCell>
|
|
<Badge variant={lot.status === "available" ? "secondary" : lot.status === "occupied" ? "default" : "outline"}>{lot.status}</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<Button size="icon" variant="ghost" onClick={() => deleteLot(lot.id)}><Trash2 className="h-4 w-4" /></Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
{/* Rentals */}
|
|
<TabsContent value="rentals" className="space-y-4">
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between">
|
|
<CardTitle>Active Rentals</CardTitle>
|
|
<Dialog open={rentalDialogOpen} onOpenChange={setRentalDialogOpen}>
|
|
<DialogTrigger asChild><Button size="sm"><Plus className="h-4 w-4 mr-1" /> New rental</Button></DialogTrigger>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Create rental</DialogTitle>
|
|
<DialogDescription>Assign a lot to a renter.</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="space-y-3">
|
|
<div>
|
|
<Label>Lot *</Label>
|
|
<Select value={rentalForm.lot_id} onValueChange={v => setRentalForm({ ...rentalForm, lot_id: v })}>
|
|
<SelectTrigger><SelectValue placeholder="Choose lot" /></SelectTrigger>
|
|
<SelectContent>
|
|
{lots.filter(l => l.status === "available").map(l => (
|
|
<SelectItem key={l.id} value={l.id}>Lot {l.lot_number} ({l.lot_type})</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<Label>Link to Owner</Label>
|
|
<Select value={rentalForm.owner_id || "none"} onValueChange={v => {
|
|
if (v === "none") { setRentalForm(f => ({ ...f, owner_id: "" })); return; }
|
|
const o = owners.find(x => x.id === v);
|
|
setRentalForm(f => ({
|
|
...f, owner_id: v,
|
|
unit_id: o?.unit_id || f.unit_id,
|
|
renter_name: f.renter_name || `${o?.first_name || ""} ${o?.last_name || ""}`.trim(),
|
|
renter_email: f.renter_email || o?.email || "",
|
|
renter_phone: f.renter_phone || o?.phone || "",
|
|
}));
|
|
}}>
|
|
<SelectTrigger><SelectValue placeholder="Optional" /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="none">None</SelectItem>
|
|
{owners.map(o => <SelectItem key={o.id} value={o.id}>{`${o.last_name || ""}, ${o.first_name || ""}`.replace(/^, |, $/g, "").trim() || "Unnamed"}</SelectItem>)}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div>
|
|
<Label>Link to Unit</Label>
|
|
<Select value={rentalForm.unit_id || "none"} onValueChange={v => setRentalForm(f => ({ ...f, unit_id: v === "none" ? "" : v }))}>
|
|
<SelectTrigger><SelectValue placeholder="Optional" /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="none">None</SelectItem>
|
|
{units.map(u => <SelectItem key={u.id} value={u.id}>Unit {u.unit_number}</SelectItem>)}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
<div><Label>Renter name *</Label><Input value={rentalForm.renter_name} onChange={e => setRentalForm({ ...rentalForm, renter_name: e.target.value })} /></div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div><Label>Email</Label><Input type="email" value={rentalForm.renter_email} onChange={e => setRentalForm({ ...rentalForm, renter_email: e.target.value })} /></div>
|
|
<div><Label>Phone</Label><Input value={rentalForm.renter_phone} onChange={e => setRentalForm({ ...rentalForm, renter_phone: e.target.value })} /></div>
|
|
</div>
|
|
<div><Label>Vehicle description</Label><Input value={rentalForm.vehicle_description} onChange={e => setRentalForm({ ...rentalForm, vehicle_description: e.target.value })} /></div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div><Label>Start date</Label><Input type="date" value={rentalForm.start_date} onChange={e => setRentalForm({ ...rentalForm, start_date: e.target.value })} /></div>
|
|
<div><Label>Monthly rate</Label><Input type="number" value={rentalForm.monthly_rate} onChange={e => setRentalForm({ ...rentalForm, monthly_rate: e.target.value })} /></div>
|
|
</div>
|
|
<div><Label>Notes</Label><Textarea value={rentalForm.notes} onChange={e => setRentalForm({ ...rentalForm, notes: e.target.value })} /></div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setRentalDialogOpen(false)}>Cancel</Button>
|
|
<Button onClick={createRental}>Create</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{(() => { const activeRentals = rentals.filter(r => r.status === "active" || r.status === "vacating"); return (
|
|
<>
|
|
{selectedRentalIds.size > 0 && (
|
|
<div className="flex items-center justify-between rounded-md border bg-muted/40 px-3 py-2 mb-3">
|
|
<span className="text-sm font-medium">{selectedRentalIds.size} selected</span>
|
|
<div className="flex items-center gap-2">
|
|
<Button size="sm" variant="outline" onClick={() => { setRentalBulk({ status: "no_change", monthly_rate: "", is_owner: "no_change" }); setRentalBulkOpen(true); }}><Pencil className="h-3.5 w-3.5 mr-1" /> Edit</Button>
|
|
<Button size="sm" variant="ghost" onClick={() => setSelectedRentalIds(new Set())}><X className="h-3.5 w-3.5 mr-1" /> Clear</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{activeRentals.length === 0 ? <p className="text-sm text-muted-foreground">No active rentals.</p> : (
|
|
<Table>
|
|
<TableHeader><TableRow>
|
|
<TableHead className="w-10"><Checkbox aria-label="Select all rentals" checked={activeRentals.length > 0 && activeRentals.every(r => selectedRentalIds.has(r.id))} onCheckedChange={(c) => toggleSetMany(setSelectedRentalIds, activeRentals.map(r => r.id), !!c)} /></TableHead>
|
|
<TableHead>Lot</TableHead><TableHead>Renter</TableHead><TableHead>Vehicle</TableHead>
|
|
<TableHead>Start</TableHead><TableHead>Rate</TableHead><TableHead className="text-right">Actions</TableHead>
|
|
</TableRow></TableHeader>
|
|
<TableBody>
|
|
{activeRentals.map(r => {
|
|
const lot = lots.find(l => l.id === r.lot_id);
|
|
return (
|
|
<TableRow key={r.id}>
|
|
<TableCell><Checkbox aria-label={`Select rental ${r.renter_name}`} checked={selectedRentalIds.has(r.id)} onCheckedChange={() => toggleSet(setSelectedRentalIds, r.id)} /></TableCell>
|
|
<TableCell className="font-medium">{lot?.lot_number || "—"}</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center gap-2">
|
|
<span>{r.renter_name}</span>
|
|
<Badge variant={r.is_owner ? "default" : "secondary"} className="text-[10px]">
|
|
{r.is_owner ? "Owner" : "Renter"}
|
|
</Badge>
|
|
{r.status === "vacating" && <Badge variant="outline" className="text-[10px] border-amber-300 text-amber-700">Vacating</Badge>}
|
|
</div>
|
|
<div className="text-xs text-muted-foreground">{r.renter_email}</div>
|
|
{(() => {
|
|
if (!r.insurance_carrier && !r.insurance_expiration_date) {
|
|
return <div className="text-xs text-amber-600 mt-0.5">No insurance on file</div>;
|
|
}
|
|
const exp = r.insurance_expiration_date ? new Date(r.insurance_expiration_date + "T00:00:00") : null;
|
|
const today = new Date(); today.setHours(0, 0, 0, 0);
|
|
const diffDays = exp ? Math.floor((exp.getTime() - today.getTime()) / 86400000) : null;
|
|
const isExpired = diffDays !== null && diffDays < 0;
|
|
const isExpiring = diffDays !== null && diffDays >= 0 && diffDays <= 90;
|
|
const tone = isExpired ? "text-destructive font-semibold" : isExpiring ? "text-amber-600" : "text-emerald-700";
|
|
return (
|
|
<div className={`text-xs mt-0.5 ${tone}`}>
|
|
Insured: {r.insurance_carrier || "—"}
|
|
{exp && (isExpired
|
|
? ` · Expired ${exp.toLocaleDateString()}`
|
|
: isExpiring
|
|
? ` · Expires in ${diffDays}d (${exp.toLocaleDateString()})`
|
|
: ` · exp ${exp.toLocaleDateString()}`)}
|
|
{r.insurance_document_url ? <> · <a href={r.insurance_document_url} target="_blank" rel="noreferrer" className="underline">COI</a></> : null}
|
|
</div>
|
|
);
|
|
})()}
|
|
</TableCell>
|
|
<TableCell className="text-sm">{r.vehicle_description || "-"}</TableCell>
|
|
<TableCell className="text-sm">{r.start_date}</TableCell>
|
|
<TableCell>{r.monthly_rate ? `$${r.monthly_rate}` : "-"}</TableCell>
|
|
<TableCell className="text-right space-x-2">
|
|
<Button size="sm" variant="ghost" onClick={() => toggleIsOwner(r)}>
|
|
{r.is_owner ? "Mark as Renter" : "Mark as Owner"}
|
|
</Button>
|
|
<Button size="sm" variant="secondary" onClick={() => invitePortal(r, false)}>Invite Renter</Button>
|
|
<Button size="sm" variant="secondary" onClick={() => invitePortal(r, true)}>Invite Owner</Button>
|
|
<Button size="sm" variant="secondary" onClick={() => requestInsurance(r)}>Request Insurance</Button>
|
|
<Button size="sm" variant="outline" onClick={() => endRental(r)}>End rental</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
)}
|
|
</>
|
|
); })()}
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
{/* Map */}
|
|
<TabsContent value="map" className="space-y-4">
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between">
|
|
<div>
|
|
<CardTitle>Lot Map</CardTitle>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
Click the map to drop a pin for each lot, label it, and optionally link a directory unit for reference. Internal use only.
|
|
</p>
|
|
</div>
|
|
<Button size="sm" onClick={saveMap} disabled={savingMap}>{savingMap ? "Saving…" : "Save Map"}</Button>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<GoogleMapPicker
|
|
pins={mapPins}
|
|
onChange={setMapPins}
|
|
zoom={mapZoom}
|
|
onZoomChange={setMapZoom}
|
|
lockedView={mapLockedView}
|
|
onLockedViewChange={setMapLockedView}
|
|
linkLabel="unit"
|
|
allowLinkAnyStatus
|
|
formAmenities={units.map(u => ({ id: u.id, name: `Unit ${u.unit_number}` }))}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
{/* History */}
|
|
<TabsContent value="history" className="space-y-4">
|
|
<Card>
|
|
<CardHeader><CardTitle>Waitlist History</CardTitle></CardHeader>
|
|
<CardContent>
|
|
{fulfilledEntries.length === 0 ? <p className="text-sm text-muted-foreground">No history yet.</p> : (
|
|
<Table>
|
|
<TableHeader><TableRow>
|
|
<TableHead>Name</TableHead><TableHead>Status</TableHead>
|
|
<TableHead>Lot Assigned</TableHead><TableHead>Date</TableHead>
|
|
</TableRow></TableHeader>
|
|
<TableBody>
|
|
{fulfilledEntries.map(w => (
|
|
<TableRow key={w.id}>
|
|
<TableCell>{w.requester_name}</TableCell>
|
|
<TableCell><Badge variant={w.status === "fulfilled" ? "default" : "outline"}>{w.status}</Badge></TableCell>
|
|
<TableCell>{w.fulfilled_lot_number || "-"}</TableCell>
|
|
<TableCell className="text-sm">{w.fulfilled_at ? new Date(w.fulfilled_at).toLocaleDateString() : "-"}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
</Tabs>
|
|
|
|
{/* Fulfill dialog */}
|
|
<Dialog open={fulfillDialog.open} onOpenChange={o => setFulfillDialog({ ...fulfillDialog, open: o })}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Check off waitlist entry</DialogTitle>
|
|
<DialogDescription>Enter the lot number assigned to {fulfillDialog.entry?.requester_name}.</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="space-y-3">
|
|
<div>
|
|
<Label>Lot number assigned *</Label>
|
|
<Input value={fulfillDialog.lotNumber} onChange={e => setFulfillDialog({ ...fulfillDialog, lotNumber: e.target.value })} />
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setFulfillDialog({ open: false, entry: null, lotNumber: "" })}>Cancel</Button>
|
|
<Button onClick={confirmFulfill}>Mark fulfilled</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* Bulk edit lots */}
|
|
<Dialog open={lotBulkOpen} onOpenChange={setLotBulkOpen}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Edit {selectedLotIds.size} lot{selectedLotIds.size === 1 ? "" : "s"}</DialogTitle>
|
|
<DialogDescription>Only changed fields are applied. Leave a field on “No change” to keep existing values.</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="space-y-3">
|
|
<div>
|
|
<Label>Type</Label>
|
|
<Select value={lotBulk.lot_type} onValueChange={v => setLotBulk({ ...lotBulk, lot_type: v })}>
|
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="no_change">No change</SelectItem>
|
|
{VEHICLE_TYPES.map(t => <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>)}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div>
|
|
<Label>Status</Label>
|
|
<Select value={lotBulk.status} onValueChange={v => setLotBulk({ ...lotBulk, status: v })}>
|
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="no_change">No change</SelectItem>
|
|
<SelectItem value="available">Available</SelectItem>
|
|
<SelectItem value="occupied">Occupied</SelectItem>
|
|
<SelectItem value="maintenance">Maintenance</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div><Label>Monthly rate <span className="text-muted-foreground text-xs">(blank = no change)</span></Label><Input type="number" min="0" step="0.01" value={lotBulk.monthly_rate} onChange={e => setLotBulk({ ...lotBulk, monthly_rate: e.target.value })} placeholder="No change" /></div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setLotBulkOpen(false)}>Cancel</Button>
|
|
<Button onClick={applyLotBulk} disabled={savingLotBulk}>Apply to {selectedLotIds.size}</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* Bulk edit rentals */}
|
|
<Dialog open={rentalBulkOpen} onOpenChange={setRentalBulkOpen}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Edit {selectedRentalIds.size} rental{selectedRentalIds.size === 1 ? "" : "s"}</DialogTitle>
|
|
<DialogDescription>Only changed fields are applied. Leave a field on “No change” to keep existing values.</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="space-y-3">
|
|
<div>
|
|
<Label>Status</Label>
|
|
<Select value={rentalBulk.status} onValueChange={v => setRentalBulk({ ...rentalBulk, status: v })}>
|
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="no_change">No change</SelectItem>
|
|
<SelectItem value="active">Active</SelectItem>
|
|
<SelectItem value="ended">Ended (sets end date to today)</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div>
|
|
<Label>Owner / Renter</Label>
|
|
<Select value={rentalBulk.is_owner} onValueChange={v => setRentalBulk({ ...rentalBulk, is_owner: v })}>
|
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="no_change">No change</SelectItem>
|
|
<SelectItem value="true">Owner</SelectItem>
|
|
<SelectItem value="false">Renter</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div><Label>Monthly rate <span className="text-muted-foreground text-xs">(blank = no change)</span></Label><Input type="number" min="0" step="0.01" value={rentalBulk.monthly_rate} onChange={e => setRentalBulk({ ...rentalBulk, monthly_rate: e.target.value })} placeholder="No change" /></div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setRentalBulkOpen(false)}>Cancel</Button>
|
|
<Button onClick={applyRentalBulk} disabled={savingRentalBulk}>Apply to {selectedRentalIds.size}</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|