@salesforce/webapp-template-app-react-sample-b2e-experimental 1.73.0 → 1.73.1

package/dist/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.73.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.73.0...v1.73.1) (2026-03-05)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
 # [1.73.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.72.0...v1.73.0) (2026-03-05)
 
 **Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental

package/dist/force-app/main/default/objects/Maintenance_Request__c/Maintenance_Request__c.object-meta.xml

@@ -61,7 +61,17 @@
         <type>AutoNumber</type>
     </nameField>
     <pluralLabel>Maintenance Requests</pluralLabel>
-    <searchLayouts/>
+    <searchLayouts>
+        <searchResultsAdditionalFields>Description__c</searchResultsAdditionalFields>
+        <searchResultsAdditionalFields>Type__c</searchResultsAdditionalFields>
+        <searchResultsAdditionalFields>Priority__c</searchResultsAdditionalFields>
+        <searchResultsAdditionalFields>Status__c</searchResultsAdditionalFields>
+        <searchResultsAdditionalFields>Scheduled__c</searchResultsAdditionalFields>
+        <searchResultsAdditionalFields>Property__r.Address__c</searchResultsAdditionalFields>
+        <searchResultsAdditionalFields>Property__r.Name</searchResultsAdditionalFields>
+        <searchResultsAdditionalFields>User__r.Name</searchResultsAdditionalFields>
+        <searchResultsAdditionalFields>Owner.Name</searchResultsAdditionalFields>
+    </searchLayouts>
     <sharingModel>ReadWrite</sharingModel>
     <visibility>Public</visibility>
 </CustomObject>

package/dist/force-app/main/default/objects/Maintenance_Worker__c/Maintenance_Worker__c.object-meta.xml

@@ -60,7 +60,12 @@
         <type>Text</type>
     </nameField>
     <pluralLabel>Maintenance Workers</pluralLabel>
-    <searchLayouts/>
+    <searchLayouts>
+        <searchResultsAdditionalFields>Hourly_Rate__c</searchResultsAdditionalFields>
+        <searchResultsAdditionalFields>Type__c</searchResultsAdditionalFields>
+        <searchResultsAdditionalFields>Rating__c</searchResultsAdditionalFields>
+        <searchResultsAdditionalFields>Employment_Type__c</searchResultsAdditionalFields>
+    </searchLayouts>
     <sharingModel>ReadWrite</sharingModel>
     <visibility>Public</visibility>
 </CustomObject>

package/dist/force-app/main/default/objects/Property__c/Property__c.object-meta.xml

@@ -60,7 +60,12 @@
         <type>Text</type>
     </nameField>
     <pluralLabel>Properties</pluralLabel>
-    <searchLayouts/>
+    <searchLayouts>
+        <searchResultsAdditionalFields>Hero_Image__c</searchResultsAdditionalFields>
+        <searchResultsAdditionalFields>Address__c</searchResultsAdditionalFields>
+        <searchResultsAdditionalFields>Description__c</searchResultsAdditionalFields>
+        <searchResultsAdditionalFields>CREATED_DATE</searchResultsAdditionalFields>
+    </searchLayouts>
     <sharingModel>ReadWrite</sharingModel>
     <visibility>Public</visibility>
 </CustomObject>

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

@@ -15,10 +15,11 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/agentforce-conversation-client": "^1.73.0",
-    "@salesforce/sdk-data": "^1.73.0",
-    "@salesforce/webapp-experimental": "^1.73.0",
+    "@salesforce/agentforce-conversation-client": "^1.73.1",
+    "@salesforce/sdk-data": "^1.73.1",
+    "@salesforce/webapp-experimental": "^1.73.1",
     "@tailwindcss/vite": "^4.1.17",
+    "@tanstack/react-form": "^1.28.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
@@ -30,7 +31,8 @@
     "shadcn": "^3.8.5",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.17",
