@salesforce/webapp-template-app-react-sample-b2e-experimental 1.73.0 → 1.74.0

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/lib/propertyAdapter.ts

@@ -0,0 +1,68 @@
+/**
+ * Adapter: maps Property__c GraphQL node (from feature-global-search) to app Property type.
+ */
+import type { Property } from "./types.js";
+
+interface PropertyNode {
+	Id?: string;
+	Name?: { value?: string };
+	Address__c?: { value?: string };
+	Description__c?: { value?: string };
+	Type__c?: { value?: string };
+	Status__c?: { value?: string };
+	Monthly_Rent__c?: { value?: number };
+	Bedrooms__c?: { value?: number };
+	Bathrooms__c?: { value?: number };
+	Sq_Ft__c?: { value?: number };
+	Year_Built__c?: { value?: number };
+	Hero_Image__c?: { value?: string };
+	Deposit__c?: { value?: number };
+	Parking__c?: { value?: string };
+	Pet_Friendly__c?: { value?: boolean };
+	Available_Date__c?: { value?: string };
+	Lease_Term__c?: { value?: number };
+	Features__c?: { value?: string };
+	Utilities__c?: { value?: string };
+	Tour_URL__c?: { value?: string };
+	CreatedDate?: { value?: string };
+	[key: string]: unknown;
+}
+
+export function nodeToProperty(node: Record<string, unknown> | undefined): Property {
+	const n = (node ?? {}) as PropertyNode;
+	const createdYear = n.CreatedDate?.value
+		? new Date(n.CreatedDate.value).getFullYear().toString()
+		: undefined;
+	const features = n.Features__c?.value ? n.Features__c.value.split(";") : undefined;
+	const utilities = n.Utilities__c?.value ? n.Utilities__c.value.split(";") : undefined;
+
+	return {
+		id: n.Id ?? "",
+		name: n.Name?.value ?? "Unnamed Property",
+		address: n.Address__c?.value ?? "Address not available",
+		type: (n.Type__c?.value?.toLowerCase() as "apartment" | "house" | "commercial") ?? "apartment",
+		status:
+			(n.Status__c?.value?.toLowerCase() as "available" | "rented" | "maintenance") ?? "available",
+		monthlyRent: n.Monthly_Rent__c?.value ?? 0,
+		bedrooms: n.Bedrooms__c?.value,
+		bathrooms: n.Bathrooms__c?.value,
+		heroImage: n.Hero_Image__c?.value,
+		description: n.Description__c?.value,
+		sqFt: n.Sq_Ft__c?.value,
+		yearBuilt: n.Year_Built__c?.value,
+		deposit: n.Deposit__c?.value,
+		parking:
+			typeof n.Parking__c?.value === "number"
+				? n.Parking__c.value
+				: n.Parking__c?.value != null
+					? Number(n.Parking__c.value)
+					: undefined,
+		petFriendly: n.Pet_Friendly__c?.value,
+		availableDate: n.Available_Date__c?.value,
+		leaseTerm: n.Lease_Term__c?.value,
+		features,
+		utilities,
+		tourUrl: n.Tour_URL__c?.value,
+		createdDate: createdYear,
+	};
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/lib/propertyColumns.ts

@@ -0,0 +1,17 @@
+/**
+ * Property list column config for useRecordListGraphQL.
+ */
+import type { Column } from "@salesforce/webapp-template-feature-react-global-search-experimental";
+
+const PROPERTY_EXTRA_COLUMNS: Column[] = [
+	{ fieldApiName: "Description__c", label: "Description", searchable: true, sortable: false },
+	{ fieldApiName: "Hero_Image__c", label: "Hero Image", searchable: true, sortable: false },
+	{ fieldApiName: "Address__c", label: "Address", searchable: true, sortable: false },
+	{ fieldApiName: "CreatedDate", label: "Created Date", searchable: true, sortable: false },
+];
+
+export function getPropertyListColumns(columns: Column[]): Column[] {
+	const existing = new Set(columns.map((c) => c.fieldApiName));
+	const toAdd = PROPERTY_EXTRA_COLUMNS.filter((c) => !existing.has(c.fieldApiName));
+	return toAdd.length === 0 ? columns : [...columns, ...toAdd];
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/lib/routeConfig.ts

@@ -0,0 +1,35 @@
+/**
+ * Central route configuration for list pages and navigation.
+ * Use these paths for links and search redirects to avoid duplication.
+ */
+export const PATHS = {
+	HOME: "/",
+	PROPERTIES: "/properties",
+	MAINTENANCE_REQUESTS: "/maintenance/requests",
+	MAINTENANCE_WORKERS: "/maintenance/workers",
+	APPLICATIONS: "/applications",
+} as const;
+
+export interface ListPageRoute {
+	path: string;
+	label: string;
+	searchParamKey?: string;
+}
+
+/** List pages that appear in the Home search object dropdown and in nav */
+export const LIST_PAGE_ROUTES: Record<string, ListPageRoute> = {
+	properties: { path: PATHS.PROPERTIES, label: "Properties", searchParamKey: "q" },
+	maintenance_requests: {
+		path: PATHS.MAINTENANCE_REQUESTS,
+		label: "Maintenance Requests",
+		searchParamKey: "q",
+	},
+	maintenance_workers: {
+		path: PATHS.MAINTENANCE_WORKERS,
+		label: "Maintenance Workers",
+		searchParamKey: "q",
+	},
+	applications: { path: PATHS.APPLICATIONS, label: "Applications", searchParamKey: "q" },
+} as const;
+
+export type ListPageKey = keyof typeof LIST_PAGE_ROUTES;

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/lib/types.ts

@@ -59,3 +59,13 @@ export interface Property {
 	tourUrl?: string;
 	createdDate?: string;
 }
+
+export interface MaintenanceWorker {
+	id: string;
+	name: string;
+	email?: string;
+	phone?: string;
+	organization?: string;
+	activeRequestsCount?: number;
+	status?: string;
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/pages/Applications.tsx

@@ -1,45 +1,28 @@
 import { useEffect, useState } from "react";
+import { useListPage } from "../hooks/useListPage.js";
+import { applicationsListConfig } from "../lib/listPageConfig.js";
+import { ListPageWithFilters } from "../components/list/ListPageWithFilters.js";
+import { PageHeader } from "../components/layout/PageHeader.js";
 import { ApplicationsTable } from "../components/ApplicationsTable.js";
 import { ApplicationDetailsModal } from "../components/ApplicationDetailsModal.js";
-import { getApplications, updateApplicationStatus } from "../api/applications.js";
+import { updateApplicationStatus } from "../api/applications.js";
 import type { Application } from "../lib/types.js";
 
 export default function Applications() {
-	const [applications, setApplications] = useState<Application[]>([]);
-	const [loading, setLoading] = useState(true);
+	const list = useListPage(applicationsListConfig);
 	const [selectedApplication, setSelectedApplication] = useState<Application | null>(null);
 	const [notification, setNotification] = useState<{
 		message: string;
 		type: "success" | "error";
 	} | null>(null);
 
-	useEffect(() => {
-		loadApplications();
-	}, []);
-
-	// Clear notification after 5 seconds
 	useEffect(() => {
 		if (notification) {
-			const timer = setTimeout(() => {
-				setNotification(null);
-			}, 5000);
+			const timer = setTimeout(() => setNotification(null), 5000);
 			return () => clearTimeout(timer);
 		}
 	}, [notification]);
 
-	const loadApplications = async () => {
-		try {
-			setLoading(true);
-			const data = await getApplications();
-			setApplications(data);
-		} catch (error) {
-			console.error("Error loading applications:", error);
-			showNotification("Failed to load applications", "error");
-		} finally {
-			setLoading(false);
-		}
-	};
-
 	const handleRowClick = (application: Application) => {
 		setSelectedApplication(application);
 	};
@@ -51,43 +34,22 @@ export default function Applications() {
 	const handleSaveStatus = async (applicationId: string, status: string) => {
 		try {
 			const success = await updateApplicationStatus(applicationId, status);
-
 			if (success) {
-				// Update the local state
-				setApplications((prev) =>
-					prev.map((app) => (app.id === applicationId ? { ...app, status } : app)),
-				);
-
-				// Update selected application if it's the one being edited
 				if (selectedApplication?.id === applicationId) {
 					setSelectedApplication({ ...selectedApplication, status });
 				}
-
-				showNotification("Application status updated successfully!", "success");
+				setNotification({ message: "Application status updated successfully!", type: "success" });
 			} else {
-				showNotification("Failed to update application status", "error");
+				setNotification({ message: "Failed to update application status", type: "error" });
 			}
 		} catch (error) {
 			console.error("Error updating application:", error);
-			showNotification("An error occurred while updating the status", "error");
+			setNotification({ message: "An error occurred while updating the status", type: "error" });
 		}
 	};
 
-	const showNotification = (message: string, type: "success" | "error") => {
-		setNotification({ message, type });
-	};
-
-	if (loading) {
-		return (
-			<div className="flex items-center justify-center h-screen bg-gray-50">
-				<div className="text-lg text-gray-600">Loading applications...</div>
-			</div>
-		);
-	}
-
 	return (
-		<div className="min-h-screen bg-gray-50">
-			{/* Notification */}
+		<>
 			{notification && (
 				<div className="fixed top-4 right-4 z-50 animate-slide-in">
 					<div
@@ -103,19 +65,42 @@ export default function Applications() {
 				</div>
 			)}
 
-			{/* Main Content */}
-			<div className="max-w-7xl mx-auto p-8">
-				{/* Header */}
-				<div className="mb-6">
-					<h1 className="text-2xl font-bold text-gray-900">Applications</h1>
-					<p className="text-gray-600 mt-1">Manage and review rental applications</p>
-				</div>
-
-				{/* Applications Table */}
-				<ApplicationsTable applications={applications} onRowClick={handleRowClick} />
-			</div>
+			<PageHeader title="Applications" description="Manage and review rental applications" />
+
+			<ListPageWithFilters
+				filterProps={{
+					filters: list.filters,
+					picklistValues: list.picklistValues,
+					formValues: list.formValues,
+					onFormValueChange: list.onFormValueChange,
+					onApply: list.onApplyFilters,
+					onReset: list.onResetFilters,
+					ariaLabel: applicationsListConfig.filtersAriaLabel,
+				}}
+				filterError={list.filterError}
+				loading={list.loading}
+				error={list.error}
+				loadingMessage={applicationsListConfig.loadingMessage}
+				isEmpty={list.items.length === 0}
+				searchPlaceholder="Search by applicant, property, status..."
+				searchAriaLabel="Search applications"
+			>
+				<ApplicationsTable applications={list.items} onRowClick={handleRowClick} />
+
+				{list.canLoadMore && (
+					<div className="flex justify-center mt-6">
+						<button
+							type="button"
+							onClick={list.onLoadMore}
+							disabled={list.loadMoreLoading}
+							className="px-6 py-2 bg-purple-700 hover:bg-purple-800 text-white rounded-lg text-sm font-medium disabled:opacity-50"
+						>
+							{list.loadMoreLoading ? "Loading..." : "Load More"}
+						</button>
+					</div>
+				)}
+			</ListPageWithFilters>
 
-			{/* Application Details Modal */}
 			{selectedApplication && (
 				<ApplicationDetailsModal
 					application={selectedApplication}
@@ -124,6 +109,6 @@ export default function Applications() {
 					onSave={handleSaveStatus}
 				/>
 			)}
-		</div>
+		</>
 	);
 }

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

@@ -1,12 +1,55 @@
-import { useEffect, useState } from "react";
-import { StatCard } from "../components/StatCard.js";
+import { useEffect, useState, useCallback, useMemo } from "react";
+import { useNavigate } from "react-router";
+import {
+	useObjectInfoBatch,
+	useObjectListMetadata,
+	useRecordListGraphQL,
+} from "@salesforce/webapp-template-feature-react-global-search-experimental";
 import { IssuesDonutChart } from "../components/IssuesDonutChart.js";
 import { MaintenanceTable } from "../components/MaintenanceTable.js";
+import { GlobalSearchBar } from "../components/dashboard/GlobalSearchBar.js";
+import { StatCard } from "../components/StatCard.js";
+import { PageContainer } from "../components/layout/PageContainer.js";
+import { PageLoadingState } from "../components/feedback/PageLoadingState.js";
 import { getDashboardMetrics, calculateMetrics } from "../api/dashboard.js";
-import { getMaintenanceRequests } from "../api/maintenance.js";
 import type { DashboardMetrics, MaintenanceRequest } from "../lib/types.js";
+import {
+	GLOBAL_SEARCH_OBJECT_API_NAME,
+	SEARCHABLE_OBJECTS,
+	MAINTENANCE_OBJECT_API_NAME,
+	type SearchableObjectConfig,
+} from "../lib/globalSearchConstants.js";
+import { getMaintenanceColumns } from "../lib/maintenanceColumns.js";
+import { nodeToMaintenanceRequest } from "../lib/maintenanceAdapter.js";
+import { DASHBOARD_MAINTENANCE_LIMIT } from "../lib/constants.js";
+import { PATHS } from "../lib/routeConfig.js";
+
+const CHART_ISSUE_TYPES = ["Plumbing", "HVAC", "Electrical"] as const;
+const CHART_OTHER_LABEL = "Other";
+const CHART_COLORS = ["#7C3AED", "#EC4899", "#14B8A6", "#06B6D4"] as const;
 
 export default function Home() {
+	const navigate = useNavigate();
+	const objectApiNames = useMemo(() => SEARCHABLE_OBJECTS.map((o) => o.objectApiName), []);
+	const { objectInfos } = useObjectInfoBatch(objectApiNames);
+
+	const [searchQuery, setSearchQuery] = useState("");
+	const [selectedObjectApiName, setSelectedObjectApiName] = useState<
+		SearchableObjectConfig["objectApiName"]
+	>(GLOBAL_SEARCH_OBJECT_API_NAME);
+
+	const selectedConfig = useMemo(
+		() => SEARCHABLE_OBJECTS.find((o) => o.objectApiName === selectedObjectApiName),
+		[selectedObjectApiName],
+	);
+	const labelPlural = useMemo(() => {
+		const idx = objectApiNames.indexOf(selectedObjectApiName);
+		const info = idx >= 0 ? objectInfos[idx] : null;
+		return (
+			(info?.labelPlural as string | undefined) ?? selectedConfig?.fallbackLabelPlural ?? "Records"
+		);
+	}, [selectedObjectApiName, objectApiNames, objectInfos, selectedConfig?.fallbackLabelPlural]);
+
 	const [metrics, setMetrics] = useState<DashboardMetrics>({
 		totalProperties: 0,
 		unitsAvailable: 0,
@@ -14,67 +57,91 @@ export default function Home() {
 		topMaintenanceIssue: "",
 		topMaintenanceIssueCount: 0,
 	});
-	const [maintenanceRequests, setMaintenanceRequests] = useState<MaintenanceRequest[]>([]);
-	const [loading, setLoading] = useState(true);
+	const [metricsLoading, setMetricsLoading] = useState(true);
+
+	const listMeta = useObjectListMetadata(MAINTENANCE_OBJECT_API_NAME);
+	const columns = useMemo(() => getMaintenanceColumns(listMeta.columns), [listMeta.columns]);
+	const { edges, loading: maintenanceLoading } = useRecordListGraphQL({
+		objectApiName: MAINTENANCE_OBJECT_API_NAME,
+		columns,
+		columnsLoading: listMeta.loading,
+		columnsError: listMeta.error,
+		first: DASHBOARD_MAINTENANCE_LIMIT,
+		after: null,
+		searchQuery: undefined,
+		sortBy: "Priority__c DESC",
+	});
+
+	const maintenanceRequests: MaintenanceRequest[] = useMemo(
+		() => edges.map((e) => nodeToMaintenanceRequest(e.node as Record<string, unknown>)),
+		[edges],
+	);
 
 	useEffect(() => {
-		loadDashboardData();
+		let cancelled = false;
+		(async () => {
+			try {
+				setMetricsLoading(true);
+				const { properties } = await getDashboardMetrics();
+				if (!cancelled) setMetrics(calculateMetrics(properties));
+			} catch (error) {
+				if (!cancelled) console.error("Error loading dashboard metrics:", error);
+			} finally {
+				if (!cancelled) setMetricsLoading(false);
+			}
+		})();
+		return () => {
+			cancelled = true;
+		};
 	}, []);
 
-	const loadDashboardData = async () => {
-		try {
-			setLoading(true);
-
-			// Load metrics
-			const { properties } = await getDashboardMetrics();
-			setMetrics(calculateMetrics(properties));
-
-			// Load maintenance requests
-			const maintenanceData = await getMaintenanceRequests(5);
-			setMaintenanceRequests(maintenanceData);
-		} catch (error) {
-			console.error("Error loading dashboard data:", error);
-		} finally {
-			setLoading(false);
+	const loading = metricsLoading || listMeta.loading || maintenanceLoading;
+
+	const handleSearchSubmit = useCallback(() => {
+		const trimmed = searchQuery.trim();
+		const path = selectedConfig?.path ?? SEARCHABLE_OBJECTS[0].path;
+		if (trimmed) {
+			navigate(`${path}?q=${encodeURIComponent(trimmed)}`);
+		} else {
+			navigate(path);
 		}
-	};
+	}, [searchQuery, navigate, selectedConfig?.path]);
+
+	const handleBrowseAll = useCallback(() => {
+		navigate(selectedConfig?.path ?? SEARCHABLE_OBJECTS[0].path);
+	}, [navigate, selectedConfig?.path]);
 
-	const handleViewMaintenance = (id: string) => {
-		console.log("View maintenance request:", id);
-	};
+	const handleViewMaintenance = useCallback(() => {
+		navigate(PATHS.MAINTENANCE_REQUESTS);
+	}, [navigate]);
 
-	// Calculate chart data from maintenance requests
-	const calculateChartData = () => {
-		const issueCounts: Record<string, number> = {
+	const chartData = useMemo(() => {
+		const counts: Record<string, number> = {
 			Plumbing: 0,
 			HVAC: 0,
 			Electrical: 0,
-			Other: 0,
+			[CHART_OTHER_LABEL]: 0,
 		};
-
 		maintenanceRequests.forEach((request) => {
 			const type = request.issueType;
-			if (type === "Plumbing" || type === "HVAC" || type === "Electrical") {
-				issueCounts[type]++;
+			if (CHART_ISSUE_TYPES.includes(type as (typeof CHART_ISSUE_TYPES)[number])) {
+				counts[type]++;
 			} else {
-				issueCounts.Other++;
+				counts[CHART_OTHER_LABEL]++;
 			}
 		});
-
 		return [
-			{ name: "Plumbing", value: issueCounts.Plumbing, color: "#7C3AED" },
-			{ name: "HVAC", value: issueCounts.HVAC, color: "#EC4899" },
-			{ name: "Electrical", value: issueCounts.Electrical, color: "#14B8A6" },
-			{ name: "Other", value: issueCounts.Other, color: "#06B6D4" },
+			{ name: "Plumbing", value: counts.Plumbing, color: CHART_COLORS[0] },
+			{ name: "HVAC", value: counts.HVAC, color: CHART_COLORS[1] },
+			{ name: "Electrical", value: counts.Electrical, color: CHART_COLORS[2] },
+			{ name: CHART_OTHER_LABEL, value: counts[CHART_OTHER_LABEL], color: CHART_COLORS[3] },
 		];
-	};
+	}, [maintenanceRequests]);
 
-	// Calculate trends based on current metrics (assuming 10% growth for properties and occupied, 10% decrease for available)
-	const calculateTrends = () => {
+	const trends = useMemo(() => {
 		const totalPropertiesTrend = Math.round(metrics.totalProperties * 0.1);
 		const unitsAvailableTrend = Math.round(metrics.unitsAvailable * 0.1);
 		const occupiedUnitsTrend = Math.round(metrics.occupiedUnits * 0.1);
-
 		return {
 			totalProperties: {
 				trend: totalPropertiesTrend,
@@ -89,92 +156,57 @@ export default function Home() {
 				previous: metrics.occupiedUnits - occupiedUnitsTrend,
 			},
 		};
-	};
-
-	const trends = calculateTrends();
+	}, [metrics]);
 
 	if (loading) {
-		return (
-			<div className="flex items-center justify-center h-screen bg-gray-50">
-				<div className="text-lg text-gray-600">Loading dashboard...</div>
-			</div>
-		);
+		return <PageLoadingState message="Loading dashboard..." />;
 	}
 
 	return (
-		<div className="min-h-screen bg-gray-50">
-			{/* Main Content Area */}
-			<div className="max-w-7xl mx-auto p-8 space-y-6">
-				{/* Search Bar (Desktop) */}
-				<div className="hidden md:flex justify-end mb-4">
-					<div className="w-96 bg-white rounded-full px-6 py-3 shadow-sm border border-gray-200 flex items-center">
-						<input
-							type="text"
-							placeholder="Search"
-							className="flex-1 outline-none text-gray-600"
-							disabled
-						/>
-						<svg
-							className="w-5 h-5 text-gray-400"
-							fill="none"
-							stroke="currentColor"
-							viewBox="0 0 24 24"
-						>
-							<path
-								strokeLinecap="round"
-								strokeLinejoin="round"
-								strokeWidth={2}
-								d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-							/>
-						</svg>
-					</div>
-				</div>
+		<PageContainer>
+			<div className="max-w-7xl mx-auto space-y-6">
+				<GlobalSearchBar
+					objectApiNames={objectApiNames}
+					objectInfos={objectInfos}
+					searchableObjects={SEARCHABLE_OBJECTS}
+					selectedObjectApiName={selectedObjectApiName}
+					onSelectedObjectChange={setSelectedObjectApiName}
+					searchQuery={searchQuery}
+					onSearchQueryChange={setSearchQuery}
+					onSearchSubmit={handleSearchSubmit}
+					onBrowseAll={handleBrowseAll}
+					labelPlural={labelPlural}
+				/>
 
-				{/* Main Layout: 70/30 split */}
 				<div className="grid grid-cols-1 lg:grid-cols-[70%_30%] gap-6">
-					{/* Left Column: Stat Cards + Maintenance Table */}
 					<div className="space-y-6">
-						{/* Stat Cards Row */}
 						<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
 							<StatCard
 								title="Total Properties"
 								value={metrics.totalProperties}
-								trend={{
-									value: trends.totalProperties.trend,
-									isPositive: true,
-								}}
+								trend={{ value: trends.totalProperties.trend, isPositive: true }}
 								subtitle={`Last month total ${trends.totalProperties.previous}`}
 							/>
 							<StatCard
 								title="Units Available"
 								value={metrics.unitsAvailable}
-								trend={{
-									value: trends.unitsAvailable.trend,
-									isPositive: false,
-								}}
+								trend={{ value: trends.unitsAvailable.trend, isPositive: false }}
 								subtitle={`Last month total ${trends.unitsAvailable.previous}/${metrics.totalProperties}`}
 							/>
 							<StatCard
 								title="Occupied Units"
 								value={metrics.occupiedUnits}
-								trend={{
-									value: trends.occupiedUnits.trend,
-									isPositive: true,
-								}}
+								trend={{ value: trends.occupiedUnits.trend, isPositive: true }}
 								subtitle={`Last month total ${trends.occupiedUnits.previous}`}
 							/>
 						</div>
-
-						{/* Maintenance Requests Table */}
 						<MaintenanceTable requests={maintenanceRequests} onView={handleViewMaintenance} />
 					</div>
-
-					{/* Right Column: Donut Chart */}
 					<div>
-						<IssuesDonutChart data={calculateChartData()} />
+						<IssuesDonutChart data={chartData} />
 					</div>
 				</div>
 			</div>
-		</div>
+		</PageContainer>
 	);
 }