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

package/dist/force-app/main/default/uiBundles/propertyrentalapp/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/propertyrentalapp/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/propertyrentalapp/src/pages/Application.tsx

@@ -0,0 +1,235 @@
+import { useSearchParams, Link } from "react-router";
+import { useCallback, useState, type ChangeEvent, type SubmitEvent } from "react";
+import { Button } from "../components/ui/button";
+import { Input } from "../components/ui/input";
+import { Label } from "../components/ui/label";
+import { Card, CardContent } from "../components/ui/card";
+import { Skeleton } from "../components/ui/skeleton";
+import { SkeletonField } from "@/components/SkeletonPrimitives";
+import { fetchPropertyDetailById } from "@/api/properties/propertyDetailGraphQL";
+import { createApplicationRecord } from "@/api/applications/applicationApi";
+import { useAuth } from "@/features/authentication/context/AuthContext";
+import { fetchUserContact } from "../features/authentication/api/userProfileApi";
+import { useCachedAsyncData } from "@/features/object-search/hooks/useCachedAsyncData";
+
+function ApplicationSkeleton() {
+	return (
+		<div className="mx-auto max-w-[900px]" role="status">
+			<Skeleton className="mb-4 h-4 w-28" />
+
+			<Card className="mb-6 flex gap-4 rounded-2xl border border-border p-6 shadow-sm">
+				<Skeleton className="size-[200px] shrink-0 rounded-xl" />
+				<div className="min-w-0 flex-1 space-y-2">
+					<Skeleton className="h-7 w-2/3" />
+					<Skeleton className="h-4 w-1/2" />
+				</div>
+			</Card>
+
+			<Card className="mb-6 rounded-2xl border border-border shadow-sm">
+				<CardContent className="space-y-4 pt-3">
+					<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+						<SkeletonField labelWidth="w-20" />
+					</div>
+					<SkeletonField labelWidth="w-24" height="h-[80px]" />
+					<SkeletonField labelWidth="w-20" height="h-[80px]" />
+					<Skeleton className="h-12 w-full rounded-xl" />
+				</CardContent>
+			</Card>
+
+			<span className="sr-only">Loading…</span>
+		</div>
+	);
+}
+
+export default function Application() {
+	const { user } = useAuth();
+	const [searchParams] = useSearchParams();
+	const propertyId = searchParams.get("propertyId") ?? "";
+
+	const { data: contactData } = useCachedAsyncData(
+		() => {
+			if (!user?.id) return Promise.resolve(null);
+			return fetchUserContact<{ ContactId?: string }>(user.id);
+		},
+		[user?.id],
+		{ key: `contact:${user?.id ?? ""}`, ttl: 300_000 },
+	);
+	const contactId = contactData?.ContactId ?? null;
+
+	const {
+		data: property,
+		loading,
+		error: loadError,
+	} = useCachedAsyncData(
+		() => {
+			if (!propertyId?.trim()) return Promise.resolve(null);
+			return fetchPropertyDetailById(propertyId);
+		},
+		[propertyId],
+		{ key: `app-property:${propertyId}` },
+	);
+
+	const listing = property?.Property_Listings__r?.edges?.[0]?.node ?? null;
+	const images = (property?.Property_Images__r?.edges ?? []).flatMap((e) =>
+		e?.node ? [e.node] : [],
+	);
+	const primaryImage =
+		images.find((i) => i.Image_Type__c?.value === "Primary") ?? images[0] ?? null;
+	const propertyImageUrl = primaryImage?.Image_URL__c?.value ?? null;
+	const propertyName = listing?.Name?.value ?? property?.Name?.value ?? null;
+	const propertyAddress = property?.Address__c?.value ?? null;
+
+	const [moveInDate, setMoveInDate] = useState("");
+	const [employment, setEmployment] = useState("");
+	const [references, setReferences] = useState("");
+
+	const [submitting, setSubmitting] = useState(false);
+	const [submitError, setSubmitError] = useState<string | null>(null);
+	const [submittedId, setSubmittedId] = useState<string | null>(null);
+
+	const handleSubmit = useCallback(
+		async (e: SubmitEvent<HTMLFormElement>) => {
+			e.preventDefault();
+			setSubmitError(null);
+			setSubmitting(true);
+			try {
+				const id = await createApplicationRecord({
+					Property__c: propertyId || null,
+					Status__c: "Submitted",
+					User__c: contactId || user?.id || "",
+					Start_Date__c: moveInDate.trim() || null,
+					Employment__c: employment.trim() || null,
+					References__c: references.trim() || null,
+				});
+				setSubmittedId(id.id);
+			} catch (err) {
+				setSubmitError(err instanceof Error ? err.message : "Failed to submit application.");
+			} finally {
+				setSubmitting(false);
+			}
+		},
+		[propertyId, contactId, moveInDate, employment, references, user?.id],
+	);
+
+	if (loading) {
+		return <ApplicationSkeleton />;
+	}
+
+	if (submittedId) {
+		return (
+			<div className="mx-auto max-w-[900px]">
+				<Card className="mb-6 rounded-2xl border border-border p-6 shadow-sm">
+					<h2 className="mb-2 text-2xl font-semibold text-foreground">Application submitted</h2>
+					<p className="text-sm text-muted-foreground">
+						Your application has been saved. Reference: {submittedId}
+					</p>
+					<div className="mt-4 flex gap-2 items-center">
+						<Link to="/properties" className="text-sm text-primary no-underline hover:underline">
+							Back to search
+						</Link>
+						<Button
+							asChild
+							size="sm"
+							className="rounded-xl bg-primary px-5 py-5 text-lg font-medium transition-colors duration-200 hover:bg-primary/90"
+						>
+							<Link to="/application">Submit another</Link>
+						</Button>
+					</div>
+				</Card>
+			</div>
+		);
+	}
+
+	return (
+		<div className="mx-auto max-w-[900px]">
+			<div className="mb-4">
+				<Link
+					to={propertyId ? `/property/${propertyId}` : "/properties"}
+					className="text-sm text-primary no-underline hover:underline"
+				>
+					{propertyId ? "← Back to listing" : "← Back to search"}
+				</Link>
+			</div>
+			<Card className="mb-6 flex gap-4 rounded-2xl border border-border p-6 shadow-sm">
+				<div className="relative size-[200px] shrink-0 overflow-hidden rounded-xl bg-muted">
+					{propertyImageUrl ? (
+						<img src={propertyImageUrl} alt="" className="h-full w-full object-cover" />
+					) : (
+						<div className="h-full w-full bg-muted" aria-hidden />
+					)}
+				</div>
+				<div className="min-w-0 flex-1">
+					<h2 className="mb-1.5 text-2xl font-semibold text-foreground">
+						{propertyName ?? "Apply for a property"}
+					</h2>
+					<p className="text-sm text-muted-foreground">
+						{propertyAddress ??
+							(propertyId ? (
+								<Skeleton className="mt-1 h-4 w-48" />
+							) : (
+								"Select a property from search or listing detail to apply."
+							))}
+					</p>
+					{loadError && (
+						<p className="mt-2 text-sm text-destructive">
+							Something went wrong. Please try again later.
+						</p>
+					)}
+				</div>
+			</Card>
+
+			<Card className="mb-6 rounded-2xl border border-border shadow-sm">
+				<CardContent className="pt-3">
+					<form onSubmit={handleSubmit}>
+						<div className="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
+							<div className="space-y-2">
+								<Label htmlFor="app-move-in">Move in date</Label>
+								<Input
+									id="app-move-in"
+									type="date"
+									value={moveInDate}
+									onChange={(e: ChangeEvent<HTMLInputElement>) => setMoveInDate(e.target.value)}
+								/>
+							</div>
+						</div>
+						<div className="mb-4 space-y-2">
+							<Label htmlFor="app-employment">Employment info</Label>
+							<textarea
+								id="app-employment"
+								rows={3}
+								className="min-h-[80px] w-full resize-y rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
+								value={employment}
+								onChange={(e) => setEmployment(e.target.value)}
+							/>
+						</div>
+						<div className="mb-4 space-y-2">
+							<Label htmlFor="app-references">References</Label>
+							<textarea
+								id="app-references"
+								rows={3}
+								className="min-h-[80px] w-full resize-y rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
+								value={references}
+								onChange={(e) => setReferences(e.target.value)}
+							/>
+						</div>
+						{submitError && (
+							<p className="mb-4 text-sm text-destructive">
+								Something went wrong. Please try again later.
+							</p>
+						)}
+						<div className="flex gap-2">
+							<Button
+								type="submit"
+								size="sm"
+								className="w-full cursor-pointer rounded-xl bg-primary px-5 py-5 text-lg font-medium transition-colors duration-200 hover:bg-primary/90 disabled:opacity-50"
+								disabled={submitting}
+							>
+								{submitting ? "Submitting…" : "Submit application"}
+							</Button>
+						</div>
+					</form>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/pages/Contact.tsx

@@ -0,0 +1,247 @@
+import { useState, useCallback, type SubmitEvent } from "react";
+import { Link } from "react-router";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { CenteredPageLayout } from "@/features/authentication/layout/centered-page-layout";
+import { Loader2 } from "lucide-react";
+import { createContactUsLead } from "@/api/leads/leadApi";
+import { useAuth } from "@/features/authentication/context/AuthContext";
+import { fetchUserProfile } from "@/features/authentication/api/userProfileApi";
+import { useCachedAsyncData } from "@/features/object-search/hooks/useCachedAsyncData";
+import type { UserInfo } from "@/api/leads/leadApi";
+
+function SuccessCard() {
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle className="text-xl">Message sent</CardTitle>
+			</CardHeader>
+			<CardContent className="space-y-4">
+				<p className="text-muted-foreground">
+					Thank you for reaching out. We've received your message and will get back to you soon.
+				</p>
+				<Button asChild variant="outline">
+					<Link to="/">Back to Home</Link>
+				</Button>
+				<Button asChild>
+					<Link to="/contact">Send another message</Link>
+				</Button>
+			</CardContent>
+		</Card>
+	);
+}
+
+interface ContactFormProps {
+	isAuthenticated: boolean;
+	userInfo: UserInfo | null;
+	onSubmit: (e: SubmitEvent<HTMLFormElement>) => void;
+	submitting: boolean;
+	submitError: string | null;
+	loading?: boolean;
+}
+
+function ContactForm({
+	isAuthenticated,
+	userInfo,
+	onSubmit,
+	submitting,
+	submitError,
+	loading,
+}: ContactFormProps) {
+	const [firstName, setFirstName] = useState("");
+	const [lastName, setLastName] = useState("");
+	const [email, setEmail] = useState("");
+	const [phone, setPhone] = useState("");
+	const [subject, setSubject] = useState("");
+	const [message, setMessage] = useState("");
+
+	return (
+		<Card className="relative">
+			{loading && (
+				<div className="absolute inset-0 z-10 flex items-center justify-center rounded-[inherit] bg-muted/60">
+					<Loader2 className="size-8 animate-spin text-muted-foreground" />
+					<span className="sr-only">Loading contact form…</span>
+				</div>
+			)}
+			<CardHeader>
+				<CardTitle className="text-lg">Send a message</CardTitle>
+			</CardHeader>
+			<CardContent>
+				<form
+					onSubmit={onSubmit}
+					className="space-y-4"
+					aria-disabled={loading}
+					inert={loading ? true : undefined}
+				>
+					<div className="grid gap-4 sm:grid-cols-2">
+						<div className="space-y-2">
+							<Label htmlFor="contact-first">First name {!isAuthenticated && "*"}</Label>
+							<Input
+								id="contact-first"
+								name="contact-first"
+								type="text"
+								value={isAuthenticated ? (userInfo?.FirstName ?? "") : firstName}
+								onChange={(e) => setFirstName(e.target.value)}
+								disabled={isAuthenticated}
+								required={!isAuthenticated}
+							/>
+						</div>
+						<div className="space-y-2">
+							<Label htmlFor="contact-last">Last name {!isAuthenticated && "*"}</Label>
+							<Input
+								id="contact-last"
+								name="contact-last"
+								type="text"
+								value={isAuthenticated ? (userInfo?.LastName ?? "") : lastName}
+								onChange={(e) => setLastName(e.target.value)}
+								disabled={isAuthenticated}
+								required={!isAuthenticated}
+							/>
+						</div>
+					</div>
+					<div className="space-y-2">
+						<Label htmlFor="contact-email">Email {!isAuthenticated && "*"}</Label>
+						<Input
+							id="contact-email"
+							name="contact-email"
+							type="email"
+							value={isAuthenticated ? (userInfo?.Email ?? "") : email}
+							onChange={(e) => setEmail(e.target.value)}
+							disabled={isAuthenticated}
+							required={!isAuthenticated}
+						/>
+					</div>
+					<div className="space-y-2">
+						<Label htmlFor="contact-phone">Phone</Label>
+						<Input
+							id="contact-phone"
+							name="contact-phone"
+							type="tel"
+							value={isAuthenticated ? (userInfo?.Phone ?? "") : phone}
+							onChange={(e) => setPhone(e.target.value)}
+							disabled={isAuthenticated}
+						/>
+					</div>
+					<div className="space-y-2">
+						<Label htmlFor="contact-subject">Subject</Label>
+						<Input
+							id="contact-subject"
+							name="contact-subject"
+							type="text"
+							value={subject}
+							onChange={(e) => setSubject(e.target.value)}
+							placeholder="e.g. General inquiry, Property question"
+						/>
+					</div>
+					<div className="space-y-2">
+						<Label htmlFor="contact-message">Message *</Label>
+						<textarea
+							id="contact-message"
+							name="contact-message"
+							rows={5}
+							value={message}
+							onChange={(e) => setMessage(e.target.value)}
+							required
+							className="min-h-[120px] w-full resize-y rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
+						/>
+					</div>
+					{submitError && (
+						<p className="text-sm text-destructive">
+							Something went wrong. Please try again later.
+						</p>
+					)}
+					<Button type="submit" disabled={submitting} className="bg-teal-600 hover:bg-teal-700">
+						{submitting ? "Sending…" : "Send message"}
+					</Button>
+				</form>
+			</CardContent>
+		</Card>
+	);
+}
+
+export default function Contact() {
+	const { isAuthenticated, loading, user } = useAuth();
+	const [submitting, setSubmitting] = useState(false);
+	const [submitError, setSubmitError] = useState<string | null>(null);
+	const [submitted, setSubmitted] = useState(false);
+
+	const { data: userInfo } = useCachedAsyncData(
+		() => {
+			if (!isAuthenticated || !user?.id) return Promise.resolve(null);
+			return fetchUserProfile<UserInfo>(user.id);
+		},
+		[isAuthenticated, user?.id],
+		{ key: `contact-user-profile:${user?.id ?? ""}`, ttl: 300_000 },
+	);
+
+	const handleSubmit = useCallback(
+		async (e: SubmitEvent<HTMLFormElement>) => {
+			e.preventDefault();
+			setSubmitError(null);
+			setSubmitting(true);
+
+			const form = e.currentTarget;
+			const formData = new FormData(form);
+
+			try {
+				await createContactUsLead({
+					FirstName: isAuthenticated
+						? (userInfo?.FirstName ?? "")
+						: (formData.get("contact-first") as string).trim(),
+					LastName: isAuthenticated
+						? (userInfo?.LastName ?? "")
+						: (formData.get("contact-last") as string).trim(),
+					Email: isAuthenticated
+						? (userInfo?.Email ?? "")
+						: (formData.get("contact-email") as string).trim(),
+					Phone: isAuthenticated
+						? userInfo?.Phone
+						: (formData.get("contact-phone") as string)?.trim() || undefined,
+					Subject: (formData.get("contact-subject") as string)?.trim() || undefined,
+					Message: (formData.get("contact-message") as string).trim(),
+				});
+				setSubmitted(true);
+			} catch (err) {
+				setSubmitError(
+					err instanceof Error ? err.message : "Something went wrong. Please try again.",
+				);
+			} finally {
+				setSubmitting(false);
+			}
+		},
+		[isAuthenticated, userInfo],
+	);
+
+	const isLoading = loading || (isAuthenticated && !userInfo);
+
+	if (submitted) {
+		return (
+			<CenteredPageLayout contentMaxWidth="md">
+				<h1 className="mb-2 text-2xl font-semibold text-foreground">Contact Us</h1>
+				<p className="mb-6 text-muted-foreground">
+					Have a question or feedback? Send us a message and we'll respond as soon as we can.
+				</p>
+				<SuccessCard />
+			</CenteredPageLayout>
+		);
+	}
+
+	return (
+		<CenteredPageLayout contentMaxWidth="md">
+			<h1 className="mb-2 text-2xl font-semibold text-foreground">Contact Us</h1>
+			<p className="mb-6 text-muted-foreground">
+				Have a question or feedback? Send us a message and we'll respond as soon as we can.
+			</p>
+			<ContactForm
+				isAuthenticated={isAuthenticated}
+				userInfo={userInfo}
+				onSubmit={handleSubmit}
+				submitting={submitting}
+				submitError={submitError}
+				loading={isLoading}
+			/>
+		</CenteredPageLayout>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/pages/Dashboard.tsx

@@ -0,0 +1,45 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Link } from "react-router";
+import MaintenanceRequestList from "@/components/maintenanceRequests/MaintenanceRequestList";
+import { WeatherWidget } from "@/components/dashboard/WeatherWidget";
+import { useMaintenanceRequests } from "@/hooks/useMaintenanceRequests";
+
+export default function Dashboard() {
+	const {
+		requests: maintenanceRequests,
+		loading: maintenanceLoading,
+		error: maintenanceError,
+	} = useMaintenanceRequests();
+	const recentMaintenance = maintenanceRequests.slice(0, 5);
+
+	return (
+		<div className="mx-auto flex max-w-[1100px] flex-col gap-6 lg:flex-row">
+			<div className="min-w-0 flex-1">
+				<Card className="border-gray-200 p-6 shadow-sm">
+					<div className="mb-6 flex items-center justify-between">
+						<h2 className="text-lg font-semibold tracking-wide text-primary">
+							Maintenance Requests
+						</h2>
+						<Link
+							to="/maintenance"
+							className="cursor-pointer text-primary underline-offset-4 hover:underline"
+						>
+							See All
+						</Link>
+					</div>
+					<CardContent className="space-y-4 p-0">
+						<MaintenanceRequestList
+							requests={recentMaintenance}
+							loading={maintenanceLoading}
+							error={maintenanceError}
+							skeletonCount={5}
+						/>
+					</CardContent>
+				</Card>
+			</div>
+			<div className="w-full shrink-0 lg:w-[320px]">
+				<WeatherWidget />
+			</div>
+		</div>
+	);
+}