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

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/components/properties/PropertyDetailsModal.tsx

@@ -0,0 +1,263 @@
+import React from "react";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogFooter,
+} from "../ui/dialog";
+import type { PropertySearchNode } from "../../api/properties/propertySearchService";
+
+interface PropertyDetailsModalProps {
+	property: PropertySearchNode;
+	isOpen: boolean;
+	onClose: () => void;
+}
+
+export const PropertyDetailsModal: React.FC<PropertyDetailsModalProps> = ({
+	property,
+	isOpen,
+	onClose,
+}) => {
+	const name = property.Name?.value || "Unnamed Property";
+	const address = property.Address__c?.value || "Address not available";
+	const heroImage = property.Hero_Image__c?.value;
+	const description = property.Description__c?.value;
+	const propertyType = property.Type__c?.value?.toLowerCase() || "apartment";
+	const status = property.Status__c?.value?.toLowerCase() || "available";
+	const monthlyRent = property.Monthly_Rent__c?.value || 0;
+	const bedrooms = property.Bedrooms__c?.value;
+	const bathrooms = property.Bathrooms__c?.value;
+	const sqFt = property.Sq_Ft__c?.value;
+	const yearBuilt = property.Year_Built__c?.value;
+	const deposit = property.Deposit__c?.value;
+	const leaseTerm = property.Lease_Term__c?.value;
+	const availableDate = property.Available_Date__c?.value;
+	const parking = property.Parking__c?.value;
+	const petFriendly = property.Pet_Friendly__c?.value;
+	const tourUrl = property.Tour_URL__c?.value;
+	const features = property.Features__c?.value ? property.Features__c.value.split(";") : undefined;
+	const utilities = property.Utilities__c?.value
+		? property.Utilities__c.value.split(";")
+		: undefined;
+
+	const formatCurrency = (amount: number) => {
+		return new Intl.NumberFormat("en-US", {
+			style: "currency",
+			currency: "USD",
+			minimumFractionDigits: 0,
+		}).format(amount);
+	};
+
+	const getStatusColor = (s: string) => {
+		switch (s) {
+			case "available":
+				return "bg-green-100 text-green-700";
+			case "rented":
+				return "bg-blue-100 text-blue-700";
+			case "maintenance":
+				return "bg-yellow-100 text-yellow-700";
+			default:
+				return "bg-gray-100 text-gray-700";
+		}
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+			<DialogContent className="sm:max-w-4xl max-h-[90vh] overflow-y-auto">
+				<DialogHeader>
+					<DialogTitle>Property Details</DialogTitle>
+				</DialogHeader>
+
+				<div className="space-y-6">
+					{heroImage && (
+						<div className="w-full h-80 rounded-lg bg-gray-200 overflow-hidden">
+							<img src={heroImage} alt={name} className="w-full h-full object-cover" />
+						</div>
+					)}
+
+					<div>
+						<h3 className="text-2xl font-bold text-gray-900">{name}</h3>
+						<p className="text-base text-gray-600 mt-1">{address}</p>
+					</div>
+
+					<div className="grid grid-cols-3 gap-4">
+						<div>
+							<h4 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+								Type
+							</h4>
+							<p className="text-base text-gray-900 capitalize">{propertyType}</p>
+						</div>
+						<div>
+							<h4 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+								Status
+							</h4>
+							<span
+								className={`inline-flex px-3 py-1 rounded-full text-sm font-medium capitalize ${getStatusColor(status)}`}
+							>
+								{status}
+							</span>
+						</div>
+						<div>
+							<h4 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+								Monthly Rent
+							</h4>
+							<p className="text-xl font-bold text-purple-700">{formatCurrency(monthlyRent)}</p>
+						</div>
+					</div>
+
+					<div>
+						<h4 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">
+							Property Specifications
+						</h4>
+						<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+							{bedrooms != null && (
+								<div className="bg-gray-50 rounded-lg p-4">
+									<p className="text-sm text-gray-600">Bedrooms</p>
+									<p className="text-lg font-semibold text-gray-900">{bedrooms}</p>
+								</div>
+							)}
+							{bathrooms != null && (
+								<div className="bg-gray-50 rounded-lg p-4">
+									<p className="text-sm text-gray-600">Bathrooms</p>
+									<p className="text-lg font-semibold text-gray-900">{bathrooms}</p>
+								</div>
+							)}
+							{sqFt != null && (
+								<div className="bg-gray-50 rounded-lg p-4">
+									<p className="text-sm text-gray-600">Square Feet</p>
+									<p className="text-lg font-semibold text-gray-900">{sqFt.toLocaleString()}</p>
+								</div>
+							)}
+							{yearBuilt != null && (
+								<div className="bg-gray-50 rounded-lg p-4">
+									<p className="text-sm text-gray-600">Year Built</p>
+									<p className="text-lg font-semibold text-gray-900">{yearBuilt}</p>
+								</div>
+							)}
+						</div>
+					</div>
+
+					<div>
+						<h4 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">
+							Lease Information
+						</h4>
+						<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+							{deposit != null && (
+								<div>
+									<p className="text-sm text-gray-600">Security Deposit</p>
+									<p className="text-base font-semibold text-gray-900">{formatCurrency(deposit)}</p>
+								</div>
+							)}
+							{leaseTerm != null && (
+								<div>
+									<p className="text-sm text-gray-600">Lease Term</p>
+									<p className="text-base font-semibold text-gray-900">{leaseTerm} months</p>
+								</div>
+							)}
+							{availableDate && (
+								<div>
+									<p className="text-sm text-gray-600">Available Date</p>
+									<p className="text-base font-semibold text-gray-900">{availableDate}</p>
+								</div>
+							)}
+						</div>
+					</div>
+
+					<div>
+						<h4 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">
+							Amenities
+						</h4>
+						<div className="flex flex-wrap gap-4">
+							{parking != null && (
+								<div className="flex items-center gap-2">
+									<span className="text-lg">🚗</span>
+									<span className="text-sm text-gray-700">{parking} Parking Space(s)</span>
+								</div>
+							)}
+							{petFriendly != null && (
+								<div className="flex items-center gap-2">
+									<span className="text-lg">{petFriendly ? "🐾" : "🚫"}</span>
+									<span className="text-sm text-gray-700">
+										{petFriendly ? "Pet Friendly" : "No Pets"}
+									</span>
+								</div>
+							)}
+						</div>
+					</div>
+
+					{features && features.length > 0 && (
+						<div>
+							<h4 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">
+								Features
+							</h4>
+							<div className="flex flex-wrap gap-2">
+								{features.map((feature, index) => (
+									<span
+										key={index}
+										className="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm font-medium"
+									>
+										{feature}
+									</span>
+								))}
+							</div>
+						</div>
+					)}
+
+					{utilities && utilities.length > 0 && (
+						<div>
+							<h4 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">
+								Utilities Included
+							</h4>
+							<div className="flex flex-wrap gap-2">
+								{utilities.map((utility, index) => (
+									<span
+										key={index}
+										className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-medium"
+									>
+										{utility}
+									</span>
+								))}
+							</div>
+						</div>
+					)}
+
+					{description && (
+						<div>
+							<h4 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+								Description
+							</h4>
+							<p className="text-sm text-gray-700 whitespace-pre-wrap">{description}</p>
+						</div>
+					)}
+
+					{tourUrl && (
+						<div>
+							<h4 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+								Virtual Tour
+							</h4>
+							<a
+								href={tourUrl}
+								target="_blank"
+								rel="noopener noreferrer"
+								className="inline-flex items-center gap-2 text-purple-600 hover:text-purple-700 font-medium"
+							>
+								<span>View Virtual Tour</span>
+								<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										strokeWidth={2}
+										d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+									/>
+								</svg>
+							</a>
+						</div>
+					)}
+				</div>
+
+				<DialogFooter showCloseButton />
+			</DialogContent>
+		</Dialog>
+	);
+};

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/components/shared/ObjectSearchErrorState.tsx

