@salesforce/webapp-template-app-react-sample-b2x-experimental 1.116.7 → 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/components/properties/PropertyMap.tsx

@@ -63,9 +63,10 @@ interface PropertyMapProps {
 
 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[0], center[1], zoom]);
+	}, [map, center, lat, lng, zoom]);
 	return null;
 }
 

package/dist/force-app/main/default/webapplications/propertyrentalapp/src/features/authentication/context/AuthContext.tsx

@@ -86,7 +86,7 @@ export function useAuth(): AuthContextType {
  * @returns {User} The authenticated user object
  * @throws {Error} If not used within AuthProvider or user is not authenticated
  */
-export function getUser(): User {
+export function useUser(): User {
 	const context = useAuth();
 	if (!context.user) {
 		throw new Error("Authenticated context not established");

package/dist/force-app/main/default/webapplications/propertyrentalapp/src/features/authentication/hooks/useCountdownTimer.ts

@@ -107,7 +107,7 @@ function formatAccessibilityAnnouncement(seconds: number): string {
 			// @ts-expect-error - DurationFormat is not yet in TypeScript lib
 			const formatter = new Intl.DurationFormat(navigator.language, { style: "long" });
 			return formatter.format({ minutes, seconds: secs });
-		} catch (e) {
+		} catch {
 			// Fallback to manual formatting
 		}
 	}

package/dist/force-app/main/default/webapplications/propertyrentalapp/src/features/authentication/pages/Profile.tsx

@@ -8,7 +8,7 @@ import { useAppForm } from "../hooks/form";
 import { ROUTES } from "../authenticationConfig";
 import { emailSchema } from "../authHelpers";
 import { getErrorMessage } from "../utils/helpers";
-import { getUser } from "../context/AuthContext";
+import { useUser } from "../context/AuthContext";
 import { fetchUserProfile, updateUserProfile } from "../api/userProfileApi";
 
 const optionalString = z
@@ -33,7 +33,7 @@ const profileSchema = z.object({
 type ProfileFormValues = z.infer<typeof profileSchema>;
 
 export default function Profile() {
-	const user = getUser();
+	const user = useUser();
 	const [profile, setProfile] = useState<ProfileFormValues | null>(null);
 	const [loadError, setLoadError] = useState<string | null>(null);
 	const [success, setSuccess] = useState(false);
@@ -104,7 +104,7 @@ export default function Profile() {
 			const formData = profileSchema.parse(profile);
 			form.reset(formData);
 		}
-	}, [profile]);
+	}, [profile, form]);
 
 	if (!profile && !loadError) {
 		return <CardSkeleton contentMaxWidth="md" loadingText="Loading profile…" />;

package/dist/force-app/main/default/webapplications/propertyrentalapp/src/features/authentication/pages/Register.tsx

@@ -46,7 +46,7 @@ export default function Register() {
 				// "/services/apexrest/auth/register" refers to a custom Apex Class exposed as a REST resource.
 				// You must ensure this Apex class exists in your org and handles registration
 				// (e.g., duplicate checks and user creation such as Site.createExternalUser).
-				const { confirmPassword, ...request } = formFieldValues;
+				const { confirmPassword: _confirmPassword, ...request } = formFieldValues;
 				const sdk = await createDataSDK();
 				const response = await sdk.fetch!("/services/apexrest/auth/register", {
 					method: "POST",