@salesforce/webapp-template-app-react-sample-b2x-experimental 1.112.7 → 1.112.9

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/features/object-search/utils/filterUtils.ts

@@ -0,0 +1,372 @@
+/**
+ * filterUtils.ts
+ *
+ * Centralizes all filter-related transformations for the object search feature.
+ * This module handles two distinct concerns:
+ *
+ * 1. **URL serialization** — Converting filter/sort state to and from
+ *    URLSearchParams so that search criteria can be bookmarked, shared, and
+ *    restored on page load.
+ *
+ * 2. **GraphQL query building** — Converting the same filter state into the
+ *    `where` clause shape expected by the GraphQL API.
+ *
+ * Both concerns operate on the shared {@link ActiveFilterValue} type, which
+ * represents a single active filter with a field name, filter type, and one or
+ * more values (value, min, max).
+ */
+
+import type { SortState } from "./sortUtils";
+
+export type FilterFieldType =
+	| "text"
+	| "picklist"
+	| "numeric"
+	| "boolean"
+	| "date"
+	| "daterange"
+	| "multipicklist"
+	| "search";
+
+export type FilterFieldConfig<TFieldName extends string = string> = {
+	field: TFieldName;
+	label: string;
+	type: FilterFieldType;
+	placeholder?: string;
+	/** Required for picklist type. */
+	options?: Array<{ value: string; label: string }>;
+	helpText?: string;
+	/** Required for search type — the fields to match against with `or`. */
+	searchFields?: string[];
+};
+
+export type ActiveFilterValue<TFieldName extends string = string> = {
+	field: TFieldName;
+	label: string;
+	type: FilterFieldType;
+	value?: string;
+	min?: string;
+	max?: string;
+};
+
+// ---------------------------------------------------------------------------
+// URL Serialization
+// ---------------------------------------------------------------------------
+
+/**
+ * Prefix applied to all filter-related URL search params.
+ * This namespaces filter params so they don't collide with other query params
+ * (e.g. pagination, feature flags).
+ *
+ * @example "f.Industry=Technology" or "f.AnnualRevenue.min=1000000"
+ */
+const FILTER_PREFIX = "f.";
+
+/** URL param key for the multi-field search term. */
+const SEARCH_KEY = "q";
+
+/** URL param key for the currently sorted field name. */
+const SORT_KEY = "sort";
+
+/** URL param key for the sort direction (ASC or DESC). */
+const DIR_KEY = "dir";
+
+/** URL param key for the page size preference. */
+const PAGE_SIZE_KEY = "ps";
+const PAGE_KEY = "page";
+
+/**
+ * Serializes filter and sort state into URLSearchParams.
+ *
+ * Encoding scheme:
+ *   - Simple values (text, picklist, boolean, multipicklist):
+ *       `f.<field>=<value>`
+ *   - Range values (numeric, date, daterange):
+ *       `f.<field>.min=<min>` and/or `f.<field>.max=<max>`
+ *   - Sort: `sort=<field>&dir=ASC|DESC`
+ *
+ * @param filters - The currently active filters to serialize.
+ * @param sort    - The current sort state, or null if no sort is applied.
+ * @returns A URLSearchParams instance representing the full search state.
+ *
+ * @example
+ * ```ts
+ * const params = filtersToSearchParams(
+ *   [{ field: "Industry", type: "picklist", value: "Technology" }],
+ *   { field: "Name", direction: "ASC" },
+ * );
+ * // params.toString() => "f.Industry=Technology&sort=Name&dir=ASC"
+ * ```
+ */
+export function filtersToSearchParams(
+	filters: ActiveFilterValue[],
+	sort: SortState | null,
+	pageSize?: number,
+	pageIndex?: number,
+): URLSearchParams {
+	const params = new URLSearchParams();
+
+	for (const filter of filters) {
+		if (filter.type === "search") {
+			if (filter.value) params.set(SEARCH_KEY, filter.value);
+			continue;
+		}
+		if (filter.value !== undefined && filter.value !== "") {
+			params.set(`${FILTER_PREFIX}${filter.field}`, filter.value);
+		}
+		if (filter.min !== undefined && filter.min !== "") {
+			params.set(`${FILTER_PREFIX}${filter.field}.min`, filter.min);
+		}
+		if (filter.max !== undefined && filter.max !== "") {
+			params.set(`${FILTER_PREFIX}${filter.field}.max`, filter.max);
+		}
+	}
+
+	if (sort) {
+		params.set(SORT_KEY, sort.field);
+		params.set(DIR_KEY, sort.direction);
+	}
+
+	if (pageSize !== undefined) {
+		params.set(PAGE_SIZE_KEY, String(pageSize));
+	}
+
+	if (pageIndex !== undefined && pageIndex > 0) {
+		params.set(PAGE_KEY, String(pageIndex + 1));
+	}
+
+	return params;
+}
+
+/**
+ * Deserializes URLSearchParams back into filter and sort state.
+ *
+ * Requires the full list of filter configs so it knows which URL params to look
+ * for and what type each filter is. Params that don't match a known config are
+ * silently ignored, making this safe against stale or hand-edited URLs.
+ *
+ * @param params  - The URLSearchParams to parse (typically from the browser URL).
+ * @param configs - The filter field configurations defining available filters.
+ * @returns An object containing the deserialized `filters` array and `sort` state.
+ *
+ * @example
+ * ```ts
+ * const url = new URLSearchParams("f.Industry=Technology&sort=Name&dir=ASC");
+ * const { filters, sort } = searchParamsToFilters(url, filterConfigs);
+ * // filters => [{ field: "Industry", type: "picklist", value: "Technology" }]
+ * // sort    => { field: "Name", direction: "ASC" }
+ * ```
+ */
+export function searchParamsToFilters(
+	params: URLSearchParams,
+	configs: FilterFieldConfig[],
+): {
+	filters: ActiveFilterValue[];
+	sort: SortState | null;
+	pageSize: number | undefined;
+	pageIndex: number;
+} {
+	const filters: ActiveFilterValue[] = [];
+
+	for (const config of configs) {
+		const { field, label, type } = config;
+
+		if (type === "search") {
+			const q = params.get(SEARCH_KEY);
+			if (q) {
+				filters.push({ field, label, type: "search", value: q });
+			}
+			continue;
+		}
+
+		const value = params.get(`${FILTER_PREFIX}${field}`) ?? undefined;
+		const min = params.get(`${FILTER_PREFIX}${field}.min`) ?? undefined;
+		const max = params.get(`${FILTER_PREFIX}${field}.max`) ?? undefined;
+
+		const hasValue = value !== undefined && value !== "";
+		const hasRange = (min !== undefined && min !== "") || (max !== undefined && max !== "");
+
+		if (hasValue || hasRange) {
+			filters.push({ field, label, type, value, min, max });
+		}
+	}
+
+	let sort: SortState | null = null;
+	const sortField = params.get(SORT_KEY);
+	const sortDir = params.get(DIR_KEY);
+	if (sortField) {
+		sort = {
+			field: sortField,
+			direction: sortDir === "DESC" ? "DESC" : "ASC",
+		};
+	}
+
+	const pageSizeRaw = params.get(PAGE_SIZE_KEY);
+	const pageSize = pageSizeRaw ? parseInt(pageSizeRaw, 10) : undefined;
+
+	const pageRaw = params.get(PAGE_KEY);
+	const page = pageRaw ? parseInt(pageRaw, 10) : 1;
+	const pageIndex = !isNaN(page) && page > 1 ? page - 1 : 0;
+
+	return {
+		filters,
+		sort,
+		pageSize: pageSize && !isNaN(pageSize) ? pageSize : undefined,
+		pageIndex,
+	};
+}
+
+// ---------------------------------------------------------------------------
+// GraphQL Filter Building
+// ---------------------------------------------------------------------------
+
+/**
+ * Converts an array of active filter values into a GraphQL `where` clause.
+ *
+ * Each filter is individually converted to a clause via {@link buildSingleFilter},
+ * then multiple clauses are combined with a top-level `and` operator. This ensures
+ * all active filters are applied simultaneously (intersection semantics).
+ *
+ * @typeParam TFilter - The GraphQL filter input type (e.g. `AccountFilterInput`).
+ * @param filters - The active filters to convert.
+ * @returns A filter object for the GraphQL `where` variable, or `undefined` if
+ *          no filters are active (which tells the API to return unfiltered results).
+ *
+ * @example
+ * ```ts
+ * const where = buildFilter<AccountFilterInput>([
+ *   { field: "Industry", type: "picklist", value: "Technology" },
+ *   { field: "AnnualRevenue", type: "numeric", min: "1000000" },
+ * ]);
+ * // where => { and: [
+ * //   { Industry: { eq: "Technology" } },
+ * //   { AnnualRevenue: { gte: 1000000 } },
+ * // ]}
+ * ```
+ */
+export function buildFilter<TFilter>(
+	filters: ActiveFilterValue[],
+	configs: FilterFieldConfig[],
+): TFilter | undefined {
+	const configMap = new Map(configs.map((c) => [c.field, c]));
+	const clauses: TFilter[] = [];
+
+	for (const filter of filters) {
+		const clause = buildSingleFilter<TFilter>(filter, configMap.get(filter.field));
+		if (clause) clauses.push(clause);
+	}
+
+	if (clauses.length === 0) return undefined;
+	if (clauses.length === 1) return clauses[0];
+	return { and: clauses } as TFilter;
+}
+
+/**
+ * Converts a YYYY-MM-DD date string to a full ISO-8601 datetime at midnight UTC.
+ * Used as the inclusive lower bound for date range queries.
+ */
+function toStartOfDay(dateStr: string): string {
+	return `${dateStr}T00:00:00.000Z`;
+}
+
+/**
+ * Converts a YYYY-MM-DD date string to a full ISO-8601 datetime at the last
+ * millisecond of the day in UTC. Used as the inclusive upper bound for date
+ * range queries.
+ */
+function toEndOfDay(dateStr: string): string {
+	return `${dateStr}T23:59:59.999Z`;
+}
+
+/**
+ * Converts a single active filter value into a GraphQL filter clause.
+ *
+ * Supported filter types and their GraphQL mappings:
+ *
+ * | Type            | GraphQL operator(s) | Example output                                           |
+ * |-----------------|---------------------|----------------------------------------------------------|
+ * | `text`          | `like`              | `{ Name: { like: "%Acme%" } }`                           |
+ * | `picklist`      | `eq`                | `{ Industry: { eq: "Technology" } }`                      |
+ * | `multipicklist` | `eq` or `in`        | `{ Type: { in: ["A", "B"] } }`                            |
+ * | `numeric`       | `gte` / `lte`       | `{ Revenue: { gte: 1000, lte: 5000 } }`                   |
+ * | `boolean`       | `eq`                | `{ IsActive: { eq: true } }`                              |
+ * | `date`          | dynamic operator    | `{ CreatedDate: { gte: { value: "..." } } }`              |
+ * | `daterange`     | `gte` + `lte`       | Combined with `and` if both bounds set                    |
+ * | `search`        | `like` + `or`       | `{ or: [{ Name: { like: "%x%" } }, { Phone: { like: "%x%" } }] }` |
+ *
+ * The `search` type uses `config.searchFields` to build an `or` clause that
+ * matches the search term across multiple fields simultaneously (union semantics).
+ *
+ * @param filter - The active filter value to convert.
+ * @param config - The corresponding field config. Required for `search` type
+ *                 (provides `searchFields`); optional for all other types.
+ * @returns A single filter clause, or `null` if the filter has no meaningful value.
+ */
+function buildSingleFilter<TFilter>(
+	filter: ActiveFilterValue,
+	config?: FilterFieldConfig,
+): TFilter | null {
+	const { field, type, value, min, max } = filter;
+
+	switch (type) {
+		case "text": {
+			if (!value) return null;
+			return { [field]: { like: `%${value}%` } } as TFilter;
+		}
+		case "picklist": {
+			if (!value) return null;
+			return { [field]: { eq: value } } as TFilter;
+		}
+		case "numeric": {
+			if (!min && !max) return null;
+			const ops: Record<string, number> = {};
+			if (min) ops.gte = Number(min);
+			if (max) ops.lte = Number(max);
+			return { [field]: ops } as TFilter;
+		}
+		case "boolean": {
+			if (value === undefined || value === "") return null;
+			return { [field]: { eq: value === "true" } } as TFilter;
+		}
+		case "multipicklist": {
+			if (!value) return null;
+			const values = value.split(",");
+			if (values.length === 1) {
+				return { [field]: { eq: values[0] } } as TFilter;
+			}
+			return { [field]: { in: values } } as TFilter;
+		}
+		case "date": {
+			if (!min && !max) return null;
+			const op = value ?? (min ? "gte" : "lte");
+			const dateStr = min ?? max;
+			const isoStr = op === "gte" || op === "gt" ? toStartOfDay(dateStr!) : toEndOfDay(dateStr!);
+			return { [field]: { [op]: { value: isoStr } } } as TFilter;
+		}
+		case "daterange": {
+			if (!min && !max) return null;
+			const clauses: TFilter[] = [];
+			if (min) {
+				clauses.push({
+					[field]: { gte: { value: toStartOfDay(min) } },
+				} as TFilter);
+			}
+			if (max) {
+				clauses.push({
+					[field]: { lte: { value: toEndOfDay(max) } },
+				} as TFilter);
+			}
+			return clauses.length === 1 ? clauses[0] : ({ and: clauses } as TFilter);
+		}
+		case "search": {
+			if (!value) return null;
+			const searchFields = config?.searchFields ?? [];
+			if (searchFields.length === 0) return null;
+			const clauses = searchFields.map((f) => ({ [f]: { like: `%${value}%` } }) as TFilter);
+			if (clauses.length === 1) return clauses[0];
+			return { or: clauses } as TFilter;
+		}
+		default:
+			return null;
+	}
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/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/webapplications/appreactsampleb2x/src/hooks/useMaintenanceRequests.ts

@@ -5,7 +5,7 @@ import { useState, useEffect, useCallback } from "react";
 import {
 	queryMaintenanceRequests,
 	type MaintenanceRequestSummary,
-} from "@/api/maintenanceRequestApi";
+} from "@/api/maintenanceRequests/maintenanceRequestApi";
 
 export function useMaintenanceRequests(): {
 	requests: MaintenanceRequestSummary[];

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/hooks/usePropertyAddresses.ts

@@ -3,9 +3,9 @@
  * Returns propertyId -> address for display on listing cards.
  */
 import { useState, useEffect } from "react";
-import { fetchPropertyAddresses } from "@/api/propertyDetailGraphQL";
+import { fetchPropertyAddresses } from "@/api/properties/propertyDetailGraphQL";
 import { getPropertyIdFromRecord } from "@/hooks/usePropertyPrimaryImages";
-import type { SearchResultRecord } from "@/features/global-search/types/search/searchResults.js";
+import type { SearchResultRecord } from "@/types/searchResults.js";
 
 export function usePropertyAddresses(
 	results: SearchResultRecord[],

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/hooks/usePropertyDetail.ts

@@ -13,7 +13,7 @@ import {
 	type PropertyImageRecord,
 	type PropertyCostRecord,
 	type PropertyFeatureRecord,
-} from "@/api/propertyDetailGraphQL";
+} from "@/api/properties/propertyDetailGraphQL";
 
 export interface PropertyDetailState {
 	listing: ListingDetail | null;

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/hooks/usePropertyListingAmenities.ts

@@ -3,9 +3,9 @@
  * Returns a map of propertyId -> "Amenity 1 | Amenity 2 | ..." for use in listing cards.
  */
 import { useState, useEffect } from "react";
-import { fetchFeaturesByPropertyId } from "@/api/propertyDetailGraphQL";
+import { fetchFeaturesByPropertyId } from "@/api/properties/propertyDetailGraphQL";
 import { getPropertyIdFromRecord } from "@/hooks/usePropertyPrimaryImages";
-import type { SearchResultRecord } from "@/features/global-search/types/search/searchResults.js";
+import type { SearchResultRecord } from "@/types/searchResults.js";
 
 const AMENITIES_SEPARATOR = " | ";
 

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/hooks/usePropertyListingSearch.ts

@@ -5,8 +5,8 @@ import { useState, useEffect, useRef, useCallback } from "react";
 import {
 	queryPropertyListingsGraphQL,
 	type PropertyListingFilters,
-} from "@/api/propertyListingGraphQL";
-import type { SearchResultRecord } from "@/features/global-search/types/search/searchResults.js";
+} from "@/api/properties/propertyListingGraphQL";
+import type { SearchResultRecord } from "@/types/searchResults.js";
 
 export function usePropertyListingSearch(
 	searchQuery: string,

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/hooks/usePropertyMapMarkers.ts

@@ -3,11 +3,11 @@
  * and returns map markers (one pin per property in the current window).
  */
 import { useState, useEffect } from "react";
-import { fetchPropertyAddresses } from "@/api/propertyDetailGraphQL";
+import { fetchPropertyAddresses } from "@/api/properties/propertyDetailGraphQL";
 import { geocodeAddress, getStateZipFromAddress } from "@/utils/geocode";
 import { getPropertyIdFromRecord } from "@/hooks/usePropertyPrimaryImages";
-import type { SearchResultRecord } from "@/features/global-search/types/search/searchResults.js";
-import type { MapMarker } from "@/components/PropertyMap";
+import type { SearchResultRecord } from "@/types/searchResults.js";
+import type { MapMarker } from "@/components/properties/PropertyMap";
 
 function getListingName(record: {
 	fields?: Record<string, { value?: unknown; displayValue?: string | null }>;

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/hooks/usePropertyPrimaryImages.ts

@@ -3,8 +3,8 @@
  * Returns a map of propertyId -> imageUrl for use in listing cards.
  */
 import { useState, useEffect } from "react";
-import { fetchPrimaryImagesByPropertyIds } from "@/api/propertyDetailGraphQL";
-import type { SearchResultRecord } from "@/features/global-search/types/search/searchResults.js";
+import { fetchPrimaryImagesByPropertyIds } from "@/api/properties/propertyDetailGraphQL";
+import type { SearchResultRecord } from "@/types/searchResults.js";
 
 export function getPropertyIdFromRecord(record: {
 	fields?: Record<string, { value?: unknown }>;

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

@@ -10,9 +10,9 @@ import {
 	fetchListingById,
 	fetchPropertyById,
 	fetchPrimaryImagesByPropertyIds,
-} from "@/api/propertyDetailGraphQL";
-import { createApplicationRecord } from "@/api/applicationApi";
-import { useAuth } from "../features/authentication/context/AuthContext";
+} from "@/api/properties/propertyDetailGraphQL";
+import { createApplicationRecord } from "@/api/applications/applicationApi";
+import { useAuth } from "@/features/authentication/context/AuthContext";
 import { fetchUserContact } from "../features/authentication/api/userProfileApi";
 
 function ApplicationSkeleton() {

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

@@ -1,7 +1,7 @@
 import { Card, CardContent } from "@/components/ui/card";
 import { Link } from "react-router";
-import MaintenanceRequestList from "@/components/MaintenanceRequestList";
-import { WeatherWidget } from "@/components/WeatherWidget";
+import MaintenanceRequestList from "@/components/maintenanceRequests/MaintenanceRequestList";
+import { WeatherWidget } from "@/components/dashboard/WeatherWidget";
 import { useMaintenanceRequests } from "@/hooks/useMaintenanceRequests";
 
 export default function Dashboard() {

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

@@ -10,8 +10,10 @@ import {
 } from "@/hooks/usePropertyPrimaryImages";
 import { usePropertyAddresses } from "@/hooks/usePropertyAddresses";
 import { usePropertyListingAmenities } from "@/hooks/usePropertyListingAmenities";
-import PropertyListingCard, { PropertyListingCardSkeleton } from "@/components/PropertyListingCard";
-import type { SearchResultRecord } from "@/features/global-search/types/search/searchResults.js";
+import PropertyListingCard, {
+	PropertyListingCardSkeleton,
+} from "@/components/properties/PropertyListingCard";
+import type { SearchResultRecord } from "@/types/searchResults.js";
 import { createNewsletterLead } from "@/api/leadApi";
 import {
 	Phone,

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

@@ -5,10 +5,10 @@ import { Label } from "@/components/ui/label";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Calendar, ArrowRight } from "lucide-react";
-import MaintenanceRequestList from "@/components/MaintenanceRequestList";
+import MaintenanceRequestList from "@/components/maintenanceRequests/MaintenanceRequestList";
 import { SkeletonListRows, SkeletonField } from "@/components/SkeletonPrimitives";
 import { useMaintenanceRequests } from "@/hooks/useMaintenanceRequests";
-import { createMaintenanceRequest } from "@/api/maintenanceRequestApi";
+import { createMaintenanceRequest } from "@/api/maintenanceRequests/maintenanceRequestApi";
 import { useAuth } from "@/features/authentication/context/AuthContext";
 
 const TYPE_OPTIONS = [

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

@@ -2,7 +2,7 @@ import { useParams, Link } from "react-router";
 import { Button } from "@/components/ui/button";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
-import PropertyMap from "@/components/PropertyMap";
+import PropertyMap from "@/components/properties/PropertyMap";
 import { usePropertyDetail } from "@/hooks/usePropertyDetail";
 import { useGeocode } from "@/hooks/useGeocode";
 

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

@@ -4,7 +4,7 @@
  */
 import { useState, useCallback, useMemo, useEffect } from "react";
 import { useSearchParams } from "react-router";
-import { DEFAULT_PAGE_SIZE } from "@/features/global-search/constants";
+import { DEFAULT_PAGE_SIZE } from "@/constants/propertyListing";
 import { usePropertyListingSearch } from "@/hooks/usePropertyListingSearch";
 import {
 	usePropertyPrimaryImages,
@@ -13,17 +13,19 @@ import {
 import { usePropertyAddresses } from "@/hooks/usePropertyAddresses";
 import { usePropertyListingAmenities } from "@/hooks/usePropertyListingAmenities";
 import { usePropertyMapMarkers } from "@/hooks/usePropertyMapMarkers";
-import SearchPagination from "@/features/global-search/components/search/SearchPagination";
-import PropertyListingCard, { PropertyListingCardSkeleton } from "@/components/PropertyListingCard";
+import PropertyListingSearchPagination from "@/components/properties/PropertyListingSearchPagination";
+import PropertyListingCard, {
+	PropertyListingCardSkeleton,
+} from "@/components/properties/PropertyListingCard";
 import PropertySearchFilters, {
 	type BedroomFilter,
 	type SortBy,
-} from "@/components/PropertySearchFilters";
-import PropertyMap from "@/components/PropertyMap";
-import type { MapMarker, MapBounds } from "@/components/PropertyMap";
+} from "@/components/properties/PropertySearchFilters";
+import PropertyMap from "@/components/properties/PropertyMap";
+import type { MapMarker, MapBounds } from "@/components/properties/PropertyMap";
 import PropertySearchPlaceholder from "@/pages/PropertySearchPlaceholder";
 import { Skeleton } from "@/components/ui/skeleton";
-import type { SearchResultRecord } from "@/features/global-search/types/search/searchResults.js";
+import type { SearchResultRecord } from "@/types/searchResults.js";
 
 /** Fallback map center when there are no geocoded markers yet. Zoom 7 ≈ 100-mile radius view. */
 const MAP_CENTER_FALLBACK: [number, number] = [37.7897484, -122.3998086];
@@ -267,7 +269,7 @@ export default function PropertySearch() {
 							{searchQuery.trim() ? ` matching "${searchQuery.trim()}"` : ""}
 						</h2>
 						<div className="flex flex-wrap items-center gap-2">
-							<p className="text-sm text-muted-foreground">
+							<div className="text-sm text-muted-foreground">
 								{apiUnavailable ? (
 									"Placeholder (API unavailable)"
 								) : resultsLoading ? (
@@ -277,7 +279,7 @@ export default function PropertySearch() {
 								) : (
 									`${sortedResults.length} result(s)`
 								)}
-							</p>
+							</div>
 							{mapBounds != null && sortedResults.length > 0 && !resultsLoading && (
 								<button
 									type="button"
@@ -345,7 +347,7 @@ export default function PropertySearch() {
 									})}
 								</ul>
 								<div className="mt-4">
-									<SearchPagination
+									<PropertyListingSearchPagination
 										currentPageToken={currentPageToken}
 										nextPageToken={nextPageToken}
 										previousPageToken={previousPageToken}

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

@@ -1,10 +1,8 @@
 import type { RouteObject } from 'react-router';
 import Home from '@/pages/Home';
 import NotFound from '@/pages/NotFound';
-import GlobalSearch from "./features/global-search/pages/GlobalSearch";
-import DetailPage from "./features/global-search/pages/DetailPage";
-import { Suspense } from "react";
-import LoadingFallback from "./features/global-search/components/shared/LoadingFallback";
+import AccountSearch from "./features/object-search/__examples__/pages/AccountSearch";
+import AccountObjectDetail from "./features/object-search/__examples__/pages/AccountObjectDetailPage";
 import Login from "./features/authentication/pages/Login";
 import Register from "./features/authentication/pages/Register";
 import ForgotPassword from "./features/authentication/pages/ForgotPassword";
@@ -37,22 +35,12 @@ export const routes: RouteObject[] = [
         element: <NotFound />
       },
       {
-        path: "global-search/:query",
-        element: (
-					<Suspense fallback={<LoadingFallback />}>
-						<GlobalSearch />
-					</Suspense>
-				),
-        handle: { showInNavigation: false }
+        path: "accounts/:recordId",
+        element: <AccountObjectDetail />
       },
       {
-        path: "object/:objectApiName/:recordId",
-        element: (
-					<Suspense fallback={<LoadingFallback />}>
-						<DetailPage />
-					</Suspense>
-				),
-        handle: { showInNavigation: false }
+        path: "accounts",
+        element: <AccountSearch />
       },
       {
         element: <AuthenticationRoute />,