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

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/SkeletonPrimitives.tsx

@@ -0,0 +1,36 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function SkeletonField({
+	labelWidth = "w-20",
+	height = "h-9",
+}: {
+	labelWidth?: string;
+	height?: string;
+}) {
+	return (
+		<div className="space-y-2">
+			<Skeleton className={`h-3 ${labelWidth}`} />
+			<Skeleton className={`${height} w-full`} />
+		</div>
+	);
+}
+
+export function SkeletonListRows({ count = 3 }: { count?: number }) {
+	return (
+		<>
+			{Array.from({ length: count }, (_, i) => (
+				<div key={i} className="flex items-center rounded-lg bg-gray-50 p-4">
+					<Skeleton className="h-12 w-12 shrink-0 rounded-lg" />
+					<div className="ml-4 min-w-0 grow space-y-1">
+						<div className="flex items-center gap-2">
+							<Skeleton className="h-5 w-24" />
+							<Skeleton className="h-4 w-20" />
+						</div>
+						<Skeleton className="h-5 w-3/5" />
+					</div>
+					<Skeleton className="ml-4 h-7 w-24 shrink-0 rounded-full" />
+				</div>
+			))}
+		</>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/alerts/status-alert.tsx

@@ -0,0 +1,49 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { AlertCircleIcon, CheckCircle2Icon } from 'lucide-react';
+import { Alert, AlertDescription } from '../../components/ui/alert';
+import { useId } from 'react';
+
+const statusAlertVariants = cva('', {
+  variants: {
+    variant: {
+      error: '',
+      success: '',
+    },
+  },
+  defaultVariants: {
+    variant: 'error',
+  },
+});
+
+interface StatusAlertProps extends VariantProps<typeof statusAlertVariants> {
+  children?: React.ReactNode;
+  /** Alert variant type. @default "error" */
+  variant?: 'error' | 'success';
+}
+
+/**
+ * Status alert component for displaying error or success messages.
+ * Returns null if no children are provided.
+ */
+export function StatusAlert({ children, variant = 'error' }: StatusAlertProps) {
+  const descriptionId = useId();
+  if (!children) return null;
+
+  const isError = variant === 'error';
+
+  return (
+    <Alert
+      variant={isError ? 'destructive' : 'default'}
+      className={statusAlertVariants({ variant })}
+      aria-describedby={descriptionId}
+      role={isError ? 'alert' : 'status'}
+    >
+      {isError ? (
+        <AlertCircleIcon aria-hidden="true" />
+      ) : (
+        <CheckCircle2Icon aria-hidden="true" />
+      )}
+      <AlertDescription id={descriptionId}>{children}</AlertDescription>
+    </Alert>
+  );
+}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/dashboard/WeatherWidget.tsx

@@ -0,0 +1,235 @@
+import { useState } from "react";
+import { Card } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useWeather, type WeatherData, type WeatherHour } from "@/hooks/useWeather";
+import {
+	Sun,
+	Cloud,
+	CloudSun,
+	CloudRain,
+	CloudSnow,
+	CloudLightning,
+	CloudFog,
+	CloudDrizzle,
+	Wind,
+	Droplets,
+	type LucideIcon,
+} from "lucide-react";
+
+type ForecastTab = "today" | "tomorrow" | "next3days";
+
+const FORECAST_TABS: { key: ForecastTab; label: string }[] = [
+	{ key: "today", label: "Today" },
+	{ key: "tomorrow", label: "Tomorrow" },
+	{ key: "next3days", label: "Next 3 Days" },
+];
+
+const HOURLY_KEY: Record<
+	ForecastTab,
+	keyof Pick<WeatherData, "todayHourly" | "tomorrowHourly" | "next3DaysHourly">
+> = {
+	today: "todayHourly",
+	tomorrow: "tomorrowHourly",
+	next3days: "next3DaysHourly",
+};
+
+function getWeatherIcon(code: number, className = "h-16 w-16 text-gray-400") {
+	const props = { className, "aria-hidden": true as const };
+	if (code <= 1) return <Sun {...props} />;
+	if (code === 2) return <CloudSun {...props} />;
+	if (code === 3) return <Cloud {...props} />;
+	if (code === 45 || code === 48) return <CloudFog {...props} />;
+	if (code >= 51 && code <= 55) return <CloudDrizzle {...props} />;
+	if (code >= 61 && code <= 65) return <CloudRain {...props} />;
+	if (code >= 71 && code <= 77) return <CloudSnow {...props} />;
+	if (code >= 80 && code <= 82) return <CloudRain {...props} />;
+	if (code >= 85 && code <= 86) return <CloudSnow {...props} />;
+	if (code >= 95) return <CloudLightning {...props} />;
+	return <Sun {...props} />;
+}
+
+const Divider = () => <div className="my-5 border-t border-gray-200" />;
+
+function WeatherSkeleton() {
+	return (
+		<div className="mt-5" aria-hidden="true">
+			{/* CurrentConditions: date row + city */}
+			<div className="flex items-baseline justify-between">
+				<Skeleton className="h-5 w-32" />
+				<Skeleton className="h-5 w-24" />
+			</div>
+
+			{/* CurrentConditions: description + temperature + icon */}
+			<div className="mt-2 flex items-center justify-between">
+				<div>
+					<Skeleton className="h-5 w-24" />
+					<Skeleton className="mt-1 h-[72px] w-36" />
+				</div>
+				<Skeleton className="h-20 w-20 rounded-full" />
+			</div>
+
+			{/* Divider */}
+			<div className="my-5 border-t border-gray-200" />
+
+			{/* CurrentConditions: stats grid */}
+			<div className="grid grid-cols-3 gap-2 text-center">
+				{[0, 1, 2].map((i) => (
+					<div key={i} className="flex flex-col items-center gap-1">
+						<Skeleton className="h-5 w-5 rounded-full" />
+						<Skeleton className="h-5 w-16" />
+						<Skeleton className="h-4 w-12" />
+					</div>
+				))}
+			</div>
+
+			{/* Divider */}
+			<div className="my-5 border-t border-gray-200" />
+
+			{/* ForecastTabs */}
+			<div className="flex gap-6">
+				<Skeleton className="h-5 w-12" />
+				<Skeleton className="h-5 w-16" />
+				<Skeleton className="h-5 w-20" />
+			</div>
+
+			{/* HourlyForecast */}
+			<div className="mt-4 flex gap-3 overflow-x-auto pb-1">
+				{[0, 1, 2, 3].map((i) => (
+					<div
+						key={i}
+						className="flex min-w-[70px] flex-col items-center gap-1.5 rounded-2xl border border-gray-100 bg-gray-50/80 px-3 py-3"
+					>
+						<Skeleton className="h-4 w-10" />
+						<Skeleton className="h-5 w-5 rounded-full" />
+						<Skeleton className="h-5 w-8" />
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}
+
+function StatItem({
+	icon: Icon,
+	value,
+	label,
+}: {
+	icon: LucideIcon;
+	value: string;
+	label: string;
+}) {
+	return (
+		<div className="flex flex-col items-center gap-1">
+			<Icon className="h-5 w-5 text-gray-400" />
+			<p className="text-base font-semibold text-primary">{value}</p>
+			<p className="text-xs text-muted-foreground">{label}</p>
+		</div>
+	);
+}
+
+function CurrentConditions({ weather }: { weather: WeatherData }) {
+	const { current, city, timezone } = weather;
+	return (
+		<>
+			<div className="flex items-baseline justify-between">
+				<p className="text-sm text-muted-foreground">
+					{new Date().toLocaleDateString(navigator.language, {
+						day: "numeric",
+						month: "long",
+						year: "numeric",
+						timeZone: timezone,
+					})}
+				</p>
+				{city && <p className="text-sm font-medium text-muted-foreground">{city}</p>}
+			</div>
+
+			<div className="mt-2 flex items-center justify-between">
+				<div>
+					<p className="text-base text-foreground">{current.description}</p>
+					<p className="text-6xl font-bold tracking-tight text-foreground">
+						{current.temp}
+						<span className="align-top text-3xl">{current.tempUnit}</span>
+					</p>
+				</div>
+				{getWeatherIcon(current.weatherCode, "h-20 w-20 text-gray-400")}
+			</div>
+
+			<Divider />
+
+			<div className="grid grid-cols-3 gap-2 text-center">
+				<StatItem icon={Wind} value={`${current.windSpeed} ${current.windUnit}`} label="Wind" />
+				<StatItem icon={Droplets} value={`${current.humidity}%`} label="Humidity" />
+				<StatItem icon={CloudRain} value={`${current.precipitationProbability}%`} label="Rain" />
+			</div>
+		</>
+	);
+}
+
+function ForecastTabs({
+	activeTab,
+	onTabChange,
+}: {
+	activeTab: ForecastTab;
+	onTabChange: (tab: ForecastTab) => void;
+}) {
+	return (
+		<div className="flex gap-6">
+			{FORECAST_TABS.map(({ key, label }) => (
+				<button key={key} onClick={() => onTabChange(key)} className="flex flex-col items-center">
+					<span
+						className={`text-sm font-semibold ${activeTab === key ? "text-foreground" : "text-muted-foreground"}`}
+					>
+						{label}
+					</span>
+					{activeTab === key && <span className="mt-1 h-1.5 w-1.5 rounded-full bg-foreground" />}
+				</button>
+			))}
+		</div>
+	);
+}
+
+function HourlyForecast({ hours }: { hours: WeatherHour[] }) {
+	if (hours.length === 0) return null;
+	return (
+		<div className="mt-4 flex gap-3 overflow-x-auto pb-1">
+			{hours.map((h) => (
+				<div
+					key={h.time}
+					className="flex min-w-[70px] flex-col items-center gap-1.5 rounded-2xl border border-gray-100 bg-gray-50/80 px-3 py-3"
+				>
+					<p className="whitespace-nowrap text-xs text-muted-foreground">{h.time}</p>
+					{getWeatherIcon(h.weatherCode, "h-5 w-5 text-gray-500")}
+					<p className="text-base font-semibold text-foreground">{h.temp}°</p>
+				</div>
+			))}
+		</div>
+	);
+}
+
+export function WeatherWidget() {
+	const { data: weather, loading, error } = useWeather();
+	const [activeTab, setActiveTab] = useState<ForecastTab>("today");
+
+	return (
+		<Card className="rounded-2xl border-0 p-6 shadow-md">
+			<h2 className="text-lg font-semibold text-primary">Weather</h2>
+
+			{loading && <WeatherSkeleton />}
+
+			{error && (
+				<p className="mt-4 text-sm text-destructive" role="alert">
+					{error}
+				</p>
+			)}
+
+			{!loading && !error && weather && (
+				<div className="mt-5">
+					<CurrentConditions weather={weather} />
+					<Divider />
+					<ForecastTabs activeTab={activeTab} onTabChange={setActiveTab} />
+					<HourlyForecast hours={weather[HOURLY_KEY[activeTab]]} />
+				</div>
+			)}
+		</Card>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/layout/TopBar.tsx

@@ -0,0 +1,133 @@
+import { useState } from "react";
+import { ChevronDown, Menu, UserPen, LogOut, User, Loader2 } from "lucide-react";
+import { Link } from "react-router";
+import { useAuth } from "@/features/authentication/context/AuthContext";
+import { ROUTES } from "@/features/authentication/authenticationConfig";
+import zenLogo from "@/assets/icons/zen-logo.svg";
+
+export interface TopBarProps {
+	onMenuClick?: () => void;
+}
+
+export function TopBar({ onMenuClick }: TopBarProps) {
+	const { user, isAuthenticated, loading } = useAuth();
+
+	return (
+		<header
+			className="flex h-16 items-center justify-between bg-teal-700 px-6 text-white"
+			role="banner"
+		>
+			<div className="flex items-center gap-4">
+				<button
+					type="button"
+					onClick={onMenuClick}
+					className="rounded-md p-2 transition-colors hover:bg-teal-600 md:hidden"
+					aria-label="Toggle menu"
+				>
+					<Menu className="size-6" aria-hidden />
+				</button>
+				<Logo />
+			</div>
+
+			{loading ? (
+				<Loader2 className="size-5 animate-spin" aria-label="Loading" />
+			) : isAuthenticated ? (
+				<AuthenticatedControls userName={user?.name ?? "User"} />
+			) : (
+				<LoginLink />
+			)}
+		</header>
+	);
+}
+
+function Logo() {
+	return (
+		<div className="flex items-center gap-2">
+			<img src={zenLogo} alt="Zenlease Logo" className="size-8" />
+			<span className="text-xl tracking-wide">
+				<span className="font-light">ZEN</span>
+				<span className="font-semibold">LEASE</span>
+			</span>
+		</div>
+	);
+}
+
+function LoginLink() {
+	return (
+		<Link
+			to={ROUTES.LOGIN.PATH}
+			className="flex items-center gap-2 rounded-md bg-white px-4 py-2 font-medium text-teal-700 transition-colors hover:bg-teal-50"
+		>
+			<User className="size-4" aria-hidden />
+			Sign Up / Sign In
+		</Link>
+	);
+}
+
+function AuthenticatedControls({ userName }: { userName: string }) {
+	return (
+		<div className="flex items-center gap-4">
+			<UserMenu userName={userName} />
+		</div>
+	);
+}
+
+function UserMenu({ userName }: { userName: string }) {
+	const { logout } = useAuth();
+	const [open, setOpen] = useState(false);
+
+	return (
+		<div className="relative">
+			<button
+				type="button"
+				onClick={() => setOpen((prev) => !prev)}
+				className="flex items-center gap-2 rounded-md px-3 py-2 transition-colors hover:bg-teal-600"
+				aria-label="User menu"
+				aria-expanded={open}
+				aria-haspopup="true"
+			>
+				<div
+					className="flex size-8 items-center justify-center rounded-full bg-teal-300 font-semibold text-teal-900"
+					aria-hidden
+				>
+					{userName.charAt(0).toUpperCase()}
+				</div>
+				<span className="hidden font-medium md:inline">{userName.toUpperCase()}</span>
+				<ChevronDown className="hidden size-4 md:inline" aria-hidden />
+			</button>
+
+			{open && (
+				<>
+					<div className="fixed inset-0 z-40" onClick={() => setOpen(false)} aria-hidden />
+					<div
+						className="absolute right-0 top-full z-50 mt-2 w-48 overflow-hidden rounded-lg bg-white py-1 shadow-xl"
+						role="menu"
+					>
+						<Link
+							to={ROUTES.PROFILE.PATH}
+							onClick={() => setOpen(false)}
+							className="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 transition-colors hover:bg-gray-100"
+							role="menuitem"
+						>
+							<UserPen className="size-4" aria-hidden />
+							Edit Profile
+						</Link>
+						<div className="mx-3 border-t border-gray-200" />
+						<button
+							type="button"
+							onClick={() => {
+								setOpen(false);
+								logout();
+							}}
+							className="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-gray-700 transition-colors hover:bg-gray-100"
+							role="menuitem"
+						>
+							<LogOut className="size-4" aria-hidden />
+							Log Out
+						</button>
+					</div>
+				</>
+			)}
+		</div>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/layout/VerticalNav.tsx

@@ -0,0 +1,97 @@
+import { Link, useLocation } from "react-router";
+import { Home, Search, BarChart3, Wrench, Phone, type LucideIcon } from "lucide-react";
+import { useAuth } from "@/features/authentication/context/AuthContext";
+import { useTenantAccess } from "@/hooks/useTenantAccess";
+import { useMemo } from "react";
+
+interface NavItem {
+	path: string;
+	icon: LucideIcon;
+	label: string;
+	authRequired?: boolean;
+}
+
+const navItems: NavItem[] = [
+	{ path: "/", icon: Home, label: "Home" },
+	{ path: "/dashboard", icon: BarChart3, label: "Dashboard", authRequired: true },
+	{ path: "/properties", icon: Search, label: "Property Search" },
+	{ path: "/maintenance", icon: Wrench, label: "Maintenance Requests", authRequired: true },
+	{ path: "/contact", icon: Phone, label: "Contact Us" },
+];
+
+interface NavMenuProps {
+	isOpen?: boolean;
+	onClose?: () => void;
+}
+
+export function NavMenu({ isOpen = false, onClose }: NavMenuProps) {
+	const location = useLocation();
+	const { isAuthenticated, user } = useAuth();
+	const { hasTenantRecord } = useTenantAccess(user?.id);
+
+	const visibleItems = useMemo(
+		() =>
+			navItems.filter((item) => {
+				if (!item.authRequired) return true;
+				if (!isAuthenticated) return false;
+				if (item.path === "/dashboard" || item.path === "/maintenance") {
+					return hasTenantRecord;
+				}
+				return true;
+			}),
+		[hasTenantRecord, isAuthenticated],
+	);
+
+	const isActive = (path: string) => {
+		if (path === "/") return location.pathname === "/";
+		return location.pathname.startsWith(path);
+	};
+
+	const navContent = (handleClick?: () => void) =>
+		visibleItems.map((item) => {
+			const Icon = item.icon;
+			const active = isActive(item.path);
+			return (
+				<Link
+					key={item.path}
+					to={item.path}
+					onClick={handleClick}
+					className={`flex flex-col items-center justify-center gap-2 px-2 py-4 transition-colors ${
+						active
+							? "border-l-4 border-teal-700 bg-teal-100 text-teal-700"
+							: "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+					}`}
+					title={item.label}
+					aria-label={item.label}
+				>
+					<Icon className="size-6 shrink-0" aria-hidden />
+					<span className="text-center text-xs font-medium leading-tight">{item.label}</span>
+				</Link>
+			);
+		});
+
+	return (
+		<>
+			{/* Desktop sidebar */}
+			<nav
+				className="hidden md:flex w-24 flex-col border-r border-gray-200 bg-white py-8"
+				aria-label="Main navigation"
+			>
+				{navContent()}
+			</nav>
+
+			{/* Mobile overlay */}
+			{isOpen && (
+				<>
+					<div className="fixed inset-0 z-40 bg-black/50" onClick={onClose} aria-hidden />
+					<nav
+						className="fixed left-0 top-0 bottom-0 z-50 flex w-24 flex-col border-r border-gray-200 bg-white py-8"
+						aria-label="Main navigation"
+					>
+						{navContent(onClose)}
+					</nav>
+				</>
+			)}
+		</>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/layouts/card-layout.tsx

@@ -0,0 +1,29 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '../../components/ui/card';
+
+interface CardLayoutProps {
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+}
+
+/**
+ * Card layout component for authentication pages.
+ * Provides CardHeader with title and optional description, and CardContent.
+ */
+export function CardLayout({ title, description, children }: CardLayoutProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-2xl">{title}</CardTitle>
+        {description && <CardDescription>{description}</CardDescription>}
+      </CardHeader>
+      <CardContent>{children}</CardContent>
+    </Card>
+  );
+}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/maintenanceRequests/MaintenanceRequestIcon.tsx

@@ -0,0 +1,46 @@
+/**
+ * Renders a type-specific icon for maintenance requests (same approach as b2e MaintenanceTable).
+ * Uses imported SVG assets; fallback to 🔧 when type has no icon.
+ */
+import PlumbingIcon from "@/assets/icons/plumbing.svg";
+import HVACIcon from "@/assets/icons/hvac.svg";
+import ElectricalIcon from "@/assets/icons/electrical.svg";
+import AppliancesIcon from "@/assets/icons/appliances.svg";
+import PestIcon from "@/assets/icons/pest.svg";
+
+const issueIcons: Record<string, string> = {
+	Plumbing: PlumbingIcon,
+	HVAC: HVACIcon,
+	Electrical: ElectricalIcon,
+	Appliance: AppliancesIcon,
+	Pest: PestIcon,
+};
+
+const issueIconColors: Record<string, string> = {
+	Plumbing: "bg-teal-100",
+	HVAC: "bg-teal-100",
+	Electrical: "bg-teal-100",
+	Appliance: "bg-teal-100",
+	Pest: "bg-teal-100",
+};
+
+export function MaintenanceRequestIcon({ type }: { type: string | null }) {
+	const issueType = type?.trim() ?? "";
+	const iconSrc = issueIcons[issueType];
+	const bgClass = issueIconColors[issueType] ?? "bg-teal-100";
+
+	return (
+		<div
+			className={`flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-lg ${bgClass}`}
+			aria-hidden
+		>
+			{iconSrc ? (
+				<img src={iconSrc} alt={issueType || "Request"} className="h-6 w-6" />
+			) : (
+				<span className="text-2xl" aria-hidden>
+					🔧
+				</span>
+			)}
+		</div>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/maintenanceRequests/MaintenanceRequestList.tsx

@@ -0,0 +1,52 @@
+import { useState } from "react";
+import type { MaintenanceRequestNode } from "@/api/maintenanceRequests/maintenanceRequestApi";
+import MaintenanceRequestListItem from "@/components/maintenanceRequests/MaintenanceRequestListItem";
+import MaintenanceSummaryDetailsModal from "@/components/maintenanceRequests/MaintenanceSummaryDetailsModal";
+import { SkeletonListRows } from "@/components/SkeletonPrimitives";
+
+interface MaintenanceRequestListProps {
+	requests: MaintenanceRequestNode[];
+	loading: boolean;
+	error: string | null;
+	emptyMessage?: string;
+	skeletonCount?: number;
+}
+
+export default function MaintenanceRequestList({
+	requests,
+	loading,
+	error,
+	emptyMessage = "No maintenance requests",
+	skeletonCount = 3,
+}: MaintenanceRequestListProps) {
+	const [selectedRequest, setSelectedRequest] = useState<MaintenanceRequestNode | null>(null);
+
+	return (
+		<>
+			{selectedRequest && (
+				<MaintenanceSummaryDetailsModal
+					request={selectedRequest}
+					onClose={() => setSelectedRequest(null)}
+				/>
+			)}
+			{loading && <SkeletonListRows count={skeletonCount} />}
+			{error && (
+				<p className="py-4 text-sm text-destructive" role="alert">
+					{error}
+				</p>
+			)}
+			{!loading && !error && requests.length === 0 && (
+				<div className="py-8 text-center text-gray-500">{emptyMessage}</div>
+			)}
+			{!loading &&
+				!error &&
+				requests.map((request) => (
+					<MaintenanceRequestListItem
+						key={request.Id}
+						request={request}
+						onClick={setSelectedRequest}
+					/>
+				))}
+		</>
+	);
+}