@salesforce/webapp-template-app-react-sample-b2e-experimental 1.64.0 → 1.66.0

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/components/ApplicationsTable.tsx

@@ -0,0 +1,105 @@
+import React from "react";
+import { Card } from "@/components/ui/card";
+import type { Application } from "../lib/types.js";
+
+interface ApplicationsTableProps {
+	applications: Application[];
+	onRowClick: (application: Application) => void;
+}
+
+const getStatusColor = (status: string) => {
+	const statusLower = status.toLowerCase();
+	if (statusLower.includes("approved")) return "bg-green-100 text-green-700";
+	if (statusLower.includes("rejected")) return "bg-red-100 text-red-700";
+	if (statusLower.includes("background")) return "bg-blue-100 text-blue-700";
+	if (statusLower.includes("review")) return "bg-yellow-100 text-yellow-700";
+	return "bg-gray-100 text-gray-700";
+};
+
+export const ApplicationsTable: React.FC<ApplicationsTableProps> = ({
+	applications,
+	onRowClick,
+}) => {
+	const formatDate = (dateString: string) => {
+		if (!dateString) return "N/A";
+		try {
+			const date = new Date(dateString);
+			return date.toLocaleDateString("en-US", {
+				year: "numeric",
+				month: "short",
+				day: "numeric",
+			});
+		} catch {
+			return dateString;
+		}
+	};
+
+	return (
+		<Card className="border-gray-200 shadow-sm">
+			<div className="overflow-x-auto">
+				<table className="w-full">
+					<thead className="bg-gray-50 border-b border-gray-200">
+						<tr>
+							<th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+								User
+							</th>
+							<th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+								Start Date
+							</th>
+							<th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+								Status
+							</th>
+						</tr>
+					</thead>
+					<tbody className="bg-white divide-y divide-gray-200">
+						{applications.length === 0 ? (
+							<tr>
+								<td colSpan={3} className="px-6 py-8 text-center text-gray-500">
+									No applications found
+								</td>
+							</tr>
+						) : (
+							applications.map((application) => (
+								<tr
+									key={application.id}
+									onClick={() => onRowClick(application)}
+									className="hover:bg-gray-50 cursor-pointer transition-colors"
+								>
+									<td className="px-6 py-4 whitespace-nowrap">
+										<div className="flex items-center">
+											<div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0">
+												<span className="text-sm font-medium text-purple-700">
+													{application.applicantName?.charAt(0) || "?"}
+												</span>
+											</div>
+											<div className="ml-4">
+												<div className="text-sm font-medium text-gray-900">
+													{application.applicantName || "Unknown"}
+												</div>
+												<div className="text-sm text-gray-500">
+													{application.propertyName || application.propertyAddress}
+												</div>
+											</div>
+										</div>
+									</td>
+									<td className="px-6 py-4 whitespace-nowrap">
+										<div className="text-sm text-gray-900">
+											{formatDate(application.startDate || application.submittedDate)}
+										</div>
+									</td>
+									<td className="px-6 py-4 whitespace-nowrap">
+										<span
+											className={`inline-flex px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(application.status)}`}
+										>
+											{application.status}
+										</span>
+									</td>
+								</tr>
+							))
+						)}
+					</tbody>
+				</table>
+			</div>
+		</Card>
+	);
+};

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/components/MaintenanceDetailsModal.tsx

