@salesforce/ui-bundle-template-app-react-sample-b2x 1.117.2

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/maintenanceRequests/MaintenanceRequestListItem.tsx

@@ -0,0 +1,74 @@
+/**
+ * Single maintenance request row: icon (teal) | Type & address + title | tenant (gray circle) [| status].
+ */
+import { useCallback } from "react";
+import type { MaintenanceRequestNode } from "@/api/maintenanceRequests/maintenanceRequestApi";
+import { MaintenanceRequestIcon } from "@/components/maintenanceRequests/MaintenanceRequestIcon";
+import { StatusBadge } from "@/components/maintenanceRequests/StatusBadge";
+
+export interface MaintenanceRequestListItemProps {
+	request: MaintenanceRequestNode;
+	/** When set, row is clickable and opens details (e.g. modal). */
+	onClick?: (request: MaintenanceRequestNode) => void;
+}
+
+export default function MaintenanceRequestListItem({
+	request,
+	onClick,
+}: MaintenanceRequestListItemProps) {
+	const issueType = request.Type__c?.value ?? "General";
+	const propertyAddress = request.Property__r?.Address__c?.value ?? null;
+	const addressFirstPart = propertyAddress
+		? propertyAddress.split(",")[0].trim()
+		: (request.Name?.value ?? "—");
+	const title = request.Description__c?.value?.trim() || request.Name?.value?.trim() || "—";
+
+	const handleClick = useCallback(() => {
+		onClick?.(request);
+	}, [onClick, request]);
+
+	const handleKeyDown = useCallback(
+		(e: React.KeyboardEvent) => {
+			if (onClick && (e.key === "Enter" || e.key === " ")) {
+				e.preventDefault();
+				onClick(request);
+			}
+		},
+		[onClick, request],
+	);
+
+	const isClickable = Boolean(onClick);
+
+	return (
+		<div
+			className={`flex items-center p-4 bg-gray-50 rounded-lg transition-colors ${isClickable ? "cursor-pointer hover:bg-gray-100" : ""}`}
+			onClick={isClickable ? handleClick : undefined}
+			onKeyDown={isClickable ? handleKeyDown : undefined}
+			role={isClickable ? "button" : undefined}
+			tabIndex={isClickable ? 0 : undefined}
+			aria-label={
+				isClickable
+					? `View details for ${title !== "—" ? title : "maintenance request"}`
+					: undefined
+			}
+		>
+			<MaintenanceRequestIcon type={request.Type__c?.value ?? null} />
+
+			{/* Issue Type and Address - Fixed width; title below to save space (avoids clipping) */}
+			<div className="ml-4 min-w-0 grow">
+				<div className="flex items-center gap-2 mb-1">
+					<h3 className="font-semibold text-gray-900 truncate">{issueType}</h3>
+					<span className="text-gray-500 flex-shrink-0">|</span>
+					<span className="text-sm text-gray-600 truncate">{addressFirstPart}</span>
+				</div>
+				<p className="text-base text-gray-700 truncate" title={title !== "—" ? title : undefined}>
+					{title}
+				</p>
+			</div>
+
+			<div className="ml-4 flex flex-shrink-0 items-center">
+				<StatusBadge status={request.Status__c?.value ?? "—"} />
+			</div>
+		</div>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/maintenanceRequests/MaintenanceSummaryDetailsModal.tsx

@@ -0,0 +1,92 @@
+/**
+ * Read-only maintenance details for B2C Maintenance page (summary rows from maintenanceRequestApi).
+ */
+import { useEffect } from "react";
+import { X } from "lucide-react";
+import { StatusBadge } from "@/components/maintenanceRequests/StatusBadge";
+import type { MaintenanceRequestNode } from "@/api/maintenanceRequests/maintenanceRequestApi";
+
+export interface MaintenanceSummaryDetailsModalProps {
+	request: MaintenanceRequestNode;
+	onClose: () => void;
+}
+
+function formatDate(value: string | null): string {
+	if (!value?.trim()) return "—";
+	try {
+		const d = new Date(value);
+		return d.toLocaleDateString("en-US", {
+			month: "short",
+			day: "numeric",
+			year: "numeric",
+			hour: "numeric",
+			minute: "2-digit",
+			hour12: true,
+		});
+	} catch {
+		return value;
+	}
+}
+
+export default function MaintenanceSummaryDetailsModal({
+	request,
+	onClose,
+}: MaintenanceSummaryDetailsModalProps) {
+	useEffect(() => {
+		const handleEscape = (e: KeyboardEvent) => {
+			if (e.key === "Escape") onClose();
+		};
+		document.addEventListener("keydown", handleEscape);
+		return () => document.removeEventListener("keydown", handleEscape);
+	}, [onClose]);
+
+	return (
+		<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+			<div className="fixed inset-0 bg-black/50" onClick={onClose} aria-hidden />
+			<div
+				role="dialog"
+				aria-modal
+				className="relative max-h-[90vh] w-full max-w-lg overflow-y-auto rounded-lg bg-white shadow-xl"
+			>
+				<div className="flex items-center justify-between border-b p-4">
+					<h2 className="text-lg font-semibold">
+						{request.Description__c?.value ?? request.Name?.value ?? "Request"}
+					</h2>
+					<button type="button" onClick={onClose} className="text-gray-500 hover:text-gray-800">
+						<X className="h-5 w-5" />
+					</button>
+				</div>
+				<div className="space-y-3 p-4 text-sm">
+					{request.Description__c?.value && (
+						<p className="text-gray-700">{request.Description__c.value}</p>
+					)}
+					<div className="flex flex-wrap gap-2">
+						{request.Type__c?.value && (
+							<span className="rounded bg-gray-100 px-2 py-0.5">{request.Type__c.value}</span>
+						)}
+						{request.Priority__c?.value && (
+							<span className="rounded bg-gray-100 px-2 py-0.5">{request.Priority__c.value}</span>
+						)}
+						{request.Status__c?.value && <StatusBadge status={request.Status__c.value} />}
+					</div>
+					{request.Property__r?.Address__c?.value && (
+						<p>
+							<span className="font-medium">Property:</span> {request.Property__r.Address__c.value}
+						</p>
+					)}
+					{request.User__r?.Name?.value && (
+						<p>
+							<span className="font-medium">Tenant:</span> {request.User__r.Name.value}
+						</p>
+					)}
+					{request.Scheduled__c?.value && (
+						<p>
+							<span className="font-medium">Requested:</span>{" "}
+							{formatDate(request.Scheduled__c.value)}
+						</p>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/maintenanceRequests/StatusBadge.tsx

@@ -0,0 +1,36 @@
+import { Check } from "lucide-react";
+
+interface StatusBadgeProps {
+	status: string;
+}
+
+export function StatusBadge({ status }: StatusBadgeProps) {
+	const statusLower = status.toLowerCase();
+
+	const getStyle = () => {
+		if (statusLower === "new") return "bg-pink-100 text-pink-700";
+		if (statusLower === "in progress") return "bg-yellow-100 text-yellow-700";
+		if (statusLower === "resolved") return "bg-green-100 text-green-700";
+		return "bg-gray-100 text-gray-700";
+	};
+
+	const getLabel = () => {
+		if (statusLower === "new") return "Needs Action";
+		if (statusLower === "in progress") return "In Progress";
+		if (statusLower === "resolved") return "Resolved";
+		return status;
+	};
+
+	const showCheckmark = statusLower === "resolved";
+	const showDot = statusLower === "new" || statusLower === "in progress";
+
+	return (
+		<span
+			className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium ${getStyle()}`}
+		>
+			{showCheckmark && <Check className="size-4" aria-hidden />}
+			{showDot && <span className="size-2 rounded-full bg-current" aria-hidden />}
+			{getLabel()}
+		</span>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/properties/PropertyListingCard.tsx

@@ -0,0 +1,178 @@
+/**
+ * Stacked property listing card: image on top, details below. Single price + bedrooms, amenity list, Apply button.
+ * No phone or secondary price. Virtual Tours / Videos pills on image.
+ */
+import { useNavigate } from "react-router";
+import { useCallback, type MouseEvent } from "react";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import type { PropertySearchNode } from "@/api/properties/propertySearchService";
+
+function formatPrice(val: string | number | null | undefined): string {
+	if (val == null) return "—";
+	const n = typeof val === "number" ? val : Number(val);
+	if (Number.isNaN(n)) return String(val);
+	return (
+		new Intl.NumberFormat("en-US", {
+			style: "currency",
+			currency: "USD",
+			maximumFractionDigits: 0,
+		}).format(n) + "+"
+	);
+}
+
+export interface PropertyListingCardProps {
+	node: PropertySearchNode;
+	imageUrl: string | null;
+	address?: string | null;
+	amenities?: string | null;
+	/** Show skeleton while any supplementary data (image, address, amenities) is still loading. */
+	loading?: boolean;
+}
+
+export function PropertyListingCardSkeleton() {
+	return (
+		<div
+			className="flex h-full min-h-0 flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-sm"
+			role="status"
+		>
+			<Skeleton className="aspect-[16/10] w-full rounded-none" />
+			<div className="space-y-3 p-3">
+				<Skeleton className="h-6 w-3/4" />
+				<Skeleton className="h-4 w-1/2" />
+				<Skeleton className="h-6 w-1/3" />
+				<div className="flex gap-1.5">
+					<Skeleton className="h-5 w-16 rounded-full" />
+					<Skeleton className="h-5 w-20 rounded-full" />
+					<Skeleton className="h-5 w-14 rounded-full" />
+				</div>
+				<Skeleton className="h-11 w-full rounded-xl" />
+			</div>
+			<span className="sr-only">Loading property…</span>
+		</div>
+	);
+}
+
+export default function PropertyListingCard({
+	node,
+	imageUrl,
+	address,
+	amenities,
+	loading = false,
+}: PropertyListingCardProps) {
+	const navigate = useNavigate();
+	const name = node.Name?.displayValue ?? node.Name?.value ?? "Untitled";
+	const price = node.Monthly_Rent__c?.value;
+	const bedroomsNum = typeof node.Bedrooms__c?.value === "number" ? node.Bedrooms__c.value : NaN;
+	const bedroomsLabel =
+		!Number.isNaN(bedroomsNum) && bedroomsNum >= 0
+			? `${bedroomsNum} Bedroom${bedroomsNum !== 1 ? "s" : ""}`
+			: null;
+	const detailPath = `/property/${node.Id}`;
+
+	const handleClick = useCallback(() => {
+		navigate(detailPath);
+	}, [navigate, detailPath]);
+
+	const handleKeyDown = useCallback(
+		(e: React.KeyboardEvent) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				handleClick();
+			}
+		},
+		[handleClick],
+	);
+
+	if (loading) {
+		return <PropertyListingCardSkeleton />;
+	}
+
+	const displayAddress = (address ?? "").trim().replace(/\n/g, ", ") || null;
+	const amenityLabels = (amenities ?? "")
+		.split(/\s*\|\s*/)
+		.map((s) => s.trim())
+		.filter(Boolean);
+
+	return (
+		<article
+			className="flex h-full min-h-0 cursor-pointer flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-sm transition-all duration-200 hover:shadow-md focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2"
+			onClick={handleClick}
+			onKeyDown={handleKeyDown}
+			role="button"
+			tabIndex={0}
+			aria-label={`View details for ${name}`}
+		>
+			{/* Image on top, full width */}
+			<div className="relative aspect-[16/10] w-full shrink-0 overflow-hidden rounded-t-2xl bg-muted">
+				{imageUrl ? (
+					<img src={imageUrl} alt="" className="h-full w-full object-cover" />
+				) : (
+					<div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+						No image
+					</div>
+				)}
+				<div className="absolute left-1.5 top-1.5 flex flex-col gap-0.5">
+					<span className="rounded-full bg-violet-600 px-2 py-0.5 text-xs font-medium text-white">
+						Virtual Tours
+					</span>
+					<span className="rounded-full bg-violet-600/90 px-2 py-0.5 text-xs font-medium text-white">
+						Videos
+					</span>
+				</div>
+			</div>
+
+			{/* Content below: name, address, price+beds, amenities, Apply */}
+			<div className="flex min-h-0 flex-1 flex-col justify-between p-3">
+				<div className="min-h-0">
+					<div className="mb-1.5">
+						<h3 className="text-2xl font-semibold text-foreground">{name}</h3>
+						{displayAddress && (
+							<p className="truncate text-sm text-muted-foreground">{displayAddress}</p>
+						)}
+					</div>
+
+					{/* Single price + bedrooms – price bold, teal, 2x size */}
+					<div className="mb-1.5 flex flex-wrap items-baseline gap-x-3 gap-y-0.5 text-base">
+						{price != null && (
+							<span className="text-2xl font-semibold text-primary">
+								{formatPrice(price)}
+								{bedroomsLabel != null ? (
+									<span className="ml-1 text-base font-normal text-muted-foreground">
+										{bedroomsLabel}
+									</span>
+								) : null}
+							</span>
+						)}
+					</div>
+
+					{/* Amenity pills */}
+					{amenityLabels.length > 0 && (
+						<div className="mb-2 flex flex-wrap gap-1.5">
+							{amenityLabels.map((label) => (
+								<span
+									key={label}
+									className="rounded-full border border-border bg-muted/60 px-2.5 py-0.5 text-xs font-medium text-muted-foreground"
+								>
+									{label}
+								</span>
+							))}
+						</div>
+					)}
+				</div>
+
+				{/* Apply button */}
+				<Button
+					size="sm"
+					className="mt-4 w-full cursor-pointer rounded-xl bg-primary px-5 py-5 text-lg font-medium transition-colors duration-200 hover:bg-primary/90"
+					onClick={(e: MouseEvent<HTMLButtonElement>) => {
+						e.stopPropagation();
+						navigate(`/application?propertyId=${encodeURIComponent(node.Id)}`);
+					}}
+				>
+					Apply
+				</Button>
+			</div>
+		</article>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/properties/PropertyMap.tsx

@@ -0,0 +1,186 @@
+/**
+ * Leaflet map for property search and detail. Uses OpenStreetMap tiles (no API key).
+ * Renders one pin per property (each marker in the markers array).
+ */
+import { useMemo, useEffect, type ReactNode } from "react";
+import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+
+// Type for leaflet L when using declaration-only (no @types/leaflet)
+const Leaflet = L as {
+	divIcon: (opts: {
+		className?: string;
+		html?: string;
+		iconSize?: [number, number];
+		iconAnchor?: [number, number];
+		popupAnchor?: [number, number];
+	}) => unknown;
+};
+
+// Lucide-style map pin (teardrop + circle), filled, 1.5x size
+const PIN_SVG =
+	'<svg xmlns="http://www.w3.org/2000/svg" width="42" height="60" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" fill="currentColor"/><circle cx="12" cy="10" r="3" fill="white" stroke="none"/></svg>';
+
+const pinIcon = Leaflet.divIcon({
+	className: "property-map-pin",
+	html: PIN_SVG,
+	iconSize: [42, 60],
+	iconAnchor: [21, 60],
+	popupAnchor: [0, -60],
+});
+
+export interface MapMarker {
+	lat: number;
+	lng: number;
+	label?: string;
+	/** Property__c id; used to look up listing record for popup card */
+	propertyId?: string;
+}
+
+/** Bounding box in lat/lng (Leaflet getBounds()). */
+export interface MapBounds {
+	north: number;
+	south: number;
+	east: number;
+	west: number;
+}
+
+interface PropertyMapProps {
+	/** Center [lat, lng] */
+	center: [number, number];
+	/** Initial zoom 1–18 */
+	zoom?: number;
+	/** Optional markers */
+	markers?: MapMarker[];
+	/** Optional: render custom content in each marker popup (e.g. PropertyListingCard) */
+	popupContent?: (marker: MapMarker) => ReactNode;
+	/** Called when the user pans or zooms; use to filter list by visible pins */
+	onBoundsChange?: (bounds: MapBounds | null) => void;
+	/** CSS class for the container (e.g. height) */
+	className?: string;
+}
+
+function MapCenterUpdater({ center, zoom = 13 }: { center: [number, number]; zoom?: number }) {
+	const map = useMap() as { setView: (center: [number, number], zoom: number) => void };
+	const [lat, lng] = center;
+	useEffect(() => {
+		map.setView(center, zoom);
+	}, [map, center, lat, lng, zoom]);
+	return null;
+}
+
+function MapBoundsReporter({
+	onBoundsChange,
+}: {
+	onBoundsChange?: (bounds: MapBounds | null) => void;
+}) {
+	const map = useMap() as {
+		getBounds?: () => {
+			getNorth: () => number;
+			getSouth: () => number;
+			getEast: () => number;
+			getWest: () => number;
+		};
+		on?: (event: string, fn: () => void) => void;
+		off?: (event: string, fn: () => void) => void;
+	};
+	useEffect(() => {
+		if (!onBoundsChange || !map.getBounds) return;
+		const report = () => {
+			const b = map.getBounds!();
+			onBoundsChange({
+				north: b.getNorth(),
+				south: b.getSouth(),
+				east: b.getEast(),
+				west: b.getWest(),
+			});
+		};
+		// Only report on moveend (user pan/zoom). Reporting on mount caused setState -> re-render -> map setView -> moveend -> loop.
+		map.on?.("moveend", report);
+		return () => {
+			map.off?.("moveend", report);
+		};
+	}, [map, onBoundsChange]);
+	return null;
+}
+
+/** Wraps popup content with an in-card close button and shadow; removes need for Leaflet's default chrome */
+function PopupContentWrapper({ children }: { children: ReactNode }) {
+	const map = useMap() as { closePopup?: () => void };
+	return (
+		<div className="relative min-w-0">
+			<button
+				type="button"
+				onClick={() => map.closePopup?.()}
+				className="absolute right-2 top-2 z-10 flex h-7 w-7 items-center justify-center rounded-full bg-black/60 text-white transition-colors hover:bg-black/80"
+				aria-label="Close"
+			>
+				×
+			</button>
+			<div className="rounded-2xl shadow-lg overflow-hidden">{children}</div>
+		</div>
+	);
+}
+
+function MapContent({
+	center,
+	zoom,
+	markers,
+	popupContent,
+	onBoundsChange,
+}: Pick<PropertyMapProps, "center" | "zoom" | "markers" | "popupContent" | "onBoundsChange">) {
+	return (
+		<MapContainer center={center} zoom={zoom} scrollWheelZoom className="absolute inset-0">
+			<MapCenterUpdater center={center} zoom={zoom} />
+			<MapBoundsReporter onBoundsChange={onBoundsChange} />
+			<TileLayer
+				attribution='&copy; <a href="https://leafletjs.com/">Leaflet</a> | Data by &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+				url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
+				maxZoom={19}
+			/>
+			{markers?.map((m, i) => (
+				<Marker
+					key={`${m.lat}-${m.lng}-${m.propertyId ?? i}`}
+					position={[m.lat, m.lng]}
+					icon={pinIcon}
+				>
+					<Popup>
+						{popupContent ? (
+							<PopupContentWrapper>{popupContent(m)}</PopupContentWrapper>
+						) : (
+							(m.label ?? "Property")
+						)}
+					</Popup>
+				</Marker>
+			))}
+		</MapContainer>
+	);
+}
+
+export default function PropertyMap({
+	center,
+	zoom = 13,
+	markers = [],
+	popupContent,
+	onBoundsChange,
+	className = "h-[400px] w-full rounded-xl overflow-hidden",
+}: PropertyMapProps) {
+	const hasMarkers = markers.length > 0;
+	const effectiveCenter = useMemo((): [number, number] => {
+		if (hasMarkers) return [markers[0].lat, markers[0].lng];
+		return center;
+	}, [center, hasMarkers, markers]);
+
+	return (
+		<div className={`relative ${className}`} aria-label="Property map">
+			<MapContent
+				center={effectiveCenter}
+				zoom={zoom}
+				markers={markers}
+				popupContent={popupContent}
+				onBoundsChange={onBoundsChange}
+			/>
+		</div>
+	);
+}