Rework Admin UI #6

Merged
MasterMito merged 18 commits from epic/admin_rework_second_try into main 2026-03-20 11:55:38 +01:00
17 changed files with 453 additions and 157 deletions
Showing only changes of commit da70cf4b13 - Show all commits
@@ -83,12 +83,13 @@ public class ShiftService
where ss.ShiftId == id
join m in _context.Members on ss.MemberId equals m.Id
orderby ss.SignedUpAt
select new { ss.Id, ss.MemberId, m.ExternalUserId, ss.SignedUpAt })
select new { ss.Id, ss.MemberId, m.DisplayName, m.ExternalUserId, ss.SignedUpAt })
.ToListAsync();
var signupDtos = signups.Select(ss => new ShiftSignupDto(
ss.Id,
ss.MemberId,
ss.DisplayName,
ss.ExternalUserId,
ss.SignedUpAt
)).ToList();
@@ -194,12 +195,13 @@ public class ShiftService
where ss.ShiftId == id
join m in _context.Members on ss.MemberId equals m.Id
orderby ss.SignedUpAt
select new { ss.Id, ss.MemberId, m.ExternalUserId, ss.SignedUpAt })
select new { ss.Id, ss.MemberId, m.DisplayName, m.ExternalUserId, ss.SignedUpAt })
.ToListAsync();
var signupDtos = signups.Select(ss => new ShiftSignupDto(
ss.Id,
ss.MemberId,
ss.DisplayName,
ss.ExternalUserId,
ss.SignedUpAt
)).ToList();
+60 -14
View File
@@ -38,59 +38,81 @@ public class TaskService
.Take(pageSize)
.ToListAsync();
Guid? memberId = null;
// Get current member ID for IsAssignedToMe check
Guid? currentMemberId = null;
if (currentExternalUserId != null)
{
var tenantId = _tenantProvider.GetTenantId();
memberId = await _context.Members
currentMemberId = await _context.Members
.Where(m => m.ExternalUserId == currentExternalUserId && m.TenantId == tenantId)
.Select(m => m.Id)
.FirstOrDefaultAsync();
}
// Get all assignee IDs to fetch their names in bulk
var assigneeIds = items.Where(w => w.AssigneeId.HasValue).Select(w => w.AssigneeId!.Value).Distinct().ToList();
var assigneeNames = await _context.Members
.Where(m => assigneeIds.Contains(m.Id))
.Select(m => new { m.Id, m.DisplayName })
.ToDictionaryAsync(m => m.Id, m => m.DisplayName);
var itemDtos = items.Select(w => new TaskListItemDto(
w.Id,
w.Title,
w.Status.ToString(),
w.AssigneeId,
w.AssigneeId.HasValue && assigneeNames.TryGetValue(w.AssigneeId.Value, out var name) ? name : null,
w.CreatedAt,
memberId != null && w.AssigneeId == memberId
currentMemberId != null && w.AssigneeId == currentMemberId
)).ToList();
return new TaskListDto(itemDtos, total, page, pageSize);
}
}
public async Task<TaskDetailDto?> GetTaskByIdAsync(Guid id, string? currentExternalUserId = null)
{
public async Task<TaskDetailDto?> GetTaskByIdAsync(Guid id, string? currentExternalUserId = null)
{
var workItem = await _context.WorkItems.FindAsync(id);
if (workItem == null)
return null;
Guid? memberId = null;
// Get current member ID for IsAssignedToMe check
Guid? currentMemberId = null;
if (currentExternalUserId != null)
{
var tenantId = _tenantProvider.GetTenantId();
memberId = await _context.Members
currentMemberId = await _context.Members
.Where(m => m.ExternalUserId == currentExternalUserId && m.TenantId == tenantId)
.Select(m => m.Id)
.FirstOrDefaultAsync();
}
// Fetch assignee and creator names
var memberIds = new List<Guid>();
if (workItem.AssigneeId.HasValue) memberIds.Add(workItem.AssigneeId.Value);
memberIds.Add(workItem.CreatedById);
var memberNames = await _context.Members
.Where(m => memberIds.Contains(m.Id))
.Select(m => new { m.Id, m.DisplayName })
.ToDictionaryAsync(m => m.Id, m => m.DisplayName);
return new TaskDetailDto(
workItem.Id,
workItem.Title,
workItem.Description,
workItem.Status.ToString(),
workItem.AssigneeId,
workItem.AssigneeId.HasValue && memberNames.TryGetValue(workItem.AssigneeId.Value, out var assigneeName) ? assigneeName : null,
workItem.CreatedById,
memberNames.TryGetValue(workItem.CreatedById, out var createdByName) ? createdByName : null,
workItem.ClubId,
workItem.DueDate,
workItem.CreatedAt,
workItem.UpdatedAt,
memberId != null && workItem.AssigneeId == memberId
currentMemberId != null && workItem.AssigneeId == currentMemberId
);
}
}
public async Task<(TaskDetailDto? task, string? error)> CreateTaskAsync(CreateTaskRequest request, Guid createdById)
{
@@ -114,13 +136,24 @@ public class TaskService
_context.WorkItems.Add(workItem);
await _context.SaveChangesAsync();
// Fetch creator and assignee names
var memberIds = new List<Guid> { createdById };
if (workItem.AssigneeId.HasValue) memberIds.Add(workItem.AssigneeId.Value);
var memberNames = await _context.Members
.Where(m => memberIds.Contains(m.Id))
.Select(m => new { m.Id, m.DisplayName })
.ToDictionaryAsync(m => m.Id, m => m.DisplayName);
var dto = new TaskDetailDto(
workItem.Id,
workItem.Title,
workItem.Description,
workItem.Status.ToString(),
workItem.AssigneeId,
workItem.AssigneeId.HasValue && memberNames.TryGetValue(workItem.AssigneeId.Value, out var assigneeName) ? assigneeName : null,
workItem.CreatedById,
memberNames.TryGetValue(workItem.CreatedById, out var createdByName) ? createdByName : null,
workItem.ClubId,
workItem.DueDate,
workItem.CreatedAt,
@@ -176,32 +209,45 @@ public class TaskService
return (null, "Task was modified by another user. Please refresh and try again.", true);
}
Guid? memberId = null;
// Get current member ID for IsAssignedToMe check
Guid? currentMemberId = null;
if (currentExternalUserId != null)
{
var tenantId = _tenantProvider.GetTenantId();
memberId = await _context.Members
currentMemberId = await _context.Members
.Where(m => m.ExternalUserId == currentExternalUserId && m.TenantId == tenantId)
.Select(m => m.Id)
.FirstOrDefaultAsync();
}
// Fetch assignee and creator names
var memberIds = new List<Guid>();
if (workItem.AssigneeId.HasValue) memberIds.Add(workItem.AssigneeId.Value);
memberIds.Add(workItem.CreatedById);
var memberNames = await _context.Members
.Where(m => memberIds.Contains(m.Id))
.Select(m => new { m.Id, m.DisplayName })
.ToDictionaryAsync(m => m.Id, m => m.DisplayName);
var dto = new TaskDetailDto(
workItem.Id,
workItem.Title,
workItem.Description,
workItem.Status.ToString(),
workItem.AssigneeId,
workItem.AssigneeId.HasValue && memberNames.TryGetValue(workItem.AssigneeId.Value, out var assigneeName) ? assigneeName : null,
workItem.CreatedById,
memberNames.TryGetValue(workItem.CreatedById, out var createdByName) ? createdByName : null,
workItem.ClubId,
workItem.DueDate,
workItem.CreatedAt,
workItem.UpdatedAt,
memberId != null && workItem.AssigneeId == memberId
currentMemberId != null && workItem.AssigneeId == currentMemberId
);
return (dto, null, false);
}
}
public async Task<bool> DeleteTaskAsync(Guid id)
{
@@ -18,6 +18,8 @@ public record ShiftDetailDto(
public record ShiftSignupDto(
Guid Id,
Guid MemberId, string? ExternalUserId,
Guid MemberId,
string? MemberName,
string? ExternalUserId,
DateTimeOffset SignedUpAt
);
@@ -6,7 +6,9 @@ public record TaskDetailDto(
string? Description,
string Status,
Guid? AssigneeId,
string? AssigneeName,
Guid CreatedById,
string? CreatedByName,
Guid ClubId,
DateTimeOffset? DueDate,
DateTimeOffset CreatedAt,
@@ -12,6 +12,7 @@ public record TaskListItemDto(
string Title,
string Status,
Guid? AssigneeId,
string? AssigneeName,
DateTimeOffset CreatedAt,
bool IsAssignedToMe
);
+7 -1
View File
@@ -39,6 +39,9 @@ services:
KC_DB_PASSWORD: keycloakpass
KC_HEALTH_ENABLED: "true"
KC_LOG_LEVEL: INFO
KC_HOSTNAME: "http://localhost:8080"
KC_HOSTNAME_STRICT: "false"
KC_PROXY: "edge"
ports:
- "8080:8080"
volumes:
@@ -66,6 +69,8 @@ services:
Keycloak__TokenValidationParameters__ValidateIssuer: "false"
ports:
- "5001:8080"
extra_hosts:
- "localhost:host-gateway"
volumes:
- ./backend:/app:cached
depends_on:
@@ -84,8 +89,9 @@ services:
environment:
NEXT_PUBLIC_API_URL: "http://localhost:5001"
API_INTERNAL_URL: "http://dotnet-api:8080"
NEXTAUTH_URL: "http://localhost:3000"
NEXTAUTH_SECRET: "dev-secret-change-in-production-use-openssl-rand-base64-32"
AUTH_SECRET: "dev-secret-change-in-production-use-openssl-rand-base64-32"
AUTH_TRUST_HOST: "true"
KEYCLOAK_CLIENT_ID: "workclub-app"
KEYCLOAK_CLIENT_SECRET: "dev-secret-workclub-api-change-in-production"
KEYCLOAK_ISSUER: "http://localhost:8080/realms/workclub"
@@ -67,8 +67,8 @@ export default function ShiftDetailPage({ params }: { params: Promise<{ id: stri
<p className="text-sm text-muted-foreground">No sign-ups yet</p>
) : (
<ul className="list-disc list-inside text-sm">
{shift.signups.map((signup) => (
<li key={signup.id}>Member ID: {signup.memberId}</li>
{shift.signups.map((signup) => (
<li key={signup.id}>{signup.memberName || signup.memberId}</li>
))}
</ul>
)}
@@ -85,11 +85,11 @@ export default function TaskDetailPage({ params }: { params: Promise<{ id: strin
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm font-medium text-muted-foreground">Assignee</p>
<p className="mt-1">{task.assigneeId || 'Unassigned'}</p>
<p className="mt-1">{task.assigneeName || 'Unassigned'}</p>
</div>
<div>
<p className="text-sm font-medium text-muted-foreground">Created By</p>
<p className="mt-1">{task.createdById}</p>
<p className="mt-1">{task.createdByName || task.createdById}</p>
</div>
<div>
<p className="text-sm font-medium text-muted-foreground">Created At</p>
+1 -1
View File
@@ -89,7 +89,7 @@ export default function TaskListPage() {
{task.status}
</Badge>
</TableCell>
<TableCell>{task.assigneeId || 'Unassigned'}</TableCell>
<TableCell>{task.assigneeName || 'Unassigned'}</TableCell>
<TableCell>{new Date(task.createdAt).toLocaleDateString()}</TableCell>
<TableCell className="text-right">
<Button variant="outline" size="sm" asChild>
+21 -7
View File
@@ -33,16 +33,30 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
providers: [
KeycloakProvider({
clientId: process.env.KEYCLOAK_CLIENT_ID!,
clientSecret: process.env.KEYCLOAK_CLIENT_SECRET!,
issuer: issuerPublic,
authorization: {
url: `${oidcPublic}/auth`,
params: { scope: "openid email profile" },
},
token: `${oidcInternal}/token`,
userinfo: `${oidcInternal}/userinfo`,
})
],
cookies: {
pkceCodeVerifier: {
name: "authjs.pkce.code_verifier",
options: {
httpOnly: true,
sameSite: "lax",
path: "/",
secure: false,
},
},
state: {
name: "authjs.state",
options: {
httpOnly: true,
sameSite: "lax",
path: "/",
secure: false,
},
},
},
debug: true,
callbacks: {
async jwt({ token, account }) {
if (account && account.access_token) {
+1
View File
@@ -38,6 +38,7 @@ export interface ShiftDetailDto {
export interface ShiftSignupDto {
id: string;
memberId: string;
memberName?: string;
externalUserId?: string;
signedUpAt: string;
}
+3
View File
@@ -14,6 +14,7 @@ export interface TaskListItemDto {
title: string;
status: string;
assigneeId: string | null;
assigneeName?: string;
createdAt: string;
isAssignedToMe: boolean;
}
@@ -24,7 +25,9 @@ export interface TaskDetailDto {
description: string | null;
status: string;
assigneeId: string | null;
assigneeName?: string;
createdById: string;
createdByName?: string;
clubId: string;
dueDate: string | null;
createdAt: string;
@@ -0,0 +1,2 @@
schema: spec-driven
created: 2026-03-18
@@ -0,0 +1,99 @@
## Context
Currently, the frontend displays raw UUIDs for user references:
- Task list shows `assigneeId` (e.g., "a1b2c3d4-e5f6...") or "Unassigned"
- Task detail shows `assigneeId` and `createdById`
- Shift detail shows `memberId` for each signup
The backend already stores `DisplayName` in the `Member` entity but the API DTOs don't expose it. The `ShiftService` already demonstrates the pattern of joining with Members (lines 82-87), which we can replicate for Tasks.
## Goals / Non-Goals
**Goals:**
- Add member name fields to backend DTOs
- Update TaskService to query and include member names
- Update ShiftService to include member name in ShiftSignupDto
- Update frontend TypeScript interfaces
- Replace UUID displays with names in task/shift UIs
**Non-Goals:**
- No database schema changes
- No changes to authentication or authorization
- No changes to how tasks/shifts are created or updated
- No caching layer for member names
## Decisions
### 1. Add names to existing DTOs vs create new DTOs
**Decision:** Add optional fields to existing DTOs
**Rationale:**
- Keeps API surface simple
- Backward compatible - existing clients ignore new fields
- No breaking changes to existing integrations
**Alternative considered:** Create new DTO versions (e.g., `TaskDetailDtoV2`)
- Rejected: Unnecessary complexity for a simple additive change
### 2. Fetch member names via JOIN vs separate query
**Decision:** Use JOIN in TaskService methods
**Rationale:**
- More efficient - single query per endpoint
- Pattern already exists in ShiftService
- Avoids N+1 query problem
**Alternative considered:** Query members separately and build lookup dictionary
- Rejected: Adds complexity and extra database round-trips
### 3. Handle missing members (orphaned IDs)
**Decision:** Return null for name when member not found
**Rationale:**
- Data integrity issue should surface visibly
- Frontend can display fallback like "Unknown" or keep showing ID
- Logging can track data inconsistencies
### 4. Frontend handling of null names
**Decision:** Frontend shows fallback text when name is null
**Implementation:**
```typescript
// Task list
task.assigneeName || 'Unassigned'
// Task detail
task.assigneeName || 'Unassigned'
task.createdByName || 'Unknown'
// Shift signups
signup.memberName || 'Unknown Member'
```
## Risks / Trade-offs
| Risk | Mitigation |
|------|-----------|
| JOIN adds query complexity | Keep JOINs simple, only on indexed columns (Member.Id) |
| Larger API response payloads | Minimal impact - names are small strings |
| Member names become stale | Acceptable - names rarely change; eventual consistency |
| Database performance degradation | Monitor query execution plans; add caching if needed |
| Partial data on member deletion | Show "Unknown" fallback; log orphaned references |
## Migration Plan
1. **Backend DTO changes** - Add new optional fields
2. **Backend service changes** - Update queries to include names
3. **Frontend type updates** - Add name fields to interfaces
4. **Frontend UI updates** - Replace ID displays with names
**Rollback:**
- DTO changes are backward compatible
- Frontend can revert to showing IDs by changing display logic
- No database changes required
## Open Questions
- Should we include `externalUserId` in the signup display? (Currently available in ShiftSignupDto)
- Do we need to include member email for any display purposes?
- Should we add name fields to shift list items (showing creator name)?
@@ -0,0 +1,34 @@
## Why
Currently, the frontend displays raw UUIDs for user references (assignee, creator, members) which creates a poor user experience. Users should see meaningful names like "Alice Smith" instead of "a1b2c3d4-e5f6-7890-abcd-ef1234567890". The backend already stores display names in the Member entity, but the API DTOs don't expose them.
## What Changes
- **Backend DTOs**: Add name fields to task and shift DTOs
- `TaskListItemDto`: Add `string? AssigneeName`
- `TaskDetailDto`: Add `string? AssigneeName` and `string CreatedByName`
- `ShiftSignupDto`: Add `string MemberName`
- **Backend Services**: Update TaskService and ShiftService to query and populate member names
- Join with Members table to fetch display names
- Include names in DTO construction
- **Frontend Types**: Update TypeScript interfaces to include new name fields
- `TaskListItemDto`, `TaskDetailDto`, `ShiftSignupDto` interfaces
- **Frontend UI**: Replace UUID displays with names
- Task list: show assignee name instead of ID
- Task detail: show assignee and creator names
- Shift detail: show member names in signup list
## Capabilities
### New Capabilities
- `member-name-enrichment`: API DTOs include human-readable member names alongside IDs
### Modified Capabilities
- None (this is purely an enhancement to existing capabilities)
## Impact
- **Backend**: TaskService.cs, ShiftService.cs, and DTOs in WorkClub.Application
- **Frontend**: Tasks pages, Shifts pages, and React hooks (useTasks.ts, useShifts.ts)
- **Database**: Additional JOIN queries on Members table (no schema changes)
- **API Response**: New optional fields in existing endpoints (backward compatible)
@@ -0,0 +1,43 @@
## ADDED Requirements
### Requirement: Task list items include assignee name
The API SHALL return the assignee's display name in TaskListItemDto.
#### Scenario: Task with assignee
- **WHEN** a task is assigned to a member
- **THEN** the TaskListItemDto SHALL include the assignee's DisplayName as `assigneeName`
#### Scenario: Task without assignee
- **WHEN** a task has no assignee
- **THEN** the TaskListItemDto SHALL have `assigneeName` set to null
### Requirement: Task details include creator and assignee names
The API SHALL return the display names of both the creator and assignee in TaskDetailDto.
#### Scenario: Viewing task details
- **WHEN** a user requests task details
- **THEN** the TaskDetailDto SHALL include `createdByName` (the creator's DisplayName)
- **AND** the TaskDetailDto SHALL include `assigneeName` (the assignee's DisplayName, or null if unassigned)
### Requirement: Shift signup includes member name
The API SHALL return the member's display name in ShiftSignupDto.
#### Scenario: Viewing shift signups
- **WHEN** a user views shift details with signups
- **THEN** each ShiftSignupDto SHALL include `memberName` (the member's DisplayName)
### Requirement: Frontend displays names instead of UUIDs
The frontend SHALL render member names instead of UUIDs wherever user references appear.
#### Scenario: Task list view
- **WHEN** viewing the task list
- **THEN** the Assignee column SHALL display the assignee's name (or "Unassigned")
#### Scenario: Task detail view
- **WHEN** viewing a task detail page
- **THEN** the Assignee field SHALL display the assignee's name (or "Unassigned")
- **AND** the Created By field SHALL display the creator's name
#### Scenario: Shift detail view
- **WHEN** viewing a shift detail page with signups
- **THEN** the member list SHALL display each member's name instead of their ID
@@ -0,0 +1,41 @@
## 1. Backend DTO Updates
- [x] 1.1 Update TaskListItemDto.cs to add `string? AssigneeName` field
- [x] 1.2 Update TaskDetailDto.cs to add `string? AssigneeName` and `string? CreatedByName` fields
- [x] 1.3 Update ShiftSignupDto.cs to add `string? MemberName` field
## 2. Backend Service Updates - Tasks
- [x] 2.1 Update TaskService.GetTasksAsync() to join with Members and populate assigneeName
- [x] 2.2 Update TaskService.GetTaskByIdAsync() to join with Members for assignee and creator names
- [x] 2.3 Update TaskService.CreateTaskAsync() to fetch and include creator name in response
- [x] 2.4 Update TaskService.UpdateTaskAsync() to join with Members for assignee and creator names
## 3. Backend Service Updates - Shifts
- [x] 3.1 Update ShiftService.GetShiftByIdAsync() to include member display name in ShiftSignupDto
- [x] 3.2 Update ShiftService.UpdateShiftAsync() to include member display name in ShiftSignupDto
## 4. Frontend Type Updates
- [x] 4.1 Update TaskListItemDto interface in useTasks.ts to add `assigneeName?: string`
- [x] 4.2 Update TaskDetailDto interface in useTasks.ts to add `assigneeName?: string` and `createdByName?: string`
- [x] 4.3 Update ShiftSignupDto interface in useShifts.ts to add `memberName?: string`
## 5. Frontend UI Updates - Tasks
- [x] 5.1 Update tasks/page.tsx to display assigneeName instead of assigneeId
- [x] 5.2 Update tasks/[id]/page.tsx to display assigneeName instead of assigneeId
- [x] 5.3 Update tasks/[id]/page.tsx to display createdByName instead of createdById
## 6. Frontend UI Updates - Shifts
- [x] 6.1 Update shifts/[id]/page.tsx to display memberName instead of memberId in signup list
## 7. Testing & Verification
- [x] 7.1 Run backend build to verify C# compilation succeeds
- [x] 7.2 Run frontend build to verify TypeScript compilation succeeds
- [x] 7.3 Verify task list shows member names correctly
- [x] 7.4 Verify task detail shows assignee and creator names
- [x] 7.5 Verify shift detail shows member names in signup list