@salesforce/webapp-template-app-react-sample-b2x-experimental 1.68.0 → 1.69.0

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/pages/Maintenance.tsx

@@ -1,3 +1,4 @@
+import { useState, useCallback } from "react";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import { Label } from "../components/ui/label";
@@ -10,121 +11,269 @@ import {
 	TableHeader,
 	TableRow,
 } from "../components/ui/table";
-import { Calendar, Upload, ArrowRight } from "lucide-react";
+import { Calendar, ArrowRight } from "lucide-react";
+import { useMaintenanceRequests } from "@/hooks/useMaintenanceRequests";
+import { createMaintenanceRequest } from "@/api/maintenanceRequestApi";
+
+const TYPE_OPTIONS = [
+	"Plumbing",
+	"Electrical",
+	"HVAC",
+	"Appliance",
+	"Structural",
+	"Cleaning",
+	"Security",
+	"Pest",
+	"Other",
+] as const;
+
+const PRIORITY_OPTIONS = [
+	{ value: "Standard", label: "Standard" },
+	{ value: "High", label: "High (Same Day)" },
+	{ value: "Emergency", label: "Emergency (2hr)" },
+] as const;
+
+function formatDate(iso: string | null): string {
+	if (!iso) return "—";
+	try {
+		const d = new Date(iso);
+		return d.toLocaleDateString("en-US", {
+			month: "short",
+			day: "numeric",
+			year: "numeric",
+		});
+	} catch {
+		return iso;
+	}
+}
+
+function statusBadgeClass(status: string | null): string {
+	if (!status) return "bg-muted text-muted-foreground";
+	switch (status) {
+		case "Resolved":
+			return "bg-green-100 text-green-700";
+		case "In Progress":
+		case "Assigned":
+			return "bg-blue-100 text-blue-700";
+		case "On Hold":
+			return "bg-amber-100 text-amber-700";
+		case "New":
+		default:
+			return "bg-muted text-muted-foreground";
+	}
+}
 
 export default function Maintenance() {
+	const { requests, loading, error, refetch } = useMaintenanceRequests();
+	const [title, setTitle] = useState("");
+	const [description, setDescription] = useState("");
+	const [type, setType] = useState<string>("");
+	const [priority, setPriority] = useState<string>("Standard");
+	const [dateRequested, setDateRequested] = useState(() => {
+		const d = new Date();
+		return d.toISOString().slice(0, 10);
+	});
+	const [submitting, setSubmitting] = useState(false);
+	const [submitError, setSubmitError] = useState<string | null>(null);
+	const [submitSuccess, setSubmitSuccess] = useState(false);
+
+	const handleSubmit = useCallback(
+		async (e: React.FormEvent) => {
+			e.preventDefault();
+			const t = title.trim();
+			if (!t) {
+				setSubmitError("Title is required");
+				return;
+			}
+			setSubmitting(true);
+			setSubmitError(null);
+			setSubmitSuccess(false);
+			try {
+				await createMaintenanceRequest({
+					Title__c: t,
+					Description__c: description.trim() || undefined,
+					Type__c: type.trim() || undefined,
+					Priority__c: priority,
+					Status__c: "New",
+					Date_Requested__c: dateRequested || undefined,
+				});
+				setSubmitSuccess(true);
+				setTitle("");
+				setDescription("");
+				setType("");
+				setPriority("Standard");
+				setDateRequested(new Date().toISOString().slice(0, 10));
+				await refetch();
+			} catch (err) {
+				setSubmitError(err instanceof Error ? err.message : "Failed to submit request");
+			} finally {
+				setSubmitting(false);
+			}
+		},
+		[title, description, type, priority, dateRequested, refetch],
+	);
+
 	return (
 		<div className="mx-auto max-w-[900px]">
-			<Card className="mb-6">
+			<Card className="mb-6 rounded-2xl shadow-md">
 				<CardHeader>
-					<CardTitle className="text-2xl text-primary">Maintenance</CardTitle>
+					<CardTitle className="text-2xl text-primary">New maintenance request</CardTitle>
 				</CardHeader>
 				<CardContent className="space-y-4">
-					<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-						<div className="space-y-2">
-							<Label>Date Reported</Label>
-							<div className="relative">
+					<form onSubmit={handleSubmit} className="space-y-4">
+						<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+							<div className="space-y-2">
+								<Label htmlFor="maintenance-title">Title *</Label>
 								<Input
+									id="maintenance-title"
 									type="text"
-									readOnly
-									value="Today"
-									className="pr-10"
-									aria-label="Date reported"
+									value={title}
+									onChange={(e) => setTitle(e.target.value)}
+									placeholder="e.g. Kitchen faucet leak"
+									aria-label="Title"
+									required
 								/>
-								<span className="absolute right-3 top-1/2 -translate-y-1/2">
-									<Calendar className="size-[18px] text-muted-foreground" />
-								</span>
+							</div>
+							<div className="space-y-2">
+								<Label htmlFor="maintenance-priority">Priority</Label>
+								<select
+									id="maintenance-priority"
+									className="flex h-9 w-full rounded-xl border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-[color,box-shadow] duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-primary"
+									aria-label="Priority"
+									value={priority}
+									onChange={(e) => setPriority(e.target.value)}
+								>
+									{PRIORITY_OPTIONS.map((o) => (
+										<option key={o.value} value={o.value}>
+											{o.label}
+										</option>
+									))}
+								</select>
+							</div>
+						</div>
+						<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+							<div className="space-y-2">
+								<Label htmlFor="maintenance-date">Date reported</Label>
+								<div className="relative">
+									<Input
+										id="maintenance-date"
+										type="date"
+										value={dateRequested}
+										onChange={(e) => setDateRequested(e.target.value)}
+										className="pr-10"
+										aria-label="Date reported"
+									/>
+									<span className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
+										<Calendar className="size-[18px] text-muted-foreground" aria-hidden />
+									</span>
+								</div>
+							</div>
+							<div className="space-y-2">
+								<Label htmlFor="maintenance-type">Type</Label>
+								<select
+									id="maintenance-type"
+									className="flex h-9 w-full rounded-xl border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-[color,box-shadow] duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-primary"
+									aria-label="Type"
+									value={type}
+									onChange={(e) => setType(e.target.value)}
+								>
+									<option value="">—</option>
+									{TYPE_OPTIONS.map((o) => (
+										<option key={o} value={o}>
+											{o}
+										</option>
+									))}
+								</select>
 							</div>
 						</div>
 						<div className="space-y-2">
-							<Label>Urgency</Label>
-							<select
-								className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-ring"
-								aria-label="Urgency"
-								defaultValue="urgent"
-							>
-								<option value="urgent">Urgent</option>
-								<option value="normal">Normal</option>
-								<option value="low">Low</option>
-							</select>
+							<Label htmlFor="maintenance-description">Description</Label>
+							<textarea
+								id="maintenance-description"
+								rows={4}
+								placeholder="Describe the issue"
+								className="min-h-[100px] w-full resize-y rounded-xl border border-input bg-transparent px-3 py-2 text-sm shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-primary transition-colors duration-200"
+								aria-label="Description"
+								value={description}
+								onChange={(e) => setDescription(e.target.value)}
+							/>
 						</div>
-					</div>
-					<div className="space-y-2">
-						<Label>Room</Label>
-						<select
-							className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-ring"
-							aria-label="Room"
-							defaultValue="living-room"
-						>
-							<option value="living-room">Living Room</option>
-							<option value="bathroom">Bathroom</option>
-							<option value="bedroom">Bedroom</option>
-							<option value="kitchen">Kitchen</option>
-						</select>
-					</div>
-					<div className="space-y-2">
-						<Label>Description</Label>
-						<textarea
-							rows={4}
-							placeholder="Input text"
-							className="min-h-[100px] w-full resize-y rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
-							aria-label="Description"
-						/>
-					</div>
-					<div className="grid grid-cols-2 gap-4">
-						<div />
-						<div className="flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-border bg-muted/30 p-6 text-center">
-							<Upload className="mx-auto mb-2 size-10 text-muted-foreground" />
-							<p className="m-0 text-xs text-muted-foreground">
-								Choose a file or drag & drop for reference here.
+						{submitError && (
+							<p className="text-sm text-destructive" role="alert">
+								{submitError}
 							</p>
-							<p className="mt-1 text-[0.75rem] text-muted-foreground">
-								JPEG, PNG, PDF, and MP4 formats, up to 50MB
+						)}
+						{submitSuccess && (
+							<p className="text-sm text-green-600" role="status">
+								Request submitted. It will appear in the list below.
 							</p>
+						)}
+						<div className="flex justify-end">
+							<Button
+								type="submit"
+								className="cursor-pointer gap-2 rounded-xl transition-colors duration-200"
+								disabled={submitting}
+							>
+								{submitting ? "Submitting…" : "Submit Request"}
+								<ArrowRight className="size-[18px]" aria-hidden />
+							</Button>
 						</div>
-					</div>
-					<div className="flex justify-end">
-						<Button className="gap-2">
-							Submit Request
-							<ArrowRight className="size-[18px]" />
-						</Button>
-					</div>
+					</form>
 				</CardContent>
 			</Card>
-			<Card>
+			<Card className="rounded-2xl shadow-md">
+				<CardHeader>
+					<CardTitle className="text-xl text-primary">Your requests</CardTitle>
+				</CardHeader>
 				<CardContent className="p-0">
-					<div className="overflow-x-auto">
-						<Table>
-							<TableHeader>
-								<TableRow>
-									{["Description", "Work Order", "Type", "Room", "Date", "Status"].map((h) => (
-										<TableHead key={h} className="font-semibold text-primary">
-											{h}
-										</TableHead>
-									))}
-								</TableRow>
-							</TableHeader>
-							<TableBody>
-								<TableRow>
-									<TableCell>
-										<div className="flex items-center gap-2">
-											<div className="size-10 shrink-0 rounded-lg bg-muted" />
-											<span>Shower head leaking</span>
-										</div>
-									</TableCell>
-									<TableCell>#12548796</TableCell>
-									<TableCell>Plumbing</TableCell>
-									<TableCell>Bathroom</TableCell>
-									<TableCell>28 Jan, 12.30 AM</TableCell>
-									<TableCell>
-										<span className="inline-block rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-700">
-											Completed
-										</span>
-									</TableCell>
-								</TableRow>
-							</TableBody>
-						</Table>
-					</div>
+					{error && (
+						<p className="px-6 py-4 text-sm text-destructive" role="alert">
+							{error}
+						</p>
+					)}
+					{loading && <p className="px-6 py-4 text-sm text-muted-foreground">Loading…</p>}
+					{!loading && !error && (
+						<div className="overflow-x-auto">
+							<Table>
+								<TableHeader>
+									<TableRow>
+										<TableHead className="font-semibold text-primary">Title</TableHead>
+										<TableHead className="font-semibold text-primary">Work order</TableHead>
+										<TableHead className="font-semibold text-primary">Type</TableHead>
+										<TableHead className="font-semibold text-primary">Date</TableHead>
+										<TableHead className="font-semibold text-primary">Status</TableHead>
+									</TableRow>
+								</TableHeader>
+								<TableBody>
+									{requests.length === 0 ? (
+										<TableRow>
+											<TableCell colSpan={5} className="text-center text-muted-foreground py-8">
+												No maintenance requests yet. Submit one above.
+											</TableCell>
+										</TableRow>
+									) : (
+										requests.map((r) => (
+											<TableRow key={r.id}>
+												<TableCell className="font-medium">
+													{r.title ?? r.description ?? "—"}
+												</TableCell>
+												<TableCell>{r.name ?? "—"}</TableCell>
+												<TableCell>{r.type ?? "—"}</TableCell>
+												<TableCell>{formatDate(r.dateRequested)}</TableCell>
+												<TableCell>
+													<span
+														className={`inline-block rounded-full px-3 py-1 text-xs font-medium ${statusBadgeClass(r.status)}`}
+													>
+														{r.status ?? "—"}
+													</span>
+												</TableCell>
+											</TableRow>
+										))
+									)}
+								</TableBody>
+							</Table>
+						</div>
+					)}
 				</CardContent>
 			</Card>
 		</div>

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/pages/PropertyDetails.tsx

@@ -1,9 +1,68 @@
 import { useParams, Link } from "react-router";
 import { Button } from "../components/ui/button";
-import { Card, CardHeader, CardContent } from "../components/ui/card";
+import { Card, CardHeader, CardTitle, CardContent } from "../components/ui/card";
+import PropertyMap from "@/components/PropertyMap";
+import { usePropertyDetail } from "@/hooks/usePropertyDetail";
+import { useGeocode } from "@/hooks/useGeocode";
+
+function formatCurrency(val: number | string | null): string {
+	if (val == null) return "—";
+	const n = typeof val === "number" ? val : Number(val);
+	return Number.isNaN(n)
+		? String(val)
+		: new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(n);
+}
+
+function formatDate(val: string | null): string {
+	if (!val) return "—";
+	try {
+		return new Date(val).toLocaleDateString();
+	} catch {
+		return val;
+	}
+}
 
 export default function PropertyDetails() {
-	const { id } = useParams();
+	const { id } = useParams<{ id: string }>();
+	const { listing, property, images, costs, features, loading, error } = usePropertyDetail(id);
+	const addressForGeocode = property?.address?.replace(/\n/g, ", ") ?? null;
+	const { coords: addressCoords } = useGeocode(addressForGeocode);
+
+	if (loading) {
+		return (
+			<div className="mx-auto max-w-[900px]">
+				<div className="mb-4 h-4 w-32 animate-pulse rounded bg-muted" />
+				<div className="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
+					<div className="h-72 animate-pulse rounded-xl bg-muted" />
+					<div className="flex flex-col gap-2">
+						{[1, 2, 3, 4, 5].map((i) => (
+							<div key={i} className="h-12 animate-pulse rounded-lg bg-muted" />
+						))}
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	if (error || (!listing && id)) {
+		return (
+			<div className="mx-auto max-w-[900px]">
+				<div className="mb-4">
+					<Link to="/properties" className="text-sm text-primary no-underline hover:underline">
+						← Back to listings
+					</Link>
+				</div>
+				<Card className="rounded-2xl shadow-md">
+					<CardContent className="pt-6">
+						<p className="text-destructive">{error ?? "Listing not found."}</p>
+					</CardContent>
+				</Card>
+			</div>
+		);
+	}
+
+	const primaryImage = images.find((i) => i.imageType === "Primary") ?? images[0];
+	const otherImages = images.filter((i) => i.id !== primaryImage?.id);
 
 	return (
 		<div className="mx-auto max-w-[900px]">
@@ -12,57 +71,170 @@ export default function PropertyDetails() {
 					← Back to listings
 				</Link>
 			</div>
+
+			{/* Hero image + thumbnails */}
 			<div className="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
-				<div className="h-72 rounded-xl bg-muted" />
+				<div className="relative aspect-[4/3] overflow-hidden rounded-xl bg-muted">
+					{primaryImage?.imageUrl ? (
+						<img
+							src={primaryImage.imageUrl}
+							alt={primaryImage.altText ?? primaryImage.name ?? "Property"}
+							className="h-full w-full object-cover"
+						/>
+					) : (
+						<div className="flex h-full items-center justify-center text-muted-foreground">
+							No image
+						</div>
+					)}
+				</div>
 				<div className="flex flex-col gap-2">
-					{[1, 2, 3, 4, 5].map((i) => (
-						<div key={i} className="h-12 rounded-lg bg-muted" />
+					{otherImages.slice(0, 5).map((img) => (
+						<div key={img.id} className="relative h-20 overflow-hidden rounded-lg bg-muted">
+							{img.imageUrl ? (
+								<img
+									src={img.imageUrl}
+									alt={img.altText ?? img.name ?? "Property"}
+									className="h-full w-full object-cover"
+								/>
+							) : null}
+						</div>
 					))}
 				</div>
 			</div>
-			<div className="mb-4 flex flex-wrap gap-2">
-				<Button size="sm">23 Photos</Button>
-				<Button size="sm" variant="outline">
-					8 Virtual Tours
-				</Button>
-				<Button size="sm" variant="outline">
-					Property Map
-				</Button>
-			</div>
-			<Card className="mb-4">
+
+			{/* Map - geocoded from property address */}
+			{addressCoords && (
+				<div className="mb-4">
+					<PropertyMap
+						center={[addressCoords.lat, addressCoords.lng]}
+						zoom={15}
+						markers={[
+							{
+								lat: addressCoords.lat,
+								lng: addressCoords.lng,
+								label: listing?.name ?? property?.name ?? "Property",
+							},
+						]}
+						className="h-[280px] w-full rounded-xl"
+					/>
+				</div>
+			)}
+
+			{/* Listing + address */}
+			<Card className="mb-4 rounded-2xl shadow-md">
 				<CardContent className="pt-6">
-					<p className="mb-2 text-sm text-primary">
-						California / San Francisco County / San Francisco / South Beach
+					{property?.address && (
+						<p className="mb-2 text-sm text-muted-foreground">
+							{property.address.replace(/\n/g, ", ")}
+						</p>
+					)}
+					<p className="mb-1 text-2xl font-bold text-foreground">
+						{listing?.listingPrice != null
+							? formatCurrency(listing.listingPrice)
+							: property?.monthlyRent != null
+								? formatCurrency(property.monthlyRent) + " / Month"
+								: "—"}
 					</p>
-					<p className="mb-1 text-2xl font-bold text-foreground">$4,600 / Month</p>
 					<p className="mb-4 text-sm text-muted-foreground">
-						301 Bryant St. Unit 5B, San Francisco, CA 94107
+						{listing?.name ?? property?.name ?? "Untitled"}
 					</p>
 					<div className="flex flex-wrap gap-3">
-						{["2 Bedroom", "2 Baths", "1040 sq ft", "Now Available"].map((s) => (
-							<span key={s} className="rounded-lg bg-primary/10 px-3 py-1.5 text-sm text-primary">
-								{s}
+						{property?.bedrooms != null && (
+							<span className="rounded-lg bg-primary/10 px-3 py-1.5 text-sm text-primary">
+								{property.bedrooms} Bedroom{Number(property.bedrooms) !== 1 ? "s" : ""}
 							</span>
-						))}
+						)}
+						{property?.bathrooms != null && (
+							<span className="rounded-lg bg-primary/10 px-3 py-1.5 text-sm text-primary">
+								{property.bathrooms} Bath{Number(property.bathrooms) !== 1 ? "s" : ""}
+							</span>
+						)}
+						{property?.squareFootage != null && (
+							<span className="rounded-lg bg-primary/10 px-3 py-1.5 text-sm text-primary">
+								{property.squareFootage} sq ft
+							</span>
+						)}
+						{listing?.listingStatus && (
+							<span className="rounded-lg bg-primary/10 px-3 py-1.5 text-sm text-primary">
+								{listing.listingStatus}
+							</span>
+						)}
+						{property?.propertyType && (
+							<span className="rounded-lg bg-primary/10 px-3 py-1.5 text-sm text-primary">
+								{property.propertyType}
+							</span>
+						)}
 					</div>
+					{property?.description && (
+						<p className="mt-4 text-sm text-foreground">{property.description}</p>
+					)}
 				</CardContent>
 			</Card>
-			<Card>
-				<CardHeader>
-					<CardTitle className="text-base">Contact Property</CardTitle>
-				</CardHeader>
-				<CardContent className="flex flex-col gap-2">
-					<Button variant="outline" className="justify-start">
-						Request Tour
-					</Button>
-					<Button variant="outline" className="justify-start">
-						Send Message
-					</Button>
-					<Button asChild variant="secondary" className="justify-center">
-						<Link to="/application?property=1">Fill out an application</Link>
-					</Button>
-				</CardContent>
-			</Card>
+
+			{/* Related: Costs */}
+			{costs.length > 0 && (
+				<Card className="mb-4 rounded-2xl shadow-md">
+					<CardHeader>
+						<CardTitle className="text-base">Related costs</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<ul className="space-y-2">
+							{costs.slice(0, 10).map((c) => (
+								<li
+									key={c.id}
+									className="flex flex-wrap items-baseline justify-between gap-2 border-b border-border/50 pb-2 last:border-0"
+								>
+									<span className="text-sm font-medium">{c.category ?? "Cost"}</span>
+									<span className="text-sm text-muted-foreground">{formatCurrency(c.amount)}</span>
+									{c.date && (
+										<span className="w-full text-xs text-muted-foreground">
+											{formatDate(c.date)}
+										</span>
+									)}
+									{c.description && <span className="w-full text-xs">{c.description}</span>}
+								</li>
+							))}
+						</ul>
+						{costs.length > 10 && (
+							<p className="mt-2 text-xs text-muted-foreground">+ {costs.length - 10} more</p>
+						)}
+					</CardContent>
+				</Card>
+			)}
+
+			{/* Related: Features */}
+			{features.length > 0 && (
+				<Card className="mb-4 rounded-2xl shadow-md">
+					<CardHeader>
+						<CardTitle className="text-base">Features & amenities</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<ul className="flex flex-wrap gap-2">
+							{features.map((f) => (
+								<li
+									key={f.id}
+									className="rounded-md border border-border bg-muted/50 px-3 py-1.5 text-sm"
+								>
+									{f.category && <span className="text-muted-foreground">{f.category}: </span>}
+									{f.description ?? f.name ?? "—"}
+								</li>
+							))}
+						</ul>
+					</CardContent>
+				</Card>
+			)}
+
+			<div className="mb-4">
+				<Button
+					asChild
+					size="lg"
+					className="w-full cursor-pointer rounded-xl bg-violet-600 text-base font-semibold transition-colors duration-200 hover:bg-violet-700"
+				>
+					<Link to={`/application?listingId=${encodeURIComponent(id ?? "")}`}>
+						Fill out an application
+					</Link>
+				</Button>
+			</div>
 		</div>
 	);
 }