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

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/features/object-search/utils/sortUtils.ts

@@ -0,0 +1,38 @@
+import { ResultOrder, NullOrder } from "../../../api/graphql-operations-types";
+
+export type SortFieldConfig<TFieldName extends string = string> = {
+	field: TFieldName;
+	label: string;
+};
+
+export type SortState<TFieldName extends string = string> = {
+	field: TFieldName;
+	direction: "ASC" | "DESC";
+};
+
+/**
+ * Converts a {@link SortState} into a GraphQL order-by object.
+ *
+ * @typeParam TOrderBy - The GraphQL order-by input type (e.g. `AccountOrderByInput`).
+ * @param sort - The current sort state from the UI, or `null` if no sort is applied.
+ * @returns An order-by object for the GraphQL query's `orderBy` variable, or
+ *          `undefined` if no sort is active (which uses the API's default ordering).
+ *
+ * @example
+ * ```ts
+ * const orderBy = buildOrderBy<AccountOrderByInput>({
+ *   field: "Name",
+ *   direction: "ASC",
+ * });
+ * // orderBy => { Name: { order: ResultOrder.Asc, nulls: NullOrder.Last } }
+ * ```
+ */
+export function buildOrderBy<TOrderBy>(sort: SortState | null): TOrderBy | undefined {
+	if (!sort) return undefined;
+	return {
+		[sort.field]: {
+			order: sort.direction === "ASC" ? ResultOrder.Asc : ResultOrder.Desc,
+			nulls: NullOrder.Last,
+		},
+	} as TOrderBy;
+}

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/index.ts

@@ -0,0 +1,6 @@
+/**
+ * feature-react-agentforce-conversation-client – ACC Conversation Client
+ */
+
+export { AgentforceConversationClient } from "./components/AgentforceConversationClient";
+export type { AgentforceConversationClientProps, ResolvedEmbedOptions } from "./types/conversation";

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/lib/constants.ts

@@ -0,0 +1,60 @@
+/**
+ * Application-wide constants.
+ */
+
+import type { PaginationConfig } from "../features/object-search/hooks/useObjectSearchParams";
+
+export const PAGE_SIZE_LIST = 12;
+export const DASHBOARD_MAINTENANCE_LIMIT = 5;
+
+export const PROPERTY_FILTER_EXCLUDED_FIELD_PATHS = new Set([
+	"CreatedDate",
+	"Hero_Image__c",
+	"Year_Built__c",
+	"Available_Date__c",
+]);
+
+export const MAINTENANCE_WORKER_FILTER_EXCLUDED_FIELD_PATHS = new Set<string>([]);
+export const MAINTENANCE_FILTER_EXCLUDED_FIELD_PATHS = new Set(["Scheduled__c"]);
+export const APPLICATION_FILTER_EXCLUDED_FIELD_PATHS = new Set<string>([]);
+
+export const MAINTENANCE_WORKER_OBJECT_API_NAME = "Maintenance_Worker__c" as const;
+
+export const FALLBACK_LABEL_PROPERTIES_PLURAL = "Properties";
+export const FALLBACK_LABEL_MAINTENANCE_PLURAL = "Maintenance Requests";
+export const FALLBACK_LABEL_MAINTENANCE_WORKERS_PLURAL = "Maintenance Workers";
+export const FALLBACK_LABEL_APPLICATIONS_PLURAL = "Applications";
+
+export const PROPERTY_OBJECT_API_NAME = "Property__c" as const;
+export const MAINTENANCE_OBJECT_API_NAME = "Maintenance_Request__c" as const;
+export const APPLICATION_OBJECT_API_NAME = "Application__c" as const;
+
+export const SEARCHABLE_OBJECTS = [
+	{
+		objectApiName: "Property__c" as const,
+		path: "/properties",
+		fallbackLabelPlural: FALLBACK_LABEL_PROPERTIES_PLURAL,
+	},
+	{
+		objectApiName: "Maintenance_Request__c" as const,
+		path: "/maintenance/requests",
+		fallbackLabelPlural: FALLBACK_LABEL_MAINTENANCE_PLURAL,
+	},
+	{
+		objectApiName: MAINTENANCE_WORKER_OBJECT_API_NAME,
+		path: "/maintenance/workers",
+		fallbackLabelPlural: FALLBACK_LABEL_MAINTENANCE_WORKERS_PLURAL,
+	},
+	{
+		objectApiName: "Application__c" as const,
+		path: "/applications",
+		fallbackLabelPlural: FALLBACK_LABEL_APPLICATIONS_PLURAL,
+	},
+] as const;
+
+export type SearchableObjectConfig = (typeof SEARCHABLE_OBJECTS)[number];
+
+export const PAGINATION_CONFIG: PaginationConfig = {
+	defaultPageSize: 6,
+	validPageSizes: [6, 12, 24, 48],
+};

