@salesforce/webapp-template-app-react-sample-b2e-experimental 1.48.3 → 1.50.0

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

@@ -0,0 +1,87 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+	return (
+		<div data-slot="table-container" className="relative w-full overflow-x-auto">
+			<table
+				data-slot="table"
+				className={cn("w-full caption-bottom text-sm", className)}
+				{...props}
+			/>
+		</div>
+	);
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+	return <thead data-slot="table-header" className={cn("[&_tr]:border-b", className)} {...props} />;
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+	return (
+		<tbody
+			data-slot="table-body"
+			className={cn("[&_tr:last-child]:border-0", className)}
+			{...props}
+		/>
+	);
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+	return (
+		<tfoot
+			data-slot="table-footer"
+			className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+			{...props}
+		/>
+	);
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+	return (
+		<tr
+			data-slot="table-row"
+			className={cn(
+				"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+	return (
+		<th
+			data-slot="table-head"
+			className={cn(
+				"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+	return (
+		<td
+			data-slot="table-cell"
+			className={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
+			{...props}
+		/>
+	);
+}
+
+function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
+	return (
+		<caption
+			data-slot="table-caption"
+			className={cn("text-muted-foreground mt-4 text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

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

@@ -0,0 +1,78 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Tabs as TabsPrimitive } from "radix-ui";
+
+import { cn } from "../../lib/utils";
+
+function Tabs({
+	className,
+	orientation = "horizontal",
+	...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+	return (
+		<TabsPrimitive.Root
+			data-slot="tabs"
+			data-orientation={orientation}
+			className={cn("gap-2 group/tabs flex data-horizontal:flex-col", className)}
+			{...props}
+		/>
+	);
+}
+
+const tabsListVariants = cva(
+	"rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
+	{
+		variants: {
+			variant: {
+				default: "bg-muted",
+				line: "gap-1 bg-transparent",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+function TabsList({
+	className,
+	variant = "default",
+	...props
+}: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>) {
+	return (
+		<TabsPrimitive.List
+			data-slot="tabs-list"
+			data-variant={variant}
+			className={cn(tabsListVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+}
+
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+	return (
+		<TabsPrimitive.Trigger
+			data-slot="tabs-trigger"
+			className={cn(
+				"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+				"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+				"data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
+				"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
+	return (
+		<TabsPrimitive.Content
+			data-slot="tabs-content"
+			className={cn("text-sm flex-1 outline-none", className)}
+			{...props}
+		/>
+	);
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

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

@@ -0,0 +1,18 @@
+{
+  "style": "new-york",
+  "rsc": true,
+  "tailwind": {
+    "config": "",
+    "css": "styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/lib/types.ts

@@ -0,0 +1,57 @@
+// Dashboard Data Types
+export interface DashboardMetrics {
+	totalProperties: number;
+	unitsAvailable: number;
+	occupiedUnits: number;
+	topMaintenanceIssue: string;
+	topMaintenanceIssueCount: number;
+}
+
+export interface Application {
+	id: string;
+	applicantName: string;
+	propertyAddress: string;
+	submittedDate: string;
+	status: "pending" | "approved" | "rejected";
+}
+
+export interface MaintenanceRequest {
+	id: string;
+	propertyAddress: string;
+	issueType: string;
+	priority: "emergency" | "high" | "medium" | "low";
+	status: "new" | "assigned" | "scheduled" | "in_progress" | "completed";
+	assignedWorker?: string;
+	scheduledDateTime?: string;
+	description: string;
+	tenantName?: string;
+	imageUrl?: string;
+	tenantUnit?: string;
+	assignedWorkerName?: string;
+	assignedWorkerOrg?: string;
+	formattedDate?: string;
+}
+
+export interface Property {
+	id: string;
+	name: string;
+	address: string;
+	type: "apartment" | "house" | "commercial";
+	status: "available" | "rented" | "maintenance";
+	monthlyRent: number;
+	bedrooms?: number;
+	bathrooms?: number;
+	heroImage?: string;
+	description?: string;
+	sqFt?: number;
+	yearBuilt?: number;
+	deposit?: number;
+	parking?: number;
+	petFriendly?: boolean;
+	availableDate?: string;
+	leaseTerm?: number;
+	features?: string[];
+	utilities?: string[];
+	tourUrl?: string;
+	createdDate?: string;
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}

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

@@ -1,12 +1,165 @@
+import { useEffect, useState } from "react";
+import { StatCard } from "../components/StatCard.js";
+import { IssuesDonutChart } from "../components/IssuesDonutChart.js";
+import { MaintenanceTable } from "../components/MaintenanceTable.js";
+import { getDashboardMetrics, calculateMetrics } from "../api/dashboard.js";
+import { getMaintenanceRequests } from "../api/maintenance.js";
+import type { DashboardMetrics, MaintenanceRequest } from "../lib/types.js";
+
 export default function Home() {
-  return (
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-      <div className="text-center">
-        <h1 className="text-4xl font-bold text-gray-900 mb-4">Home</h1>
-        <p className="text-lg text-gray-600 mb-8">
-          Welcome to your React application.
-        </p>
-      </div>
-    </div>
-  );
+	const [metrics, setMetrics] = useState<DashboardMetrics>({
+		totalProperties: 0,
+		unitsAvailable: 0,
+		occupiedUnits: 0,
+		topMaintenanceIssue: "",
+		topMaintenanceIssueCount: 0,
+	});
+	const [maintenanceRequests, setMaintenanceRequests] = useState<MaintenanceRequest[]>([]);
+	const [loading, setLoading] = useState(true);
+
+	useEffect(() => {
+		loadDashboardData();
+	}, []);
+
+	const loadDashboardData = async () => {
+		try {
+			setLoading(true);
+
+			// Load metrics
+			const { properties } = await getDashboardMetrics();
+			setMetrics(calculateMetrics(properties));
+
+			// Load maintenance requests
+			const maintenanceData = await getMaintenanceRequests(5);
+			setMaintenanceRequests(maintenanceData);
+		} catch (error) {
+			console.error("Error loading dashboard data:", error);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const handleViewMaintenance = (id: string) => {
+		console.log("View maintenance request:", id);
+	};
+
+	// Calculate chart data from maintenance requests
+	const calculateChartData = () => {
+		const issueCounts: Record<string, number> = {
+			Plumbing: 0,
+			HVAC: 0,
+			Electrical: 0,
+			Other: 0,
+		};
+
+		maintenanceRequests.forEach((request) => {
+			const type = request.issueType;
+			if (type === "Plumbing" || type === "HVAC" || type === "Electrical") {
+				issueCounts[type]++;
+			} else {
+				issueCounts.Other++;
+			}
+		});
+
+		return [
+			{ name: "Plumbing", value: issueCounts.Plumbing, color: "#7C3AED" },
+			{ name: "HVAC", value: issueCounts.HVAC, color: "#EC4899" },
+			{ name: "Electrical", value: issueCounts.Electrical, color: "#14B8A6" },
+			{ name: "Other", value: issueCounts.Other, color: "#06B6D4" },
+		];
+	};
+
+	// Calculate previous month's data (mock for now)
+	const getPreviousMetrics = () => ({
+		totalProperties: 12,
+		unitsAvailable: 78,
+		occupiedUnits: 422,
+	});
+
+	const previousMetrics = getPreviousMetrics();
+
+	if (loading) {
+		return (
+			<div className="flex items-center justify-center h-screen bg-gray-50">
+				<div className="text-lg text-gray-600">Loading dashboard...</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="min-h-screen bg-gray-50">
+			{/* Main Content Area */}
+			<div className="max-w-7xl mx-auto p-8 space-y-6">
+				{/* Search Bar (Desktop) */}
+				<div className="hidden md:flex justify-end mb-4">
+					<div className="w-96 bg-white rounded-full px-6 py-3 shadow-sm border border-gray-200 flex items-center">
+						<input
+							type="text"
+							placeholder="Search"
+							className="flex-1 outline-none text-gray-600"
+							disabled
+						/>
+						<svg
+							className="w-5 h-5 text-gray-400"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								strokeWidth={2}
+								d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+							/>
+						</svg>
+					</div>
+				</div>
+
+				{/* Main Layout: 70/30 split */}
+				<div className="grid grid-cols-1 lg:grid-cols-[70%_30%] gap-6">
+					{/* Left Column: Stat Cards + Maintenance Table */}
+					<div className="space-y-6">
+						{/* Stat Cards Row */}
+						<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+							<StatCard
+								title="Total Properties"
+								value={metrics.totalProperties}
+								trend={{
+									value: 20,
+									isPositive: true,
+								}}
+								subtitle={`Last month total ${previousMetrics.totalProperties}`}
+							/>
+							<StatCard
+								title="Units Available"
+								value={metrics.unitsAvailable}
+								trend={{
+									value: 10,
+									isPositive: false,
+								}}
+								subtitle={`Last month total ${previousMetrics.unitsAvailable}/${metrics.totalProperties}`}
+							/>
+							<StatCard
+								title="Occupied Units"
+								value={metrics.occupiedUnits}
+								trend={{
+									value: 5,
+									isPositive: true,
+								}}
+								subtitle={`Last month total ${previousMetrics.occupiedUnits}`}
+							/>
+						</div>
+
+						{/* Maintenance Requests Table */}
+						<MaintenanceTable requests={maintenanceRequests} onView={handleViewMaintenance} />
+					</div>
+
+					{/* Right Column: Donut Chart */}
+					<div>
+						<IssuesDonutChart data={calculateChartData()} />
+					</div>
+				</div>
+			</div>
+		</div>
+	);
 }

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

@@ -0,0 +1,176 @@
+import { useEffect, useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { getAllMaintenanceRequests } from "../api/maintenance.js";
+import type { MaintenanceRequest } from "../lib/types.js";
+import { UserAvatar } from "../components/UserAvatar.js";
+import { PriorityBadge } from "../components/PriorityBadge.js";
+import { StatusBadge } from "../components/StatusBadge.js";
+
+export default function Maintenance() {
+	const [requests, setRequests] = useState<MaintenanceRequest[]>([]);
+	const [loading, setLoading] = useState(true);
+
+	useEffect(() => {
+		loadMaintenanceRequests();
+	}, []);
+
+	const loadMaintenanceRequests = async () => {
+		try {
+			setLoading(true);
+			const data = await getAllMaintenanceRequests();
+			setRequests(data);
+		} catch (error) {
+			console.error("Error loading maintenance requests:", error);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	if (loading) {
+		return (
+			<div className="flex items-center justify-center h-screen bg-gray-50">
+				<div className="text-lg text-gray-600">Loading maintenance requests...</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="min-h-screen bg-gray-50 p-8">
+			<div className="max-w-7xl mx-auto">
+				{/* Table Header */}
+				<div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
+					<div className="grid grid-cols-12 gap-4 px-6 py-4 bg-gray-50 border-b border-gray-200">
+						<div className="col-span-4 flex items-center gap-2">
+							<span className="text-sm font-semibold text-purple-700 uppercase tracking-wide">
+								Maintenance Task
+							</span>
+							<ChevronDown className="w-4 h-4 text-purple-700" />
+						</div>
+						<div className="col-span-2">
+							<span className="text-sm font-semibold text-purple-700 uppercase tracking-wide">
+								Tenant Unit
+							</span>
+						</div>
+						<div className="col-span-2">
+							<span className="text-sm font-semibold text-purple-700 uppercase tracking-wide">
+								Assigned to
+							</span>
+						</div>
+						<div className="col-span-2">
+							<span className="text-sm font-semibold text-purple-700 uppercase tracking-wide">
+								Date
+							</span>
+						</div>
+						<div className="col-span-2">
+							<span className="text-sm font-semibold text-purple-700 uppercase tracking-wide">
+								Status
+							</span>
+						</div>
+					</div>
+
+					{/* Table Rows */}
+					<div className="divide-y divide-gray-200">
+						{requests.length === 0 ? (
+							<div className="text-center py-12 text-gray-500">No maintenance requests found</div>
+						) : (
+							requests.map((request) => (
+								<div
+									key={request.id}
+									className="grid grid-cols-12 gap-4 px-6 py-5 hover:bg-gray-50 transition-colors"
+								>
+									{/* Maintenance Task */}
+									<div className="col-span-4 flex items-center gap-4">
+										{/* Task Image */}
+										<div className="w-16 h-16 rounded-lg bg-gray-200 flex-shrink-0 overflow-hidden">
+											{request.imageUrl ? (
+												<img
+													src={request.imageUrl}
+													alt={request.description}
+													className="w-full h-full object-cover"
+												/>
+											) : (
+												<div className="w-full h-full flex items-center justify-center text-gray-400">
+													<span className="text-2xl">🔧</span>
+												</div>
+											)}
+										</div>
+
+										{/* Task Details */}
+										<div className="flex-1 min-w-0">
+											<div className="flex items-center gap-2 mb-1">
+												<h3 className="font-semibold text-gray-900 truncate">
+													{request.description}
+												</h3>
+												{request.priority && <PriorityBadge priority={request.priority} />}
+											</div>
+											<p className="text-sm text-gray-500">By Tenant</p>
+										</div>
+									</div>
+
+									{/* Tenant Unit */}
+									<div className="col-span-2 flex items-center">
+										<div className="flex items-center gap-3">
+											<UserAvatar name={request.tenantName || "Unknown"} size="md" />
+											<div className="min-w-0">
+												<p className="text-sm font-medium text-gray-900 truncate">
+													{request.tenantName || "Unknown"}
+												</p>
+												<p className="text-sm text-gray-500 truncate">
+													{request.tenantUnit || request.propertyAddress}
+												</p>
+											</div>
+										</div>
+									</div>
+
+									{/* Assigned to */}
+									<div className="col-span-2 flex items-center">
+										{request.assignedWorkerName ? (
+											<div className="flex items-center gap-3">
+												<UserAvatar name={request.assignedWorkerName} size="md" />
+												<div className="min-w-0">
+													<p className="text-sm font-medium text-gray-900 truncate">
+														{request.assignedWorkerName}
+													</p>
+													<p className="text-sm text-gray-500 truncate">
+														{request.assignedWorkerOrg}
+													</p>
+												</div>
+											</div>
+										) : (
+											<span className="text-sm text-gray-400">Unassigned</span>
+										)}
+									</div>
+
+									{/* Date */}
+									<div className="col-span-2 flex items-center">
+										<div className="flex items-center gap-2 text-sm text-gray-700">
+											<svg
+												className="w-4 h-4"
+												fill="none"
+												stroke="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path
+													strokeLinecap="round"
+													strokeLinejoin="round"
+													strokeWidth={2}
+													d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+												/>
+											</svg>
+											<span>{request.formattedDate || "Not scheduled"}</span>
+										</div>
+									</div>
+
+									{/* Status */}
+									<div className="col-span-2 flex items-center">
+										<StatusBadge status={request.status} />
+									</div>
+								</div>
+							))
+						)}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/pages/Properties.tsx

@@ -0,0 +1,94 @@
+import { useEffect, useState } from "react";
+import { getProperties } from "../api/properties.js";
+import type { Property } from "../lib/types.js";
+import { PropertyCard } from "../components/PropertyCard.js";
+import { Button } from "@/components/ui/button";
+
+export default function Properties() {
+	const [properties, setProperties] = useState<Property[]>([]);
+	const [loading, setLoading] = useState(true);
+	const [loadingMore, setLoadingMore] = useState(false);
+	const [hasNextPage, setHasNextPage] = useState(false);
+	const [endCursor, setEndCursor] = useState<string | null>(null);
+
+	useEffect(() => {
+		loadProperties();
+	}, []);
+
+	const loadProperties = async () => {
+		try {
+			setLoading(true);
+			const result = await getProperties(12);
+			setProperties(result.properties);
+			setHasNextPage(result.pageInfo.hasNextPage);
+			setEndCursor(result.pageInfo.endCursor!);
+		} catch (error) {
+			console.error("Error loading properties:", error);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const loadMoreProperties = async () => {
+		if (!endCursor) return;
+
+		try {
+			setLoadingMore(true);
+			const result = await getProperties(12, endCursor);
+			setProperties((prev) => [...prev, ...result.properties]);
+			setHasNextPage(result.pageInfo.hasNextPage);
+			setEndCursor(result.pageInfo.endCursor!);
+		} catch (error) {
+			console.error("Error loading more properties:", error);
+		} finally {
+			setLoadingMore(false);
+		}
+	};
+
+	const handlePropertyClick = (property: Property) => {
+		console.log("Property clicked:", property);
+		// TODO: Navigate to property details page
+	};
+
+	if (loading) {
+		return (
+			<div className="flex items-center justify-center h-screen bg-gray-50">
+				<div className="text-lg text-gray-600">Loading properties...</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="min-h-screen bg-gray-50 p-8">
+			<div className="max-w-7xl mx-auto">
+				{/* Properties Grid */}
+				{properties.length === 0 ? (
+					<div className="text-center py-12">
+						<p className="text-gray-500 text-lg">No properties found</p>
+					</div>
+				) : (
+					<>
+						<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+							{properties.map((property) => (
+								<PropertyCard key={property.id} property={property} onClick={handlePropertyClick} />
+							))}
+						</div>
+
+						{/* Load More Button */}
+						{hasNextPage && (
+							<div className="flex justify-center mt-8">
+								<Button
+									onClick={loadMoreProperties}
+									disabled={loadingMore}
+									className="px-8 py-3 bg-purple-700 hover:bg-purple-800 text-white rounded-lg font-medium transition-colors"
+								>
+									{loadingMore ? "Loading..." : "Load More"}
+								</Button>
+							</div>
+						)}
+					</>
+				)}
+			</div>
+		</div>
+	);
+}