@@ -0,0 +1,45 @@
+export interface ObjectSearchErrorStateProps {
+	message?: string;
+	/** Called when user clicks "Go to home" */
+	onGoHome: () => void;
+	/** Called when user clicks "Retry" */
+	onRetry: () => void;
+}
+
+/**
+ * Shared error state for object-search pages. Shows a friendly message with Go home and Retry actions.
+ * Renders the same layout (header + filters) to avoid layout shift.
+ */
+export function ObjectSearchErrorState({
+	message = "There was an error loading the data. Please try again.",
+	onGoHome,
+	onRetry,
+}: ObjectSearchErrorStateProps) {
+	return (
+		<>
+			<div
+				className="flex flex-col items-center justify-center py-16 px-4 rounded-lg border border-gray-200 bg-gray-50"
+				role="alert"
+				aria-live="assertive"
+			>
+				<p className="text-gray-700 mb-6 text-center">{message}</p>
+				<div className="flex gap-3">
+					<button
+						type="button"
+						onClick={onGoHome}
+						className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50"
+					>
+						Go to home
+					</button>
+					<button
+						type="button"
+						onClick={onRetry}
+						className="px-4 py-2 text-sm font-medium text-white bg-purple-700 rounded-lg hover:bg-purple-800"
+					>
+						Retry
+					</button>
+				</div>
+			</div>
+		</>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/components/shared/UserAvatar.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+interface UserAvatarProps {
+	name: string;
+	imageUrl?: string;
+	size?: "sm" | "md" | "lg";
+}
+
+export const UserAvatar: React.FC<UserAvatarProps> = ({ name, imageUrl, size = "md" }) => {
+	const sizeClasses = {
+		sm: "w-8 h-8 text-xs",
+		md: "w-10 h-10 text-sm",
+		lg: "w-12 h-12 text-base",
+	};
+
+	const getInitials = (name: string) => {
+		const parts = name.trim().split(" ");
+		if (parts.length >= 2) {
+			return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
+		}
+		return name.substring(0, 2).toUpperCase();
+	};
+
+	return (
+		<div
+			className={`${sizeClasses[size]} rounded-full bg-gray-200 flex items-center justify-center flex-shrink-0 overflow-hidden`}
+		>
+			{imageUrl ? (
+				<img src={imageUrl} alt={name} className="w-full h-full object-cover" />
+			) : (
+				<span className="font-medium text-gray-700">{getInitials(name)}</span>
+			)}
+		</div>
+	);
+};

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/components/ui/alert.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const alertVariants = cva(
+  "grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        'font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        'text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn('absolute top-2 right-2', className)}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction };

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/components/ui/badge.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary:
+          'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        destructive:
+          'bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90',
+        outline:
+          'border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+        ghost: '[a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 [a&]:hover:underline',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+function Badge({
+  className,
+  variant = 'default',
+  asChild = false,
+  ...props
+}: React.ComponentProps<'span'> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : 'span';
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+import { Slot } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        'flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn('inline-flex items-center gap-1.5', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot.Root : 'a';
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn('transition-colors hover:text-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn('font-normal text-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('[&>svg]:size-3.5', className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('flex size-9 items-center justify-center', className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/components/ui/button.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        outline:
+          'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+        ghost:
+          'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+        destructive:
+          'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default:
+          'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
+        icon: 'size-8',
+        'icon-xs':
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        'icon-sm':
+          'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+        'icon-lg': 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+function Button({
+  className,
+  variant = 'default',
+  size = 'default',
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot.Root : 'button';
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...(props as any)}
+    />
+  );
+}
+
+export { Button, buttonVariants };