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

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

@@ -1,38 +1,16 @@
-import { useState, useCallback, useEffect, type SubmitEvent } from "react";
+import { useState, useCallback, type SubmitEvent } from "react";
 import { Link } from "react-router";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { CenteredPageLayout } from "@/features/authentication/layout/centered-page-layout";
-import { Skeleton } from "@/components/ui/skeleton";
-import { SkeletonField } from "@/components/SkeletonPrimitives";
-import { createContactUsLead } from "@/api/leadApi";
+import { Loader2 } from "lucide-react";
+import { createContactUsLead } from "@/api/leads/leadApi";
 import { useAuth } from "@/features/authentication/context/AuthContext";
 import { fetchUserProfile } from "@/features/authentication/api/userProfileApi";
-import type { UserInfo } from "@/api/leadApi";
-
-function LoadingCard() {
-	return (
-		<Card>
-			<CardHeader>
-				<Skeleton className="h-5 w-40" />
-			</CardHeader>
-			<CardContent className="space-y-4" role="status">
-				<div className="grid gap-4 sm:grid-cols-2">
-					<SkeletonField labelWidth="w-24" />
-					<SkeletonField labelWidth="w-20" />
-				</div>
-				<SkeletonField labelWidth="w-12" />
-				<SkeletonField labelWidth="w-14" />
-				<SkeletonField labelWidth="w-16" />
-				<SkeletonField labelWidth="w-20" height="h-[120px]" />
-				<Skeleton className="h-9 w-32" />
-				<span className="sr-only">Loading contact form…</span>
-			</CardContent>
-		</Card>
-	);
-}
+import { useCachedAsyncData } from "@/features/object-search/hooks/useCachedAsyncData";
+import type { UserInfo } from "@/api/leads/leadApi";
 
 function SuccessCard() {
 	return (
@@ -61,6 +39,7 @@ interface ContactFormProps {
 	onSubmit: (e: SubmitEvent<HTMLFormElement>) => void;
 	submitting: boolean;
 	submitError: string | null;
+	loading?: boolean;
 }
 
 function ContactForm({
@@ -69,6 +48,7 @@ function ContactForm({
 	onSubmit,
 	submitting,
 	submitError,
+	loading,
 }: ContactFormProps) {
 	const [firstName, setFirstName] = useState("");
 	const [lastName, setLastName] = useState("");
@@ -78,12 +58,23 @@ function ContactForm({
 	const [message, setMessage] = useState("");
 
 	return (
-		<Card>
+		<Card className="relative">
+			{loading && (
+				<div className="absolute inset-0 z-10 flex items-center justify-center rounded-[inherit] bg-muted/60">
+					<Loader2 className="size-8 animate-spin text-muted-foreground" />
+					<span className="sr-only">Loading contact form…</span>
+				</div>
+			)}
 			<CardHeader>
 				<CardTitle className="text-lg">Send a message</CardTitle>
 			</CardHeader>
 			<CardContent>
-				<form onSubmit={onSubmit} className="space-y-4">
+				<form
+					onSubmit={onSubmit}
+					className="space-y-4"
+					aria-disabled={loading}
+					inert={loading ? true : undefined}
+				>
 					<div className="grid gap-4 sm:grid-cols-2">
 						<div className="space-y-2">
 							<Label htmlFor="contact-first">First name {!isAuthenticated && "*"}</Label>
@@ -168,25 +159,18 @@ function ContactForm({
 
 export default function Contact() {
 	const { isAuthenticated, loading, user } = useAuth();
-	const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
 	const [submitting, setSubmitting] = useState(false);
 	const [submitError, setSubmitError] = useState<string | null>(null);
 	const [submitted, setSubmitted] = useState(false);
 
-	useEffect(() => {
-		if (!isAuthenticated) return;
-		let mounted = true;
-		fetchUserProfile<UserInfo>(user?.id ?? "")
-			.then((data) => {
-				if (mounted) setUserInfo(data);
-			})
-			.catch((err) => {
-				if (mounted) console.error("Failed to load user contact info", err);
-			});
-		return () => {
-			mounted = false;
-		};
-	}, [isAuthenticated, user]);
+	const { data: userInfo } = useCachedAsyncData(
+		() => {
+			if (!isAuthenticated || !user?.id) return Promise.resolve(null);
+			return fetchUserProfile<UserInfo>(user.id);
+		},
+		[isAuthenticated, user?.id],
+		{ key: `contact-user-profile:${user?.id ?? ""}`, ttl: 300_000 },
+	);
 
 	const handleSubmit = useCallback(
 		async (e: SubmitEvent<HTMLFormElement>) => {
@@ -228,17 +212,15 @@ export default function Contact() {
 
 	const isLoading = loading || (isAuthenticated && !userInfo);
 
-	function renderCard() {
-		if (isLoading) return <LoadingCard />;
-		if (submitted) return <SuccessCard />;
+	if (submitted) {
 		return (
-			<ContactForm
-				isAuthenticated={isAuthenticated}
-				userInfo={userInfo}
-				onSubmit={handleSubmit}
-				submitting={submitting}
-				submitError={submitError}
-			/>
+			<CenteredPageLayout contentMaxWidth="md">
+				<h1 className="mb-2 text-2xl font-semibold text-foreground">Contact Us</h1>
+				<p className="mb-6 text-muted-foreground">
+					Have a question or feedback? Send us a message and we'll respond as soon as we can.
+				</p>
+				<SuccessCard />
+			</CenteredPageLayout>
 		);
 	}
 
@@ -248,7 +230,14 @@ export default function Contact() {
 			<p className="mb-6 text-muted-foreground">
 				Have a question or feedback? Send us a message and we'll respond as soon as we can.
 			</p>
-			{renderCard()}
+			<ContactForm
+				isAuthenticated={isAuthenticated}
+				userInfo={userInfo}
+				onSubmit={handleSubmit}
+				submitting={submitting}
+				submitError={submitError}
+				loading={isLoading}
+			/>
 		</CenteredPageLayout>
 	);
 }

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

@@ -32,6 +32,7 @@ export default function Dashboard() {
 							requests={recentMaintenance}
 							loading={maintenanceLoading}
 							error={maintenanceError}
+							skeletonCount={5}
 						/>
 					</CardContent>
 				</Card>

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

@@ -1,20 +1,23 @@
 import { Link, useNavigate } from "react-router";
-import { useRef, useState, type ChangeEvent } from "react";
+import { useRef, useState, useMemo, type ChangeEvent } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Card, CardContent } from "@/components/ui/card";
-import { usePropertyListingSearch } from "@/hooks/usePropertyListingSearch";
 import {
-	usePropertyPrimaryImages,
-	getPropertyIdFromRecord,
-} from "@/hooks/usePropertyPrimaryImages";
-import { usePropertyAddresses } from "@/hooks/usePropertyAddresses";
-import { usePropertyListingAmenities } from "@/hooks/usePropertyListingAmenities";
+	searchProperties,
+	type PropertySearchNode,
+	type PropertySearchResult,
+} from "@/api/properties/propertySearchService";
+import {
+	extractPrimaryImageUrl,
+	extractAmenities,
+	extractAddress,
+} from "@/api/properties/propertyNodeUtils";
+import { useCachedAsyncData } from "@/features/object-search/hooks/useCachedAsyncData";
 import PropertyListingCard, {
 	PropertyListingCardSkeleton,
 } from "@/components/properties/PropertyListingCard";
-import type { SearchResultRecord } from "@/types/searchResults.js";
-import { createNewsletterLead } from "@/api/leadApi";
+import { createNewsletterLead } from "@/api/leads/leadApi";
 import {
 	Phone,
 	Send,
@@ -62,29 +65,24 @@ function FeaturedPropertiesGrid({
 	propertyAddressMap,
 	amenitiesMap,
 }: {
-	results: SearchResultRecord[];
-	primaryImagesMap: Record<string, string> & { loading: boolean };
-	propertyAddressMap: Record<string, string> & { loading: boolean };
-	amenitiesMap: Record<string, string> & { loading: boolean };
+	results: PropertySearchNode[];
+	primaryImagesMap: Record<string, string>;
+	propertyAddressMap: Record<string, string>;
+	amenitiesMap: Record<string, string>;
 }) {
 	return (
 		<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-			{results.map((item, index) => {
-				const record = item.record;
-				const propertyId = getPropertyIdFromRecord(record);
-				const imageUrl = propertyId ? (primaryImagesMap[propertyId] ?? null) : null;
-				const address = propertyId ? (propertyAddressMap[propertyId] ?? null) : null;
-				const amenities = propertyId ? (amenitiesMap[propertyId] ?? null) : null;
+			{results.map((node, index) => {
+				const imageUrl = primaryImagesMap[node.Id] ?? null;
+				const address = propertyAddressMap[node.Id] ?? null;
+				const amenities = amenitiesMap[node.Id] ?? null;
 				return (
-					<div key={record.id ?? index} className="min-h-0">
+					<div key={node.Id ?? index} className="min-h-0">
 						<PropertyListingCard
-							record={record}
+							node={node}
 							imageUrl={imageUrl}
 							address={address}
 							amenities={amenities ?? undefined}
-							loading={
-								primaryImagesMap.loading || propertyAddressMap.loading || amenitiesMap.loading
-							}
 						/>
 					</div>
 				);
@@ -104,14 +102,47 @@ export default function Home() {
 		text: string;
 	} | null>(null);
 
-	const { results: featuredResults, resultsLoading: featuredLoading } = usePropertyListingSearch(
-		"",
-		FEATURED_PAGE_SIZE,
-		"0",
+	const { data: searchResult, loading: featuredLoading } = useCachedAsyncData<PropertySearchResult>(
+		() => searchProperties({ first: FEATURED_PAGE_SIZE }),
+		[],
+		{ key: "featuredProperties" },
+	);
+
+	const featuredResults = useMemo(
+		() =>
+			(searchResult?.edges ?? []).reduce<PropertySearchNode[]>((acc, edge) => {
+				if (edge?.node) acc.push(edge.node);
+				return acc;
+			}, []),
+		[searchResult?.edges],
 	);
-	const primaryImagesMap = usePropertyPrimaryImages(featuredResults);
-	const propertyAddressMap = usePropertyAddresses(featuredResults);
-	const amenitiesMap = usePropertyListingAmenities(featuredResults);
+
+	const primaryImagesMap = useMemo(() => {
+		const map: Record<string, string> = {};
+		for (const node of featuredResults) {
+			const url = extractPrimaryImageUrl(node);
+			if (url) map[node.Id] = url;
+		}
+		return map;
+	}, [featuredResults]);
+
+	const propertyAddressMap = useMemo(() => {
+		const map: Record<string, string> = {};
+		for (const node of featuredResults) {
+			const addr = extractAddress(node);
+			if (addr) map[node.Id] = String(addr);
+		}
+		return map;
+	}, [featuredResults]);
+
+	const amenitiesMap = useMemo(() => {
+		const map: Record<string, string> = {};
+		for (const node of featuredResults) {
+			const amenities = extractAmenities(node);
+			if (amenities) map[node.Id] = amenities;
+		}
+		return map;
+	}, [featuredResults]);
 
 	const handleFindHome = (e: React.FormEvent) => {
 		e.preventDefault();
@@ -136,7 +167,7 @@ export default function Home() {
 		}
 	};
 
-	const validFeatured = featuredResults.filter((r) => r?.record?.id);
+	const validFeatured = featuredResults.filter((r) => r?.Id);
 
 	return (
 		<div className="space-y-0">

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

@@ -1,4 +1,4 @@
-import { useState, useCallback, type ChangeEvent } from "react";
+import { useState, useCallback, useMemo, type ChangeEvent } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -7,9 +7,28 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { Calendar, ArrowRight } from "lucide-react";
 import MaintenanceRequestList from "@/components/maintenanceRequests/MaintenanceRequestList";
 import { SkeletonListRows, SkeletonField } from "@/components/SkeletonPrimitives";
-import { useMaintenanceRequests } from "@/hooks/useMaintenanceRequests";
-import { createMaintenanceRequest } from "@/api/maintenanceRequests/maintenanceRequestApi";
+import {
+	searchMaintenanceRequests,
+	createMaintenanceRequest,
+	type MaintenanceRequestNode,
+} from "@/api/maintenanceRequests/maintenanceRequestApi";
 import { useAuth } from "@/features/authentication/context/AuthContext";
+import {
+	useObjectSearchParams,
+	type PaginationConfig,
+} from "@/features/object-search/hooks/useObjectSearchParams";
+import {
+	useCachedAsyncData,
+	clearCacheEntry,
+} from "@/features/object-search/hooks/useCachedAsyncData";
+import PaginationControls from "@/features/object-search/components/PaginationControls";
+import type {
+	Maintenance_Request__C_Filter,
+	Maintenance_Request__C_OrderBy,
+} from "@/api/graphql-operations-types";
+import { ResultOrder } from "@/api/graphql-operations-types";
+import type { FilterFieldConfig } from "@/features/object-search/utils/filterUtils";
+import type { SortFieldConfig } from "@/features/object-search/utils/sortUtils";
 
 const TYPE_OPTIONS = [
 	"Plumbing",
@@ -29,6 +48,15 @@ const PRIORITY_OPTIONS = [
 	{ value: "Emergency", label: "Emergency (2hr)" },
 ] as const;
 
+const FILTER_CONFIGS: FilterFieldConfig[] = [];
+
+const SORT_CONFIGS: SortFieldConfig[] = [{ field: "Scheduled__c", label: "Scheduled" }];
+
+const PAGINATION_CONFIG: PaginationConfig = {
+	defaultPageSize: 10,
+	validPageSizes: [10, 20, 50],
+};
+
 function MaintenanceSkeleton() {
 	return (
 		<div className="mx-auto max-w-[900px]" role="status">
@@ -62,7 +90,50 @@ function MaintenanceSkeleton() {
 
 export default function Maintenance() {
 	const { loading: authLoading } = useAuth();
-	const { requests, loading, error, refetch } = useMaintenanceRequests();
+
+	const { query, pagination } = useObjectSearchParams<
+		Maintenance_Request__C_Filter,
+		Maintenance_Request__C_OrderBy
+	>(FILTER_CONFIGS, SORT_CONFIGS, PAGINATION_CONFIG);
+
+	const [refreshCounter, setRefreshCounter] = useState(0);
+
+	const searchKey = `maintenance-requests:${JSON.stringify({
+		orderBy: query.orderBy,
+		first: pagination.pageSize,
+		after: pagination.afterCursor,
+		refresh: refreshCounter,
+	})}`;
+
+	const {
+		data: searchResult,
+		loading,
+		error,
+	} = useCachedAsyncData(
+		() =>
+			searchMaintenanceRequests({
+				where: query.where,
+				orderBy: { Scheduled__c: { order: ResultOrder.Desc } },
+				first: pagination.pageSize,
+				after: pagination.afterCursor,
+			}),
+		[query.where, query.orderBy, pagination.pageSize, pagination.afterCursor, refreshCounter],
+		{ key: searchKey },
+	);
+
+	const requests = useMemo(
+		() =>
+			(searchResult?.edges ?? []).reduce<MaintenanceRequestNode[]>((acc, edge) => {
+				if (edge?.node) acc.push(edge.node);
+				return acc;
+			}, []),
+		[searchResult?.edges],
+	);
+
+	const pageInfo = searchResult?.pageInfo;
+	const hasNextPage = pageInfo?.hasNextPage ?? false;
+	const hasPreviousPage = pagination.pageIndex > 0;
+
 	const [title, setTitle] = useState("");
 	const [description, setDescription] = useState("");
 	const [type, setType] = useState<string>("");
@@ -101,14 +172,15 @@ export default function Maintenance() {
 				setType("");
 				setPriority("Standard");
 				setDateRequested(new Date().toISOString().slice(0, 10));
-				await refetch();
+				clearCacheEntry(searchKey);
+				setRefreshCounter((c) => c + 1);
 			} catch (err) {
 				setSubmitError(err instanceof Error ? err.message : "Failed to submit request");
 			} finally {
 				setSubmitting(false);
 			}
 		},
-		[title, description, type, priority, dateRequested, refetch],
+		[title, description, type, priority, dateRequested, searchKey],
 	);
 
 	if (authLoading) return <MaintenanceSkeleton />;
@@ -235,6 +307,23 @@ export default function Maintenance() {
 						emptyMessage="No maintenance requests yet. Submit one above."
 					/>
 				</CardContent>
+				{!loading && !error && requests.length > 0 && (
+					<div className="px-6 pb-6">
+						<PaginationControls
+							pageIndex={pagination.pageIndex}
+							hasNextPage={hasNextPage}
+							hasPreviousPage={hasPreviousPage}
+							pageSize={pagination.pageSize}
+							pageSizeOptions={PAGINATION_CONFIG.validPageSizes}
+							onNextPage={() => {
+								if (pageInfo?.endCursor) pagination.goToNextPage(pageInfo.endCursor);
+							}}
+							onPreviousPage={pagination.goToPreviousPage}
+							onPageSizeChange={pagination.setPageSize}
+							disabled={loading || !!error}
+						/>
+					</div>
+				)}
 			</Card>
 		</div>
 	);

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

@@ -107,20 +107,38 @@ function PropertyDetailsSkeleton() {
 
 export default function PropertyDetails() {
 	const { id } = useParams<{ id: string }>();
-	const { listing, property, images, costs, features, loading, error } = usePropertyDetail(id);
-	const addressForGeocode = property?.address?.replace(/\n/g, ", ") ?? null;
+	const { property, loading, error } = usePropertyDetail(id);
+
+	// Extract nested relationships from the single property node.
+	const images = (property?.Property_Images__r?.edges ?? []).flatMap((e) =>
+		e?.node ? [e.node] : [],
+	);
+	const features = (property?.Property_Features__r?.edges ?? []).flatMap((e) =>
+		e?.node ? [e.node] : [],
+	);
+	const costs = (property?.Property_Costs__r?.edges ?? []).flatMap((e) =>
+		e?.node ? [e.node] : [],
+	);
+	const listing = property?.Property_Listings__r?.edges?.[0]?.node ?? null;
+
+	const addressForGeocode = property?.Address__c?.value?.replace(/\n/g, ", ") ?? null;
+	const hasCoordinates =
+		property?.Coordinates__Latitude__s?.value != null &&
+		property?.Coordinates__Longitude__s?.value != null;
 	// Always call hook in the same order; disable geocoding when coordinates already exist.
-	const { coords: geocodedCoords } = useGeocode(property?.coordinates ? null : addressForGeocode);
-	const addressCoords: GeocodeResult | null =
-		property?.coordinates?.lat != null && property?.coordinates?.lng != null
-			? { lat: property.coordinates.lat, lng: property.coordinates.lng }
-			: geocodedCoords;
+	const { coords: geocodedCoords } = useGeocode(hasCoordinates ? null : addressForGeocode);
+	const addressCoords: GeocodeResult | null = hasCoordinates
+		? {
+				lat: Number(property!.Coordinates__Latitude__s!.value),
+				lng: Number(property!.Coordinates__Longitude__s!.value),
+			}
+		: geocodedCoords;
 
 	if (loading) {
 		return <PropertyDetailsSkeleton />;
 	}
 
-	if (error || (!listing && id)) {
+	if (error || (!property && id)) {
 		return (
 			<div className="mx-auto max-w-[900px]">
 				<div className="mb-4">
@@ -137,8 +155,8 @@ export default function PropertyDetails() {
 		);
 	}
 
-	const primaryImage = images.find((i) => i.imageType === "Primary") ?? images[0];
-	const otherImages = images.filter((i) => i.id !== primaryImage?.id);
+	const primaryImage = images.find((i) => i.Image_Type__c?.value === "Primary") ?? images[0];
+	const otherImages = images.filter((i) => i.Id !== primaryImage?.Id);
 
 	return (
 		<div className="mx-auto max-w-[900px]">
@@ -151,10 +169,10 @@ export default function PropertyDetails() {
 			{/* Hero image + thumbnails */}
 			<div className="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
 				<div className="relative aspect-[4/3] overflow-hidden rounded-xl bg-muted">
-					{primaryImage?.imageUrl ? (
+					{primaryImage?.Image_URL__c?.value ? (
 						<img
-							src={primaryImage.imageUrl}
-							alt={primaryImage.altText ?? primaryImage.name ?? "Property"}
+							src={primaryImage.Image_URL__c.value}
+							alt={primaryImage.Alt_Text__c?.value ?? primaryImage.Name?.value ?? "Property"}
 							className="h-full w-full object-cover"
 						/>
 					) : (
@@ -163,11 +181,11 @@ export default function PropertyDetails() {
 				</div>
 				<div className="flex flex-col gap-2">
 					{otherImages.slice(0, 5).map((img) => (
-						<div key={img.id} className="relative h-20 overflow-hidden rounded-lg bg-muted">
-							{img.imageUrl ? (
+						<div key={img.Id} className="relative h-20 overflow-hidden rounded-lg bg-muted">
+							{img.Image_URL__c?.value ? (
 								<img
-									src={img.imageUrl}
-									alt={img.altText ?? img.name ?? "Property"}
+									src={img.Image_URL__c.value}
+									alt={img.Alt_Text__c?.value ?? img.Name?.value ?? "Property"}
 									className="h-full w-full object-cover"
 								/>
 							) : null}
@@ -186,7 +204,7 @@ export default function PropertyDetails() {
 							{
 								lat: addressCoords.lat,
 								lng: addressCoords.lng,
-								label: listing?.name ?? property?.name ?? "Property",
+								label: listing?.Name?.value ?? property?.Name?.value ?? "Property",
 							},
 						]}
 						className="h-[280px] w-full rounded-xl"
@@ -194,56 +212,56 @@ export default function PropertyDetails() {
 				</div>
 			)}
 
-			{/* Name, address, price (same order and price format as PropertyListingCard) */}
+			{/* Name, address, price */}
 			<Card className="mb-4 rounded-2xl border border-border shadow-sm">
 				<CardContent className="pt-3">
 					<h1 className="mb-1.5 text-2xl font-semibold text-foreground">
-						{listing?.name ?? property?.name ?? "Untitled"}
+						{listing?.Name?.value ?? property?.Name?.value ?? "Untitled"}
 					</h1>
-					{property?.address && (
+					{property?.Address__c?.value && (
 						<p className="mb-1.5 text-sm text-muted-foreground">
-							{property.address.replace(/\n/g, ", ")}
+							{property.Address__c.value.replace(/\n/g, ", ")}
 						</p>
 					)}
 					<p className="mb-4 text-2xl font-semibold text-primary">
-						{listing?.listingPrice != null
-							? formatListingPrice(listing.listingPrice)
-							: property?.monthlyRent != null
-								? formatListingPrice(property.monthlyRent) + " / Month"
+						{listing?.Listing_Price__c?.value != null
+							? formatListingPrice(listing.Listing_Price__c.value)
+							: property?.Monthly_Rent__c?.value != null
+								? formatListingPrice(property.Monthly_Rent__c.value) + " / Month"
 								: "—"}
 					</p>
-					{/* Stat cards: value on top, label below, rounded panels (same order as reference) */}
+					{/* Stat cards */}
 					<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
 						<div className="flex flex-col items-center justify-center rounded-xl bg-primary px-4 py-3 text-center">
 							<span className="text-xl font-semibold text-primary-foreground">
-								{property?.bedrooms ?? "—"}
+								{property?.Bedrooms__c?.value ?? "—"}
 							</span>
 							<span className="text-xs text-primary-foreground/90">Bedrooms</span>
 						</div>
 						<div className="flex flex-col items-center justify-center rounded-xl bg-primary px-4 py-3 text-center">
 							<span className="text-xl font-semibold text-primary-foreground">
-								{property?.bathrooms ?? "—"}
+								{property?.Bathrooms__c?.value ?? "—"}
 							</span>
 							<span className="text-xs text-primary-foreground/90">Baths</span>
 						</div>
 						<div className="flex flex-col items-center justify-center rounded-xl bg-primary px-4 py-3 text-center">
 							<span className="text-xl font-semibold text-primary-foreground">
-								{property?.squareFootage ?? "—"}
+								{property?.Sq_Ft__c?.value ?? "—"}
 							</span>
 							<span className="text-xs text-primary-foreground/90">Square Feet</span>
 						</div>
 						<div className="flex flex-col items-center justify-center rounded-xl bg-primary px-4 py-3 text-center">
 							<span className="text-xl font-semibold text-primary-foreground">
-								{listing?.listingStatus ?? "Now"}
+								{listing?.Listing_Status__c?.value ?? "Now"}
 							</span>
 							<span className="text-xs text-primary-foreground/90">Available</span>
 						</div>
 					</div>
-					{property?.propertyType && (
-						<p className="mt-3 text-sm text-muted-foreground">{property.propertyType}</p>
+					{property?.Type__c?.value && (
+						<p className="mt-3 text-sm text-muted-foreground">{property.Type__c.value}</p>
 					)}
-					{property?.description && (
-						<p className="mt-4 text-sm text-foreground">{property.description}</p>
+					{property?.Description__c?.value && (
+						<p className="mt-4 text-sm text-foreground">{property.Description__c.value}</p>
 					)}
 				</CardContent>
 			</Card>
@@ -258,17 +276,21 @@ export default function PropertyDetails() {
 						<ul className="space-y-2">
 							{costs.slice(0, 10).map((c) => (
 								<li
-									key={c.id}
+									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="text-sm font-medium">{c.Cost_Category__c?.value ?? "Cost"}</span>
+									<span className="text-sm text-muted-foreground">
+										{formatCurrency(c.Cost_Amount__c?.value ?? null)}
+									</span>
+									{c.Cost_Date__c?.value && (
 										<span className="w-full text-xs text-muted-foreground">
-											{formatDate(c.date)}
+											{formatDate(c.Cost_Date__c.value)}
 										</span>
 									)}
-									{c.description && <span className="w-full text-xs">{c.description}</span>}
+									{c.Description__c?.value && (
+										<span className="w-full text-xs">{c.Description__c.value}</span>
+									)}
 								</li>
 							))}
 						</ul>
@@ -289,11 +311,11 @@ export default function PropertyDetails() {
 						<div className="flex flex-wrap gap-1.5">
 							{features.map((f) => (
 								<span
-									key={f.id}
+									key={f.Id}
 									className="rounded-full border border-border bg-muted/60 px-2.5 py-0.5 text-xs font-medium text-muted-foreground"
 								>
-									{f.category ? `${f.category}: ` : ""}
-									{f.description ?? f.name ?? "—"}
+									{f.Feature_Category__c?.value ? `${f.Feature_Category__c.value}: ` : ""}
+									{f.Description__c?.value ?? f.Name?.value ?? "—"}
 								</span>
 							))}
 						</div>
@@ -307,7 +329,7 @@ export default function PropertyDetails() {
 					size="sm"
 					className="w-full cursor-pointer rounded-xl bg-primary px-5 py-5 text-lg font-medium transition-colors duration-200 hover:bg-primary/90"
 				>
-					<Link to={`/application?listingId=${encodeURIComponent(id ?? "")}`}>
+					<Link to={`/application?propertyId=${encodeURIComponent(id ?? "")}`}>
 						Fill out an application
 					</Link>
 				</Button>