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

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

@@ -0,0 +1,75 @@
+import React from "react";
+import { Link, useLocation } from "react-router";
+import dashboardIcon from "../../assets/icons/dashboard.svg";
+import filesIcon from "../../assets/icons/files.svg";
+import propertiesIcon from "../../assets/icons/properties.svg";
+import maintenanceIcon from "../../assets/icons/maintenance.svg";
+import maintenanceWorkerIcon from "../../assets/icons/maintenance-worker.svg";
+import { PATHS } from "../../lib/routeConfig";
+
+interface NavItem {
+	path: string;
+	icon: string;
+	label: string;
+}
+
+const navItems: NavItem[] = [
+	{ path: PATHS.HOME, icon: dashboardIcon, label: "Dashboard" },
+	{ path: PATHS.APPLICATIONS, icon: filesIcon, label: "Applications" },
+	{ path: PATHS.PROPERTIES, icon: propertiesIcon, label: "Properties" },
+	{ path: PATHS.MAINTENANCE_REQUESTS, icon: maintenanceIcon, label: "Maintenance Requests" },
+	{ path: PATHS.MAINTENANCE_WORKERS, icon: maintenanceWorkerIcon, label: "Maintenance Workers" },
+];
+
+interface VerticalNavProps {
+	isOpen?: boolean;
+	onClose?: () => void;
+}
+
+export const VerticalNav: React.FC<VerticalNavProps> = ({ isOpen = false, onClose }) => {
+	const location = useLocation();
+
+	const isActive = (path: string) => {
+		if (path === "/") {
+			return location.pathname === "/";
+		}
+		return location.pathname.startsWith(path);
+	};
+
+	const navContent = (handleClick?: () => void) =>
+		navItems.map((item) => (
+			<Link
+				key={item.path}
+				to={item.path}
+				onClick={handleClick}
+				className={`flex flex-col items-center justify-center gap-2 py-4 px-2 transition-colors ${
+					isActive(item.path)
+						? "bg-purple-100 text-purple-700 border-l-4 border-purple-700"
+						: "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+				}`}
+				title={item.label}
+			>
+				<img src={item.icon} alt={item.label} className="w-6 h-6" />
+				<span className="text-xs font-medium text-center">{item.label}</span>
+			</Link>
+		));
+
+	return (
+		<>
+			{/* Desktop sidebar */}
+			<div className="hidden md:flex flex-col w-24 bg-white border-r border-gray-200 py-8 space-y-4">
+				{navContent()}
+			</div>
+
+			{/* Mobile overlay */}
+			{isOpen && (
+				<>
+					<div className="fixed inset-0 z-40 bg-black/50" onClick={onClose} aria-hidden />
+					<div className="fixed left-0 top-0 bottom-0 z-50 flex flex-col w-24 bg-white border-r border-gray-200 py-8 space-y-4">
+						{navContent(onClose)}
+					</div>
+				</>
+			)}
+		</>
+	);
+};

package/dist/force-app/main/default/uiBundles/propertymanagementapp/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/propertymanagementapp/src/components/maintenanceRequests/MaintenanceDetailsModal.tsx