@@ -0,0 +1,191 @@
+import React, { useState } from "react";
+import { X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { PriorityBadge } from "./PriorityBadge.js";
+import type { MaintenanceRequest } from "../lib/types.js";
+
+interface MaintenanceDetailsModalProps {
+	request: MaintenanceRequest;
+	isOpen: boolean;
+	onClose: () => void;
+	onSave: (requestId: string, status: string) => Promise<void>;
+}
+
+export const MaintenanceDetailsModal: React.FC<MaintenanceDetailsModalProps> = ({
+	request,
+	isOpen,
+	onClose,
+	onSave,
+}) => {
+	const [selectedStatus, setSelectedStatus] = useState(request.status);
+	const [isSaving, setIsSaving] = useState(false);
+
+	// Determine if status is editable
+	// Only New and In Progress can be updated to Resolved
+	const isStatusEditable = request.status === "New" || request.status === "In Progress";
+
+	// Status options
+	const statusOptions = ["New", "In Progress", "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;
+
+	return (
+		<div className="fixed inset-0 z-50 flex items-center justify-center">
+			{/* Backdrop */}
+			<div className="fixed inset-0 bg-black bg-opacity-50" onClick={onClose} />
+
+			{/* Modal */}
+			<div className="relative bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
+				{/* Header */}
+				<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>
+
+				{/* Content */}
+				<div className="p-6 space-y-6">
+					{/* Image */}
+					{request.imageUrl && (
+						<div>
+							<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+								Image
+							</h3>
+							<div className="w-full h-64 rounded-lg bg-gray-200 overflow-hidden">
+								<img
+									src={request.imageUrl}
+									alt={request.description}
+									className="w-full h-full object-cover"
+								/>
+							</div>
+						</div>
+					)}
+
+					{/* 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">{request.description}</p>
+					</div>
+
+					{/* Issue Type & Priority */}
+					<div className="grid grid-cols-2 gap-4">
+						<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">{request.issueType}</p>
+						</div>
+						<div>
+							<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+								Priority
+							</h3>
+							<PriorityBadge priority={request.priority} />
+						</div>
+					</div>
+
+					{/* Property */}
+					<div>
+						<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+							Property
+						</h3>
+						<p className="text-base text-gray-900">{request.propertyAddress}</p>
+					</div>
+
+					{/* Tenant */}
+					<div>
+						<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+							Tenant
+						</h3>
+						<p className="text-base text-gray-900">{request.tenantName || "Unknown"}</p>
+						{request.tenantUnit && (
+							<p className="text-sm text-gray-600 mt-1">Unit: {request.tenantUnit}</p>
+						)}
+					</div>
+
+					{/* Assigned Worker */}
+					{request.assignedWorkerName && (
+						<div>
+							<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+								Assigned Worker
+							</h3>
+							<p className="text-base text-gray-900">{request.assignedWorkerName}</p>
+							{request.assignedWorkerOrg && (
+								<p className="text-sm text-gray-600 mt-1">{request.assignedWorkerOrg}</p>
+							)}
+						</div>
+					)}
+
+					{/* Scheduled Date */}
+					{request.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">{request.formattedDate}</p>
+						</div>
+					)}
+
+					{/* Status */}
+					<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((status) => (
+									<option key={status} value={status}>
+										{status}
+									</option>
+								))}
+							</select>
+						) : (
+							<div className="flex items-center">
+								<span className="px-4 py-2 bg-gray-100 text-gray-700 rounded-md font-medium">
+									{request.status}
+								</span>
+								<span className="ml-3 text-sm text-gray-500">(Cannot be modified)</span>
+							</div>
+						)}
+					</div>
+				</div>
+
+				{/* Footer */}
+				<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 === request.status}
+							className="bg-purple-600 hover:bg-purple-700"
+						>
+							{isSaving ? "Saving..." : "Save Changes"}
+						</Button>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+};

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/components/PropertyDetailsModal.tsx

