@salesforce/webapp-template-app-react-sample-b2e-experimental 1.49.0 → 1.50.1

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

@@ -0,0 +1,52 @@
+import React from "react";
+import { Card } from "@/components/ui/card";
+import upgraphIcon from "../assets/icons/upgraph.svg";
+import downgraphIcon from "../assets/icons/downgraph.svg";
+import { MoreVertical } from "lucide-react";
+
+interface StatCardProps {
+	title: string;
+	value: number | string;
+	trend?: {
+		value: number;
+		isPositive: boolean;
+	};
+	subtitle?: string;
+	onClick?: () => void;
+}
+
+export const StatCard: React.FC<StatCardProps> = ({ title, value, trend, subtitle, onClick }) => {
+	return (
+		<Card
+			className={`p-4 border-gray-200 shadow-sm relative ${onClick ? "cursor-pointer hover:shadow-lg transition-shadow" : ""}`}
+			onClick={onClick}
+		>
+			{/* Three-dot menu */}
+			<button className="absolute top-4 right-4 p-1 hover:bg-gray-100 rounded-md transition-colors">
+				<MoreVertical className="w-4 h-4 text-gray-400" />
+			</button>
+
+			<div className="space-y-1">
+				<p className="text-sm font-medium text-gray-600 uppercase tracking-wide">{title}</p>
+				<div className="flex items-baseline gap-3">
+					<p className="text-4xl font-bold text-primary-purple">{value}</p>
+					{trend && (
+						<span
+							className={`inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-sm font-medium ${
+								trend.isPositive ? "bg-cyan-100 text-cyan-800" : "bg-pink-100 text-pink-800"
+							}`}
+						>
+							<img
+								src={trend.isPositive ? upgraphIcon : downgraphIcon}
+								alt={trend.isPositive ? "Up" : "Down"}
+								className="w-4 h-4"
+							/>
+							{Math.abs(trend.value)}%
+						</span>
+					)}
+				</div>
+				{subtitle && <p className="text-sm text-gray-500 mt-1">{subtitle}</p>}
+			</div>
+		</Card>
+	);
+};

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

