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

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/assets/icons/hvac.svg

@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="currentColor" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve">
+<g>
+	<g>
+		<path d="M482.815,93.937H29.185C13.093,93.937,0,107.029,0,123.123v265.755c0,16.093,13.093,29.186,29.185,29.186h453.63
+			c16.092,0,29.185-13.093,29.185-29.186V123.123C512,107.029,498.907,93.937,482.815,93.937z M482.815,397.665H29.185
+			c-4.845,0-8.787-3.942-8.787-8.788V123.123c0-4.845,3.942-8.788,8.787-8.788h453.63c4.845,0,8.787,3.942,8.787,8.788v265.755h0
+			C491.602,393.722,487.66,397.665,482.815,397.665z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M165.227,138.709c-64.674,0-117.291,52.617-117.291,117.291s52.617,117.291,117.291,117.291S282.518,320.674,282.518,256
+			S229.901,138.709,165.227,138.709z M165.227,352.892c-53.427,0-96.892-43.466-96.892-96.892c0-53.426,43.466-96.892,96.892-96.892
+			c53.426,0,96.892,43.466,96.892,96.892C262.12,309.427,218.654,352.892,165.227,352.892z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M252.137,262.786c-4.959-7.802-13.735-11.878-22.893-10.65c-11.264,1.517-22.867,0.816-33.891-2.002
+			c-1.243-5.677-4.005-10.79-7.84-14.892c1.022-2.523,2.468-4.881,4.257-6.924c7.147-8.16,11.081-18.629,11.081-29.475
+			c0-16.945-13.258-30.862-30.184-31.684l-24.291-1.179c-9.244-0.453-17.627,4.364-21.904,12.56
+			c-4.276,8.196-3.424,17.833,2.224,25.151c6.784,8.789,11.772,18.574,14.875,29.144c-4.704,4.049-8.212,9.444-9.922,15.585
+			c-2.285,0.198-4.6,0.078-6.844-0.367c-10.64-2.107-21.672-0.283-31.066,5.141c-14.675,8.472-20.099,26.913-12.347,41.981
+			l11.124,21.627c4.07,7.911,11.968,12.71,20.788,12.71c0.346,0,0.694-0.007,1.041-0.021c9.236-0.395,17.155-5.951,20.67-14.502
+			c4.25-10.345,10.288-19.619,17.974-27.634c2.942,0.902,6.063,1.389,9.298,1.389c2.924,0,5.754-0.405,8.446-1.147
+			c1.567,2.072,2.812,4.394,3.646,6.848c3.495,10.269,10.593,18.911,19.985,24.333c4.998,2.885,10.461,4.264,15.855,4.264
+			c10.443,0,20.627-5.167,26.675-14.561l13.167-20.447C257.068,280.262,257.096,270.587,252.137,262.786z M118.148,307.238
+			c-0.608,1.481-1.788,1.836-2.67,1.874c-0.882,0.035-2.089-0.215-2.821-1.639l-11.124-21.626
+			c-2.767-5.379-0.83-11.962,4.407-14.986c5.111-2.951,11.115-3.943,16.901-2.798c3.914,0.775,7.946,1.007,11.937,0.719
+			c0.934,2.318,2.133,4.501,3.56,6.513C129.792,284.674,123.018,295.385,118.148,307.238z M164.289,268.347
+			c-6.29,0-11.408-5.118-11.408-11.408s5.118-11.407,11.408-11.407s11.407,5.117,11.407,11.407S170.579,268.347,164.289,268.347z
+			 M176.422,214.879c-2.8,3.198-5.136,6.819-6.93,10.688c-1.694-0.28-3.431-0.432-5.204-0.432c-0.578,0-1.151,0.017-1.723,0.048
+			c-3.845-12.279-9.783-23.67-17.721-33.954c-0.978-1.267-0.697-2.466-0.288-3.25c0.409-0.784,1.206-1.696,2.829-1.623l24.291,1.179
+			c6.042,0.294,10.774,5.261,10.774,11.309C182.452,204.744,180.31,210.439,176.422,214.879z M234.912,276.991l-13.168,20.448
+			c-3.273,5.085-9.942,6.699-15.181,3.676c-5.111-2.951-8.972-7.652-10.873-13.239c-1.421-4.174-3.49-8.141-6.072-11.73
+			c1.318-1.734,2.462-3.605,3.407-5.59c12.734,2.905,26.019,3.537,38.94,1.798c1.581-0.216,2.482,0.627,2.957,1.374
+			C235.396,274.474,235.779,275.645,234.912,276.991z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M456.924,141.769H321.275c-5.632,0-10.199,4.566-10.199,10.199s4.567,10.199,10.199,10.199h135.649
+			c5.632,0,10.199-4.566,10.199-10.199S462.556,141.769,456.924,141.769z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M456.924,193.785H321.275c-5.632,0-10.199,4.566-10.199,10.199s4.567,10.199,10.199,10.199h135.649
+			c5.632,0,10.199-4.566,10.199-10.199S462.556,193.785,456.924,193.785z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M456.924,245.801H321.275c-5.632,0-10.199,4.566-10.199,10.199c0,5.633,4.567,10.199,10.199,10.199h135.649
+			c5.632,0,10.199-4.566,10.199-10.199C467.124,250.367,462.556,245.801,456.924,245.801z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M456.924,297.817H321.275c-5.632,0-10.199,4.566-10.199,10.199c0,5.633,4.567,10.199,10.199,10.199h135.649
+			c5.632,0,10.199-4.566,10.199-10.199C467.124,302.383,462.556,297.817,456.924,297.817z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M416.128,349.833h-94.853c-5.632,0-10.199,4.566-10.199,10.199c0,5.633,4.567,10.199,10.199,10.199h94.853
+			c5.632,0,10.199-4.566,10.199-10.199C426.327,354.399,421.76,349.833,416.128,349.833z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M456.924,349.833h-5.1c-5.632,0-10.199,4.566-10.199,10.199c0,5.633,4.567,10.199,10.199,10.199h5.1
+			c5.632,0,10.199-4.566,10.199-10.199C467.124,354.399,462.556,349.833,456.924,349.833z"/>
+	</g>
+</g>
+</svg>

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/assets/icons/pest.svg

