@salesforce/webapp-template-app-react-sample-b2x-experimental 1.116.8 → 1.116.9

package/dist/force-app/main/default/webapplications/propertyrentalapp/src/api/properties/query/propertyDetailById.graphql

@@ -0,0 +1,124 @@
+query PropertyDetailById($propertyId: ID!) {
+	uiapi {
+		query {
+			Property__c(where: { Id: { eq: $propertyId } }, first: 1) {
+				edges {
+					node {
+						Id
+						Name @optional {
+							value
+							displayValue
+						}
+						Address__c @optional {
+							value
+							displayValue
+						}
+						Coordinates__Latitude__s @optional {
+							value
+						}
+						Coordinates__Longitude__s @optional {
+							value
+						}
+						Type__c @optional {
+							value
+							displayValue
+						}
+						Monthly_Rent__c @optional {
+							value
+							displayValue
+						}
+						Bedrooms__c @optional {
+							value
+							displayValue
+						}
+						Bathrooms__c @optional {
+							value
+							displayValue
+						}
+						Sq_Ft__c @optional {
+							value
+							displayValue
+						}
+						Description__c @optional {
+							value
+							displayValue
+						}
+						Property_Images__r(first: 50, orderBy: { Display_Order__c: { order: ASC } }) {
+							edges {
+								node {
+									Id
+									Name @optional {
+										value
+									}
+									Image_URL__c @optional {
+										value
+									}
+									Image_Type__c @optional {
+										value
+									}
+									Display_Order__c @optional {
+										value
+									}
+									Alt_Text__c @optional {
+										value
+									}
+								}
+							}
+						}
+						Property_Features__r(first: 100) {
+							edges {
+								node {
+									Id
+									Name @optional {
+										value
+									}
+									Feature_Category__c @optional {
+										value
+									}
+									Description__c @optional {
+										value
+									}
+								}
+							}
+						}
+						Property_Costs__r(first: 100) {
+							edges {
+								node {
+									Id
+									Cost_Category__c @optional {
+										value
+									}
+									Cost_Amount__c @optional {
+										value
+									}
+									Cost_Date__c @optional {
+										value
+									}
+									Description__c @optional {
+										value
+									}
+								}
+							}
+						}
+						Property_Listings__r(first: 10) {
+							edges {
+								node {
+									Id
+									Name @optional {
+										value
+									}
+									Listing_Price__c @optional {
+										value
+									}
+									Listing_Status__c @optional {
+										value
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}

package/dist/force-app/main/default/webapplications/propertyrentalapp/src/api/properties/query/searchProperties.graphql

@@ -0,0 +1,85 @@
+query SearchProperties(
+	$first: Int
+	$after: String
+	$where: Property__c_Filter
+	$orderBy: Property__c_OrderBy
+) {
+	uiapi {
+		query {
+			Property__c(first: $first, after: $after, where: $where, orderBy: $orderBy) {
+				edges {
+					node {
+						Id
+						Name {
+							value
+							displayValue
+						}
+						Address__c {
+							value
+							displayValue
+						}
+						Status__c {
+							value
+							displayValue
+						}
+						Type__c {
+							value
+							displayValue
+						}
+						Monthly_Rent__c {
+							value
+							displayValue
+						}
+						Bedrooms__c {
+							value
+							displayValue
+						}
+						Coordinates__Latitude__s {
+							value
+						}
+						Coordinates__Longitude__s {
+							value
+						}
+						CreatedDate {
+							value
+							displayValue
+						}
+						Property_Images__r(first: 5, orderBy: { Display_Order__c: { order: ASC } }) {
+							edges {
+								node {
+									Id
+									Image_URL__c {
+										value
+									}
+									Image_Type__c {
+										value
+									}
+									Display_Order__c {
+										value
+									}
+								}
+							}
+						}
+						Property_Features__r(first: 20) {
+							edges {
+								node {
+									Id
+									Description__c {
+										value
+									}
+								}
+							}
+						}
+					}
+				}
+				pageInfo {
+					hasNextPage
+					hasPreviousPage
+					endCursor
+					startCursor
+				}
+				totalCount
+			}
+		}
+	}
+}

package/dist/force-app/main/default/webapplications/propertyrentalapp/src/appLayout.tsx

@@ -8,7 +8,7 @@ export default function AppLayout() {
 	const [isNavOpen, setIsNavOpen] = useState(false);
 
 	return (
-		<div className="flex flex-col">
+		<div className="flex min-h-screen flex-col bg-gray-50">
 			<Toaster />
 			<TopBar onMenuClick={() => setIsNavOpen(true)} />
 

package/dist/force-app/main/default/webapplications/propertyrentalapp/src/components/SkeletonPrimitives.tsx

@@ -19,13 +19,16 @@ export function SkeletonListRows({ count = 3 }: { count?: number }) {
 	return (
 		<>
 			{Array.from({ length: count }, (_, i) => (
-				<div key={i} className="flex items-center gap-4 rounded-lg bg-gray-50 p-4">
-					<Skeleton className="size-10 shrink-0 rounded-full" />
-					<div className="min-w-0 flex-1 space-y-2">
-						<Skeleton className="h-4 w-3/4" />
-						<Skeleton className="h-3 w-1/2" />
+				<div key={i} className="flex items-center rounded-lg bg-gray-50 p-4">
+					<Skeleton className="h-12 w-12 shrink-0 rounded-lg" />
+					<div className="ml-4 min-w-0 grow space-y-1">
+						<div className="flex items-center gap-2">
+							<Skeleton className="h-5 w-24" />
+							<Skeleton className="h-4 w-20" />
+						</div>
+						<Skeleton className="h-5 w-3/5" />
 					</div>
-					<Skeleton className="h-6 w-16 shrink-0 rounded-full" />
+					<Skeleton className="ml-4 h-7 w-24 shrink-0 rounded-full" />
 				</div>
 			))}
 		</>

package/dist/force-app/main/default/webapplications/propertyrentalapp/src/components/dashboard/WeatherWidget.tsx

@@ -52,40 +52,56 @@ const Divider = () => <div className="my-5 border-t border-gray-200" />;
 
 function WeatherSkeleton() {
 	return (
-		<div className="mt-5 space-y-5" aria-hidden="true">
-			<Skeleton className="h-4 w-32" />
-			<div className="flex items-center justify-between">
-				<div className="space-y-2">
-					<Skeleton className="h-4 w-20" />
-					<Skeleton className="h-14 w-32" />
+		<div className="mt-5" aria-hidden="true">
+			{/* CurrentConditions: date row + city */}
+			<div className="flex items-baseline justify-between">
+				<Skeleton className="h-5 w-32" />
+				<Skeleton className="h-5 w-24" />
+			</div>
+
+			{/* CurrentConditions: description + temperature + icon */}
+			<div className="mt-2 flex items-center justify-between">
+				<div>
+					<Skeleton className="h-5 w-24" />
+					<Skeleton className="mt-1 h-[72px] w-36" />
 				</div>
 				<Skeleton className="h-20 w-20 rounded-full" />
 			</div>
-			<div className="border-t border-gray-200" />
-			<div className="grid grid-cols-3 gap-2">
+
+			{/* Divider */}
+			<div className="my-5 border-t border-gray-200" />
+
+			{/* CurrentConditions: stats grid */}
+			<div className="grid grid-cols-3 gap-2 text-center">
 				{[0, 1, 2].map((i) => (
-					<div key={i} className="flex flex-col items-center gap-1.5">
+					<div key={i} className="flex flex-col items-center gap-1">
 						<Skeleton className="h-5 w-5 rounded-full" />
-						<Skeleton className="h-4 w-14" />
-						<Skeleton className="h-3 w-10" />
+						<Skeleton className="h-5 w-16" />
+						<Skeleton className="h-4 w-12" />
 					</div>
 				))}
 			</div>
-			<div className="border-t border-gray-200" />
+
+			{/* Divider */}
+			<div className="my-5 border-t border-gray-200" />
+
+			{/* ForecastTabs */}
 			<div className="flex gap-6">
-				<Skeleton className="h-4 w-12" />
-				<Skeleton className="h-4 w-16" />
-				<Skeleton className="h-4 w-20" />
+				<Skeleton className="h-5 w-12" />
+				<Skeleton className="h-5 w-16" />
+				<Skeleton className="h-5 w-20" />
 			</div>
-			<div className="flex gap-3">
+
+			{/* HourlyForecast */}
+			<div className="mt-4 flex gap-3 overflow-x-auto pb-1">
 				{[0, 1, 2, 3].map((i) => (
 					<div
 						key={i}
-						className="flex w-[70px] flex-col items-center gap-1.5 rounded-2xl border border-gray-100 px-3 py-3"
+						className="flex min-w-[70px] flex-col items-center gap-1.5 rounded-2xl border border-gray-100 bg-gray-50/80 px-3 py-3"
 					>
-						<Skeleton className="h-3 w-10" />
+						<Skeleton className="h-4 w-10" />
 						<Skeleton className="h-5 w-5 rounded-full" />
-						<Skeleton className="h-4 w-8" />
+						<Skeleton className="h-5 w-8" />
 					</div>
 				))}
 			</div>

package/dist/force-app/main/default/webapplications/propertyrentalapp/src/components/maintenanceRequests/MaintenanceRequestList.tsx

@@ -1,14 +1,15 @@
 import { useState } from "react";
-import type { MaintenanceRequestSummary } from "@/api/maintenanceRequests/maintenanceRequestApi";
+import type { MaintenanceRequestNode } from "@/api/maintenanceRequests/maintenanceRequestApi";
 import MaintenanceRequestListItem from "@/components/maintenanceRequests/MaintenanceRequestListItem";
 import MaintenanceSummaryDetailsModal from "@/components/maintenanceRequests/MaintenanceSummaryDetailsModal";
 import { SkeletonListRows } from "@/components/SkeletonPrimitives";
 
 interface MaintenanceRequestListProps {
-	requests: MaintenanceRequestSummary[];
+	requests: MaintenanceRequestNode[];
 	loading: boolean;
 	error: string | null;
 	emptyMessage?: string;
+	skeletonCount?: number;
 }
 
 export default function MaintenanceRequestList({
@@ -16,8 +17,9 @@ export default function MaintenanceRequestList({
 	loading,
 	error,
 	emptyMessage = "No maintenance requests",
+	skeletonCount = 3,
 }: MaintenanceRequestListProps) {
-	const [selectedRequest, setSelectedRequest] = useState<MaintenanceRequestSummary | null>(null);
+	const [selectedRequest, setSelectedRequest] = useState<MaintenanceRequestNode | null>(null);
 
 	return (
 		<>
@@ -27,7 +29,7 @@ export default function MaintenanceRequestList({
 					onClose={() => setSelectedRequest(null)}
 				/>
 			)}
-			{loading && <SkeletonListRows count={3} />}
+			{loading && <SkeletonListRows count={skeletonCount} />}
 			{error && (
 				<p className="py-4 text-sm text-destructive" role="alert">
 					{error}
@@ -40,7 +42,7 @@ export default function MaintenanceRequestList({
 				!error &&
 				requests.map((request) => (
 					<MaintenanceRequestListItem
-						key={request.id}
+						key={request.Id}
 						request={request}
 						onClick={setSelectedRequest}
 					/>

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

@@ -2,25 +2,26 @@
  * Single maintenance request row: icon (teal) | Type & address + title | tenant (gray circle) [| status].
  */
 import { useCallback } from "react";
-import type { MaintenanceRequestSummary } from "@/api/maintenanceRequests/maintenanceRequestApi";
+import type { MaintenanceRequestNode } from "@/api/maintenanceRequests/maintenanceRequestApi";
 import { MaintenanceRequestIcon } from "@/components/maintenanceRequests/MaintenanceRequestIcon";
 import { StatusBadge } from "@/components/maintenanceRequests/StatusBadge";
 
 export interface MaintenanceRequestListItemProps {
-	request: MaintenanceRequestSummary;
+	request: MaintenanceRequestNode;
 	/** When set, row is clickable and opens details (e.g. modal). */
-	onClick?: (request: MaintenanceRequestSummary) => void;
+	onClick?: (request: MaintenanceRequestNode) => void;
 }
 
 export default function MaintenanceRequestListItem({
 	request,
 	onClick,
 }: MaintenanceRequestListItemProps) {
-	const issueType = request.type ?? "General";
-	const addressFirstPart = request.propertyAddress
-		? request.propertyAddress.split(",")[0].trim()
-		: (request.name ?? "—");
-	const title = request.title?.trim() || request.name?.trim() || "—";
+	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);
@@ -51,7 +52,7 @@ export default function MaintenanceRequestListItem({
 					: undefined
 			}
 		>
-			<MaintenanceRequestIcon type={request.type} />
+			<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">
@@ -66,7 +67,7 @@ export default function MaintenanceRequestListItem({
 			</div>
 
 			<div className="ml-4 flex flex-shrink-0 items-center">
-				<StatusBadge status={request.status ?? "—"} />
+				<StatusBadge status={request.Status__c?.value ?? "—"} />
 			</div>
 		</div>
 	);

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

@@ -4,10 +4,10 @@
 import { useEffect } from "react";
 import { X } from "lucide-react";
 import { StatusBadge } from "@/components/maintenanceRequests/StatusBadge";
-import type { MaintenanceRequestSummary } from "@/api/maintenanceRequests/maintenanceRequestApi";
+import type { MaintenanceRequestNode } from "@/api/maintenanceRequests/maintenanceRequestApi";
 
 export interface MaintenanceSummaryDetailsModalProps {
-	request: MaintenanceRequestSummary;
+	request: MaintenanceRequestNode;
 	onClose: () => void;
 }
 
@@ -49,35 +49,40 @@ export default function MaintenanceSummaryDetailsModal({
 				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.title ?? request.name ?? "Request"}</h2>
+					<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 && <p className="text-gray-700">{request.description}</p>}
+					{request.Description__c?.value && (
+						<p className="text-gray-700">{request.Description__c.value}</p>
+					)}
 					<div className="flex flex-wrap gap-2">
-						{request.type && (
-							<span className="rounded bg-gray-100 px-2 py-0.5">{request.type}</span>
+						{request.Type__c?.value && (
+							<span className="rounded bg-gray-100 px-2 py-0.5">{request.Type__c.value}</span>
 						)}
-						{request.priority && (
-							<span className="rounded bg-gray-100 px-2 py-0.5">{request.priority}</span>
+						{request.Priority__c?.value && (
+							<span className="rounded bg-gray-100 px-2 py-0.5">{request.Priority__c.value}</span>
 						)}
-						{request.status && <StatusBadge status={request.status} />}
+						{request.Status__c?.value && <StatusBadge status={request.Status__c.value} />}
 					</div>
-					{request.propertyAddress && (
+					{request.Property__r?.Address__c?.value && (
 						<p>
-							<span className="font-medium">Property:</span> {request.propertyAddress}
+							<span className="font-medium">Property:</span> {request.Property__r.Address__c.value}
 						</p>
 					)}
-					{request.tenantName && (
+					{request.User__r?.Name?.value && (
 						<p>
-							<span className="font-medium">Tenant:</span> {request.tenantName}
+							<span className="font-medium">Tenant:</span> {request.User__r.Name.value}
 						</p>
 					)}
-					{request.dateRequested && (
+					{request.Scheduled__c?.value && (
 						<p>
-							<span className="font-medium">Requested:</span> {formatDate(request.dateRequested)}
+							<span className="font-medium">Requested:</span>{" "}
+							{formatDate(request.Scheduled__c.value)}
 						</p>
 					)}
 				</div>

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

@@ -6,20 +6,9 @@ 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 { SearchResultRecordData } from "@/types/searchResults.js";
+import type { PropertySearchNode } from "@/api/properties/propertySearchService";
 
-function fieldDisplay(
-	fields: Record<string, { value?: unknown; displayValue?: string | null }> | undefined,
-	apiName: string,
-): string | null {
-	const f = fields?.[apiName];
-	if (!f || typeof f !== "object") return null;
-	if (f.displayValue != null && f.displayValue !== "") return String(f.displayValue);
-	if (f.value != null) return typeof f.value === "object" ? null : String(f.value);
-	return null;
-}
-
-function formatPrice(val: string | number | null): string {
+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);
@@ -32,8 +21,8 @@ function formatPrice(val: string | number | null): string {
 	);
 }
 
-interface PropertyListingCardProps {
-	record: SearchResultRecordData;
+export interface PropertyListingCardProps {
+	node: PropertySearchNode;
 	imageUrl: string | null;
 	address?: string | null;
 	amenities?: string | null;
@@ -65,23 +54,21 @@ export function PropertyListingCardSkeleton() {
 }
 
 export default function PropertyListingCard({
-	record,
+	node,
 	imageUrl,
 	address,
 	amenities,
 	loading = false,
 }: PropertyListingCardProps) {
 	const navigate = useNavigate();
-	const name = fieldDisplay(record.fields, "Name") ?? "Untitled";
-	const price = fieldDisplay(record.fields, "Listing_Price__c");
-	const propertyRef = fieldDisplay(record.fields, "Property__c");
-	const bedroomsRaw = fieldDisplay(record.fields, "Property__r.Bedrooms__c");
-	const bedroomsNum = bedroomsRaw != null && bedroomsRaw !== "" ? Number(bedroomsRaw) : NaN;
+	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/${record.id}`;
+	const detailPath = `/property/${node.Id}`;
 
 	const handleClick = useCallback(() => {
 		navigate(detailPath);
@@ -101,7 +88,7 @@ export default function PropertyListingCard({
 		return <PropertyListingCardSkeleton />;
 	}
 
-	const displayAddress = (address ?? propertyRef ?? "").trim().replace(/\n/g, ", ") || null;
+	const displayAddress = (address ?? "").trim().replace(/\n/g, ", ") || null;
 	const amenityLabels = (amenities ?? "")
 		.split(/\s*\|\s*/)
 		.map((s) => s.trim())
@@ -180,7 +167,7 @@ export default function PropertyListingCard({
 					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?listingId=${encodeURIComponent(record.id)}`);
+						navigate(`/application?propertyId=${encodeURIComponent(node.Id)}`);
 					}}
 				>
 					Apply

package/dist/force-app/main/default/webapplications/propertyrentalapp/src/hooks/useGeocode.ts

@@ -1,49 +1,33 @@
-import { useState, useEffect } from "react";
 import { geocodeAddress, getStateZipFromAddress, type GeocodeResult } from "@/utils/geocode";
+import { useCachedAsyncData } from "@/features/object-search/hooks/useCachedAsyncData";
+
+async function geocodeWithFallback(address: string): Promise<GeocodeResult | null> {
+	const normalized = address.replace(/\n/g, ", ").trim();
+	const result = await geocodeAddress(normalized);
+	if (result != null) return result;
+
+	// Fallback: try state + zip if full address failed
+	const stateZip = getStateZipFromAddress(normalized);
+	if (stateZip !== normalized) {
+		return geocodeAddress(stateZip);
+	}
+	return null;
+}
 
 export function useGeocode(address: string | null | undefined): {
 	coords: GeocodeResult | null;
 	loading: boolean;
 } {
-	const [coords, setCoords] = useState<GeocodeResult | null>(null);
-	const [loading, setLoading] = useState(false);
-	const trimmedAddress = address?.trim() ?? "";
-
-	useEffect(() => {
-		if (!trimmedAddress) {
-			setCoords(null);
-			setLoading(false);
-			return;
-		}
-		let cancelled = false;
-		setLoading(true);
-		const normalized = address!.replace(/\n/g, ", ").trim();
-
-		(async () => {
-			try {
-				let result = await geocodeAddress(normalized);
-				if (cancelled) return;
-				if (result != null) {
-					setCoords(result);
-					return;
-				}
-				// Fallback: same as property search – try state + zip if full address failed
-				const stateZip = getStateZipFromAddress(normalized);
-				if (stateZip !== normalized) {
-					result = await geocodeAddress(stateZip);
-					if (!cancelled) setCoords(result);
-				}
-			} catch {
-				if (!cancelled) setCoords(null);
-			} finally {
-				if (!cancelled) setLoading(false);
-			}
-		})();
+	const trimmed = address?.trim() ?? "";
 
-		return () => {
-			cancelled = true;
-		};
-	}, [trimmedAddress]);
+	const { data: coords, loading } = useCachedAsyncData(
+		() => {
+			if (!trimmed) return Promise.resolve(null);
+			return geocodeWithFallback(trimmed);
+		},
+		[trimmed],
+		{ key: `geocode:${trimmed}`, ttl: 600_000 },
+	);
 
 	return { coords, loading };
 }