@hed-hog/operations 0.0.297 → 0.0.299

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.
Files changed (32) hide show
  1. package/hedhog/frontend/app/_components/collaborator-details-screen.tsx.ejs +310 -310
  2. package/hedhog/frontend/app/_components/collaborator-form-screen.tsx.ejs +631 -631
  3. package/hedhog/frontend/app/_components/contract-details-screen.tsx.ejs +132 -132
  4. package/hedhog/frontend/app/_components/contract-form-screen.tsx.ejs +558 -558
  5. package/hedhog/frontend/app/_components/project-details-screen.tsx.ejs +291 -291
  6. package/hedhog/frontend/app/_components/project-form-screen.tsx.ejs +689 -689
  7. package/hedhog/frontend/app/_lib/api.ts.ejs +32 -32
  8. package/hedhog/frontend/app/_lib/hooks/use-operations-access.ts.ejs +44 -44
  9. package/hedhog/frontend/app/_lib/types.ts.ejs +360 -360
  10. package/hedhog/frontend/app/_lib/utils/format.ts.ejs +129 -129
  11. package/hedhog/frontend/app/_lib/utils/forms.ts.ejs +14 -14
  12. package/hedhog/frontend/app/approvals/page.tsx.ejs +386 -386
  13. package/hedhog/frontend/app/collaborators/[id]/edit/page.tsx.ejs +11 -11
  14. package/hedhog/frontend/app/collaborators/[id]/page.tsx.ejs +11 -11
  15. package/hedhog/frontend/app/collaborators/new/page.tsx.ejs +5 -5
  16. package/hedhog/frontend/app/collaborators/page.tsx.ejs +261 -261
  17. package/hedhog/frontend/app/contracts/[id]/edit/page.tsx.ejs +11 -11
  18. package/hedhog/frontend/app/contracts/[id]/page.tsx.ejs +11 -11
  19. package/hedhog/frontend/app/contracts/new/page.tsx.ejs +17 -17
  20. package/hedhog/frontend/app/contracts/page.tsx.ejs +262 -262
  21. package/hedhog/frontend/app/page.tsx.ejs +319 -319
  22. package/hedhog/frontend/app/projects/[id]/edit/page.tsx.ejs +11 -11
  23. package/hedhog/frontend/app/projects/[id]/page.tsx.ejs +11 -11
  24. package/hedhog/frontend/app/projects/new/page.tsx.ejs +5 -5
  25. package/hedhog/frontend/app/projects/page.tsx.ejs +236 -236
  26. package/hedhog/frontend/app/schedule-adjustments/page.tsx.ejs +418 -418
  27. package/hedhog/frontend/app/team/page.tsx.ejs +339 -339
  28. package/hedhog/frontend/app/time-off/page.tsx.ejs +328 -328
  29. package/hedhog/frontend/app/timesheets/page.tsx.ejs +636 -636
  30. package/hedhog/frontend/messages/en.json +648 -648
  31. package/hedhog/frontend/messages/pt.json +647 -647
  32. package/package.json +4 -4