package/dist/force-app/main/default/uiBundles/propertymanagementapp/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/uiBundles/propertymanagementapp/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

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

@@ -0,0 +1,80 @@
+import { Link, useLocation } from 'react-router';
+import { getAllRoutes } from './router-utils';
+import { useState } from 'react';
+
+export default function NavigationMenu() {
+  const [isOpen, setIsOpen] = useState(false);
+  const location = useLocation();
+
+  const isActive = (path: string) => location.pathname === path;
+
+  const toggleMenu = () => setIsOpen(!isOpen);
+
+  const navigationRoutes: { path: string; label: string }[] = getAllRoutes()
+    .filter(
+      route =>
+        route.handle?.showInNavigation === true &&
+        route.fullPath !== undefined &&
+        route.handle?.label !== undefined
+    )
+    .map(
+      route =>
+        ({
+          path: route.fullPath,
+          label: route.handle?.label,
+        }) as { path: string; label: string }
+    );
+
+  return (
+    <nav className="bg-white border-b border-gray-200">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+          <Link to="/" className="text-xl font-semibold text-gray-900">
+            React App
+          </Link>
+          <button
+            onClick={toggleMenu}
+            className="p-2 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            aria-label="Toggle menu"
+          >
+            <div className="w-6 h-6 flex flex-col justify-center space-y-1.5">
+              <span
+                className={`block h-0.5 w-6 bg-current transition-all ${
+                  isOpen ? 'rotate-45 translate-y-2' : ''
+                }`}
+              />
+              <span
+                className={`block h-0.5 w-6 bg-current transition-all ${isOpen ? 'opacity-0' : ''}`}
+              />
+              <span
+                className={`block h-0.5 w-6 bg-current transition-all ${
+                  isOpen ? '-rotate-45 -translate-y-2' : ''
+                }`}
+              />
+            </div>
+          </button>
+        </div>
+        {isOpen && (
+          <div className="pb-4">
+            <div className="flex flex-col space-y-2">
+              {navigationRoutes.map(item => (
+                <Link
+                  key={item.path}
+                  to={item.path}
+                  onClick={() => setIsOpen(false)}
+                  className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                    isActive(item.path)
+                      ? 'bg-blue-100 text-blue-700'
+                      : 'text-gray-700 hover:bg-gray-100'
+                  }`}
+                >
+                  {item.label}
+                </Link>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </nav>
+  );
+}

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

@@ -0,0 +1,373 @@
+import { useMemo, useState } from "react";
+import { useNavigate } from "react-router";
+import { toast } from "../components/ui/sonner";
+import {
+	searchApplications,
+	fetchDistinctApplicationStatus,
+} from "../api/applications/applicationSearchService";
+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 { ApplicationSearchNode } from "../api/applications/applicationSearchService";
+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 { DateFilter } from "../features/object-search/components/filters/DateFilter";
+import { ObjectSearchErrorState } from "../components/shared/ObjectSearchErrorState";
+import PaginationControls from "../features/object-search/components/PaginationControls";
+import { ApplicationDetailsModal } from "../components/applications/ApplicationDetailsModal";
+import { Skeleton } from "../components/ui/skeleton";
+import {
+	Table,
+	TableHeader,
+	TableBody,
+	TableRow,
+	TableHead,
+	TableCell,
+} from "../components/ui/table";
+import { updateApplicationStatus } from "../api/applications/applications";
+import type {
+	Application__C_Filter,
+	Application__C_OrderBy,
+} from "../api/graphql-operations-types";
+import { ResultOrder } from "../api/graphql-operations-types";
+import { Badge } from "../components/ui/badge";
+import { PAGINATION_CONFIG } from "../lib/constants";
+import { cn } from "../lib/utils";
+
+const FILTER_CONFIGS: FilterFieldConfig[] = [
+	{
+		field: "search",
+		label: "Search",
+		type: "search",
+		searchFields: ["Name"],
+		placeholder: "Search by name...",
+	},
+	{ field: "Status__c", label: "Status", type: "picklist" },
+	{ field: "Start_Date__c", label: "Start Date", type: "date" },
+	{ field: "CreatedDate", label: "Created Date", type: "datetime" },
+];
+
+const SORT_CONFIGS: SortFieldConfig<string>[] = [
+	{ field: "Name", label: "Application" },
+	{ field: "Status__c", label: "Status" },
+	{ field: "Start_Date__c", label: "Start Date" },
+	{ field: "CreatedDate", label: "Created Date" },
+];
+
+export default function ApplicationSearch() {
+	const [selectedApplication, setSelectedApplication] = useState<ApplicationSearchNode | null>(
+		null,
+	);
+
+	const { data: statusOptions } = useCachedAsyncData(fetchDistinctApplicationStatus, [], {
+		key: "distinctApplicationStatus",
+		ttl: 30_000,
+	});
+
+	const { filters, query, pagination, resetAll } = useObjectSearchParams<
+		Application__C_Filter,
+		Application__C_OrderBy
+	>(FILTER_CONFIGS, SORT_CONFIGS, PAGINATION_CONFIG);
+	const effectiveOrderBy = useMemo<Application__C_OrderBy>(
+		() => query.orderBy ?? { CreatedDate: { order: ResultOrder.Desc } },
+		[query.orderBy],
+	);
+	const searchKey = `applications:${JSON.stringify({ where: query.where, orderBy: effectiveOrderBy, first: pagination.pageSize, after: pagination.afterCursor })}`;
+	const { data, loading, error } = useCachedAsyncData(
+		() =>
+			searchApplications({
+				where: query.where,
+				orderBy: effectiveOrderBy,
+				first: pagination.pageSize,
+				after: pagination.afterCursor,
+			}),
+		[query.where, effectiveOrderBy, pagination.pageSize, pagination.afterCursor],
+		{ key: searchKey },
+	);
+
+	const validApplicationNodes = useMemo(
+		() =>
+			(data?.edges ?? []).reduce<ApplicationSearchNode[]>((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;
+
+	const handleSaveStatus = async (applicationId: string, status: string) => {
+		try {
+			const success = await updateApplicationStatus(applicationId, status);
+			if (success) {
+				if (selectedApplication?.Id === applicationId) {
+					setSelectedApplication({ ...selectedApplication, Status__c: { value: status } });
+				}
+				toast.success("Status updated", {
+					description: "Application status has been updated successfully.",
+				});
+			} else {
+				toast.error("Update failed", {
+					description: "Failed to update application status. Please try again.",
+				});
+			}
+		} catch (err) {
+			console.error(err);
+			toast.error("Error updating status", {
+				description: "An error occurred while updating the status. Please try again.",
+			});
+		}
+	};
+
+	return (
+		<>
+			<PageContainer>
+				<PageHeader title="Applications" description="Manage and review rental applications" />
+				<ApplicationSearchFilters
+					filters={filters}
+					statusOptions={statusOptions ?? []}
+					resetAll={resetAll}
+				/>
+				<div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
+					<Table>
+						<ApplicationSearchTableHeader />
+						<TableBody>
+							{loading && <ApplicationSearchSkeleton pageSize={pagination.pageSize} />}
+
+							{!loading && error && <ApplicationSearchErrorState />}
+
+							{!loading && !error && validApplicationNodes.length === 0 && (
+								<ApplicationSearchNoResults />
+							)}
+
+							{!loading && !error && validApplicationNodes.length > 0 && (
+								<ApplicationSearchTable
+									applicationNodes={validApplicationNodes}
+									setSelectedApplication={setSelectedApplication}
+								/>
+							)}
+						</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 && selectedApplication && (
+				<ApplicationDetailsModal
+					application={selectedApplication}
+					isOpen={!!selectedApplication}
+					onClose={() => setSelectedApplication(null)}
+					onSave={handleSaveStatus}
+				/>
+			)}
+		</>
+	);
+}
+
+function ApplicationSearchFilters({
+	filters,
+	statusOptions,
+	resetAll,
+}: {
+	filters: UseObjectSearchParamsReturn<Application__C_Filter, Application__C_OrderBy>["filters"];
+	statusOptions: Array<{ value: string; label: string }>;
+	resetAll: () => void;
+}) {
+	return (
+		<FilterProvider
+			filters={filters.active}
+			onFilterChange={filters.set}
+			onFilterRemove={filters.remove}
+			onReset={resetAll}
+		>
+			<FilterRow ariaLabel="Applications filters">
+				<SearchFilter
+					field="search"
+					label="Search"
+					placeholder="Search by name..."
+					className="w-full sm:w-50"
+				/>
+				<MultiSelectFilter
+					field="Status__c"
+					label="Status"
+					options={statusOptions ?? []}
+					className="w-full sm:w-36"
+				/>
+				<DateFilter field="Start_Date__c" label="Start Date" className="w-full sm:w-56" />
+				<DateFilter
+					field="CreatedDate"
+					label="Created Date"
+					filterType="datetime"
+					className="w-full sm:w-56"
+				/>
+				<FilterResetButton />
+			</FilterRow>
+		</FilterProvider>
+	);
+}
+
+function ApplicationSearchTableHeader() {
+	return (
+		<TableHeader>
+			<TableRow>
+				<TableHead className="w-5/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
+					User
+				</TableHead>
+				<TableHead className="w-4/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
+					Start Date
+				</TableHead>
+				<TableHead className="w-3/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
+					Status
+				</TableHead>
+			</TableRow>
+		</TableHeader>
+	);
+}
+
+function ApplicationSearchNoResults() {
+	return (
+		<TableRow>
+			<TableCell colSpan={3} className="text-center py-12 text-gray-500">
+				No applications found
+			</TableCell>
+		</TableRow>
+	);
+}
+
+function ApplicationSearchTable({
+	applicationNodes,
+	setSelectedApplication,
+}: {
+	applicationNodes: ApplicationSearchNode[];
+	setSelectedApplication: (application: ApplicationSearchNode) => void;
+}) {
+	return (
+		<>
+			{applicationNodes.map((application) => {
+				const applicantName = application.User__r?.Name?.value || "Unknown";
+				const propertyName = application.Property__r?.Name?.value;
+				const propertyAddress = application.Property__r?.Address__c?.value || "";
+				const startDate = application.Start_Date__c?.value || application.CreatedDate?.value || "";
+				const status = application.Status__c?.value || "Unknown";
+				return (
+					<TableRow
+						key={application.Id}
+						onClick={() => setSelectedApplication(application)}
+						className="hover:bg-gray-50 transition-colors cursor-pointer"
+					>
+						<TableCell className="px-6 py-4">
+							<div className="flex items-center">
+								<div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0">
+									<span className="text-sm font-medium text-purple-700">
+										{applicantName.charAt(0) || "?"}
+									</span>
+								</div>
+								<div className="ml-4">
+									<div className="text-sm font-medium text-gray-900">{applicantName}</div>
+									<div className="text-sm text-gray-500">{propertyName || propertyAddress}</div>
+								</div>
+							</div>
+						</TableCell>
+						<TableCell className="px-6 py-4">
+							<div className="text-sm text-gray-900">{formatDate(startDate)}</div>
+						</TableCell>
+						<TableCell className="px-6 py-4">
+							<Badge className={cn("text-sm", getStatusColor(status))}>{status}</Badge>
+						</TableCell>
+					</TableRow>
+				);
+			})}
+		</>
+	);
+}
+
+const getStatusColor = (status: string) => {
+	const statusLower = status.toLowerCase();
+	if (statusLower.includes("approved")) return "bg-green-100 text-green-700";
+	if (statusLower.includes("rejected")) return "bg-red-100 text-red-700";
+	if (statusLower.includes("background")) return "bg-blue-100 text-blue-700";
+	if (statusLower.includes("review")) return "bg-yellow-100 text-yellow-700";
+	return "bg-gray-100 text-gray-700";
+};
+
+const formatDate = (dateString: string) => {
+	if (!dateString) return "N/A";
+	try {
+		const date = new Date(dateString);
+		return date.toLocaleDateString("en-US", {
+			year: "numeric",
+			month: "short",
+			day: "numeric",
+		});
+	} catch {
+		return dateString;
+	}
+};
+
+function ApplicationSearchSkeleton({ pageSize }: { pageSize: number }) {
+	return (
+		<>
+			{Array.from({ length: pageSize }, (_, i) => (
+				<TableRow key={i}>
+					<TableCell className="px-6 py-4">
+						<div className="flex items-center">
+							<Skeleton className="h-10 w-10 rounded-full shrink-0" />
+							<div className="ml-4 space-y-2">
+								<Skeleton className="h-4 w-32" />
+								<Skeleton className="h-3 w-48" />
+							</div>
+						</div>
+					</TableCell>
+					<TableCell className="px-6 py-4">
+						<Skeleton className="h-4 w-24" />
+					</TableCell>
+					<TableCell className="px-6 py-4">
+						<Skeleton className="h-6 w-20 rounded-full" />
+					</TableCell>
+				</TableRow>
+			))}
+		</>
+	);
+}
+
+function ApplicationSearchErrorState() {
+	const navigate = useNavigate();
+
+	return (
+		<TableRow>
+			<TableCell colSpan={3} className="p-0">
+				<ObjectSearchErrorState
+					message="There was an error loading the applications. Please try again."
+					onGoHome={() => navigate("/")}
+					onRetry={() => navigate(0)}
+				/>
+			</TableCell>
+		</TableRow>
+	);
+}