-    "tw-animate-css": "^1.4.0"
+    "tw-animate-css": "^1.4.0",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
@@ -40,7 +42,7 @@
     "@graphql-eslint/eslint-plugin": "^4.1.0",
     "@graphql-tools/utils": "^11.0.0",
     "@playwright/test": "^1.49.0",
-    "@salesforce/vite-plugin-webapp-experimental": "^1.73.0",
+    "@salesforce/vite-plugin-webapp-experimental": "^1.73.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

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

@@ -0,0 +1,60 @@
+import type { MaintenanceWorker } from "../lib/types.js";
+import { getAllMaintenanceRequests } from "./maintenance.js";
+
+/**
+ * Fetches maintenance workers. Derives unique workers from maintenance requests
+ * (assigned workers) and adds fallback placeholder entries so the list is never empty.
+ */
+export async function getMaintenanceWorkers(): Promise<MaintenanceWorker[]> {
+	try {
+		const requests = await getAllMaintenanceRequests(200);
+		const byName = new Map<string, MaintenanceWorker>();
+		let idCounter = 1;
+		for (const req of requests) {
+			const name = req.assignedWorkerName || req.assignedWorker || "Unassigned";
+			if (!name || name === "Unassigned") continue;
+			if (!byName.has(name)) {
+				byName.set(name, {
+					id: `worker-${idCounter++}`,
+					name,
+					organization: req.assignedWorkerOrg,
+					activeRequestsCount: 0,
+					status: "Active",
+				});
+			}
+			const w = byName.get(name)!;
+			w.activeRequestsCount = (w.activeRequestsCount ?? 0) + 1;
+		}
+		let workers = Array.from(byName.values());
+		if (workers.length === 0) {
+			workers = [
+				{
+					id: "worker-1",
+					name: "ABC Diamond Technicians",
+					organization: "ABC Diamond",
+					activeRequestsCount: 0,
+					status: "Active",
+				},
+				{
+					id: "worker-2",
+					name: "Maintenance Team",
+					organization: "Property Mgmt",
+					activeRequestsCount: 0,
+					status: "Active",
+				},
+			];
+		}
+		return workers;
+	} catch (error) {
+		console.error("Error fetching maintenance workers:", error);
+		return [
+			{
+				id: "worker-1",
+				name: "ABC Diamond Technicians",
+				organization: "ABC Diamond",
+				status: "Active",
+			},
+			{ id: "worker-2", name: "Maintenance Team", organization: "Property Mgmt", status: "Active" },
+		];
+	}
+}

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

@@ -1,5 +1,4 @@
 import React from "react";
-import { Card } from "@/components/ui/card";
 import type { Application } from "../lib/types.js";
 
 interface ApplicationsTableProps {
@@ -35,71 +34,69 @@ export const ApplicationsTable: React.FC<ApplicationsTableProps> = ({
 	};
 
 	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">
+		<div className="border border-gray-200 rounded-lg shadow-sm overflow-x-auto bg-white">
+			<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>
-							<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>
+							<td colSpan={3} className="px-6 py-8 text-center text-gray-500">
+								No applications found
+							</td>
 						</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>
+					) : (
+						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="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 className="text-sm text-gray-500">
+												{application.propertyName || application.propertyAddress}
 											</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>
+									</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>
 	);
 };

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

