@salesforce/webapp-template-app-react-sample-b2e-experimental 1.80.0 → 1.81.0

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/api/graphql-operations-types.ts

@@ -22,6 +22,7 @@ export type Scalars = {
 	DateTime: { input: string; output: string };
 	Double: { input: number | string; output: number };
 	Email: { input: string; output: string };
+	EncryptedString: { input: string; output: string };
 	/** Can be set to an ID or a Reference to the result of another mutation operation. */
 	IdOrRef: { input: string; output: string };
 	Latitude: { input: number | string; output: number };
@@ -45,8 +46,13 @@ export type Application__CUpdateInput = {
 };
 
 export type Application__CUpdateRepresentation = {
+	Employment__c?: InputMaybe<Scalars["LongTextArea"]["input"]>;
 	OwnerId?: InputMaybe<Scalars["IdOrRef"]["input"]>;
+	Property__c?: InputMaybe<Scalars["IdOrRef"]["input"]>;
+	References__c?: InputMaybe<Scalars["LongTextArea"]["input"]>;
+	Start_Date__c?: InputMaybe<Scalars["Date"]["input"]>;
 	Status__c?: InputMaybe<Scalars["Picklist"]["input"]>;
+	User__c?: InputMaybe<Scalars["IdOrRef"]["input"]>;
 };
 
 export enum DataType {
@@ -88,14 +94,52 @@ export enum FieldExtraTypeInfo {
 	SwitchablePersonname = "SWITCHABLE_PERSONNAME",
 }
 
+export enum LayoutComponentType {
+	Canvas = "CANVAS",
+	CustomLink = "CUSTOM_LINK",
+	EmptySpace = "EMPTY_SPACE",
+	Field = "FIELD",
+	ReportChart = "REPORT_CHART",
+	VisualforcePage = "VISUALFORCE_PAGE",
+}
+
+export enum LayoutMode {
+	Create = "CREATE",
+	Edit = "EDIT",
+	View = "VIEW",
+}
+
+export enum LayoutType {
+	Compact = "COMPACT",
+	Full = "FULL",
+}
+
 export type Maintenance_Request__CUpdateInput = {
 	Id: Scalars["IdOrRef"]["input"];
 	Maintenance_Request__c: Maintenance_Request__CUpdateRepresentation;
 };
 
 export type Maintenance_Request__CUpdateRepresentation = {
+	Actual_Cost__c?: InputMaybe<Scalars["Currency"]["input"]>;
+	Assigned_Worker__c?: InputMaybe<Scalars["IdOrRef"]["input"]>;
+	Completed__c?: InputMaybe<Scalars["DateTime"]["input"]>;
+	Description__c?: InputMaybe<Scalars["LongTextArea"]["input"]>;
+	Est_Cost__c?: InputMaybe<Scalars["Currency"]["input"]>;
 	OwnerId?: InputMaybe<Scalars["IdOrRef"]["input"]>;
+	Priority__c?: InputMaybe<Scalars["Picklist"]["input"]>;
+	Property__c?: InputMaybe<Scalars["IdOrRef"]["input"]>;
+	Scheduled__c?: InputMaybe<Scalars["DateTime"]["input"]>;
 	Status__c?: InputMaybe<Scalars["Picklist"]["input"]>;
+	Tenant_Home__c?: InputMaybe<Scalars["Boolean"]["input"]>;
+	Type__c?: InputMaybe<Scalars["Picklist"]["input"]>;
+	User__c?: InputMaybe<Scalars["IdOrRef"]["input"]>;
+};
+
+/** Input for ObjectInfo and PickValues */
+export type ObjectInfoInput = {
+	apiName: Scalars["String"]["input"];
+	fieldNames?: InputMaybe<Array<Scalars["String"]["input"]>>;
+	recordTypeIDs?: InputMaybe<Array<Scalars["ID"]["input"]>>;
 };
 
 export enum ResultOrder {
@@ -103,6 +147,17 @@ export enum ResultOrder {
 	Desc = "DESC",
 }
 
+export enum TabOrder {
+	LeftRight = "LEFT_RIGHT",
+	TopDown = "TOP_DOWN",
+}
+
+export enum UiBehavior {
+	Edit = "EDIT",
+	Readonly = "READONLY",
+	Required = "REQUIRED",
+}
+
 export type GetApplicationsQueryVariables = Exact<{ [key: string]: never }>;
 
 export type GetApplicationsQuery = {
@@ -113,10 +168,9 @@ export type GetApplicationsQuery = {
 					node?: {
 						Id: string;
 						Name?: { value?: string | null } | null;
-						Contact__r?: {
+						User__r?: {
 							FirstName?: { value?: string | null } | null;
 							LastName?: { value?: string | null } | null;
-							Name?: { value?: string | null } | null;
 						} | null;
 						Property__r?: {
 							Name?: { value?: string | null } | null;
@@ -177,7 +231,7 @@ export type GetOpenApplicationsQuery = {
 					node?: {
 						Id: string;
 						Name?: { value?: string | null } | null;
-						Contact__r?: { Name?: { value?: string | null } | null } | null;
+						User__r?: { Name?: { value?: string | null } | null } | null;
 						Property__r?: { Address__c?: { value?: string | null } | null } | null;
 						Status__c?: { value?: string | null } | null;
 						CreatedDate?: { value?: string | null } | null;
@@ -215,10 +269,7 @@ export type GetMaintenanceRequestsQuery = {
 						Id: string;
 						Name?: { value?: string | null } | null;
 						Property__r?: { Address__c?: { value?: string | null } | null } | null;
-						Tenant__r?: {
-							Name?: { value?: string | null } | null;
-							User__r?: { Name?: { value?: string | null } | null } | null;
-						} | null;
+						User__r?: { Name?: { value?: string | null } | null } | null;
 						Type__c?: { value?: string | null } | null;
 						Priority__c?: { value?: string | null } | null;
 						Status__c?: { value?: string | null } | null;
@@ -253,11 +304,11 @@ export type GetAllMaintenanceRequestsQuery = {
 							Address__c?: { value?: string | null } | null;
 							Name?: { value?: string | null } | null;
 						} | null;
-						Tenant__r?: {
+						User__r?: { Name?: { value?: string | null } | null } | null;
+						Assigned_Worker__r?: {
 							Name?: { value?: string | null } | null;
-							User__r?: { Name?: { value?: string | null } | null } | null;
+							Employment_Type__c?: { value?: string | null } | null;
 						} | null;
-						Owner?: { Name?: { value?: string | null } | null } | Record<PropertyKey, never> | null;
 						ContentDocumentLinks?: {
 							edges?: Array<{
 								node?: {
@@ -312,10 +363,10 @@ export type GetPropertiesQuery = {
 						Year_Built__c?: { value?: number | null } | null;
 						Hero_Image__c?: { value?: string | null } | null;
 						Deposit__c?: { value?: number | null } | null;
-						Parking__c?: { value?: string | null } | null;
-						Pet_Friendly__c?: { value?: string | null } | null;
+						Parking__c?: { value?: number | null } | null;
+						Pet_Friendly__c?: { value?: boolean | null } | null;
 						Available_Date__c?: { value?: string | null } | null;
-						Lease_Term__c?: { value?: string | null } | null;
+						Lease_Term__c?: { value?: number | null } | null;
 						Features__c?: { value?: string | null } | null;
 						Utilities__c?: { value?: string | null } | null;
 						Tour_URL__c?: { value?: string | null } | null;
@@ -327,3 +378,100 @@ export type GetPropertiesQuery = {
 		};
 	};
 };
+
+export type GetObjectInfosQueryVariables = Exact<{
+	apiNames: Array<Scalars["String"]["input"]> | Scalars["String"]["input"];
+}>;
+
+export type GetObjectInfosQuery = {
+	uiapi: {
+		objectInfos?: Array<{
+			ApiName: string;
+			label?: string | null;
+			labelPlural?: string | null;
+			nameFields: Array<string | null>;
+			defaultRecordTypeId?: string | null;
+			keyPrefix?: string | null;
+			layoutable: boolean;
+			queryable: boolean;
+			searchable: boolean;
+			updateable: boolean;
+			deletable: boolean;
+			createable: boolean;
+			custom: boolean;
+			mruEnabled: boolean;
+			feedEnabled: boolean;
+			fields: Array<
+				| {
+						ApiName: string;
+						label?: string | null;
+						dataType?: DataType | null;
+						relationshipName?: string | null;
+						reference: boolean;
+						compound: boolean;
+						compoundFieldName?: string | null;
+						compoundComponentName?: string | null;
+						controllingFields: Array<string | null>;
+						controllerName?: string | null;
+						referenceToInfos: Array<{ ApiName: string; nameFields: Array<string | null> } | null>;
+				  }
+				| {
+						ApiName: string;
+						label?: string | null;
+						dataType?: DataType | null;
+						relationshipName?: string | null;
+						reference: boolean;
+						compound: boolean;
+						compoundFieldName?: string | null;
+						compoundComponentName?: string | null;
+						controllingFields: Array<string | null>;
+						controllerName?: string | null;
+						referenceToInfos: Array<{ ApiName: string; nameFields: Array<string | null> } | null>;
+				  }
+				| null
+			>;
+			recordTypeInfos: Array<{
+				recordTypeId?: string | null;
+				name?: string | null;
+				master: boolean;
+				available: boolean;
+				defaultRecordTypeMapping: boolean;
+			} | null>;
+			themeInfo?: { color?: string | null; iconUrl?: string | null } | null;
+			childRelationships: Array<{
+				relationshipName?: string | null;
+				fieldName?: string | null;
+				childObjectApiName: string;
+			} | null>;
+			dependentFields: Array<{ controllingField: string } | null>;
+		} | null> | null;
+	};
+};
+
+export type GetPicklistValuesQueryVariables = Exact<{
+	objectInfoInputs: Array<ObjectInfoInput> | ObjectInfoInput;
+}>;
+
+export type GetPicklistValuesQuery = {
+	uiapi: {
+		objectInfos?: Array<{
+			ApiName: string;
+			fields: Array<
+				| {
+						ApiName: string;
+						picklistValuesByRecordTypeIDs?: Array<{
+							recordTypeID: string;
+							defaultValue?: { value?: string | null } | null;
+							picklistValues?: Array<{
+								label?: string | null;
+								value?: string | null;
+								validFor?: Array<number | null> | null;
+							}> | null;
+						} | null> | null;
+				  }
+				| { ApiName: string }
+				| null
+			>;
+		} | null> | null;
+	};
+};

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/api/maintenance.ts

@@ -98,11 +98,12 @@ const GET_ALL_MAINTENANCE_REQUESTS = gql`
 									value
 								}
 							}
-							Owner {
-								... on User {
-									Name {
-										value
-									}
+							Assigned_Worker__r {
+								Name {
+									value
+								}
+								Employment_Type__c {
+									value
 								}
 							}
 							ContentDocumentLinks(first: 1) {
@@ -241,8 +242,9 @@ function transformMaintenanceTaskFull(node: any): MaintenanceRequest {
 	// Get tenant unit from Property
 	const tenantUnit = node.Property__r?.Name?.value || node.Property__r?.Address__c?.value;
 
-	// Get assigned worker name from Owner
-	const assignedWorkerName = node.Owner?.Name?.value;
+	// Get assigned worker name and employment type from Assigned_Worker__r
+	const assignedWorkerName = node.Assigned_Worker__r?.Name?.value;
+	const assignedWorkerOrg = node.Assigned_Worker__r?.Employment_Type__c?.value;
 
 	return {
 		id: node.Id,
@@ -257,7 +259,7 @@ function transformMaintenanceTaskFull(node: any): MaintenanceRequest {
 		imageUrl,
 		tenantUnit,
 		assignedWorkerName,
-		assignedWorkerOrg: "ABC Diamond Technicians", // This would come from a related object in real scenario
+		assignedWorkerOrg,
 		formattedDate,
 	};
 }

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/assets/icons/maintenance-worker.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="19" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 1.5L8.00006 0.5H7.99995L8 1.5ZM13.5967 6.56836L12.6015 6.66614L12.6826 7.49179L13.509 7.56451L13.5967 6.56836ZM13.4844 9.09375V10.0938V9.09375ZM2.40137 6.56836L2.49054 7.56438L3.31559 7.49051L3.39658 6.66612L2.40137 6.56836ZM8 1.5L7.99994 2.5C10.3989 2.50015 12.3717 4.32767 12.6015 6.66614L13.5967 6.56836L14.5919 6.47058C14.2626 3.11875 11.4383 0.500219 8.00006 0.5L8 1.5ZM13.5967 6.56836L13.509 7.56451C13.6446 7.57644 13.75 7.69093 13.75 7.82812H14.75H15.75C15.75 6.6431 14.8414 5.67402 13.6843 5.57221L13.5967 6.56836ZM14.75 7.82812H13.75C13.75 7.97483 13.6311 8.09375 13.4844 8.09375V9.09375V10.0938C14.7356 10.0938 15.75 9.0794 15.75 7.82812H14.75ZM13.4844 9.09375V8.09375H2.51562V9.09375V10.0938H13.4844V9.09375ZM2.51562 9.09375V8.09375C2.36892 8.09375 2.25 7.97483 2.25 7.82812H1.25H0.25C0.25 9.0794 1.26435 10.0938 2.51562 10.0938V9.09375ZM1.25 7.82812H2.25C2.25 7.69089 2.35531 7.57648 2.49054 7.56438L2.40137 6.56836L2.31219 5.57234C1.1566 5.67581 0.25 6.64446 0.25 7.82812H1.25ZM2.40137 6.56836L3.39658 6.66612C3.62626 4.32802 5.60062 2.50011 8.00005 2.5L8 1.5L7.99995 0.5C4.56208 0.500164 1.73548 3.11823 1.40616 6.47059L2.40137 6.56836Z" fill="#65185C"/>
+<line x1="8.25" y1="1" x2="8.25" y2="3.5" stroke="#65185C" stroke-width="2" stroke-linecap="round"/>
+<line x1="13.25" y1="3.66421" x2="11.6642" y2="5.25" stroke="#65185C" stroke-width="2" stroke-linecap="round"/>
+<line x1="4.33579" y1="5.25" x2="2.75" y2="3.66421" stroke="#65185C" stroke-width="2" stroke-linecap="round"/>
+<path d="M4 11C5.90288 13.8543 10.0971 13.8543 12 11" stroke="#65185C" stroke-width="2" stroke-linecap="round"/>
+<path d="M1 18C4.70577 13.7648 11.2942 13.7648 15 18" stroke="#65185C" stroke-width="2" stroke-linecap="round"/>
+</svg>

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { PieChart, Pie, Cell, ResponsiveContainer } from "recharts";
+import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from "recharts";
 import { Card } from "./ui/card";
 import { MoreVertical } from "lucide-react";
 
@@ -15,7 +15,26 @@ interface IssuesDonutChartProps {
 
 export const IssuesDonutChart: React.FC<IssuesDonutChartProps> = ({ data }) => {
 	const total = data.reduce((sum, item) => sum + item.value, 0);
-	const mainPercentage = total > 0 ? Math.round((data[0]?.value / total) * 100) : 0;
+	const maxValue = data.length > 0 ? Math.max(...data.map((item) => item.value)) : 0;
+	const mainPercentage = total > 0 ? Math.round((maxValue / total) * 100) : 0;
+
+	const CustomTooltip = ({ active, payload }: any) => {
+		if (active && payload && payload.length) {
+			const percentage = total > 0 ? Math.round((payload[0].value / total) * 100) : 0;
+			return (
+				<div className="bg-white p-3 border border-gray-200 rounded shadow-lg z-50">
+					<p className="text-sm font-semibold text-gray-800">{payload[0].name}</p>
+					<p className="text-sm text-gray-600">
+						Count: <span className="font-medium">{payload[0].value}</span>
+					</p>
+					<p className="text-sm text-gray-600">
+						Percentage: <span className="font-medium">{percentage}%</span>
+					</p>
+				</div>
+			);
+		}
+		return null;
+	};
 
 	return (
 		<Card className="p-4 border-gray-200 shadow-sm flex flex-col relative">
@@ -43,10 +62,11 @@ export const IssuesDonutChart: React.FC<IssuesDonutChartProps> = ({ data }) => {
 								<Cell key={`cell-${index}`} fill={entry.color} />
 							))}
 						</Pie>
+						<Tooltip content={<CustomTooltip />} wrapperStyle={{ zIndex: 1000 }} />
 					</PieChart>
 				</ResponsiveContainer>
 				{/* Center text */}
-				<div className="absolute inset-0 flex items-center justify-center">
+				<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
 					<div className="text-center">
 						<div className="text-5xl font-bold text-primary-purple">{mainPercentage}%</div>
 					</div>

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

@@ -21,11 +21,11 @@ export const MaintenanceDetailsModal: React.FC<MaintenanceDetailsModalProps> = (
 	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";
+	// All statuses except Resolved can be edited
+	const isStatusEditable = request.status !== "Resolved";
 
-	// Status options
-	const statusOptions = ["New", "In Progress", "Resolved"];
+	// Status options - all possible statuses
+	const statusOptions = ["New", "Assigned", "In Progress", "On Hold", "Resolved"];
 
 	const handleSave = async () => {
 		if (!isStatusEditable) return;

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

@@ -4,6 +4,7 @@ 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.js";
 
 interface NavItem {
@@ -17,7 +18,7 @@ const navItems: NavItem[] = [
 	{ 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: maintenanceIcon, label: "Maintenance Workers" },
+	{ path: PATHS.MAINTENANCE_WORKERS, icon: maintenanceWorkerIcon, label: "Maintenance Workers" },
 ];
 
 export const VerticalNav: React.FC = () => {
@@ -44,7 +45,7 @@ export const VerticalNav: React.FC = () => {
 					title={item.label}
 				>
 					<img src={item.icon} alt={item.label} className="w-6 h-6" />
-					<span className="text-xs font-medium">{item.label}</span>
+					<span className="text-xs font-medium text-center">{item.label}</span>
 				</Link>
 			))}
 		</div>

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

@@ -16,7 +16,10 @@ interface MaintenanceNode {
 		Name?: { value?: string };
 	};
 	User__r?: { Name?: { value?: string }; DisplayValue?: { value?: string } };
-	Owner?: { Name?: { value?: string } };
+	Assigned_Worker__r?: {
+		Name?: { value?: string };
+		Employment_Type__c?: { value?: string };
+	};
 	ContentDocumentLinks?: {
 		edges?: Array<{
 			node?: {
@@ -68,7 +71,8 @@ export function nodeToMaintenanceRequest(
 		: undefined;
 
 	const tenantUnit = n.Property__r?.Name?.value ?? n.Property__r?.Address__c?.value;
-	const assignedWorkerName = n.Owner?.Name?.value ?? n.User__r?.Name?.value;
+	const assignedWorkerName = n.Assigned_Worker__r?.Name?.value;
+	const assignedWorkerOrg = n.Assigned_Worker__r?.Employment_Type__c?.value;
 
 	return {
 		id: n.Id ?? "",
@@ -83,7 +87,7 @@ export function nodeToMaintenanceRequest(
 		imageUrl,
 		tenantUnit,
 		assignedWorkerName: assignedWorkerName ?? undefined,
-		assignedWorkerOrg: undefined,
+		assignedWorkerOrg: assignedWorkerOrg ?? undefined,
 		formattedDate,
 	};
 }

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

@@ -13,6 +13,18 @@ export const MAINTENANCE_EXTRA_COLUMNS: Column[] = [
 	},
 	{ fieldApiName: "Property__r.Name", label: "Property Name", searchable: false, sortable: false },
 	{ fieldApiName: "User__r.Name", label: "User Name", searchable: false, sortable: false },
+	{
+		fieldApiName: "Assigned_Worker__r.Name",
+		label: "Assigned Worker Name",
+		searchable: false,
+		sortable: false,
+	},
+	{
+		fieldApiName: "Assigned_Worker__r.Employment_Type__c",
+		label: "Worker Employment Type",
+		searchable: false,
+		sortable: false,
+	},
 	{ fieldApiName: "OwnerId", label: "Owner Id", searchable: false, sortable: false },
 	{ fieldApiName: "Owner", label: "Owner", searchable: false, sortable: false },
 ];

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

@@ -22,9 +22,8 @@ import { nodeToMaintenanceRequest } from "../lib/maintenanceAdapter.js";
 import { DASHBOARD_MAINTENANCE_LIMIT } from "../lib/constants.js";
 import { PATHS } from "../lib/routeConfig.js";
 
-const CHART_ISSUE_TYPES = ["Plumbing", "HVAC", "Electrical"] as const;
-const CHART_OTHER_LABEL = "Other";
-const CHART_COLORS = ["#7C3AED", "#EC4899", "#14B8A6", "#06B6D4"] as const;
+const CHART_ISSUE_TYPES = ["Plumbing", "HVAC", "Electrical", "Appliance", "Pest"] as const;
+const CHART_COLORS = ["#7C3AED", "#EC4899", "#14B8A6", "#06B6D4", "#F59E0B"] as const;
 
 export default function Home() {
 	const navigate = useNavigate();
@@ -118,21 +117,21 @@ export default function Home() {
 			Plumbing: 0,
 			HVAC: 0,
 			Electrical: 0,
-			[CHART_OTHER_LABEL]: 0,
+			Appliance: 0,
+			Pest: 0,
 		};
 		maintenanceRequests.forEach((request) => {
 			const type = request.issueType;
 			if (CHART_ISSUE_TYPES.includes(type as (typeof CHART_ISSUE_TYPES)[number])) {
 				counts[type]++;
-			} else {
-				counts[CHART_OTHER_LABEL]++;
 			}
 		});
 		return [
 			{ name: "Plumbing", value: counts.Plumbing, color: CHART_COLORS[0] },
 			{ name: "HVAC", value: counts.HVAC, color: CHART_COLORS[1] },
 			{ name: "Electrical", value: counts.Electrical, color: CHART_COLORS[2] },
-			{ name: CHART_OTHER_LABEL, value: counts[CHART_OTHER_LABEL], color: CHART_COLORS[3] },
+			{ name: "Appliance", value: counts.Appliance, color: CHART_COLORS[3] },
+			{ name: "Pest Control", value: counts.Pest, color: CHART_COLORS[4] },
 		];
 	}, [maintenanceRequests]);
 

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

@@ -1,13 +1,54 @@
-import { useState } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { useListPage } from "../hooks/useListPage.js";
 import { maintenanceWorkersListConfig } from "../lib/listPageConfig.js";
 import { ListPageWithFilters } from "../components/list/ListPageWithFilters.js";
 import { PageHeader } from "../components/layout/PageHeader.js";
+import { getAllMaintenanceRequests } from "../api/maintenance.js";
 import type { MaintenanceWorker } from "../lib/types.js";
 
 export default function MaintenanceWorkers() {
 	const list = useListPage(maintenanceWorkersListConfig);
 	const [selectedWorker, setSelectedWorker] = useState<MaintenanceWorker | null>(null);
+	const [requestCountsLoading, setRequestCountsLoading] = useState(true);
+	const [requestCounts, setRequestCounts] = useState<Record<string, number>>({});
+
+	// Fetch maintenance requests to calculate active request counts per worker
+	useEffect(() => {
+		let mounted = true;
+		async function fetchRequestCounts() {
+			try {
+				setRequestCountsLoading(true);
+				const requests = await getAllMaintenanceRequests(500);
+				if (!mounted) return;
+
+				// Count active requests (not "Resolved") per worker
+				const counts: Record<string, number> = {};
+				for (const req of requests) {
+					if (req.status !== "Resolved" && req.assignedWorkerName) {
+						const workerName = req.assignedWorkerName;
+						counts[workerName] = (counts[workerName] || 0) + 1;
+					}
+				}
+				setRequestCounts(counts);
+			} catch (error) {
+				console.error("Error fetching request counts:", error);
+			} finally {
+				if (mounted) setRequestCountsLoading(false);
+			}
+		}
+		fetchRequestCounts();
+		return () => {
+			mounted = false;
+		};
+	}, []);
+
+	// Enrich workers with active request counts
+	const enrichedWorkers = useMemo(() => {
+		return list.items.map((worker) => ({
+			...worker,
+			activeRequestsCount: requestCounts[worker.name] || 0,
+		}));
+	}, [list.items, requestCounts]);
 
 	return (
 		<>
@@ -24,10 +65,10 @@ export default function MaintenanceWorkers() {
 					ariaLabel: maintenanceWorkersListConfig.filtersAriaLabel,
 				}}
 				filterError={list.filterError}
-				loading={list.loading}
+				loading={list.loading || requestCountsLoading}
 				error={list.error}
 				loadingMessage={maintenanceWorkersListConfig.loadingMessage}
-				isEmpty={list.items.length === 0}
+				isEmpty={enrichedWorkers.length === 0}
 				searchPlaceholder="Search by name, organization, status..."
 				searchAriaLabel="Search workers"
 			>
@@ -55,10 +96,10 @@ export default function MaintenanceWorkers() {
 						</div>
 					</div>
 					<div className="divide-y divide-gray-200">
-						{list.items.length === 0 ? (
+						{enrichedWorkers.length === 0 ? (
 							<div className="text-center py-12 text-gray-500">No maintenance workers found</div>
 						) : (
-							list.items.map((worker) => (
+							enrichedWorkers.map((worker) => (
 								<div
 									key={worker.id}
 									onClick={() => setSelectedWorker(worker)}

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.80.0",
+  "version": "1.81.0",
   "description": "Base SFDX project template",
   "private": true,
   "files": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-app-react-sample-b2e-experimental",
-  "version": "1.80.0",
+  "version": "1.81.0",
   "description": "B2E starter app template",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",
@@ -16,8 +16,8 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
-    "@salesforce/webapp-experimental": "^1.80.0",
-    "@salesforce/webapp-template-feature-react-global-search-experimental": "^1.80.0"
+    "@salesforce/webapp-experimental": "^1.81.0",
+    "@salesforce/webapp-template-feature-react-global-search-experimental": "^1.81.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",