@@ -0,0 +1,193 @@
+import React, { useState } from "react";
+import { X } from "lucide-react";
+import { Button } from "../ui/button";
+import { Badge } from "../ui/badge";
+import type { MaintenanceRequestSearchNode } from "../../api/maintenanceRequests/maintenanceRequestSearchService";
+
+interface MaintenanceDetailsModalProps {
+	request: MaintenanceRequestSearchNode;
+	isOpen: boolean;
+	onClose: () => void;
+	onSave: (requestId: string, status: string) => Promise<void>;
+}
+
+function formatScheduledDate(dateValue: string | null | undefined): string | undefined {
+	if (!dateValue) return undefined;
+	const date = new Date(dateValue);
+	return date.toLocaleString(undefined, {
+		month: "short",
+		day: "numeric",
+		hour: "numeric",
+		minute: "2-digit",
+	});
+}
+
+export const MaintenanceDetailsModal: React.FC<MaintenanceDetailsModalProps> = ({
+	request,
+	isOpen,
+	onClose,
+	onSave,
+}) => {
+	const status = request.Status__c?.value || "New";
+	const [selectedStatus, setSelectedStatus] = useState(status);
+	const [isSaving, setIsSaving] = useState(false);
+
+	// Determine if status is editable
+	// All statuses except Resolved can be edited
+	const isStatusEditable = status !== "Resolved";
+
+	// Status options - all possible statuses
+	const statusOptions = ["New", "Assigned", "In Progress", "On Hold", "Resolved"];
+
+	const handleSave = async () => {
+		if (!isStatusEditable) return;
+
+		setIsSaving(true);
+		try {
+			await onSave(request.Id, selectedStatus);
+			onClose();
+		} catch (error) {
+			console.error("Error saving status:", error);
+		} finally {
+			setIsSaving(false);
+		}
+	};
+
+	if (!isOpen) return null;
+
+	const description = request.Description__c?.value || "";
+	const issueType = request.Type__c?.value || "General";
+	const propertyAddress = request.Property__r?.Address__c?.value || "Unknown Address";
+	const tenantName = request.User__r?.Name?.value || "Unknown";
+	const tenantUnit = request.Property__r?.Name?.value || request.Property__r?.Address__c?.value;
+	const formattedDate = formatScheduledDate(request.Scheduled__c?.value);
+	const priority = request.Priority__c?.value;
+
+	return (
+		<div className="fixed inset-0 z-50 flex items-center justify-center">
+			<div className="fixed inset-0 bg-black/50" onClick={onClose} />
+
+			<div className="relative bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
+				<div className="flex items-center justify-between p-6 border-b border-gray-200">
+					<h2 className="text-xl font-semibold text-gray-900">Maintenance Request Details</h2>
+					<button onClick={onClose} className="text-gray-400 hover:text-gray-600 transition-colors">
+						<X className="w-6 h-6" />
+					</button>
+				</div>
+
+				<div className="p-6 space-y-6">
+					{/* Description */}
+					<div>
+						<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+							Description
+						</h3>
+						<p className="text-lg font-medium text-gray-900">{description}</p>
+					</div>
+
+					<div className="grid grid-cols-2 gap-6">
+						<div className="space-y-6">
+							<div>
+								<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+									Issue Type
+								</h3>
+								<p className="text-base text-gray-900">{issueType}</p>
+							</div>
+
+							<div>
+								<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+									Property
+								</h3>
+								<p className="text-base text-gray-900">{propertyAddress}</p>
+							</div>
+
+							<div>
+								<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+									Tenant
+								</h3>
+								<p className="text-base text-gray-900">{tenantName}</p>
+								{tenantUnit && <p className="text-sm text-gray-600 mt-1">Unit: {tenantUnit}</p>}
+							</div>
+
+							{formattedDate && (
+								<div>
+									<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+										Scheduled Date
+									</h3>
+									<p className="text-base text-gray-900">{formattedDate}</p>
+								</div>
+							)}
+						</div>
+
+						<div className="space-y-6">
+							<div>
+								<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+									Priority
+								</h3>
+								<PriorityBadge priority={priority} />
+							</div>
+						</div>
+					</div>
+
+					<div>
+						<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+							Status
+						</h3>
+						{isStatusEditable ? (
+							<select
+								value={selectedStatus}
+								onChange={(e) => setSelectedStatus(e.target.value)}
+								className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+							>
+								{statusOptions.map((s) => (
+									<option key={s} value={s}>
+										{s}
+									</option>
+								))}
+							</select>
+						) : (
+							<div className="flex items-center">
+								<span className="px-4 py-2 bg-gray-100 text-gray-700 rounded-md font-medium">
+									{status}
+								</span>
+								<span className="ml-3 text-sm text-gray-500">(Cannot be modified)</span>
+							</div>
+						)}
+					</div>
+				</div>
+
+				<div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200">
+					<Button variant="outline" onClick={onClose} disabled={isSaving}>
+						Close
+					</Button>
+					{isStatusEditable && (
+						<Button
+							onClick={handleSave}
+							disabled={isSaving || selectedStatus === status}
+							className="bg-purple-600 hover:bg-purple-700"
+						>
+							{isSaving ? "Saving..." : "Save Changes"}
+						</Button>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+};
+
+type Priority = "Emergency (2hr)" | "High (Same Day)" | "Standard";
+
+const priorityStyles: Record<Priority, string> = {
+	"Emergency (2hr)": "bg-red-100 text-red-700 border-red-200 text-sm",
+	"High (Same Day)": "bg-orange-100 text-orange-700 border-orange-200 text-sm",
+	Standard: "bg-blue-100 text-blue-700 border-blue-200 text-sm",
+};
+
+const PriorityBadge: React.FC<{ priority: string | null | undefined }> = ({ priority }) => {
+	return (
+		<Badge
+			className={`border ${priority && priority in priorityStyles ? priorityStyles[priority as Priority] : priorityStyles.Standard}`}
+		>
+			{priority && priority in priorityStyles ? priority : "Standard"}
+		</Badge>
+	);
+};

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/components/maintenanceRequests/MaintenanceRequestCard.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { Card } from "../ui/card";
+import { Button } from "../ui/button";
+import type { MaintenanceRequestSearchNode } from "../../api/maintenanceRequests/maintenanceRequestSearchService";
+
+interface MaintenanceRequestCardProps {
+	request: MaintenanceRequestSearchNode;
+	onView: (id: string) => void;
+}
+
+const priorityConfig: Record<
+	"Emergency (2hr)" | "High (Same Day)" | "Standard",
+	{ color: string; label: string; emoji: string }
+> = {
+	"Emergency (2hr)": { color: "text-red-500", label: "EMERGENCY (2HR)", emoji: "🔴" },
+	"High (Same Day)": { color: "text-orange-500", label: "HIGH (SAME DAY)", emoji: "🟠" },
+	Standard: { color: "text-blue-500", label: "STANDARD", emoji: "🔵" },
+};
+
+const issueIcons: Record<string, string> = {
+	Plumbing: "💧",
+	HVAC: "❄️",
+	Electrical: "🔌",
+	Appliance: "🔧",
+	Pest: "🐛",
+};
+
+export const MaintenanceRequestCard: React.FC<MaintenanceRequestCardProps> = ({
+	request,
+	onView,
+}) => {
+	const priorityValue = request.Priority__c?.value;
+	const priority =
+		priorityConfig[priorityValue as keyof typeof priorityConfig] || priorityConfig.Standard;
+	const issueType = request.Type__c?.value || "General";
+	const issueIcon = issueIcons[issueType] || "🔧";
+	const propertyAddress = request.Property__r?.Address__c?.value || "Unknown Address";
+	const status = request.Status__c?.value || "New";
+	const description = request.Description__c?.value || "";
+	const scheduledDate = request.Scheduled__c?.value
+		? new Date(request.Scheduled__c.value).toLocaleString()
+		: undefined;
+	const assignedWorker = request.Assigned_Worker__r?.Name?.value || "Unassigned";
+
+	return (
+		<Card className="p-4 mb-3">
+			<div className="space-y-2">
+				<div className="flex items-start justify-between gap-4">
+					<div className="flex items-start gap-2 flex-1">
+						<span className={`${priority.color} font-bold text-sm`}>
+							{priority.emoji} {priority.label}
+						</span>
+						<span className="text-gray-700 font-medium">{propertyAddress}</span>
+					</div>
+					<span className="text-sm text-gray-500 uppercase">{status}</span>
+				</div>
+
+				<div className="flex items-center gap-2">
+					<span className="text-xl">{issueIcon}</span>
+					<span className="text-sm text-gray-700">
+						{issueType} - {description}
+					</span>
+				</div>
+
+				{assignedWorker && (
+					<div className="text-sm text-gray-600">👷 Assigned to: {assignedWorker}</div>
+				)}
+
+				{scheduledDate && (
+					<div className="flex items-center justify-between">
+						<div className="text-sm text-gray-600">📅 Scheduled: {scheduledDate}</div>
+						<Button onClick={() => onView(request.Id)} variant="outline" size="sm">
+							View
+						</Button>
+					</div>
+				)}
+			</div>
+		</Card>
+	);
+};

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/components/maintenanceWorkers/WorkerDetailsModal.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogFooter,
+} from "../ui/dialog";
+import type { MaintenanceWorkerSearchNode } from "../../api/maintenanceWorkers/maintenanceWorkerSearchService";
+
+interface WorkerDetailsModalProps {
+	worker: MaintenanceWorkerSearchNode;
+	isOpen: boolean;
+	onClose: () => void;
+}
+
+export const WorkerDetailsModal: React.FC<WorkerDetailsModalProps> = ({
+	worker,
+	isOpen,
+	onClose,
+}) => {
+	const name = worker.Name?.value ?? "\u2014";
+	const organization = worker.Employment_Type__c?.value ?? worker.Type__c?.value ?? "\u2014";
+	const phone = worker.Phone__c?.value ?? "\u2014";
+	const isActive = worker.IsActive__c?.value;
+	const status = typeof isActive === "boolean" ? (isActive ? "Active" : "Inactive") : "\u2014";
+
+	return (
+		<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+			<DialogContent className="sm:max-w-md">
+				<DialogHeader>
+					<DialogTitle>Worker Details</DialogTitle>
+				</DialogHeader>
+
+				<div className="space-y-4">
+					<div>
+						<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-1">
+							Name
+						</h3>
+						<p className="text-base font-medium text-gray-900">{name}</p>
+					</div>
+					<div>
+						<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-1">
+							Organization
+						</h3>
+						<p className="text-base text-gray-900">{organization}</p>
+					</div>
+					<div>
+						<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-1">
+							Phone
+						</h3>
+						<p className="text-base text-gray-900">{phone}</p>
+					</div>
+					<div>
+						<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-1">
+							Status
+						</h3>
+						<p className="text-base text-gray-900">{status}</p>
+					</div>
+				</div>
+
+				<DialogFooter showCloseButton />
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import { Home } from "lucide-react";
+import type { PropertySearchNode } from "../../api/properties/propertySearchService";
+
+interface PropertyCardProps {
+	property: PropertySearchNode;
+	onClick?: (property: PropertySearchNode) => void;
+}
+
+export const PropertyCard: React.FC<PropertyCardProps> = ({ property, onClick }) => {
+	const [imageError, setImageError] = useState(false);
+
+	const handleClick = () => {
+		if (onClick) {
+			onClick(property);
+		}
+	};
+
+	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 createdYear = property.CreatedDate?.value
+		? new Date(property.CreatedDate.value).getFullYear().toString()
+		: undefined;
+
+	const truncatedDescription = description
+		? description.length > 150
+			? description.substring(0, 150) + "..."
+			: description
+		: "No description available.";
+
+	return (
+		<div
+			className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow cursor-pointer"
+			onClick={handleClick}
+		>
+			<div className="relative h-48 bg-gray-200">
+				{heroImage && !imageError ? (
+					<img
+						src={heroImage}
+						alt={name}
+						className="w-full h-full object-cover"
+						onError={() => setImageError(true)}
+					/>
+				) : (
+					<div className="w-full h-full flex items-center justify-center text-gray-400">
+						<Home size={64} strokeWidth={1.5} />
+					</div>
+				)}
+			</div>
+
+			<div className="p-6">
+				<h3 className="text-xl font-bold text-gray-900 mb-2">{name}</h3>
+				<p className="text-sm text-gray-600 mb-4">{address}</p>
+				<p className="text-sm text-gray-700 mb-4 line-clamp-3">{truncatedDescription}</p>
+				{createdYear && <p className="text-sm text-gray-500 font-medium">Since {createdYear}</p>}
+			</div>
+		</div>
+	);
+};