@@ -0,0 +1,200 @@
+import { useState, useCallback } from "react";
+import {
+	useObjectListMetadata,
+	parseFilterValue,
+	sanitizeFilterValue,
+	type FilterCriteria,
+} from "@salesforce/webapp-template-feature-react-global-search-experimental";
+
+const inputClass =
+	"h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-purple/20 focus:border-primary-purple";
+
+interface FiltersFromApiProps {
+	objectApiName: string | null;
+	onApplyFilters: (criteria: FilterCriteria[]) => void;
+}
+
+/**
+ * Renders filter UI from the react-global-search filters API (getObjectListFilters).
+ * Uses useObjectListMetadata to load filters and picklist values, then builds FilterCriteria on Apply.
+ */
+export function FiltersFromApi({ objectApiName, onApplyFilters }: FiltersFromApiProps) {
+	const { filters, picklistValues, loading, error } = useObjectListMetadata(objectApiName);
+	const [formValues, setFormValues] = useState<Record<string, string>>({});
+	const [rangeMin, setRangeMin] = useState<Record<string, string>>({});
+	const [rangeMax, setRangeMax] = useState<Record<string, string>>({});
+
+	const handleChange = useCallback((fieldPath: string, value: string) => {
+		setFormValues((prev) => ({ ...prev, [fieldPath]: value }));
+	}, []);
+
+	const handleRangeChange = useCallback((fieldPath: string, min: string, max: string) => {
+		setRangeMin((prev) => ({ ...prev, [fieldPath]: min }));
+		setRangeMax((prev) => ({ ...prev, [fieldPath]: max }));
+	}, []);
+
+	const handleApply = useCallback(() => {
+		if (!objectApiName || !filters?.length) {
+			onApplyFilters([]);
+			return;
+		}
+		const criteria: FilterCriteria[] = [];
+		for (const filter of filters) {
+			if (!filter?.targetFieldPath) continue;
+			const affordance = (filter.affordance ?? "").toLowerCase();
+			if (affordance === "range") {
+				const minVal = sanitizeFilterValue(rangeMin[filter.targetFieldPath] ?? "");
+				const maxVal = sanitizeFilterValue(rangeMax[filter.targetFieldPath] ?? "");
+				if (minVal) {
+					const parsed = parseFilterValue(minVal);
+					if (parsed !== "")
+						criteria.push({
+							objectApiName,
+							fieldPath: filter.targetFieldPath,
+							operator: "gte",
+							values: [parsed],
+						});
+				}
+				if (maxVal) {
+					const parsed = parseFilterValue(maxVal);
+					if (parsed !== "")
+						criteria.push({
+							objectApiName,
+							fieldPath: filter.targetFieldPath,
+							operator: "lte",
+							values: [parsed],
+						});
+				}
+			} else {
+				const raw = formValues[filter.targetFieldPath] ?? "";
+				const fieldValue = sanitizeFilterValue(raw);
+				if (!fieldValue) continue;
+				if (affordance === "select") {
+					criteria.push({
+						objectApiName,
+						fieldPath: filter.targetFieldPath,
+						operator: "eq",
+						values: [fieldValue],
+					});
+				} else {
+					criteria.push({
+						objectApiName,
+						fieldPath: filter.targetFieldPath,
+						operator: "like",
+						values: [`%${fieldValue}%`],
+					});
+				}
+			}
+		}
+		onApplyFilters(criteria);
+	}, [objectApiName, filters, formValues, rangeMin, rangeMax, onApplyFilters]);
+
+	const handleReset = useCallback(() => {
+		setFormValues({});
+		setRangeMin({});
+		setRangeMax({});
+		onApplyFilters([]);
+	}, [onApplyFilters]);
+
+	if (!objectApiName) return null;
+	if (loading) {
+		return (
+			<div className="mb-4 flex flex-wrap gap-2 items-center text-sm text-gray-500">
+				Loading filters…
+			</div>
+		);
+	}
+	if (error || !filters?.length) return null;
+
+	return (
+		<div className="mb-4 flex flex-wrap items-end gap-3">
+			{filters.map((filter) => {
+				if (!filter.targetFieldPath) return null;
+				const affordance = (filter.affordance ?? "").toLowerCase();
+				if (affordance === "range") {
+					return (
+						<div key={filter.targetFieldPath} className="flex items-center gap-2 flex-wrap">
+							<span className="text-sm text-gray-600">{filter.label}</span>
+							<input
+								type="text"
+								className={inputClass}
+								placeholder="Min"
+								value={rangeMin[filter.targetFieldPath] ?? ""}
+								onChange={(e) =>
+									handleRangeChange(
+										filter.targetFieldPath,
+										e.target.value,
+										rangeMax[filter.targetFieldPath] ?? "",
+									)
+								}
+								aria-label={`${filter.label} min`}
+							/>
+							<input
+								type="text"
+								className={inputClass}
+								placeholder="Max"
+								value={rangeMax[filter.targetFieldPath] ?? ""}
+								onChange={(e) =>
+									handleRangeChange(
+										filter.targetFieldPath,
+										rangeMin[filter.targetFieldPath] ?? "",
+										e.target.value,
+									)
+								}
+								aria-label={`${filter.label} max`}
+							/>
+						</div>
+					);
+				}
+				if (affordance === "select") {
+					const options = picklistValues?.[filter.targetFieldPath] ?? [];
+					return (
+						<div key={filter.targetFieldPath} className="flex items-center gap-2">
+							<label className="text-sm text-gray-600">{filter.label}</label>
+							<select
+								className={inputClass}
+								value={formValues[filter.targetFieldPath] ?? ""}
+								onChange={(e) => handleChange(filter.targetFieldPath, e.target.value)}
+								aria-label={filter.label}
+							>
+								<option value="">Any</option>
+								{options.map((opt) => (
+									<option key={opt.value} value={opt.value}>
+										{opt.label}
+									</option>
+								))}
+							</select>
+						</div>
+					);
+				}
+				return (
+					<div key={filter.targetFieldPath} className="flex items-center gap-2">
+						<label className="text-sm text-gray-600">{filter.label}</label>
+						<input
+							type="text"
+							className={inputClass}
+							placeholder={filter.attributes?.placeholder ?? filter.label}
+							value={formValues[filter.targetFieldPath] ?? ""}
+							onChange={(e) => handleChange(filter.targetFieldPath, e.target.value)}
+							aria-label={filter.label}
+						/>
+					</div>
+				);
+			})}
+			<button
+				type="button"
+				onClick={handleApply}
+				className="h-9 px-3 rounded-md bg-purple-700 text-white text-sm font-medium hover:bg-purple-800"
+			>
+				Apply Filters
+			</button>
+			<button
+				type="button"
+				onClick={handleReset}
+				className="h-9 px-3 text-sm text-gray-600 hover:text-gray-800"
+			>
+				Reset
+			</button>
+		</div>
+	);
+}

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

