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

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

@@ -1,46 +1,30 @@
 import { useEffect, useState } from "react";
 import { ChevronDown } from "lucide-react";
-import { getAllMaintenanceRequests, updateMaintenanceStatus } from "../api/maintenance.js";
-import type { MaintenanceRequest } from "../lib/types.js";
+import { useListPage } from "../hooks/useListPage.js";
+import { maintenanceRequestsListConfig } from "../lib/listPageConfig.js";
+import { ListPageWithFilters } from "../components/list/ListPageWithFilters.js";
+import { PageHeader } from "../components/layout/PageHeader.js";
 import { UserAvatar } from "../components/UserAvatar.js";
 import { StatusBadge } from "../components/StatusBadge.js";
 import { MaintenanceDetailsModal } from "../components/MaintenanceDetailsModal.js";
+import { updateMaintenanceStatus } from "../api/maintenance.js";
+import type { MaintenanceRequest } from "../lib/types.js";
 
 export default function Maintenance() {
-	const [requests, setRequests] = useState<MaintenanceRequest[]>([]);
-	const [loading, setLoading] = useState(true);
+	const list = useListPage(maintenanceRequestsListConfig);
 	const [selectedRequest, setSelectedRequest] = useState<MaintenanceRequest | null>(null);
 	const [notification, setNotification] = useState<{
 		message: string;
 		type: "success" | "error";
 	} | null>(null);
 
-	useEffect(() => {
-		loadMaintenanceRequests();
-	}, []);
-
-	// 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 loadMaintenanceRequests = async () => {
-		try {
-			setLoading(true);
-			const data = await getAllMaintenanceRequests();
-			setRequests(data);
-		} catch (error) {
-			console.error("Error loading maintenance requests:", error);
-		} finally {
-			setLoading(false);
-		}
-	};
-
 	const handleRowClick = (request: MaintenanceRequest) => {
 		setSelectedRequest(request);
 	};
