@salesforce/webapp-template-app-react-sample-b2x-experimental 1.84.0 → 1.85.0

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/pages/Dashboard.tsx

@@ -1,41 +1,9 @@
-import {
-	Card,
-	CardHeader,
-	CardTitle,
-	CardContent,
-	CardFooter,
-} from "../components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Link } from "react-router";
+import { MaintenanceRequestIcon } from "@/components/MaintenanceRequestIcon";
 import { useWeather } from "@/hooks/useWeather";
 import { useMaintenanceRequests } from "@/hooks/useMaintenanceRequests";
 
-function maintenanceProgressPercent(status: string | null): number {
-	switch (status) {
-		case "New":
-			return 0;
-		case "Assigned":
-			return 25;
-		case "In Progress":
-			return 50;
-		case "On Hold":
-			return 75;
-		case "Resolved":
-			return 100;
-		default:
-			return 0;
-	}
-}
-
-function formatRequestDate(iso: string | null): string {
-	if (!iso) return "—";
-	try {
-		const d = new Date(iso);
-		return d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
-	} catch {
-		return iso;
-	}
-}
-
 export default function Dashboard() {
 	const { data: weather, loading: weatherLoading, error: weatherError } = useWeather();
 	const {
@@ -43,81 +11,86 @@ export default function Dashboard() {
 		loading: maintenanceLoading,
 		error: maintenanceError,
 	} = useMaintenanceRequests();
-	const recentMaintenance = maintenanceRequests.slice(0, 3);
+	const recentMaintenance = maintenanceRequests.slice(0, 5);
 
 	return (
-		<div className="mx-auto grid max-w-[1100px] grid-cols-1 gap-6 md:grid-cols-2">
-			<div className="space-y-6">
-				<Card className="rounded-2xl shadow-md">
-					<CardHeader className="flex flex-row items-center justify-between pb-2">
-						<CardTitle className="text-base text-primary">Maintenance</CardTitle>
+		<div className="mx-auto flex max-w-[1100px] flex-col gap-6 lg:flex-row">
+			{/* Maintenance: full width on mobile, flexible on desktop so content is not clipped */}
+			<div className="min-w-0 flex-1">
+				<Card className="border-gray-200 p-6 shadow-sm">
+					<div className="mb-6 flex items-center justify-between">
+						<h2 className="text-lg font-semibold uppercase tracking-wide text-primary">
+							Maintenance Requests
+						</h2>
 						<Link
-							to="/maintenance"
-							className="inline-flex h-8 cursor-pointer items-center justify-center rounded-xl bg-primary px-3 text-sm font-medium text-primary-foreground transition-colors duration-200 hover:bg-primary/90"
+							to="/maintenance/requests"
+							className="cursor-pointer text-primary underline-offset-4 hover:underline"
 						>
-							+ New Request
+							See All
 						</Link>
-					</CardHeader>
-					<CardContent className="space-y-4">
-						{maintenanceLoading && <p className="text-sm text-muted-foreground">Loading…</p>}
+					</div>
+					<CardContent className="space-y-4 p-0">
+						{maintenanceLoading && (
+							<p className="py-8 text-center text-sm text-muted-foreground">Loading…</p>
+						)}
 						{maintenanceError && (
-							<p className="text-sm text-destructive" role="alert">
+							<p className="py-4 text-sm text-destructive" role="alert">
 								{maintenanceError}
 							</p>
 						)}
 						{!maintenanceLoading && !maintenanceError && recentMaintenance.length === 0 && (
-							<p className="text-sm text-muted-foreground">
-								No requests yet.{" "}
-								<Link to="/maintenance" className="text-primary hover:underline">
-									Submit one
-								</Link>
-								.
-							</p>
+							<div className="py-8 text-center text-gray-500">No maintenance requests</div>
 						)}
 						{!maintenanceLoading &&
 							!maintenanceError &&
-							recentMaintenance.map((r) => {
-								const pct = maintenanceProgressPercent(r.status);
-								const isResolved = r.status === "Resolved";
-								return (
-									<div
-										key={r.id}
-										className="flex items-start gap-4 border-b border-border py-3 last:border-b-0"
-									>
-										<div className="size-14 shrink-0 rounded-lg bg-muted" aria-hidden />
-										<div className="min-w-0 flex-1">
-											<p className="font-semibold text-foreground">
-												{r.title ?? r.description ?? "—"}
-											</p>
-											<p className="text-xs text-muted-foreground">
-												Submitted {formatRequestDate(r.dateRequested)}.
-											</p>
-											<div className="my-2 h-1.5 overflow-hidden rounded-full bg-muted">
-												<div
-													className="h-full rounded-full bg-primary transition-[width]"
-													style={{ width: `${pct}%` }}
-													aria-hidden
-												/>
-											</div>
-											<p className={`text-xs ${isResolved ? "text-green-600" : "text-primary"}`}>
-												{isResolved ? "100% Completed" : `${pct}% ${r.status ?? "New"}`}
-											</p>
+							recentMaintenance.map((request) => (
+								<div
+									key={request.id}
+									className="flex flex-wrap items-center gap-3 rounded-lg bg-gray-50 p-4 transition-colors hover:bg-gray-100 sm:flex-nowrap"
+								>
+									<MaintenanceRequestIcon type={request.type} />
+									<div className="w-28 flex-shrink-0 sm:w-32">
+										<div className="mb-0.5 flex flex-wrap items-center gap-2">
+											<h3 className="truncate font-semibold text-gray-900">
+												{request.type || "Request"}
+											</h3>
+											<span className="text-gray-500">|</span>
+											<span className="truncate text-sm text-gray-600">
+												{request.name ?? `${request.id.substring(0, 8)}…`}
+											</span>
 										</div>
+										<p className="truncate text-sm text-gray-500">
+											Request ID: {request.id.substring(0, 8)}…
+										</p>
 									</div>
-								);
-							})}
+									<div className="min-w-0 flex-1 sm:min-w-[18rem]">
+										<p
+											className="truncate text-sm text-gray-700"
+											title={request.description || "No description"}
+										>
+											{request.description || "No description"}
+										</p>
+									</div>
+									<div className="flex w-48 flex-shrink-0 items-center gap-2">
+										<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-teal-100">
+											<span className="text-sm font-medium text-teal-800">
+												{request.tenantName?.charAt(0)?.toUpperCase() || "?"}
+											</span>
+										</div>
+										<span
+											className="truncate text-sm font-medium text-gray-700"
+											title={request.tenantName || "Unassigned"}
+										>
+											{request.tenantName || "Unassigned"}
+										</span>
+									</div>
+								</div>
+							))}
 					</CardContent>
-					<CardFooter className="justify-end pt-2">
-						<Link
-							to="/maintenance"
-							className="cursor-pointer text-sm font-medium text-primary transition-colors duration-200 hover:underline"
-						>
-							See All
-						</Link>
-					</CardFooter>
 				</Card>
 			</div>
-			<div>
+			{/* Weather: stays visible and clear */}
+			<div className="w-full shrink-0 lg:w-[320px]">
 				<Card className="rounded-2xl shadow-md">
 					<CardHeader>
 						<CardTitle className="text-primary">Weather</CardTitle>

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/pages/HelpCenter.tsx

@@ -1,4 +1,4 @@
-import { Card, CardHeader, CardTitle, CardContent } from "../components/ui/card";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 
 export default function HelpCenter() {
 	return (

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

@@ -1,8 +1,8 @@
 import { Link, useNavigate } from "react-router";
-import { useRef, useState } from "react";
-import { Button } from "../components/ui/button";
-import { Input } from "../components/ui/input";
-import { Card, CardContent } from "../components/ui/card";
+import { useRef, useState, type ChangeEvent } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent } from "@/components/ui/card";
 import { usePropertyListingSearch } from "@/hooks/usePropertyListingSearch";
 import {
 	usePropertyPrimaryImages,
@@ -10,7 +10,17 @@ import {
 } from "@/hooks/usePropertyPrimaryImages";
 import { usePropertyAddresses } from "@/hooks/usePropertyAddresses";
 import { createNewsletterLead } from "@/api/leadApi";
-import { Phone, Send, ChevronDown, ChevronUp, MessageCircle, HelpCircle } from "lucide-react";
+import {
+	Phone,
+	Send,
+	ChevronDown,
+	ChevronUp,
+	MessageCircle,
+	HelpCircle,
+	Facebook,
+	Instagram,
+	Twitter,
+} from "lucide-react";
 
 const HERO_IMAGE = "https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=1200&q=85";
 const CITY_IMAGE = "https://images.unsplash.com/photo-1514565131-fce0801e5785?w=800&q=85";
@@ -386,7 +396,7 @@ export default function Home() {
 									type="email"
 									placeholder="Enter your email"
 									value={footerEmail}
-									onChange={(e) => setFooterEmail(e.target.value)}
+									onChange={(e: ChangeEvent<HTMLInputElement>) => setFooterEmail(e.target.value)}
 									disabled={newsletterSubmitting}
 									className="max-w-xs border-teal-600 bg-teal-900/50 text-white placeholder:text-teal-300"
 									aria-label="Email for updates"
@@ -462,13 +472,13 @@ export default function Home() {
 					</p>
 					<div className="flex gap-4">
 						<a href="#" className="text-teal-300 hover:text-white" aria-label="Facebook">
-							f
+							<Facebook className="size-5" aria-hidden />
 						</a>
 						<a href="#" className="text-teal-300 hover:text-white" aria-label="Instagram">
-							ig
+							<Instagram className="size-5" aria-hidden />
 						</a>
 						<a href="#" className="text-teal-300 hover:text-white" aria-label="Twitter">
-							X
+							<Twitter className="size-5" aria-hidden />
 						</a>
 					</div>
 				</div>

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

@@ -1,17 +1,11 @@
-import { useState, useCallback } from "react";
-import { Button } from "../components/ui/button";
-import { Input } from "../components/ui/input";
-import { Label } from "../components/ui/label";
-import { Card, CardHeader, CardTitle, CardContent } from "../components/ui/card";
-import {
-	Table,
-	TableBody,
-	TableCell,
-	TableHead,
-	TableHeader,
-	TableRow,
-} from "../components/ui/table";
+import { useState, useCallback, type ChangeEvent } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 import { Calendar, ArrowRight } from "lucide-react";
+import { MaintenanceRequestIcon } from "@/components/MaintenanceRequestIcon";
+import { StatusBadge } from "@/components/StatusBadge";
 import { useMaintenanceRequests } from "@/hooks/useMaintenanceRequests";
 import { createMaintenanceRequest } from "@/api/maintenanceRequestApi";
 
@@ -33,36 +27,6 @@ const PRIORITY_OPTIONS = [
 	{ value: "Emergency", label: "Emergency (2hr)" },
 ] as const;
 
-function formatDate(iso: string | null): string {
-	if (!iso) return "—";
-	try {
-		const d = new Date(iso);
-		return d.toLocaleDateString("en-US", {
-			month: "short",
-			day: "numeric",
-			year: "numeric",
-		});
-	} catch {
-		return iso;
-	}
-}
-
-function statusBadgeClass(status: string | null): string {
-	if (!status) return "bg-muted text-muted-foreground";
-	switch (status) {
-		case "Resolved":
-			return "bg-green-100 text-green-700";
-		case "In Progress":
-		case "Assigned":
-			return "bg-blue-100 text-blue-700";
-		case "On Hold":
-			return "bg-amber-100 text-amber-700";
-		case "New":
-		default:
-			return "bg-muted text-muted-foreground";
-	}
-}
-
 export default function Maintenance() {
 	const { requests, loading, error, refetch } = useMaintenanceRequests();
 	const [title, setTitle] = useState("");
@@ -81,8 +45,9 @@ export default function Maintenance() {
 		async (e: React.FormEvent) => {
 			e.preventDefault();
 			const t = title.trim();
-			if (!t) {
-				setSubmitError("Title is required");
+			const desc = description.trim();
+			if (!t && !desc) {
+				setSubmitError("Title or description is required");
 				return;
 			}
 			setSubmitting(true);
@@ -90,12 +55,11 @@ export default function Maintenance() {
 			setSubmitSuccess(false);
 			try {
 				await createMaintenanceRequest({
-					Title__c: t,
-					Description__c: description.trim() || undefined,
+					Description__c: desc || t,
 					Type__c: type.trim() || undefined,
 					Priority__c: priority,
 					Status__c: "New",
-					Date_Requested__c: dateRequested || undefined,
+					Scheduled__c: dateRequested || undefined,
 				});
 				setSubmitSuccess(true);
 				setTitle("");
@@ -128,7 +92,7 @@ export default function Maintenance() {
 									id="maintenance-title"
 									type="text"
 									value={title}
-									onChange={(e) => setTitle(e.target.value)}
+									onChange={(e: ChangeEvent<HTMLInputElement>) => setTitle(e.target.value)}
 									placeholder="e.g. Kitchen faucet leak"
 									aria-label="Title"
 									required
@@ -141,7 +105,7 @@ export default function Maintenance() {
 									className="flex h-9 w-full rounded-xl border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-[color,box-shadow] duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-primary"
 									aria-label="Priority"
 									value={priority}
-									onChange={(e) => setPriority(e.target.value)}
+									onChange={(e: ChangeEvent<HTMLSelectElement>) => setPriority(e.target.value)}
 								>
 									{PRIORITY_OPTIONS.map((o) => (
 										<option key={o.value} value={o.value}>
@@ -159,7 +123,9 @@ export default function Maintenance() {
 										id="maintenance-date"
 										type="date"
 										value={dateRequested}
-										onChange={(e) => setDateRequested(e.target.value)}
+										onChange={(e: ChangeEvent<HTMLInputElement>) =>
+											setDateRequested(e.target.value)
+										}
 										className="pr-10"
 										aria-label="Date reported"
 									/>
@@ -175,7 +141,7 @@ export default function Maintenance() {
 									className="flex h-9 w-full rounded-xl border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-[color,box-shadow] duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-primary"
 									aria-label="Type"
 									value={type}
-									onChange={(e) => setType(e.target.value)}
+									onChange={(e: ChangeEvent<HTMLSelectElement>) => setType(e.target.value)}
 								>
 									<option value="">—</option>
 									{TYPE_OPTIONS.map((o) => (
@@ -195,7 +161,7 @@ export default function Maintenance() {
 								className="min-h-[100px] w-full resize-y rounded-xl border border-input bg-transparent px-3 py-2 text-sm shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-primary transition-colors duration-200"
 								aria-label="Description"
 								value={description}
-								onChange={(e) => setDescription(e.target.value)}
+								onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setDescription(e.target.value)}
 							/>
 						</div>
 						{submitError && (
@@ -221,59 +187,72 @@ export default function Maintenance() {
 					</form>
 				</CardContent>
 			</Card>
-			<Card className="rounded-2xl shadow-md">
-				<CardHeader>
-					<CardTitle className="text-xl text-primary">Your requests</CardTitle>
-				</CardHeader>
-				<CardContent className="p-0">
+			<Card className="border-gray-200 p-6 shadow-sm">
+				<div className="mb-6">
+					<h2 className="text-lg font-semibold uppercase tracking-wide text-primary">
+						Maintenance Requests
+					</h2>
+				</div>
+				<CardContent className="space-y-4 p-0">
 					{error && (
-						<p className="px-6 py-4 text-sm text-destructive" role="alert">
+						<p className="py-4 text-sm text-destructive" role="alert">
 							{error}
 						</p>
 					)}
-					{loading && <p className="px-6 py-4 text-sm text-muted-foreground">Loading…</p>}
-					{!loading && !error && (
-						<div className="overflow-x-auto">
-							<Table>
-								<TableHeader>
-									<TableRow>
-										<TableHead className="font-semibold text-primary">Title</TableHead>
-										<TableHead className="font-semibold text-primary">Work order</TableHead>
-										<TableHead className="font-semibold text-primary">Type</TableHead>
-										<TableHead className="font-semibold text-primary">Date</TableHead>
-										<TableHead className="font-semibold text-primary">Status</TableHead>
-									</TableRow>
-								</TableHeader>
-								<TableBody>
-									{requests.length === 0 ? (
-										<TableRow>
-											<TableCell colSpan={5} className="text-center text-muted-foreground py-8">
-												No maintenance requests yet. Submit one above.
-											</TableCell>
-										</TableRow>
-									) : (
-										requests.map((r) => (
-											<TableRow key={r.id}>
-												<TableCell className="font-medium">
-													{r.title ?? r.description ?? "—"}
-												</TableCell>
-												<TableCell>{r.name ?? "—"}</TableCell>
-												<TableCell>{r.type ?? "—"}</TableCell>
-												<TableCell>{formatDate(r.dateRequested)}</TableCell>
-												<TableCell>
-													<span
-														className={`inline-block rounded-full px-3 py-1 text-xs font-medium ${statusBadgeClass(r.status)}`}
-													>
-														{r.status ?? "—"}
-													</span>
-												</TableCell>
-											</TableRow>
-										))
-									)}
-								</TableBody>
-							</Table>
+					{loading && <p className="py-8 text-center text-sm text-muted-foreground">Loading…</p>}
+					{!loading && !error && requests.length === 0 && (
+						<div className="py-8 text-center text-gray-500">
+							No maintenance requests yet. Submit one above.
 						</div>
 					)}
+					{!loading &&
+						!error &&
+						requests.map((request) => (
+							<div
+								key={request.id}
+								className="flex flex-wrap items-center gap-3 rounded-lg bg-gray-50 p-4 transition-colors hover:bg-gray-100 sm:flex-nowrap"
+							>
+								<MaintenanceRequestIcon type={request.type} />
+								<div className="w-28 flex-shrink-0 sm:w-32">
+									<div className="mb-0.5 flex flex-wrap items-center gap-2">
+										<h3 className="truncate font-semibold text-gray-900">
+											{request.type || "Request"}
+										</h3>
+										<span className="text-gray-500">|</span>
+										<span className="truncate text-sm text-gray-600">
+											{request.name ?? `${request.id.substring(0, 8)}…`}
+										</span>
+									</div>
+									<p className="truncate text-sm text-gray-500">
+										Request ID: {request.id.substring(0, 8)}…
+									</p>
+								</div>
+								<div className="min-w-0 flex-1 sm:min-w-[18rem]">
+									<p
+										className="truncate text-sm text-gray-700"
+										title={request.description || "No description"}
+									>
+										{request.description || "No description"}
+									</p>
+								</div>
+								<div className="flex w-48 flex-shrink-0 items-center gap-2">
+									<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-teal-100">
+										<span className="text-sm font-medium text-teal-800">
+											{request.tenantName?.charAt(0)?.toUpperCase() || "?"}
+										</span>
+									</div>
+									<span
+										className="truncate text-sm font-medium text-gray-700"
+										title={request.tenantName || "Unassigned"}
+									>
+										{request.tenantName || "Unassigned"}
+									</span>
+								</div>
+								<div className="flex flex-shrink-0 items-center">
+									<StatusBadge status={request.status || "—"} />
+								</div>
+							</div>
+						))}
 				</CardContent>
 			</Card>
 		</div>

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/pages/NotFound.tsx

@@ -1,5 +1,5 @@
 import { Link } from "react-router";
-import { Button } from "../components/ui/button";
+import { Button } from "@/components/ui/button";
 
 export default function NotFound() {
 	return (