@@ -0,0 +1,97 @@
+import type { ActiveFilter, FilterFieldConfig } from "../lib/listFilters.js";
+
+const inputClass =
+	"h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-purple/20 focus:border-primary-purple";
+
+interface ListPageFiltersProps {
+	fieldConfigs: FilterFieldConfig[];
+	activeFilters: ActiveFilter[];
+	onFiltersChange: (filters: ActiveFilter[]) => void;
+}
+
+export function ListPageFilters({
+	fieldConfigs,
+	activeFilters,
+	onFiltersChange,
+}: ListPageFiltersProps) {
+	const addFilter = () => {
+		const first = fieldConfigs[0];
+		if (!first) return;
+		onFiltersChange([...activeFilters, { fieldKey: first.key, value: "" }]);
+	};
+
+	const updateFilter = (index: number, updates: Partial<ActiveFilter>) => {
+		const next = [...activeFilters];
+		next[index] = { ...next[index]!, ...updates };
+		onFiltersChange(next);
+	};
+
+	const removeFilter = (index: number) => {
+		onFiltersChange(activeFilters.filter((_, i) => i !== index));
+	};
+
+	if (fieldConfigs.length === 0) return null;
+
+	return (
+		<div className="flex flex-wrap items-center gap-2 mb-4">
+			{activeFilters.map((filter, index) => {
+				const config = fieldConfigs.find((c) => c.key === filter.fieldKey) ?? fieldConfigs[0]!;
+				return (
+					<div key={index} className="flex items-center gap-2 flex-wrap">
+						<select
+							className={inputClass}
+							value={filter.fieldKey}
+							onChange={(e) => updateFilter(index, { fieldKey: e.target.value })}
+							aria-label="Filter field"
+						>
+							{fieldConfigs.map((c) => (
+								<option key={c.key} value={c.key}>
+									{c.label}
+								</option>
+							))}
+						</select>
+						{config.type === "select" && config.options && config.options.length > 0 ? (
+							<select
+								className={inputClass}
+								value={filter.value}
+								onChange={(e) => updateFilter(index, { value: e.target.value })}
+								aria-label={`Filter by ${config.label}`}
+							>
+								<option value="">Any</option>
+								{config.options.map((opt) => (
+									<option key={opt.value} value={opt.value}>
+										{opt.label}
+									</option>
+								))}
+							</select>
+						) : (
+							<input
+								type="text"
+								className={inputClass}
+								value={filter.value}
+								onChange={(e) => updateFilter(index, { value: e.target.value })}
+								placeholder={config.label}
+								aria-label={`Filter by ${config.label}`}
+							/>
+						)}
+						<button
+							type="button"
+							onClick={() => removeFilter(index)}
+							className="text-gray-500 hover:text-gray-700 text-sm px-1"
+							aria-label="Remove filter"
+						>
+							✕
+						</button>
+					</div>
+				);
+			})}
+			<button
+				type="button"
+				onClick={addFilter}
+				className="text-sm text-purple-700 hover:text-purple-800 font-medium"
+			>
+				+ Add filter
+			</button>
+		</div>
+	);
+}

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { useNavigate } from "react-router";
+import { PATHS } from "../lib/routeConfig.js";
 import { Card } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import type { MaintenanceRequest } from "../lib/types.js";
