@salesforce/webapp-template-app-react-sample-b2x-experimental 1.36.3

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

@@ -0,0 +1,101 @@
+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, CardHeader, CardTitle, CardContent } from "../components/ui/card";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "../components/ui/tabs";
+
+export default function Application() {
+	return (
+		<div className="mx-auto max-w-[800px]">
+			<Card className="mb-6 flex gap-4 p-6">
+				<div className="size-[200px] shrink-0 rounded-xl bg-muted" />
+				<div className="min-w-0 flex-1">
+					<h2 className="mb-1 text-lg font-semibold text-primary">Verdana Apartments</h2>
+					<p className="text-sm text-muted-foreground">301 Bryant St, San Francisco, CA 94107</p>
+					<p className="mt-2 text-sm text-muted-foreground">
+						I have read and agree to the Terms & Conditions.
+					</p>
+				</div>
+				<div className="flex gap-2">
+					<Button variant="outline" size="sm">
+						Cancel Application
+					</Button>
+					<Button size="sm">Save for Later</Button>
+				</div>
+			</Card>
+			<Tabs defaultValue="applicants" className="mb-6">
+				<TabsList className="mb-4 flex h-auto flex-wrap gap-4 border-b border-border bg-transparent p-0">
+					<TabsTrigger
+						value="applicants"
+						className="rounded-none border-b-2 border-primary bg-transparent px-0 pb-1 data-[state=active]:shadow-none"
+					>
+						APPLICANTS & OCCUPANTS
+					</TabsTrigger>
+					<TabsTrigger
+						value="details"
+						className="rounded-none border-b-0 bg-transparent px-0 pb-1 text-muted-foreground data-[state=active]:shadow-none"
+					>
+						YOUR DETAILS
+					</TabsTrigger>
+					<TabsTrigger
+						value="screening"
+						className="rounded-none border-b-0 bg-transparent px-0 pb-1 text-muted-foreground data-[state=active]:shadow-none"
+					>
+						SCREENING
+					</TabsTrigger>
+					<TabsTrigger
+						value="submit"
+						className="rounded-none border-b-0 bg-transparent px-0 pb-1 text-muted-foreground data-[state=active]:shadow-none"
+					>
+						FINISH & SUBMIT
+					</TabsTrigger>
+				</TabsList>
+				<TabsContent value="applicants" className="mt-0" />
+			</Tabs>
+			<Card>
+				<CardContent className="pt-6">
+					<h3 className="mb-4 text-xs font-semibold uppercase tracking-wider text-foreground">
+						YOUR INFO
+					</h3>
+					<div className="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
+						<div className="space-y-2">
+							<Label>First Name *</Label>
+							<Input type="text" defaultValue="Sarah" />
+						</div>
+						<div className="space-y-2">
+							<Label>Last Name</Label>
+							<Input type="text" />
+						</div>
+					</div>
+					<div className="mb-4 space-y-2">
+						<Label>Email Address</Label>
+						<Input type="email" />
+					</div>
+					<div className="mb-4 space-y-2">
+						<Label>Phone Number</Label>
+						<Input type="tel" />
+					</div>
+					<h3 className="mb-4 mt-6 text-xs font-semibold uppercase tracking-wider text-foreground">
+						MOVE IN
+					</h3>
+					<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+						<div className="space-y-2">
+							<Label>MOVE IN DATE</Label>
+							<Input type="text" placeholder="Select Date" />
+						</div>
+						<div className="space-y-2">
+							<Label>PREFERRED TERM</Label>
+							<select className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs outline-none focus-visible:ring-2 focus-visible:ring-ring">
+								<option>Select One</option>
+								<option>1 month</option>
+								<option>6 months</option>
+								<option>12 months</option>
+							</select>
+						</div>
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}

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

@@ -0,0 +1,101 @@
+import { Button } from "../components/ui/button";
+import {
+	Card,
+	CardHeader,
+	CardTitle,
+	CardContent,
+	CardFooter,
+} from "../components/ui/card";
+import { Link } from "react-router";
+
+export default function Dashboard() {
+	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>
+					<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>
+					</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>
+					</CardContent>
+					<CardFooter className="justify-end pt-2">
+						<Link to="/maintenance" className="text-sm font-medium text-primary hover:underline">
+							See All
+						</Link>
+					</CardFooter>
+				</Card>
+			</div>
+			<div>
+				<Card>
+					<CardHeader>
+						<CardTitle className="text-primary">Weather</CardTitle>
+						<p className="text-sm text-muted-foreground">26 March 2026</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>
+								</div>
+							))}
+						</div>
+					</CardContent>
+				</Card>
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,29 @@
+import { Card, CardHeader, CardTitle, CardContent } from "../components/ui/card";
+
+export default function HelpCenter() {
+	return (
+		<div className="mx-auto max-w-[800px]">
+			<h1 className="mb-6 text-2xl font-semibold text-primary">Help Center</h1>
+			<Card className="mb-4">
+				<CardHeader>
+					<CardTitle>Frequently Asked Questions</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<p className="m-0 leading-relaxed text-foreground">
+						Placeholder content for help and FAQs.
+					</p>
+				</CardContent>
+			</Card>
+			<Card>
+				<CardHeader>
+					<CardTitle>Contact Support</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<p className="m-0 leading-relaxed text-foreground">
+						Reach out to the property management team for assistance.
+					</p>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}

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

@@ -0,0 +1,30 @@
+import { Button } from "../components/ui/button";
+import { Input } from "../components/ui/input";
+
+export default function Home() {
+	return (
+		<div className="mx-auto max-w-[1100px]">
+			<div className="mb-6 rounded-2xl bg-primary px-8 py-10 text-primary-foreground shadow-md">
+				<p className="mb-2 text-xs uppercase tracking-widest opacity-90">THE ZEN WAY TO LEASE</p>
+				<h1 className="mb-2 text-3xl font-bold leading-tight">Your Dream Place Starts Here</h1>
+				<p className="mb-6 text-[0.95rem] opacity-90">
+					Luxury Properties, Managed With Uncompromising Care
+				</p>
+				<Button size="lg" className="font-semibold">
+					Browse All Properties
+				</Button>
+			</div>
+			<div className="flex flex-wrap items-center gap-3 rounded-xl bg-primary/10 p-5">
+				<Input
+					type="text"
+					placeholder="Search by address, city, location, or zipcode"
+					aria-label="Search"
+					className="min-w-[200px] flex-1 flex-[1_1_240px]"
+				/>
+				<Button variant="secondary" className="font-semibold">
+					Find Home
+				</Button>
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,132 @@
+import { Button } from "../components/ui/button";
+import { Input } from "../components/ui/input";
+import { Label } from "../components/ui/label";
+import { Card, CardHeader, CardTitle, CardContent } from "../components/ui/card";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "../components/ui/table";
+import { Calendar, Upload, ArrowRight } from "lucide-react";
+
+export default function Maintenance() {
+	return (
+		<div className="mx-auto max-w-[900px]">
+			<Card className="mb-6">
+				<CardHeader>
+					<CardTitle className="text-2xl text-primary">Maintenance</CardTitle>
+				</CardHeader>
+				<CardContent className="space-y-4">
+					<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+						<div className="space-y-2">
+							<Label>Date Reported</Label>
+							<div className="relative">
+								<Input
+									type="text"
+									readOnly
+									value="Today"
+									className="pr-10"
+									aria-label="Date reported"
+								/>
+								<span className="absolute right-3 top-1/2 -translate-y-1/2">
+									<Calendar className="size-[18px] text-muted-foreground" />
+								</span>
+							</div>
+						</div>
+						<div className="space-y-2">
+							<Label>Urgency</Label>
+							<select
+								className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-ring"
+								aria-label="Urgency"
+								defaultValue="urgent"
+							>
+								<option value="urgent">Urgent</option>
+								<option value="normal">Normal</option>
+								<option value="low">Low</option>
+							</select>
+						</div>
+					</div>
+					<div className="space-y-2">
+						<Label>Room</Label>
+						<select
+							className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-ring"
+							aria-label="Room"
+							defaultValue="living-room"
+						>
+							<option value="living-room">Living Room</option>
+							<option value="bathroom">Bathroom</option>
+							<option value="bedroom">Bedroom</option>
+							<option value="kitchen">Kitchen</option>
+						</select>
+					</div>
+					<div className="space-y-2">
+						<Label>Description</Label>
+						<textarea
+							rows={4}
+							placeholder="Input text"
+							className="min-h-[100px] 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"
+							aria-label="Description"
+						/>
+					</div>
+					<div className="grid grid-cols-2 gap-4">
+						<div />
+						<div className="flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-border bg-muted/30 p-6 text-center">
+							<Upload className="mx-auto mb-2 size-10 text-muted-foreground" />
+							<p className="m-0 text-xs text-muted-foreground">
+								Choose a file or drag & drop for reference here.
+							</p>
+							<p className="mt-1 text-[0.75rem] text-muted-foreground">
+								JPEG, PNG, PDF, and MP4 formats, up to 50MB
+							</p>
+						</div>
+					</div>
+					<div className="flex justify-end">
+						<Button className="gap-2">
+							Submit Request
+							<ArrowRight className="size-[18px]" />
+						</Button>
+					</div>
+				</CardContent>
+			</Card>
+			<Card>
+				<CardContent className="p-0">
+					<div className="overflow-x-auto">
+						<Table>
+							<TableHeader>
+								<TableRow>
+									{["Description", "Work Order", "Type", "Room", "Date", "Status"].map((h) => (
+										<TableHead key={h} className="font-semibold text-primary">
+											{h}
+										</TableHead>
+									))}
+								</TableRow>
+							</TableHeader>
+							<TableBody>
+								<TableRow>
+									<TableCell>
+										<div className="flex items-center gap-2">
+											<div className="size-10 shrink-0 rounded-lg bg-muted" />
+											<span>Shower head leaking</span>
+										</div>
+									</TableCell>
+									<TableCell>#12548796</TableCell>
+									<TableCell>Plumbing</TableCell>
+									<TableCell>Bathroom</TableCell>
+									<TableCell>28 Jan, 12.30 AM</TableCell>
+									<TableCell>
+										<span className="inline-block rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-700">
+											Completed
+										</span>
+									</TableCell>
+								</TableRow>
+							</TableBody>
+						</Table>
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}

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

@@ -0,0 +1,14 @@
+import { Link } from "react-router";
+import { Button } from "../components/ui/button";
+
+export default function NotFound() {
+	return (
+		<div className="mx-auto max-w-[800px] px-6 py-12 text-center">
+			<h1 className="mb-2 text-4xl font-bold text-foreground">404</h1>
+			<p className="mb-8 text-lg text-muted-foreground">Page not found</p>
+			<Button asChild>
+				<Link to="/">Go to Home</Link>
+			</Button>
+		</div>
+	);
+}

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

@@ -0,0 +1,68 @@
+import { useParams, Link } from "react-router";
+import { Button } from "../components/ui/button";
+import { Card, CardHeader, CardContent } from "../components/ui/card";
+
+export default function PropertyDetails() {
+	const { id } = useParams();
+
+	return (
+		<div className="mx-auto max-w-[900px]">
+			<div className="mb-4">
+				<Link to="/properties" className="text-sm text-primary no-underline hover:underline">
+					← Back to listings
+				</Link>
+			</div>
+			<div className="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
+				<div className="h-72 rounded-xl bg-muted" />
+				<div className="flex flex-col gap-2">
+					{[1, 2, 3, 4, 5].map((i) => (
+						<div key={i} className="h-12 rounded-lg bg-muted" />
+					))}
+				</div>
+			</div>
+			<div className="mb-4 flex flex-wrap gap-2">
+				<Button size="sm">23 Photos</Button>
+				<Button size="sm" variant="outline">
+					8 Virtual Tours
+				</Button>
+				<Button size="sm" variant="outline">
+					Property Map
+				</Button>
+			</div>
+			<Card className="mb-4">
+				<CardContent className="pt-6">
+					<p className="mb-2 text-sm text-primary">
+						California / San Francisco County / San Francisco / South Beach
+					</p>
+					<p className="mb-1 text-2xl font-bold text-foreground">$4,600 / Month</p>
+					<p className="mb-4 text-sm text-muted-foreground">
+						301 Bryant St. Unit 5B, San Francisco, CA 94107
+					</p>
+					<div className="flex flex-wrap gap-3">
+						{["2 Bedroom", "2 Baths", "1040 sq ft", "Now Available"].map((s) => (
+							<span key={s} className="rounded-lg bg-primary/10 px-3 py-1.5 text-sm text-primary">
+								{s}
+							</span>
+						))}
+					</div>
+				</CardContent>
+			</Card>
+			<Card>
+				<CardHeader>
+					<CardTitle className="text-base">Contact Property</CardTitle>
+				</CardHeader>
+				<CardContent className="flex flex-col gap-2">
+					<Button variant="outline" className="justify-start">
+						Request Tour
+					</Button>
+					<Button variant="outline" className="justify-start">
+						Send Message
+					</Button>
+					<Button asChild variant="secondary" className="justify-center">
+						<Link to="/application?property=1">Fill out an application</Link>
+					</Button>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}

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

@@ -0,0 +1,84 @@
+import { Link } from "react-router";
+import { Button } from "../components/ui/button";
+import { Input } from "../components/ui/input";
+import { Card, CardContent } from "../components/ui/card";
+
+const listings = [
+	{
+		id: "1",
+		name: "Verdana Apartments",
+		address: "301 Bryant St, San Francisco, CA 94107",
+		price: "$4,600+",
+		beds: "2 Beds",
+		phone: "(650) 440-1111",
+	},
+	{
+		id: "2",
+		name: "South Beach Lofts",
+		address: "250 Brannan St, San Francisco, CA 94107",
+		price: "$5,379+",
+		beds: "2 Beds",
+		phone: "(650) 555-0123",
+	},
+];
+
+export default function PropertyListings() {
+	return (
+		<div className="grid min-h-[500px] grid-cols-1 gap-6 lg:grid-cols-[320px_1fr]">
+			<div className="min-h-[400px] rounded-xl bg-muted" aria-label="Map placeholder" />
+			<div>
+				<div className="mb-4 flex flex-wrap gap-3">
+					<Input
+						type="text"
+						defaultValue="San Francisco, CA"
+						className="min-w-[200px] flex-1 flex-[1_1_200px]"
+					/>
+					<Button variant="outline">Price</Button>
+					<Button variant="outline">Beds/Bath</Button>
+					<Button>All Filters</Button>
+				</div>
+				<h2 className="mb-1 text-lg font-semibold text-foreground">
+					2 Bedroom Apartments for Rent in San Francisco CA
+				</h2>
+				<p className="mb-4 text-sm text-muted-foreground">1,181 Rentals Available</p>
+				<div className="space-y-4">
+					{listings.map((p) => (
+						<Card key={p.name}>
+							<CardContent className="flex gap-4 p-4">
+								<Link
+									to={`/property/${p.id}`}
+									className="relative block size-[200px] shrink-0 rounded-xl bg-muted"
+								>
+									<span className="absolute left-2 top-2 rounded-md bg-primary px-2 py-1 text-xs text-primary-foreground">
+										Virtual Tours
+									</span>
+								</Link>
+								<div className="min-w-0 flex-1">
+									<h3 className="mb-1 text-base font-semibold">
+										<Link
+											to={`/property/${p.id}`}
+											className="text-primary no-underline hover:underline"
+										>
+											{p.name}
+										</Link>
+									</h3>
+									<p className="mb-2 text-sm text-muted-foreground">{p.address}</p>
+									<p className="mb-1 text-sm text-foreground">
+										{p.price} {p.beds}
+									</p>
+									<p className="mb-2 text-sm text-muted-foreground">
+										In Unit Washer & Dryer, Pets Allowed, Fitness Center
+									</p>
+									<p className="mb-2 text-sm text-primary">{p.phone}</p>
+									<Button asChild size="sm">
+										<Link to={`/property/${p.id}`}>Email Property</Link>
+									</Button>
+								</div>
+							</CardContent>
+						</Card>
+					))}
+				</div>
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,62 @@
+import type { RouteObject } from 'react-router';
+import AppLayout from './appLayout';
+import Home from '@/pages/Home';
+import About from './pages/About';
+import NotFound from '@/pages/NotFound';
+import Dashboard from "@/pages/Dashboard";
+import Maintenance from "@/pages/Maintenance";
+import PropertyListings from "@/pages/PropertyListings";
+import PropertyDetails from "@/pages/PropertyDetails";
+import Application from "@/pages/Application";
+import HelpCenter from "@/pages/HelpCenter";
+
+export const routes: RouteObject[] = [
+  {
+    path: "/",
+    element: <AppLayout />,
+    children: [
+      {
+        index: true,
+        element: <Home />,
+        handle: { showInNavigation: true, label: "Home" }
+      },
+      {
+        path: 'about',
+        element: <About />,
+        handle: { showInNavigation: true, label: 'About' }
+      },
+      {
+        path: "*",
+        element: <NotFound />
+      },
+      {
+        path: "dashboard",
+        element: <Dashboard />,
+        handle: { showInNavigation: true, label: "Dashboard" }
+      },
+      {
+        path: "properties",
+        element: <PropertyListings />,
+        handle: { showInNavigation: true, label: "Property Search" }
+      },
+      {
+        path: "property/:id",
+        element: <PropertyDetails />
+      },
+      {
+        path: "maintenance",
+        element: <Maintenance />,
+        handle: { showInNavigation: true, label: "Maintenance" }
+      },
+      {
+        path: "application",
+        element: <Application />
+      },
+      {
+        path: "help",
+        element: <HelpCenter />,
+        handle: { showInNavigation: true, label: "Help Center" }
+      }
+    ]
+  }
+];