@salesforce/ui-bundle-template-app-react-sample-b2x 1.118.4 → 1.119.1

package/dist/AGENT.md

@@ -45,7 +45,7 @@ Replace `<appName>` with the actual folder name found under `uiBundles/`. The so
     └── data/                            # Sample data for import (optional)
 ```
 
-## Web application source structure
+## UI Bundle source structure
 
 All application code lives inside the UI Bundle's `src/` directory:
 
@@ -95,9 +95,11 @@ Used for SFDX metadata tooling. Scripts here target LWC/Aura, not the React app.
 
 **One-time org setup:** `node scripts/org-setup.mjs --target-org <alias>` runs login, deploy, permset assignment, data import, GraphQL schema/codegen, UI Bundle build, and optionally the dev server. Use `--help` for all flags.
 
-### 2. Web app directory (primary workspace)
+### 2. UI Bundle directory (primary workspace)
 
-**Always `cd` into the UI Bundle directory for dev/build/lint/test:**
+**ALL dev, build, lint, and test commands MUST be run from inside the UI Bundle directory (`<sfdx-source>/uiBundles/<appName>/`). Never run them from the project root.**
+
+Resolve the correct path from `sfdx-project.json` before running any command. Do not hardcode the path.
 
 | Command | Purpose |
 |---------|---------|
@@ -109,13 +111,17 @@ Used for SFDX metadata tooling. Scripts here target LWC/Aura, not the React app.
 | `npm run graphql:codegen` | Generate GraphQL types from schema |
 | `npm run graphql:schema` | Fetch GraphQL schema from org |
 
-**Before completing any change:** run `npm run build` and `npm run lint` from the UI Bundle directory. Both must pass with zero errors.
+**After every task, without exception:**
+1. Run `npm run build` from the UI Bundle directory — must pass with zero errors.
+2. Run `npm run lint` from the UI Bundle directory — must pass with zero errors.
+3. Run `npm run dev` to start the dev server so the user can verify the result.
 
+Do not consider a task complete until all three steps have been run successfully.
 ## Development conventions
 
 ### UI
 
-- **Component library:** shadcn/ui primitives in `src/components/ui/`. Always use these over raw HTML equivalents.
+- **Component library:** shadcn/ui primitives in `src/components/ui/`. Always use these over raw HTML equivalents. **Before importing any component, verify both the file exists in `src/components/ui/` AND the named export exists within that file.** Never assume a component or export is available — read the file to confirm the exact exports before importing.
 - **Styling:** Tailwind CSS only. No inline `style={{}}`. Use `cn()` from `@/lib/utils` for conditional classes.
 - **Icons:** Lucide React.
 - **Path alias:** `@/*` maps to `src/*`. Use it for all imports.
@@ -140,6 +146,10 @@ Used for SFDX metadata tooling. Scripts here target LWC/Aura, not the React app.
 
 ### Data access (Salesforce)
 
+**Before writing any code that connects to Salesforce, you MUST invoke the `using-ui-bundle-salesforce-data` skill. Do not write any data access code without consulting it first.**
+
+This applies to: GraphQL queries/mutations, REST calls, SDK initialization, custom hooks that fetch data, or any code that imports from `@salesforce/sdk-data`.
+
 - **All data access uses the Data SDK** (`@salesforce/sdk-data`) via `createDataSDK()`.
 - **Never** use `fetch()` or `axios` directly for Salesforce data.
 - **GraphQL is preferred** for record operations (`sdk.graphql`). Use `sdk.fetch` only when GraphQL cannot cover the case (UI API REST, Apex REST, Connect REST, Einstein LLM).
@@ -149,25 +159,74 @@ Used for SFDX metadata tooling. Scripts here target LWC/Aura, not the React app.
 - Use `__SF_API_VERSION__` global for API version in REST calls.
 - **Blocked APIs:** Enterprise REST query endpoint (`/query` with SOQL), `@AuraEnabled` Apex, Chatter API.
 
+#### Permitted APIs
+
+| API | Method | Endpoints / Use Case |
+|-----|--------|----------------------|
+| GraphQL | `sdk.graphql` | All record queries and mutations via `uiapi { }` namespace |
+| UI API REST | `sdk.fetch` | `/services/data/v{ver}/ui-api/records/{id}` |
+| Apex REST | `sdk.fetch` | `/services/apexrest/{resource}` |
+| Connect REST | `sdk.fetch` | `/services/data/v{ver}/connect/...` |
+| Einstein LLM | `sdk.fetch` | `/services/data/v{ver}/einstein/llm/prompt/generations` |
+
+Any endpoint not listed above is not permitted.
+
+#### GraphQL non-negotiable rules
+
+1. **Schema is the single source of truth** — every entity and field name must be confirmed via the schema search script before use. Never guess.
+2. **`@optional` on all record fields** — FLS causes entire queries to fail if any field is inaccessible. Apply to every scalar, parent, and child relationship field.
+3. **Correct mutation syntax** — mutations wrap under `uiapi(input: { allOrNone: true/false })`, not bare `uiapi { ... }`.
+4. **Explicit `first:` in every query** — omitting it silently defaults to 10 records. Always include `pageInfo { hasNextPage endCursor }` for paginated queries.
+5. **SOQL-derived execution limits** — max 10 subqueries per request, max 5 levels of child-to-parent traversal, max 1 level parent-to-child, max 2,000 records per subquery.
+6. **HTTP 200 does not mean success** — Salesforce returns HTTP 200 even on failure. Always check the `errors` array in the response body.
+
+#### GraphQL inline queries
+Must use the `gql` template tag from `@salesforce/sdk-data` — plain template strings bypass `@graphql-eslint` schema validation. For complex queries, use external `.graphql` files with codegen.
+
+#### Current user info
+Use GraphQL (`uiapi { currentUser { Id Name { value } } }`), not Chatter (`/chatter/users/me`).
+
+#### Schema file (`schema.graphql`)
+
+The `schema.graphql` file at the SFDX project root is the source of truth for all entity and field name lookups. It is 265K+ lines — never open or parse it directly. Use the schema search script instead.
+
+- **Generate/refresh:** Run `npm run graphql:schema` from the UI bundle directory
+- **When to regenerate:** After any metadata deployment that changes objects, fields, or permission sets
+- **Custom objects** only appear in the schema after metadata deployment AND permission set assignment
+- **After regenerating:** Always re-run `npm run graphql:codegen` and `npm run build` (schema changes may affect generated types)
+
 ### CSP trusted sites
 
 Any external domain the app calls (APIs, CDNs, fonts) must have a `.cspTrustedSite-meta.xml` file under `<sfdx-source>/cspTrustedSites/`. Unregistered domains are blocked at runtime. Each subdomain needs its own entry. URLs must be HTTPS with no trailing slash, no path, and no wildcards.
 
+## Building and launching the app
+
+All build, dev, and test commands run from the UI Bundle directory. Before running any command, read the UI Bundle's `package.json` to confirm available scripts — do not assume script names.
+
+Typical scripts found in the UI Bundle:
+
+| Command | Purpose |
+|---------|---------|
+| `npm run build` | TypeScript check + Vite production build |
+| `npm run dev` | Start Vite dev server |
+| `npm run lint` | ESLint |
+| `npm run test` | Vitest unit tests |
+| `npm run graphql:codegen` | Generate GraphQL types |
+| `npm run graphql:schema` | Fetch GraphQL schema from org |
+
+If dependencies have not been installed yet, run `npm install` in the UI Bundle directory first. Alternatively, run `npm run sf-project-setup` from the project root — it resolves the UI Bundle directory automatically and runs install, build, and dev in sequence.
+
+**After any JavaScript or TypeScript change, run `npm run build` to validate the change.** If the build fails, read the error output, identify the cause, fix it, and run `npm run build` again. Do not move on until the build passes.
+
 ## Deploying
 
 **Deployment order matters.** Metadata (objects, permission sets) must be deployed before fetching the GraphQL schema. After any metadata deployment that changes objects, fields, or permissions, re-run schema fetch and codegen.
 
-**Recommended sequence:**
+**Deployment steps:**
 
 1. Authenticate to the target org
 2. Build the UI Bundle (`npm run build` in the UI Bundle directory)
 3. Deploy metadata (`sf project deploy start --source-dir <packageDir> --target-org <alias>`)
-4. Assign permission sets
-5. Import data (only with user confirmation)
-6. Fetch GraphQL schema + run codegen (`npm run graphql:schema && npm run graphql:codegen`)
-7. Rebuild the UI Bundle (schema changes may affect generated types)
-
-**Or use the one-time org setup:** `node scripts/org-setup.mjs --target-org <alias>`
 
 ```bash
 # Deploy UI Bundle only
@@ -177,17 +236,17 @@ sf project deploy start --source-dir <sfdx-source>/ui-bundles --target-org <alia
 sf project deploy start --source-dir <packageDir> --target-org <alias>
 ```
 
-## Skills
+**Do not open the app after deployment.** Do not run `sf org open`, do not guess the runtime URL, and do not construct paths like `/s/<appName>`. Deployment is complete when the `sf project deploy start` command succeeds.
 
-Check for available skills before implementing any of the following:
+## Post-deployment org setup
 
-| Area | When to consult |
-|------|----------------|
-| UI generation | Building pages, components, modifying header/footer/layout |
-| Salesforce data access | Reading/writing records, GraphQL queries, REST calls |
-| Metadata and deployment | Scaffolding apps, configuring CSP, deployment sequencing |
-| Feature installation | Before building something from scratch — check if a pre-built feature exists |
-| File upload | Adding file upload with Salesforce ContentVersion |
-| Agentforce conversation | Adding or modifying the Agentforce chat widget |
+These steps apply after a fresh deployment to configure the org. They are not part of routine deployment.
+
+1. Assign permission sets
+2. Import data (only with user confirmation)
+3. Fetch GraphQL schema + run codegen (`npm run graphql:schema && npm run graphql:codegen`)
+4. Rebuild the UI Bundle (`npm run build` — schema changes may affect generated types)
+
+## Skills
 
-Skills are the authoritative source for detailed patterns, constraints, and code examples in each area. This file provides project-level orientation; skills provide implementation depth.
+Before starting any task, check whether a relevant skill exists. If one does, invoke it before writing any code or making any implementation decision. Skills are the authoritative source for patterns, constraints, and code examples.

package/dist/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.119.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.119.0...v1.119.1) (2026-03-31)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
+# [1.119.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.118.4...v1.119.0) (2026-03-31)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
 ## [1.118.4](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.118.3...v1.118.4) (2026-03-31)
 
 **Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project

package/dist/force-app/main/default/uiBundles/propertyrentalapp/package.json

@@ -15,8 +15,8 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/sdk-data": "^1.118.4",
-    "@salesforce/ui-bundle": "^1.118.4",
+    "@salesforce/sdk-data": "^1.119.1",
+    "@salesforce/ui-bundle": "^1.119.1",
     "@tailwindcss/vite": "^4.1.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -47,7 +47,7 @@
     "@graphql-eslint/eslint-plugin": "^4.1.0",
     "@graphql-tools/utils": "^11.0.0",
     "@playwright/test": "^1.49.0",
-    "@salesforce/vite-plugin-ui-bundle": "^1.118.4",
+    "@salesforce/vite-plugin-ui-bundle": "^1.119.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/uiBundles/propertyrentalapp/src/appLayout.tsx

@@ -1,24 +1,27 @@
 import { useState } from "react";
 import { Outlet } from "react-router";
 import { TopBar } from "@/components/layout/TopBar";
-import { NavMenu } from "@/components/layout/VerticalNav";
+import { VerticalNav } from "@/components/layout/VerticalNav";
 import { Toaster } from "@/components/ui/sonner";
+import { TenantAccessProvider } from "@/context/TenantAccessContext";
 
 export default function AppLayout() {
 	const [isNavOpen, setIsNavOpen] = useState(false);
 
 	return (
-		<div className="flex min-h-screen flex-col bg-gray-50">
-			<Toaster />
-			<TopBar onMenuClick={() => setIsNavOpen(true)} />
+		<TenantAccessProvider>
+			<div className="flex min-h-screen flex-col bg-gray-50">
+				<Toaster />
+				<TopBar onMenuClick={() => setIsNavOpen(true)} />
 
-			<div className="flex flex-1 overflow-hidden">
-				<NavMenu isOpen={isNavOpen} onClose={() => setIsNavOpen(false)} />
+				<div className="flex flex-1 overflow-hidden">
+					<VerticalNav isOpen={isNavOpen} onClose={() => setIsNavOpen(false)} />
 
-				<main className="flex-1 overflow-auto bg-gray-50 p-4 md:p-8" role="main">
-					<Outlet />
-				</main>
+					<main className="flex-1 overflow-auto bg-gray-50 p-4 md:p-8" role="main">
+						<Outlet />
+					</main>
+				</div>
 			</div>
-		</div>
+		</TenantAccessProvider>
 	);
 }

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/layout/TopBar.tsx

@@ -1,41 +1,61 @@
-import { useState } from "react";
-import { ChevronDown, Menu, UserPen, LogOut, User, Loader2 } from "lucide-react";
+import { ChevronDown, Menu, User } from "lucide-react";
 import { Link } from "react-router";
-import { useAuth } from "@/features/authentication/context/AuthContext";
 import { ROUTES } from "@/features/authentication/authenticationConfig";
 import zenLogo from "@/assets/icons/zen-logo.svg";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { AuthMenu } from "@/features/authentication/menu/AuthMenu";
 
 export interface TopBarProps {
 	onMenuClick?: () => void;
 }
 
 export function TopBar({ onMenuClick }: TopBarProps) {
-	const { user, isAuthenticated, loading } = useAuth();
-
 	return (
-		<header
-			className="flex h-16 items-center justify-between bg-teal-700 px-6 text-white"
-			role="banner"
-		>
+		<header className="flex h-16 items-center justify-between bg-teal-700 px-6 text-white">
 			<div className="flex items-center gap-4">
-				<button
-					type="button"
+				<Button
+					variant="ghost"
+					size="icon"
 					onClick={onMenuClick}
-					className="rounded-md p-2 transition-colors hover:bg-teal-600 md:hidden"
+					className="text-white hover:bg-teal-600 md:hidden"
 					aria-label="Toggle menu"
 				>
-					<Menu className="size-6" aria-hidden />
-				</button>
+					<Menu className="size-6" />
+				</Button>
 				<Logo />
 			</div>
 
-			{loading ? (
-				<Loader2 className="size-5 animate-spin" aria-label="Loading" />
-			) : isAuthenticated ? (
-				<AuthenticatedControls userName={user?.name ?? "User"} />
-			) : (
-				<LoginLink />
-			)}
+			<AuthMenu
+				trigger={(user) => (
+					<Button
+						variant="ghost"
+						className="h-10 gap-2 rounded-lg px-3 text-base text-white hover:bg-teal-600 hover:text-white"
+						aria-label="User menu"
+					>
+						<Avatar className="size-7 bg-teal-300 text-teal-900">
+							<AvatarFallback className="bg-teal-300 font-semibold text-teal-900">
+								{user.name.charAt(0).toUpperCase()}
+							</AvatarFallback>
+						</Avatar>
+						<span className="hidden font-medium md:inline">{user.name.toUpperCase()}</span>
+						<ChevronDown className="hidden size-4 md:block" />
+					</Button>
+				)}
+				guestContent={
+					<Button
+						asChild
+						variant="secondary"
+						size="icon"
+						className="rounded-full bg-white text-teal-700 hover:bg-teal-50 md:h-9 md:w-auto md:gap-2 md:rounded-lg md:px-4"
+					>
+						<Link to={ROUTES.LOGIN.PATH}>
+							<User className="size-5 md:size-4" />
+							<span className="hidden md:inline">Sign Up / Sign In</span>
+						</Link>
+					</Button>
+				}
+			/>
 		</header>
 	);
 }
@@ -51,83 +71,3 @@ function Logo() {
 		</div>
 	);
 }
-
-function LoginLink() {
-	return (
-		<Link
-			to={ROUTES.LOGIN.PATH}
-			className="flex items-center gap-2 rounded-md bg-white px-4 py-2 font-medium text-teal-700 transition-colors hover:bg-teal-50"
-		>
-			<User className="size-4" aria-hidden />
-			Sign Up / Sign In
-		</Link>
-	);
-}
-
-function AuthenticatedControls({ userName }: { userName: string }) {
-	return (
-		<div className="flex items-center gap-4">
-			<UserMenu userName={userName} />
-		</div>
-	);
-}
-
-function UserMenu({ userName }: { userName: string }) {
-	const { logout } = useAuth();
-	const [open, setOpen] = useState(false);
-
-	return (
-		<div className="relative">
-			<button
-				type="button"
-				onClick={() => setOpen((prev) => !prev)}
-				className="flex items-center gap-2 rounded-md px-3 py-2 transition-colors hover:bg-teal-600"
-				aria-label="User menu"
-				aria-expanded={open}
-				aria-haspopup="true"
-			>
-				<div
-					className="flex size-8 items-center justify-center rounded-full bg-teal-300 font-semibold text-teal-900"
-					aria-hidden
-				>
-					{userName.charAt(0).toUpperCase()}
-				</div>
-				<span className="hidden font-medium md:inline">{userName.toUpperCase()}</span>
-				<ChevronDown className="hidden size-4 md:inline" aria-hidden />
-			</button>
-
-			{open && (
-				<>
-					<div className="fixed inset-0 z-40" onClick={() => setOpen(false)} aria-hidden />
-					<div
-						className="absolute right-0 top-full z-50 mt-2 w-48 overflow-hidden rounded-lg bg-white py-1 shadow-xl"
-						role="menu"
-					>
-						<Link
-							to={ROUTES.PROFILE.PATH}
-							onClick={() => setOpen(false)}
-							className="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 transition-colors hover:bg-gray-100"
-							role="menuitem"
-						>
-							<UserPen className="size-4" aria-hidden />
-							Edit Profile
-						</Link>
-						<div className="mx-3 border-t border-gray-200" />
-						<button
-							type="button"
-							onClick={() => {
-								setOpen(false);
-								logout();
-							}}
-							className="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-gray-700 transition-colors hover:bg-gray-100"
-							role="menuitem"
-						>
-							<LogOut className="size-4" aria-hidden />
-							Log Out
-						</button>
-					</div>
-				</>
-			)}
-		</div>
-	);
-}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/layout/VerticalNav.tsx

@@ -1,17 +1,17 @@
 import { Link, useLocation } from "react-router";
 import { Home, Search, BarChart3, Wrench, Phone, type LucideIcon } from "lucide-react";
 import { useAuth } from "@/features/authentication/context/AuthContext";
-import { useTenantAccess } from "@/hooks/useTenantAccess";
+import { useTenantAccess } from "@/context/TenantAccessContext";
 import { useMemo } from "react";
 
-interface NavItem {
+interface VerticalNavItem {
 	path: string;
 	icon: LucideIcon;
 	label: string;
 	authRequired?: boolean;
 }
 
-const navItems: NavItem[] = [
+const navItems: VerticalNavItem[] = [
 	{ path: "/", icon: Home, label: "Home" },
 	{ path: "/dashboard", icon: BarChart3, label: "Dashboard", authRequired: true },
 	{ path: "/properties", icon: Search, label: "Property Search" },
@@ -19,15 +19,15 @@ const navItems: NavItem[] = [
 	{ path: "/contact", icon: Phone, label: "Contact Us" },
 ];
 
-interface NavMenuProps {
+interface VerticalNavProps {
 	isOpen?: boolean;
 	onClose?: () => void;
 }
 
-export function NavMenu({ isOpen = false, onClose }: NavMenuProps) {
+export function VerticalNav({ isOpen = false, onClose }: VerticalNavProps) {
 	const location = useLocation();
-	const { isAuthenticated, user } = useAuth();
-	const { hasTenantRecord } = useTenantAccess(user?.id);
+	const { isAuthenticated } = useAuth();
+	const { hasTenantRecord } = useTenantAccess();
 
 	const visibleItems = useMemo(
 		() =>

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/avatar.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import * as React from 'react';
+import { Avatar as AvatarPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+function Avatar({
+  className,
+  size = 'default',
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: 'default' | 'sm' | 'lg';
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        'group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn('aspect-square size-full', className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        'flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none',
+        'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
+        'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
+        'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  AvatarGroupCount,
+};

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,257 @@
+'use client';
+
+import * as React from 'react';
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  );
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          'z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  );
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: 'default' | 'destructive';
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn('-mx-1 my-1 h-px bg-border', className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        'ml-auto text-xs tracking-widest text-muted-foreground',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        'z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+};

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/index.ts

@@ -13,6 +13,14 @@
  */
 
 export { Alert, AlertTitle, AlertDescription, AlertAction } from './alert';
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  AvatarGroupCount,
+} from './avatar';
 export { Button, buttonVariants } from './button';
 export {
   Card,
@@ -35,6 +43,23 @@ export {
   DialogTitle,
   DialogTrigger,
 } from './dialog';
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+} from './dropdown-menu';
 export {
   Field,
   FieldDescription,

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/context/TenantAccessContext.tsx

@@ -0,0 +1,55 @@
+import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
+import { useAuth } from "@/features/authentication/context/AuthContext";
+import { hasTenantAccess } from "@/api/tenantApi";
+
+interface TenantAccessContextType {
+	hasTenantRecord: boolean;
+	loading: boolean;
+}
+
+const TenantAccessContext = createContext<TenantAccessContextType>({
+	hasTenantRecord: false,
+	loading: true,
+});
+
+export function TenantAccessProvider({ children }: { children: ReactNode }) {
+	const { user } = useAuth();
+	const [hasTenantRecord, setHasTenantRecord] = useState(false);
+	const [loading, setLoading] = useState(true);
+
+	useEffect(() => {
+		const id = user?.id?.trim() ?? "";
+		if (!id) {
+			setHasTenantRecord(false);
+			setLoading(false);
+			return;
+		}
+
+		let cancelled = false;
+		setLoading(true);
+		hasTenantAccess(id)
+			.then((allowed) => {
+				if (!cancelled) setHasTenantRecord(allowed);
+			})
+			.catch(() => {
+				if (!cancelled) setHasTenantRecord(false);
+			})
+			.finally(() => {
+				if (!cancelled) setLoading(false);
+			});
+
+		return () => {
+			cancelled = true;
+		};
+	}, [user?.id]);
+
+	return (
+		<TenantAccessContext.Provider value={{ hasTenantRecord, loading }}>
+			{children}
+		</TenantAccessContext.Provider>
+	);
+}
+
+export function useTenantAccess(): TenantAccessContextType {
+	return useContext(TenantAccessContext);
+}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/layouts/TenantRoute.tsx

@@ -1,12 +1,12 @@
 import { Navigate, Outlet, useLocation } from "react-router";
 import { useAuth } from "@/features/authentication/context/AuthContext";
 import { ROUTES } from "@/features/authentication/authenticationConfig";
-import { useTenantAccess } from "@/hooks/useTenantAccess";
+import { useTenantAccess } from "@/context/TenantAccessContext";
 
 export default function TenantRoute() {
 	const location = useLocation();
-	const { isAuthenticated, loading, user } = useAuth();
-	const { hasTenantRecord, loading: tenantLoading } = useTenantAccess(user?.id);
+	const { isAuthenticated, loading } = useAuth();
+	const { hasTenantRecord, loading: tenantLoading } = useTenantAccess();
 
 	if (loading || tenantLoading) return null;
 

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/menu/AuthMenu.tsx

@@ -0,0 +1,93 @@
+import { CircleUser, LogIn, LogOut, UserPen, UserPlus } from "lucide-react";
+import { Link } from "react-router";
+import { useAuth } from "../context/AuthContext";
+import { ROUTES } from "../authenticationConfig";
+import { Button } from "../../../components/ui/button";
+import { Skeleton } from "../../../components/ui/skeleton";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "../../../components/ui/dropdown-menu";
+
+interface User {
+	readonly id: string;
+	readonly name: string;
+}
+
+export interface AuthMenuProps {
+	/** Custom trigger button for the authenticated user's dropdown */
+	trigger?: (user: User) => React.ReactNode;
+	/** Content rendered instead of the dropdown when the user is not logged in (e.g. a standalone Sign In button) */
+	guestContent?: React.ReactNode;
+	/** Extra menu items inserted after "Edit Profile" and before "Sign Out" */
+	menuItems?: React.ReactNode;
+	/** CSS class applied to the DropdownMenuContent wrapper */
+	className?: string;
+}
+
+export function AuthMenu({ trigger, guestContent, menuItems, className }: AuthMenuProps) {
+	const { user, isAuthenticated, loading, logout } = useAuth();
+
+	if (loading) {
+		return <Skeleton className="size-8 rounded-full" />;
+	}
+
+	if (!isAuthenticated && guestContent) {
+		return <>{guestContent}</>;
+	}
+
+	const defaultTrigger = (
+		<Button variant="ghost" size="icon" aria-label="User menu">
+			<CircleUser className="size-6" />
+		</Button>
+	);
+
+	const triggerNode = (isAuthenticated && user && trigger?.(user)) || defaultTrigger;
+
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>{triggerNode}</DropdownMenuTrigger>
+
+			<DropdownMenuContent align="end" className={className ?? "w-48"}>
+				{isAuthenticated ? (
+					<>
+						<DropdownMenuLabel className="truncate">{user?.name}</DropdownMenuLabel>
+						<DropdownMenuSeparator />
+						<DropdownMenuItem asChild>
+							<Link to={ROUTES.PROFILE.PATH}>
+								<UserPen className="size-4" />
+								Edit Profile
+							</Link>
+						</DropdownMenuItem>
+						{menuItems}
+						<DropdownMenuItem onClick={() => logout()}>
+							<LogOut className="size-4" />
+							Sign Out
+						</DropdownMenuItem>
+					</>
+				) : (
+					<>
+						<DropdownMenuItem asChild>
+							<Link to={ROUTES.LOGIN.PATH}>
+								<LogIn className="size-4" />
+								Log In
+							</Link>
+						</DropdownMenuItem>
+						<DropdownMenuItem asChild>
+							<Link to={ROUTES.REGISTER.PATH}>
+								<UserPlus className="size-4" />
+								Register
+							</Link>
+						</DropdownMenuItem>
+					</>
+				)}
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}
+
+export default AuthMenu;

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/object-search/utils/filterUtils.ts

@@ -385,7 +385,16 @@ function buildSingleFilter<TFilter>(
 			if (!value) return null;
 			const searchFields = config?.searchFields ?? [];
 			if (searchFields.length === 0) return null;
-			const clauses = searchFields.map((f) => ({ [f]: { like: `%${value}%` } }) as TFilter);
+			// Supports dot-notation for relationship fields (e.g. "User__r.Name")
+			// by building nested filter objects: { User__r: { Name: { like: "%x%" } } }
+			const clauses = searchFields.map((f) => {
+				const parts = f.split(".");
+				let clause: Record<string, unknown> = { like: `%${value}%` };
+				for (let i = parts.length - 1; i >= 0; i--) {
+					clause = { [parts[i]]: clause };
+				}
+				return clause as TFilter;
+			});
 			if (clauses.length === 1) return clauses[0];
 			return { or: clauses } as TFilter;
 		}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/routes.tsx

@@ -49,7 +49,7 @@ export const routes: RouteObject[] = [
           {
             path: ROUTES.LOGIN.PATH,
             element: <Login />,
-            handle: { showInNavigation: true, label: "Login", title: ROUTES.LOGIN.TITLE }
+            handle: { showInNavigation: false, label: "Login", title: ROUTES.LOGIN.TITLE }
           },
           {
             path: ROUTES.REGISTER.PATH,
@@ -74,7 +74,7 @@ export const routes: RouteObject[] = [
           {
             path: ROUTES.PROFILE.PATH,
             element: <Profile />,
-            handle: { showInNavigation: true, label: "Profile", title: ROUTES.PROFILE.TITLE }
+            handle: { showInNavigation: false, label: "Profile", title: ROUTES.PROFILE.TITLE }
           },
           {
             path: ROUTES.CHANGE_PASSWORD.PATH,

package/dist/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.118.4",
+  "version": "1.119.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-      "version": "1.118.4",
+      "version": "1.119.1",
       "license": "SEE LICENSE IN LICENSE.txt",
       "devDependencies": {
         "@lwc/eslint-plugin-lwc": "^3.3.0",

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/ui-bundle-template-base-sfdx-project",
-  "version": "1.118.4",
+  "version": "1.119.1",
   "description": "Base SFDX project template",
   "license": "SEE LICENSE IN LICENSE.txt",
   "publishConfig": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/ui-bundle-template-app-react-sample-b2x",
-  "version": "1.118.4",
+  "version": "1.119.1",
   "description": "Salesforce sample property rental React app",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/hooks/useTenantAccess.ts

@@ -1,38 +0,0 @@
-import { useEffect, useState } from "react";
-import { hasTenantAccess } from "@/api/tenantApi";
-
-export function useTenantAccess(userId: string | undefined): {
-	hasTenantRecord: boolean;
-	loading: boolean;
-} {
-	const [hasTenantRecord, setHasTenantRecord] = useState(false);
-	const [loading, setLoading] = useState(false);
-
-	useEffect(() => {
-		const id = userId?.trim() ?? "";
-		if (!id) {
-			setHasTenantRecord(false);
-			setLoading(false);
-			return;
-		}
-
-		let cancelled = false;
-		setLoading(true);
-		hasTenantAccess(id)
-			.then((allowed) => {
-				if (!cancelled) setHasTenantRecord(allowed);
-			})
-			.catch(() => {
-				if (!cancelled) setHasTenantRecord(false);
-			})
-			.finally(() => {
-				if (!cancelled) setLoading(false);
-			});
-
-		return () => {
-			cancelled = true;
-		};
-	}, [userId]);
-
-	return { hasTenantRecord, loading };
-}