@@ -0,0 +1,274 @@
+import React from "react";
+import { X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import type { Property } from "../lib/types.js";
+
+interface PropertyDetailsModalProps {
+	property: Property;
+	isOpen: boolean;
+	onClose: () => void;
+}
+
+export const PropertyDetailsModal: React.FC<PropertyDetailsModalProps> = ({
+	property,
+	isOpen,
+	onClose,
+}) => {
+	if (!isOpen) return null;
+
+	const formatCurrency = (amount: number) => {
+		return new Intl.NumberFormat("en-US", {
+			style: "currency",
+			currency: "USD",
+			minimumFractionDigits: 0,
+		}).format(amount);
+	};
+
+	const getStatusColor = (status: string) => {
+		switch (status.toLowerCase()) {
+			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 (
+		<div className="fixed inset-0 z-50 flex items-center justify-center">
+			{/* Backdrop */}
+			<div className="fixed inset-0 bg-black bg-opacity-50" onClick={onClose} />
+
+			{/* Modal */}
+			<div className="relative bg-white rounded-lg shadow-xl w-full max-w-4xl mx-4 max-h-[90vh] overflow-y-auto">
+				{/* Header */}
+				<div className="flex items-center justify-between p-6 border-b border-gray-200">
+					<h2 className="text-xl font-semibold text-gray-900">Property Details</h2>
+					<button onClick={onClose} className="text-gray-400 hover:text-gray-600 transition-colors">
+						<X className="w-6 h-6" />
+					</button>
+				</div>
+
+				{/* Content */}
+				<div className="p-6 space-y-6">
+					{/* Hero Image */}
+					{property.heroImage && (
+						<div className="w-full h-80 rounded-lg bg-gray-200 overflow-hidden">
+							<img
+								src={property.heroImage}
+								alt={property.name}
+								className="w-full h-full object-cover"
+							/>
+						</div>
+					)}
+
+					{/* Property Name and Address */}
+					<div>
+						<h3 className="text-2xl font-bold text-gray-900">{property.name}</h3>
+						<p className="text-base text-gray-600 mt-1">{property.address}</p>
+					</div>
+
+					{/* Type, Status, and Rent */}
+					<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">{property.type}</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(property.status)}`}
+							>
+								{property.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(property.monthlyRent)}
+							</p>
+						</div>
+					</div>
+
+					{/* Property Specifications */}
+					<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">
+							{property.bedrooms !== undefined && (
+								<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">{property.bedrooms}</p>
+								</div>
+							)}
+							{property.bathrooms !== undefined && (
+								<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">{property.bathrooms}</p>
+								</div>
+							)}
+							{property.sqFt !== undefined && (
+								<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">
+										{property.sqFt.toLocaleString()}
+									</p>
+								</div>
+							)}
+							{property.yearBuilt !== undefined && (
+								<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">{property.yearBuilt}</p>
+								</div>
+							)}
+						</div>
+					</div>
+
+					{/* Lease Information */}
+					<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">
+							{property.deposit !== undefined && (
+								<div>
+									<p className="text-sm text-gray-600">Security Deposit</p>
+									<p className="text-base font-semibold text-gray-900">
+										{formatCurrency(property.deposit)}
+									</p>
+								</div>
+							)}
+							{property.leaseTerm !== undefined && (
+								<div>
+									<p className="text-sm text-gray-600">Lease Term</p>
+									<p className="text-base font-semibold text-gray-900">
+										{property.leaseTerm} months
+									</p>
+								</div>
+							)}
+							{property.availableDate && (
+								<div>
+									<p className="text-sm text-gray-600">Available Date</p>
+									<p className="text-base font-semibold text-gray-900">{property.availableDate}</p>
+								</div>
+							)}
+						</div>
+					</div>
+
+					{/* Amenities */}
+					<div>
+						<h4 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">
+							Amenities
+						</h4>
+						<div className="flex flex-wrap gap-4">
+							{property.parking !== undefined && (
+								<div className="flex items-center gap-2">
+									<span className="text-lg">🚗</span>
+									<span className="text-sm text-gray-700">{property.parking} Parking Space(s)</span>
+								</div>
+							)}
+							{property.petFriendly !== undefined && (
+								<div className="flex items-center gap-2">
+									<span className="text-lg">{property.petFriendly ? "🐾" : "🚫"}</span>
+									<span className="text-sm text-gray-700">
+										{property.petFriendly ? "Pet Friendly" : "No Pets"}
+									</span>
+								</div>
+							)}
+						</div>
+					</div>
+
+					{/* Features */}
+					{property.features && property.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">
+								{property.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 */}
+					{property.utilities && property.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">
+								{property.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 */}
+					{property.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">{property.description}</p>
+						</div>
+					)}
+
+					{/* Virtual Tour */}
+					{property.tourUrl && (
+						<div>
+							<h4 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+								Virtual Tour
+							</h4>
+							<a
+								href={property.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>
+
+				{/* Footer */}
+				<div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200">
+					<Button variant="outline" onClick={onClose}>
+						Close
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+};

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/components/StatusBadge.tsx

@@ -2,36 +2,36 @@ import React from "react";
 import { Check } from "lucide-react";
 
 interface StatusBadgeProps {
-	status: "new" | "assigned" | "scheduled" | "in_progress" | "completed";
+	status: string;
 }
 
 export const StatusBadge: React.FC<StatusBadgeProps> = ({ status }) => {
-	const styles = {
-		new: "bg-pink-100 text-pink-700",
-		assigned: "bg-purple-100 text-purple-700",
-		scheduled: "bg-blue-100 text-blue-700",
-		in_progress: "bg-yellow-100 text-yellow-700",
-		completed: "bg-green-100 text-green-700",
+	const statusLower = status.toLowerCase();
+
+	const getStyle = () => {
+		if (statusLower === "new") return "bg-pink-100 text-pink-700";
+		if (statusLower === "in progress") return "bg-yellow-100 text-yellow-700";
+		if (statusLower === "resolved") return "bg-green-100 text-green-700";
+		return "bg-gray-100 text-gray-700";
 	};
 
-	const labels = {
-		new: "Needs Action",
-		assigned: "Assigned",
-		scheduled: "Scheduled",
-		in_progress: "In Progress",
-		completed: "Completed",
+	const getLabel = () => {
+		if (statusLower === "new") return "Needs Action";
+		if (statusLower === "in progress") return "In Progress";
+		if (statusLower === "resolved") return "Resolved";
+		return status;
 	};
 
-	const showCheckmark = status === "completed";
-	const showDot = status === "new" || status === "in_progress";
+	const showCheckmark = statusLower === "resolved";
+	const showDot = statusLower === "new" || statusLower === "in progress";
 
 	return (
 		<span
-			className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm font-medium ${styles[status]}`}
+			className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm font-medium ${getStyle()}`}
 		>
 			{showCheckmark && <Check className="w-4 h-4" />}
 			{showDot && <span className="w-2 h-2 rounded-full bg-current" />}
-			{labels[status]}
+			{getLabel()}
 		</span>
 	);
 };

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/components/TopBar.tsx

@@ -9,6 +9,7 @@ interface TopBarProps {
 
 export const TopBar: React.FC<TopBarProps> = ({ onMenuClick }) => {
 	const [userName, setUserName] = useState<string>("User");
+	const [showNotifications, setShowNotifications] = useState(false);
 
 	useEffect(() => {
 		const loadUserInfo = async () => {
@@ -19,6 +20,14 @@ export const TopBar: React.FC<TopBarProps> = ({ onMenuClick }) => {
 		};
 		loadUserInfo();
 	}, []);
+
+	const handleNotificationClick = () => {
+		setShowNotifications(!showNotifications);
+	};
+
+	const handleCloseNotifications = () => {
+		setShowNotifications(false);
+	};
 	return (
 		<div className="bg-[#372949] text-white h-16 flex items-center justify-between px-6">
 			{/* Left section - Logo and Menu */}
@@ -50,13 +59,34 @@ export const TopBar: React.FC<TopBarProps> = ({ onMenuClick }) => {
 				</button>
 
 				{/* Notifications */}
-				<button
-					className="p-2 hover:bg-purple-700 rounded-md transition-colors relative"
-					aria-label="Notifications"
-				>
-					<Bell className="w-5 h-5" />
-					<span className="absolute top-1 right-1 w-2 h-2 bg-pink-500 rounded-full"></span>
-				</button>
+				<div className="relative">
+					<button
+						onClick={handleNotificationClick}
+						className="p-2 hover:bg-purple-700 rounded-md transition-colors relative"
+						aria-label="Notifications"
+					>
+						<Bell className="w-5 h-5" />
+					</button>
+
+					{/* Notifications Overlay */}
+					{showNotifications && (
+						<>
+							{/* Backdrop */}
+							<div className="fixed inset-0 z-40" onClick={handleCloseNotifications} />
+
+							{/* Notification Panel */}
+							<div className="absolute right-0 top-full mt-2 w-80 bg-white rounded-lg shadow-xl z-50 overflow-hidden">
+								<div className="p-4 border-b border-gray-200">
+									<h3 className="text-sm font-semibold text-gray-900">Notifications</h3>
+								</div>
+								<div className="p-8 text-center">
+									<Bell className="w-12 h-12 mx-auto text-gray-300 mb-3" />
+									<p className="text-sm text-gray-500">No new notifications</p>
+								</div>
+							</div>
+						</>
+					)}
+				</div>
 
 				{/* User Profile */}
 				<button className="flex items-center gap-2 px-3 py-2 hover:bg-purple-700 rounded-md transition-colors">