@salesforce/webapp-template-app-react-sample-b2x-experimental 1.68.0 → 1.69.0

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

@@ -1,4 +1,3 @@
-import { Button } from "../components/ui/button";
 import {
 	Card,
 	CardHeader,
@@ -7,92 +6,165 @@ import {
 	CardFooter,
 } from "../components/ui/card";
 import { Link } from "react-router";
+import { useWeather } from "@/hooks/useWeather";
+import { useMaintenanceRequests } from "@/hooks/useMaintenanceRequests";
+
+function maintenanceProgressPercent(status: string | null): number {
+	switch (status) {
+		case "New":
+			return 0;
+		case "Assigned":
+			return 25;
+		case "In Progress":
+			return 50;
+		case "On Hold":
+			return 75;
+		case "Resolved":
+			return 100;
+		default:
+			return 0;
+	}
+}
+
+function formatRequestDate(iso: string | null): string {
+	if (!iso) return "—";
+	try {
+		const d = new Date(iso);
+		return d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+	} catch {
+		return iso;
+	}
+}
 
 export default function Dashboard() {
+	const { data: weather, loading: weatherLoading, error: weatherError } = useWeather();
+	const {
+		requests: maintenanceRequests,
+		loading: maintenanceLoading,
+		error: maintenanceError,
+	} = useMaintenanceRequests();
+	const recentMaintenance = maintenanceRequests.slice(0, 3);
+
 	return (
 		<div className="mx-auto grid max-w-[1100px] grid-cols-1 gap-6 md:grid-cols-2">
 			<div className="space-y-6">
-				<Card>
-					<CardHeader className="flex flex-row items-center justify-between pb-2">
-						<CardTitle className="text-base text-primary">Community News</CardTitle>
-					</CardHeader>
-					<CardContent className="space-y-2">
-						<h3 className="text-lg font-semibold text-gray-700">
-							Sip & Skyline: Rooftop Wine Tasting Mixer
-						</h3>
-						<p className="text-sm text-muted-foreground">Thursday, January 22nd, at 6:30 PM</p>
-						<p className="text-sm leading-relaxed text-foreground">
-							We're partnering with local favorite Mission Cellars to bring you a curated selection
-							of Bay Area wines paired with artisanal charcuterie.
-						</p>
-						<div className="mt-4 h-36 rounded-xl bg-muted" aria-hidden />
-					</CardContent>
-				</Card>
-				<Card>
+				<Card className="rounded-2xl shadow-md">
 					<CardHeader className="flex flex-row items-center justify-between pb-2">
 						<CardTitle className="text-base text-primary">Maintenance</CardTitle>
-						<Button size="sm">+ New Request</Button>
+						<Link
+							to="/maintenance"
+							className="inline-flex h-8 cursor-pointer items-center justify-center rounded-xl bg-primary px-3 text-sm font-medium text-primary-foreground transition-colors duration-200 hover:bg-primary/90"
+						>
+							+ New Request
+						</Link>
 					</CardHeader>
 					<CardContent className="space-y-4">
-						<div className="flex items-start gap-4 border-b border-border py-3">
-							<div className="size-14 shrink-0 rounded-lg bg-muted" />
-							<div className="min-w-0 flex-1">
-								<p className="font-semibold text-foreground">Heater Broken</p>
-								<p className="text-xs text-muted-foreground">Submitted Mar 23, 2026.</p>
-								<div className="my-2 h-1.5 overflow-hidden rounded-full bg-muted">
-									<div className="h-full w-1/4 rounded-full bg-primary" aria-hidden />
-								</div>
-								<p className="text-xs text-primary">25% In Progress</p>
-							</div>
-						</div>
-						<div className="flex items-start gap-4 py-3">
-							<div className="size-14 shrink-0 rounded-lg bg-muted" />
-							<div className="min-w-0 flex-1">
-								<p className="font-semibold text-foreground">Replace Shower Head</p>
-								<p className="text-xs text-muted-foreground">Completed Nov 17, 2025.</p>
-								<div className="my-2 h-1.5 overflow-hidden rounded-full bg-muted">
-									<div className="h-full w-full rounded-full bg-primary" aria-hidden />
-								</div>
-								<p className="text-xs text-green-600">100% Completed</p>
-							</div>
-						</div>
+						{maintenanceLoading && <p className="text-sm text-muted-foreground">Loading…</p>}
+						{maintenanceError && (
+							<p className="text-sm text-destructive" role="alert">
+								{maintenanceError}
+							</p>
+						)}
+						{!maintenanceLoading && !maintenanceError && recentMaintenance.length === 0 && (
+							<p className="text-sm text-muted-foreground">
+								No requests yet.{" "}
+								<Link to="/maintenance" className="text-primary hover:underline">
+									Submit one
+								</Link>
+								.
+							</p>
+						)}
+						{!maintenanceLoading &&
+							!maintenanceError &&
+							recentMaintenance.map((r) => {
+								const pct = maintenanceProgressPercent(r.status);
+								const isResolved = r.status === "Resolved";
+								return (
+									<div
+										key={r.id}
+										className="flex items-start gap-4 border-b border-border py-3 last:border-b-0"
+									>
+										<div className="size-14 shrink-0 rounded-lg bg-muted" aria-hidden />
+										<div className="min-w-0 flex-1">
+											<p className="font-semibold text-foreground">
+												{r.title ?? r.description ?? "—"}
+											</p>
+											<p className="text-xs text-muted-foreground">
+												Submitted {formatRequestDate(r.dateRequested)}.
+											</p>
+											<div className="my-2 h-1.5 overflow-hidden rounded-full bg-muted">
+												<div
+													className="h-full rounded-full bg-primary transition-[width]"
+													style={{ width: `${pct}%` }}
+													aria-hidden
+												/>
+											</div>
+											<p className={`text-xs ${isResolved ? "text-green-600" : "text-primary"}`}>
+												{isResolved ? "100% Completed" : `${pct}% ${r.status ?? "New"}`}
+											</p>
+										</div>
+									</div>
+								);
+							})}
 					</CardContent>
 					<CardFooter className="justify-end pt-2">
-						<Link to="/maintenance" className="text-sm font-medium text-primary hover:underline">
+						<Link
+							to="/maintenance"
+							className="cursor-pointer text-sm font-medium text-primary transition-colors duration-200 hover:underline"
+						>
 							See All
 						</Link>
 					</CardFooter>
 				</Card>
 			</div>
 			<div>
-				<Card>
+				<Card className="rounded-2xl shadow-md">
 					<CardHeader>
 						<CardTitle className="text-primary">Weather</CardTitle>
-						<p className="text-sm text-muted-foreground">26 March 2026</p>
+						<p className="text-sm text-muted-foreground">
+							{new Date().toLocaleDateString("en-US", {
+								weekday: "short",
+								month: "short",
+								day: "numeric",
+								year: "numeric",
+							})}
+						</p>
 					</CardHeader>
 					<CardContent className="space-y-4">
-						<p className="text-base text-foreground">Cloudy</p>
-						<p className="text-4xl font-bold text-foreground">72°F</p>
-						<div className="flex flex-wrap gap-4 text-sm text-muted-foreground">
-							<span>10 m/s Wind</span>
-							<span>98% Humidity</span>
-							<span>100% Rain</span>
-						</div>
-						<div className="flex gap-2 border-b border-border pb-2">
-							<span className="border-b-2 border-primary pb-1 text-sm font-semibold text-primary">
-								Today
-							</span>
-							<span className="text-sm text-muted-foreground">Tomorrow</span>
-							<span className="text-sm text-muted-foreground">Next 3 Days</span>
-						</div>
-						<div className="flex flex-wrap gap-4">
-							{["10 am", "11 am", "12 pm", "01 pm"].map((t, i) => (
-								<div key={t} className="min-w-[60px] rounded-lg bg-muted/50 p-2 text-center">
-									<p className="text-xs text-muted-foreground">{t}</p>
-									<p className="text-base font-semibold text-foreground">{72 - i}°</p>
+						{weatherLoading && <p className="text-sm text-muted-foreground">Loading weather…</p>}
+						{weatherError && (
+							<p className="text-sm text-destructive" role="alert">
+								{weatherError}
+							</p>
+						)}
+						{!weatherLoading && !weatherError && weather && (
+							<>
+								<p className="text-base text-foreground">{weather.current.description}</p>
+								<p className="text-4xl font-bold text-foreground">{weather.current.tempF}°F</p>
+								<div className="flex flex-wrap gap-4 text-sm text-muted-foreground">
+									<span>{weather.current.windSpeedMph} mph Wind</span>
+									<span>{weather.current.humidity}% Humidity</span>
+								</div>
+								<div className="flex gap-2 border-b border-border pb-2">
+									<span className="border-b-2 border-primary pb-1 text-sm font-semibold text-primary">
+										Today
+									</span>
 								</div>
-							))}
-						</div>
+								{weather.hourly.length > 0 && (
+									<div className="flex flex-wrap gap-4">
+										{weather.hourly.map((h) => (
+											<div
+												key={h.time}
+												className="min-w-[60px] rounded-xl bg-muted/50 p-2 text-center"
+											>
+												<p className="text-xs text-muted-foreground">{h.time}</p>
+												<p className="text-base font-semibold text-foreground">{h.tempF}°</p>
+											</div>
+										))}
+									</div>
+								)}
+							</>
+						)}
 					</CardContent>
 				</Card>
 			</div>

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

@@ -0,0 +1,109 @@
+import { useMemo } from "react";
+import { useParams, useNavigate } from "react-router";
+import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
+import { Skeleton } from "../components/ui/skeleton";
+import { Alert, AlertDescription, AlertTitle } from "../components/ui/alert";
+import { AlertCircle } from "lucide-react";
+import DetailHeader from "../components/detail/DetailHeader";
+import { UiApiDetailForm } from "../components/detail/UiApiDetailForm";
+import { OBJECT_API_NAMES, DEFAULT_DETAIL_PAGE_TITLE } from "../constants";
+import { toRecordDisplayNameMetadata } from "../utils/fieldUtils";
+import { useRecordDetailLayout } from "../hooks/useRecordDetailLayout";
+import { getGraphQLRecordDisplayName } from "../utils/graphQLNodeFieldUtils";
+
+export default function DetailPage() {
+	const { objectApiName: objectApiNameParam, recordId } = useParams<{
+		objectApiName: string;
+		recordId: string;
+	}>();
+	const navigate = useNavigate();
+	const objectApiName = objectApiNameParam ?? OBJECT_API_NAMES[0];
+
+	const { layout, record, objectMetadata, loading, error } = useRecordDetailLayout({
+		objectApiName,
+		recordId: recordId ?? null,
+	});
+
+	const recordTitle = useMemo(
+		() =>
+			record
+				? getGraphQLRecordDisplayName(record, toRecordDisplayNameMetadata(objectMetadata))
+				: DEFAULT_DETAIL_PAGE_TITLE,
+		[record, objectMetadata],
+	);
+
+	const handleBack = () => navigate(-1);
+
+	if (loading) {
+		return (
+			<div
+				className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12"
+				role="status"
+				aria-live="polite"
+				aria-label="Loading record details"
+			>
+				<span className="sr-only">Loading record details</span>
+				<Skeleton className="h-10 w-32 mb-6" aria-hidden="true" />
+				<Card aria-hidden="true">
+					<CardHeader>
+						<Skeleton className="h-8 w-3/4" />
+					</CardHeader>
+					<CardContent className="space-y-4">
+						{[1, 2, 3, 4].map((i) => (
+							<div key={i} className="space-y-2">
+								<Skeleton className="h-4 w-24" />
+								<Skeleton className="h-4 w-full" />
+							</div>
+						))}
+					</CardContent>
+				</Card>
+			</div>
+		);
+	}
+
+	if (error) {
+		return (
+			<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+				<DetailHeader title="" onBack={handleBack} />
+				<Alert variant="destructive" role="alert">
+					<AlertCircle className="h-4 w-4" aria-hidden="true" />
+					<AlertTitle>Error</AlertTitle>
+					<AlertDescription>{error}</AlertDescription>
+				</Alert>
+			</div>
+		);
+	}
+
+	if (!layout || !record) {
+		return (
+			<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+				<DetailHeader title="" onBack={handleBack} />
+				<Alert role="alert">
+					<AlertCircle className="h-4 w-4" aria-hidden="true" />
+					<AlertTitle>Not Found</AlertTitle>
+					<AlertDescription>Record not found</AlertDescription>
+				</Alert>
+			</div>
+		);
+	}
+
+	return (
+		<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12" aria-label="Record details">
+			<DetailHeader title={recordTitle} onBack={handleBack} />
+			<Card>
+				<CardHeader>
+					<CardTitle className="text-2xl">{recordTitle}</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<UiApiDetailForm
+						objectApiName={objectApiName}
+						recordId={recordId!}
+						layout={layout}
+						record={record}
+						objectMetadata={objectMetadata}
+					/>
+				</CardContent>
+			</Card>
+		</main>
+	);
+}

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

@@ -0,0 +1,229 @@
+/**
+ * GlobalSearch Page Component
+ *
+ * Main page component for displaying global search results.
+ * Uses GraphQL API (useRecordListGraphQL) for list data; results are adapted to the
+ * same record shape as before so SearchResultCard and filters/sort/pagination work unchanged.
+ *
+ * @remarks
+ * - Supports single object search (no tabs)
+ * - Displays filters panel on the left and results on the right
+ * - Pagination uses a cursor stack: we only query forward (first + after) and store endCursor per page;
+ *   Previous re-queries using the stored cursor for the previous page so both Next and Previous work.
+ */
+import { useMemo, useState, useCallback, useEffect, useRef } from "react";
+import { useParams } from "react-router";
+import { OBJECT_API_NAMES, DEFAULT_PAGE_SIZE } from "../constants";
+import { useObjectListMetadata } from "../hooks/useObjectSearchData";
+import { useObjectInfoBatch } from "../hooks/useObjectInfoBatch";
+import { useRecordListGraphQL } from "../hooks/useRecordListGraphQL";
+import FiltersPanel from "../components/FiltersPanel";
+import SearchHeader from "../components/search/SearchHeader";
+import SearchResultsPanel from "../components/search/SearchResultsPanel";
+import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
+import { Skeleton } from "../components/ui/skeleton";
+import type { FilterCriteria } from "../types/filters/filters";
+import type { SearchResultRecord } from "../types/search/searchResults";
+import { graphQLNodeToSearchResultRecordData } from "../utils/graphQLRecordAdapter";
+
+const EMPTY_HIGHLIGHT = { fields: {}, snippet: null };
+const EMPTY_SEARCH_INFO = { isPromoted: false, isSpellCorrected: false };
+
+export default function GlobalSearch() {
+	const { query } = useParams<{ query: string }>();
+
+	const objectApiName = OBJECT_API_NAMES[0];
+
+	const [searchPageSize, setSearchPageSize] = useState(DEFAULT_PAGE_SIZE);
+	const [afterCursor, setAfterCursor] = useState<string | null>(null);
+	const [pageIndex, setPageIndex] = useState(0);
+	/** Cursor stack: cursorStack[i] is the `after` value that returns page i. cursorStack[0] = null (first page). */
+	const [cursorStack, setCursorStack] = useState<(string | null)[]>([null]);
+	const [appliedFilters, setAppliedFilters] = useState<FilterCriteria[]>([]);
+	const [sortBy, setSortBy] = useState("Name");
+
+	const decodedQuery = useMemo(() => {
+		if (!query) return "";
+		try {
+			return decodeURIComponent(query);
+		} catch (e) {
+			return query;
+		}
+	}, [query]);
+
+	const isBrowseAll = decodedQuery === "browse__all";
+	const searchQuery = isBrowseAll ? "" : decodedQuery.trim();
+
+	// Reset pagination when the URL search query changes so we don't use an old cursor with a new result set
+	useEffect(() => {
+		setAfterCursor(null);
+		setPageIndex(0);
+		setCursorStack([null]);
+	}, [query]);
+
+	const listMeta = useObjectListMetadata(objectApiName);
+	const { objectInfos } = useObjectInfoBatch([...OBJECT_API_NAMES]);
+	const labelPlural = (objectInfos[0]?.labelPlural as string | undefined) ?? "records";
+	const {
+		edges,
+		pageInfo,
+		loading: resultsLoading,
+		error: resultsError,
+	} = useRecordListGraphQL({
+		objectApiName,
+		first: searchPageSize,
+		after: afterCursor,
+		filters: appliedFilters,
+		sortBy: sortBy === "relevance" ? "Name" : sortBy,
+		searchQuery: searchQuery || undefined,
+		columns: listMeta.columns,
+		columnsLoading: listMeta.loading,
+		columnsError: listMeta.error,
+	});
+
+	// Store endCursor for the next page so we can re-query when user clicks Next; also enables Previous via stack.
+	// Only update when not loading so a stale response cannot write a cursor into the wrong stack index (e.g. after rapid Next clicks).
+	useEffect(() => {
+		if (resultsLoading) return;
+		const cursor = pageInfo?.endCursor ?? null;
+		if (cursor == null) return;
+		setCursorStack((prev) => {
+			const next = [...prev];
+			next[pageIndex + 1] = cursor;
+			return next;
+		});
+	}, [resultsLoading, pageInfo?.endCursor, pageIndex]);
+
+	const results: SearchResultRecord[] = useMemo(
+		() =>
+			(edges ?? []).map((edge) => ({
+				record: graphQLNodeToSearchResultRecordData(
+					edge?.node as Record<string, unknown>,
+					objectApiName,
+				),
+				highlightInfo: EMPTY_HIGHLIGHT,
+				searchInfo: EMPTY_SEARCH_INFO,
+			})),
+		[edges, objectApiName],
+	);
+
+	const nextPageToken = pageInfo?.endCursor ?? null;
+	/** Entry cursor for the previous page; used when user clicks Previous to re-query with after=cursorStack[pageIndex-1]. */
+	const previousPageToken = pageIndex > 0 ? (cursorStack[pageIndex - 1] ?? null) : null;
+	const hasNextPage = pageInfo?.hasNextPage === true;
+	const hasPreviousPage = pageIndex > 0;
+	const currentPageToken = pageIndex.toString();
+
+	const cursorStackRef = useRef(cursorStack);
+	const pageIndexRef = useRef(pageIndex);
+	cursorStackRef.current = cursorStack;
+	pageIndexRef.current = pageIndex;
+
+	const canRenderFilters =
+		!listMeta.loading && listMeta.filters !== undefined && listMeta.picklistValues !== undefined;
+
+	const handleApplyFilters = useCallback((filterCriteria: FilterCriteria[]) => {
+		setAppliedFilters(filterCriteria);
+		setAfterCursor(null);
+		setPageIndex(0);
+		setCursorStack([null]);
+	}, []);
+
+	const handlePageChange = useCallback(
+		(newPageToken: string, direction?: "next" | "prev" | "first") => {
+			if (direction === "first" || newPageToken === "0") {
+				setAfterCursor(null);
+				setPageIndex(0);
+			} else if (direction === "prev") {
+				const idx = pageIndexRef.current;
+				const stack = cursorStackRef.current;
+				const prevCursor = idx > 0 ? (stack[idx - 1] ?? null) : null;
+				setAfterCursor(prevCursor);
+				setPageIndex((prev) => Math.max(0, prev - 1));
+			} else {
+				setAfterCursor(newPageToken);
+				setPageIndex((prev) => prev + 1);
+			}
+			window.scrollTo({ top: 0, behavior: "smooth" });
+		},
+		[],
+	);
+
+	const handlePageSizeChange = useCallback((newPageSize: number) => {
+		setSearchPageSize(newPageSize);
+		setAfterCursor(null);
+		setPageIndex(0);
+		setCursorStack([null]);
+		window.scrollTo({ top: 0, behavior: "smooth" });
+	}, []);
+
+	const handleSortByChange = useCallback((newSortBy: string) => {
+		setSortBy(newSortBy);
+		setAfterCursor(null);
+		setPageIndex(0);
+		setCursorStack([null]);
+		window.scrollTo({ top: 0, behavior: "smooth" });
+	}, []);
+
+	return (
+		<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+			<SearchHeader query={decodedQuery} isBrowseAll={isBrowseAll} labelPlural={labelPlural} />
+
+			<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
+				<aside className="lg:col-span-1" aria-label="Filters panel">
+					{canRenderFilters ? (
+						<FiltersPanel
+							filters={listMeta.filters}
+							picklistValues={listMeta.picklistValues}
+							loading={listMeta.loading}
+							objectApiName={objectApiName}
+							onApplyFilters={handleApplyFilters}
+						/>
+					) : (
+						<Card className="w-full" role="region" aria-label="Filters panel">
+							<CardHeader>
+								<CardTitle>Filters</CardTitle>
+							</CardHeader>
+							<CardContent
+								className="space-y-4"
+								role="status"
+								aria-live="polite"
+								aria-label="Loading filters"
+							>
+								<span className="sr-only">Loading filters</span>
+								{[1, 2, 3].map((i) => (
+									<div key={i} className="space-y-2" aria-hidden="true">
+										<Skeleton className="h-4 w-24" />
+										<Skeleton className="h-9 w-full" />
+									</div>
+								))}
+							</CardContent>
+						</Card>
+					)}
+				</aside>
+
+				<section className="lg:col-span-3" aria-label="Search results">
+					<SearchResultsPanel
+						objectApiName={objectApiName}
+						columns={listMeta.columns}
+						results={results}
+						columnsLoading={listMeta.loading}
+						resultsLoading={resultsLoading}
+						columnsError={listMeta.error}
+						resultsError={resultsError}
+						currentPageToken={currentPageToken}
+						nextPageToken={nextPageToken}
+						previousPageToken={previousPageToken}
+						hasNextPage={hasNextPage}
+						hasPreviousPage={hasPreviousPage}
+						pageSize={searchPageSize}
+						sortBy={sortBy}
+						onPageChange={handlePageChange}
+						onPageSizeChange={handlePageSizeChange}
+						onSortByChange={handleSortByChange}
+					/>
+				</section>
+			</div>
+		</main>
+	);
+}