@salesforce/webapp-template-app-react-sample-b2x-experimental 1.84.0 → 1.85.0

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

@@ -1,6 +1,6 @@
 import { useParams, Link } from "react-router";
-import { Button } from "../components/ui/button";
-import { Card, CardHeader, CardTitle, CardContent } from "../components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 import PropertyMap from "@/components/PropertyMap";
 import { usePropertyDetail } from "@/hooks/usePropertyDetail";
 import { useGeocode } from "@/hooks/useGeocode";
@@ -13,6 +13,18 @@ function formatCurrency(val: number | string | null): string {
 		: new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(n);
 }
 
+/** Currency, no decimals. Used on detail page (no "+" suffix; card uses "+" for "and up"). */
+function formatListingPrice(val: number | string | null): 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);
+}
+
 function formatDate(val: string | null): string {
 	if (!val) return "—";
 	try {
@@ -52,7 +64,7 @@ export default function PropertyDetails() {
 						← Back to listings
 					</Link>
 				</div>
-				<Card className="rounded-2xl shadow-md">
+				<Card className="rounded-2xl border border-border shadow-sm">
 					<CardContent className="pt-6">
 						<p className="text-destructive">{error ?? "Listing not found."}</p>
 					</CardContent>
@@ -120,51 +132,54 @@ export default function PropertyDetails() {
 				</div>
 			)}
 
-			{/* Listing + address */}
-			<Card className="mb-4 rounded-2xl shadow-md">
-				<CardContent className="pt-6">
+			{/* Name, address, price (same order and price format as PropertyListingCard) */}
+			<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"}
+					</h1>
 					{property?.address && (
-						<p className="mb-2 text-sm text-muted-foreground">
+						<p className="mb-1.5 text-sm text-muted-foreground">
 							{property.address.replace(/\n/g, ", ")}
 						</p>
 					)}
-					<p className="mb-1 text-2xl font-bold text-foreground">
+					<p className="mb-4 text-2xl font-semibold text-primary">
 						{listing?.listingPrice != null
-							? formatCurrency(listing.listingPrice)
+							? formatListingPrice(listing.listingPrice)
 							: property?.monthlyRent != null
-								? formatCurrency(property.monthlyRent) + " / Month"
+								? formatListingPrice(property.monthlyRent) + " / Month"
 								: "—"}
 					</p>
-					<p className="mb-4 text-sm text-muted-foreground">
-						{listing?.name ?? property?.name ?? "Untitled"}
-					</p>
-					<div className="flex flex-wrap gap-3">
-						{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" : ""}
+					{/* Stat cards: value on top, label below, rounded panels (same order as reference) */}
+					<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 ?? "—"}
 							</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 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 ?? "—"}
 							</span>
-						)}
-						{listing?.listingStatus && (
-							<span className="rounded-lg bg-primary/10 px-3 py-1.5 text-sm text-primary">
-								{listing.listingStatus}
+							<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 ?? "—"}
 							</span>
-						)}
-						{property?.propertyType && (
-							<span className="rounded-lg bg-primary/10 px-3 py-1.5 text-sm text-primary">
-								{property.propertyType}
+							<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"}
 							</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?.description && (
 						<p className="mt-4 text-sm text-foreground">{property.description}</p>
 					)}
@@ -173,9 +188,9 @@ export default function PropertyDetails() {
 
 			{/* Related: Costs */}
 			{costs.length > 0 && (
-				<Card className="mb-4 rounded-2xl shadow-md">
+				<Card className="mb-4 rounded-2xl border border-border shadow-sm">
 					<CardHeader>
-						<CardTitle className="text-base">Related costs</CardTitle>
+						<CardTitle className="text-base font-semibold">Related costs</CardTitle>
 					</CardHeader>
 					<CardContent>
 						<ul className="space-y-2">
@@ -204,22 +219,22 @@ export default function PropertyDetails() {
 
 			{/* Related: Features */}
 			{features.length > 0 && (
-				<Card className="mb-4 rounded-2xl shadow-md">
+				<Card className="mb-4 rounded-2xl border border-border shadow-sm">
 					<CardHeader>
-						<CardTitle className="text-base">Features & amenities</CardTitle>
+						<CardTitle className="text-base font-semibold">Features & amenities</CardTitle>
 					</CardHeader>
 					<CardContent>
-						<ul className="flex flex-wrap gap-2">
+						<div className="flex flex-wrap gap-1.5">
 							{features.map((f) => (
-								<li
+								<span
 									key={f.id}
-									className="rounded-md border border-border bg-muted/50 px-3 py-1.5 text-sm"
+									className="rounded-full border border-border bg-muted/60 px-2.5 py-0.5 text-xs font-medium text-muted-foreground"
 								>
-									{f.category && <span className="text-muted-foreground">{f.category}: </span>}
+									{f.category ? `${f.category}: ` : ""}
 									{f.description ?? f.name ?? "—"}
-								</li>
+								</span>
 							))}
-						</ul>
+						</div>
 					</CardContent>
 				</Card>
 			)}
@@ -227,8 +242,8 @@ export default function PropertyDetails() {
 			<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"
+					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 ?? "")}`}>
 						Fill out an application

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

@@ -1,7 +1,7 @@
 import { Link } from "react-router";
-import { Button } from "../components/ui/button";
-import { Input } from "../components/ui/input";
-import { Card, CardContent } from "../components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent } from "@/components/ui/card";
 
 const listings = [
 	{

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

@@ -4,21 +4,33 @@
  */
 import { useState, useCallback, useMemo, useEffect } from "react";
 import { useSearchParams } from "react-router";
-import { DEFAULT_PAGE_SIZE } from "../features/global-search/constants";
+import { DEFAULT_PAGE_SIZE } from "@/features/global-search/constants";
 import { usePropertyListingSearch } from "@/hooks/usePropertyListingSearch";
 import {
 	usePropertyPrimaryImages,
 	getPropertyIdFromRecord,
 } from "@/hooks/usePropertyPrimaryImages";
 import { usePropertyAddresses } from "@/hooks/usePropertyAddresses";
+import { usePropertyListingAmenities } from "@/hooks/usePropertyListingAmenities";
 import { usePropertyMapMarkers } from "@/hooks/usePropertyMapMarkers";
-import { Input } from "@/components/ui/input";
-import SearchPagination from "../features/global-search/components/search/SearchPagination";
+import SearchPagination from "@/features/global-search/components/search/SearchPagination";
 import PropertyListingCard from "@/components/PropertyListingCard";
+import PropertySearchFilters, {
+	type BedroomFilter,
+	type SortBy,
+} from "@/components/PropertySearchFilters";
 import PropertyMap from "@/components/PropertyMap";
-import PropertySearchPlaceholder from "./PropertySearchPlaceholder";
+import type { MapMarker, MapBounds } from "@/components/PropertyMap";
+import PropertySearchPlaceholder from "@/pages/PropertySearchPlaceholder";
+import type { SearchResultRecord } from "@/features/global-search/types/search/searchResults.js";
 
-const MAP_CENTER_SF: [number, number] = [37.7749, -122.4194];
+/** Fallback map center when there are no geocoded markers yet. Zoom 7 ≈ 100-mile radius view. */
+const MAP_CENTER_FALLBACK: [number, number] = [37.7897484, -122.3998086];
+const MAP_ZOOM_DEFAULT = 10;
+const MAP_ZOOM_WITH_MARKERS = 12;
+
+/** Delay before applying any filter change to the search (avoids refetch on every keystroke/slider tick). */
+const SEARCH_FILTER_DEBOUNCE_MS = 400;
 
 export default function PropertySearch() {
 	const [searchParams] = useSearchParams();
@@ -26,14 +38,72 @@ export default function PropertySearch() {
 	const [searchQuery, setSearchQuery] = useState(initialSearch);
 	const [searchPageSize, setSearchPageSize] = useState(DEFAULT_PAGE_SIZE);
 	const [searchPageToken, setSearchPageToken] = useState("0");
+	const [priceMin, setPriceMin] = useState<string>("");
+	const [priceMax, setPriceMax] = useState<string>("");
+	const [bedrooms, setBedrooms] = useState<BedroomFilter>(null);
+	const [committedSearchQuery, setCommittedSearchQuery] = useState(initialSearch);
+	const [committedPriceMin, setCommittedPriceMin] = useState<string>("");
+	const [committedPriceMax, setCommittedPriceMax] = useState<string>("");
+	const [committedBedrooms, setCommittedBedrooms] = useState<BedroomFilter>(null);
+	const [stagedSortBy, setStagedSortBy] = useState<SortBy>(null);
+	const [committedSortBy, setCommittedSortBy] = useState<SortBy>("price_asc");
 
 	// Sync from URL when navigating with ?search=... (e.g. from Home "Find Home")
 	useEffect(() => {
 		const q = searchParams.get("search") ?? "";
 		setSearchQuery(q);
+		setCommittedSearchQuery(q);
 		setSearchPageToken("0");
 	}, [searchParams]);
 
+	// Debounce search query only; price and bedrooms commit only when user clicks Save in the popover.
+	useEffect(() => {
+		const t = setTimeout(() => {
+			setCommittedSearchQuery(searchQuery);
+		}, SEARCH_FILTER_DEBOUNCE_MS);
+		return () => clearTimeout(t);
+	}, [searchQuery]);
+
+	const handlePriceSave = useCallback((min: string, max: string) => {
+		setCommittedPriceMin(min);
+		setCommittedPriceMax(max);
+		setSearchPageToken("0");
+	}, []);
+
+	const handleBedsSave = useCallback((value: BedroomFilter) => {
+		setCommittedBedrooms(value);
+		setSearchPageToken("0");
+	}, []);
+
+	const handleSortSave = useCallback((value: SortBy) => {
+		setCommittedSortBy(value);
+		setSearchPageToken("0");
+	}, []);
+
+	const filters = useMemo(() => {
+		const out: {
+			priceMin?: number;
+			priceMax?: number;
+			bedroomsMin?: number;
+			bedroomsMax?: number;
+			sortBy?: SortBy;
+		} = {};
+		const min = committedPriceMin.trim() ? Number(committedPriceMin.replace(/[^0-9.]/g, "")) : NaN;
+		const max = committedPriceMax.trim() ? Number(committedPriceMax.replace(/[^0-9.]/g, "")) : NaN;
+		if (Number.isFinite(min) && min >= 0) out.priceMin = min;
+		if (Number.isFinite(max) && max >= 0) out.priceMax = max;
+		if (committedBedrooms === "le2") {
+			out.bedroomsMax = 2;
+		} else if (committedBedrooms === "3") {
+			out.bedroomsMin = 3;
+			out.bedroomsMax = 3;
+		} else if (committedBedrooms === "ge4") {
+			out.bedroomsMin = 4;
+		}
+		if (committedSortBy != null) out.sortBy = committedSortBy;
+		return out;
+	}, [committedPriceMin, committedPriceMax, committedBedrooms, committedSortBy]);
+
 	const {
 		results,
 		nextPageToken,
@@ -41,15 +111,80 @@ export default function PropertySearch() {
 		currentPageToken,
 		resultsLoading,
 		resultsError,
-	} = usePropertyListingSearch(searchQuery, searchPageSize, searchPageToken);
+	} = usePropertyListingSearch(committedSearchQuery, searchPageSize, searchPageToken, filters);
 
 	const primaryImagesMap = usePropertyPrimaryImages(results);
 	const propertyAddressMap = usePropertyAddresses(results);
+	const amenitiesMap = usePropertyListingAmenities(results);
 	const { markers: mapMarkers } = usePropertyMapMarkers(results);
 	const apiUnavailable = Boolean(resultsError);
 
+	const [mapBounds, setMapBounds] = useState<MapBounds | null>(null);
+
 	const validResults = useMemo(() => results.filter((r) => r?.record?.id), [results]);
 
+	function getSortPrice(r: SearchResultRecord): number {
+		const raw = r?.record?.fields?.["Listing_Price__c"];
+		if (raw == null || typeof raw !== "object") return NaN;
+		const v = (raw as { value?: unknown }).value;
+		return typeof v === "number" ? v : Number(v);
+	}
+	function getSortBeds(r: SearchResultRecord): number {
+		const raw = r?.record?.fields?.["Property__r.Bedrooms__c"];
+		if (raw == null || typeof raw !== "object") return NaN;
+		const v = (raw as { value?: unknown }).value;
+		return typeof v === "number" ? v : Number(v);
+	}
+
+	// Order applied only after user clicks Save (committedSortBy); server may also apply orderBy.
+	const sortedResults = useMemo(() => {
+		if (!committedSortBy) return validResults;
+		const list = [...validResults];
+		if (committedSortBy === "price_asc" || committedSortBy === "price_desc") {
+			const dir = committedSortBy === "price_asc" ? 1 : -1;
+			list.sort((a, b) => {
+				const pa = getSortPrice(a);
+				const pb = getSortPrice(b);
+				if (Number.isNaN(pa) && Number.isNaN(pb)) return 0;
+				if (Number.isNaN(pa)) return 1;
+				if (Number.isNaN(pb)) return -1;
+				return dir * (pa - pb);
+			});
+		} else {
+			const dir = committedSortBy === "beds_asc" ? 1 : -1;
+			list.sort((a, b) => {
+				const ba = getSortBeds(a);
+				const bb = getSortBeds(b);
+				if (Number.isNaN(ba) && Number.isNaN(bb)) return 0;
+				if (Number.isNaN(ba)) return 1;
+				if (Number.isNaN(bb)) return -1;
+				return dir * (ba - bb);
+			});
+		}
+		return list;
+	}, [validResults, committedSortBy]);
+
+	// When user pans/zooms, filter list to properties whose pin is visible on the map
+	const visibleResults = useMemo(() => {
+		if (!mapBounds || mapMarkers.length === 0) return sortedResults;
+		const visiblePropertyIds = new Set(
+			mapMarkers
+				.filter(
+					(m) =>
+						m.propertyId &&
+						m.lat >= mapBounds.south &&
+						m.lat <= mapBounds.north &&
+						m.lng >= mapBounds.west &&
+						m.lng <= mapBounds.east,
+				)
+				.map((m) => m.propertyId as string),
+		);
+		return sortedResults.filter((r) => {
+			const id = getPropertyIdFromRecord(r.record);
+			return id != null && visiblePropertyIds.has(id);
+		});
+	}, [sortedResults, mapMarkers, mapBounds]);
+
 	const handlePageChange = useCallback((newPageToken: string) => {
 		setSearchPageToken(newPageToken);
 	}, []);
@@ -63,47 +198,92 @@ export default function PropertySearch() {
 		setSearchPageToken("0");
 	}, []);
 
+	const popupContent = useCallback(
+		(marker: MapMarker) => {
+			if (!marker.propertyId) return marker.label ?? "Property";
+			const result = results.find(
+				(r) => r?.record && getPropertyIdFromRecord(r.record) === marker.propertyId,
+			);
+			if (!result?.record) return marker.label ?? "Property";
+			const propertyId = getPropertyIdFromRecord(result.record);
+			const imageUrl = propertyId ? (primaryImagesMap[propertyId] ?? null) : null;
+			const address = propertyId ? (propertyAddressMap[propertyId] ?? null) : null;
+			const amenities = propertyId ? (amenitiesMap[propertyId] ?? null) : null;
+			return (
+				<div className="w-[280px] min-w-0">
+					<PropertyListingCard
+						record={result.record}
+						imageUrl={imageUrl}
+						address={address}
+						amenities={amenities || undefined}
+					/>
+				</div>
+			);
+		},
+		[results, primaryImagesMap, propertyAddressMap, amenitiesMap],
+	);
+
 	return (
 		<div className="flex h-[calc(100vh-4rem)] min-h-[500px] flex-col">
-			{/* Search bar */}
-			<div className="flex shrink-0 flex-wrap items-center gap-2 border-b bg-background px-4 py-3">
-				<Input
-					type="text"
-					value={searchQuery}
-					onChange={(e) => setSearchQuery(e.target.value)}
-					onKeyDown={(e) => e.key === "Enter" && handleSearchSubmit()}
-					placeholder="Add area or search"
-					className="h-9 w-48 max-w-[200px]"
-					aria-label="Search property listings"
-				/>
-			</div>
+			<PropertySearchFilters
+				searchQuery={searchQuery}
+				onSearchQueryChange={setSearchQuery}
+				priceMin={priceMin}
+				onPriceMinChange={setPriceMin}
+				priceMax={priceMax}
+				onPriceMaxChange={setPriceMax}
+				onPriceSave={handlePriceSave}
+				bedrooms={bedrooms}
+				onBedroomsChange={setBedrooms}
+				onBedsSave={handleBedsSave}
+				sortBy={stagedSortBy ?? committedSortBy}
+				onSortChange={setStagedSortBy}
+				onSortSave={handleSortSave}
+				appliedSortBy={committedSortBy}
+				onSubmit={handleSearchSubmit}
+			/>
 
-			{/* Main: map left (2/3), list right (1/3) */}
+			{/* Main: map 2/3, list 1/3 */}
 			<div className="flex min-h-0 flex-1 flex-col lg:flex-row">
-				{/* Map – takes ~2/3 on desktop */}
+				{/* Map – 2/3 on desktop */}
 				<div className="h-64 shrink-0 lg:h-full lg:min-h-0 lg:w-2/3" aria-label="Map">
 					<PropertyMap
-						center={MAP_CENTER_SF}
-						zoom={mapMarkers.length > 0 ? 12 : 11}
+						center={MAP_CENTER_FALLBACK}
+						zoom={mapMarkers.length > 0 ? MAP_ZOOM_WITH_MARKERS : MAP_ZOOM_DEFAULT}
 						markers={mapMarkers}
+						popupContent={popupContent}
+						onBoundsChange={setMapBounds}
 						className="h-full w-full"
 					/>
 				</div>
 
-				{/* Listings – scrollable, ~1/3 */}
-				<aside className="flex w-full flex-col border-t border-border bg-background lg:w-1/3 lg:border-l lg:border-t-0">
-					<div className="shrink-0 border-b bg-muted/30 px-4 py-3">
+				{/* Listings – scrollable, 1/3 */}
+				<aside className="flex w-full flex-col border-t border-border lg:w-1/3 lg:border-l lg:border-t-0">
+					<div className="shrink-0 border-b border-border px-4 py-3">
 						<h2 className="text-base font-semibold text-foreground">
 							Property Listings
 							{searchQuery.trim() ? ` matching "${searchQuery.trim()}"` : ""}
 						</h2>
-						<p className="text-sm text-muted-foreground">
-							{apiUnavailable
-								? "Placeholder (API unavailable)"
-								: resultsLoading
-									? "Loading…"
-									: `${results.length} result(s)`}
-						</p>
+						<div className="flex flex-wrap items-center gap-2">
+							<p className="text-sm text-muted-foreground">
+								{apiUnavailable
+									? "Placeholder (API unavailable)"
+									: resultsLoading
+										? "Loading…"
+										: mapBounds != null && mapMarkers.length > 0
+											? `${visibleResults.length} of ${sortedResults.length} in map view`
+											: `${sortedResults.length} result(s)`}
+							</p>
+							{mapBounds != null && sortedResults.length > 0 && !resultsLoading && (
+								<button
+									type="button"
+									onClick={() => setMapBounds(null)}
+									className="text-sm font-medium text-primary hover:underline"
+								>
+									Show all
+								</button>
+							)}
+						</div>
 					</div>
 					<div className="flex-1 overflow-y-auto p-4">
 						{apiUnavailable ? (
@@ -122,24 +302,40 @@ export default function PropertySearch() {
 									</div>
 								))}
 							</div>
-						) : results.length === 0 ? (
+						) : sortedResults.length === 0 ? (
 							<div className="py-12 text-center">
 								<p className="mb-2 font-medium">No results found</p>
 								<p className="text-sm text-muted-foreground">Try adjusting search or filters</p>
 							</div>
+						) : visibleResults.length === 0 && mapBounds != null ? (
+							<div className="py-12 text-center">
+								<p className="mb-2 font-medium">No listings in this map area</p>
+								<p className="text-sm text-muted-foreground">
+									Pan or zoom to see results, or clear the map filter
+								</p>
+								<button
+									type="button"
+									onClick={() => setMapBounds(null)}
+									className="mt-3 text-sm font-medium text-primary hover:underline"
+								>
+									Show all {sortedResults.length} result(s)
+								</button>
+							</div>
 						) : (
 							<>
 								<ul className="space-y-4" role="list" aria-label="Search results">
-									{validResults.map((record, index) => {
+									{visibleResults.map((record, index) => {
 										const propertyId = getPropertyIdFromRecord(record.record);
 										const imageUrl = propertyId ? (primaryImagesMap[propertyId] ?? null) : null;
 										const address = propertyId ? (propertyAddressMap[propertyId] ?? null) : null;
+										const amenities = propertyId ? (amenitiesMap[propertyId] ?? null) : null;
 										return (
 											<li key={record.record.id ?? index}>
 												<PropertyListingCard
 													record={record.record}
 													imageUrl={imageUrl}
 													address={address}
+													amenities={amenities || undefined}
 												/>
 											</li>
 										);

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

@@ -14,7 +14,7 @@ import ChangePassword from "./features/authentication/pages/ChangePassword";
 import AuthenticationRoute from "./features/authentication/layouts/authenticationRouteLayout";
 import PrivateRoute from "./features/authentication/layouts/privateRouteLayout";
 import { ROUTES } from "./features/authentication/authenticationConfig";
-import AppLayout from "./appLayout";
+import AppLayout from "@/appLayout";
 import Dashboard from "@/pages/Dashboard";
 import Maintenance from "@/pages/Maintenance";
 import PropertySearch from "@/pages/PropertySearch";
@@ -107,6 +107,15 @@ export const routes: RouteObject[] = [
         path: "object/Property_Listing__c/:id",
         element: <PropertyDetails />
       },
+      {
+        path: "maintenance/requests",
+        element: <Maintenance />,
+        handle: { showInNavigation: true, label: "Maintenance" }
+      },
+      {
+        path: "application",
+        element: <Application />
+      },
       {
         path: "contact",
         element: <Contact />,

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/styles/global.css

@@ -160,3 +160,67 @@
 body {
 	@apply bg-background text-foreground;
 }
+
+@layer base {
+	* {
+		font-family: "Jost", sans-serif !important;
+	}
+
+	html,
+	body,
+	#root {
+		font-family: "Jost", sans-serif !important;
+	}
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	p,
+	span,
+	div,
+	a,
+	button,
+	input,
+	select,
+	textarea {
+		font-family: "Jost", sans-serif !important;
+	}
+}
+
+@layer components {
+	.text-primary-teal {
+		color: var(--primary);
+	}
+}
+
+/* Leaflet map pin (PropertyMap): Lucide-style MapPin, teal stroke */
+.property-map-pin {
+	border: none !important;
+	background: transparent !important;
+	color: var(--primary);
+	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
+}
+.property-map-pin svg {
+	display: block;
+}
+
+/* Leaflet popup: no extra white box; close button is drawn inside content */
+.leaflet-popup-content-wrapper {
+	background: transparent !important;
+	box-shadow: none !important;
+	border: none !important;
+	padding: 0 !important;
+}
+.leaflet-popup-content {
+	margin: 0 !important;
+	min-width: 0 !important;
+}
+.leaflet-popup-close-button {
+	display: none !important;
+}
+.leaflet-popup-tip {
+	display: none !important;
+}