@@ -52,66 +36,63 @@ export default function Maintenance() {
 	const handleSaveStatus = async (requestId: string, status: string) => {
 		try {
 			const success = await updateMaintenanceStatus(requestId, status);
-
 			if (success) {
-				// Update the local state
-				setRequests((prev) => prev.map((req) => (req.id === requestId ? { ...req, status } : req)));
-
-				// Update selected request if it's the one being edited
 				if (selectedRequest?.id === requestId) {
 					setSelectedRequest({ ...selectedRequest, status });
 				}
-
-				showNotification("Maintenance request status updated successfully!", "success");
+				setNotification({
+					message: "Maintenance request status updated successfully!",
+					type: "success",
+				});
 			} else {
-				showNotification("Failed to update maintenance request status", "error");
+				setNotification({ message: "Failed to update maintenance request status", type: "error" });
 			}
 		} catch (error) {
 			console.error("Error updating maintenance request:", 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 maintenance requests...</div>
-			</div>
-		);
-	}
-
 	return (
-		<div className="min-h-screen bg-gray-50 p-8">
-			<div className="max-w-7xl mx-auto">
-				{/* Notification */}
-				{notification && (
-					<div className="fixed top-4 right-4 z-50 animate-slide-in">
-						<div
-							className={`px-6 py-4 rounded-lg shadow-lg ${
-								notification.type === "success"
-									? "bg-green-500 text-white"
-									: "bg-red-500 text-white"
-							}`}
-						>
-							<div className="flex items-center gap-3">
-								<span className="text-lg">{notification.type === "success" ? "✓" : "✕"}</span>
-								<p className="font-medium">{notification.message}</p>
-							</div>
+		<>
+			{notification && (
+				<div className="fixed top-4 right-4 z-50 animate-slide-in">
+					<div
+						className={`px-6 py-4 rounded-lg shadow-lg ${
+							notification.type === "success" ? "bg-green-500 text-white" : "bg-red-500 text-white"
+						}`}
+					>
+						<div className="flex items-center gap-3">
+							<span className="text-lg">{notification.type === "success" ? "✓" : "✕"}</span>
+							<p className="font-medium">{notification.message}</p>
 						</div>
 					</div>
-				)}
-
-				{/* Header */}
-				<div className="mb-6">
-					<h1 className="text-2xl font-bold text-gray-900">Maintenance</h1>
-					<p className="text-gray-600 mt-1">Track and manage maintenance requests</p>
 				</div>
-
-				{/* Table Header */}
+			)}
+
+			<PageHeader
+				title="Maintenance Requests"
+				description="Track and manage maintenance requests"
+			/>
+
+			<ListPageWithFilters
+				filterProps={{
+					filters: list.filters,
+					picklistValues: list.picklistValues,
+					formValues: list.formValues,
+					onFormValueChange: list.onFormValueChange,
+					onApply: list.onApplyFilters,
+					onReset: list.onResetFilters,
+					ariaLabel: maintenanceRequestsListConfig.filtersAriaLabel,
+				}}
+				filterError={list.filterError}
+				loading={list.loading}
+				error={list.error}
+				loadingMessage={maintenanceRequestsListConfig.loadingMessage}
+				isEmpty={list.items.length === 0}
+				searchPlaceholder="Search by description, tenant, property, status..."
+				searchAriaLabel="Search maintenance requests"
+			>
 				<div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
 					<div className="grid grid-cols-12 gap-4 px-6 py-4 bg-gray-50 border-b border-gray-200">
 						<div className="col-span-6 flex items-center gap-2">
@@ -131,21 +112,17 @@ export default function Maintenance() {
 							</span>
 						</div>
 					</div>
-
-					{/* Table Rows */}
 					<div className="divide-y divide-gray-200">
-						{requests.length === 0 ? (
+						{list.items.length === 0 ? (
 							<div className="text-center py-12 text-gray-500">No maintenance requests found</div>
 						) : (
-							requests.map((request) => (
+							list.items.map((request) => (
 								<div
 									key={request.id}
 									onClick={() => handleRowClick(request)}
 									className="grid grid-cols-12 gap-4 px-6 py-5 hover:bg-gray-50 transition-colors cursor-pointer"
 								>
-									{/* Maintenance Task */}
 									<div className="col-span-6 flex items-center gap-4">
-										{/* Task Image */}
 										<div className="w-16 h-16 rounded-lg bg-gray-200 flex-shrink-0 overflow-hidden">
 											{request.imageUrl ? (
 												<img
@@ -159,8 +136,6 @@ export default function Maintenance() {
 												</div>
 											)}
 										</div>
-
-										{/* Task Details */}
 										<div className="flex-1 min-w-0">
 											<h3 className="font-semibold text-gray-900 truncate mb-1">
 												{request.description}
@@ -168,8 +143,6 @@ export default function Maintenance() {
 											<p className="text-sm text-gray-500">By Tenant</p>
 										</div>
 									</div>
-
-									{/* Tenant Unit */}
 									<div className="col-span-4 flex items-center">
 										<div className="flex items-center gap-3">
 											<UserAvatar name={request.tenantName || "Unknown"} size="md" />
@@ -183,8 +156,6 @@ export default function Maintenance() {
 											</div>
 										</div>
 									</div>
-
-									{/* Status */}
 									<div className="col-span-2 flex items-center">
 										<StatusBadge status={request.status} />
 									</div>
@@ -194,16 +165,28 @@ export default function Maintenance() {
 					</div>
 				</div>
 
-				{/* Maintenance Details Modal */}
-				{selectedRequest && (
-					<MaintenanceDetailsModal
-						request={selectedRequest}
-						isOpen={!!selectedRequest}
-						onClose={handleCloseModal}
-						onSave={handleSaveStatus}
-					/>
+				{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>
 				)}
-			</div>
-		</div>
+			</ListPageWithFilters>
+
+			{selectedRequest && (
+				<MaintenanceDetailsModal
+					request={selectedRequest}
+					isOpen={!!selectedRequest}
+					onClose={handleCloseModal}
+					onSave={handleSaveStatus}
+				/>
+			)}
+		</>
 	);
 }

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

@@ -0,0 +1,138 @@
+import { useState } from "react";
+import { useListPage } from "../hooks/useListPage.js";
+import { maintenanceWorkersListConfig } from "../lib/listPageConfig.js";
+import { ListPageWithFilters } from "../components/list/ListPageWithFilters.js";
+import { PageHeader } from "../components/layout/PageHeader.js";
+import type { MaintenanceWorker } from "../lib/types.js";
+
+export default function MaintenanceWorkers() {
+	const list = useListPage(maintenanceWorkersListConfig);
+	const [selectedWorker, setSelectedWorker] = useState<MaintenanceWorker | null>(null);
+
+	return (
+		<>
+			<PageHeader title="Maintenance Workers" description="View and filter maintenance workers" />
+
+			<ListPageWithFilters
+				filterProps={{
+					filters: list.filters,
+					picklistValues: list.picklistValues,
+					formValues: list.formValues,
+					onFormValueChange: list.onFormValueChange,
+					onApply: list.onApplyFilters,
+					onReset: list.onResetFilters,
+					ariaLabel: maintenanceWorkersListConfig.filtersAriaLabel,
+				}}
+				filterError={list.filterError}
+				loading={list.loading}
+				error={list.error}
+				loadingMessage={maintenanceWorkersListConfig.loadingMessage}
+				isEmpty={list.items.length === 0}
+				searchPlaceholder="Search by name, organization, status..."
+				searchAriaLabel="Search workers"
+			>
+				<div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
+					<div className="grid grid-cols-12 gap-4 px-6 py-4 bg-gray-50 border-b border-gray-200">
+						<div className="col-span-5">
+							<span className="text-sm font-semibold text-purple-700 uppercase tracking-wide">
+								Name
+							</span>
+						</div>
+						<div className="col-span-4">
+							<span className="text-sm font-semibold text-purple-700 uppercase tracking-wide">
+								Organization
+							</span>
+						</div>
+						<div className="col-span-2">
+							<span className="text-sm font-semibold text-purple-700 uppercase tracking-wide">
+								Active Requests
+							</span>
+						</div>
+						<div className="col-span-1">
+							<span className="text-sm font-semibold text-purple-700 uppercase tracking-wide">
+								Status
+							</span>
+						</div>
+					</div>
+					<div className="divide-y divide-gray-200">
+						{list.items.length === 0 ? (
+							<div className="text-center py-12 text-gray-500">No maintenance workers found</div>
+						) : (
+							list.items.map((worker) => (
+								<div
+									key={worker.id}
+									onClick={() => setSelectedWorker(worker)}
+									className="grid grid-cols-12 gap-4 px-6 py-4 hover:bg-gray-50 transition-colors cursor-pointer"
+								>
+									<div className="col-span-5 font-medium text-gray-900">{worker.name}</div>
+									<div className="col-span-4 text-gray-600">{worker.organization ?? "—"}</div>
+									<div className="col-span-2 text-gray-600">
+										{worker.activeRequestsCount ?? "—"}
+									</div>
+									<div className="col-span-1 text-gray-600">{worker.status ?? "—"}</div>
+								</div>
+							))
+						)}
+					</div>
+				</div>
+				{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>
+			{selectedWorker && (
+				<div
+					className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+					role="dialog"
+					aria-modal="true"
+					aria-labelledby="worker-dialog-title"
+					onClick={() => setSelectedWorker(null)}
+				>
+					<div
+						className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 p-6"
+						onClick={(e) => e.stopPropagation()}
+					>
+						<h2 id="worker-dialog-title" className="text-lg font-semibold text-gray-900 mb-4">
+							Worker Details
+						</h2>
+						<dl className="space-y-2 text-sm">
+							<div>
+								<dt className="text-gray-500">Name</dt>
+								<dd className="font-medium text-gray-900">{selectedWorker.name}</dd>
+							</div>
+							<div>
+								<dt className="text-gray-500">Organization</dt>
+								<dd className="text-gray-900">{selectedWorker.organization ?? "—"}</dd>
+							</div>
+							<div>
+								<dt className="text-gray-500">Phone</dt>
+								<dd className="text-gray-900">{selectedWorker.phone ?? "—"}</dd>
+							</div>
+							<div>
+								<dt className="text-gray-500">Status</dt>
+								<dd className="text-gray-900">{selectedWorker.status ?? "—"}</dd>
+							</div>
+						</dl>
+						<div className="mt-6 flex justify-end">
+							<button
+								type="button"
+								onClick={() => setSelectedWorker(null)}
+								className="px-4 py-2 text-sm font-medium text-purple-700 hover:bg-purple-50 rounded-md"
+							>
+								Close
+							</button>
+						</div>
+					</div>
+				</div>
+			)}
+		</>
+	);
+}

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

@@ -1,114 +1,195 @@
-import { useEffect, useState } from "react";
-import { getProperties } from "../api/properties.js";
+import { useEffect, useState, useRef, useMemo, useCallback } from "react";
+import { useSearchParams } from "react-router";
+import {
+	useObjectListMetadata,
+	useRecordListGraphQL,
+	type FilterCriteria,
+} from "@salesforce/webapp-template-feature-react-global-search-experimental";
 import type { Property } from "../lib/types.js";
 import { PropertyCard } from "../components/PropertyCard.js";
 import { PropertyDetailsModal } from "../components/PropertyDetailsModal.js";
-import { Button } from "@/components/ui/button";
+import { PageContainer } from "../components/layout/PageContainer.js";
+import { PageHeader } from "../components/layout/PageHeader.js";
+import { PageLoadingState } from "../components/feedback/PageLoadingState.js";
+import { PageErrorState } from "../components/feedback/PageErrorState.js";
+import { FilterErrorAlert } from "../components/feedback/FilterErrorAlert.js";
+import { ListPageFilterRow } from "../components/filters/ListPageFilterRow.js";
+import { GLOBAL_SEARCH_OBJECT_API_NAME } from "../lib/globalSearchConstants.js";
+import { nodeToProperty } from "../lib/propertyAdapter.js";
+import { getPropertyListColumns } from "../lib/propertyColumns.js";
+import {
+	buildFilterCriteriaFromFormValues,
+	getDefaultFilterFormValues,
+	getApplicableFilters,
+} from "../lib/filterUtils.js";
+import { PAGE_SIZE_LIST, PROPERTY_FILTER_EXCLUDED_FIELD_PATHS } from "../lib/constants.js";
+import { useAccumulatedListPages } from "../hooks/useAccumulatedListPages.js";
+
+const PROPERTIES_DEFAULT_SORT = "CreatedDate DESC";
+
+const mapNodeToProperty = (node: unknown) =>
+	nodeToProperty(node as Record<string, unknown> | undefined);
 
 export default function Properties() {
-	const [properties, setProperties] = useState<Property[]>([]);
-	const [loading, setLoading] = useState(true);
-	const [loadingMore, setLoadingMore] = useState(false);
-	const [hasNextPage, setHasNextPage] = useState(false);
-	const [endCursor, setEndCursor] = useState<string | null>(null);
+	const [searchParams] = useSearchParams();
+	const searchQuery = searchParams.get("q") ?? "";
+
+	const [afterCursor, setAfterCursor] = useState<string | null>(null);
+	const [appliedFilters, setAppliedFilters] = useState<FilterCriteria[]>([]);
+	const [filterFormValues, setFilterFormValues] = useState<Record<string, string>>({});
+	const [filterError, setFilterError] = useState<string | null>(null);
 	const [selectedProperty, setSelectedProperty] = useState<Property | null>(null);
+	const hasInitializedFiltersRef = useRef(false);
+
+	const listMeta = useObjectListMetadata(GLOBAL_SEARCH_OBJECT_API_NAME);
+	const columns = useMemo(() => getPropertyListColumns(listMeta.columns), [listMeta.columns]);
+	const filters = useMemo(
+		() => getApplicableFilters(listMeta.filters ?? [], PROPERTY_FILTER_EXCLUDED_FIELD_PATHS),
+		[listMeta.filters],
+	);
+	const picklistValues = listMeta.picklistValues ?? {};
+
+	const {
+		edges,
+		pageInfo,
+		loading: resultsLoading,
+		error: resultsError,
+	} = useRecordListGraphQL({
+		objectApiName: GLOBAL_SEARCH_OBJECT_API_NAME,
+		columns,
+		columnsLoading: listMeta.loading,
+		columnsError: listMeta.error,
+		first: PAGE_SIZE_LIST,
+		after: afterCursor,
+		searchQuery: searchQuery.trim() || undefined,
+		sortBy: PROPERTIES_DEFAULT_SORT,
+		filters: appliedFilters,
+	});
+
+	const [accumulated, setAccumulated] = useAccumulatedListPages(
+		edges,
+		resultsLoading,
+		afterCursor,
+		mapNodeToProperty,
+	);
+
+	useEffect(() => {
+		if (filters.length === 0) return;
+		if (!hasInitializedFiltersRef.current) {
+			hasInitializedFiltersRef.current = true;
+			setFilterFormValues(getDefaultFilterFormValues(filters));
+		}
+	}, [filters]);
 
 	useEffect(() => {
-		loadProperties();
+		setAfterCursor(null);
+		setAccumulated([]);
+	}, [searchQuery, appliedFilters, setAccumulated]);
+
+	const hasNextPage = Boolean(pageInfo?.hasNextPage);
+	const endCursor = pageInfo?.endCursor ?? null;
+
+	const handleLoadMore = useCallback(() => {
+		if (endCursor && !searchQuery.trim()) setAfterCursor(endCursor);
+	}, [endCursor, searchQuery]);
+
+	const handlePropertyClick = useCallback((property: Property) => {
+		setSelectedProperty(property);
 	}, []);
 
-	const loadProperties = async () => {
-		try {
-			setLoading(true);
-			const result = await getProperties(12);
-			setProperties(result.properties);
-			setHasNextPage(result.pageInfo.hasNextPage);
-			setEndCursor(result.pageInfo.endCursor!);
-		} catch (error) {
-			console.error("Error loading properties:", error);
-		} finally {
-			setLoading(false);
-		}
-	};
-
-	const loadMoreProperties = async () => {
-		if (!endCursor) return;
-
-		try {
-			setLoadingMore(true);
-			const result = await getProperties(12, endCursor);
-			setProperties((prev) => [...prev, ...result.properties]);
-			setHasNextPage(result.pageInfo.hasNextPage);
-			setEndCursor(result.pageInfo.endCursor!);
-		} catch (error) {
-			console.error("Error loading more properties:", error);
-		} finally {
-			setLoadingMore(false);
+	const handleApplyFilters = useCallback(() => {
+		setFilterError(null);
+		const result = buildFilterCriteriaFromFormValues(
+			GLOBAL_SEARCH_OBJECT_API_NAME,
+			filters,
+			filterFormValues,
+		);
+		if (result.rangeError) {
+			setFilterError(result.rangeError);
+			return;
 		}
-	};
+		setAppliedFilters(result.criteria);
+		setAfterCursor(null);
+	}, [filters, filterFormValues]);
 
-	const handlePropertyClick = (property: Property) => {
-		setSelectedProperty(property);
-	};
+	const handleResetFilters = useCallback(() => {
+		setFilterFormValues(getDefaultFilterFormValues(filters));
+		setAppliedFilters([]);
+		setAfterCursor(null);
+		setFilterError(null);
+	}, [filters]);
 
-	const handleCloseModal = () => {
-		setSelectedProperty(null);
-	};
+	const handleFilterFormValueChange = useCallback((key: string, value: string) => {
+		setFilterFormValues((prev) => ({ ...prev, [key]: value }));
+		setFilterError(null);
+	}, []);
 
-	if (loading) {
-		return (
-			<div className="flex items-center justify-center h-screen bg-gray-50">
-				<div className="text-lg text-gray-600">Loading properties...</div>
-			</div>
-		);
+	const loading = listMeta.loading || resultsLoading;
+	const error = listMeta.error ?? resultsError;
+
+	if (error) {
+		return <PageErrorState message={error} />;
+	}
+
+	if (loading && accumulated.length === 0) {
+		return <PageLoadingState message="Loading properties..." />;
 	}
 
 	return (
-		<div className="min-h-screen bg-gray-50 p-8">
-			<div className="max-w-7xl mx-auto">
-				{/* Header */}
-				<div className="mb-6">
-					<h1 className="text-2xl font-bold text-gray-900">Properties</h1>
-					<p className="text-gray-600 mt-1">Browse and manage available properties</p>
-				</div>
+		<>
+			<PageHeader title="Properties" description="Browse and manage available properties" />
+			<PageContainer>
+				<div className="max-w-7xl mx-auto space-y-6">
+					<ListPageFilterRow
+						filters={filters}
+						picklistValues={picklistValues}
+						formValues={filterFormValues}
+						onFormValueChange={handleFilterFormValueChange}
+						onApply={handleApplyFilters}
+						onReset={handleResetFilters}
+						ariaLabel="Properties filters"
+					/>
+					{filterError && <FilterErrorAlert message={filterError} />}
 
-				{/* Properties Grid */}
-				{properties.length === 0 ? (
-					<div className="text-center py-12">
-						<p className="text-gray-500 text-lg">No properties found</p>
-					</div>
-				) : (
-					<>
-						<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-							{properties.map((property) => (
-								<PropertyCard key={property.id} property={property} onClick={handlePropertyClick} />
-							))}
+					{accumulated.length === 0 ? (
+						<div className="text-center py-12">
+							<p className="text-gray-500 text-lg">No properties found</p>
 						</div>
-
-						{/* Load More Button */}
-						{hasNextPage && (
-							<div className="flex justify-center mt-8">
-								<Button
-									onClick={loadMoreProperties}
-									disabled={loadingMore}
-									className="px-8 py-3 bg-purple-700 hover:bg-purple-800 text-white rounded-lg font-medium transition-colors"
-								>
-									{loadingMore ? "Loading..." : "Load More"}
-								</Button>
+					) : (
+						<>
+							<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+								{accumulated.map((property) => (
+									<PropertyCard
+										key={property.id}
+										property={property}
+										onClick={handlePropertyClick}
+									/>
+								))}
 							</div>
-						)}
-					</>
-				)}
+							{hasNextPage && !searchQuery.trim() && (
+								<div className="flex justify-center mt-6">
+									<button
+										type="button"
+										onClick={handleLoadMore}
+										disabled={resultsLoading}
+										className="px-6 py-2 bg-purple-700 hover:bg-purple-800 text-white rounded-lg text-sm font-medium disabled:opacity-50"
+									>
+										{resultsLoading ? "Loading..." : "Load More"}
+									</button>
+								</div>
+							)}
+						</>
+					)}
+				</div>
 
-				{/* Property Details Modal */}
 				{selectedProperty && (
 					<PropertyDetailsModal
 						property={selectedProperty}
 						isOpen={!!selectedProperty}
-						onClose={handleCloseModal}
+						onClose={() => setSelectedProperty(null)}
 					/>
 				)}
-			</div>
-		</div>
+			</PageContainer>
+		</>
 	);
 }