@salesforce/ui-bundle-template-app-react-sample-b2e 1.117.2

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/pages/MaintenanceWorkerSearch.tsx

@@ -0,0 +1,324 @@
+import { useMemo, useState } from "react";
+import { useNavigate } from "react-router";
+import {
+	searchMaintenanceWorkers,
+	fetchDistinctMaintenanceWorkerType,
+	type MaintenanceWorkerSearchNode,
+} from "../api/maintenanceWorkers/maintenanceWorkerSearchService";
+import { useCachedAsyncData } from "../features/object-search/hooks/useCachedAsyncData";
+import {
+	useObjectSearchParams,
+	type UseObjectSearchParamsReturn,
+} from "../features/object-search/hooks/useObjectSearchParams";
+import type { FilterFieldConfig } from "../features/object-search/utils/filterUtils";
+import type { SortFieldConfig } from "../features/object-search/utils/sortUtils";
+import { PageHeader } from "../components/layout/PageHeader";
+import { PageContainer } from "../components/layout/PageContainer";
+import {
+	FilterProvider,
+	FilterResetButton,
+} from "../features/object-search/components/FilterContext";
+import { FilterRow } from "../components/layout/FilterRow";
+import { SearchFilter } from "../features/object-search/components/filters/SearchFilter";
+import { MultiSelectFilter } from "../features/object-search/components/filters/MultiSelectFilter";
+import { TextFilter } from "../features/object-search/components/filters/TextFilter";
+import { NumericRangeFilter } from "../features/object-search/components/filters/NumericRangeFilter";
+import { DateFilter } from "../features/object-search/components/filters/DateFilter";
+import { ObjectSearchErrorState } from "../components/shared/ObjectSearchErrorState";
+import PaginationControls from "../features/object-search/components/PaginationControls";
+import { WorkerDetailsModal } from "../components/maintenanceWorkers/WorkerDetailsModal";
+import { Skeleton } from "../components/ui/skeleton";
+import {
+	Table,
+	TableHeader,
+	TableBody,
+	TableRow,
+	TableHead,
+	TableCell,
+} from "../components/ui/table";
+import type {
+	Maintenance_Worker__C_Filter,
+	Maintenance_Worker__C_OrderBy,
+} from "../api/graphql-operations-types";
+import { PAGINATION_CONFIG } from "../lib/constants";
+
+const FILTER_CONFIGS: FilterFieldConfig[] = [
+	{
+		field: "search",
+		label: "Search",
+		type: "search",
+		searchFields: ["Name", "Phone__c"],
+		placeholder: "By name, or phone...",
+	},
+	{ field: "Employment_Type__c", label: "Employment Type", type: "picklist" },
+	{ field: "Location__c", label: "Location", type: "text", placeholder: "Location" },
+	{ field: "Hourly_Rate__c", label: "Hourly Rate", type: "numeric" },
+	{ field: "CreatedDate", label: "Created Date", type: "datetime" },
+];
+
+const SORT_CONFIGS: SortFieldConfig<string>[] = [
+	{ field: "Name", label: "Name" },
+	{ field: "Employment_Type__c", label: "Employment Type" },
+	{ field: "Hourly_Rate__c", label: "Hourly Rate" },
+	{ field: "Rating__c", label: "Rating" },
+	{ field: "CreatedDate", label: "Created Date" },
+];
+
+export default function MaintenanceWorkerSearch() {
+	const [selectedWorker, setSelectedWorker] = useState<MaintenanceWorkerSearchNode | null>(null);
+
+	const { data: typeOptions } = useCachedAsyncData(fetchDistinctMaintenanceWorkerType, [], {
+		key: "distinctMaintenanceWorkerType",
+		ttl: 30_000,
+	});
+
+	const { filters, query, pagination, resetAll } = useObjectSearchParams<
+		Maintenance_Worker__C_Filter,
+		Maintenance_Worker__C_OrderBy
+	>(FILTER_CONFIGS, SORT_CONFIGS, PAGINATION_CONFIG);
+
+	const searchKey = `maintenance-workers:${JSON.stringify({ where: query.where, orderBy: query.orderBy, first: pagination.pageSize, after: pagination.afterCursor })}`;
+	const { data, loading, error } = useCachedAsyncData(
+		() =>
+			searchMaintenanceWorkers({
+				where: query.where,
+				orderBy: query.orderBy,
+				first: pagination.pageSize,
+				after: pagination.afterCursor,
+			}),
+		[query.where, query.orderBy, pagination.pageSize, pagination.afterCursor],
+		{ key: searchKey },
+	);
+
+	const validMaintenanceWorkerNodes = useMemo(
+		() =>
+			(data?.edges ?? []).reduce<MaintenanceWorkerSearchNode[]>((acc, edge) => {
+				if (edge?.node) acc.push(edge.node);
+				return acc;
+			}, []),
+		[data?.edges],
+	);
+
+	const pageInfo = data?.pageInfo;
+	const hasNextPage = pageInfo?.hasNextPage ?? false;
+	const hasPreviousPage = pagination.pageIndex > 0;
+
+	return (
+		<>
+			<PageContainer>
+				<PageHeader title="Maintenance Workers" description="View and filter maintenance workers" />
+				<MaintenanceWorkerSearchFilters
+					filters={filters}
+					typeOptions={typeOptions ?? []}
+					resetAll={resetAll}
+				/>
+
+				<div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
+					<Table>
+						<MaintenanceWorkerSearchTableHeader />
+						<TableBody>
+							{loading && <MaintenanceWorkerSearchSkeleton pageSize={pagination.pageSize} />}
+
+							{!loading && error && <MaintenanceWorkerSearchErrorState />}
+
+							{!loading && !error && validMaintenanceWorkerNodes.length === 0 && (
+								<MaintenanceWorkerSearchNoResults />
+							)}
+
+							{!loading && !error && validMaintenanceWorkerNodes.length > 0 && (
+								<MaintenanceWorkerSearchTable
+									workerNodes={validMaintenanceWorkerNodes}
+									setSelectedWorker={setSelectedWorker}
+								/>
+							)}
+						</TableBody>
+					</Table>
+				</div>
+
+				<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}
+				/>
+			</PageContainer>
+
+			{!loading && !error && selectedWorker && (
+				<WorkerDetailsModal
+					worker={selectedWorker}
+					isOpen={!!selectedWorker}
+					onClose={() => setSelectedWorker(null)}
+				/>
+			)}
+		</>
+	);
+}
+
+function MaintenanceWorkerSearchFilters({
+	filters,
+	typeOptions,
+	resetAll,
+}: {
+	filters: UseObjectSearchParamsReturn<
+		Maintenance_Worker__C_Filter,
+		Maintenance_Worker__C_OrderBy
+	>["filters"];
+	typeOptions: Array<{ value: string; label: string }>;
+	resetAll: () => void;
+}) {
+	return (
+		<FilterProvider
+			filters={filters.active}
+			onFilterChange={filters.set}
+			onFilterRemove={filters.remove}
+			onReset={resetAll}
+		>
+			<FilterRow ariaLabel="Maintenance Workers filters">
+				<SearchFilter
+					field="search"
+					label="Search"
+					placeholder="By name, or phone..."
+					className="w-full sm:w-50"
+				/>
+				<MultiSelectFilter
+					field="Employment_Type__c"
+					label="Employment Type"
+					options={typeOptions}
+					className="w-full sm:w-36"
+				/>
+				<TextFilter
+					field="Location__c"
+					label="Location"
+					placeholder="Location"
+					className="w-full sm:w-50"
+				/>
+				<NumericRangeFilter
+					field="Hourly_Rate__c"
+					label="Hourly Rate"
+					min={0}
+					max={1000}
+					className="w-full sm:w-50"
+				/>
+				<DateFilter
+					field="CreatedDate"
+					label="Created Date"
+					filterType="datetime"
+					className="w-full sm:w-56"
+				/>
+				<FilterResetButton />
+			</FilterRow>
+		</FilterProvider>
+	);
+}
+
+function MaintenanceWorkerSearchTableHeader() {
+	return (
+		<TableHeader>
+			<TableRow>
+				<TableHead className="w-4/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
+					Name
+				</TableHead>
+				<TableHead className="w-3/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
+					Organization
+				</TableHead>
+				<TableHead className="w-3/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
+					Active Requests
+				</TableHead>
+				<TableHead className="w-2/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
+					Status
+				</TableHead>
+			</TableRow>
+		</TableHeader>
+	);
+}
+
+function MaintenanceWorkerSearchNoResults() {
+	return (
+		<TableRow>
+			<TableCell colSpan={4} className="text-center py-12 text-gray-500">
+				No maintenance workers found
+			</TableCell>
+		</TableRow>
+	);
+}
+
+function MaintenanceWorkerSearchTable({
+	workerNodes,
+	setSelectedWorker,
+}: {
+	workerNodes: MaintenanceWorkerSearchNode[];
+	setSelectedWorker: (worker: MaintenanceWorkerSearchNode) => void;
+}) {
+	return (
+		<>
+			{workerNodes.map((worker) => {
+				const name = worker.Name?.value ?? "";
+				const isActive = worker.IsActive__c?.value;
+				return (
+					<TableRow
+						key={worker.Id}
+						onClick={() => setSelectedWorker(worker)}
+						className="hover:bg-gray-50 transition-colors cursor-pointer"
+					>
+						<TableCell className="px-6 py-4 font-medium text-gray-900">{name}</TableCell>
+						<TableCell className="px-6 py-4 text-gray-600">
+							{worker.Employment_Type__c?.value ?? worker.Type__c?.value ?? "\u2014"}
+						</TableCell>
+						<TableCell className="px-6 py-4 text-gray-600">
+							{worker.Maintenance_Requests__r?.totalCount ?? 0}
+						</TableCell>
+						<TableCell className="px-6 py-4 text-gray-600">
+							{typeof isActive === "boolean" ? (isActive ? "Active" : "Inactive") : "\u2014"}
+						</TableCell>
+					</TableRow>
+				);
+			})}
+		</>
+	);
+}
+
+function MaintenanceWorkerSearchSkeleton({ pageSize }: { pageSize: number }) {
+	return (
+		<>
+			{Array.from({ length: pageSize }, (_, i) => (
+				<TableRow key={i}>
+					<TableCell className="w-4/12 px-6 py-4">
+						<Skeleton className="h-5 w-3/4" />
+					</TableCell>
+					<TableCell className="w-3/12 px-6 py-4">
+						<Skeleton className="h-5 w-2/3" />
+					</TableCell>
+					<TableCell className="w-3/12 px-6 py-4">
+						<Skeleton className="h-5 w-1/4" />
+					</TableCell>
+					<TableCell className="w-2/12 px-6 py-4">
+						<Skeleton className="h-5 w-1/2" />
+					</TableCell>
+				</TableRow>
+			))}
+		</>
+	);
+}
+
+function MaintenanceWorkerSearchErrorState() {
+	const navigate = useNavigate();
+
+	return (
+		<TableRow>
+			<TableCell colSpan={4} className="p-0">
+				<ObjectSearchErrorState
+					message="There was an error loading the maintenance workers. Please try again."
+					onGoHome={() => navigate("/")}
+					onRetry={() => navigate(0)}
+				/>
+			</TableCell>
+		</TableRow>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/pages/NotFound.tsx

@@ -0,0 +1,18 @@
+import { Link } from 'react-router';
+
+export default function NotFound() {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold text-gray-900 mb-4">404</h1>
+        <p className="text-lg text-gray-600 mb-8">Page not found</p>
+        <Link
+          to="/"
+          className="inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+        >
+          Go to Home
+        </Link>
+      </div>
+    </div>
+  );
+}

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/pages/PropertySearch.tsx

@@ -0,0 +1,258 @@
+import { useMemo, useState } from "react";
+import { useNavigate } from "react-router";
+import {
+	searchProperties,
+	fetchDistinctPropertyStatus,
+	fetchDistinctPropertyType,
+	type PropertySearchNode,
+} from "../api/properties/propertySearchService";
+import { useCachedAsyncData } from "../features/object-search/hooks/useCachedAsyncData";
+import {
+	useObjectSearchParams,
+	type UseObjectSearchParamsReturn,
+} from "../features/object-search/hooks/useObjectSearchParams";
+import type { FilterFieldConfig } from "../features/object-search/utils/filterUtils";
+import type { SortFieldConfig } from "../features/object-search/utils/sortUtils";
+import type { Property__C_Filter, Property__C_OrderBy } from "../api/graphql-operations-types";
+import { PageHeader } from "../components/layout/PageHeader";
+import { PageContainer } from "../components/layout/PageContainer";
+import {
+	FilterProvider,
+	FilterResetButton,
+} from "../features/object-search/components/FilterContext";
+import { FilterRow } from "../components/layout/FilterRow";
+import { SearchFilter } from "../features/object-search/components/filters/SearchFilter";
+import { MultiSelectFilter } from "../features/object-search/components/filters/MultiSelectFilter";
+import { NumericRangeFilter } from "../features/object-search/components/filters/NumericRangeFilter";
+import { ObjectSearchErrorState } from "../components/shared/ObjectSearchErrorState";
+import PaginationControls from "../features/object-search/components/PaginationControls";
+import { PropertyCard } from "../components/properties/PropertyCard";
+import { PropertyDetailsModal } from "../components/properties/PropertyDetailsModal";
+import { Skeleton } from "../components/ui/skeleton";
+import { PAGINATION_CONFIG } from "../lib/constants";
+
+const FILTER_CONFIGS: FilterFieldConfig[] = [
+	{
+		field: "search",
+		label: "Search",
+		type: "search",
+		searchFields: ["Name", "Address__c"],
+		placeholder: "Search by name or address...",
+	},
+	{ field: "Name", label: "Property Name", type: "text", placeholder: "Search by name..." },
+	{ field: "Status__c", label: "Status", type: "picklist" },
+	{ field: "Type__c", label: "Type", type: "picklist" },
+	{ field: "Monthly_Rent__c", label: "Monthly Rent", type: "numeric" },
+	{ field: "Bedrooms__c", label: "Bedrooms", type: "numeric" },
+];
+
+const PROPERTY_SORT_CONFIGS: SortFieldConfig<string>[] = [
+	{ field: "Name", label: "Name" },
+	{ field: "Monthly_Rent__c", label: "Monthly Rent" },
+	{ field: "Status__c", label: "Status" },
+	{ field: "CreatedDate", label: "Created Date" },
+];
+
+export default function PropertySearch() {
+	const [selectedProperty, setSelectedProperty] = useState<PropertySearchNode | null>(null);
+
+	const { data: statusOptions } = useCachedAsyncData(fetchDistinctPropertyStatus, [], {
+		key: "distinctPropertyStatus",
+		ttl: 30_000,
+	});
+	const { data: typeOptions } = useCachedAsyncData(fetchDistinctPropertyType, [], {
+		key: "distinctPropertyType",
+		ttl: 30_000,
+	});
+
+	const { filters, query, pagination, resetAll } = useObjectSearchParams<
+		Property__C_Filter,
+		Property__C_OrderBy
+	>(FILTER_CONFIGS, PROPERTY_SORT_CONFIGS, PAGINATION_CONFIG);
+
+	const searchKey = `properties:${JSON.stringify({ where: query.where, orderBy: query.orderBy, first: pagination.pageSize, after: pagination.afterCursor })}`;
+	const { data, loading, error } = useCachedAsyncData(
+		() =>
+			searchProperties({
+				where: query.where,
+				orderBy: query.orderBy,
+				first: pagination.pageSize,
+				after: pagination.afterCursor,
+			}),
+		[query.where, query.orderBy, pagination.pageSize, pagination.afterCursor],
+		{ key: searchKey },
+	);
+
+	const validPropertyNodes = useMemo(
+		() =>
+			(data?.edges ?? []).reduce<PropertySearchNode[]>((acc, edge) => {
+				if (edge?.node) acc.push(edge.node);
+				return acc;
+			}, []),
+		[data?.edges],
+	);
+
+	const pageInfo = data?.pageInfo;
+	const hasNextPage = pageInfo?.hasNextPage ?? false;
+	const hasPreviousPage = pagination.pageIndex > 0;
+
+	return (
+		<>
+			<PageContainer>
+				<PageHeader title="Properties" description="Browse and manage available properties" />
+				<PropertySearchFilters
+					filters={filters}
+					statusOptions={statusOptions ?? []}
+					typeOptions={typeOptions ?? []}
+					resetAll={resetAll}
+				/>
+
+				{loading && <PropertySearchSkeleton pageSize={pagination.pageSize} />}
+
+				{!loading && error && <PropertySearchErrorState />}
+
+				{!loading && !error && validPropertyNodes.length === 0 && <PropertySearchNoResults />}
+
+				{!loading && !error && validPropertyNodes.length > 0 && (
+					<PropertySearchGrid
+						propertyNodes={validPropertyNodes}
+						setSelectedProperty={setSelectedProperty}
+					/>
+				)}
+
+				<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}
+				/>
+			</PageContainer>
+
+			{!loading && !error && selectedProperty && (
+				<PropertyDetailsModal
+					property={selectedProperty}
+					isOpen={!!selectedProperty}
+					onClose={() => setSelectedProperty(null)}
+				/>
+			)}
+		</>
+	);
+}
+
+function PropertySearchFilters({
+	filters,
+	statusOptions,
+	typeOptions,
+	resetAll,
+}: {
+	filters: UseObjectSearchParamsReturn<Property__C_Filter, Property__C_OrderBy>["filters"];
+	statusOptions: Array<{ value: string; label: string }>;
+	typeOptions: Array<{ value: string; label: string }>;
+	resetAll: () => void;
+}) {
+	return (
+		<FilterProvider
+			filters={filters.active}
+			onFilterChange={filters.set}
+			onFilterRemove={filters.remove}
+			onReset={resetAll}
+		>
+			<FilterRow ariaLabel="Properties filters">
+				<SearchFilter
+					field="search"
+					label="Search"
+					placeholder="Search by name or address..."
+					className="w-full sm:w-50"
+				/>
+				<MultiSelectFilter
+					field="Status__c"
+					label="Status"
+					options={statusOptions}
+					className="w-full sm:w-36"
+				/>
+				<MultiSelectFilter
+					field="Type__c"
+					label="Type"
+					options={typeOptions}
+					className="w-full sm:w-36"
+				/>
+				<NumericRangeFilter
+					field="Monthly_Rent__c"
+					label="Monthly Rent"
+					min={0}
+					max={100_000}
+					className="w-full sm:w-50"
+				/>
+				<NumericRangeFilter
+					field="Bedrooms__c"
+					label="Bedrooms"
+					min={0}
+					max={20}
+					className="w-full sm:w-50"
+				/>
+				<FilterResetButton />
+			</FilterRow>
+		</FilterProvider>
+	);
+}
+
+function PropertySearchNoResults() {
+	return (
+		<div className="text-center py-12">
+			<p className="text-gray-500 text-lg">No properties found</p>
+		</div>
+	);
+}
+
+function PropertySearchGrid({
+	propertyNodes,
+	setSelectedProperty,
+}: {
+	propertyNodes: PropertySearchNode[];
+	setSelectedProperty: (property: PropertySearchNode) => void;
+}) {
+	return (
+		<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+			{propertyNodes.map((property) => (
+				<PropertyCard key={property.Id} property={property} onClick={setSelectedProperty} />
+			))}
+		</div>
+	);
+}
+
+function PropertySearchSkeleton({ pageSize }: { pageSize: number }) {
+	return (
+		<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+			{Array.from({ length: pageSize }, (_, i) => (
+				<div key={i} className="bg-white rounded-lg shadow-md overflow-hidden">
+					<Skeleton className="h-48 w-full rounded-none" />
+					<div className="p-6 space-y-2">
+						<Skeleton className="h-6 w-48" />
+						<Skeleton className="h-4 w-full" />
+						<Skeleton className="h-4 w-40" />
+						<Skeleton className="h-4 w-24" />
+					</div>
+				</div>
+			))}
+		</div>
+	);
+}
+
+function PropertySearchErrorState() {
+	const navigate = useNavigate();
+
+	return (
+		<ObjectSearchErrorState
+			message="There was an error loading the properties. Please try again."
+			onGoHome={() => navigate("/")}
+			onRetry={() => navigate(0)}
+		/>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/pages/TestAccPage.tsx

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+import AgentforceConversationClient from "../components/AgentforceConversationClient";
+
+export default function TestAccPage() {
+	return (
+		<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+			<div className="text-center">
+				<h1 className="text-4xl font-bold text-gray-900 mb-4">ACC</h1>
+				<p className="text-lg text-gray-600 mb-8">Welcome to your ACC application.</p>
+			</div>
+			<AgentforceConversationClient agentId="0Xx000000000000AAA" />
+		</div>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/router-utils.tsx

@@ -0,0 +1,35 @@
+import type { RouteObject } from 'react-router';
+import { routes } from './routes';
+
+export type RouteWithFullPath = RouteObject & { fullPath: string };
+
+const flatMapRoutes = (
+  route: RouteObject,
+  parentPath: string = ''
+): RouteWithFullPath[] => {
+  let fullPath: string;
+
+  if (route.index) {
+    fullPath = parentPath || '/';
+  } else if (route.path) {
+    if (route.path.startsWith('/')) {
+      fullPath = route.path;
+    } else {
+      fullPath =
+        parentPath === '/' ? `/${route.path}` : `${parentPath}/${route.path}`;
+    }
+  } else {
+    fullPath = parentPath;
+  }
+
+  const routeWithPath = { ...route, fullPath };
+
+  const childRoutes =
+    route.children?.flatMap(child => flatMapRoutes(child, fullPath)) || [];
+
+  return [routeWithPath, ...childRoutes];
+};
+
+export const getAllRoutes = (): RouteWithFullPath[] => {
+  return routes.flatMap(route => flatMapRoutes(route));
+};