@salesforce/ui-bundle-template-app-react-sample-b2e 1.118.3 → 1.119.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/CHANGELOG.md CHANGED
@@ -3,6 +3,22 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [1.119.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.118.4...v1.119.0) (2026-03-31)
7
+
8
+ **Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
9
+
10
+
11
+
12
+
13
+
14
+ ## [1.118.4](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.118.3...v1.118.4) (2026-03-31)
15
+
16
+ **Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
17
+
18
+
19
+
20
+
21
+
6
22
  ## [1.118.3](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.118.2...v1.118.3) (2026-03-31)
7
23
 
8
24
  **Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
@@ -15,8 +15,8 @@
15
15
  "graphql:schema": "node scripts/get-graphql-schema.mjs"
16
16
  },
17
17
  "dependencies": {
18
- "@salesforce/sdk-data": "^1.118.3",
19
- "@salesforce/ui-bundle": "^1.118.3",
18
+ "@salesforce/sdk-data": "^1.119.0",
19
+ "@salesforce/ui-bundle": "^1.119.0",
20
20
  "@tailwindcss/vite": "^4.1.17",
21
21
  "class-variance-authority": "^0.7.1",
22
22
  "clsx": "^2.1.1",
@@ -43,7 +43,7 @@
43
43
  "@graphql-eslint/eslint-plugin": "^4.1.0",
44
44
  "@graphql-tools/utils": "^11.0.0",
45
45
  "@playwright/test": "^1.49.0",
46
- "@salesforce/vite-plugin-ui-bundle": "^1.118.3",
46
+ "@salesforce/vite-plugin-ui-bundle": "^1.119.0",
47
47
  "@testing-library/jest-dom": "^6.6.3",
48
48
  "@testing-library/react": "^16.1.0",
49
49
  "@testing-library/user-event": "^14.5.2",
@@ -0,0 +1,109 @@
1
+ 'use client';
2
+
3
+ import * as React from 'react';
4
+ import { Avatar as AvatarPrimitive } from 'radix-ui';
5
+
6
+ import { cn } from '@/lib/utils';
7
+
8
+ function Avatar({
9
+ className,
10
+ size = 'default',
11
+ ...props
12
+ }: React.ComponentProps<typeof AvatarPrimitive.Root> & {
13
+ size?: 'default' | 'sm' | 'lg';
14
+ }) {
15
+ return (
16
+ <AvatarPrimitive.Root
17
+ data-slot="avatar"
18
+ data-size={size}
19
+ className={cn(
20
+ 'group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6',
21
+ className
22
+ )}
23
+ {...props}
24
+ />
25
+ );
26
+ }
27
+
28
+ function AvatarImage({
29
+ className,
30
+ ...props
31
+ }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
32
+ return (
33
+ <AvatarPrimitive.Image
34
+ data-slot="avatar-image"
35
+ className={cn('aspect-square size-full', className)}
36
+ {...props}
37
+ />
38
+ );
39
+ }
40
+
41
+ function AvatarFallback({
42
+ className,
43
+ ...props
44
+ }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
45
+ return (
46
+ <AvatarPrimitive.Fallback
47
+ data-slot="avatar-fallback"
48
+ className={cn(
49
+ 'flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs',
50
+ className
51
+ )}
52
+ {...props}
53
+ />
54
+ );
55
+ }
56
+
57
+ function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
58
+ return (
59
+ <span
60
+ data-slot="avatar-badge"
61
+ className={cn(
62
+ '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',
63
+ 'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
64
+ 'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
65
+ 'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
66
+ className
67
+ )}
68
+ {...props}
69
+ />
70
+ );
71
+ }
72
+
73
+ function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {
74
+ return (
75
+ <div
76
+ data-slot="avatar-group"
77
+ className={cn(
78
+ 'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',
79
+ className
80
+ )}
81
+ {...props}
82
+ />
83
+ );
84
+ }
85
+
86
+ function AvatarGroupCount({
87
+ className,
88
+ ...props
89
+ }: React.ComponentProps<'div'>) {
90
+ return (
91
+ <div
92
+ data-slot="avatar-group-count"
93
+ className={cn(
94
+ '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',
95
+ className
96
+ )}
97
+ {...props}
98
+ />
99
+ );
100
+ }
101
+
102
+ export {
103
+ Avatar,
104
+ AvatarImage,
105
+ AvatarFallback,
106
+ AvatarBadge,
107
+ AvatarGroup,
108
+ AvatarGroupCount,
109
+ };
@@ -0,0 +1,257 @@
1
+ 'use client';
2
+
3
+ import * as React from 'react';
4
+ import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
5
+ import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
6
+
7
+ import { cn } from '@/lib/utils';
8
+
9
+ function DropdownMenu({
10
+ ...props
11
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
12
+ return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
13
+ }
14
+
15
+ function DropdownMenuPortal({
16
+ ...props
17
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
18
+ return (
19
+ <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
20
+ );
21
+ }
22
+
23
+ function DropdownMenuTrigger({
24
+ ...props
25
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
26
+ return (
27
+ <DropdownMenuPrimitive.Trigger
28
+ data-slot="dropdown-menu-trigger"
29
+ {...props}
30
+ />
31
+ );
32
+ }
33
+
34
+ function DropdownMenuContent({
35
+ className,
36
+ sideOffset = 4,
37
+ ...props
38
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
39
+ return (
40
+ <DropdownMenuPrimitive.Portal>
41
+ <DropdownMenuPrimitive.Content
42
+ data-slot="dropdown-menu-content"
43
+ sideOffset={sideOffset}
44
+ className={cn(
45
+ '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',
46
+ className
47
+ )}
48
+ {...props}
49
+ />
50
+ </DropdownMenuPrimitive.Portal>
51
+ );
52
+ }
53
+
54
+ function DropdownMenuGroup({
55
+ ...props
56
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
57
+ return (
58
+ <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
59
+ );
60
+ }
61
+
62
+ function DropdownMenuItem({
63
+ className,
64
+ inset,
65
+ variant = 'default',
66
+ ...props
67
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
68
+ inset?: boolean;
69
+ variant?: 'default' | 'destructive';
70
+ }) {
71
+ return (
72
+ <DropdownMenuPrimitive.Item
73
+ data-slot="dropdown-menu-item"
74
+ data-inset={inset}
75
+ data-variant={variant}
76
+ className={cn(
77
+ "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!",
78
+ className
79
+ )}
80
+ {...props}
81
+ />
82
+ );
83
+ }
84
+
85
+ function DropdownMenuCheckboxItem({
86
+ className,
87
+ children,
88
+ checked,
89
+ ...props
90
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
91
+ return (
92
+ <DropdownMenuPrimitive.CheckboxItem
93
+ data-slot="dropdown-menu-checkbox-item"
94
+ className={cn(
95
+ "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",
96
+ className
97
+ )}
98
+ checked={checked}
99
+ {...props}
100
+ >
101
+ <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
102
+ <DropdownMenuPrimitive.ItemIndicator>
103
+ <CheckIcon className="size-4" />
104
+ </DropdownMenuPrimitive.ItemIndicator>
105
+ </span>
106
+ {children}
107
+ </DropdownMenuPrimitive.CheckboxItem>
108
+ );
109
+ }
110
+
111
+ function DropdownMenuRadioGroup({
112
+ ...props
113
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
114
+ return (
115
+ <DropdownMenuPrimitive.RadioGroup
116
+ data-slot="dropdown-menu-radio-group"
117
+ {...props}
118
+ />
119
+ );
120
+ }
121
+
122
+ function DropdownMenuRadioItem({
123
+ className,
124
+ children,
125
+ ...props
126
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
127
+ return (
128
+ <DropdownMenuPrimitive.RadioItem
129
+ data-slot="dropdown-menu-radio-item"
130
+ className={cn(
131
+ "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",
132
+ className
133
+ )}
134
+ {...props}
135
+ >
136
+ <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
137
+ <DropdownMenuPrimitive.ItemIndicator>
138
+ <CircleIcon className="size-2 fill-current" />
139
+ </DropdownMenuPrimitive.ItemIndicator>
140
+ </span>
141
+ {children}
142
+ </DropdownMenuPrimitive.RadioItem>
143
+ );
144
+ }
145
+
146
+ function DropdownMenuLabel({
147
+ className,
148
+ inset,
149
+ ...props
150
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
151
+ inset?: boolean;
152
+ }) {
153
+ return (
154
+ <DropdownMenuPrimitive.Label
155
+ data-slot="dropdown-menu-label"
156
+ data-inset={inset}
157
+ className={cn(
158
+ 'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
159
+ className
160
+ )}
161
+ {...props}
162
+ />
163
+ );
164
+ }
165
+
166
+ function DropdownMenuSeparator({
167
+ className,
168
+ ...props
169
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
170
+ return (
171
+ <DropdownMenuPrimitive.Separator
172
+ data-slot="dropdown-menu-separator"
173
+ className={cn('-mx-1 my-1 h-px bg-border', className)}
174
+ {...props}
175
+ />
176
+ );
177
+ }
178
+
179
+ function DropdownMenuShortcut({
180
+ className,
181
+ ...props
182
+ }: React.ComponentProps<'span'>) {
183
+ return (
184
+ <span
185
+ data-slot="dropdown-menu-shortcut"
186
+ className={cn(
187
+ 'ml-auto text-xs tracking-widest text-muted-foreground',
188
+ className
189
+ )}
190
+ {...props}
191
+ />
192
+ );
193
+ }
194
+
195
+ function DropdownMenuSub({
196
+ ...props
197
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
198
+ return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
199
+ }
200
+
201
+ function DropdownMenuSubTrigger({
202
+ className,
203
+ inset,
204
+ children,
205
+ ...props
206
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
207
+ inset?: boolean;
208
+ }) {
209
+ return (
210
+ <DropdownMenuPrimitive.SubTrigger
211
+ data-slot="dropdown-menu-sub-trigger"
212
+ data-inset={inset}
213
+ className={cn(
214
+ "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",
215
+ className
216
+ )}
217
+ {...props}
218
+ >
219
+ {children}
220
+ <ChevronRightIcon className="ml-auto size-4" />
221
+ </DropdownMenuPrimitive.SubTrigger>
222
+ );
223
+ }
224
+
225
+ function DropdownMenuSubContent({
226
+ className,
227
+ ...props
228
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
229
+ return (
230
+ <DropdownMenuPrimitive.SubContent
231
+ data-slot="dropdown-menu-sub-content"
232
+ className={cn(
233
+ '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',
234
+ className
235
+ )}
236
+ {...props}
237
+ />
238
+ );
239
+ }
240
+
241
+ export {
242
+ DropdownMenu,
243
+ DropdownMenuPortal,
244
+ DropdownMenuTrigger,
245
+ DropdownMenuContent,
246
+ DropdownMenuGroup,
247
+ DropdownMenuLabel,
248
+ DropdownMenuItem,
249
+ DropdownMenuCheckboxItem,
250
+ DropdownMenuRadioGroup,
251
+ DropdownMenuRadioItem,
252
+ DropdownMenuSeparator,
253
+ DropdownMenuShortcut,
254
+ DropdownMenuSub,
255
+ DropdownMenuSubTrigger,
256
+ DropdownMenuSubContent,
257
+ };
@@ -13,6 +13,14 @@
13
13
  */
14
14
 
15
15
  export { Alert, AlertTitle, AlertDescription, AlertAction } from './alert';
16
+ export {
17
+ Avatar,
18
+ AvatarImage,
19
+ AvatarFallback,
20
+ AvatarBadge,
21
+ AvatarGroup,
22
+ AvatarGroupCount,
23
+ } from './avatar';
16
24
  export { Button, buttonVariants } from './button';
17
25
  export {
18
26
  Card,
@@ -35,6 +43,23 @@ export {
35
43
  DialogTitle,
36
44
  DialogTrigger,
37
45
  } from './dialog';
46
+ export {
47
+ DropdownMenu,
48
+ DropdownMenuPortal,
49
+ DropdownMenuTrigger,
50
+ DropdownMenuContent,
51
+ DropdownMenuGroup,
52
+ DropdownMenuLabel,
53
+ DropdownMenuItem,
54
+ DropdownMenuCheckboxItem,
55
+ DropdownMenuRadioGroup,
56
+ DropdownMenuRadioItem,
57
+ DropdownMenuSeparator,
58
+ DropdownMenuShortcut,
59
+ DropdownMenuSub,
60
+ DropdownMenuSubTrigger,
61
+ DropdownMenuSubContent,
62
+ } from './dropdown-menu';
38
63
  export {
39
64
  Field,
40
65
  FieldDescription,
@@ -385,7 +385,16 @@ function buildSingleFilter<TFilter>(
385
385
  if (!value) return null;
386
386
  const searchFields = config?.searchFields ?? [];
387
387
  if (searchFields.length === 0) return null;
388
- const clauses = searchFields.map((f) => ({ [f]: { like: `%${value}%` } }) as TFilter);
388
+ // Supports dot-notation for relationship fields (e.g. "User__r.Name")
389
+ // by building nested filter objects: { User__r: { Name: { like: "%x%" } } }
390
+ const clauses = searchFields.map((f) => {
391
+ const parts = f.split(".");
392
+ let clause: Record<string, unknown> = { like: `%${value}%` };
393
+ for (let i = parts.length - 1; i >= 0; i--) {
394
+ clause = { [parts[i]]: clause };
395
+ }
396
+ return clause as TFilter;
397
+ });
389
398
  if (clauses.length === 1) return clauses[0];
390
399
  return { or: clauses } as TFilter;
391
400
  }
@@ -43,15 +43,18 @@ import type {
43
43
  import { ResultOrder } from "../api/graphql-operations-types";
44
44
  import { Badge } from "../components/ui/badge";
45
45
  import { PAGINATION_CONFIG } from "../lib/constants";
46
+ import { User } from "lucide-react";
46
47
  import { cn } from "../lib/utils";
47
48
 
49
+ const SEARCH_PLACEHOLDER = "Search by application #, applicant, or address...";
50
+
48
51
  const FILTER_CONFIGS: FilterFieldConfig[] = [
49
52
  {
50
53
  field: "search",
51
54
  label: "Search",
52
55
  type: "search",
53
- searchFields: ["Name"],
54
- placeholder: "Search by name...",
56
+ searchFields: ["Name", "User__r.Name", "Property__r.Address__c"],
57
+ placeholder: SEARCH_PLACEHOLDER,
55
58
  },
56
59
  { field: "Status__c", label: "Status", type: "picklist" },
57
60
  { field: "Start_Date__c", label: "Start Date", type: "date" },
@@ -210,8 +213,8 @@ function ApplicationSearchFilters({
210
213
  <SearchFilter
211
214
  field="search"
212
215
  label="Search"
213
- placeholder="Search by name..."
214
- className="w-full sm:w-50"
216
+ placeholder={SEARCH_PLACEHOLDER}
217
+ className="w-full sm:w-80"
215
218
  />
216
219
  <MultiSelectFilter
217
220
  field="Status__c"
@@ -236,10 +239,13 @@ function ApplicationSearchTableHeader() {
236
239
  return (
237
240
  <TableHeader>
238
241
  <TableRow>
242
+ <TableHead className="w-1/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
243
+ Application
244
+ </TableHead>
239
245
  <TableHead className="w-5/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
240
- User
246
+ Applicant
241
247
  </TableHead>
242
- <TableHead className="w-4/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
248
+ <TableHead className="w-3/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
243
249
  Start Date
244
250
  </TableHead>
245
251
  <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() {
253
259
  function ApplicationSearchNoResults() {
254
260
  return (
255
261
  <TableRow>
256
- <TableCell colSpan={3} className="text-center py-12 text-gray-500">
262
+ <TableCell colSpan={4} className="text-center py-12 text-gray-500">
257
263
  No applications found
258
264
  </TableCell>
259
265
  </TableRow>
@@ -270,6 +276,7 @@ function ApplicationSearchTable({
270
276
  return (
271
277
  <>
272
278
  {applicationNodes.map((application) => {
279
+ const applicationName = application.Name?.value || "";
273
280
  const applicantName = application.User__r?.Name?.value || "Unknown";
274
281
  const propertyName = application.Property__r?.Name?.value;
275
282
  const propertyAddress = application.Property__r?.Address__c?.value || "";
@@ -281,12 +288,13 @@ function ApplicationSearchTable({
281
288
  onClick={() => setSelectedApplication(application)}
282
289
  className="hover:bg-gray-50 transition-colors cursor-pointer"
283
290
  >
291
+ <TableCell className="px-6 py-4">
292
+ <div className="text-sm font-medium text-gray-900">{applicationName}</div>
293
+ </TableCell>
284
294
  <TableCell className="px-6 py-4">
285
295
  <div className="flex items-center">
286
296
  <div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0">
287
- <span className="text-sm font-medium text-purple-700">
288
- {applicantName.charAt(0) || "?"}
289
- </span>
297
+ <User className="w-5 h-5 text-purple-700" />
290
298
  </div>
291
299
  <div className="ml-4">
292
300
  <div className="text-sm font-medium text-gray-900">{applicantName}</div>
@@ -335,6 +343,9 @@ function ApplicationSearchSkeleton({ pageSize }: { pageSize: number }) {
335
343
  <>
336
344
  {Array.from({ length: pageSize }, (_, i) => (
337
345
  <TableRow key={i}>
346
+ <TableCell className="px-6 py-4">
347
+ <Skeleton className="h-4 w-24" />
348
+ </TableCell>
338
349
  <TableCell className="px-6 py-4">
339
350
  <div className="flex items-center">
340
351
  <Skeleton className="h-10 w-10 rounded-full shrink-0" />
@@ -361,7 +372,7 @@ function ApplicationSearchErrorState() {
361
372
 
362
373
  return (
363
374
  <TableRow>
364
- <TableCell colSpan={3} className="p-0">
375
+ <TableCell colSpan={4} className="p-0">
365
376
  <ObjectSearchErrorState
366
377
  message="There was an error loading the applications. Please try again."
367
378
  onGoHome={() => navigate("/")}
@@ -67,8 +67,8 @@ const FILTER_CONFIGS: FilterFieldConfig[] = [
67
67
  field: "search",
68
68
  label: "Search",
69
69
  type: "search",
70
- searchFields: ["Name"],
71
- placeholder: "Search by name...",
70
+ searchFields: ["Name", "User__r.Name", "Property__r.Address__c", "Assigned_Worker__r.Name"],
71
+ placeholder: "Search by request #, tenant, address, or worker...",
72
72
  },
73
73
  { field: "Status__c", label: "Status", type: "picklist" },
74
74
  { field: "Type__c", label: "Type", type: "picklist" },
@@ -249,8 +249,8 @@ function MaintenanceRequestSearchFilters({
249
249
  <SearchFilter
250
250
  field="search"
251
251
  label="Search"
252
- placeholder="Search by name..."
253
- className="w-full sm:w-50"
252
+ placeholder="Search by request #, tenant, address, or worker..."
253
+ className="w-full sm:w-80"
254
254
  />
255
255
  <MultiSelectFilter
256
256
  field="Status__c"
@@ -323,6 +323,7 @@ function MaintenanceRequestSearchTable({
323
323
  return (
324
324
  <>
325
325
  {requestNodes.map((request) => {
326
+ const requestName = request.Name?.value ?? "";
326
327
  const issueType = request.Type__c?.value ?? "";
327
328
  const description = request.Description__c?.value ?? "";
328
329
  const tenantName = request.User__r?.Name?.value || "Unknown";
@@ -355,7 +356,7 @@ function MaintenanceRequestSearchTable({
355
356
  </div>
356
357
  <div className="flex-1 min-w-0">
357
358
  <h3 className="font-semibold text-gray-900 truncate mb-1">{description}</h3>
358
- <p className="text-sm text-gray-500">By Tenant</p>
359
+ <p className="text-sm text-gray-500">{requestName}</p>
359
360
  </div>
360
361
  </div>
361
362
  </TableCell>
@@ -363,8 +364,8 @@ function MaintenanceRequestSearchTable({
363
364
  <div className="flex items-center gap-3 min-w-0">
364
365
  <UserAvatar name={tenantName} size="md" />
365
366
  <div className="min-w-0 flex-1">
366
- <p className="font-medium text-gray-900 truncate">{tenantName}</p>
367
- <p className="text-gray-500 truncate">{tenantUnit}</p>
367
+ <p className="font-medium text-gray-900 truncate">{tenantUnit}</p>
368
+ <p className="text-gray-500 truncate">{tenantName}</p>
368
369
  </div>
369
370
  </div>
370
371
  </TableCell>
@@ -222,16 +222,22 @@ function MaintenanceWorkerSearchTableHeader() {
222
222
  return (
223
223
  <TableHeader>
224
224
  <TableRow>
225
- <TableHead className="w-4/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
225
+ <TableHead className="w-3/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
226
226
  Name
227
227
  </TableHead>
228
- <TableHead className="w-3/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
228
+ <TableHead className="w-2/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
229
+ Phone
230
+ </TableHead>
231
+ <TableHead className="w-2/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
232
+ Location
233
+ </TableHead>
234
+ <TableHead className="w-2/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
229
235
  Organization
230
236
  </TableHead>
231
- <TableHead className="w-3/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
237
+ <TableHead className="w-2/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
232
238
  Active Requests
233
239
  </TableHead>
234
- <TableHead className="w-2/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
240
+ <TableHead className="w-1/12 px-6 py-4 bg-gray-50 text-sm font-semibold text-purple-700 uppercase tracking-wide">
235
241
  Status
236
242
  </TableHead>
237
243
  </TableRow>
@@ -242,7 +248,7 @@ function MaintenanceWorkerSearchTableHeader() {
242
248
  function MaintenanceWorkerSearchNoResults() {
243
249
  return (
244
250
  <TableRow>
245
- <TableCell colSpan={4} className="text-center py-12 text-gray-500">
251
+ <TableCell colSpan={6} className="text-center py-12 text-gray-500">
246
252
  No maintenance workers found
247
253
  </TableCell>
248
254
  </TableRow>
@@ -268,6 +274,12 @@ function MaintenanceWorkerSearchTable({
268
274
  className="hover:bg-gray-50 transition-colors cursor-pointer"
269
275
  >
270
276
  <TableCell className="px-6 py-4 font-medium text-gray-900">{name}</TableCell>
277
+ <TableCell className="px-6 py-4 text-gray-600">
278
+ {worker.Phone__c?.value ?? "\u2014"}
279
+ </TableCell>
280
+ <TableCell className="px-6 py-4 text-gray-600">
281
+ {worker.Location__c?.value ?? "\u2014"}
282
+ </TableCell>
271
283
  <TableCell className="px-6 py-4 text-gray-600">
272
284
  {worker.Employment_Type__c?.value ?? worker.Type__c?.value ?? "\u2014"}
273
285
  </TableCell>
@@ -289,16 +301,22 @@ function MaintenanceWorkerSearchSkeleton({ pageSize }: { pageSize: number }) {
289
301
  <>
290
302
  {Array.from({ length: pageSize }, (_, i) => (
291
303
  <TableRow key={i}>
292
- <TableCell className="w-4/12 px-6 py-4">
304
+ <TableCell className="w-3/12 px-6 py-4">
293
305
  <Skeleton className="h-5 w-3/4" />
294
306
  </TableCell>
295
- <TableCell className="w-3/12 px-6 py-4">
307
+ <TableCell className="w-2/12 px-6 py-4">
296
308
  <Skeleton className="h-5 w-2/3" />
297
309
  </TableCell>
298
- <TableCell className="w-3/12 px-6 py-4">
299
- <Skeleton className="h-5 w-1/4" />
310
+ <TableCell className="w-2/12 px-6 py-4">
311
+ <Skeleton className="h-5 w-2/3" />
312
+ </TableCell>
313
+ <TableCell className="w-2/12 px-6 py-4">
314
+ <Skeleton className="h-5 w-2/3" />
300
315
  </TableCell>
301
316
  <TableCell className="w-2/12 px-6 py-4">
317
+ <Skeleton className="h-5 w-1/4" />
318
+ </TableCell>
319
+ <TableCell className="w-1/12 px-6 py-4">
302
320
  <Skeleton className="h-5 w-1/2" />
303
321
  </TableCell>
304
322
  </TableRow>
@@ -312,7 +330,7 @@ function MaintenanceWorkerSearchErrorState() {
312
330
 
313
331
  return (
314
332
  <TableRow>
315
- <TableCell colSpan={4} className="p-0">
333
+ <TableCell colSpan={6} className="p-0">
316
334
  <ObjectSearchErrorState
317
335
  message="There was an error loading the maintenance workers. Please try again."
318
336
  onGoHome={() => navigate("/")}
@@ -39,7 +39,6 @@ const FILTER_CONFIGS: FilterFieldConfig[] = [
39
39
  searchFields: ["Name", "Address__c"],
40
40
  placeholder: "Search by name or address...",
41
41
  },
42
- { field: "Name", label: "Property Name", type: "text", placeholder: "Search by name..." },
43
42
  { field: "Status__c", label: "Status", type: "picklist" },
44
43
  { field: "Type__c", label: "Type", type: "picklist" },
45
44
  { field: "Monthly_Rent__c", label: "Monthly Rent", type: "numeric" },
@@ -169,7 +168,7 @@ function PropertySearchFilters({
169
168
  field="search"
170
169
  label="Search"
171
170
  placeholder="Search by name or address..."
172
- className="w-full sm:w-50"
171
+ className="w-full sm:w-80"
173
172
  />
174
173
  <MultiSelectFilter
175
174
  field="Status__c"
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
3
- "version": "1.118.3",
3
+ "version": "1.119.0",
4
4
  "lockfileVersion": 3,
5
5
  "requires": true,
6
6
  "packages": {
7
7
  "": {
8
8
  "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
9
- "version": "1.118.3",
9
+ "version": "1.119.0",
10
10
  "license": "SEE LICENSE IN LICENSE.txt",
11
11
  "devDependencies": {
12
12
  "@lwc/eslint-plugin-lwc": "^3.3.0",
package/dist/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforce/ui-bundle-template-base-sfdx-project",
3
- "version": "1.118.3",
3
+ "version": "1.119.0",
4
4
  "description": "Base SFDX project template",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "publishConfig": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforce/ui-bundle-template-app-react-sample-b2e",
3
- "version": "1.118.3",
3
+ "version": "1.119.0",
4
4
  "description": "Salesforce sample property rental React app",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "author": "",
@@ -16,7 +16,7 @@
16
16
  "clean": "rm -rf dist"
17
17
  },
18
18
  "dependencies": {
19
- "@salesforce/ui-bundle": "^1.118.3",
19
+ "@salesforce/ui-bundle": "^1.119.0",
20
20
  "sonner": "^1.7.0"
21
21
  },
22
22
  "devDependencies": {