@salesforce/ui-bundle-template-app-react-sample-b2e 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/propertymanagementapp/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",
@@ -43,7 +43,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/propertymanagementapp/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/propertymanagementapp/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/propertymanagementapp/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/propertymanagementapp/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/propertymanagementapp/src/pages/ApplicationSearch.tsx

@@ -43,15 +43,18 @@ import type {
 import { ResultOrder } from "../api/graphql-operations-types";
 import { Badge } from "../components/ui/badge";
 import { PAGINATION_CONFIG } from "../lib/constants";
+import { User } from "lucide-react";
 import { cn } from "../lib/utils";
 
+const SEARCH_PLACEHOLDER = "Search by application #, applicant, or address...";
+
 const FILTER_CONFIGS: FilterFieldConfig[] = [
 	{
 		field: "search",
 		label: "Search",
 		type: "search",
-		searchFields: ["Name"],
-		placeholder: "Search by name...",
+		searchFields: ["Name", "User__r.Name", "Property__r.Address__c"],
+		placeholder: SEARCH_PLACEHOLDER,
 	},
 	{ field: "Status__c", label: "Status", type: "picklist" },
 	{ field: "Start_Date__c", label: "Start Date", type: "date" },
@@ -210,8 +213,8 @@ function ApplicationSearchFilters({
 				<SearchFilter
 					field="search"
 					label="Search"
-					placeholder="Search by name..."
-					className="w-full sm:w-50"
+					placeholder={SEARCH_PLACEHOLDER}
+					className="w-full sm:w-80"
 				/>
 				<MultiSelectFilter
 					field="Status__c"
@@ -236,10 +239,13 @@ function ApplicationSearchTableHeader() {
 	return (
 		<TableHeader>
 			<TableRow>
+				<TableHead className="w-1/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
+					Application
+				</TableHead>
 				<TableHead className="w-5/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
-					User
+					Applicant
 				</TableHead>
-				<TableHead className="w-4/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
+				<TableHead className="w-3/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
 					Start Date
 				</TableHead>
 				<TableHead className="w-3/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
@@ -253,7 +259,7 @@ function ApplicationSearchTableHeader() {
 function ApplicationSearchNoResults() {
 	return (
 		<TableRow>
-			<TableCell colSpan={3} className="text-center py-12 text-gray-500">
+			<TableCell colSpan={4} className="text-center py-12 text-gray-500">
 				No applications found
 			</TableCell>
 		</TableRow>
@@ -270,6 +276,7 @@ function ApplicationSearchTable({
 	return (
 		<>
 			{applicationNodes.map((application) => {
+				const applicationName = application.Name?.value || "";
 				const applicantName = application.User__r?.Name?.value || "Unknown";
 				const propertyName = application.Property__r?.Name?.value;
 				const propertyAddress = application.Property__r?.Address__c?.value || "";
@@ -281,12 +288,13 @@ function ApplicationSearchTable({
 						onClick={() => setSelectedApplication(application)}
 						className="hover:bg-gray-50 transition-colors cursor-pointer"
 					>
+						<TableCell className="px-6 py-4">
+							<div className="text-sm font-medium text-gray-900">{applicationName}</div>
+						</TableCell>
 						<TableCell className="px-6 py-4">
 							<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">
-										{applicantName.charAt(0) || "?"}
-									</span>
+									<User className="w-5 h-5 text-purple-700" />
 								</div>
 								<div className="ml-4">
 									<div className="text-sm font-medium text-gray-900">{applicantName}</div>
@@ -335,6 +343,9 @@ function ApplicationSearchSkeleton({ pageSize }: { pageSize: number }) {
 		<>
 			{Array.from({ length: pageSize }, (_, i) => (
 				<TableRow key={i}>
+					<TableCell className="px-6 py-4">
+						<Skeleton className="h-4 w-24" />
+					</TableCell>
 					<TableCell className="px-6 py-4">
 						<div className="flex items-center">
 							<Skeleton className="h-10 w-10 rounded-full shrink-0" />
@@ -361,7 +372,7 @@ function ApplicationSearchErrorState() {
 
 	return (
 		<TableRow>
-			<TableCell colSpan={3} className="p-0">
+			<TableCell colSpan={4} className="p-0">
 				<ObjectSearchErrorState
 					message="There was an error loading the applications. Please try again."
 					onGoHome={() => navigate("/")}

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/pages/MaintenanceRequestSearch.tsx

@@ -67,8 +67,8 @@ const FILTER_CONFIGS: FilterFieldConfig[] = [
 		field: "search",
 		label: "Search",
 		type: "search",
-		searchFields: ["Name"],
-		placeholder: "Search by name...",
+		searchFields: ["Name", "User__r.Name", "Property__r.Address__c", "Assigned_Worker__r.Name"],
+		placeholder: "Search by request #, tenant, address, or worker...",
 	},
 	{ field: "Status__c", label: "Status", type: "picklist" },
 	{ field: "Type__c", label: "Type", type: "picklist" },
@@ -249,8 +249,8 @@ function MaintenanceRequestSearchFilters({
 				<SearchFilter
 					field="search"
 					label="Search"
-					placeholder="Search by name..."
-					className="w-full sm:w-50"
+					placeholder="Search by request #, tenant, address, or worker..."
+					className="w-full sm:w-80"
 				/>
 				<MultiSelectFilter
 					field="Status__c"
@@ -323,6 +323,7 @@ function MaintenanceRequestSearchTable({
 	return (
 		<>
 			{requestNodes.map((request) => {
+				const requestName = request.Name?.value ?? "";
 				const issueType = request.Type__c?.value ?? "";
 				const description = request.Description__c?.value ?? "";
 				const tenantName = request.User__r?.Name?.value || "Unknown";
@@ -355,7 +356,7 @@ function MaintenanceRequestSearchTable({
 								</div>
 								<div className="flex-1 min-w-0">
 									<h3 className="font-semibold text-gray-900 truncate mb-1">{description}</h3>
-									<p className="text-sm text-gray-500">By Tenant</p>
+									<p className="text-sm text-gray-500">{requestName}</p>
 								</div>
 							</div>
 						</TableCell>
@@ -363,8 +364,8 @@ function MaintenanceRequestSearchTable({
 							<div className="flex items-center gap-3 min-w-0">
 								<UserAvatar name={tenantName} size="md" />
 								<div className="min-w-0 flex-1">
-									<p className="font-medium text-gray-900 truncate">{tenantName}</p>
-									<p className="text-gray-500 truncate">{tenantUnit}</p>
+									<p className="font-medium text-gray-900 truncate">{tenantUnit}</p>
+									<p className="text-gray-500 truncate">{tenantName}</p>
 								</div>
 							</div>
 						</TableCell>

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/pages/MaintenanceWorkerSearch.tsx

@@ -222,16 +222,22 @@ function MaintenanceWorkerSearchTableHeader() {
 	return (
 		<TableHeader>
 			<TableRow>
-				<TableHead className="w-4/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
+				<TableHead className="w-3/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
 					Name
 				</TableHead>
-				<TableHead className="w-3/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
+				<TableHead className="w-2/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
+					Phone
+				</TableHead>
+				<TableHead className="w-2/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
+					Location
+				</TableHead>
+				<TableHead className="w-2/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
 					Organization
 				</TableHead>
-				<TableHead className="w-3/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
+				<TableHead className="w-2/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
 					Active Requests
 				</TableHead>
-				<TableHead className="w-2/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
+				<TableHead className="w-1/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
 					Status
 				</TableHead>
 			</TableRow>
@@ -242,7 +248,7 @@ function MaintenanceWorkerSearchTableHeader() {
 function MaintenanceWorkerSearchNoResults() {
 	return (
 		<TableRow>
-			<TableCell colSpan={4} className="text-center py-12 text-gray-500">
+			<TableCell colSpan={6} className="text-center py-12 text-gray-500">
 				No maintenance workers found
 			</TableCell>
 		</TableRow>
@@ -268,6 +274,12 @@ function MaintenanceWorkerSearchTable({
 						className="hover:bg-gray-50 transition-colors cursor-pointer"
 					>
 						<TableCell className="px-6 py-4 font-medium text-gray-900">{name}</TableCell>
+						<TableCell className="px-6 py-4 text-gray-600">
+							{worker.Phone__c?.value ?? "\u2014"}
+						</TableCell>
+						<TableCell className="px-6 py-4 text-gray-600">
+							{worker.Location__c?.value ?? "\u2014"}
+						</TableCell>
 						<TableCell className="px-6 py-4 text-gray-600">
 							{worker.Employment_Type__c?.value ?? worker.Type__c?.value ?? "\u2014"}
 						</TableCell>
@@ -289,16 +301,22 @@ function MaintenanceWorkerSearchSkeleton({ pageSize }: { pageSize: number }) {
 		<>
 			{Array.from({ length: pageSize }, (_, i) => (
 				<TableRow key={i}>
-					<TableCell className="w-4/12 px-6 py-4">
+					<TableCell className="w-3/12 px-6 py-4">
 						<Skeleton className="h-5 w-3/4" />
 					</TableCell>
-					<TableCell className="w-3/12 px-6 py-4">
+					<TableCell className="w-2/12 px-6 py-4">
 						<Skeleton className="h-5 w-2/3" />
 					</TableCell>
-					<TableCell className="w-3/12 px-6 py-4">
-						<Skeleton className="h-5 w-1/4" />
+					<TableCell className="w-2/12 px-6 py-4">
+						<Skeleton className="h-5 w-2/3" />
+					</TableCell>
+					<TableCell className="w-2/12 px-6 py-4">
+						<Skeleton className="h-5 w-2/3" />
 					</TableCell>
 					<TableCell className="w-2/12 px-6 py-4">
+						<Skeleton className="h-5 w-1/4" />
+					</TableCell>
+					<TableCell className="w-1/12 px-6 py-4">
 						<Skeleton className="h-5 w-1/2" />
 					</TableCell>
 				</TableRow>
@@ -312,7 +330,7 @@ function MaintenanceWorkerSearchErrorState() {
 
 	return (
 		<TableRow>
-			<TableCell colSpan={4} className="p-0">
+			<TableCell colSpan={6} className="p-0">
 				<ObjectSearchErrorState
 					message="There was an error loading the maintenance workers. Please try again."
 					onGoHome={() => navigate("/")}

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/pages/PropertySearch.tsx

@@ -39,7 +39,6 @@ const FILTER_CONFIGS: FilterFieldConfig[] = [
 		searchFields: ["Name", "Address__c"],
 		placeholder: "Search by name or address...",
 	},
-	{ field: "Name", label: "Property Name", type: "text", placeholder: "Search by name..." },
 	{ field: "Status__c", label: "Status", type: "picklist" },
 	{ field: "Type__c", label: "Type", type: "picklist" },
 	{ field: "Monthly_Rent__c", label: "Monthly Rent", type: "numeric" },
@@ -169,7 +168,7 @@ function PropertySearchFilters({
 					field="search"
 					label="Search"
 					placeholder="Search by name or address..."
-					className="w-full sm:w-50"
+					className="w-full sm:w-80"
 				/>
 				<MultiSelectFilter
 					field="Status__c"

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-b2e",
-  "version": "1.118.4",
+  "version": "1.119.1",
   "description": "Salesforce sample property rental React app",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",
@@ -16,7 +16,7 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
-    "@salesforce/ui-bundle": "^1.118.4",
+    "@salesforce/ui-bundle": "^1.119.1",
     "sonner": "^1.7.0"
   },
   "devDependencies": {