@@ -0,0 +1,5 @@
+<?xml version='1.0' encoding='iso-8859-1'?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="currentColor" height="800px" width="800px" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 463 463" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 463 463">
+  <path d="m355.256,145.405c-34.083-19.724-60.085-50.573-73.704-87.254 4.229-2.018 8.958-3.151 13.947-3.151h15.971c0.008,0 0.015,0.002 0.023,0.002 0.051,0 0.102-0.008 0.153-0.009 0.234-0.005 0.465-0.017 0.693-0.042 0.079-0.009 0.157-0.025 0.236-0.036 0.216-0.031 0.43-0.07 0.639-0.119 0.034-0.008 0.069-0.011 0.103-0.019l25.941-6.485c6.912-1.729 11.74-7.912 11.74-15.037v-11.509c0-7.125-4.828-13.309-11.741-15.037l-25.94-6.485c-0.04-0.01-0.081-0.014-0.121-0.024-0.146-0.034-0.293-0.062-0.442-0.087-0.11-0.019-0.221-0.037-0.331-0.051-0.124-0.015-0.25-0.026-0.376-0.035-0.136-0.01-0.271-0.018-0.406-0.021-0.047,2.45463e-15-0.093-0.006-0.142-0.006h-98.745c-10.551,0-20.471,4.109-27.931,11.569l-56.97,56.971c-4.449,4.449-5.768,11.079-3.36,16.892s8.028,9.568 14.32,9.568h29.187v9h-0.5c-8.547,0-15.5,6.953-15.5,15.5v22.273c0,10.239-2.784,20.291-8.052,29.069l-20.639,34.398c-12.632,21.054-19.31,45.161-19.31,69.714v132.546c0,30.603 24.897,55.5 55.5,55.5h96c30.603,0 55.5-24.897 55.5-55.5v-132.546c0-24.553-6.677-48.66-19.31-69.714l-20.639-34.398c-5.268-8.778-8.052-18.83-8.052-29.069v-22.273c0-8.547-6.953-15.5-15.5-15.5h-0.5v-9h8.5c4.142,0 7.5-3.358 7.5-7.5 0-7.219 2.369-13.893 6.365-19.292 15.273,37.82 42.778,69.577 78.378,90.18 1.183,0.685 2.475,1.01 3.75,1.01 2.589,0 5.108-1.343 6.498-3.745 2.076-3.586 0.852-8.174-2.733-10.248zm-19.257-123.659v11.508c0,0.23-0.156,0.43-0.378,0.485l-16.622,4.155v-20.788l16.621,4.155c0.224,0.055 0.379,0.255 0.379,0.485zm-199.828,191.212l20.639-34.398c5.073-8.455 8.32-17.844 9.585-27.56h33.604v144.037c-1.835-0.565-3.396-1.343-5.197-2.244-4.268-2.135-9.579-4.792-19.346-4.792-9.765,0-15.076,2.658-19.343,4.793-3.721,1.862-6.409,3.207-12.631,3.207-6.225,0-8.914-1.345-12.636-3.208-3.02-1.511-6.572-3.279-11.847-4.186v-13.652c-4.26326e-14-21.836 5.938-43.274 17.172-61.997zm71.328,186.042c4.687,0 8.5,3.813 8.5,8.5v8.5h-17v-8.5c0-4.687 3.813-8.5 8.5-8.5zm48,49h-96c-22.332,0-40.5-18.168-40.5-40.5v-103.517c1.808,0.564 3.356,1.334 5.136,2.225 4.268,2.135 9.58,4.792 19.347,4.792 9.766,0 15.076-2.658 19.344-4.793 3.721-1.862 6.409-3.207 12.63-3.207 6.224,0 8.912,1.345 12.634,3.208 3.032,1.517 6.6,3.293 11.909,4.196v73.096c0,0.575 0.071,1.132 0.193,1.669-9.39,3.081-16.193,11.924-16.193,22.331v16c0,4.142 3.358,7.5 7.5,7.5h32c4.142,0 7.5-3.358 7.5-7.5v-16c0-10.407-6.803-19.25-16.193-22.331 0.122-0.537 0.193-1.094 0.193-1.669v-73.117c5.241-0.91 8.776-2.671 11.785-4.176 3.723-1.862 6.413-3.208 12.639-3.208 6.241,0 8.937,1.346 12.668,3.21 4.273,2.134 9.592,4.79 19.37,4.79s15.097-2.656 19.371-4.79c1.791-0.895 3.347-1.668 5.168-2.233v103.524c-0.001,22.332-18.169,40.5-40.501,40.5zm23.329-235.042c11.234,18.724 17.172,40.162 17.172,61.997v13.65c-5.286,0.906-8.844,2.674-11.87,4.185-3.731,1.864-6.427,3.21-12.668,3.21-6.241,0-8.937-1.346-12.668-3.21-4.273-2.134-9.592-4.79-19.37-4.79-9.768,0-15.081,2.657-19.349,4.792-1.76,0.881-3.293,1.643-5.074,2.205v-143.997h33.604c1.265,9.715 4.512,19.104 9.585,27.56l20.638,34.398zm-30.829-93.458v16.5h-81v-16.5c0-0.276 0.224-0.5 0.5-0.5h80c0.276,0 0.5,0.224 0.5,0.5zm-16-15.5h-49v-9h49v9zm16.592-24h-109.778c-0.179,0-0.334,0-0.462-0.309-0.127-0.309-0.018-0.418 0.108-0.545l56.971-56.971c4.628-4.627 10.78-7.175 17.324-7.175h91.245v25h-8.5c-23.64,0-43.302,17.359-46.908,40z"/>
+</svg>

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/assets/icons/plumbing.svg