package/hedhog/frontend/app/team/page.tsx.ejs CHANGED
@@ -1,339 +1,339 @@
1
- 'use client';
2
-
3
- import { EmptyState, Page } from '@/components/entity-list';
4
- import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
5
- import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
6
- import {
7
- Table,
8
- TableBody,
9
- TableCell,
10
- TableHead,
11
- TableHeader,
12
- TableRow,
13
- } from '@/components/ui/table';
14
- import { useApp, useQuery } from '@hed-hog/next-app-provider';
15
- import { Users } from 'lucide-react';
16
- import { useTranslations } from 'next-intl';
17
- import { OperationsHeader } from '../_components/operations-header';
18
- import { StatusBadge } from '../_components/status-badge';
19
- import { fetchOperations } from '../_lib/api';
20
- import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
21
- import type { OperationsTeamOverview } from '../_lib/types';
22
- import {
23
- formatDateRange,
24
- formatEnumLabel,
25
- formatHours,
26
- getStatusBadgeClass,
27
- } from '../_lib/utils/format';
28
-
29
- export default function OperationsTeamPage() {
30
- const t = useTranslations('operations.TeamPage');
31
- const commonT = useTranslations('operations.Common');
32
- const { request, currentLocaleCode } = useApp();
33
- const access = useOperationsAccess();
34
-
35
- const { data: team, refetch } = useQuery<OperationsTeamOverview>({
36
- queryKey: ['operations-team-page', currentLocaleCode],
37
- enabled: access.isSupervisor,
38
- queryFn: () => fetchOperations<OperationsTeamOverview>(request, '/operations/team'),
39
- });
40
-
41
- if (!access.isSupervisor && !access.isLoading) {
42
- return (
43
- <Page>
44
- <OperationsHeader
45
- title={t('title')}
46
- description={t('description')}
47
- current={t('breadcrumb')}
48
- />
49
- <EmptyState
50
- icon={<Users className="size-12" />}
51
- title={commonT('states.noAccessTitle')}
52
- description={t('noAccessDescription')}
53
- actionLabel={commonT('actions.refresh')}
54
- onAction={() => void refetch()}
55
- />
56
- </Page>
57
- );
58
- }
59
-
60
- const items = [
61
- {
62
- key: 'members',
63
- title: t('cards.members'),
64
- value: team?.teamMembers.length ?? 0,
65
- },
66
- {
67
- key: 'projects',
68
- title: t('cards.projects'),
69
- value: team?.projectCount ?? 0,
70
- },
71
- {
72
- key: 'approvals',
73
- title: t('cards.pendingApprovals'),
74
- value: team?.pendingApprovals ?? 0,
75
- },
76
- {
77
- key: 'timeOff',
78
- title: t('cards.timeOff'),
79
- value: team?.pendingItems?.timeOffRequests ?? 0,
80
- },
81
- {
82
- key: 'schedule',
83
- title: t('cards.scheduleAdjustments'),
84
- value: team?.pendingItems?.scheduleAdjustmentRequests ?? 0,
85
- },
86
- {
87
- key: 'timesheets',
88
- title: t('cards.timesheets'),
89
- value: team?.pendingItems?.timesheets ?? 0,
90
- },
91
- ];
92
-
93
- return (
94
- <Page>
95
- <OperationsHeader
96
- title={t('title')}
97
- description={t('description')}
98
- current={t('breadcrumb')}
99
- />
100
-
101
- <KpiCardsGrid items={items} columns={4} />
102
-
103
- {team?.teamMembers?.length ? (
104
- <div className="space-y-6">
105
- <div className="overflow-x-auto rounded-md border">
106
- <Table>
107
- <TableHeader>
108
- <TableRow>
109
- <TableHead>{commonT('labels.collaborator')}</TableHead>
110
- <TableHead>{commonT('labels.department')}</TableHead>
111
- <TableHead>{commonT('labels.status')}</TableHead>
112
- <TableHead>{commonT('labels.activeAssignments')}</TableHead>
113
- <TableHead>{commonT('labels.pendingApprovals')}</TableHead>
114
- <TableHead>{t('sections.requests')}</TableHead>
115
- </TableRow>
116
- </TableHeader>
117
- <TableBody>
118
- {team.teamMembers.map((member) => (
119
- <TableRow key={member.id}>
120
- <TableCell>
121
- <div className="font-medium">{member.displayName}</div>
122
- <div className="text-xs text-muted-foreground">
123
- {[member.code, formatEnumLabel(member.collaboratorType)]
124
- .filter(Boolean)
125
- .join(' • ')}
126
- </div>
127
- </TableCell>
128
- <TableCell>
129
- {[member.department, member.title]
130
- .filter(Boolean)
131
- .join(' • ') || commonT('labels.notAvailable')}
132
- </TableCell>
133
- <TableCell>
134
- <StatusBadge
135
- label={formatEnumLabel(member.status)}
136
- className={getStatusBadgeClass(member.status)}
137
- />
138
- </TableCell>
139
- <TableCell>{member.activeAssignments ?? 0}</TableCell>
140
- <TableCell>{member.pendingApprovals ?? 0}</TableCell>
141
- <TableCell>
142
- <div className="text-sm">
143
- {t('labels.timeOffRequestsCount', {
144
- count: member.pendingTimeOffRequests ?? 0,
145
- })}
146
- </div>
147
- <div className="text-xs text-muted-foreground">
148
- {t('labels.scheduleRequestsCount', {
149
- count: member.pendingScheduleAdjustmentRequests ?? 0,
150
- })}
151
- </div>
152
- </TableCell>
153
- </TableRow>
154
- ))}
155
- </TableBody>
156
- </Table>
157
- </div>
158
-
159
- <div className="grid gap-6 xl:grid-cols-2">
160
- <Card>
161
- <CardHeader>
162
- <CardTitle>{t('sections.pendingApprovals')}</CardTitle>
163
- </CardHeader>
164
- <CardContent>
165
- {team.pendingApprovalQueue.length ? (
166
- <div className="space-y-3">
167
- {team.pendingApprovalQueue.map((approval) => (
168
- <div key={approval.id} className="rounded-lg border p-3">
169
- <div className="flex items-center justify-between gap-3">
170
- <div>
171
- <div className="font-medium">{approval.requesterName}</div>
172
- <div className="text-xs text-muted-foreground">
173
- {formatEnumLabel(approval.targetType)}
174
- </div>
175
- </div>
176
- <StatusBadge
177
- label={formatEnumLabel(approval.status)}
178
- className={getStatusBadgeClass(approval.status)}
179
- />
180
- </div>
181
- <div className="mt-2 text-sm text-muted-foreground">
182
- {approval.targetType === 'timesheet'
183
- ? [
184
- formatDateRange(
185
- approval.timesheetWeekStartDate,
186
- approval.timesheetWeekEndDate
187
- ),
188
- approval.timesheetProjectNames,
189
- formatHours(approval.timesheetTotalHours),
190
- ]
191
- .filter(Boolean)
192
- .join(' • ')
193
- : approval.targetType === 'time_off_request'
194
- ? [
195
- formatEnumLabel(approval.timeOffType),
196
- formatDateRange(
197
- approval.timeOffStartDate,
198
- approval.timeOffEndDate
199
- ),
200
- ]
201
- .filter(Boolean)
202
- .join(' • ')
203
- : [
204
- formatEnumLabel(approval.scheduleRequestScope),
205
- formatDateRange(
206
- approval.scheduleStartDate,
207
- approval.scheduleEndDate
208
- ),
209
- ]
210
- .filter(Boolean)
211
- .join(' • ')}
212
- </div>
213
- </div>
214
- ))}
215
- </div>
216
- ) : (
217
- <div className="text-sm text-muted-foreground">
218
- {t('states.noPendingApprovals')}
219
- </div>
220
- )}
221
- </CardContent>
222
- </Card>
223
-
224
- <Card>
225
- <CardHeader>
226
- <CardTitle>{t('sections.projects')}</CardTitle>
227
- </CardHeader>
228
- <CardContent>
229
- {team.teamProjects.length ? (
230
- <div className="space-y-3">
231
- {team.teamProjects.map((project) => (
232
- <div key={project.id} className="rounded-lg border p-3">
233
- <div className="flex items-center justify-between gap-3">
234
- <div>
235
- <div className="font-medium">{project.name}</div>
236
- <div className="text-xs text-muted-foreground">
237
- {[project.code, project.clientName]
238
- .filter(Boolean)
239
- .join(' • ')}
240
- </div>
241
- </div>
242
- <StatusBadge
243
- label={formatEnumLabel(project.status)}
244
- className={getStatusBadgeClass(project.status)}
245
- />
246
- </div>
247
- <div className="mt-2 text-sm text-muted-foreground">
248
- {t('labels.projectSummary', {
249
- teamSize: project.teamSize,
250
- pendingTimesheets: project.pendingTimesheets,
251
- })}
252
- </div>
253
- </div>
254
- ))}
255
- </div>
256
- ) : (
257
- <div className="text-sm text-muted-foreground">
258
- {t('states.noProjects')}
259
- </div>
260
- )}
261
- </CardContent>
262
- </Card>
263
- </div>
264
-
265
- <div className="grid gap-6 xl:grid-cols-2">
266
- <Card>
267
- <CardHeader>
268
- <CardTitle>{t('sections.timeOff')}</CardTitle>
269
- </CardHeader>
270
- <CardContent>
271
- {team.pendingTimeOffRequests.length ? (
272
- <div className="space-y-3">
273
- {team.pendingTimeOffRequests.map((requestItem) => (
274
- <div key={requestItem.id} className="rounded-lg border p-3">
275
- <div className="font-medium">{requestItem.collaboratorName}</div>
276
- <div className="text-sm text-muted-foreground">
277
- {[
278
- formatEnumLabel(requestItem.requestType),
279
- formatDateRange(requestItem.startDate, requestItem.endDate),
280
- ]
281
- .filter(Boolean)
282
- .join(' • ')}
283
- </div>
284
- </div>
285
- ))}
286
- </div>
287
- ) : (
288
- <div className="text-sm text-muted-foreground">
289
- {t('states.noTimeOff')}
290
- </div>
291
- )}
292
- </CardContent>
293
- </Card>
294
-
295
- <Card>
296
- <CardHeader>
297
- <CardTitle>{t('sections.scheduleAdjustments')}</CardTitle>
298
- </CardHeader>
299
- <CardContent>
300
- {team.pendingScheduleAdjustmentRequests.length ? (
301
- <div className="space-y-3">
302
- {team.pendingScheduleAdjustmentRequests.map((requestItem) => (
303
- <div key={requestItem.id} className="rounded-lg border p-3">
304
- <div className="font-medium">{requestItem.collaboratorName}</div>
305
- <div className="text-sm text-muted-foreground">
306
- {[
307
- formatEnumLabel(requestItem.requestScope),
308
- formatDateRange(
309
- requestItem.effectiveStartDate,
310
- requestItem.effectiveEndDate
311
- ),
312
- ]
313
- .filter(Boolean)
314
- .join(' • ')}
315
- </div>
316
- </div>
317
- ))}
318
- </div>
319
- ) : (
320
- <div className="text-sm text-muted-foreground">
321
- {t('states.noScheduleAdjustments')}
322
- </div>
323
- )}
324
- </CardContent>
325
- </Card>
326
- </div>
327
- </div>
328
- ) : (
329
- <EmptyState
330
- icon={<Users className="size-12" />}
331
- title={commonT('states.emptyTitle')}
332
- description={t('emptyDescription')}
333
- actionLabel={commonT('actions.refresh')}
334
- onAction={() => void refetch()}
335
- />
336
- )}
337
- </Page>
338
- );
339
- }
1
+ 'use client';
2
+
3
+ import { EmptyState, Page } from '@/components/entity-list';
4
+ import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
5
+ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
6
+ import {
7
+ Table,
8
+ TableBody,
9
+ TableCell,
10
+ TableHead,
11
+ TableHeader,
12
+ TableRow,
13
+ } from '@/components/ui/table';
14
+ import { useApp, useQuery } from '@hed-hog/next-app-provider';
15
+ import { Users } from 'lucide-react';
16
+ import { useTranslations } from 'next-intl';
17
+ import { OperationsHeader } from '../_components/operations-header';
18
+ import { StatusBadge } from '../_components/status-badge';
19
+ import { fetchOperations } from '../_lib/api';
20
+ import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
21
+ import type { OperationsTeamOverview } from '../_lib/types';
22
+ import {
23
+ formatDateRange,
24
+ formatEnumLabel,
25
+ formatHours,
26
+ getStatusBadgeClass,
27
+ } from '../_lib/utils/format';
28
+
29
+ export default function OperationsTeamPage() {
30
+ const t = useTranslations('operations.TeamPage');
31
+ const commonT = useTranslations('operations.Common');
32
+ const { request, currentLocaleCode } = useApp();
33
+ const access = useOperationsAccess();
34
+
35
+ const { data: team, refetch } = useQuery<OperationsTeamOverview>({
36
+ queryKey: ['operations-team-page', currentLocaleCode],
37
+ enabled: access.isSupervisor,
38
+ queryFn: () => fetchOperations<OperationsTeamOverview>(request, '/operations/team'),
39
+ });
40
+
41
+ if (!access.isSupervisor && !access.isLoading) {
42
+ return (
43
+ <Page>
44
+ <OperationsHeader
45
+ title={t('title')}
46
+ description={t('description')}
47
+ current={t('breadcrumb')}
48
+ />
49
+ <EmptyState
50
+ icon={<Users className="size-12" />}
51
+ title={commonT('states.noAccessTitle')}
52
+ description={t('noAccessDescription')}
53
+ actionLabel={commonT('actions.refresh')}
54
+ onAction={() => void refetch()}
55
+ />
56
+ </Page>
57
+ );
58
+ }
59
+
60
+ const items = [
61
+ {
62
+ key: 'members',
63
+ title: t('cards.members'),
64
+ value: team?.teamMembers.length ?? 0,
65
+ },
66
+ {
67
+ key: 'projects',
68
+ title: t('cards.projects'),
69
+ value: team?.projectCount ?? 0,
70
+ },
71
+ {
72
+ key: 'approvals',
73
+ title: t('cards.pendingApprovals'),
74
+ value: team?.pendingApprovals ?? 0,
75
+ },
76
+ {
77
+ key: 'timeOff',
78
+ title: t('cards.timeOff'),
79
+ value: team?.pendingItems?.timeOffRequests ?? 0,
80
+ },
81
+ {
82
+ key: 'schedule',
83
+ title: t('cards.scheduleAdjustments'),
84
+ value: team?.pendingItems?.scheduleAdjustmentRequests ?? 0,
85
+ },
86
+ {
87
+ key: 'timesheets',
88
+ title: t('cards.timesheets'),
89
+ value: team?.pendingItems?.timesheets ?? 0,
90
+ },
91
+ ];
92
+
93
+ return (
94
+ <Page>
95
+ <OperationsHeader
96
+ title={t('title')}
97
+ description={t('description')}
98
+ current={t('breadcrumb')}
99
+ />
100
+
101
+ <KpiCardsGrid items={items} columns={4} />
102
+
103
+ {team?.teamMembers?.length ? (
104
+ <div className="space-y-6">
105
+ <div className="overflow-x-auto rounded-md border">
106
+ <Table>
107
+ <TableHeader>
108
+ <TableRow>
109
+ <TableHead>{commonT('labels.collaborator')}</TableHead>
110
+ <TableHead>{commonT('labels.department')}</TableHead>
111
+ <TableHead>{commonT('labels.status')}</TableHead>
112
+ <TableHead>{commonT('labels.activeAssignments')}</TableHead>
113
+ <TableHead>{commonT('labels.pendingApprovals')}</TableHead>
114
+ <TableHead>{t('sections.requests')}</TableHead>
115
+ </TableRow>
116
+ </TableHeader>
117
+ <TableBody>
118
+ {team.teamMembers.map((member) => (
119
+ <TableRow key={member.id}>
120
+ <TableCell>
121
+ <div className="font-medium">{member.displayName}</div>
122
+ <div className="text-xs text-muted-foreground">
123
+ {[member.code, formatEnumLabel(member.collaboratorType)]
124
+ .filter(Boolean)
125
+ .join(' • ')}
126
+ </div>
127
+ </TableCell>
128
+ <TableCell>
129
+ {[member.department, member.title]
130
+ .filter(Boolean)
131
+ .join(' • ') || commonT('labels.notAvailable')}
132
+ </TableCell>
133
+ <TableCell>
134
+ <StatusBadge
135
+ label={formatEnumLabel(member.status)}
136
+ className={getStatusBadgeClass(member.status)}
137
+ />
138
+ </TableCell>
139
+ <TableCell>{member.activeAssignments ?? 0}</TableCell>
140
+ <TableCell>{member.pendingApprovals ?? 0}</TableCell>
141
+ <TableCell>
142
+ <div className="text-sm">
143
+ {t('labels.timeOffRequestsCount', {
144
+ count: member.pendingTimeOffRequests ?? 0,
145
+ })}
146
+ </div>
147
+ <div className="text-xs text-muted-foreground">
148
+ {t('labels.scheduleRequestsCount', {
149
+ count: member.pendingScheduleAdjustmentRequests ?? 0,
150
+ })}
151
+ </div>
152
+ </TableCell>
153
+ </TableRow>
154
+ ))}
155
+ </TableBody>
156
+ </Table>
157
+ </div>
158
+
159
+ <div className="grid gap-6 xl:grid-cols-2">
160
+ <Card>
161
+ <CardHeader>
162
+ <CardTitle>{t('sections.pendingApprovals')}</CardTitle>
163
+ </CardHeader>
164
+ <CardContent>
165
+ {team.pendingApprovalQueue.length ? (
166
+ <div className="space-y-3">
167
+ {team.pendingApprovalQueue.map((approval) => (
168
+ <div key={approval.id} className="rounded-lg border p-3">
169
+ <div className="flex items-center justify-between gap-3">
170
+ <div>
171
+ <div className="font-medium">{approval.requesterName}</div>
172
+ <div className="text-xs text-muted-foreground">
173
+ {formatEnumLabel(approval.targetType)}
174
+ </div>
175
+ </div>
176
+ <StatusBadge
177
+ label={formatEnumLabel(approval.status)}
178
+ className={getStatusBadgeClass(approval.status)}
179
+ />
180
+ </div>
181
+ <div className="mt-2 text-sm text-muted-foreground">
182
+ {approval.targetType === 'timesheet'
183
+ ? [
184
+ formatDateRange(
185
+ approval.timesheetWeekStartDate,
186
+ approval.timesheetWeekEndDate
187
+ ),
188
+ approval.timesheetProjectNames,
189
+ formatHours(approval.timesheetTotalHours),
190
+ ]
191
+ .filter(Boolean)
192
+ .join(' • ')
193
+ : approval.targetType === 'time_off_request'
194
+ ? [
195
+ formatEnumLabel(approval.timeOffType),
196
+ formatDateRange(
197
+ approval.timeOffStartDate,
198
+ approval.timeOffEndDate
199
+ ),
200
+ ]
201
+ .filter(Boolean)
202
+ .join(' • ')
203
+ : [
204
+ formatEnumLabel(approval.scheduleRequestScope),
205
+ formatDateRange(
206
+ approval.scheduleStartDate,
207
+ approval.scheduleEndDate
208
+ ),
209
+ ]
210
+ .filter(Boolean)
211
+ .join(' • ')}
212
+ </div>
213
+ </div>
214
+ ))}
215
+ </div>
216
+ ) : (
217
+ <div className="text-sm text-muted-foreground">
218
+ {t('states.noPendingApprovals')}
219
+ </div>
220
+ )}
221
+ </CardContent>
222
+ </Card>
223
+
224
+ <Card>
225
+ <CardHeader>
226
+ <CardTitle>{t('sections.projects')}</CardTitle>
227
+ </CardHeader>
228
+ <CardContent>
229
+ {team.teamProjects.length ? (
230
+ <div className="space-y-3">
231
+ {team.teamProjects.map((project) => (
232
+ <div key={project.id} className="rounded-lg border p-3">
233
+ <div className="flex items-center justify-between gap-3">
234
+ <div>
235
+ <div className="font-medium">{project.name}</div>
236
+ <div className="text-xs text-muted-foreground">
237
+ {[project.code, project.clientName]
238
+ .filter(Boolean)
239
+ .join(' • ')}
240
+ </div>
241
+ </div>
242
+ <StatusBadge
243
+ label={formatEnumLabel(project.status)}
244
+ className={getStatusBadgeClass(project.status)}
245
+ />
246
+ </div>
247
+ <div className="mt-2 text-sm text-muted-foreground">
248
+ {t('labels.projectSummary', {
249
+ teamSize: project.teamSize,
250
+ pendingTimesheets: project.pendingTimesheets,
251
+ })}
252
+ </div>
253
+ </div>
254
+ ))}
255
+ </div>
256
+ ) : (
257
+ <div className="text-sm text-muted-foreground">
258
+ {t('states.noProjects')}
259
+ </div>
260
+ )}
261
+ </CardContent>
262
+ </Card>
263
+ </div>
264
+
265
+ <div className="grid gap-6 xl:grid-cols-2">
266
+ <Card>
267
+ <CardHeader>
268
+ <CardTitle>{t('sections.timeOff')}</CardTitle>
269
+ </CardHeader>
270
+ <CardContent>
271
+ {team.pendingTimeOffRequests.length ? (
272
+ <div className="space-y-3">
273
+ {team.pendingTimeOffRequests.map((requestItem) => (
274
+ <div key={requestItem.id} className="rounded-lg border p-3">
275
+ <div className="font-medium">{requestItem.collaboratorName}</div>
276
+ <div className="text-sm text-muted-foreground">
277
+ {[
278
+ formatEnumLabel(requestItem.requestType),
279
+ formatDateRange(requestItem.startDate, requestItem.endDate),
280
+ ]
281
+ .filter(Boolean)
282
+ .join(' • ')}
283
+ </div>
284
+ </div>
285
+ ))}
286
+ </div>
287
+ ) : (
288
+ <div className="text-sm text-muted-foreground">
289
+ {t('states.noTimeOff')}
290
+ </div>
291
+ )}
292
+ </CardContent>
293
+ </Card>
294
+
295
+ <Card>
296
+ <CardHeader>
297
+ <CardTitle>{t('sections.scheduleAdjustments')}</CardTitle>
298
+ </CardHeader>
299
+ <CardContent>
300
+ {team.pendingScheduleAdjustmentRequests.length ? (
301
+ <div className="space-y-3">
302
+ {team.pendingScheduleAdjustmentRequests.map((requestItem) => (
303
+ <div key={requestItem.id} className="rounded-lg border p-3">
304
+ <div className="font-medium">{requestItem.collaboratorName}</div>
305
+ <div className="text-sm text-muted-foreground">
306
+ {[
307
+ formatEnumLabel(requestItem.requestScope),
308
+ formatDateRange(
309
+ requestItem.effectiveStartDate,
310
+ requestItem.effectiveEndDate
311
+ ),
312
+ ]
313
+ .filter(Boolean)
314
+ .join(' • ')}
315
+ </div>
316
+ </div>
317
+ ))}
318
+ </div>
319
+ ) : (
320
+ <div className="text-sm text-muted-foreground">
321
+ {t('states.noScheduleAdjustments')}
322
+ </div>
323
+ )}
324
+ </CardContent>
325
+ </Card>
326
+ </div>
327
+ </div>
328
+ ) : (
329
+ <EmptyState
330
+ icon={<Users className="size-12" />}
331
+ title={commonT('states.emptyTitle')}
332
+ description={t('emptyDescription')}
333
+ actionLabel={commonT('actions.refresh')}
334
+ onAction={() => void refetch()}
335
+ />
336
+ )}
337
+ </Page>
338
+ );
339
+ }