@@ -0,0 +1,37 @@
+import React from "react";
+import { Check } from "lucide-react";
+
+interface StatusBadgeProps {
+	status: "new" | "assigned" | "scheduled" | "in_progress" | "completed";
+}
+
+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 labels = {
+		new: "Needs Action",
+		assigned: "Assigned",
+		scheduled: "Scheduled",
+		in_progress: "In Progress",
+		completed: "Completed",
+	};
+
+	const showCheckmark = status === "completed";
+	const showDot = status === "new" || status === "in_progress";
+
+	return (
+		<span
+			className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm font-medium ${styles[status]}`}
+		>
+			{showCheckmark && <Check className="w-4 h-4" />}
+			{showDot && <span className="w-2 h-2 rounded-full bg-current" />}
+			{labels[status]}
+		</span>
+	);
+};

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

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from "react";
+import { Search, Bell, ChevronDown, Menu } from "lucide-react";
+import zenLogo from "../assets/icons/zen-logo.svg";
+import { getUserInfo } from "../api/dashboard.js";
+
+interface TopBarProps {
+	onMenuClick?: () => void;
+}
+
+export const TopBar: React.FC<TopBarProps> = ({ onMenuClick }) => {
+	const [userName, setUserName] = useState<string>("User");
+
+	useEffect(() => {
+		const loadUserInfo = async () => {
+			const userInfo = await getUserInfo();
+			if (userInfo) {
+				setUserName(userInfo.name);
+			}
+		};
+		loadUserInfo();
+	}, []);
+	return (
+		<div className="bg-[#372949] text-white h-16 flex items-center justify-between px-6">
+			{/* Left section - Logo and Menu */}
+			<div className="flex items-center gap-4">
+				<button
+					onClick={onMenuClick}
+					className="p-2 hover:bg-purple-700 rounded-md transition-colors md:hidden"
+					aria-label="Toggle menu"
+				>
+					<Menu className="w-6 h-6" />
+				</button>
+				<div className="flex items-center gap-2">
+					<img src={zenLogo} alt="Zenlease Logo" className="w-8 h-8" />
+					<span className="text-xl tracking-wide">
+						<span className="font-light">ZEN</span>
+						<span className="font-semibold">LEASE</span>
+					</span>
+				</div>
+			</div>
+
+			{/* Right section - Search, Notifications, Profile */}
+			<div className="flex items-center gap-4">
+				{/* Search Icon (Mobile) */}
+				<button
+					className="p-2 hover:bg-purple-700 rounded-md transition-colors md:hidden"
+					aria-label="Search"
+				>
+					<Search className="w-5 h-5" />
+				</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>
+
+				{/* User Profile */}
+				<button className="flex items-center gap-2 px-3 py-2 hover:bg-purple-700 rounded-md transition-colors">
+					<div className="w-8 h-8 bg-purple-300 rounded-full flex items-center justify-center text-purple-900 font-semibold">
+						{userName.charAt(0).toUpperCase()}
+					</div>
+					<span className="hidden md:inline font-medium">{userName.toUpperCase()}</span>
+					<ChevronDown className="w-4 h-4 hidden md:inline" />
+				</button>
+			</div>
+		</div>
+	);
+};

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/components/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/webapplications/appreactsampleb2e/src/components/VerticalNav.tsx

@@ -0,0 +1,54 @@
+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 usersIcon from "../assets/icons/users.svg";
+import supportIcon from "../assets/icons/support.svg";
+
+interface NavItem {
+	path: string;
+	icon: string;
+	label: string;
+}
+
+const navItems: NavItem[] = [
+	{ path: "/", icon: dashboardIcon, label: "Dashboard" },
+	{ path: "/files", icon: filesIcon, label: "Files" },
+	{ path: "/properties", icon: propertiesIcon, label: "Properties" },
+	{ path: "/maintenance", icon: maintenanceIcon, label: "Maintenance" },
+	{ path: "/users", icon: usersIcon, label: "Users" },
+	{ path: "/support", icon: supportIcon, label: "Support" },
+];
+
+export const VerticalNav: React.FC = () => {
+	const location = useLocation();
+
+	const isActive = (path: string) => {
+		if (path === "/") {
+			return location.pathname === "/";
+		}
+		return location.pathname.startsWith(path);
+	};
+
+	return (
+		<div className="flex flex-col w-24 bg-white border-r border-gray-200 py-8 space-y-4">
+			{navItems.map((item) => (
+				<Link
+					key={item.path}
+					to={item.path}
+					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">{item.label}</span>
+				</Link>
+			))}
+		</div>
+	);
+};

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

@@ -0,0 +1,69 @@
+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/webapplications/appreactsampleb2e/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 };

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

@@ -0,0 +1,92 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+function Card({
+	className,
+	size = "default",
+	...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+	return (
+		<div
+			data-slot="card"
+			data-size={size}
+			className={cn(
+				"ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-header"
+			className={cn(
+				"gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-title"
+			className={cn(
+				"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-action"
+			className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+			{...props}
+		/>
+	);
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-content"
+			className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+			{...props}
+		/>
+	);
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-footer"
+			className={cn(
+				"bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

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

@@ -0,0 +1,143 @@
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+
+import { cn } from "../../lib/utils";
+import { Button } from "./button";
+import { XIcon } from "lucide-react";
+
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+	return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+	return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+	return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+	return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+	className,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+	return (
+		<DialogPrimitive.Overlay
+			data-slot="dialog-overlay"
+			className={cn(
+				"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DialogContent({
+	className,
+	children,
+	showCloseButton = true,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+	showCloseButton?: boolean;
+}) {
+	return (
+		<DialogPortal>
+			<DialogOverlay />
+			<DialogPrimitive.Content
+				data-slot="dialog-content"
+				className={cn(
+					"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				{showCloseButton && (
+					<DialogPrimitive.Close data-slot="dialog-close" asChild>
+						<Button variant="ghost" className="absolute top-2 right-2" size="icon-sm">
+							<XIcon />
+							<span className="sr-only">Close</span>
+						</Button>
+					</DialogPrimitive.Close>
+				)}
+			</DialogPrimitive.Content>
+		</DialogPortal>
+	);
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div data-slot="dialog-header" className={cn("gap-2 flex flex-col", className)} {...props} />
+	);
+}
+
+function DialogFooter({
+	className,
+	showCloseButton = false,
+	children,
+	...props
+}: React.ComponentProps<"div"> & {
+	showCloseButton?: boolean;
+}) {
+	return (
+		<div
+			data-slot="dialog-footer"
+			className={cn(
+				"bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			{showCloseButton && (
+				<DialogPrimitive.Close asChild>
+					<Button variant="outline">Close</Button>
+				</DialogPrimitive.Close>
+			)}
+		</div>
+	);
+}
+
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+	return (
+		<DialogPrimitive.Title
+			data-slot="dialog-title"
+			className={cn("text-base leading-none font-medium", className)}
+			{...props}
+		/>
+	);
+}
+
+function DialogDescription({
+	className,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+	return (
+		<DialogPrimitive.Description
+			data-slot="dialog-description"
+			className={cn(
+				"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+	DialogTrigger,
+};