@@ -0,0 +1,7 @@
+<?xml version='1.0' encoding='iso-8859-1'?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="currentColor" height="800px" width="800px" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 463 463" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 463 463">
+  <g>
+    <path d="m447,341.234v-17.734c0-79.126-64.374-143.5-143.5-143.5h-113.734c-3.138-9.29-11.93-16-22.266-16-4.687,0-8.5-3.813-8.5-8.5v-8.5h0.5c4.142,0 7.5-3.358 7.5-7.5s-3.358-7.5-7.5-7.5h-16.5v-27.077l47.496,9.543c1.786,0.357 3.582,0.533 5.365,0.533 6.219,0 12.28-2.137 17.192-6.165 6.321-5.182 9.947-12.842 9.947-21.016s-3.625-15.833-9.946-21.016c-6.322-5.183-14.544-7.236-22.558-5.632l-50.889,10.177c-4.123-6.796-11.593-11.347-20.107-11.347s-15.984,4.551-20.107,11.348l-50.889-10.178c-8.013-1.602-16.237,0.45-22.558,5.632-6.321,5.182-9.946,12.842-9.946,21.016s3.625,15.834 9.947,21.016c4.913,4.028 10.975,6.166 17.192,6.166 1.781,0 3.575-0.176 5.357-0.532l47.504-9.443v26.975h-16.5c-4.142,0-7.5,3.358-7.5,7.5s3.358,7.5 7.5,7.5h0.5v8.5c0,4.687-3.813,8.5-8.5,8.5-10.336,0-19.128,6.71-22.266,16h-25.734c-12.958,0-23.5,10.542-23.5,23.5v64c0,12.958 10.542,23.5 23.5,23.5h25.734c3.138,9.29 11.93,16 22.266,16h96c10.336,0 19.128-6.71 22.266-16h113.734c17.92,0 32.5,14.58 32.5,32.5v17.734c-9.29,3.138-16,11.93-16,22.266v16c0,12.958 10.542,23.5 23.5,23.5h96c12.958,0 23.5-10.542 23.5-23.5v-16c0-10.336-6.71-19.128-16-22.266zm-253.563-265.355c3.589-0.719 7.274,0.201 10.107,2.523 2.832,2.322 4.456,5.753 4.456,9.416s-1.625,7.094-4.457,9.416c-2.832,2.322-6.516,3.242-10.1,2.524l-50.443-10.135v-3.657l50.437-10.087zm-73.937-.879c4.687,0 8.5,3.813 8.5,8.5v16.5h-17v-16.5c0-4.687 3.813-8.5 8.5-8.5zm-73.937,24.757c-3.592,0.719-7.275-0.202-10.106-2.523-2.832-2.322-4.457-5.754-4.457-9.416s1.624-7.094 4.456-9.416c2.832-2.322 6.515-3.243 10.107-2.523l50.437,10.088v3.765l-50.437,10.025zm65.437,15.243h17v17h-17v-17zm-96,152.5v-64c0-4.687 3.813-8.5 8.5-8.5h24.5v81h-24.5c-4.687,0-8.5-3.813-8.5-8.5zm161,16c0,4.687-3.813,8.5-8.5,8.5h-96c-4.68,0-8.488-3.803-8.499-8.481 0-0.007 0.001-0.013 0.001-0.019 0-0.013-0.002-0.026-0.002-0.039v-95.923c0-0.013 0.002-0.026 0.002-0.039 0-0.007-0.001-0.013-0.001-0.019 0.011-4.677 3.819-8.48 8.499-8.48 12.958,0 23.5-10.542 23.5-23.5v-8.5h49v8.5c0,12.958 10.542,23.5 23.5,23.5 4.687,0 8.5,3.813 8.5,8.5v96zm127.5-7.5h-112.5v-81h112.5c70.855,0 128.5,57.645 128.5,128.5v16.5h-81v-16.5c0-26.191-21.309-47.5-47.5-47.5zm144.5,103.5c0,4.687-3.813,8.5-8.5,8.5h-96c-4.687,0-8.5-3.813-8.5-8.5v-16c0-4.687 3.813-8.5 8.5-8.5h96c4.687,0 8.5,3.813 8.5,8.5v16z"/>
+  </g>
+</svg>

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/assets/icons/zen-logo.svg