@@ -34,7 +35,7 @@ export const MaintenanceTable: React.FC<MaintenanceTableProps> = ({ requests })
 	const navigate = useNavigate();
 
 	const handleSeeAll = () => {
-		navigate("/maintenance");
+		navigate(PATHS.MAINTENANCE_REQUESTS);
 	};
 
 	return (

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

@@ -0,0 +1,39 @@
+const selectClass =
+	"h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-purple/20 focus:border-primary-purple min-w-[180px]";
+
+export interface ObjectSelectOption {
+	value: string;
+	label: string;
+}
+
+interface ObjectSelectProps {
+	options: ObjectSelectOption[];
+	value: string;
+	onChange: (value: string) => void;
+	"aria-label"?: string;
+}
+
+/**
+ * Shadcn-style select for object type (Properties, Maintenance Requests, Maintenance Workers).
+ */
+export function ObjectSelect({
+	options,
+	value,
+	onChange,
+	"aria-label": ariaLabel = "Search in",
+}: ObjectSelectProps) {
+	return (
+		<select
+			className={selectClass}
+			value={value}
+			onChange={(e) => onChange(e.target.value)}
+			aria-label={ariaLabel}
+		>
+			{options.map((opt) => (
+				<option key={opt.value} value={opt.value}>
+					{opt.label}
+				</option>
+			))}
+		</select>
+	);
+}

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 { PATHS } from "../lib/routeConfig.js";
 
 interface NavItem {
 	path: string;
@@ -12,10 +13,11 @@ interface NavItem {
 }
 
 const navItems: NavItem[] = [
-	{ path: "/", icon: dashboardIcon, label: "Dashboard" },
-	{ path: "/applications", icon: filesIcon, label: "Applications" },
-	{ path: "/properties", icon: propertiesIcon, label: "Properties" },
-	{ path: "/maintenance", icon: maintenanceIcon, label: "Maintenance" },
+	{ path: PATHS.HOME, icon: dashboardIcon, label: "Dashboard" },
+	{ 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" },
 ];
 
 export const VerticalNav: React.FC = () => {