@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" rx="8" fill="black" fill-opacity="0.2"/>
+<path d="M10 31V16.3333C13.4868 16.6744 19.9209 18.0046 20.3194 20.5969C20.4604 21.5144 20.45 31 20.45 31M13.4972 31L13.7641 13.9457C13.7641 10.1 25.95 9 25.95 9V31" stroke="white" stroke-width="1.5"/>
+<path d="M29.2494 31.0001V23.4681C25.2137 22.8637 21.6875 23.9923 19.3778 25.2149C18.3982 25.7334 17.6374 26.2688 17.1494 26.6961V31.0001" stroke="white" stroke-width="1.5"/>
+</svg>

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

@@ -0,0 +1,46 @@
+/**
+ * Renders a type-specific icon for maintenance requests (same approach as b2e MaintenanceTable).
+ * Uses imported SVG assets; fallback to 🔧 when type has no icon.
+ */
+import PlumbingIcon from "@/assets/icons/plumbing.svg";
+import HVACIcon from "@/assets/icons/hvac.svg";
+import ElectricalIcon from "@/assets/icons/electrical.svg";
+import AppliancesIcon from "@/assets/icons/appliances.svg";
+import PestIcon from "@/assets/icons/pest.svg";
+
+const issueIcons: Record<string, string> = {
+	Plumbing: PlumbingIcon,
+	HVAC: HVACIcon,
+	Electrical: ElectricalIcon,
+	Appliance: AppliancesIcon,
+	Pest: PestIcon,
+};
+
+const issueIconColors: Record<string, string> = {
+	Plumbing: "bg-teal-100",
+	HVAC: "bg-teal-100",
+	Electrical: "bg-teal-100",
+	Appliance: "bg-teal-100",
+	Pest: "bg-teal-100",
+};
+
+export function MaintenanceRequestIcon({ type }: { type: string | null }) {
+	const issueType = type?.trim() ?? "";
+	const iconSrc = issueIcons[issueType];
+	const bgClass = issueIconColors[issueType] ?? "bg-teal-100";
+
+	return (
+		<div
+			className={`flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-lg ${bgClass}`}
+			aria-hidden
+		>
+			{iconSrc ? (
+				<img src={iconSrc} alt={issueType || "Request"} className="h-6 w-6" />
+			) : (
+				<span className="text-2xl" aria-hidden>
+					🔧
+				</span>
+			)}
+		</div>
+	);
+}

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

@@ -0,0 +1,53 @@
+import { Link, useLocation } from "react-router";
+import { Home, Search, BarChart3, Wrench, Phone, type LucideIcon } from "lucide-react";
+
+interface NavItem {
+	path: string;
+	icon: LucideIcon;
+	label: string;
+}
+
+const navItems: NavItem[] = [
+	{ path: "/", icon: Home, label: "Home" },
+	{ path: "/dashboard", icon: BarChart3, label: "Dashboard" },
+	{ path: "/properties", icon: Search, label: "Property Search" },
+	{ path: "/maintenance/requests", icon: Wrench, label: "Maintenance Requests" },
+	{ path: "/contact", icon: Phone, label: "Contact Us" },
+];
+
+export function NavMenu() {
+	const location = useLocation();
+
+	const isActive = (path: string) => {
+		if (path === "/") return location.pathname === "/";
+		return location.pathname.startsWith(path);
+	};
+
+	return (
+		<nav
+			className="flex w-24 flex-col border-r border-gray-200 bg-white py-8"
+			aria-label="Main navigation"
+		>
+			{navItems.map((item) => {
+				const Icon = item.icon;
+				const active = isActive(item.path);
+				return (
+					<Link
+						key={item.path}
+						to={item.path}
+						className={`flex flex-col items-center justify-center gap-2 px-2 py-4 transition-colors ${
+							active
+								? "border-l-4 border-teal-700 bg-teal-100 text-teal-700"
+								: "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+						}`}
+						title={item.label}
+						aria-label={item.label}
+					>
+						<Icon className="size-6 shrink-0" aria-hidden />
+						<span className="text-center text-xs font-medium leading-tight">{item.label}</span>
+					</Link>
+				);
+			})}
+		</nav>
+	);
+}

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

@@ -1,11 +1,11 @@
 /**
- * ZENLEASE-style listing card: image carousel area, name + address, price by beds, amenities, Apply button.
+ * Stacked property listing card: image on top, details below. Single price + bedrooms, amenity list, Apply button.
+ * No phone or secondary price. Virtual Tours / Videos pills on image.
  */
 import { useNavigate } from "react-router";
-import { useCallback, useState } from "react";
-import { Button } from "./ui/button";
-import type { SearchResultRecordData } from "../features/global-search/types/search/searchResults";
-import { Heart } from "lucide-react";
+import { useCallback, type MouseEvent } from "react";
+import { Button } from "@/components/ui/button";
+import type { SearchResultRecordData } from "@/features/global-search/types/search/searchResults.js";
 
 function fieldDisplay(
 	fields: Record<string, { value?: unknown; displayValue?: string | null }> | undefined,
@@ -36,18 +36,26 @@ interface PropertyListingCardProps {
 	imageUrl: string | null;
 	/** Property address (Address__c from Property__c) when available */
 	address?: string | null;
+	/** Amenities string (e.g. "In-unit washer | Pool | Gym"), separated by | */
+	amenities?: string | null;
 }
 
 export default function PropertyListingCard({
 	record,
 	imageUrl,
 	address,
+	amenities,
 }: PropertyListingCardProps) {
 	const navigate = useNavigate();
-	const [favorited, setFavorited] = useState(false);
 	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 bedroomsLabel =
+		!Number.isNaN(bedroomsNum) && bedroomsNum >= 0
+			? `${bedroomsNum} Bedroom${bedroomsNum !== 1 ? "s" : ""}`
+			: null;
 	const detailPath = `/property/${record.id}`;
 	const displayAddress = (address ?? propertyRef ?? "").trim().replace(/\n/g, ", ") || null;
 
@@ -65,21 +73,16 @@ export default function PropertyListingCard({
 		[handleClick],
 	);
 
-	const toggleFavorite = useCallback((e: React.MouseEvent) => {
-		e.stopPropagation();
-		setFavorited((v) => !v);
-	}, []);
-
 	return (
 		<article
-			className="cursor-pointer overflow-hidden rounded-2xl border border-border bg-card shadow-sm transition-all duration-200 hover:shadow-md focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2"
+			className="flex cursor-pointer flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-sm transition-all duration-200 hover:shadow-md focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2"
 			onClick={handleClick}
 			onKeyDown={handleKeyDown}
 			role="button"
 			tabIndex={0}
 			aria-label={`View details for ${name}`}
 		>
-			{/* Image area with carousel affordances + Virtual Tours / Videos overlays */}
+			{/* Image on top, full width */}
 			<div className="relative aspect-[16/10] w-full overflow-hidden rounded-t-2xl bg-muted">
 				{imageUrl ? (
 					<img src={imageUrl} alt="" className="h-full w-full object-cover" />
@@ -88,25 +91,7 @@ export default function PropertyListingCard({
 						No image
 					</div>
 				)}
-				{/* Left/right carousel arrows (visual only for now) */}
-				<button
-					type="button"
-					className="absolute left-2 top-1/2 flex h-8 w-8 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full bg-black/40 text-white transition-colors duration-200 hover:bg-black/60"
-					aria-label="Previous image"
-					onClick={(e) => e.stopPropagation()}
-				>
-					←
-				</button>
-				<button
-					type="button"
-					className="absolute right-2 top-1/2 flex h-8 w-8 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full bg-black/40 text-white transition-colors duration-200 hover:bg-black/60"
-					aria-label="Next image"
-					onClick={(e) => e.stopPropagation()}
-				>
-					→
-				</button>
-				{/* Virtual Tours / Videos pills – purple per ZENLEASE screenshots */}
-				<div className="absolute left-2 top-2 flex flex-col gap-1">
+				<div className="absolute left-1.5 top-1.5 flex flex-col gap-0.5">
 					<span className="rounded-full bg-violet-600 px-2 py-0.5 text-xs font-medium text-white">
 						Virtual Tours
 					</span>
@@ -116,42 +101,54 @@ export default function PropertyListingCard({
 				</div>
 			</div>
 
-			<div className="p-3">
-				{/* Name + address row with favorite */}
-				<div className="mb-2 flex items-start justify-between gap-2">
-					<div className="min-w-0">
-						<h3 className="font-semibold text-foreground">{name}</h3>
+			{/* Content below: name, address, price+beds, amenities, Apply */}
+			<div className="flex flex-col justify-between p-3">
+				<div>
+					<div className="mb-1.5">
+						<h3 className="text-2xl font-semibold text-foreground">{name}</h3>
 						{displayAddress && (
 							<p className="truncate text-sm text-muted-foreground">{displayAddress}</p>
 						)}
 					</div>
-					<button
-						type="button"
-						className="shrink-0 cursor-pointer rounded-xl p-1 text-muted-foreground transition-colors duration-200 hover:bg-muted hover:text-foreground"
-						aria-label={favorited ? "Remove from favorites" : "Add to favorites"}
-						onClick={toggleFavorite}
-					>
-						<Heart className={`h-5 w-5 ${favorited ? "fill-primary text-primary" : ""}`} />
-					</button>
-				</div>
 
-				{/* Price by beds – single price shown as main */}
-				<div className="mb-2 flex flex-wrap gap-3 text-sm">
-					{price != null && (
-						<span className="font-medium text-foreground">
-							{formatPrice(price)} <span className="font-normal text-muted-foreground">2 Beds</span>
-						</span>
+					{/* Single price + bedrooms – price bold, teal, 2x size */}
+					<div className="mb-1.5 flex flex-wrap items-baseline gap-x-3 gap-y-0.5 text-base">
+						{price != null && (
+							<span className="text-2xl font-semibold text-primary">
+								{formatPrice(price)}
+								{bedroomsLabel != null ? (
+									<span className="ml-1 text-base font-normal text-muted-foreground">
+										{bedroomsLabel}
+									</span>
+								) : null}
+							</span>
+						)}
+					</div>
+
+					{/* Amenity pills (fetched per property, string separated by |) */}
+					{amenities != null && amenities.trim() !== "" && (
+						<div className="mb-2 flex flex-wrap gap-1.5">
+							{amenities
+								.split(/\s*\|\s*/)
+								.map((label) => label.trim())
+								.filter(Boolean)
+								.map((label) => (
+									<span
+										key={label}
+										className="rounded-full border border-border bg-muted/60 px-2.5 py-0.5 text-xs font-medium text-muted-foreground"
+									>
+										{label}
+									</span>
+								))}
+						</div>
 					)}
 				</div>
 
-				{/* Amenities line */}
-				<p className="mb-3 text-xs text-muted-foreground">View details for amenities</p>
-
-				{/* Apply – teal primary button */}
+				{/* Apply button – no phone, no email */}
 				<Button
 					size="sm"
-					className="w-full cursor-pointer rounded-xl bg-primary transition-colors duration-200 hover:bg-primary/90"
-					onClick={(e) => {
+					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)}`);
 					}}

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

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