From eab8c2b1959f0cb623cad02f3a40bcd4862bf5fd Mon Sep 17 00:00:00 2001
From: FadyGergesRezk <84906847+FadyGergesRezk@users.noreply.github.com>
Date: Fri, 3 Jul 2026 06:05:42 +0200
Subject: [PATCH 01/11] chore: add shadcn dialog primitives and server error
 helper

---
 web-client/src/components/ui/alert-dialog.tsx | 147 +++++++++++++++
 web-client/src/components/ui/dialog.tsx       | 167 ++++++++++++++++++
 web-client/src/components/ui/input.tsx        |   2 +-
 web-client/src/components/ui/label.tsx        |  22 +++
 web-client/src/components/ui/textarea.tsx     |  18 ++
 web-client/src/lib/server-error.ts            |  13 ++
 6 files changed, 368 insertions(+), 1 deletion(-)
 create mode 100644 web-client/src/components/ui/alert-dialog.tsx
 create mode 100644 web-client/src/components/ui/dialog.tsx
 create mode 100644 web-client/src/components/ui/label.tsx
 create mode 100644 web-client/src/components/ui/textarea.tsx
 create mode 100644 web-client/src/lib/server-error.ts

diff --git a/web-client/src/components/ui/alert-dialog.tsx b/web-client/src/components/ui/alert-dialog.tsx
new file mode 100644
index 00000000..8e06792b
--- /dev/null
+++ b/web-client/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,147 @@
+"use client"
+
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
+
+import { buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/20 duration-100 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-none bg-popover p-6 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg leading-none font-semibold tracking-wider uppercase", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("mt-0.5 text-sm leading-relaxed text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants({ variant: "destructive" }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
diff --git a/web-client/src/components/ui/dialog.tsx b/web-client/src/components/ui/dialog.tsx
new file mode 100644
index 00000000..cc97dc0a
--- /dev/null
+++ b/web-client/src/components/ui/dialog.tsx
@@ -0,0 +1,167 @@
+"use client"
+
+import * as React from "react"
+import { XIcon } from "lucide-react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/20 duration-100 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 items-start gap-6 rounded-none bg-popover p-6 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close data-slot="dialog-close" asChild>
+            <Button
+              variant="ghost"
+              className="absolute top-5 right-5 bg-secondary"
+              size="icon-sm"
+            >
+              <XIcon />
+              <span className="sr-only">Close</span>
+            </Button>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "text-lg leading-none font-semibold tracking-wider uppercase",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "mt-0.5 text-sm leading-relaxed text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/web-client/src/components/ui/input.tsx b/web-client/src/components/ui/input.tsx
index 14021ac4..b959abfe 100644
--- a/web-client/src/components/ui/input.tsx
+++ b/web-client/src/components/ui/input.tsx
@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "h-10 w-full min-w-0 border border-transparent border-b-input bg-transparent px-0 py-1 text-base transition-[color,border-color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-text-tertiary focus-visible:border-b-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive md:text-sm dark:aria-invalid:border-b-destructive/50",
+        "h-10 w-full min-w-0 border border-input bg-transparent px-3 py-1 text-base transition-[color,border-color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-text-tertiary focus-visible:border-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive md:text-sm dark:aria-invalid:border-destructive/50",
         className
       )}
       {...props}
diff --git a/web-client/src/components/ui/label.tsx b/web-client/src/components/ui/label.tsx
new file mode 100644
index 00000000..a4822b14
--- /dev/null
+++ b/web-client/src/components/ui/label.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-xs font-semibold tracking-wide uppercase select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-[slot=checkbox]:text-sm peer-data-[slot=checkbox]:font-normal peer-data-[slot=checkbox]:tracking-normal peer-data-[slot=checkbox]:normal-case peer-data-[slot=radio-group-item]:text-sm peer-data-[slot=radio-group-item]:font-normal peer-data-[slot=radio-group-item]:tracking-normal peer-data-[slot=radio-group-item]:normal-case peer-data-[slot=switch]:text-sm peer-data-[slot=switch]:font-normal peer-data-[slot=switch]:tracking-normal peer-data-[slot=switch]:normal-case",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/web-client/src/components/ui/textarea.tsx b/web-client/src/components/ui/textarea.tsx
new file mode 100644
index 00000000..05bd0936
--- /dev/null
+++ b/web-client/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full resize-none rounded-none border border-input bg-transparent px-3 py-3 text-base transition-[color,border-color] outline-none placeholder:text-muted-foreground focus-visible:border-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive md:text-sm dark:aria-invalid:border-destructive/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/web-client/src/lib/server-error.ts b/web-client/src/lib/server-error.ts
new file mode 100644
index 00000000..21714b9b
--- /dev/null
+++ b/web-client/src/lib/server-error.ts
@@ -0,0 +1,13 @@
+import { isAxiosError } from 'axios'
+
+type ServerErrorBody = {
+  message?: string
+}
+
+export function serverErrorMessage(error: unknown, fallback = 'Something went wrong.'): string {
+  if (isAxiosError<ServerErrorBody>(error)) {
+    return error.response?.data?.message ?? error.message
+  }
+
+  return error instanceof Error ? error.message : fallback
+}

From 7228c58dfbcdb973b59c550aa4c95738b6795cc4 Mon Sep 17 00:00:00 2001
From: FadyGergesRezk <84906847+FadyGergesRezk@users.noreply.github.com>
Date: Fri, 3 Jul 2026 06:06:13 +0200
Subject: [PATCH 02/11] feat: show coach's team on the dashboard

---
 .../src/__tests__/DashboardPage.test.tsx      | 96 +++++++++++++++++++
 web-client/src/app/pages/DashboardPage.tsx    | 20 +++-
 .../app/pages/model/useDashboardViewModel.ts  | 10 ++
 3 files changed, 125 insertions(+), 1 deletion(-)
 create mode 100644 web-client/src/__tests__/DashboardPage.test.tsx

diff --git a/web-client/src/__tests__/DashboardPage.test.tsx b/web-client/src/__tests__/DashboardPage.test.tsx
new file mode 100644
index 00000000..228c9f20
--- /dev/null
+++ b/web-client/src/__tests__/DashboardPage.test.tsx
@@ -0,0 +1,96 @@
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { MemoryRouter } from 'react-router-dom'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('@/features/auth', async () => {
+  const { MOCK_PERSONAS } = await import('@/mocks/personas')
+
+  return {
+    useAuth: () => ({ user: MOCK_PERSONAS.coach }),
+  }
+})
+
+vi.mock('@/app/pages/api/dashboardQueries', async () => {
+  const { dashboardFixtures } = await import('@/mocks/fixtures/dashboard')
+
+  return {
+    useDashboard: () => ({
+      data: dashboardFixtures.coach,
+      isLoading: false,
+      error: null,
+    }),
+  }
+})
+
+vi.mock('@/features/sport-events/api/queries', async () => {
+  const { eventSummaryFixtures } = await import('@/mocks/fixtures')
+  const { MOCK_PERSONAS } = await import('@/mocks/personas')
+  const { scopeEvents } = await import('@/mocks/scope')
+
+  return {
+    useEventsList: () => ({
+      data: scopeEvents(eventSummaryFixtures, MOCK_PERSONAS.coach),
+      isLoading: false,
+      error: null,
+    }),
+  }
+})
+
+vi.mock('@/features/organization/api/queries', () => ({
+  useSportsList: () => ({
+    data: [],
+    isLoading: false,
+    error: null,
+  }),
+  useTeamsList: () => ({
+    data: [],
+    isLoading: false,
+    error: null,
+  }),
+}))
+
+const { DashboardPage } = await import('@/app/pages/DashboardPage')
+const { dashboardFixtures } = await import('@/mocks/fixtures/dashboard')
+
+describe('DashboardPage', () => {
+  let container: HTMLDivElement
+  let root: Root
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    document.body.innerHTML = '<div id="root"></div>'
+    container = document.getElementById('root') as HTMLDivElement
+    root = createRoot(container)
+  })
+
+  afterEach(async () => {
+    await act(async () => {
+      root.unmount()
+    })
+    document.body.innerHTML = ''
+  })
+
+  async function render() {
+    await act(async () => {
+      root.render(
+        <MemoryRouter>
+          <DashboardPage />
+        </MemoryRouter>,
+      )
+    })
+  }
+
+  it('renders the coach team and roster size from the dashboard fixture', async () => {
+    const dashboard = dashboardFixtures.coach
+
+    expect(dashboard.role).toBe('trainer')
+
+    await render()
+
+    if (dashboard.role === 'trainer') {
+      expect(container.textContent).toContain(dashboard.team.name)
+      expect(container.textContent).toContain(`${dashboard.total_members} roster members`)
+    }
+  })
+})
diff --git a/web-client/src/app/pages/DashboardPage.tsx b/web-client/src/app/pages/DashboardPage.tsx
index 291116ea..73d2dc3d 100644
--- a/web-client/src/app/pages/DashboardPage.tsx
+++ b/web-client/src/app/pages/DashboardPage.tsx
@@ -25,6 +25,7 @@ const initials = (name: string) =>
 export function DashboardPage() {
   const { view, states } = useDashboardViewModel()
   const showBalanceCard = Boolean(view.myBalance || states.myBalance?.isLoading)
+  const showTeamCard = Boolean(view.myTeam)
   const showEventsCards = Boolean(view.myEvents || states.myEvents?.isLoading)
   const showFeedbackStat = Boolean(view.myFeedback || states.myFeedback?.isLoading)
 
@@ -40,9 +41,10 @@ export function DashboardPage() {
         <AdminCountsSection counts={view.adminCounts} state={states.adminCounts} />
       )}
 
-      {(showBalanceCard || showEventsCards || showFeedbackStat) && (
+      {(showBalanceCard || showTeamCard || showEventsCards || showFeedbackStat) && (
         <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
           {showBalanceCard && <BalanceCard balance={view.myBalance} state={states.myBalance} />}
+          {showTeamCard && <TeamCard team={view.myTeam} />}
           {showEventsCards && <EventsCards events={view.myEvents} state={states.myEvents} />}
           {showFeedbackStat && (
             <FeedbackStat feedback={view.myFeedback} state={states.myFeedback} />
@@ -85,6 +87,22 @@ function AdminCountsSection({
   )
 }
 
+function TeamCard({
+  team,
+}: {
+  team?: NonNullable<ReturnType<typeof useDashboardViewModel>['view']['myTeam']>
+}) {
+  if (!team) return null
+
+  return (
+    <StatCard
+      label="My Team"
+      value={team.teamName}
+      meta={`${team.totalMembers} roster members`}
+    />
+  )
+}
+
 function BalanceCard({
   balance,
   state,
diff --git a/web-client/src/app/pages/model/useDashboardViewModel.ts b/web-client/src/app/pages/model/useDashboardViewModel.ts
index 39212f6a..3b9fa424 100644
--- a/web-client/src/app/pages/model/useDashboardViewModel.ts
+++ b/web-client/src/app/pages/model/useDashboardViewModel.ts
@@ -48,6 +48,11 @@ export interface DashboardFeedbackSection {
   items: DashboardFeedbackItem[]
 }
 
+export interface DashboardTeamSection {
+  teamName: string
+  totalMembers: number
+}
+
 export interface DashboardAdminCountsSection {
   totalTeams: number
   directors: number
@@ -74,6 +79,7 @@ export interface DashboardView {
   myEvents?: DashboardEventsSection
   myBalance?: DashboardBalanceSection
   myFeedback?: DashboardFeedbackSection
+  myTeam?: DashboardTeamSection
   adminCounts?: DashboardAdminCountsSection
   sports?: DashboardSportSection[]
 }
@@ -297,6 +303,10 @@ function fillSections(
       break
 
     case 'trainer':
+      view.myTeam = {
+        teamName: data.team.name,
+        totalMembers: data.total_members,
+      }
       view.myEvents = buildEventsSection(data.upcoming_events, null, org.events)
       view.myFeedback = buildFeedbackSection(data.recent_feedback)
       states.myEvents = org.eventsState

From 015366ad8cfecbfc1465e4a6b2ca6872d65dfab8 Mon Sep 17 00:00:00 2001
From: FadyGergesRezk <84906847+FadyGergesRezk@users.noreply.github.com>
Date: Fri, 3 Jul 2026 06:06:38 +0200
Subject: [PATCH 03/11] feat: add event create/edit/delete and scope attendance
 status to trainees

---
 .../src/features/sport-events/api/queries.ts  | 202 ++++-
 .../components/SportEventEditorDialog.tsx     | 725 ++++++++++++++++++
 .../sport-events/model/eventsUiStore.ts       |  26 +-
 .../model/useEventsViewModel.test.ts          |  42 +-
 .../sport-events/model/useEventsViewModel.ts  |  61 +-
 .../sport-events/pages/SportEventsPage.tsx    | 126 ++-
 6 files changed, 1148 insertions(+), 34 deletions(-)
 create mode 100644 web-client/src/features/sport-events/components/SportEventEditorDialog.tsx

diff --git a/web-client/src/features/sport-events/api/queries.ts b/web-client/src/features/sport-events/api/queries.ts
index 2e705c5a..75338f6d 100644
--- a/web-client/src/features/sport-events/api/queries.ts
+++ b/web-client/src/features/sport-events/api/queries.ts
@@ -1,11 +1,18 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 
 import { getCurrentUser } from '@/features/auth/currentUser'
-import { eventDetailsById, eventSummaryFixtures } from '@/mocks/fixtures'
+import {
+  eventDetailsById,
+  eventSummaryFixtures,
+  memberNamesById,
+  sportFixtures,
+  teamFixtures,
+} from '@/mocks/fixtures'
 import { mockOr } from '@/mocks/mockSwitch'
 import { scopeEvents } from '@/mocks/scope'
 import { sportEventsClient } from './client'
-import type { SportEvent, EventCreate, EventPartialUpdate, EventSummary } from '../types'
+import type { AuthUser, EventListItem, Reference } from '@/types'
+import type { SportEvent, EventCreate, EventPartialUpdate } from '../types'
 
 export const eventKeys = {
   hello: ['sport-events', 'hello'] as const,
@@ -16,6 +23,160 @@ export const eventKeys = {
 
 export const sportEventsKeys = eventKeys
 
+const mockEventDetailsById: Record<string, SportEvent> = { ...eventDetailsById }
+let mockEventSummaryRows: EventListItem[] = eventSummaryFixtures.map((event) => ({
+  ...event,
+  attendees: event.attendees?.map((attendee) => ({ ...attendee })),
+  sports_linked: event.sports_linked?.map((sport) => ({ ...sport })),
+  teams_linked: event.teams_linked?.map((team) => ({ ...team })),
+}))
+
+function mockEventError(message: string): Error {
+  return new Error(message)
+}
+
+function mockEventId(): string {
+  return globalThis.crypto?.randomUUID?.() ?? `eeeeeeee-eeee-4eee-8eee-${Date.now().toString(16).padStart(12, '0').slice(-12)}`
+}
+
+function uniqueIds(ids: string[] | undefined): string[] {
+  return Array.from(new Set(ids ?? []))
+}
+
+function memberRef(id: string): Reference {
+  const name = memberNamesById[id]
+  if (!name) throw mockEventError('Member not found')
+  return { id, name }
+}
+
+function sportRef(id: string): Reference {
+  const sport = sportFixtures.find((item) => item.id === id)
+  if (!sport) throw mockEventError('Sport not found')
+  return { id: sport.id, name: sport.name }
+}
+
+function teamRef(id: string): Reference {
+  const team = teamFixtures.find((item) => item.id === id)
+  if (!team) throw mockEventError('Team not found')
+  return { id: team.id, name: team.name }
+}
+
+function eventSummary(event: SportEvent): EventListItem {
+  return {
+    id: event.id,
+    name: event.name,
+    start_time: event.start_time,
+    end_time: event.end_time,
+    attendees: event.attendees?.map((attendee) => ({ ...attendee })),
+    sports_linked: event.sports_linked?.map((sport) => ({ ...sport })),
+    teams_linked: event.teams_linked?.map((team) => ({ ...team })),
+  }
+}
+
+function validateEventTimes(startTime: string, endTime: string): void {
+  if (Number.isNaN(new Date(startTime).getTime()) || Number.isNaN(new Date(endTime).getTime())) {
+    throw mockEventError('Start and end time are required')
+  }
+
+  if (new Date(endTime) <= new Date(startTime)) {
+    throw mockEventError('End time must be after start time')
+  }
+}
+
+function canManageEvent(user: AuthUser, event: SportEvent): boolean {
+  return user.role === 'admin' || event.creator?.id === user.id
+}
+
+function upsertMockEvent(event: SportEvent): void {
+  mockEventDetailsById[event.id] = event
+
+  const summary = eventSummary(event)
+  const index = mockEventSummaryRows.findIndex((row) => row.id === event.id)
+
+  if (index === -1) {
+    mockEventSummaryRows = [summary, ...mockEventSummaryRows]
+    return
+  }
+
+  mockEventSummaryRows = mockEventSummaryRows.map((row) =>
+    row.id === event.id ? summary : row,
+  )
+}
+
+function mockCreateEvent(data: EventCreate): SportEvent {
+  const user = getCurrentUser()
+  const name = data.name.trim()
+
+  if (!name) throw mockEventError('Name is required')
+  validateEventTimes(data.start_time, data.end_time)
+
+  const event: SportEvent = {
+    id: mockEventId(),
+    name,
+    description: data.description?.trim() ?? '',
+    start_time: data.start_time,
+    end_time: data.end_time,
+    attendees: uniqueIds(data.attendees).map(memberRef),
+    sports_linked: uniqueIds(data.sports_linked).map(sportRef),
+    teams_linked: uniqueIds(data.teams_linked).map(teamRef),
+    creator: { id: user.id, name: user.name },
+  }
+
+  upsertMockEvent(event)
+  return event
+}
+
+function mockUpdateEvent({ id, ...data }: { id: string } & EventPartialUpdate): SportEvent {
+  const user = getCurrentUser()
+  const current = mockEventDetailsById[id]
+
+  if (!current) throw mockEventError('Event not found')
+  if (!canManageEvent(user, current)) {
+    throw mockEventError('You are not allowed to update this event')
+  }
+
+  const name = data.name === undefined ? current.name : data.name.trim()
+  if (!name) throw mockEventError('Name is required')
+
+  const startTime = data.start_time ?? current.start_time
+  const endTime = data.end_time ?? current.end_time
+  validateEventTimes(startTime, endTime)
+
+  const event: SportEvent = {
+    ...current,
+    name,
+    description: data.description === undefined ? current.description : data.description.trim(),
+    start_time: startTime,
+    end_time: endTime,
+    attendees:
+      data.attendees === undefined ? current.attendees : uniqueIds(data.attendees).map(memberRef),
+    sports_linked:
+      data.sports_linked === undefined
+        ? current.sports_linked
+        : uniqueIds(data.sports_linked).map(sportRef),
+    teams_linked:
+      data.teams_linked === undefined
+        ? current.teams_linked
+        : uniqueIds(data.teams_linked).map(teamRef),
+  }
+
+  upsertMockEvent(event)
+  return event
+}
+
+function mockDeleteEvent(id: string): void {
+  const user = getCurrentUser()
+  const event = mockEventDetailsById[id]
+
+  if (!event) throw mockEventError('Event not found')
+  if (!canManageEvent(user, event)) {
+    throw mockEventError('You are not allowed to delete this event')
+  }
+
+  delete mockEventDetailsById[id]
+  mockEventSummaryRows = mockEventSummaryRows.filter((row) => row.id !== id)
+}
+
 export function useSportEventsHello() {
   return useQuery<string>({
     queryKey: eventKeys.hello,
@@ -24,14 +185,14 @@ export function useSportEventsHello() {
 }
 
 export function useEventsList(enabled = true) {
-  return useQuery<EventSummary[]>({
+  return useQuery<EventListItem[]>({
     queryKey: eventKeys.list(),
     staleTime: 30_000,
     enabled,
     queryFn: () =>
       mockOr(
-        () => Promise.resolve(scopeEvents(eventSummaryFixtures, getCurrentUser())),
-        () => sportEventsClient.get<EventSummary[]>('').then(r => r.data),
+        () => Promise.resolve(scopeEvents(mockEventSummaryRows, getCurrentUser())),
+        () => sportEventsClient.get<EventListItem[]>('').then(r => r.data),
       ),
   })
 }
@@ -42,7 +203,7 @@ export function useEvent(id: string | null | undefined) {
     queryFn: () =>
       mockOr(
         () => {
-          const found = id ? eventDetailsById[id] : undefined
+          const found = id ? mockEventDetailsById[id] : undefined
           const scoped = found ? scopeEvents([found], getCurrentUser()) : []
           if (!scoped[0]) {
             throw new Error('Event not found')
@@ -62,8 +223,15 @@ export function useCreateSportEvent() {
   const qc = useQueryClient()
 
   return useMutation<SportEvent, Error, EventCreate>({
-    mutationFn: data => sportEventsClient.post<SportEvent>('', data).then(r => r.data),
-    onSuccess: () => qc.invalidateQueries({ queryKey: eventKeys.all }),
+    mutationFn: data =>
+      mockOr(
+        () => Promise.resolve(mockCreateEvent(data)),
+        () => sportEventsClient.post<SportEvent>('', data).then(r => r.data),
+      ),
+    onSuccess: (event) => {
+      qc.setQueryData(eventKeys.detail(event.id), event)
+      qc.invalidateQueries({ queryKey: eventKeys.all })
+    },
   })
 }
 
@@ -71,8 +239,13 @@ export function useUpdateSportEvent() {
   const qc = useQueryClient()
 
   return useMutation<SportEvent, Error, { id: string } & EventPartialUpdate>({
-    mutationFn: ({ id, ...data }) => sportEventsClient.patch<SportEvent>(`/${id}`, data).then(r => r.data),
-    onSuccess: (_, { id }) => {
+    mutationFn: ({ id, ...data }) =>
+      mockOr(
+        () => Promise.resolve(mockUpdateEvent({ id, ...data })),
+        () => sportEventsClient.patch<SportEvent>(`/${id}`, data).then(r => r.data),
+      ),
+    onSuccess: (event, { id }) => {
+      qc.setQueryData(eventKeys.detail(id), event)
       qc.invalidateQueries({ queryKey: eventKeys.all })
       qc.invalidateQueries({ queryKey: eventKeys.detail(id) })
     },
@@ -83,7 +256,14 @@ export function useDeleteSportEvent() {
   const qc = useQueryClient()
 
   return useMutation<void, Error, string>({
-    mutationFn: id => sportEventsClient.delete(`/${id}`).then(() => undefined),
+    mutationFn: id =>
+      mockOr(
+        () => {
+          mockDeleteEvent(id)
+          return Promise.resolve(undefined)
+        },
+        () => sportEventsClient.delete(`/${id}`).then(() => undefined),
+      ),
     onSuccess: (_, id) => {
       qc.invalidateQueries({ queryKey: eventKeys.all })
       qc.removeQueries({ queryKey: eventKeys.detail(id) })
diff --git a/web-client/src/features/sport-events/components/SportEventEditorDialog.tsx b/web-client/src/features/sport-events/components/SportEventEditorDialog.tsx
new file mode 100644
index 00000000..50026957
--- /dev/null
+++ b/web-client/src/features/sport-events/components/SportEventEditorDialog.tsx
@@ -0,0 +1,725 @@
+import { type FormEvent, useMemo, useState } from 'react'
+import { X } from 'lucide-react'
+
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Textarea } from '@/components/ui/textarea'
+import { useAuth } from '@/features/auth'
+import { useSportsList, useTeamsList } from '@/features/organization/api/queries'
+import { serverErrorMessage } from '@/lib/server-error'
+import { cn } from '@/lib/utils'
+import { memberRefName, type AuthUser, type Reference, type Sport, type Team } from '@/types'
+import {
+  useCreateSportEvent,
+  useEvent,
+  useUpdateSportEvent,
+} from '../api/queries'
+import type { SportEvent } from '../types'
+import { type EventEditorTarget, useEventsUiStore } from '../model/eventsUiStore'
+
+interface EventFormState {
+  name: string
+  description: string
+  startLocal: string
+  endLocal: string
+  sportIds: string[]
+  teamIds: string[]
+  attendeeIds: string[]
+}
+
+interface Option {
+  id: string
+  label: string
+  meta?: string
+}
+
+export function SportEventEditorDialog() {
+  const target = useEventsUiStore((state) => state.editorTarget)
+  const closeEditor = useEventsUiStore((state) => state.closeEditor)
+  const key = target?.mode === 'edit' ? `edit-${target.eventId}` : target?.mode ?? 'closed'
+
+  return (
+    <Dialog open={target !== null} onOpenChange={(open) => !open && closeEditor()}>
+      {target && <SportEventEditorForm key={key} target={target} />}
+    </Dialog>
+  )
+}
+
+function SportEventEditorForm({ target }: { target: EventEditorTarget }) {
+  const { user } = useAuth()
+  const eventQuery = useEvent(target.mode === 'edit' ? target.eventId : null)
+  const teamsQuery = useTeamsList()
+  const sportsQuery = useSportsList()
+  const queryError = teamsQuery.error ?? sportsQuery.error ?? eventQuery.error
+  const teams = teamsQuery.data
+  const sports = sportsQuery.data
+  const event = target.mode === 'edit' ? eventQuery.data : undefined
+  const isLoading =
+    teamsQuery.isLoading ||
+    sportsQuery.isLoading ||
+    (target.mode === 'edit' && eventQuery.isLoading)
+
+  if (queryError) {
+    return (
+      <DialogContent className="max-h-[92vh] overflow-y-auto sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>{target.mode === 'create' ? 'New Event' : 'Edit Event'}</DialogTitle>
+        </DialogHeader>
+        <p className="border border-destructive/30 bg-destructive/10 px-3 py-2 text-body-sm text-destructive">
+          {serverErrorMessage(queryError)}
+        </p>
+      </DialogContent>
+    )
+  }
+
+  if (isLoading || !teams || !sports) {
+    return (
+      <DialogContent className="max-h-[92vh] overflow-y-auto sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>{target.mode === 'create' ? 'New Event' : 'Edit Event'}</DialogTitle>
+        </DialogHeader>
+        <p className="border bg-card px-4 py-3 text-body-sm text-text-secondary">
+          Loading event form.
+        </p>
+      </DialogContent>
+    )
+  }
+
+  if (target.mode === 'edit' && !event) {
+    return (
+      <DialogContent className="max-h-[92vh] overflow-y-auto sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Edit Event</DialogTitle>
+        </DialogHeader>
+        <p className="border border-destructive/30 bg-destructive/10 px-3 py-2 text-body-sm text-destructive">
+          Event not found.
+        </p>
+      </DialogContent>
+    )
+  }
+
+  return (
+    <SportEventEditorLoaded
+      target={target}
+      user={user}
+      teams={teams}
+      sports={sports}
+      event={event}
+    />
+  )
+}
+
+function SportEventEditorLoaded({
+  target,
+  user,
+  teams,
+  sports,
+  event,
+}: {
+  target: EventEditorTarget
+  user: AuthUser
+  teams: Team[]
+  sports: Sport[]
+  event: SportEvent | undefined
+}) {
+  const closeEditor = useEventsUiStore((state) => state.closeEditor)
+  const openEvent = useEventsUiStore((state) => state.open)
+  const setMutationNotice = useEventsUiStore((state) => state.setMutationNotice)
+  const createEvent = useCreateSportEvent()
+  const updateEvent = useUpdateSportEvent()
+  const [form, setForm] = useState<EventFormState>(() =>
+    buildInitialForm(target, user, teams, sports, event),
+  )
+  const [formError, setFormError] = useState<string | null>(null)
+  const isPending = createEvent.isPending || updateEvent.isPending
+  const isPastEvent = target.mode === 'edit' && event ? new Date(event.end_time) < new Date() : false
+
+  const scopedSports = useMemo(
+    () => roleScopedSports(user, sports, teams),
+    [sports, teams, user],
+  )
+  const scopedTeams = useMemo(
+    () => roleScopedTeams(user, teams, sports),
+    [sports, teams, user],
+  )
+  const visibleTeams = useMemo(() => {
+    if (form.sportIds.length === 0) return scopedTeams
+    const selectedSports = new Set(form.sportIds)
+    return scopedTeams.filter((team) => selectedSports.has(team.sport.id))
+  }, [form, scopedTeams])
+  const sportOptions = useMemo(
+    () =>
+      scopedSports.map((sport) => ({
+        id: sport.id,
+        label: sport.name,
+        meta: `${teams.filter((team) => team.sport.id === sport.id).length} teams`,
+      })),
+    [scopedSports, teams],
+  )
+  const teamOptions = useMemo(
+    () =>
+      visibleTeams.map((team) => ({
+        id: team.id,
+        label: team.name,
+        meta: `${team.sport.name} - ${team.trainees.length} trainees`,
+      })),
+    [visibleTeams],
+  )
+  const attendeeOptions = useMemo(
+    () => buildAttendeeOptions(form.teamIds, teams, event),
+    [event, form.teamIds, teams],
+  )
+
+  const handleSportToggle = (sportId: string) => {
+    setForm((current) => ({ ...current, sportIds: toggleId(current.sportIds, sportId) }))
+  }
+
+  const handleTeamToggle = (teamId: string) => {
+    setForm((current) => {
+      const nextTeamIds = toggleId(current.teamIds, teamId)
+      const nextSportIds = unique([
+        ...current.sportIds,
+        ...teams
+          .filter((team) => nextTeamIds.includes(team.id))
+          .map((team) => team.sport.id),
+      ])
+
+      return {
+        ...current,
+        teamIds: nextTeamIds,
+        sportIds: nextSportIds,
+        attendeeIds: syncAttendeesForTeams(current.teamIds, nextTeamIds, current.attendeeIds, teams),
+      }
+    })
+  }
+
+  const handleAttendeeToggle = (attendeeId: string) => {
+    setForm((current) => ({
+      ...current,
+      attendeeIds: toggleId(current.attendeeIds, attendeeId),
+    }))
+  }
+
+  const handleSubmit = async (submitEvent: FormEvent<HTMLFormElement>) => {
+    submitEvent.preventDefault()
+
+    const validationError = validateForm(form)
+    if (validationError) {
+      setFormError(validationError)
+      return
+    }
+
+    setFormError(null)
+
+    try {
+      if (target.mode === 'create') {
+        const created = await createEvent.mutateAsync({
+          name: form.name.trim(),
+          description: cleanedDescription(form.description),
+          start_time: localDateTimeToIso(form.startLocal),
+          end_time: localDateTimeToIso(form.endLocal),
+          sports_linked: resolvedSportIds(form, teams),
+          teams_linked: form.teamIds,
+          attendees: form.attendeeIds,
+        })
+
+        setMutationNotice('Event created.')
+        openEvent(created.id)
+        closeEditor()
+        return
+      }
+
+      if (!event) return
+
+      const payload = buildUpdatePayload(event, form, teams)
+      if (Object.keys(payload).length > 0) {
+        await updateEvent.mutateAsync({ id: event.id, ...payload })
+        setMutationNotice('Event updated.')
+      }
+      closeEditor()
+    } catch (error) {
+      setFormError(serverErrorMessage(error))
+    }
+  }
+
+  return (
+    <DialogContent className="max-h-[92vh] overflow-y-auto sm:max-w-2xl">
+      <DialogHeader>
+        <DialogTitle>{target.mode === 'create' ? 'New Event' : 'Edit Event'}</DialogTitle>
+      </DialogHeader>
+
+      <form className="space-y-5" onSubmit={handleSubmit}>
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <div className="space-y-1.5 sm:col-span-2">
+              <Label htmlFor="event-name">Name</Label>
+              <Input
+                id="event-name"
+                value={form.name}
+                onChange={(inputEvent) =>
+                  setForm({ ...form, name: inputEvent.target.value })
+                }
+                required
+                disabled={isPending}
+                aria-invalid={formError !== null && form.name.trim() === ''}
+              />
+            </div>
+
+            <div className="space-y-1.5 sm:col-span-2">
+              <Label htmlFor="event-description">Description</Label>
+              <Textarea
+                id="event-description"
+                value={form.description}
+                onChange={(inputEvent) =>
+                  setForm({ ...form, description: inputEvent.target.value })
+                }
+                disabled={isPending}
+                className="min-h-24"
+              />
+            </div>
+
+            <div className="space-y-1.5">
+              <Label htmlFor="event-start">Start</Label>
+              <Input
+                id="event-start"
+                type="datetime-local"
+                value={form.startLocal}
+                onChange={(inputEvent) =>
+                  setForm({ ...form, startLocal: inputEvent.target.value })
+                }
+                required
+                disabled={isPending}
+                aria-invalid={formError !== null && form.startLocal === ''}
+              />
+            </div>
+
+            <div className="space-y-1.5">
+              <Label htmlFor="event-end">End</Label>
+              <Input
+                id="event-end"
+                type="datetime-local"
+                value={form.endLocal}
+                onChange={(inputEvent) =>
+                  setForm({ ...form, endLocal: inputEvent.target.value })
+                }
+                required
+                disabled={isPending}
+                aria-invalid={formError !== null && form.endLocal === ''}
+              />
+            </div>
+          </div>
+
+          <SelectableGroup
+            label="Sports"
+            options={sportOptions}
+            selectedIds={form.sportIds}
+            emptyLabel="No sports available."
+            disabled={isPending}
+            onToggle={handleSportToggle}
+          />
+
+          <SelectableGroup
+            label="Teams"
+            options={teamOptions}
+            selectedIds={form.teamIds}
+            emptyLabel="No teams available."
+            disabled={isPending}
+            onToggle={handleTeamToggle}
+          />
+
+          <AttendeeSelector
+            isPastEvent={isPastEvent}
+            options={attendeeOptions}
+            selectedIds={form.attendeeIds}
+            disabled={isPending}
+            onToggle={handleAttendeeToggle}
+          />
+
+          {formError && (
+            <p className="border border-destructive/30 bg-destructive/10 px-3 py-2 text-body-sm text-destructive">
+              {formError}
+            </p>
+          )}
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={closeEditor} disabled={isPending}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isPending}>
+              {isPending ? 'Saving' : target.mode === 'create' ? 'Create Event' : 'Save Event'}
+            </Button>
+          </DialogFooter>
+      </form>
+    </DialogContent>
+  )
+}
+
+function SelectableGroup({
+  label,
+  options,
+  selectedIds,
+  emptyLabel,
+  disabled,
+  onToggle,
+}: {
+  label: string
+  options: Option[]
+  selectedIds: string[]
+  emptyLabel: string
+  disabled: boolean
+  onToggle: (id: string) => void
+}) {
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between gap-3">
+        <Label>{label}</Label>
+        <Badge size="sm">{selectedIds.length}</Badge>
+      </div>
+      {options.length === 0 ? (
+        <p className="border bg-card px-3 py-2 text-body-sm text-text-secondary">{emptyLabel}</p>
+      ) : (
+        <div className="grid max-h-48 grid-cols-1 gap-2 overflow-y-auto sm:grid-cols-2">
+          {options.map((option) => {
+            const selected = selectedIds.includes(option.id)
+
+            return (
+              <button
+                key={option.id}
+                type="button"
+                aria-pressed={selected}
+                disabled={disabled}
+                onClick={() => onToggle(option.id)}
+                className={cn(
+                  'min-h-12 border px-3 py-2 text-left transition-colors disabled:pointer-events-none disabled:opacity-50',
+                  selected
+                    ? 'border-primary bg-primary/10 text-text-primary'
+                    : 'border-border bg-card hover:bg-muted/60',
+                )}
+              >
+                <span className="block text-body-sm font-medium">{option.label}</span>
+                {option.meta && (
+                  <span className="mt-0.5 block text-caption text-text-tertiary">
+                    {option.meta}
+                  </span>
+                )}
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function AttendeeSelector({
+  isPastEvent,
+  options,
+  selectedIds,
+  disabled,
+  onToggle,
+}: {
+  isPastEvent: boolean
+  options: Reference[]
+  selectedIds: string[]
+  disabled: boolean
+  onToggle: (id: string) => void
+}) {
+  const selected = options.filter((option) => selectedIds.includes(option.id))
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between gap-3">
+        <Label>{isPastEvent ? 'Attendance Upkeep' : 'Attendees'}</Label>
+        <Badge size="sm">{selectedIds.length}</Badge>
+      </div>
+
+      {selected.length > 0 && (
+        <div className="flex max-h-28 flex-wrap gap-1.5 overflow-y-auto border bg-card p-2">
+          {selected.map((attendee) => (
+            <Badge key={attendee.id} className="gap-1">
+              {memberRefName(attendee)}
+              <button
+                type="button"
+                className="inline-flex size-4 items-center justify-center text-text-tertiary hover:text-destructive disabled:pointer-events-none disabled:opacity-50"
+                disabled={disabled}
+                onClick={() => onToggle(attendee.id)}
+              >
+                <X className="size-3" />
+                <span className="sr-only">Remove {memberRefName(attendee)}</span>
+              </button>
+            </Badge>
+          ))}
+        </div>
+      )}
+
+      {options.length === 0 ? (
+        <p className="border bg-card px-3 py-2 text-body-sm text-text-secondary">
+          No roster attendees available.
+        </p>
+      ) : (
+        <div className="grid max-h-44 grid-cols-1 gap-2 overflow-y-auto sm:grid-cols-2">
+          {options.map((option) => {
+            const checked = selectedIds.includes(option.id)
+
+            return (
+              <button
+                key={option.id}
+                type="button"
+                aria-pressed={checked}
+                disabled={disabled}
+                onClick={() => onToggle(option.id)}
+                className={cn(
+                  'flex min-h-10 items-center justify-between gap-3 border px-3 py-2 text-left text-body-sm transition-colors disabled:pointer-events-none disabled:opacity-50',
+                  checked
+                    ? 'border-primary bg-primary/10 text-text-primary'
+                    : 'border-border bg-card hover:bg-muted/60',
+                )}
+              >
+                <span>{memberRefName(option)}</span>
+                <span
+                  className={cn(
+                    'size-3 shrink-0 border',
+                    checked ? 'border-primary bg-primary' : 'border-border',
+                  )}
+                  aria-hidden="true"
+                />
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function buildInitialForm(
+  target: EventEditorTarget,
+  user: AuthUser,
+  teams: Team[],
+  sports: Sport[],
+  event: SportEvent | undefined,
+): EventFormState {
+  if (target.mode === 'edit' && event) {
+    return {
+      name: event.name,
+      description: event.description ?? '',
+      startLocal: isoToLocalDateTime(event.start_time),
+      endLocal: isoToLocalDateTime(event.end_time),
+      sportIds: event.sports_linked?.map((sport) => sport.id) ?? [],
+      teamIds: event.teams_linked?.map((team) => team.id) ?? [],
+      attendeeIds: event.attendees?.map((attendee) => attendee.id) ?? [],
+    }
+  }
+
+  const startLocal = defaultStartLocal()
+  const teamIds =
+    user.role === 'trainer'
+      ? teams
+          .filter((team) => team.trainers.some((trainer) => trainer.id === user.id))
+          .map((team) => team.id)
+      : []
+  const sportIds =
+    user.role === 'director'
+      ? sports
+          .filter((sport) => sport.directors.some((director) => director.id === user.id))
+          .map((sport) => sport.id)
+      : unique(
+          teams
+            .filter((team) => teamIds.includes(team.id))
+            .map((team) => team.sport.id),
+        )
+
+  return {
+    name: '',
+    description: '',
+    startLocal,
+    endLocal: addMinutesLocal(startLocal, 90),
+    sportIds,
+    teamIds,
+    attendeeIds: rosterIdsForTeams(teamIds, teams),
+  }
+}
+
+function roleScopedSports(user: AuthUser, sports: Sport[], teams: Team[]): Sport[] {
+  if (user.role === 'admin') return sports
+  if (user.role === 'director') {
+    return sports.filter((sport) => sport.directors.some((director) => director.id === user.id))
+  }
+  if (user.role === 'trainer') {
+    const sportIds = new Set(
+      teams
+        .filter((team) => team.trainers.some((trainer) => trainer.id === user.id))
+        .map((team) => team.sport.id),
+    )
+
+    return sports.filter((sport) => sportIds.has(sport.id))
+  }
+
+  return []
+}
+
+function roleScopedTeams(user: AuthUser, teams: Team[], sports: Sport[]): Team[] {
+  if (user.role === 'admin') return teams
+  if (user.role === 'director') {
+    const sportIds = new Set(
+      sports
+        .filter((sport) => sport.directors.some((director) => director.id === user.id))
+        .map((sport) => sport.id),
+    )
+
+    return teams.filter((team) => sportIds.has(team.sport.id))
+  }
+  if (user.role === 'trainer') {
+    return teams.filter((team) => team.trainers.some((trainer) => trainer.id === user.id))
+  }
+
+  return []
+}
+
+function buildAttendeeOptions(
+  teamIds: string[],
+  teams: Team[],
+  event: SportEvent | undefined,
+): Reference[] {
+  const refs = new Map<string, Reference>()
+
+  teams
+    .filter((team) => teamIds.includes(team.id))
+    .flatMap((team) => team.trainees)
+    .forEach((member) => refs.set(member.id, member))
+
+  event?.attendees?.forEach((attendee) => refs.set(attendee.id, attendee))
+
+  return Array.from(refs.values()).toSorted((a, b) => memberRefName(a).localeCompare(memberRefName(b)))
+}
+
+function syncAttendeesForTeams(
+  currentTeamIds: string[],
+  nextTeamIds: string[],
+  currentAttendeeIds: string[],
+  teams: Team[],
+): string[] {
+  const currentTeams = new Set(currentTeamIds)
+  const nextTeams = new Set(nextTeamIds)
+  const addedTeamIds = nextTeamIds.filter((id) => !currentTeams.has(id))
+  const removedTeamIds = currentTeamIds.filter((id) => !nextTeams.has(id))
+  const nextRoster = new Set(rosterIdsForTeams(nextTeamIds, teams))
+  const nextAttendees = new Set(currentAttendeeIds)
+
+  rosterIdsForTeams(addedTeamIds, teams).forEach((id) => nextAttendees.add(id))
+  rosterIdsForTeams(removedTeamIds, teams).forEach((id) => {
+    if (!nextRoster.has(id)) nextAttendees.delete(id)
+  })
+
+  return Array.from(nextAttendees)
+}
+
+function rosterIdsForTeams(teamIds: string[], teams: Team[]): string[] {
+  const selectedTeams = new Set(teamIds)
+  return unique(
+    teams
+      .filter((team) => selectedTeams.has(team.id))
+      .flatMap((team) => team.trainees.map((trainee) => trainee.id)),
+  )
+}
+
+function validateForm(form: EventFormState): string | null {
+  if (!form.name.trim()) return 'Name is required.'
+  if (!form.startLocal || !form.endLocal) return 'Start and end time are required.'
+  if (new Date(form.endLocal) <= new Date(form.startLocal)) {
+    return 'End time must be after start time.'
+  }
+
+  return null
+}
+
+function buildUpdatePayload(event: SportEvent, form: EventFormState, teams: Team[]) {
+  const payload: Partial<Pick<SportEvent, 'name' | 'description' | 'start_time' | 'end_time'>> & {
+    attendees?: string[]
+    sports_linked?: string[]
+    teams_linked?: string[]
+  } = {}
+  const name = form.name.trim()
+  const description = cleanedDescription(form.description) ?? ''
+  const startTime = localDateTimeToIso(form.startLocal)
+  const endTime = localDateTimeToIso(form.endLocal)
+  const sportIds = resolvedSportIds(form, teams)
+
+  if (name !== event.name) payload.name = name
+  if (description !== (event.description ?? '')) payload.description = description
+  if (startTime !== event.start_time) payload.start_time = startTime
+  if (endTime !== event.end_time) payload.end_time = endTime
+  if (!sameIds(sportIds, event.sports_linked?.map((sport) => sport.id) ?? [])) {
+    payload.sports_linked = sportIds
+  }
+  if (!sameIds(form.teamIds, event.teams_linked?.map((team) => team.id) ?? [])) {
+    payload.teams_linked = form.teamIds
+  }
+  if (!sameIds(form.attendeeIds, event.attendees?.map((attendee) => attendee.id) ?? [])) {
+    payload.attendees = form.attendeeIds
+  }
+
+  return payload
+}
+
+function resolvedSportIds(form: EventFormState, teams: Team[]): string[] {
+  const teamSports = teams
+    .filter((team) => form.teamIds.includes(team.id))
+    .map((team) => team.sport.id)
+
+  return unique([...form.sportIds, ...teamSports])
+}
+
+function cleanedDescription(description: string): string | undefined {
+  const cleaned = description.trim()
+  return cleaned.length > 0 ? cleaned : undefined
+}
+
+function toggleId(ids: string[], id: string): string[] {
+  return ids.includes(id) ? ids.filter((item) => item !== id) : [...ids, id]
+}
+
+function unique(ids: string[]): string[] {
+  return Array.from(new Set(ids))
+}
+
+function sameIds(a: string[], b: string[]): boolean {
+  if (a.length !== b.length) return false
+
+  const sortedA = [...a].sort()
+  const sortedB = [...b].sort()
+  return sortedA.every((id, index) => id === sortedB[index])
+}
+
+function isoToLocalDateTime(iso: string): string {
+  return dateToLocalDateTime(new Date(iso))
+}
+
+function defaultStartLocal(): string {
+  const start = new Date()
+  start.setHours(start.getHours() + 1, 0, 0, 0)
+  return dateToLocalDateTime(start)
+}
+
+function addMinutesLocal(localValue: string, minutes: number): string {
+  const date = new Date(localValue)
+  date.setMinutes(date.getMinutes() + minutes)
+  return dateToLocalDateTime(date)
+}
+
+function dateToLocalDateTime(date: Date): string {
+  const local = new Date(date.getTime() - date.getTimezoneOffset() * 60_000)
+  return local.toISOString().slice(0, 16)
+}
+
+function localDateTimeToIso(localValue: string): string {
+  return new Date(localValue).toISOString()
+}
diff --git a/web-client/src/features/sport-events/model/eventsUiStore.ts b/web-client/src/features/sport-events/model/eventsUiStore.ts
index 59f88544..cdf8f874 100644
--- a/web-client/src/features/sport-events/model/eventsUiStore.ts
+++ b/web-client/src/features/sport-events/model/eventsUiStore.ts
@@ -2,7 +2,7 @@ import { create } from 'zustand'
 
 import type { EventStatus } from './useEventsViewModel'
 
-export type EventsStatusFilter = 'all' | Extract<EventStatus, 'attended' | 'missed' | 'upcoming'>
+export type EventsStatusFilter = 'all' | EventStatus
 export type EventsSort = 'date-asc' | 'date-desc' | 'duration-asc' | 'duration-desc'
 
 export interface EventsFilters {
@@ -13,6 +13,10 @@ export interface EventsFilters {
   sort: EventsSort
 }
 
+export type EventEditorTarget =
+  | { mode: 'create' }
+  | { mode: 'edit'; eventId: string }
+
 const defaultFilters: EventsFilters = {
   search: '',
   status: 'all',
@@ -23,9 +27,18 @@ const defaultFilters: EventsFilters = {
 
 interface EventsUiState {
   openEventId: string | null
+  editorTarget: EventEditorTarget | null
+  deleteTargetId: string | null
+  mutationNotice: string | null
   filters: EventsFilters
   open: (id: string) => void
   close: () => void
+  openCreate: () => void
+  openEdit: (eventId: string) => void
+  closeEditor: () => void
+  openDeleteConfirm: (eventId: string) => void
+  closeDeleteConfirm: () => void
+  setMutationNotice: (notice: string | null) => void
   setSearch: (search: string) => void
   setStatus: (status: EventsStatusFilter) => void
   setDateRange: (range: Pick<EventsFilters, 'fromDate' | 'toDate'>) => void
@@ -35,9 +48,18 @@ interface EventsUiState {
 
 export const useEventsUiStore = create<EventsUiState>((set) => ({
   openEventId: null,
+  editorTarget: null,
+  deleteTargetId: null,
+  mutationNotice: null,
   filters: defaultFilters,
   open: (id) => set({ openEventId: id }),
-  close: () => set({ openEventId: null }),
+  close: () => set({ openEventId: null, deleteTargetId: null }),
+  openCreate: () => set({ editorTarget: { mode: 'create' }, mutationNotice: null }),
+  openEdit: (eventId) => set({ editorTarget: { mode: 'edit', eventId }, mutationNotice: null }),
+  closeEditor: () => set({ editorTarget: null }),
+  openDeleteConfirm: (eventId) => set({ deleteTargetId: eventId }),
+  closeDeleteConfirm: () => set({ deleteTargetId: null }),
+  setMutationNotice: (notice) => set({ mutationNotice: notice }),
   setSearch: (search) => set((state) => ({ filters: { ...state.filters, search } })),
   setStatus: (status) => set((state) => ({ filters: { ...state.filters, status } })),
   setDateRange: (range) =>
diff --git a/web-client/src/features/sport-events/model/useEventsViewModel.test.ts b/web-client/src/features/sport-events/model/useEventsViewModel.test.ts
index 2e6501aa..0f32a842 100644
--- a/web-client/src/features/sport-events/model/useEventsViewModel.test.ts
+++ b/web-client/src/features/sport-events/model/useEventsViewModel.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import { eventSummaryFixtures, teamFixtures } from '@/mocks/fixtures'
+import { eventDetailsById, eventSummaryFixtures, teamFixtures } from '@/mocks/fixtures'
 import { MOCK_PERSONAS } from '@/mocks/personas'
 import { scopeEvents } from '@/mocks/scope'
 import type { EventListItem } from '@/types'
@@ -83,6 +83,7 @@ describe('eventAttendanceStatus', () => {
     const member = MOCK_PERSONAS.member
     const view = buildEventsView(scopeEvents(eventSummaryFixtures, member), now, {
       id: member.id,
+      role: member.role,
       teamIds: userTeamIds(teamFixtures, member.id),
     })
 
@@ -90,4 +91,43 @@ describe('eventAttendanceStatus', () => {
     expect(view.rows.some((row) => row.status === 'attended')).toBe(true)
     expect(view.rows.some((row) => row.status === 'upcoming')).toBe(true)
   })
+
+  it("collapses a coach's own past event to a role-agnostic past status", () => {
+    const coach = MOCK_PERSONAS.coach
+    const coachOwnedPastEvent = Object.values(eventDetailsById).find(
+      (eventDetail) =>
+        eventDetail.creator?.id === coach.id && new Date(eventDetail.start_time) < now,
+    )
+    const view = buildEventsView(scopeEvents(eventSummaryFixtures, coach), now, {
+      id: coach.id,
+      role: coach.role,
+      teamIds: userTeamIds(teamFixtures, coach.id),
+    })
+    const staleMissedFilterView = buildEventsView(
+      scopeEvents(eventSummaryFixtures, coach),
+      now,
+      {
+        id: coach.id,
+        role: coach.role,
+        teamIds: userTeamIds(teamFixtures, coach.id),
+      },
+      {
+        search: '',
+        status: 'missed',
+        fromDate: '',
+        toDate: '',
+        sort: 'date-asc',
+      },
+    )
+    const row = view.rows.find((eventRow) => eventRow.id === coachOwnedPastEvent?.id)
+
+    expect(coachOwnedPastEvent).toBeDefined()
+    expect(row?.status).toBe('past')
+    expect(
+      view.rows.every(
+        (eventRow) => eventRow.status !== 'attended' && eventRow.status !== 'missed',
+      ),
+    ).toBe(true)
+    expect(staleMissedFilterView.rows).toHaveLength(view.rows.length)
+  })
 })
diff --git a/web-client/src/features/sport-events/model/useEventsViewModel.ts b/web-client/src/features/sport-events/model/useEventsViewModel.ts
index ef5fd054..c6495896 100644
--- a/web-client/src/features/sport-events/model/useEventsViewModel.ts
+++ b/web-client/src/features/sport-events/model/useEventsViewModel.ts
@@ -10,9 +10,11 @@ import type { EventsFilters } from './eventsUiStore'
 import { useEventsUiStore } from './eventsUiStore'
 
 export type EventStatus = 'attended' | 'missed' | 'upcoming' | 'past'
+type TimelineEventStatus = Extract<EventStatus, 'upcoming' | 'past'>
 type AttendanceUser = Pick<AuthUser, 'id'> & {
   teamIds?: ReadonlySet<string>
 }
+type EventsViewUser = AttendanceUser & Pick<AuthUser, 'role'>
 
 export interface EventRow extends EventListItem {
   status: EventStatus
@@ -66,6 +68,20 @@ export function eventAttendanceStatus(
   return 'past'
 }
 
+function eventTimelineStatus(event: EventListItem | SportEvent, now: Date): TimelineEventStatus {
+  return new Date(event.start_time) >= now ? 'upcoming' : 'past'
+}
+
+export function eventStatusForRole(
+  event: EventListItem | SportEvent,
+  user: EventsViewUser,
+  now: Date,
+): EventStatus {
+  return user.role === 'member'
+    ? eventAttendanceStatus(event, user, now)
+    : eventTimelineStatus(event, now)
+}
+
 export function userTeamIds(teams: Team[], userId: string): ReadonlySet<string> {
   return new Set(
     teams
@@ -81,7 +97,7 @@ export function userTeamIds(teams: Team[], userId: string): ReadonlySet<string>
 export function buildEventsView(
   summaries: EventListItem[],
   now: Date,
-  user: AttendanceUser,
+  user: EventsViewUser,
   filters: EventsFilters = {
     search: '',
     status: 'all',
@@ -92,23 +108,27 @@ export function buildEventsView(
 ): EventsView {
   const weekEnd = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000)
   const rows = summaries.map((event) => {
-      const status = eventAttendanceStatus(event, user, now)
-
-      return {
-        ...event,
-        status,
-        formattedWhen: formatDateTime(event.start_time),
-        duration: formatDuration(event.start_time, event.end_time),
-      }
-    })
+    const status = eventStatusForRole(event, user, now)
+
+    return {
+      ...event,
+      status,
+      formattedWhen: formatDateTime(event.start_time),
+      duration: formatDuration(event.start_time, event.end_time),
+    }
+  })
   const search = filters.search.trim().toLocaleLowerCase()
+  const statusFilter =
+    user.role === 'member' || (filters.status !== 'attended' && filters.status !== 'missed')
+      ? filters.status
+      : 'all'
   const fromTime = filters.fromDate ? new Date(`${filters.fromDate}T00:00:00`).getTime() : null
   const toTime = filters.toDate ? new Date(`${filters.toDate}T23:59:59.999`).getTime() : null
   const filteredRows = rows
     .filter((event) => {
       const eventTime = new Date(event.start_time).getTime()
       const matchesText = search.length === 0 || event.name.toLocaleLowerCase().includes(search)
-      const matchesStatus = filters.status === 'all' || event.status === filters.status
+      const matchesStatus = statusFilter === 'all' || event.status === statusFilter
 
       return (
         matchesText &&
@@ -153,11 +173,17 @@ export function useEventsViewModel(now = new Date()) {
 
   const view = useMemo(
     () =>
-      buildEventsView(eventsQuery.data ?? [], new Date(nowTime), {
-        id: user.id,
-        teamIds: userTeamIds(teamsQuery.data ?? [], user.id),
-      }, filters),
-    [eventsQuery.data, nowTime, teamsQuery.data, user.id, filters],
+      buildEventsView(
+        eventsQuery.data ?? [],
+        new Date(nowTime),
+        {
+          id: user.id,
+          role: user.role,
+          teamIds: userTeamIds(teamsQuery.data ?? [], user.id),
+        },
+        filters,
+      ),
+    [eventsQuery.data, nowTime, teamsQuery.data, user.id, user.role, filters],
   )
 
   return {
@@ -174,10 +200,11 @@ export function useEventDetailView(id: string | null, now = new Date()): EventDe
   const sportsQuery = useSportsList()
   const detail = eventQuery.data
   const status = detail
-    ? eventAttendanceStatus(
+    ? eventStatusForRole(
         detail,
         {
           id: user.id,
+          role: user.role,
           teamIds: userTeamIds(teamsQuery.data ?? [], user.id),
         },
         now,
diff --git a/web-client/src/features/sport-events/pages/SportEventsPage.tsx b/web-client/src/features/sport-events/pages/SportEventsPage.tsx
index af09517f..a87aaa34 100644
--- a/web-client/src/features/sport-events/pages/SportEventsPage.tsx
+++ b/web-client/src/features/sport-events/pages/SportEventsPage.tsx
@@ -1,5 +1,16 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
+import { CalendarPlus, Pencil, Trash2 } from 'lucide-react'
 
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { DataTable, TCell, THead, TRow } from '@/components/ui/data-table'
@@ -23,8 +34,12 @@ import {
 import { Skeleton } from '@/components/ui/skeleton'
 import { StatCard } from '@/components/ui/stat-card'
 import { TableToolbar } from '@/components/ui/table-toolbar'
+import { useAuth } from '@/features/auth'
 import { formatDateShort, formatTime } from '@/lib/format'
+import { serverErrorMessage } from '@/lib/server-error'
 import { creatorName, memberRefName } from '@/types'
+import { useDeleteSportEvent } from '../api/queries'
+import { SportEventEditorDialog } from '../components/SportEventEditorDialog'
 import { useEventsUiStore } from '../model/eventsUiStore'
 import {
   type EventStatus,
@@ -47,6 +62,7 @@ const statusTone: Record<EventStatus, React.ComponentProps<typeof Badge>['tone']
 }
 
 export function SportEventsPage() {
+  const { user } = useAuth()
   const { view, isLoading, error } = useEventsViewModel()
   const filters = useEventsUiStore((state) => state.filters)
   const setSearch = useEventsUiStore((state) => state.setSearch)
@@ -57,18 +73,48 @@ export function SportEventsPage() {
   const openEventId = useEventsUiStore((state) => state.openEventId)
   const openEvent = useEventsUiStore((state) => state.open)
   const closeEvent = useEventsUiStore((state) => state.close)
+  const openCreate = useEventsUiStore((state) => state.openCreate)
+  const mutationNotice = useEventsUiStore((state) => state.mutationNotice)
   const detailView = useEventDetailView(openEventId)
+  const canCreateEvent = user.role === 'trainer' || user.role === 'director' || user.role === 'admin'
+  const showAttendanceStatusFilters = user.role === 'member'
 
   useEffect(() => resetFilters, [resetFilters])
 
+  useEffect(() => {
+    if (
+      !showAttendanceStatusFilters &&
+      (filters.status === 'attended' || filters.status === 'missed')
+    ) {
+      setStatus('all')
+    }
+  }, [filters.status, setStatus, showAttendanceStatusFilters])
+
   return (
     <div className="mx-auto flex w-full max-w-content flex-col gap-6">
       <PageHeader
         eyebrow="My Club"
         title="Events"
         subtitle="Training sessions and matches in your club calendar."
+        action={
+          canCreateEvent ? (
+            <Button onClick={openCreate}>
+              <CalendarPlus />
+              New event
+            </Button>
+          ) : undefined
+        }
       />
 
+      {mutationNotice && (
+        <p
+          role="status"
+          className="border border-primary/25 bg-primary/8 px-4 py-3 text-body-sm text-text-primary"
+        >
+          {mutationNotice}
+        </p>
+      )}
+
       <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
         <StatCard label="Upcoming" value={String(view.stats.upcoming)} meta="Scheduled ahead" />
         <StatCard label="This Week" value={String(view.stats.thisWeek)} meta="Next 7 days" />
@@ -99,9 +145,14 @@ export function SportEventsPage() {
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="all">All statuses</SelectItem>
-                <SelectItem value="attended">Attended</SelectItem>
-                <SelectItem value="missed">Missed</SelectItem>
+                {showAttendanceStatusFilters && (
+                  <>
+                    <SelectItem value="attended">Attended</SelectItem>
+                    <SelectItem value="missed">Missed</SelectItem>
+                  </>
+                )}
                 <SelectItem value="upcoming">Upcoming</SelectItem>
+                <SelectItem value="past">Past</SelectItem>
               </SelectContent>
             </Select>
 
@@ -175,12 +226,23 @@ export function SportEventsPage() {
           <EventDetailSheet detailView={detailView} />
         </SheetContent>
       </Sheet>
+
+      <SportEventEditorDialog />
     </div>
   )
 }
 
 function EventDetailSheet({ detailView }: { detailView: ReturnType<typeof useEventDetailView> }) {
   const { detail, isLoading, error, missed, sportNames } = detailView
+  const { user } = useAuth()
+  const openEdit = useEventsUiStore((state) => state.openEdit)
+  const closeEvent = useEventsUiStore((state) => state.close)
+  const deleteTargetId = useEventsUiStore((state) => state.deleteTargetId)
+  const openDeleteConfirm = useEventsUiStore((state) => state.openDeleteConfirm)
+  const closeDeleteConfirm = useEventsUiStore((state) => state.closeDeleteConfirm)
+  const setMutationNotice = useEventsUiStore((state) => state.setMutationNotice)
+  const deleteEvent = useDeleteSportEvent()
+  const [deleteError, setDeleteError] = useState<string | null>(null)
 
   if (isLoading) {
     return (
@@ -209,6 +271,22 @@ function EventDetailSheet({ detailView }: { detailView: ReturnType<typeof useEve
     )
   }
 
+  const canManage = user.role === 'admin' || detail.creator?.id === user.id
+  const confirmingDelete = deleteTargetId === detail.id
+
+  const handleDelete = async () => {
+    setDeleteError(null)
+
+    try {
+      await deleteEvent.mutateAsync(detail.id)
+      setMutationNotice('Event deleted.')
+      closeDeleteConfirm()
+      closeEvent()
+    } catch (deleteFailure) {
+      setDeleteError(serverErrorMessage(deleteFailure))
+    }
+  }
+
   return (
     <>
       <SheetHeader>
@@ -222,6 +300,48 @@ function EventDetailSheet({ detailView }: { detailView: ReturnType<typeof useEve
       </SheetHeader>
 
       <div className="space-y-6 px-4 py-2">
+        {canManage && (
+          <div className="flex flex-wrap gap-2">
+            <Button size="sm" variant="outline" onClick={() => openEdit(detail.id)}>
+              <Pencil />
+              Edit
+            </Button>
+            <Button
+              size="sm"
+              variant="destructive"
+              onClick={() => {
+                setDeleteError(null)
+                openDeleteConfirm(detail.id)
+              }}
+            >
+              <Trash2 />
+              Delete
+            </Button>
+          </div>
+        )}
+
+        {deleteError && <p className="text-body-sm text-destructive">{deleteError}</p>}
+
+        <AlertDialog
+          open={confirmingDelete}
+          onOpenChange={(open) => !open && closeDeleteConfirm()}
+        >
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Delete event</AlertDialogTitle>
+              <AlertDialogDescription>
+                Delete {detail.name} permanently? This cannot be undone.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel disabled={deleteEvent.isPending}>Cancel</AlertDialogCancel>
+              <AlertDialogAction disabled={deleteEvent.isPending} onClick={handleDelete}>
+                {deleteEvent.isPending ? 'Deleting' : 'Delete'}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
           <Field
             label="Start"

From 4a3bfa2ac158a4a9e33076c66edcf713fade32b2 Mon Sep 17 00:00:00 2001
From: FadyGergesRezk <84906847+FadyGergesRezk@users.noreply.github.com>
Date: Fri, 3 Jul 2026 06:06:58 +0200
Subject: [PATCH 04/11] fix: include trainer-coached teams in my teams

---
 .../model/useTeamsViewModel.test.ts           | 114 +++++++++++++++
 .../organization/model/useTeamsViewModel.ts   |  14 +-
 .../organization/pages/OrganizationPage.tsx   | 134 +++++++++++++-----
 3 files changed, 224 insertions(+), 38 deletions(-)
 create mode 100644 web-client/src/features/organization/model/useTeamsViewModel.test.ts

diff --git a/web-client/src/features/organization/model/useTeamsViewModel.test.ts b/web-client/src/features/organization/model/useTeamsViewModel.test.ts
new file mode 100644
index 00000000..e4328fc1
--- /dev/null
+++ b/web-client/src/features/organization/model/useTeamsViewModel.test.ts
@@ -0,0 +1,114 @@
+import { describe, expect, it } from 'vitest'
+
+import type { AuthUser, MemberRef, Sport, Team } from '@/types'
+import { buildTeamsView } from './useTeamsViewModel'
+
+const football: Sport = {
+  id: 'sport-1',
+  name: 'Football',
+  description: 'Football squads.',
+  created_at: '2026-01-01',
+  directors: [],
+}
+
+function ref(id: string, name: string): MemberRef {
+  return { id, name }
+}
+
+function user(member: MemberRef, role: AuthUser['role']): AuthUser {
+  return {
+    id: member.id,
+    name: member.name,
+    email: `${member.id}@club.test`,
+    role,
+  }
+}
+
+function team({
+  id,
+  name,
+  trainers = [],
+  trainees = [],
+}: {
+  id: string
+  name: string
+  trainers?: MemberRef[]
+  trainees?: MemberRef[]
+}): Team {
+  return {
+    id,
+    name,
+    description: `${name} squad.`,
+    created_at: '2026-01-01',
+    address: 'Club grounds',
+    sport: { id: football.id, name: football.name },
+    trainers,
+    trainees,
+  }
+}
+
+describe('buildTeamsView', () => {
+  it('includes teams where the current user is only a trainer', () => {
+    const coach = ref('coach-1', 'Coach One')
+    const trainee = ref('trainee-1', 'Trainee One')
+    const coachedTeam = team({
+      id: 'team-coached',
+      name: 'Coached Team',
+      trainers: [coach],
+      trainees: [trainee],
+    })
+    const unrelatedTeam = team({
+      id: 'team-unrelated',
+      name: 'Unrelated Team',
+      trainers: [ref('coach-2', 'Coach Two')],
+      trainees: [trainee],
+    })
+
+    const view = buildTeamsView([football], [coachedTeam, unrelatedTeam], user(coach, 'trainer'))
+
+    expect(view.myTeams.map((entry) => ({ id: entry.id, sportName: entry.sportName }))).toEqual([
+      { id: 'team-coached', sportName: 'Football' },
+    ])
+    expect(view.stats.myTeams).toBe(1)
+    expect(view.stats.mySports).toBe(1)
+  })
+
+  it('keeps trainee-only membership in my teams', () => {
+    const coach = ref('coach-1', 'Coach One')
+    const member = ref('member-1', 'Member One')
+    const traineeTeam = team({
+      id: 'team-trainee',
+      name: 'Trainee Team',
+      trainers: [coach],
+      trainees: [member],
+    })
+    const coachedOnlyTeam = team({
+      id: 'team-coached-only',
+      name: 'Coached Only Team',
+      trainers: [coach],
+      trainees: [],
+    })
+
+    const view = buildTeamsView([football], [traineeTeam, coachedOnlyTeam], user(member, 'member'))
+
+    expect(view.myTeams.map((entry) => entry.id)).toEqual(['team-trainee'])
+    expect(view.stats.myTeams).toBe(1)
+    expect(view.stats.mySports).toBe(1)
+  })
+
+  it('does not duplicate a team when the current user is both trainer and trainee', () => {
+    const dualMember = ref('dual-1', 'Dual Member')
+    const dualRoleTeam = team({
+      id: 'team-dual-role',
+      name: 'Dual Role Team',
+      trainers: [dualMember],
+      trainees: [dualMember],
+    })
+
+    const view = buildTeamsView([football], [dualRoleTeam], user(dualMember, 'trainer'))
+
+    expect(view.myTeams.map((entry) => entry.id)).toEqual(['team-dual-role'])
+    expect(view.stats.myTeams).toBe(1)
+    expect(view.stats.mySports).toBe(1)
+  })
+})
diff --git a/web-client/src/features/organization/model/useTeamsViewModel.ts b/web-client/src/features/organization/model/useTeamsViewModel.ts
index facc2708..f8b8234e 100644
--- a/web-client/src/features/organization/model/useTeamsViewModel.ts
+++ b/web-client/src/features/organization/model/useTeamsViewModel.ts
@@ -1,7 +1,7 @@
 import { useMemo } from 'react'
 
 import { useAuth } from '@/features/auth'
-import type { MemberRef, Sport, Team } from '@/types'
+import type { AuthUser, MemberRef, Sport, Team } from '@/types'
 import { useSportsList, useTeamsList } from '../api/queries'
 
 export interface TeamView {
@@ -34,7 +34,7 @@ export interface TeamsView {
 export function buildTeamsView(
   sports: Sport[],
   teams: Team[],
-  currentUserId: string,
+  user: AuthUser,
 ): TeamsView {
   const teamsBySportId = new Map<string, TeamView[]>()
 
@@ -65,7 +65,11 @@ export function buildTeamsView(
 
   const myTeams = joinedSports.flatMap((sport) =>
     sport.teams
-      .filter((team) => team.trainees.some((trainee) => trainee.id === currentUserId))
+      .filter(
+        (team) =>
+          team.trainees.some((trainee) => trainee.id === user.id) ||
+          team.trainers.some((trainer) => trainer.id === user.id),
+      )
       .map((team) => ({ ...team, sportName: sport.name })),
   )
 
@@ -87,8 +91,8 @@ export function useTeamsViewModel() {
   const teamsQuery = useTeamsList()
 
   const view = useMemo(
-    () => buildTeamsView(sportsQuery.data ?? [], teamsQuery.data ?? [], user.id),
-    [sportsQuery.data, teamsQuery.data, user.id],
+    () => buildTeamsView(sportsQuery.data ?? [], teamsQuery.data ?? [], user),
+    [sportsQuery.data, teamsQuery.data, user],
   )
 
   return {
diff --git a/web-client/src/features/organization/pages/OrganizationPage.tsx b/web-client/src/features/organization/pages/OrganizationPage.tsx
index 9def49cc..fc688ad3 100644
--- a/web-client/src/features/organization/pages/OrganizationPage.tsx
+++ b/web-client/src/features/organization/pages/OrganizationPage.tsx
@@ -63,7 +63,7 @@ export function OrganizationPage() {
                     key={team.id}
                     team={team}
                     sportName={team.sportName}
-                    isMine
+                    currentUserId={currentUserId}
                     onOpen={() => setRosterTeamId(team.id)}
                   />
                 ))}
@@ -128,7 +128,7 @@ function StatsRow({
         label="My Teams"
         value={String(view.stats.myTeams)}
         tone={view.stats.myTeams > 0 ? 'positive' : 'default'}
-        meta="You're a member"
+        meta="Teams you're part of"
       />
       <StatCard label="Sports" value={String(view.stats.sports)} meta="Offered by the club" />
       <StatCard label="Teams Total" value={String(view.stats.teams)} meta="Across all sports" />
@@ -194,27 +194,41 @@ function SportSection({
               No teams in this sport yet.
             </li>
           ) : (
-            sport.teams.map((team) => (
-              <li key={team.id} className="border-b last:border-b-0">
-                <button
-                  type="button"
-                  onClick={() => onOpenTeam(team.id)}
-                  className="flex w-full items-center gap-3 py-2.5 pl-11 pr-4 text-left transition-colors hover:bg-surface-sunken"
-                >
-                  <div className="min-w-0 flex-1">
-                    <p className="text-body-sm font-medium text-text-primary">{team.name}</p>
-                    <p className="truncate text-caption text-text-tertiary">
-                      Coach {nameList(team.trainers)} - {team.trainees.length} members
-                    </p>
-                  </div>
-                  {team.trainees.some((member) => member.id === currentUserId) && (
-                    <Badge tone="positive" size="sm">
-                      Trainee
-                    </Badge>
-                  )}
-                </button>
-              </li>
-            ))
+            sport.teams.map((team) => {
+              const isCoach = isTeamCoach(team, currentUserId)
+              const isTrainee = isTeamTrainee(team, currentUserId)
+
+              return (
+                <li key={team.id} className="border-b last:border-b-0">
+                  <button
+                    type="button"
+                    onClick={() => onOpenTeam(team.id)}
+                    className="flex w-full items-center gap-3 py-2.5 pl-11 pr-4 text-left transition-colors hover:bg-surface-sunken"
+                  >
+                    <div className="min-w-0 flex-1">
+                      <p className="text-body-sm font-medium text-text-primary">{team.name}</p>
+                      <p className="truncate text-caption text-text-tertiary">
+                        Coach {nameList(team.trainers)} - {team.trainees.length} members
+                      </p>
+                    </div>
+                    {(isCoach || isTrainee) && (
+                      <div className="flex shrink-0 items-center gap-1.5">
+                        {isCoach && (
+                          <Badge tone="accent" size="sm">
+                            Coach
+                          </Badge>
+                        )}
+                        {isTrainee && (
+                          <Badge tone="positive" size="sm">
+                            Trainee
+                          </Badge>
+                        )}
+                      </div>
+                    )}
+                  </button>
+                </li>
+              )
+            })
           )}
         </ul>
       )}
@@ -225,14 +239,17 @@ function SportSection({
 function TeamSummaryCard({
   team,
   sportName,
-  isMine,
+  currentUserId,
   onOpen,
 }: {
   team: TeamView
   sportName: string
-  isMine: boolean
+  currentUserId: string
   onOpen: () => void
 }) {
+  const isCoach = isTeamCoach(team, currentUserId)
+  const isTrainee = isTeamTrainee(team, currentUserId)
+
   return (
     <button
       type="button"
@@ -240,14 +257,23 @@ function TeamSummaryCard({
       className="border border-primary/30 bg-primary/4 p-4 text-left transition-colors hover:bg-primary/8"
     >
       <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0">
+        <div className="min-w-0 flex-1">
           <p className="text-caption uppercase tracking-[0.1em] text-primary">{sportName}</p>
           <h3 className="mt-0.5 truncate text-h4">{team.name}</h3>
         </div>
-        {isMine && (
-          <Badge tone="positive" size="sm">
-            Trainee
-          </Badge>
+        {(isCoach || isTrainee) && (
+          <div className="flex shrink-0 items-center gap-1.5">
+            {isCoach && (
+              <Badge tone="accent" size="sm">
+                Coach
+              </Badge>
+            )}
+            {isTrainee && (
+              <Badge tone="positive" size="sm">
+                Trainee
+              </Badge>
+            )}
+          </div>
         )}
       </div>
       <p className="mt-2 text-caption text-text-tertiary">
@@ -257,6 +283,14 @@ function TeamSummaryCard({
   )
 }
 
+function isTeamCoach(team: TeamView, currentUserId: string) {
+  return team.trainers.some((member) => member.id === currentUserId)
+}
+
+function isTeamTrainee(team: TeamView, currentUserId: string) {
+  return team.trainees.some((member) => member.id === currentUserId)
+}
+
 function RosterSheet({
   team,
   currentUserId,
@@ -276,7 +310,7 @@ function RosterSheet({
         <SheetDescription>{team.description}</SheetDescription>
       </SheetHeader>
 
-      <div className="space-y-6 px-4 py-2">
+      <div className="flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto px-4 py-2">
         <div>
           <FieldLabel>Address</FieldLabel>
           <p className="mt-0.5 text-body-sm">{team.address}</p>
@@ -290,14 +324,48 @@ function RosterSheet({
         <Separator />
 
         <div>
-          <FieldLabel>Roster ({team.trainees.length})</FieldLabel>
-          <MemberBadges members={team.trainees} currentUserId={currentUserId} />
+          <FieldLabel>Members ({team.trainees.length})</FieldLabel>
+          <RosterMembers members={team.trainees} currentUserId={currentUserId} />
         </div>
       </div>
     </>
   )
 }
 
+function RosterMembers({
+  members,
+  currentUserId,
+}: {
+  members: Parameters<typeof memberRefName>[0][]
+  currentUserId: string
+}) {
+  if (members.length === 0) {
+    return <p className="mt-2 text-body-sm text-text-tertiary">No members yet.</p>
+  }
+
+  return (
+    <ul className="mt-2 divide-y border bg-card">
+      {members.map((member) => {
+        const name = memberRefName(member)
+        const isCurrentUser = member.id === currentUserId
+
+        return (
+          <li key={member.id} className="flex items-center justify-between gap-3 px-3 py-2">
+            <div className="min-w-0">
+              <p className="truncate text-body-sm font-medium text-text-primary">{name}</p>
+              {isCurrentUser && (
+                <Badge tone="positive" size="sm" className="mt-1">
+                  You
+                </Badge>
+              )}
+            </div>
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+
 function MemberBadges({
   members,
   currentUserId,

From c5051417c94aa3bddac14b6dfa385b27a833f8c6 Mon Sep 17 00:00:00 2001
From: FadyGergesRezk <84906847+FadyGergesRezk@users.noreply.github.com>
Date: Fri, 3 Jul 2026 06:07:21 +0200
Subject: [PATCH 05/11] fix: scope member filter options to the viewer's teams

---
 .../members/model/useMembersViewModel.test.ts | 176 ++++++++++++++++++
 .../members/model/useMembersViewModel.ts      |  38 +++-
 .../features/members/pages/MembersPage.tsx    |  50 +++--
 3 files changed, 248 insertions(+), 16 deletions(-)
 create mode 100644 web-client/src/features/members/model/useMembersViewModel.test.ts

diff --git a/web-client/src/features/members/model/useMembersViewModel.test.ts b/web-client/src/features/members/model/useMembersViewModel.test.ts
new file mode 100644
index 00000000..3981f1f2
--- /dev/null
+++ b/web-client/src/features/members/model/useMembersViewModel.test.ts
@@ -0,0 +1,176 @@
+import { describe, expect, it } from 'vitest'
+
+import type { AuthUser, MemberRef, MemberSummary, Sport, Team } from '@/types'
+import { buildMembersView } from './useMembersViewModel'
+import type { MembersFilters } from './membersUiStore'
+
+const football: Sport = {
+  id: 'sport-football',
+  name: 'Football',
+  description: 'Football squads.',
+  created_at: '2026-01-01',
+  directors: [],
+}
+
+const basketball: Sport = {
+  id: 'sport-basketball',
+  name: 'Basketball',
+  description: 'Basketball squads.',
+  created_at: '2026-01-01',
+  directors: [],
+}
+
+const noFilters: MembersFilters = { search: '', teamId: 'all', sport: 'all' }
+
+function ref(id: string, name: string): MemberRef {
+  return { id, name }
+}
+
+function member(id: string, firstName: string, lastName: string): MemberSummary {
+  return { id, first_name: firstName, last_name: lastName, email: `${id}@club.test` }
+}
+
+function user(id: string, name: string, role: AuthUser['role']): AuthUser {
+  return { id, name, email: `${id}@club.test`, role }
+}
+
+function team({
+  id,
+  name,
+  sport,
+  trainers = [],
+  trainees = [],
+}: {
+  id: string
+  name: string
+  sport: Sport
+  trainers?: MemberRef[]
+  trainees?: MemberRef[]
+}): Team {
+  return {
+    id,
+    name,
+    description: `${name} squad.`,
+    created_at: '2026-01-01',
+    address: 'Club grounds',
+    sport: { id: sport.id, name: sport.name },
+    trainers,
+    trainees,
+  }
+}
+
+describe('buildMembersView', () => {
+  it('scopes a trainer persona filter options to their own team/sport', () => {
+    const coach = ref('coach-1', 'Coach One')
+    const trainee = ref('trainee-1', 'Trainee One')
+    const otherTrainee = ref('trainee-2', 'Trainee Two')
+
+    const coachedTeam = team({
+      id: 'team-coached',
+      name: 'Coached Team',
+      sport: football,
+      trainers: [coach],
+      trainees: [trainee],
+    })
+    const unrelatedTeam = team({
+      id: 'team-unrelated',
+      name: 'Unrelated Team',
+      sport: basketball,
+      trainers: [ref('coach-2', 'Coach Two')],
+      trainees: [otherTrainee],
+    })
+
+    // mock scoping (scopeMembers) already narrows this to the trainer's own trainees before
+    // buildMembersView ever sees it — mirror that here rather than passing the whole club.
+    const scopedMembers = [member(trainee.id, 'Trainee', 'One')]
+
+    const view = buildMembersView(
+      scopedMembers,
+      [coachedTeam, unrelatedTeam],
+      noFilters,
+      user(coach.id, coach.name, 'trainer'),
+    )
+
+    expect(view.teamOptions).toEqual([{ value: 'team-coached', label: 'Coached Team' }])
+    expect(view.sportOptions).toEqual([{ value: 'Football', label: 'Football' }])
+  })
+
+  it('scopes a director persona filter options to their own sport', () => {
+    const director = ref('director-1', 'Director One')
+    const footballTrainee = ref('trainee-1', 'Trainee One')
+    const otherFootballTrainee = ref('trainee-2', 'Trainee Two')
+    const basketballTrainee = ref('trainee-3', 'Trainee Three')
+
+    const footballTeamA = team({
+      id: 'team-football-a',
+      name: 'Football A',
+      sport: football,
+      trainees: [footballTrainee],
+    })
+    const footballTeamB = team({
+      id: 'team-football-b',
+      name: 'Football B',
+      sport: football,
+      trainees: [otherFootballTrainee],
+    })
+    const basketballTeam = team({
+      id: 'team-basketball',
+      name: 'Basketball A',
+      sport: basketball,
+      trainees: [basketballTrainee],
+    })
+
+    // director's sport scope (mock scopeMembers) limits rows to members of their sport's teams.
+    const scopedMembers = [
+      member(footballTrainee.id, 'Trainee', 'One'),
+      member(otherFootballTrainee.id, 'Trainee', 'Two'),
+    ]
+
+    const view = buildMembersView(
+      scopedMembers,
+      [footballTeamA, footballTeamB, basketballTeam],
+      noFilters,
+      user(director.id, director.name, 'director'),
+    )
+
+    expect(view.teamOptions.map((option) => option.value).toSorted()).toEqual([
+      'team-football-a',
+      'team-football-b',
+    ])
+    expect(view.sportOptions).toEqual([{ value: 'Football', label: 'Football' }])
+  })
+
+  it('keeps the full club in scope for an admin persona', () => {
+    const admin = ref('admin-1', 'Admin One')
+    const footballTeam = team({
+      id: 'team-football',
+      name: 'Football A',
+      sport: football,
+      trainees: [ref('trainee-1', 'Trainee One')],
+    })
+    const basketballTeam = team({
+      id: 'team-basketball',
+      name: 'Basketball A',
+      sport: basketball,
+      trainees: [ref('trainee-2', 'Trainee Two')],
+    })
+
+    const allMembers = [member('trainee-1', 'Trainee', 'One'), member('trainee-2', 'Trainee', 'Two')]
+
+    const view = buildMembersView(
+      allMembers,
+      [footballTeam, basketballTeam],
+      noFilters,
+      user(admin.id, admin.name, 'admin'),
+    )
+
+    expect(view.teamOptions.map((option) => option.value).toSorted()).toEqual([
+      'team-basketball',
+      'team-football',
+    ])
+    expect(view.sportOptions.map((option) => option.value).toSorted()).toEqual([
+      'Basketball',
+      'Football',
+    ])
+  })
+})
diff --git a/web-client/src/features/members/model/useMembersViewModel.ts b/web-client/src/features/members/model/useMembersViewModel.ts
index e6067997..a318613d 100644
--- a/web-client/src/features/members/model/useMembersViewModel.ts
+++ b/web-client/src/features/members/model/useMembersViewModel.ts
@@ -1,7 +1,8 @@
 import { useMemo } from 'react'
 
+import { useAuth } from '@/features/auth'
 import { useTeamsList } from '@/features/organization/api/queries'
-import { type MemberSummary, type Team } from '@/types'
+import { type AuthUser, type MemberSummary, type Team } from '@/types'
 import { useMembers } from '../api/queries'
 import type { MembersFilters } from './membersUiStore'
 import { useMembersUiStore } from './membersUiStore'
@@ -18,6 +19,7 @@ export interface MemberRow {
 export interface MembersView {
   rows: MemberRow[]
   totalRows: number
+  composableMemberIds: Set<string>
   teamOptions: { value: string; label: string }[]
   sportOptions: { value: string; label: string }[]
 }
@@ -67,12 +69,18 @@ export function buildMembersView(
   members: MemberSummary[],
   teams: Team[],
   filters: MembersFilters,
+  user: AuthUser,
 ): MembersView {
   const rows = memberTeamRows(members, teams).toSorted((a, b) => a.name.localeCompare(b.name))
+  const composableMemberIds = buildComposableMemberIds(members, teams, user)
+
+  const scopedTeamIds = new Set(rows.flatMap((row) => row.teamIds))
   const teamOptions = teams
+    .filter((team) => scopedTeamIds.has(team.id))
     .map((team) => ({ value: team.id, label: team.name }))
     .toSorted((a, b) => a.label.localeCompare(b.label))
-  const sportOptions = Array.from(new Set(teams.map((team) => team.sport.name)), (sport) => ({
+  const scopedSports = new Set(rows.flatMap((row) => row.sports))
+  const sportOptions = Array.from(scopedSports, (sport) => ({
     value: sport,
     label: sport,
   })).toSorted((a, b) => a.label.localeCompare(b.label))
@@ -80,19 +88,41 @@ export function buildMembersView(
   return {
     rows: filterMemberRows(rows, filters),
     totalRows: rows.length,
+    composableMemberIds,
     teamOptions,
     sportOptions,
   }
 }
 
+export function buildComposableMemberIds(
+  members: MemberSummary[],
+  teams: Team[],
+  user: AuthUser,
+): Set<string> {
+  if (user.role === 'admin') {
+    return new Set(members.map((member) => member.id))
+  }
+
+  if (user.role !== 'trainer') {
+    return new Set()
+  }
+
+  return new Set(
+    teams
+      .filter((team) => team.trainers.some((trainer) => trainer.id === user.id))
+      .flatMap((team) => team.trainees.map((trainee) => trainee.id)),
+  )
+}
+
 export function useMembersViewModel() {
+  const { user } = useAuth()
   const membersQuery = useMembers()
   const teamsQuery = useTeamsList()
   const filters = useMembersUiStore((state) => state.filters)
 
   const view = useMemo(
-    () => buildMembersView(membersQuery.data ?? [], teamsQuery.data ?? [], filters),
-    [filters, membersQuery.data, teamsQuery.data],
+    () => buildMembersView(membersQuery.data ?? [], teamsQuery.data ?? [], filters, user),
+    [filters, membersQuery.data, teamsQuery.data, user],
   )
 
   return {
diff --git a/web-client/src/features/members/pages/MembersPage.tsx b/web-client/src/features/members/pages/MembersPage.tsx
index d3c51aec..a655d891 100644
--- a/web-client/src/features/members/pages/MembersPage.tsx
+++ b/web-client/src/features/members/pages/MembersPage.tsx
@@ -1,6 +1,7 @@
 import { useEffect } from 'react'
 
 import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
 import { DataTable, TCell, THead, TRow } from '@/components/ui/data-table'
 import { PageHeader } from '@/components/ui/page-header'
 import {
@@ -12,11 +13,14 @@ import {
 } from '@/components/ui/select'
 import { Skeleton } from '@/components/ui/skeleton'
 import { TableToolbar } from '@/components/ui/table-toolbar'
+import { FeedbackComposeDialog, FeedbackComposeNotice } from '@/features/feedback'
+import { useFeedbackUiStore } from '@/features/feedback/model/feedbackUiStore'
 import { useMembersUiStore } from '../model/membersUiStore'
 import { useMembersViewModel } from '../model/useMembersViewModel'
 
 export function MembersPage() {
   const { view, isLoading, error } = useMembersViewModel()
+  const openCompose = useFeedbackUiStore((state) => state.openCompose)
   const filters = useMembersUiStore((state) => state.filters)
   const setSearch = useMembersUiStore((state) => state.setSearch)
   const setTeamId = useMembersUiStore((state) => state.setTeamId)
@@ -33,6 +37,8 @@ export function MembersPage() {
         subtitle="People in your visible teams and sports."
       />
 
+      <FeedbackComposeNotice />
+
       {isLoading ? (
         <MembersTableSkeleton />
       ) : error ? (
@@ -92,26 +98,46 @@ export function MembersPage() {
                   <THead>Email</THead>
                   <THead>Teams</THead>
                   <THead>Sports</THead>
+                  {view.composableMemberIds.size > 0 && <THead className="text-right" />}
                 </tr>
               </thead>
               <tbody>
-                {view.rows.map((member) => (
-                  <TRow key={member.id}>
-                    <TCell className="font-medium">{member.name}</TCell>
-                    <TCell className="text-text-secondary">{member.email}</TCell>
-                    <TCell>
-                      <FacetBadges values={member.teamNames} emptyLabel="No team" />
-                    </TCell>
-                    <TCell>
-                      <FacetBadges values={member.sports} emptyLabel="No sport" />
-                    </TCell>
-                  </TRow>
-                ))}
+                {view.rows.map((member) => {
+                  const canGiveFeedback = view.composableMemberIds.has(member.id)
+
+                  return (
+                    <TRow key={member.id}>
+                      <TCell className="font-medium">{member.name}</TCell>
+                      <TCell className="text-text-secondary">{member.email}</TCell>
+                      <TCell>
+                        <FacetBadges values={member.teamNames} emptyLabel="No team" />
+                      </TCell>
+                      <TCell>
+                        <FacetBadges values={member.sports} emptyLabel="No sport" />
+                      </TCell>
+                      {view.composableMemberIds.size > 0 && (
+                        <TCell className="text-right">
+                          {canGiveFeedback && (
+                            <Button
+                              variant="link"
+                              className="h-auto p-0"
+                              onClick={() => openCompose({ id: member.id, name: member.name })}
+                            >
+                              Give feedback
+                            </Button>
+                          )}
+                        </TCell>
+                      )}
+                    </TRow>
+                  )
+                })}
               </tbody>
             </DataTable>
           )}
         </>
       )}
+
+      <FeedbackComposeDialog />
     </div>
   )
 }

From e0b387feef3e61026ceb7661474af33d73347ea2 Mon Sep 17 00:00:00 2001
From: FadyGergesRezk <84906847+FadyGergesRezk@users.noreply.github.com>
Date: Fri, 3 Jul 2026 06:07:42 +0200
Subject: [PATCH 06/11] feat: add coach feedback compose, coverage tracking,
 and mock persistence

---
 .../src/features/feedback/api/queries.ts      | 131 +++++-
 .../components/FeedbackComposeDialog.tsx      | 213 +++++++++
 web-client/src/features/feedback/index.ts     |   1 +
 .../feedback/model/feedbackUiStore.ts         |  16 +
 .../model/useFeedbackViewModel.test.ts        | 258 +++++++++++
 .../feedback/model/useFeedbackViewModel.ts    | 167 +++++++-
 .../features/feedback/pages/FeedbackPage.tsx  | 405 ++++++++++++++++--
 7 files changed, 1153 insertions(+), 38 deletions(-)
 create mode 100644 web-client/src/features/feedback/components/FeedbackComposeDialog.tsx
 create mode 100644 web-client/src/features/feedback/model/useFeedbackViewModel.test.ts

diff --git a/web-client/src/features/feedback/api/queries.ts b/web-client/src/features/feedback/api/queries.ts
index fcbe1ad6..4875c444 100644
--- a/web-client/src/features/feedback/api/queries.ts
+++ b/web-client/src/features/feedback/api/queries.ts
@@ -1,9 +1,17 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 
 import { getCurrentUser } from '@/features/auth/currentUser'
-import { feedbackDetailsById, feedbackSummaryFixtures } from '@/mocks/fixtures'
+import {
+  eventDetailsById,
+  eventSummaryFixtures,
+  feedbackDetailsById,
+  feedbackSummaryFixtures,
+  memberNamesById,
+  teamFixtures,
+} from '@/mocks/fixtures'
 import { mockOr } from '@/mocks/mockSwitch'
 import { scopeFeedback } from '@/mocks/scope'
+import type { AuthUser, Reference } from '@/types'
 import { feedbackClient } from './client'
 import type { Feedback, FeedbackCreate, FeedbackPartialUpdate, FeedbackSummary } from '../types'
 
@@ -13,6 +21,32 @@ export const feedbackKeys = {
   hello: ['feedback', 'hello'] as const,
 }
 
+// Mutable mock state (mirrors sport-events' pattern) so create/delete are visible in the demo
+// instead of always re-reading the frozen fixture arrays.
+const mockFeedbackDetailsById: Record<string, Feedback> = { ...feedbackDetailsById }
+let mockFeedbackSummaryRows: FeedbackSummary[] = [...feedbackSummaryFixtures]
+
+function feedbackSummary(feedback: Feedback): FeedbackSummary {
+  const { id, event, member, creator, created_at, rating } = feedback
+  return { id, event, member, creator, created_at, rating }
+}
+
+function upsertMockFeedback(feedback: Feedback): void {
+  mockFeedbackDetailsById[feedback.id] = feedback
+
+  const summary = feedbackSummary(feedback)
+  const index = mockFeedbackSummaryRows.findIndex((row) => row.id === feedback.id)
+
+  if (index === -1) {
+    mockFeedbackSummaryRows = [summary, ...mockFeedbackSummaryRows]
+    return
+  }
+
+  mockFeedbackSummaryRows = mockFeedbackSummaryRows.map((row) =>
+    row.id === feedback.id ? summary : row,
+  )
+}
+
 export function useFeedbackHello() {
   return useQuery<string>({
     queryKey: feedbackKeys.hello,
@@ -27,7 +61,7 @@ export function useFeedbackList(enabled = true) {
     enabled,
     queryFn: () =>
       mockOr(
-        () => Promise.resolve(scopeFeedback(feedbackSummaryFixtures, getCurrentUser())),
+        () => Promise.resolve(scopeFeedback(mockFeedbackSummaryRows, getCurrentUser())),
         () => feedbackClient.get<FeedbackSummary[]>('').then(r => r.data),
       ),
   })
@@ -40,7 +74,7 @@ export function useFeedback(id: string) {
     queryFn: () =>
       mockOr(
         () => {
-          const found = feedbackDetailsById[id]
+          const found = mockFeedbackDetailsById[id]
           const scoped = found ? scopeFeedback([found], getCurrentUser()) : []
           if (!scoped[0]) throw new Error('Feedback not found')
           return Promise.resolve(scoped[0])
@@ -51,11 +85,91 @@ export function useFeedback(id: string) {
   })
 }
 
+function mockFeedbackError(message: string): Error {
+  return new Error(message)
+}
+
+function isFeedbackRating(rating: number): boolean {
+  return Number.isInteger(rating) && rating >= 0 && rating <= 10
+}
+
+function memberRef(memberId: string): Reference | null {
+  const name = memberNamesById[memberId]
+  return name ? { id: memberId, name } : null
+}
+
+function eventRef(eventId: string): Reference | null {
+  const event = eventDetailsById[eventId] ?? eventSummaryFixtures.find((row) => row.id === eventId)
+  return event ? { id: event.id, name: event.name } : null
+}
+
+function trainsMember(userId: string, memberId: string): boolean {
+  return teamFixtures.some(
+    (team) =>
+      team.trainers.some((trainer) => trainer.id === userId) &&
+      team.trainees.some((trainee) => trainee.id === memberId),
+  )
+}
+
+function canCreateFeedback(user: AuthUser, memberId: string): boolean {
+  return user.role === 'admin' || (user.role === 'trainer' && trainsMember(user.id, memberId))
+}
+
+function mockFeedbackId(): string {
+  return globalThis.crypto?.randomUUID?.() ?? `ffffffff-ffff-4fff-8fff-${Date.now().toString(16).padStart(12, '0').slice(-12)}`
+}
+
+function mockCreateFeedback(data: FeedbackCreate): Feedback {
+  const user = getCurrentUser()
+  const event = eventRef(data.event)
+  const member = memberRef(data.member)
+
+  if (!event) throw mockFeedbackError('Event not found')
+  if (!member) throw mockFeedbackError('Member not found')
+  if (!data.feedback.trim()) throw mockFeedbackError('Feedback is required')
+  if (!isFeedbackRating(data.rating)) {
+    throw mockFeedbackError('Rating must be an integer between 0 and 10')
+  }
+  if (!canCreateFeedback(user, data.member)) {
+    throw mockFeedbackError('You are not allowed to create feedback for this member')
+  }
+
+  const created: Feedback = {
+    id: mockFeedbackId(),
+    event,
+    member,
+    creator: { id: user.id, name: user.name },
+    created_at: new Date().toISOString(),
+    feedback: data.feedback,
+    rating: data.rating,
+  }
+
+  upsertMockFeedback(created)
+  return created
+}
+
+function mockDeleteFeedback(id: string): void {
+  const user = getCurrentUser()
+  const existing = mockFeedbackDetailsById[id] ?? mockFeedbackSummaryRows.find((row) => row.id === id)
+
+  if (!existing) throw mockFeedbackError('Feedback not found')
+  if (user.role !== 'admin' && existing.creator?.id !== user.id) {
+    throw mockFeedbackError('You are not allowed to delete this feedback')
+  }
+
+  delete mockFeedbackDetailsById[id]
+  mockFeedbackSummaryRows = mockFeedbackSummaryRows.filter((row) => row.id !== id)
+}
+
 export function useCreateFeedback() {
   const qc = useQueryClient()
 
   return useMutation<Feedback, Error, FeedbackCreate>({
-    mutationFn: data => feedbackClient.post<Feedback>('', data).then(r => r.data),
+    mutationFn: data =>
+      mockOr(
+        () => Promise.resolve(mockCreateFeedback(data)),
+        () => feedbackClient.post<Feedback>('', data).then(r => r.data),
+      ),
     onSuccess: () => qc.invalidateQueries({ queryKey: feedbackKeys.all }),
   })
 }
@@ -76,7 +190,14 @@ export function useDeleteFeedback() {
   const qc = useQueryClient()
 
   return useMutation<void, Error, string>({
-    mutationFn: id => feedbackClient.delete(`/${id}`).then(() => undefined),
+    mutationFn: id =>
+      mockOr(
+        () => {
+          mockDeleteFeedback(id)
+          return Promise.resolve(undefined)
+        },
+        () => feedbackClient.delete(`/${id}`).then(() => undefined),
+      ),
     onSuccess: (_, id) => {
       qc.invalidateQueries({ queryKey: feedbackKeys.all })
       qc.removeQueries({ queryKey: feedbackKeys.detail(id) })
diff --git a/web-client/src/features/feedback/components/FeedbackComposeDialog.tsx b/web-client/src/features/feedback/components/FeedbackComposeDialog.tsx
new file mode 100644
index 00000000..d55d9a1e
--- /dev/null
+++ b/web-client/src/features/feedback/components/FeedbackComposeDialog.tsx
@@ -0,0 +1,213 @@
+import { type FormEvent, useMemo, useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Textarea } from '@/components/ui/textarea'
+import { useEventsList } from '@/features/sport-events'
+import { formatDateShort } from '@/lib/format'
+import { serverErrorMessage } from '@/lib/server-error'
+import { useCreateFeedback } from '../api/queries'
+import {
+  type FeedbackComposeTarget,
+  useFeedbackUiStore,
+} from '../model/feedbackUiStore'
+
+function validateRating(value: string): number | null {
+  if (value.trim() === '') return null
+
+  const rating = Number(value)
+  return Number.isInteger(rating) && rating >= 0 && rating <= 10 ? rating : null
+}
+
+export function FeedbackComposeDialog() {
+  const target = useFeedbackUiStore((state) => state.composeTarget)
+  const closeCompose = useFeedbackUiStore((state) => state.closeCompose)
+
+  return (
+    <Dialog open={target !== null} onOpenChange={(open) => !open && closeCompose()}>
+      {target && <FeedbackComposeForm key={`${target.id}:${target.eventId ?? ''}`} target={target} />}
+    </Dialog>
+  )
+}
+
+function FeedbackComposeForm({ target }: { target: FeedbackComposeTarget }) {
+  const closeCompose = useFeedbackUiStore((state) => state.closeCompose)
+  const setComposeNotice = useFeedbackUiStore((state) => state.setComposeNotice)
+  const [eventId, setEventId] = useState(target.eventId ?? '')
+  const [feedback, setFeedback] = useState('')
+  const [rating, setRating] = useState('')
+  const [formError, setFormError] = useState<string | null>(null)
+  const eventsQuery = useEventsList()
+  const createFeedback = useCreateFeedback()
+
+  const eventOptions = useMemo(
+    () =>
+      (eventsQuery.data ?? [])
+        .map((event) => ({
+          value: event.id,
+          label: `${event.name} - ${formatDateShort(event.start_time)}`,
+        }))
+        .toSorted((a, b) => a.label.localeCompare(b.label)),
+    [eventsQuery.data],
+  )
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+
+    const parsedRating = validateRating(rating)
+
+    if (!eventId) {
+      setFormError('Select an event.')
+      return
+    }
+    if (!feedback.trim()) {
+      setFormError('Feedback is required.')
+      return
+    }
+    if (parsedRating === null) {
+      setFormError('Rating must be an integer from 0 to 10.')
+      return
+    }
+
+    setFormError(null)
+
+    try {
+      await createFeedback.mutateAsync({
+        event: eventId,
+        member: target.id,
+        feedback: feedback.trim(),
+        rating: parsedRating,
+      })
+      setComposeNotice(`Feedback added for ${target.name}.`)
+      closeCompose()
+    } catch (error) {
+      setFormError(serverErrorMessage(error))
+    }
+  }
+
+  return (
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>Give Feedback</DialogTitle>
+      </DialogHeader>
+
+      <form className="space-y-5" onSubmit={handleSubmit}>
+        <div className="space-y-1.5">
+          <Label>Subject</Label>
+          <p className="border-b border-input py-2 text-body-sm font-medium">{target.name}</p>
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="feedback-event">Event</Label>
+          <Select
+            value={eventId}
+            onValueChange={setEventId}
+            disabled={eventsQuery.isLoading || createFeedback.isPending}
+          >
+            <SelectTrigger id="feedback-event" className="w-full">
+              <SelectValue placeholder={eventsQuery.isLoading ? 'Loading events' : 'Select event'} />
+            </SelectTrigger>
+            <SelectContent>
+              {eventOptions.map((event) => (
+                <SelectItem key={event.value} value={event.value}>
+                  {event.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {eventsQuery.error && (
+            <p className="text-caption text-destructive">
+              {serverErrorMessage(eventsQuery.error)}
+            </p>
+          )}
+          {!eventsQuery.isLoading && !eventsQuery.error && eventOptions.length === 0 && (
+            <p className="text-caption text-text-tertiary">No events available.</p>
+          )}
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="feedback-body">Feedback</Label>
+          <Textarea
+            id="feedback-body"
+            value={feedback}
+            onChange={(event) => setFeedback(event.target.value)}
+            required
+            disabled={createFeedback.isPending}
+            aria-invalid={formError !== null && feedback.trim() === ''}
+            className="min-h-28"
+          />
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="feedback-rating">Rating</Label>
+          <Input
+            id="feedback-rating"
+            type="number"
+            min={0}
+            max={10}
+            step={1}
+            inputMode="numeric"
+            value={rating}
+            onChange={(event) => setRating(event.target.value)}
+            required
+            disabled={createFeedback.isPending}
+            aria-invalid={formError !== null && validateRating(rating) === null}
+          />
+        </div>
+
+        {formError && (
+          <p className="border border-destructive/30 bg-destructive/10 px-3 py-2 text-body-sm text-destructive">
+            {formError}
+          </p>
+        )}
+
+        <DialogFooter>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={closeCompose}
+            disabled={createFeedback.isPending}
+          >
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            disabled={createFeedback.isPending || eventOptions.length === 0}
+          >
+            {createFeedback.isPending ? 'Saving' : 'Save Feedback'}
+          </Button>
+        </DialogFooter>
+      </form>
+    </DialogContent>
+  )
+}
+
+export function FeedbackComposeNotice() {
+  const notice = useFeedbackUiStore((state) => state.composeNotice)
+
+  if (!notice) return null
+
+  return (
+    <p
+      role="status"
+      className="border border-primary/25 bg-primary/8 px-4 py-3 text-body-sm text-text-primary"
+    >
+      {notice}
+    </p>
+  )
+}
diff --git a/web-client/src/features/feedback/index.ts b/web-client/src/features/feedback/index.ts
index 4144de11..3369849f 100644
--- a/web-client/src/features/feedback/index.ts
+++ b/web-client/src/features/feedback/index.ts
@@ -1,3 +1,4 @@
 export * from './api'
 export * from './types'
+export { FeedbackComposeDialog, FeedbackComposeNotice } from './components/FeedbackComposeDialog'
 export { FeedbackPage } from './pages/FeedbackPage'
diff --git a/web-client/src/features/feedback/model/feedbackUiStore.ts b/web-client/src/features/feedback/model/feedbackUiStore.ts
index 2d60e7b4..983a0f26 100644
--- a/web-client/src/features/feedback/model/feedbackUiStore.ts
+++ b/web-client/src/features/feedback/model/feedbackUiStore.ts
@@ -3,6 +3,12 @@ import { create } from 'zustand'
 export type FeedbackRatingFilter = 'all' | 'high' | 'medium' | 'low'
 export type FeedbackSort = 'date-desc' | 'date-asc' | 'event-asc' | 'event-desc' | 'rating-desc' | 'rating-asc'
 
+export interface FeedbackComposeTarget {
+  id: string
+  name: string
+  eventId?: string
+}
+
 export interface FeedbackFilters {
   search: string
   rating: FeedbackRatingFilter
@@ -25,9 +31,14 @@ const defaultFilters: FeedbackFilters = {
 
 interface FeedbackUiState {
   openFeedbackId: string | null
+  composeTarget: FeedbackComposeTarget | null
+  composeNotice: string | null
   filters: FeedbackFilters
   open: (id: string) => void
   close: () => void
+  openCompose: (target: FeedbackComposeTarget) => void
+  closeCompose: () => void
+  setComposeNotice: (notice: string | null) => void
   setSearch: (search: string) => void
   setRating: (rating: FeedbackRatingFilter) => void
   setEventId: (eventId: string) => void
@@ -39,9 +50,14 @@ interface FeedbackUiState {
 
 export const useFeedbackUiStore = create<FeedbackUiState>((set) => ({
   openFeedbackId: null,
+  composeTarget: null,
+  composeNotice: null,
   filters: defaultFilters,
   open: (id) => set({ openFeedbackId: id }),
   close: () => set({ openFeedbackId: null }),
+  openCompose: (target) => set({ composeTarget: target, composeNotice: null }),
+  closeCompose: () => set({ composeTarget: null }),
+  setComposeNotice: (notice) => set({ composeNotice: notice }),
   setSearch: (search) => set((state) => ({ filters: { ...state.filters, search } })),
   setRating: (rating) => set((state) => ({ filters: { ...state.filters, rating } })),
   setEventId: (eventId) => set((state) => ({ filters: { ...state.filters, eventId } })),
diff --git a/web-client/src/features/feedback/model/useFeedbackViewModel.test.ts b/web-client/src/features/feedback/model/useFeedbackViewModel.test.ts
new file mode 100644
index 00000000..a6a477c2
--- /dev/null
+++ b/web-client/src/features/feedback/model/useFeedbackViewModel.test.ts
@@ -0,0 +1,258 @@
+import { describe, expect, it } from 'vitest'
+
+import type {
+  AuthUser,
+  EventListItem,
+  FeedbackSummary,
+  MemberRef,
+  MemberSummary,
+  Sport,
+  Team,
+} from '@/types'
+import { buildFeedbackView } from './useFeedbackViewModel'
+import type { FeedbackFilters } from './feedbackUiStore'
+
+const football: Sport = {
+  id: 'sport-football',
+  name: 'Football',
+  description: 'Football squads.',
+  created_at: '2026-01-01',
+  directors: [],
+}
+
+const noFilters: FeedbackFilters = {
+  search: '',
+  rating: 'all',
+  eventId: 'all',
+  coachId: 'all',
+  fromDate: '',
+  toDate: '',
+  sort: 'date-desc',
+}
+
+function ref(id: string, name: string): MemberRef {
+  return { id, name }
+}
+
+function member(id: string, firstName: string, lastName: string): MemberSummary {
+  return { id, first_name: firstName, last_name: lastName, email: `${id}@club.test` }
+}
+
+function user(id: string, name: string, role: AuthUser['role']): AuthUser {
+  return { id, name, email: `${id}@club.test`, role }
+}
+
+function team({
+  id,
+  name,
+  trainers = [],
+  trainees = [],
+}: {
+  id: string
+  name: string
+  trainers?: MemberRef[]
+  trainees?: MemberRef[]
+}): Team {
+  return {
+    id,
+    name,
+    description: `${name} squad.`,
+    created_at: '2026-01-01',
+    address: 'Club grounds',
+    sport: { id: football.id, name: football.name },
+    trainers,
+    trainees,
+  }
+}
+
+function event({
+  id,
+  name,
+  teamId,
+  attendees = [],
+}: {
+  id: string
+  name: string
+  teamId: string
+  attendees?: MemberRef[]
+}): EventListItem {
+  return {
+    id,
+    name,
+    start_time: '2026-01-10T10:00:00.000Z',
+    end_time: '2026-01-10T11:00:00.000Z',
+    attendees,
+    teams_linked: [{ id: teamId, name: `Team ${teamId}` }],
+  }
+}
+
+function feedbackSummary({
+  id,
+  eventRef,
+  memberRef,
+  creatorRef,
+  rating = 8,
+}: {
+  id: string
+  eventRef: MemberRef
+  memberRef: MemberRef
+  creatorRef: MemberRef | null
+  rating?: number
+}): FeedbackSummary {
+  return {
+    id,
+    event: eventRef,
+    member: memberRef,
+    creator: creatorRef,
+    created_at: '2026-01-11T09:00:00.000Z',
+    rating,
+  }
+}
+
+describe('buildFeedbackView coverage (trainer persona)', () => {
+  it('reports missing feedback for attendees the coach has not reviewed yet', () => {
+    const coach = ref('coach-1', 'Coach One')
+    const trainee1 = ref('trainee-1', 'Trainee One')
+    const trainee2 = ref('trainee-2', 'Trainee Two')
+
+    const coachedTeam = team({
+      id: 'team-1',
+      name: 'Coached Team',
+      trainers: [coach],
+      trainees: [trainee1, trainee2],
+    })
+
+    const sessionEvent = event({
+      id: 'event-1',
+      name: 'Session One',
+      teamId: coachedTeam.id,
+      attendees: [trainee1, trainee2],
+    })
+
+    const existingFeedback = feedbackSummary({
+      id: 'feedback-1',
+      eventRef: ref(sessionEvent.id, sessionEvent.name),
+      memberRef: trainee1,
+      creatorRef: coach,
+    })
+
+    const view = buildFeedbackView(
+      [existingFeedback],
+      noFilters,
+      [member(trainee1.id, 'Trainee', 'One'), member(trainee2.id, 'Trainee', 'Two')],
+      [coachedTeam],
+      [football],
+      [sessionEvent],
+      user(coach.id, coach.name, 'trainer'),
+    )
+
+    expect(view.coverage).not.toBeNull()
+    expect(view.coverage?.totalCount).toBe(2)
+    expect(view.coverage?.coveredCount).toBe(1)
+    expect(view.coverage?.sports).toEqual([
+      {
+        name: 'Football',
+        teams: [
+          {
+            id: coachedTeam.id,
+            name: coachedTeam.name,
+            events: [
+              {
+                id: sessionEvent.id,
+                name: sessionEvent.name,
+                formattedWhen: expect.any(String),
+                missing: [{ id: trainee2.id, name: 'Trainee Two' }],
+              },
+            ],
+          },
+        ],
+      },
+    ])
+  })
+
+  it('excludes an event once every attendee has feedback', () => {
+    const coach = ref('coach-1', 'Coach One')
+    const trainee = ref('trainee-1', 'Trainee One')
+    const coachedTeam = team({
+      id: 'team-1',
+      name: 'Coached Team',
+      trainers: [coach],
+      trainees: [trainee],
+    })
+    const sessionEvent = event({
+      id: 'event-1',
+      name: 'Session One',
+      teamId: coachedTeam.id,
+      attendees: [trainee],
+    })
+    const feedback = feedbackSummary({
+      id: 'feedback-1',
+      eventRef: ref(sessionEvent.id, sessionEvent.name),
+      memberRef: trainee,
+      creatorRef: coach,
+    })
+
+    const view = buildFeedbackView(
+      [feedback],
+      noFilters,
+      [member(trainee.id, 'Trainee', 'One')],
+      [coachedTeam],
+      [football],
+      [sessionEvent],
+      user(coach.id, coach.name, 'trainer'),
+    )
+
+    expect(view.coverage?.totalCount).toBe(1)
+    expect(view.coverage?.coveredCount).toBe(1)
+    expect(view.coverage?.sports).toEqual([])
+  })
+
+  it('ignores attendees who are not on the coach\'s team roster', () => {
+    const coach = ref('coach-1', 'Coach One')
+    const rosterTrainee = ref('trainee-1', 'Trainee One')
+    const guestAttendee = ref('trainee-2', 'Guest Trainee')
+    const coachedTeam = team({
+      id: 'team-1',
+      name: 'Coached Team',
+      trainers: [coach],
+      trainees: [rosterTrainee],
+    })
+    const sessionEvent = event({
+      id: 'event-1',
+      name: 'Session One',
+      teamId: coachedTeam.id,
+      attendees: [rosterTrainee, guestAttendee],
+    })
+
+    const view = buildFeedbackView(
+      [],
+      noFilters,
+      [member(rosterTrainee.id, 'Trainee', 'One')],
+      [coachedTeam],
+      [football],
+      [sessionEvent],
+      user(coach.id, coach.name, 'trainer'),
+    )
+
+    expect(view.coverage?.totalCount).toBe(1)
+    expect(view.coverage?.sports[0]?.teams[0]?.events[0]?.missing).toEqual([
+      { id: rosterTrainee.id, name: 'Trainee One' },
+    ])
+  })
+
+  it('returns null coverage for a coach with no coached teams', () => {
+    const coach = user('coach-1', 'Coach One', 'trainer')
+
+    const view = buildFeedbackView([], noFilters, [], [], [football], [], coach)
+
+    expect(view.coverage).toBeNull()
+  })
+
+  it('returns null coverage for non-trainer roles', () => {
+    const member1 = user('member-1', 'Member One', 'member')
+
+    const view = buildFeedbackView([], noFilters, [], [], [football], [], member1)
+
+    expect(view.coverage).toBeNull()
+  })
+})
diff --git a/web-client/src/features/feedback/model/useFeedbackViewModel.ts b/web-client/src/features/feedback/model/useFeedbackViewModel.ts
index 436601d9..dd12f066 100644
--- a/web-client/src/features/feedback/model/useFeedbackViewModel.ts
+++ b/web-client/src/features/feedback/model/useFeedbackViewModel.ts
@@ -1,7 +1,20 @@
 import { useMemo } from 'react'
 
-import { formatDateShort } from '@/lib/format'
-import { creatorName, memberRefName } from '@/types'
+import { useAuth } from '@/features/auth'
+import { useMembers } from '@/features/members/api/queries'
+import { buildComposableMemberIds } from '@/features/members/model/useMembersViewModel'
+import { useSportsList, useTeamsList } from '@/features/organization/api/queries'
+import { useEventsList } from '@/features/sport-events/api/queries'
+import { formatDateShort, formatDateTime } from '@/lib/format'
+import {
+  type AuthUser,
+  creatorName,
+  type EventListItem,
+  memberRefName,
+  type MemberSummary,
+  type Sport,
+  type Team,
+} from '@/types'
 import { useFeedback, useFeedbackList } from '../api/queries'
 import type { Feedback, FeedbackSummary } from '../types'
 import type { FeedbackFilters, FeedbackRatingFilter } from './feedbackUiStore'
@@ -11,6 +24,7 @@ export interface FeedbackRow {
   id: string
   eventId: string
   coachId: string
+  creatorId: string | null
   memberName: string
   creatorName: string
   eventName: string
@@ -18,6 +32,35 @@ export interface FeedbackRow {
   rating: number
 }
 
+export interface FeedbackCoverageTrainee {
+  id: string
+  name: string
+}
+
+export interface FeedbackCoverageEvent {
+  id: string
+  name: string
+  formattedWhen: string
+  missing: FeedbackCoverageTrainee[]
+}
+
+export interface FeedbackCoverageTeam {
+  id: string
+  name: string
+  events: FeedbackCoverageEvent[]
+}
+
+export interface FeedbackCoverageSport {
+  name: string
+  teams: FeedbackCoverageTeam[]
+}
+
+export interface FeedbackCoverage {
+  coveredCount: number
+  totalCount: number
+  sports: FeedbackCoverageSport[]
+}
+
 export interface FeedbackView {
   rows: FeedbackRow[]
   totalRows: number
@@ -28,6 +71,7 @@ export interface FeedbackView {
     avgRatingLabel: string
     latestLabel: string
   }
+  coverage: FeedbackCoverage | null
 }
 
 export interface FeedbackDetailView {
@@ -101,14 +145,104 @@ function sortFeedbackRows(rows: FeedbackRow[], sort: FeedbackFilters['sort']): F
   })
 }
 
+function buildFeedbackCoverage(
+  summaries: FeedbackSummary[],
+  members: MemberSummary[],
+  teams: Team[],
+  sports: Sport[],
+  events: EventListItem[],
+  user: AuthUser,
+): FeedbackCoverage | null {
+  if (user.role !== 'trainer') return null
+
+  const composableMemberIds = buildComposableMemberIds(members, teams, user)
+  if (composableMemberIds.size === 0) return null
+
+  const membersById = new Map(members.map((member) => [member.id, member]))
+  const traineeName = (id: string) => {
+    const member = membersById.get(id)
+    return member ? `${member.first_name} ${member.last_name}` : id
+  }
+
+  // Feedback already given by this coach, keyed by `${eventId}:${memberId}`.
+  const covered = new Set(
+    summaries
+      .filter((feedback) => feedback.creator?.id === user.id)
+      .map((feedback) => `${feedback.event.id}:${feedback.member?.id ?? ''}`),
+  )
+
+  const coachedTeams = teams.filter((team) => team.trainers.some((t) => t.id === user.id))
+  const teamsBySportId = new Map<string, Team[]>()
+  for (const team of coachedTeams) {
+    const sportTeams = teamsBySportId.get(team.sport.id) ?? []
+    sportTeams.push(team)
+    teamsBySportId.set(team.sport.id, sportTeams)
+  }
+
+  let coveredCount = 0
+  let totalCount = 0
+
+  const coverageSports: FeedbackCoverageSport[] = sports
+    .filter((sport) => teamsBySportId.has(sport.id))
+    .map((sport) => {
+      const sportTeams = teamsBySportId.get(sport.id) ?? []
+
+      const coverageTeams: FeedbackCoverageTeam[] = sportTeams.map((team) => {
+        const teamEvents = events.filter((event) =>
+          event.teams_linked?.some((linked) => linked.id === team.id),
+        )
+
+        const coverageEvents: FeedbackCoverageEvent[] = teamEvents
+          .map((event) => {
+            const scoped = (event.attendees ?? []).filter((attendee) =>
+              team.trainees.some((trainee) => trainee.id === attendee.id),
+            )
+            const missing = scoped
+              .filter((attendee) => !covered.has(`${event.id}:${attendee.id}`))
+              .map((attendee) => ({ id: attendee.id, name: traineeName(attendee.id) }))
+              .toSorted((a, b) => a.name.localeCompare(b.name))
+
+            totalCount += scoped.length
+            coveredCount += scoped.length - missing.length
+
+            return {
+              id: event.id,
+              name: event.name,
+              formattedWhen: formatDateTime(event.start_time),
+              missing,
+            }
+          })
+          .filter((event) => event.missing.length > 0)
+          .toSorted((a, b) => a.name.localeCompare(b.name))
+
+        return { id: team.id, name: team.name, events: coverageEvents }
+      }).filter((team) => team.events.length > 0)
+
+      return { name: sport.name, teams: coverageTeams }
+    })
+    .filter((sport) => sport.teams.length > 0)
+
+  return {
+    coveredCount,
+    totalCount,
+    sports: coverageSports,
+  }
+}
+
 export function buildFeedbackView(
   summaries: FeedbackSummary[],
   filters: FeedbackFilters,
+  members: MemberSummary[] = [],
+  teams: Team[] = [],
+  sports: Sport[] = [],
+  events: EventListItem[] = [],
+  user?: AuthUser,
 ): FeedbackView {
   const rows = summaries.map((feedback) => ({
     id: feedback.id,
     eventId: feedback.event.id,
     coachId: feedback.creator?.id ?? 'unknown',
+    creatorId: feedback.creator?.id ?? null,
     memberName: memberRefName(feedback.member),
     creatorName: creatorName(feedback.creator),
     eventName: feedback.event.name,
@@ -147,16 +281,41 @@ export function buildFeedbackView(
       avgRatingLabel: avgRating === null ? '--' : `${avgRating.toFixed(1)} / 10`,
       latestLabel: latestCreatedAt === null ? '--' : formatDateShort(latestCreatedAt),
     },
+    coverage: user
+      ? buildFeedbackCoverage(summaries, members, teams, sports, events, user)
+      : null,
   }
 }
 
 export function useFeedbackViewModel() {
+  const { user } = useAuth()
   const feedbackQuery = useFeedbackList()
+  const membersQuery = useMembers()
+  const teamsQuery = useTeamsList()
+  const sportsQuery = useSportsList(user.role === 'trainer')
+  const eventsQuery = useEventsList(user.role === 'trainer')
   const filters = useFeedbackUiStore((state) => state.filters)
 
   const view = useMemo(
-    () => buildFeedbackView(feedbackQuery.data ?? [], filters),
-    [feedbackQuery.data, filters],
+    () =>
+      buildFeedbackView(
+        feedbackQuery.data ?? [],
+        filters,
+        membersQuery.data ?? [],
+        teamsQuery.data ?? [],
+        sportsQuery.data ?? [],
+        eventsQuery.data ?? [],
+        user,
+      ),
+    [
+      feedbackQuery.data,
+      filters,
+      membersQuery.data,
+      teamsQuery.data,
+      sportsQuery.data,
+      eventsQuery.data,
+      user,
+    ],
   )
 
   return {
diff --git a/web-client/src/features/feedback/pages/FeedbackPage.tsx b/web-client/src/features/feedback/pages/FeedbackPage.tsx
index f4dc08eb..1562f4a3 100644
--- a/web-client/src/features/feedback/pages/FeedbackPage.tsx
+++ b/web-client/src/features/feedback/pages/FeedbackPage.tsx
@@ -1,9 +1,27 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
+import { ChevronRight, UserPlus } from 'lucide-react'
 
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { DataTable, TCell, THead, TRow } from '@/components/ui/data-table'
 import { DateRangeFilter } from '@/components/ui/date-range-filter'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
 import { PageHeader } from '@/components/ui/page-header'
 import {
   Select,
@@ -22,7 +40,11 @@ import {
 import { Skeleton } from '@/components/ui/skeleton'
 import { StatCard } from '@/components/ui/stat-card'
 import { TableToolbar } from '@/components/ui/table-toolbar'
+import { useAuth } from '@/features/auth'
 import { formatDate, formatDateShort } from '@/lib/format'
+import { serverErrorMessage } from '@/lib/server-error'
+import { useDeleteFeedback } from '../api/queries'
+import { FeedbackComposeDialog, FeedbackComposeNotice } from '../components/FeedbackComposeDialog'
 import { useFeedbackUiStore } from '../model/feedbackUiStore'
 import { useFeedbackDetailView, useFeedbackViewModel } from '../model/useFeedbackViewModel'
 
@@ -34,7 +56,15 @@ const ratingOptions = [
 ] as const
 
 export function FeedbackPage() {
+  const { user } = useAuth()
   const { view, isLoading, error } = useFeedbackViewModel()
+  const deleteFeedback = useDeleteFeedback()
+  const [deleteError, setDeleteError] = useState<string | null>(null)
+  const [deleteTarget, setDeleteTarget] = useState<{ id: string; label: string } | null>(null)
+  const [pickerOpen, setPickerOpen] = useState(false)
+  const [pickerSport, setPickerSport] = useState('')
+  const [pickerTeamId, setPickerTeamId] = useState('')
+  const [pickerEventId, setPickerEventId] = useState('')
   const filters = useFeedbackUiStore((state) => state.filters)
   const setSearch = useFeedbackUiStore((state) => state.setSearch)
   const setRating = useFeedbackUiStore((state) => state.setRating)
@@ -46,28 +76,116 @@ export function FeedbackPage() {
   const openFeedbackId = useFeedbackUiStore((state) => state.openFeedbackId)
   const openFeedback = useFeedbackUiStore((state) => state.open)
   const closeFeedback = useFeedbackUiStore((state) => state.close)
+  const openCompose = useFeedbackUiStore((state) => state.openCompose)
   const detailView = useFeedbackDetailView(openFeedbackId)
 
+  const isTrainer = user.role === 'trainer'
+
   useEffect(() => resetFilters, [resetFilters])
 
+  const canDeleteFeedback = (creatorId: string | null | undefined) =>
+    user.role === 'admin' || creatorId === user.id
+
+  const requestDeleteFeedback = (id: string, label: string) => {
+    setDeleteError(null)
+    setDeleteTarget({ id, label })
+  }
+
+  const confirmDeleteFeedback = async () => {
+    if (!deleteTarget) return
+    const { id } = deleteTarget
+
+    try {
+      await deleteFeedback.mutateAsync(id)
+      if (openFeedbackId === id) closeFeedback()
+      setDeleteTarget(null)
+    } catch (deleteError) {
+      setDeleteError(serverErrorMessage(deleteError))
+      setDeleteTarget(null)
+    }
+  }
+
+  const openTraineePicker = () => {
+    setPickerSport('')
+    setPickerTeamId('')
+    setPickerEventId('')
+    setPickerOpen(true)
+  }
+
+  const pickerSports = view.coverage?.sports ?? []
+  const pickerTeams = pickerSports.find((sport) => sport.name === pickerSport)?.teams ?? []
+  const pickerEvents = pickerTeams.find((team) => team.id === pickerTeamId)?.events ?? []
+  const pickerEvent = pickerEvents.find((event) => event.id === pickerEventId)
+  const pickerTeamName = pickerTeams.find((team) => team.id === pickerTeamId)?.name
+
+  const composeForMissing = (trainee: { id: string; name: string }) => {
+    if (!pickerEvent) return
+    setPickerOpen(false)
+    openCompose({ id: trainee.id, name: trainee.name, eventId: pickerEvent.id })
+  }
+
   return (
     <div className="mx-auto flex w-full max-w-content flex-col gap-6">
       <PageHeader
         eyebrow="My Club"
         title="Feedback"
-        subtitle="Feedback coaches have given you, by event."
+        subtitle={
+          isTrainer
+            ? "Feedback you've given, by event."
+            : 'Feedback coaches have given you, by event.'
+        }
+        action={
+          isTrainer && view.coverage ? (
+            <Button onClick={openTraineePicker} disabled={view.coverage.totalCount === 0}>
+              <UserPlus />
+              New feedback
+            </Button>
+          ) : undefined
+        }
       />
 
-      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
-        <StatCard label="Total" value={String(view.stats.total)} meta="All received" />
+      <FeedbackComposeNotice />
+
+      <div
+        className={`grid grid-cols-1 gap-3 sm:grid-cols-3 ${isTrainer && view.coverage ? 'lg:grid-cols-4' : ''}`}
+      >
+        <StatCard
+          label="Total"
+          value={String(view.stats.total)}
+          meta={isTrainer ? 'All given' : 'All received'}
+        />
         <StatCard
-          label="Avg Rating"
+          label={isTrainer ? 'Avg Rating Given' : 'Avg Rating'}
           value={view.stats.avgRatingLabel}
-          meta={view.stats.total === 0 ? 'No feedback' : `${view.stats.total} rated`}
+          meta={
+            view.stats.total === 0
+              ? 'No feedback'
+              : isTrainer
+                ? `Across ${view.stats.total} given`
+                : `${view.stats.total} rated`
+          }
         />
         <StatCard label="Latest" value={view.stats.latestLabel} meta="Newest" />
+        {isTrainer && view.coverage && (
+          <StatCard
+            label="Coverage"
+            value={`${view.coverage.coveredCount} of ${view.coverage.totalCount}`}
+            meta={
+              view.coverage.coveredCount === view.coverage.totalCount
+                ? 'All event attendances covered'
+                : `${view.coverage.totalCount - view.coverage.coveredCount} attendance(s) still need feedback`
+            }
+            tone={view.coverage.coveredCount === view.coverage.totalCount ? 'positive' : 'default'}
+          />
+        )}
       </div>
 
+      {deleteError && (
+        <p className="border border-destructive/30 bg-destructive/10 px-4 py-3 text-body-sm text-destructive">
+          {deleteError}
+        </p>
+      )}
+
       {isLoading ? (
         <FeedbackTableSkeleton />
       ) : error ? (
@@ -113,19 +231,21 @@ export function FeedbackPage() {
               </SelectContent>
             </Select>
 
-            <Select value={filters.coachId} onValueChange={setCoachId}>
-              <SelectTrigger aria-label="Filter feedback by coach">
-                <SelectValue placeholder="Coach" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">All coaches</SelectItem>
-                {view.coachOptions.map((coach) => (
-                  <SelectItem key={coach.value} value={coach.value}>
-                    {coach.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+            {!isTrainer && (
+              <Select value={filters.coachId} onValueChange={setCoachId}>
+                <SelectTrigger aria-label="Filter feedback by coach">
+                  <SelectValue placeholder="Coach" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All coaches</SelectItem>
+                  {view.coachOptions.map((coach) => (
+                    <SelectItem key={coach.value} value={coach.value}>
+                      {coach.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
 
             <Select value={filters.sort} onValueChange={setSort}>
               <SelectTrigger aria-label="Sort feedback">
@@ -160,7 +280,7 @@ export function FeedbackPage() {
                   <THead>Date</THead>
                   <THead>Event</THead>
                   <THead>Trainee</THead>
-                  <THead>From</THead>
+                  {!isTrainer && <THead>From</THead>}
                   <THead>Rating</THead>
                   <THead className="text-right" />
                 </tr>
@@ -173,18 +293,30 @@ export function FeedbackPage() {
                     </TCell>
                     <TCell className="font-medium">{feedback.eventName}</TCell>
                     <TCell>{feedback.memberName}</TCell>
-                    <TCell>{feedback.creatorName}</TCell>
+                    {!isTrainer && <TCell>{feedback.creatorName}</TCell>}
                     <TCell>
                       <Badge size="sm">{feedback.rating}/10</Badge>
                     </TCell>
                     <TCell className="text-right">
-                      <Button
-                        variant="link"
-                        className="h-auto p-0"
-                        onClick={() => openFeedback(feedback.id)}
-                      >
-                        View
-                      </Button>
+                      <div className="flex justify-end gap-3">
+                        <Button
+                          variant="link"
+                          className="h-auto p-0"
+                          onClick={() => openFeedback(feedback.id)}
+                        >
+                          View
+                        </Button>
+                        {canDeleteFeedback(feedback.creatorId) && (
+                          <Button
+                            variant="link"
+                            className="h-auto p-0 text-destructive"
+                            disabled={deleteFeedback.isPending}
+                            onClick={() => requestDeleteFeedback(feedback.id, feedback.memberName)}
+                          >
+                            Delete
+                          </Button>
+                        )}
+                      </div>
                     </TCell>
                   </TRow>
                 ))}
@@ -200,17 +332,143 @@ export function FeedbackPage() {
 
       <Sheet open={openFeedbackId !== null} onOpenChange={(open) => !open && closeFeedback()}>
         <SheetContent className="w-full gap-0 sm:max-w-md">
-          <FeedbackDetailSheet detailView={detailView} />
+          <FeedbackDetailSheet
+            detailView={detailView}
+            canDeleteFeedback={canDeleteFeedback}
+            isDeleting={deleteFeedback.isPending}
+            onDeleteFeedback={requestDeleteFeedback}
+          />
         </SheetContent>
       </Sheet>
+
+      <AlertDialog
+        open={deleteTarget !== null}
+        onOpenChange={(open) => !open && setDeleteTarget(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete feedback</AlertDialogTitle>
+            <AlertDialogDescription>
+              Delete feedback for {deleteTarget?.label}? This cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={deleteFeedback.isPending}>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              disabled={deleteFeedback.isPending}
+              onClick={confirmDeleteFeedback}
+            >
+              {deleteFeedback.isPending ? 'Deleting' : 'Delete'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {isTrainer && (
+        <Dialog open={pickerOpen} onOpenChange={setPickerOpen}>
+          <DialogContent className="sm:max-w-lg">
+            <DialogHeader>
+              <DialogTitle>New feedback</DialogTitle>
+            </DialogHeader>
+
+            {pickerSports.length === 0 ? (
+              <p className="text-body-sm text-text-secondary">
+                All your trainees already have feedback for every event.
+              </p>
+            ) : (
+              <div className="space-y-4">
+                <PickerBreadcrumb
+                  sport={pickerSport}
+                  teamName={pickerTeamName}
+                  eventName={pickerEvent?.name}
+                  onResetToSports={() => {
+                    setPickerSport('')
+                    setPickerTeamId('')
+                    setPickerEventId('')
+                  }}
+                  onResetToTeams={() => {
+                    setPickerTeamId('')
+                    setPickerEventId('')
+                  }}
+                  onResetToEvents={() => setPickerEventId('')}
+                />
+
+                {!pickerSport ? (
+                  <PickerList
+                    items={pickerSports.map((sport) => ({
+                      key: sport.name,
+                      label: sport.name,
+                      meta: `${sport.teams.length} team(s)`,
+                    }))}
+                    onSelect={(key) => setPickerSport(key)}
+                  />
+                ) : !pickerTeamId ? (
+                  <PickerList
+                    items={pickerTeams.map((team) => ({
+                      key: team.id,
+                      label: team.name,
+                      meta: `${team.events.length} event(s) need feedback`,
+                    }))}
+                    onSelect={(key) => setPickerTeamId(key)}
+                  />
+                ) : !pickerEvent ? (
+                  <PickerList
+                    items={pickerEvents.map((event) => ({
+                      key: event.id,
+                      label: event.name,
+                      meta: event.formattedWhen,
+                      badge: `${event.missing.length} missing`,
+                    }))}
+                    onSelect={(key) => setPickerEventId(key)}
+                  />
+                ) : (
+                  <ul className="divide-y border bg-card">
+                    {pickerEvent.missing.map((trainee) => (
+                      <li
+                        key={trainee.id}
+                        className="flex items-center justify-between gap-3 px-3 py-2"
+                      >
+                        <p className="text-body-sm font-medium text-text-primary">
+                          {trainee.name}
+                        </p>
+                        <Button
+                          variant="link"
+                          className="h-auto p-0"
+                          onClick={() => composeForMissing(trainee)}
+                        >
+                          Give feedback
+                        </Button>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
+            )}
+
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setPickerOpen(false)}>
+                Close
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      )}
+
+      <FeedbackComposeDialog />
     </div>
   )
 }
 
 function FeedbackDetailSheet({
   detailView,
+  canDeleteFeedback,
+  isDeleting,
+  onDeleteFeedback,
 }: {
   detailView: ReturnType<typeof useFeedbackDetailView>
+  canDeleteFeedback: (creatorId: string | null | undefined) => boolean
+  isDeleting: boolean
+  onDeleteFeedback: (id: string, label: string) => void
 }) {
   const { detail, eventName, memberName, creatorName, isLoading, error } = detailView
 
@@ -266,11 +524,100 @@ function FeedbackDetailSheet({
         </p>
 
         <Badge>About: {memberName ?? '--'}</Badge>
+
+        {canDeleteFeedback(detail.creator?.id) && (
+          <Button
+            variant="destructive"
+            onClick={() => onDeleteFeedback(detail.id, memberName ?? 'this member')}
+            disabled={isDeleting}
+          >
+            Delete Feedback
+          </Button>
+        )}
       </div>
     </>
   )
 }
 
+function PickerBreadcrumb({
+  sport,
+  teamName,
+  eventName,
+  onResetToSports,
+  onResetToTeams,
+  onResetToEvents,
+}: {
+  sport: string
+  teamName: string | undefined
+  eventName: string | undefined
+  onResetToSports: () => void
+  onResetToTeams: () => void
+  onResetToEvents: () => void
+}) {
+  const crumbs: { label: string; onClick?: () => void }[] = [
+    { label: 'Sport', onClick: sport ? onResetToSports : undefined },
+  ]
+  if (sport) crumbs.push({ label: sport, onClick: teamName ? onResetToTeams : undefined })
+  if (teamName) crumbs.push({ label: teamName, onClick: eventName ? onResetToEvents : undefined })
+  if (eventName) crumbs.push({ label: eventName })
+
+  return (
+    <div className="flex flex-wrap items-center gap-1 text-caption text-text-tertiary">
+      {crumbs.map((crumb, index) => (
+        <span key={`${crumb.label}-${index}`} className="flex items-center gap-1">
+          {index > 0 && <ChevronRight className="size-3.5 shrink-0" />}
+          {crumb.onClick ? (
+            <button
+              type="button"
+              onClick={crumb.onClick}
+              className="text-primary underline-offset-2 hover:underline"
+            >
+              {crumb.label}
+            </button>
+          ) : (
+            <span className={index === crumbs.length - 1 ? 'font-medium text-text-primary' : ''}>
+              {crumb.label}
+            </span>
+          )}
+        </span>
+      ))}
+    </div>
+  )
+}
+
+function PickerList({
+  items,
+  onSelect,
+}: {
+  items: { key: string; label: string; meta: string; badge?: string }[]
+  onSelect: (key: string) => void
+}) {
+  return (
+    <ul className="divide-y border bg-card">
+      {items.map((item) => (
+        <li key={item.key}>
+          <button
+            type="button"
+            onClick={() => onSelect(item.key)}
+            className="flex w-full items-center gap-3 px-3 py-2.5 text-left transition-colors hover:bg-surface-sunken"
+          >
+            <div className="min-w-0 flex-1">
+              <p className="truncate text-body-sm font-medium text-text-primary">{item.label}</p>
+              <p className="truncate text-caption text-text-tertiary">{item.meta}</p>
+            </div>
+            {item.badge && (
+              <Badge tone="accent" size="sm" className="shrink-0">
+                {item.badge}
+              </Badge>
+            )}
+            <ChevronRight className="size-4 shrink-0 text-text-tertiary" />
+          </button>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
 function FeedbackTableSkeleton() {
   return (
     <div className="border bg-card p-5">

From 6f2424b33b6f4e3997f608450629659927bdc27a Mon Sep 17 00:00:00 2001
From: FadyGergesRezk <84906847+FadyGergesRezk@users.noreply.github.com>
Date: Fri, 3 Jul 2026 06:08:01 +0200
Subject: [PATCH 07/11] fix: confirm before deleting a development report

---
 .../src/features/helper/pages/HelperPage.tsx  | 62 +++++++++++++++++--
 1 file changed, 58 insertions(+), 4 deletions(-)

diff --git a/web-client/src/features/helper/pages/HelperPage.tsx b/web-client/src/features/helper/pages/HelperPage.tsx
index 4333210d..f8b24470 100644
--- a/web-client/src/features/helper/pages/HelperPage.tsx
+++ b/web-client/src/features/helper/pages/HelperPage.tsx
@@ -1,5 +1,15 @@
 import { useState } from 'react'
 
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
 import { PageHeader } from '@/components/ui/page-header'
@@ -11,6 +21,7 @@ import {
   SheetTitle,
 } from '@/components/ui/sheet'
 import { Skeleton } from '@/components/ui/skeleton'
+import { serverErrorMessage } from '@/lib/server-error'
 import { useHelperUiStore } from '../model/helperUiStore'
 import {
   useDeleteReport,
@@ -39,6 +50,8 @@ export function HelperPage() {
   const deleteReport = useDeleteReport()
 
   const [generated, setGenerated] = useState(false)
+  const [deleteError, setDeleteError] = useState<string | null>(null)
+  const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null)
 
   const onGenerate = () => {
     setGenerated(false)
@@ -47,9 +60,23 @@ export function HelperPage() {
     setGenerated(true)
   }
 
-  const onDelete = (reportId: string) => {
-    if (reportId === openReportId) closeReport()
-    deleteReport.mutate({ reportId, listKey })
+  const requestDelete = (reportId: string) => {
+    setDeleteError(null)
+    setDeleteTargetId(reportId)
+  }
+
+  const confirmDelete = async () => {
+    if (!deleteTargetId) return
+    const reportId = deleteTargetId
+
+    try {
+      await deleteReport.mutateAsync({ reportId, listKey })
+      if (reportId === openReportId) closeReport()
+      setDeleteTargetId(null)
+    } catch (deleteFailure) {
+      setDeleteError(serverErrorMessage(deleteFailure))
+      setDeleteTargetId(null)
+    }
   }
 
   return (
@@ -64,6 +91,12 @@ export function HelperPage() {
         }
       />
 
+      {deleteError && (
+        <p className="border border-destructive/30 bg-destructive/10 px-4 py-3 text-body-sm text-destructive">
+          {deleteError}
+        </p>
+      )}
+
       <Card className="max-w-content-narrow">
         <CardContent className="space-y-4">
           <div className="flex items-start justify-between gap-4">
@@ -124,7 +157,7 @@ export function HelperPage() {
                       variant="ghost"
                       size="sm"
                       className="text-text-tertiary hover:text-destructive"
-                      onClick={() => onDelete(row.id)}
+                      onClick={() => requestDelete(row.id)}
                       disabled={deleteReport.isPending}
                     >
                       Delete
@@ -142,6 +175,27 @@ export function HelperPage() {
           <ReportDetailSheet detailView={detailView} />
         </SheetContent>
       </Sheet>
+
+      <AlertDialog
+        open={deleteTargetId !== null}
+        onOpenChange={(open) => !open && setDeleteTargetId(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete report</AlertDialogTitle>
+            <AlertDialogDescription>
+              Delete {rows.find((row) => row.id === deleteTargetId)?.subject ?? 'this report'}?
+              This cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={deleteReport.isPending}>Cancel</AlertDialogCancel>
+            <AlertDialogAction disabled={deleteReport.isPending} onClick={confirmDelete}>
+              {deleteReport.isPending ? 'Deleting' : 'Delete'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   )
 }

From f4042da757f5006100219acc56b96d7f7425d415 Mon Sep 17 00:00:00 2001
From: FadyGergesRezk <84906847+FadyGergesRezk@users.noreply.github.com>
Date: Fri, 3 Jul 2026 13:34:37 +0200
Subject: [PATCH 08/11] fix: address coderabbit review findings on PR #102

---
 web-client/src/app/pages/DashboardPage.tsx    |  7 +-
 .../app/pages/model/useDashboardViewModel.ts  |  5 +
 web-client/src/components/ui/alert-dialog.tsx |  2 +-
 .../src/components/ui/table-toolbar.tsx       |  6 ++
 web-client/src/features/helper/api/queries.ts | 94 +++++++++++++++++--
 .../organization/pages/OrganizationPage.tsx   |  7 +-
 .../src/features/sport-events/api/queries.ts  |  7 ++
 .../components/SportEventEditorDialog.tsx     | 21 +++--
 web-client/src/lib/format.ts                  | 18 +++-
 web-client/src/mocks/fixtures/dashboard.ts    |  9 +-
 10 files changed, 148 insertions(+), 28 deletions(-)

diff --git a/web-client/src/app/pages/DashboardPage.tsx b/web-client/src/app/pages/DashboardPage.tsx
index 73d2dc3d..d597422f 100644
--- a/web-client/src/app/pages/DashboardPage.tsx
+++ b/web-client/src/app/pages/DashboardPage.tsx
@@ -25,7 +25,7 @@ const initials = (name: string) =>
 export function DashboardPage() {
   const { view, states } = useDashboardViewModel()
   const showBalanceCard = Boolean(view.myBalance || states.myBalance?.isLoading)
-  const showTeamCard = Boolean(view.myTeam)
+  const showTeamCard = Boolean(view.myTeam || states.myTeam?.isLoading)
   const showEventsCards = Boolean(view.myEvents || states.myEvents?.isLoading)
   const showFeedbackStat = Boolean(view.myFeedback || states.myFeedback?.isLoading)
 
@@ -44,7 +44,7 @@ export function DashboardPage() {
       {(showBalanceCard || showTeamCard || showEventsCards || showFeedbackStat) && (
         <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
           {showBalanceCard && <BalanceCard balance={view.myBalance} state={states.myBalance} />}
-          {showTeamCard && <TeamCard team={view.myTeam} />}
+          {showTeamCard && <TeamCard team={view.myTeam} state={states.myTeam} />}
           {showEventsCards && <EventsCards events={view.myEvents} state={states.myEvents} />}
           {showFeedbackStat && (
             <FeedbackStat feedback={view.myFeedback} state={states.myFeedback} />
@@ -89,9 +89,12 @@ function AdminCountsSection({
 
 function TeamCard({
   team,
+  state,
 }: {
   team?: NonNullable<ReturnType<typeof useDashboardViewModel>['view']['myTeam']>
+  state?: DashboardSectionState
 }) {
+  if (state?.isLoading) return <Skeleton className="h-32 border" />
   if (!team) return null
 
   return (
diff --git a/web-client/src/app/pages/model/useDashboardViewModel.ts b/web-client/src/app/pages/model/useDashboardViewModel.ts
index 3b9fa424..96a101a7 100644
--- a/web-client/src/app/pages/model/useDashboardViewModel.ts
+++ b/web-client/src/app/pages/model/useDashboardViewModel.ts
@@ -94,6 +94,7 @@ export interface DashboardViewModel {
   states: {
     myEvents?: DashboardSectionState
     myBalance?: DashboardSectionState
+    myTeam?: DashboardSectionState
     myFeedback?: DashboardSectionState
     adminCounts?: DashboardSectionState
     sports?: DashboardSectionState
@@ -287,6 +288,9 @@ function fillSections(
       if (shouldShowBalance(view.role)) {
         states.myBalance = state
       }
+      if (view.role === 'trainer') {
+        states.myTeam = state
+      }
       states.myEvents = state
     }
     return
@@ -309,6 +313,7 @@ function fillSections(
       }
       view.myEvents = buildEventsSection(data.upcoming_events, null, org.events)
       view.myFeedback = buildFeedbackSection(data.recent_feedback)
+      states.myTeam = state
       states.myEvents = org.eventsState
       states.myFeedback = state
       break
diff --git a/web-client/src/components/ui/alert-dialog.tsx b/web-client/src/components/ui/alert-dialog.tsx
index 8e06792b..9ae8d2c1 100644
--- a/web-client/src/components/ui/alert-dialog.tsx
+++ b/web-client/src/components/ui/alert-dialog.tsx
@@ -32,7 +32,7 @@ function AlertDialogOverlay({
     <AlertDialogPrimitive.Overlay
       data-slot="alert-dialog-overlay"
       className={cn(
-        "fixed inset-0 isolate z-50 bg-black/20 duration-100 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 isolate z-50 bg-black/20 duration-100 supports-[backdrop-filter]:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}
diff --git a/web-client/src/components/ui/table-toolbar.tsx b/web-client/src/components/ui/table-toolbar.tsx
index 15983ef0..00093d27 100644
--- a/web-client/src/components/ui/table-toolbar.tsx
+++ b/web-client/src/components/ui/table-toolbar.tsx
@@ -24,6 +24,12 @@ export function TableToolbar({
 }: TableToolbarProps) {
   const searchId = useId()
   const [draftSearch, setDraftSearch] = useState(searchValue)
+  const [prevSearchValue, setPrevSearchValue] = useState(searchValue)
+
+  if (searchValue !== prevSearchValue) {
+    setPrevSearchValue(searchValue)
+    setDraftSearch(searchValue)
+  }
 
   useEffect(() => {
     const timeout = window.setTimeout(() => onSearchChange(draftSearch), 250)
diff --git a/web-client/src/features/helper/api/queries.ts b/web-client/src/features/helper/api/queries.ts
index d49c9434..dae3c894 100644
--- a/web-client/src/features/helper/api/queries.ts
+++ b/web-client/src/features/helper/api/queries.ts
@@ -2,9 +2,11 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 
 import { getCurrentUser } from '@/features/auth/currentUser'
 import {
-  memberReportSummaries,
-  reportById,
-  teamReportSummaries,
+  memberNamesById,
+  memberReportSummariesById,
+  reportById as reportByIdFixture,
+  teamFixtures,
+  teamReportSummariesById,
 } from '@/mocks/fixtures'
 import { mockOr } from '@/mocks/mockSwitch'
 import { scopeReport, scopeTeamReport } from '@/mocks/scope'
@@ -18,6 +20,18 @@ export const helperKeys = {
   report: (reportId: string) => ['helper', 'reports', reportId] as const,
 }
 
+const mockReportById: Record<string, Report> = { ...reportByIdFixture }
+const mockMemberReportSummariesById: Record<string, MemberReportSummary[]> = Object.fromEntries(
+  Object.entries(memberReportSummariesById).map(([memberId, rows]) => [memberId, [...rows]]),
+)
+const mockTeamReportSummariesById: Record<string, TeamReportSummary[]> = Object.fromEntries(
+  Object.entries(teamReportSummariesById).map(([teamId, rows]) => [teamId, [...rows]]),
+)
+
+function mockReportId(): string {
+  return globalThis.crypto?.randomUUID?.() ?? `ffffffff-ffff-4fff-8fff-${Date.now().toString(16).padStart(12, '0').slice(-12)}`
+}
+
 export function useHelperHello() {
   return useQuery<string>({
     queryKey: helperKeys.hello,
@@ -35,6 +49,7 @@ export function useGenerateMemberReport(memberId: string) {
       mockOr(
         () => {
           if (!scopeReport(memberId, getCurrentUser())) throw new Error('Report not allowed')
+          mockGenerateMemberReport(memberId)
           return Promise.resolve()
         },
         () => helperClient.post(`/reports/member/${memberId}`).then(() => undefined),
@@ -51,6 +66,7 @@ export function useGenerateTeamReport(teamId: string) {
       mockOr(
         () => {
           if (!scopeTeamReport(teamId, getCurrentUser())) throw new Error('Report not allowed')
+          mockGenerateTeamReport(teamId)
           return Promise.resolve()
         },
         () => helperClient.post(`/reports/team/${teamId}`).then(() => undefined),
@@ -59,6 +75,46 @@ export function useGenerateTeamReport(teamId: string) {
   })
 }
 
+function mockGenerateMemberReport(memberId: string): void {
+  const name = memberNamesById[memberId]
+  if (!name) return
+
+  const member = { id: memberId, name }
+  const report: Report = {
+    id: mockReportId(),
+    kind: 'member',
+    member,
+    created_at: new Date().toISOString(),
+    text: `# Development report — ${name}\n\nReport generation in progress.`,
+  }
+
+  mockReportById[report.id] = report
+  mockMemberReportSummariesById[memberId] = [
+    { id: report.id, member, created_at: report.created_at },
+    ...(mockMemberReportSummariesById[memberId] ?? []),
+  ]
+}
+
+function mockGenerateTeamReport(teamId: string): void {
+  const team = teamFixtures.find((item) => item.id === teamId)
+  if (!team) return
+
+  const teamRef = { id: team.id, name: team.name }
+  const report: Report = {
+    id: mockReportId(),
+    kind: 'team',
+    team: teamRef,
+    created_at: new Date().toISOString(),
+    text: `# Team report — ${team.name}\n\nReport generation in progress.`,
+  }
+
+  mockReportById[report.id] = report
+  mockTeamReportSummariesById[teamId] = [
+    { id: report.id, team: teamRef, created_at: report.created_at },
+    ...(mockTeamReportSummariesById[teamId] ?? []),
+  ]
+}
+
 // ---- list summaries (newest-first, no text) ----
 
 export function useMemberReports(memberId: string, enabled = true) {
@@ -70,7 +126,7 @@ export function useMemberReports(memberId: string, enabled = true) {
       mockOr(
         () => {
           if (!scopeReport(memberId, getCurrentUser())) return Promise.resolve([])
-          return Promise.resolve(memberReportSummaries(memberId))
+          return Promise.resolve(mockMemberReportSummariesById[memberId] ?? [])
         },
         () => helperClient.get<MemberReportSummary[]>(`/reports/member/${memberId}`).then(r => r.data),
       ),
@@ -86,7 +142,7 @@ export function useTeamReports(teamId: string, enabled = true) {
       mockOr(
         () => {
           if (!scopeTeamReport(teamId, getCurrentUser())) return Promise.resolve([])
-          return Promise.resolve(teamReportSummaries(teamId))
+          return Promise.resolve(mockTeamReportSummariesById[teamId] ?? [])
         },
         () => helperClient.get<TeamReportSummary[]>(`/reports/team/${teamId}`).then(r => r.data),
       ),
@@ -102,7 +158,7 @@ export function useReport(reportId: string | null) {
     queryFn: () =>
       mockOr(
         () => {
-          const found = reportId ? reportById[reportId] : undefined
+          const found = reportId ? mockReportById[reportId] : undefined
           if (!found) throw new Error('Report not found')
           return Promise.resolve(found)
         },
@@ -113,13 +169,37 @@ export function useReport(reportId: string | null) {
 
 // ---- delete ----
 
+function mockDeleteReport(reportId: string): void {
+  const report = mockReportById[reportId]
+  if (!report) return
+
+  delete mockReportById[reportId]
+
+  if (report.kind === 'member' && report.member) {
+    const memberId = report.member.id
+    mockMemberReportSummariesById[memberId] = (mockMemberReportSummariesById[memberId] ?? []).filter(
+      (row) => row.id !== reportId,
+    )
+  }
+
+  if (report.kind === 'team' && report.team) {
+    const teamId = report.team.id
+    mockTeamReportSummariesById[teamId] = (mockTeamReportSummariesById[teamId] ?? []).filter(
+      (row) => row.id !== reportId,
+    )
+  }
+}
+
 export function useDeleteReport() {
   const qc = useQueryClient()
 
   return useMutation<void, Error, { reportId: string; listKey: readonly unknown[] }>({
     mutationFn: ({ reportId }) =>
       mockOr(
-        () => Promise.resolve(),
+        () => {
+          mockDeleteReport(reportId)
+          return Promise.resolve()
+        },
         () => helperClient.delete(`/reports/${reportId}`).then(() => undefined),
       ),
     onSuccess: (_, { reportId, listKey }) => {
diff --git a/web-client/src/features/organization/pages/OrganizationPage.tsx b/web-client/src/features/organization/pages/OrganizationPage.tsx
index fc688ad3..9bd57ab6 100644
--- a/web-client/src/features/organization/pages/OrganizationPage.tsx
+++ b/web-client/src/features/organization/pages/OrganizationPage.tsx
@@ -318,7 +318,12 @@ function RosterSheet({
 
         <div>
           <FieldLabel>Coaches ({team.trainers.length})</FieldLabel>
-          <MemberBadges members={team.trainers} tone="accent" emptyText="No coaches assigned." />
+          <MemberBadges
+            members={team.trainers}
+            currentUserId={currentUserId}
+            tone="accent"
+            emptyText="No coaches assigned."
+          />
         </div>
 
         <Separator />
diff --git a/web-client/src/features/sport-events/api/queries.ts b/web-client/src/features/sport-events/api/queries.ts
index 75338f6d..c73a66ad 100644
--- a/web-client/src/features/sport-events/api/queries.ts
+++ b/web-client/src/features/sport-events/api/queries.ts
@@ -87,6 +87,10 @@ function canManageEvent(user: AuthUser, event: SportEvent): boolean {
   return user.role === 'admin' || event.creator?.id === user.id
 }
 
+function canCreateMockEvent(user: AuthUser): boolean {
+  return user.role === 'trainer' || user.role === 'director' || user.role === 'admin'
+}
+
 function upsertMockEvent(event: SportEvent): void {
   mockEventDetailsById[event.id] = event
 
@@ -105,6 +109,9 @@ function upsertMockEvent(event: SportEvent): void {
 
 function mockCreateEvent(data: EventCreate): SportEvent {
   const user = getCurrentUser()
+  if (!canCreateMockEvent(user)) {
+    throw mockEventError('You are not allowed to create events')
+  }
   const name = data.name.trim()
 
   if (!name) throw mockEventError('Name is required')
diff --git a/web-client/src/features/sport-events/components/SportEventEditorDialog.tsx b/web-client/src/features/sport-events/components/SportEventEditorDialog.tsx
index 50026957..b853ce7e 100644
--- a/web-client/src/features/sport-events/components/SportEventEditorDialog.tsx
+++ b/web-client/src/features/sport-events/components/SportEventEditorDialog.tsx
@@ -186,17 +186,24 @@ function SportEventEditorLoaded({
   const handleTeamToggle = (teamId: string) => {
     setForm((current) => {
       const nextTeamIds = toggleId(current.teamIds, teamId)
-      const nextSportIds = unique([
-        ...current.sportIds,
-        ...teams
-          .filter((team) => nextTeamIds.includes(team.id))
-          .map((team) => team.sport.id),
-      ])
+      const teamSportIds = new Set(teams.map((team) => team.sport.id))
+      const selectedTeamSportIds = new Set(
+        teams.filter((team) => nextTeamIds.includes(team.id)).map((team) => team.sport.id),
+      )
+      // Keep sports with no backing team at all (e.g. a director's explicit pick) plus
+      // sports still backed by a currently selected team; drop team-derived sports whose
+      // only selected team was just deselected.
+      const nextSportIds = current.sportIds.filter(
+        (sportId) => !teamSportIds.has(sportId) || selectedTeamSportIds.has(sportId),
+      )
+      const addedSportIds = teams
+        .filter((team) => nextTeamIds.includes(team.id))
+        .map((team) => team.sport.id)
 
       return {
         ...current,
         teamIds: nextTeamIds,
-        sportIds: nextSportIds,
+        sportIds: unique([...nextSportIds, ...addedSportIds]),
         attendeeIds: syncAttendeesForTeams(current.teamIds, nextTeamIds, current.attendeeIds, teams),
       }
     })
diff --git a/web-client/src/lib/format.ts b/web-client/src/lib/format.ts
index 907696d7..fde9c069 100644
--- a/web-client/src/lib/format.ts
+++ b/web-client/src/lib/format.ts
@@ -35,25 +35,33 @@ const TIME = new Intl.DateTimeFormat('en-GB', {
 
 const WEEKDAY = new Intl.DateTimeFormat('en-GB', { weekday: 'short' })
 
+function toValidDate(iso: string): Date | null {
+  const d = new Date(iso)
+  return Number.isNaN(d.getTime()) ? null : d
+}
+
 /** "18 Jun 2026" */
 export function formatDate(iso: string): string {
-  return DATE.format(new Date(iso))
+  const d = toValidDate(iso)
+  return d ? DATE.format(d) : '—'
 }
 
 /** "18 Jun" */
 export function formatDateShort(iso: string): string {
-  return DATE_SHORT.format(new Date(iso))
+  const d = toValidDate(iso)
+  return d ? DATE_SHORT.format(d) : '—'
 }
 
 /** "Sat 21 Jun · 10:00" */
 export function formatDateTime(iso: string): string {
-  const d = new Date(iso)
-  return `${WEEKDAY.format(d)} ${DATE_SHORT.format(d)} · ${TIME.format(d)}`
+  const d = toValidDate(iso)
+  return d ? `${WEEKDAY.format(d)} ${DATE_SHORT.format(d)} · ${TIME.format(d)}` : '—'
 }
 
 /** "10:00" */
 export function formatTime(iso: string): string {
-  return TIME.format(new Date(iso))
+  const d = toValidDate(iso)
+  return d ? TIME.format(d) : '—'
 }
 
 /** Whole minutes between two ISO timestamps, e.g. "90 min". */
diff --git a/web-client/src/mocks/fixtures/dashboard.ts b/web-client/src/mocks/fixtures/dashboard.ts
index 0c38524c..6948ffa8 100644
--- a/web-client/src/mocks/fixtures/dashboard.ts
+++ b/web-client/src/mocks/fixtures/dashboard.ts
@@ -67,12 +67,11 @@ function dashboardFor(key: MockPersonaKey): Dashboard {
       }
 
     case 'trainer': {
-      const teams = trainerTeams(user.id)
-      const team = teams[0]
+      const team = trainerTeams(user.id)[0]
       return {
         role: 'trainer',
         team: team ? { id: team.id, name: team.name } : { id: '', name: '' },
-        total_members: teams.reduce((sum, t) => sum + t.trainees.length, 0),
+        total_members: team ? team.trainees.length : 0,
         upcoming_events: upcomingEvents(user).length,
         recent_feedback: scopeFeedback(feedbackSummaryFixtures, user),
       }
@@ -80,13 +79,13 @@ function dashboardFor(key: MockPersonaKey): Dashboard {
 
     case 'director': {
       const sportIds = directorSportIds(user.id)
-      const teams = teamFixtures.filter((team) => sportIds.has(team.sport.id))
+      const firstSportId = [...sportIds][0] ?? ''
+      const teams = teamFixtures.filter((team) => team.sport.id === firstSportId)
       const teamSummaries: TeamBalanceSummary[] = teams.map((team) => ({
         team: { id: team.id, name: team.name },
         member_count: team.trainees.length,
         balance_cents: teamBalance(team),
       }))
-      const firstSportId = [...sportIds][0] ?? ''
       return {
         role: 'director',
         sport: sportRef(firstSportId),

From 8f00d5298c65e4888a78ef2a33cf22e463c440b5 Mon Sep 17 00:00:00 2001
From: FadyGergesRezk <84906847+FadyGergesRezk@users.noreply.github.com>
Date: Fri, 3 Jul 2026 15:13:14 +0200
Subject: [PATCH 09/11] feat: add coach team edit and letters compose UI

---
 .../features/letters/pages/LettersPage.tsx    | 389 +++++++++++++++++-
 .../src/features/organization/api/queries.ts  | 109 ++++-
 .../components/TeamEditorDialog.tsx           | 384 +++++++++++++++++
 .../organization/model/organizationUiStore.ts |  22 +
 .../organization/model/teamEditor.test.ts     | 164 ++++++++
 .../features/organization/model/teamEditor.ts | 162 ++++++++
 .../organization/model/useTeamsViewModel.ts   |   5 +-
 .../organization/pages/OrganizationPage.tsx   | 208 +++++++---
 .../components/SportEventEditorDialog.tsx     |  13 +-
 web-client/src/lib/id-selection.ts            |  11 +
 web-client/src/types.ts                       |   7 +
 11 files changed, 1383 insertions(+), 91 deletions(-)
 create mode 100644 web-client/src/features/organization/components/TeamEditorDialog.tsx
 create mode 100644 web-client/src/features/organization/model/organizationUiStore.ts
 create mode 100644 web-client/src/features/organization/model/teamEditor.test.ts
 create mode 100644 web-client/src/features/organization/model/teamEditor.ts
 create mode 100644 web-client/src/lib/id-selection.ts

diff --git a/web-client/src/features/letters/pages/LettersPage.tsx b/web-client/src/features/letters/pages/LettersPage.tsx
index f2fb8e30..61755d28 100644
--- a/web-client/src/features/letters/pages/LettersPage.tsx
+++ b/web-client/src/features/letters/pages/LettersPage.tsx
@@ -1,12 +1,391 @@
-import { useLettersHello } from '../api'
+import { type FormEvent, useMemo, useRef, useState } from 'react'
+import { Download, FileText, Mail, Send } from 'lucide-react'
+
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { PageHeader } from '@/components/ui/page-header'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Textarea } from '@/components/ui/textarea'
+import { useAuth } from '@/features/auth'
+import { useTeamsList } from '@/features/organization/api/queries'
+import { serverErrorMessage } from '@/lib/server-error'
+import { cn } from '@/lib/utils'
+import { isTeamCoach, type Team } from '@/types'
+import { useGeneratePdf, useSendMail } from '../api'
+
+type LetterMode = 'mail' | 'pdf'
+
+const TEMPLATE_TOKENS = [
+  '{{first_name}}',
+  '{{last_name}}',
+  '{{full_name}}',
+  '{{email}}',
+  '{{address}}',
+  '{{phone_number}}',
+  '{{birthday}}',
+  '{{joining_date}}',
+  '{{team_name}}',
+  '{{sport_name}}',
+  '{{balance}}',
+] as const
+
+const MODE_COPY = {
+  mail: {
+    label: 'Mail',
+    submit: 'Send Mail',
+    pending: 'Sending',
+    success: 'Mail sent to your team.',
+  },
+  pdf: {
+    label: 'PDF',
+    submit: 'Download PDF',
+    pending: 'Generating',
+    success: 'PDF generated for your team.',
+  },
+} as const satisfies Record<
+  LetterMode,
+  { label: string; submit: string; pending: string; success: string }
+>
 
 export function LettersPage() {
-  const { data: hello } = useLettersHello()
+  const { user } = useAuth()
+  const teamsQuery = useTeamsList(user.role === 'trainer')
+
+  const coachedTeams = useMemo(
+    () => (teamsQuery.data ?? []).filter((team) => isTeamCoach(team, user.id)),
+    [teamsQuery.data, user.id],
+  )
+
+  if (user.role !== 'trainer') {
+    return (
+      <LettersFrame>
+        <EmptyState
+          title="Letters are not available for this role."
+          description="Coach letters are scoped to the coach's own team."
+        />
+      </LettersFrame>
+    )
+  }
+
+  if (teamsQuery.isLoading) {
+    return (
+      <LettersFrame>
+        <LoadingState />
+      </LettersFrame>
+    )
+  }
+
+  if (teamsQuery.error) {
+    return (
+      <LettersFrame>
+        <p className="border border-destructive/30 bg-destructive/10 px-4 py-3 text-body-sm text-destructive">
+          {serverErrorMessage(teamsQuery.error)}
+        </p>
+      </LettersFrame>
+    )
+  }
+
+  if (coachedTeams.length === 0) {
+    return (
+      <LettersFrame>
+        <EmptyState
+          title="No coached team found."
+          description="Letters are sent to your own team once a team lists you as coach."
+        />
+      </LettersFrame>
+    )
+  }
+
+  return (
+    <LettersFrame>
+      <LettersComposer coachedTeams={coachedTeams} />
+    </LettersFrame>
+  )
+}
+
+function LettersFrame({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="mx-auto flex w-full max-w-content flex-col gap-6">
+      <PageHeader
+        eyebrow="My Club"
+        title="Letters"
+        subtitle="Compose mail and PDF templates for your team."
+      />
+      {children}
+    </div>
+  )
+}
+
+function LettersComposer({ coachedTeams }: { coachedTeams: Team[] }) {
+  const sendMail = useSendMail()
+  const generatePdf = useGeneratePdf()
+  const templateRef = useRef<HTMLTextAreaElement>(null)
+  const [mode, setMode] = useState<LetterMode>('mail')
+  const [subject, setSubject] = useState('')
+  const [template, setTemplate] = useState('')
+  const [formError, setFormError] = useState<string | null>(null)
+  const [notice, setNotice] = useState<string | null>(null)
+  const isPending = sendMail.isPending || generatePdf.isPending
+
+  const setModeSafely = (nextMode: LetterMode) => {
+    setMode(nextMode)
+    setFormError(null)
+    setNotice(null)
+  }
+
+  const insertTemplateToken = (token: string) => {
+    const textarea = templateRef.current
+
+    if (!textarea) {
+      setTemplate((current) => `${current}${current.length > 0 ? ' ' : ''}${token}`)
+      return
+    }
+
+    let nextCursor = 0
+
+    setTemplate((current) => {
+      const start = textarea.selectionStart ?? current.length
+      const end = textarea.selectionEnd ?? current.length
+      const next = `${current.slice(0, start)}${token}${current.slice(end)}`
+      nextCursor = start + token.length
+      return next
+    })
+
+    window.requestAnimationFrame(() => {
+      textarea.focus()
+      textarea.setSelectionRange(nextCursor, nextCursor)
+    })
+  }
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+
+    if (mode === 'mail' && subject.trim() === '') {
+      setFormError('Subject is required.')
+      setNotice(null)
+      return
+    }
+
+    if (template.trim() === '') {
+      setFormError('Template is required.')
+      setNotice(null)
+      return
+    }
+
+    setFormError(null)
+    setNotice(null)
+
+    try {
+      if (mode === 'mail') {
+        await sendMail.mutateAsync({ subject: subject.trim(), template })
+      } else {
+        const pdf = await generatePdf.mutateAsync({ template })
+        downloadBlob(pdf, pdfFileName(coachedTeams))
+      }
+
+      setNotice(MODE_COPY[mode].success)
+    } catch (error) {
+      setFormError(serverErrorMessage(error))
+    }
+  }
+
+  return (
+    <>
+      <section className="border border-primary/30 bg-primary/4 px-4 py-3">
+        <p className="text-caption font-semibold uppercase tracking-[0.12em] text-primary">
+          Audience
+        </p>
+        <p className="mt-1 text-body-sm text-text-primary">
+          {audienceSentence(coachedTeams)}
+        </p>
+      </section>
+
+      {notice && (
+        <p
+          role="status"
+          className="border border-primary/25 bg-primary/8 px-4 py-3 text-body-sm text-text-primary"
+        >
+          {notice}
+        </p>
+      )}
+
+      <div className="grid grid-cols-1 gap-4 xl:grid-cols-[minmax(0,1fr)_20rem]">
+        <form className="space-y-5 border bg-card p-4" onSubmit={handleSubmit}>
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <div
+              className="inline-flex w-full border bg-background p-1 sm:w-auto"
+              role="group"
+              aria-label="Letter type"
+            >
+              <ModeButton mode="mail" activeMode={mode} onSelect={setModeSafely} />
+              <ModeButton mode="pdf" activeMode={mode} onSelect={setModeSafely} />
+            </div>
+
+            <Badge tone="accent" className="justify-start sm:justify-center">
+              {teamLabel(coachedTeams)}
+            </Badge>
+          </div>
+
+          {mode === 'mail' && (
+            <div className="space-y-1.5">
+              <Label htmlFor="letter-subject">Subject</Label>
+              <Input
+                id="letter-subject"
+                value={subject}
+                onChange={(event) => setSubject(event.target.value)}
+                required
+                disabled={isPending}
+                aria-invalid={formError !== null && subject.trim() === ''}
+              />
+            </div>
+          )}
+
+          <div className="space-y-1.5">
+            <Label htmlFor="letter-template">Template</Label>
+            <Textarea
+              ref={templateRef}
+              id="letter-template"
+              value={template}
+              onChange={(event) => setTemplate(event.target.value)}
+              required
+              disabled={isPending}
+              aria-invalid={formError !== null && template.trim() === ''}
+              className="min-h-72 font-mono text-sm leading-relaxed"
+            />
+          </div>
+
+          {formError && (
+            <p className="border border-destructive/30 bg-destructive/10 px-3 py-2 text-body-sm text-destructive">
+              {formError}
+            </p>
+          )}
+
+          <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+            <Button type="submit" disabled={isPending}>
+              {mode === 'mail' ? <Send /> : <Download />}
+              {isPending ? MODE_COPY[mode].pending : MODE_COPY[mode].submit}
+            </Button>
+          </div>
+        </form>
+
+        <aside className="space-y-3 border bg-card p-4">
+          <div className="flex items-center justify-between gap-3">
+            <h2 className="text-caption font-semibold uppercase tracking-[0.12em] text-text-tertiary">
+              Placeholders
+            </h2>
+            <Badge size="sm">{TEMPLATE_TOKENS.length}</Badge>
+          </div>
+
+          <div className="flex flex-wrap gap-2">
+            {TEMPLATE_TOKENS.map((token) => (
+              <button
+                key={token}
+                type="button"
+                disabled={isPending}
+                onClick={() => insertTemplateToken(token)}
+                className="border bg-background px-2 py-1 font-mono text-caption text-text-secondary transition-colors hover:border-primary/50 hover:text-text-primary disabled:pointer-events-none disabled:opacity-50"
+              >
+                {token}
+              </button>
+            ))}
+          </div>
+
+          <div className="border-t pt-3">
+            <p className="text-caption font-semibold uppercase tracking-[0.12em] text-text-tertiary">
+              Template text
+            </p>
+            <pre className="mt-2 max-h-52 overflow-auto border bg-background p-3 font-mono text-caption leading-relaxed text-text-secondary whitespace-pre-wrap">
+              {template || ' '}
+            </pre>
+          </div>
+        </aside>
+      </div>
+    </>
+  )
+}
+
+function ModeButton({
+  mode,
+  activeMode,
+  onSelect,
+}: {
+  mode: LetterMode
+  activeMode: LetterMode
+  onSelect: (mode: LetterMode) => void
+}) {
+  const active = mode === activeMode
+  const Icon = mode === 'mail' ? Mail : FileText
 
   return (
-    <div>
-      <h1 className="font-display text-display-lg uppercase tracking-wide">Letters</h1>
-      {hello && <p className="mt-2 text-sm text-muted-foreground">{hello}</p>}
+    <Button
+      type="button"
+      variant={active ? 'default' : 'ghost'}
+      size="sm"
+      aria-pressed={active}
+      onClick={() => onSelect(mode)}
+      className={cn('flex-1 sm:flex-none', !active && 'text-text-secondary')}
+    >
+      <Icon />
+      {MODE_COPY[mode].label}
+    </Button>
+  )
+}
+
+function LoadingState() {
+  return (
+    <div className="grid grid-cols-1 gap-4 xl:grid-cols-[minmax(0,1fr)_20rem]">
+      <div className="space-y-4 border bg-card p-4">
+        <Skeleton className="h-10 w-48" />
+        <Skeleton className="h-10 w-full" />
+        <Skeleton className="h-72 w-full" />
+        <Skeleton className="ml-auto h-10 w-32" />
+      </div>
+      <Skeleton className="h-80 border" />
+    </div>
+  )
+}
+
+function EmptyState({ title, description }: { title: string; description: string }) {
+  return (
+    <div className="border bg-card px-4 py-8 text-center">
+      <p className="text-body-sm font-medium text-text-primary">{title}</p>
+      <p className="mt-1 text-caption text-text-tertiary">{description}</p>
     </div>
   )
 }
+
+function audienceSentence(teams: Team[]) {
+  if (teams.length === 1) {
+    return `This will go to everyone on ${teams[0].name}.`
+  }
+
+  return `This will go to everyone on your coached teams: ${teams.map((team) => team.name).join(', ')}.`
+}
+
+function teamLabel(teams: Team[]) {
+  if (teams.length === 1) return teams[0].name
+  return `${teams.length} teams`
+}
+
+function pdfFileName(teams: Team[]) {
+  const base = teams.length === 1 ? teams[0].name : 'team-letter'
+  const safeBase = base
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/(^-|-$)/g, '')
+
+  return `${safeBase || 'team-letter'}.pdf`
+}
+
+function downloadBlob(blob: Blob, fileName: string) {
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = fileName
+  document.body.append(link)
+  link.click()
+  link.remove()
+  window.setTimeout(() => URL.revokeObjectURL(url), 0)
+}
diff --git a/web-client/src/features/organization/api/queries.ts b/web-client/src/features/organization/api/queries.ts
index dbfcc02d..54dae4ac 100644
--- a/web-client/src/features/organization/api/queries.ts
+++ b/web-client/src/features/organization/api/queries.ts
@@ -1,7 +1,9 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 
-import { sportFixtures, sportsById, teamFixtures } from '@/mocks/fixtures'
+import { getCurrentUser } from '@/features/auth/currentUser'
+import { memberNamesById, sportFixtures, sportsById, teamFixtures } from '@/mocks/fixtures'
 import { mockOr } from '@/mocks/mockSwitch'
+import { isTeamCoach, type AuthUser, type MemberRef } from '@/types'
 import { organizationClient } from './client'
 import type {
   Sport,
@@ -102,7 +104,7 @@ export function useTeamsList(enabled = true) {
     queryKey: organizationKeys.teams,
     queryFn: () =>
       mockOr(
-        () => Promise.resolve(teamFixtures),
+        () => Promise.resolve(teamFixtures.map(cloneTeam)),
         () => organizationClient.get<Team[]>('/teams').then(r => r.data),
       ),
     enabled,
@@ -118,7 +120,7 @@ export function useTeam(id: string) {
         () => {
           const found = teamFixtures.find(t => t.id === id)
           if (!found) throw new Error('Team not found')
-          return Promise.resolve(found)
+          return Promise.resolve(cloneTeam(found))
         },
         () => organizationClient.get<Team>(`/teams/${id}`).then(r => r.data),
       ),
@@ -139,7 +141,11 @@ export function useUpdateTeam() {
   const qc = useQueryClient()
 
   return useMutation<Team, Error, { id: string } & TeamPartialUpdate>({
-    mutationFn: ({ id, ...data }) => organizationClient.patch<Team>(`/teams/${id}`, data).then(r => r.data),
+    mutationFn: ({ id, ...data }) =>
+      mockOr(
+        () => mockUpdateTeam({ id, ...data }),
+        () => organizationClient.patch<Team>(`/teams/${id}`, data).then(r => r.data),
+      ),
     onSuccess: (_, { id }) => {
       qc.invalidateQueries({ queryKey: organizationKeys.teams })
       qc.invalidateQueries({ queryKey: organizationKeys.team(id) })
@@ -158,3 +164,98 @@ export function useDeleteTeam() {
     },
   })
 }
+
+const pendingTeamUpdates = new Set<string>()
+
+function mockUpdateTeam({ id, ...data }: { id: string } & TeamPartialUpdate): Promise<Team> {
+  if (pendingTeamUpdates.has(id)) {
+    throw mockHttpError(409, 'A team update is already in progress.')
+  }
+
+  pendingTeamUpdates.add(id)
+  const user = getCurrentUser()
+
+  try {
+    const index = teamFixtures.findIndex((team) => team.id === id)
+    const team = teamFixtures[index]
+
+    if (!team) throw mockHttpError(404, 'Team not found')
+    if (!canUpdateTeam(team, user)) {
+      throw mockHttpError(403, 'You are not allowed to update this team.')
+    }
+    if (data.name !== undefined && data.name.trim() === '') {
+      throw mockHttpError(400, 'Name is required.')
+    }
+    if (data.sport !== undefined && user.role !== 'admin') {
+      throw mockHttpError(403, 'Only admins can change a team sport.')
+    }
+    if (data.trainers !== undefined && user.role !== 'admin' && user.role !== 'director') {
+      throw mockHttpError(403, 'Only admins and directors can change team coaches.')
+    }
+
+    const nextSport = data.sport !== undefined ? sportsById[data.sport] : undefined
+    if (data.sport !== undefined && !nextSport) {
+      throw mockHttpError(400, 'Sport not found.')
+    }
+
+    const updated: Team = {
+      ...team,
+      name: data.name ?? team.name,
+      description: data.description ?? team.description,
+      address: data.address ?? team.address,
+      sport: nextSport ? { id: nextSport.id, name: nextSport.name } : team.sport,
+      trainers: data.trainers !== undefined ? memberRefsFromIds(data.trainers) : team.trainers,
+      trainees: data.trainees !== undefined ? memberRefsFromIds(data.trainees) : team.trainees,
+    }
+
+    teamFixtures[index] = updated
+    return Promise.resolve(cloneTeam(updated)).finally(() => {
+      pendingTeamUpdates.delete(id)
+    })
+  } catch (error) {
+    pendingTeamUpdates.delete(id)
+    throw error
+  }
+}
+
+function canUpdateTeam(team: Team, user: AuthUser): boolean {
+  switch (user.role) {
+    case 'admin':
+      return true
+    case 'director':
+      return sportFixtures
+        .find((sport) => sport.id === team.sport.id)
+        ?.directors.some((director) => director.id === user.id) ?? false
+    case 'trainer':
+      return isTeamCoach(team, user.id)
+    case 'member':
+      return false
+  }
+}
+
+function memberRefsFromIds(ids: string[]): MemberRef[] {
+  return ids.map((id) => {
+    const name = memberNamesById[id]
+    if (!name) throw mockHttpError(400, 'Member not found.')
+    return { id, name }
+  })
+}
+
+function cloneTeam(team: Team): Team {
+  return {
+    ...team,
+    sport: { ...team.sport },
+    trainers: team.trainers.map((trainer) => ({ ...trainer })),
+    trainees: team.trainees.map((trainee) => ({ ...trainee })),
+  }
+}
+
+function mockHttpError(status: number, message: string): Error {
+  return Object.assign(new Error(message), {
+    isAxiosError: true,
+    response: {
+      status,
+      data: { message },
+    },
+  })
+}
diff --git a/web-client/src/features/organization/components/TeamEditorDialog.tsx b/web-client/src/features/organization/components/TeamEditorDialog.tsx
new file mode 100644
index 00000000..e37944b9
--- /dev/null
+++ b/web-client/src/features/organization/components/TeamEditorDialog.tsx
@@ -0,0 +1,384 @@
+import { type FormEvent, useMemo, useState } from 'react'
+import { X } from 'lucide-react'
+
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Textarea } from '@/components/ui/textarea'
+import { useAuth } from '@/features/auth'
+import { useMembers } from '@/features/members/api/queries'
+import { toggleId } from '@/lib/id-selection'
+import { serverErrorMessage } from '@/lib/server-error'
+import { cn } from '@/lib/utils'
+import type { AuthUser, Sport } from '@/types'
+import { useSportsList, useTeamsList, useUpdateTeam } from '../api/queries'
+import {
+  buildMemberPickerOptions,
+  buildTeamEditorInitialState,
+  buildTeamUpdatePayload,
+  teamEditorFieldsForUser,
+  type TeamEditorField,
+  validateTeamEditorForm,
+  type MemberPickerOption,
+} from '../model/teamEditor'
+import { type TeamEditorTarget, useOrganizationUiStore } from '../model/organizationUiStore'
+
+export function TeamEditorDialog() {
+  const target = useOrganizationUiStore((state) => state.editorTarget)
+  const closeEditor = useOrganizationUiStore((state) => state.closeEditor)
+  const key = target?.teamId ?? 'closed'
+
+  return (
+    <Dialog open={target !== null} onOpenChange={(open) => !open && closeEditor()}>
+      {target && <TeamEditorForm key={key} target={target} />}
+    </Dialog>
+  )
+}
+
+function TeamEditorForm({ target }: { target: TeamEditorTarget }) {
+  const { user } = useAuth()
+  const teamsQuery = useTeamsList()
+  const sportsQuery = useSportsList()
+  const membersQuery = useMembers()
+  const queryError = teamsQuery.error ?? sportsQuery.error ?? membersQuery.error
+  const team = teamsQuery.data?.find((candidate) => candidate.id === target.teamId)
+
+  if (queryError) {
+    return (
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit Team</DialogTitle>
+        </DialogHeader>
+        <p className="border border-destructive/30 bg-destructive/10 px-3 py-2 text-body-sm text-destructive">
+          {serverErrorMessage(queryError)}
+        </p>
+      </DialogContent>
+    )
+  }
+
+  if (
+    teamsQuery.isLoading ||
+    sportsQuery.isLoading ||
+    membersQuery.isLoading ||
+    !teamsQuery.data ||
+    !sportsQuery.data ||
+    !membersQuery.data
+  ) {
+    return (
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit Team</DialogTitle>
+        </DialogHeader>
+        <p className="border bg-card px-4 py-3 text-body-sm text-text-secondary">
+          Loading team form.
+        </p>
+      </DialogContent>
+    )
+  }
+
+  if (!team) {
+    return (
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit Team</DialogTitle>
+        </DialogHeader>
+        <p className="border border-destructive/30 bg-destructive/10 px-3 py-2 text-body-sm text-destructive">
+          Team not found.
+        </p>
+      </DialogContent>
+    )
+  }
+
+  return (
+    <TeamEditorLoaded
+      team={team}
+      sports={sportsQuery.data}
+      members={membersQuery.data}
+      user={user}
+    />
+  )
+}
+
+function TeamEditorLoaded({
+  team,
+  sports,
+  members,
+  user,
+}: {
+  team: NonNullable<ReturnType<typeof useTeamsList>['data']>[number]
+  sports: Sport[]
+  members: NonNullable<ReturnType<typeof useMembers>['data']>
+  user: AuthUser
+}) {
+  const editableFields = useMemo(
+    () => teamEditorFieldsForUser(team, sports, user),
+    [sports, team, user],
+  )
+
+  if (editableFields.length === 0) {
+    return (
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit Team</DialogTitle>
+          <DialogDescription>{team.sport.name}</DialogDescription>
+        </DialogHeader>
+        <p className="border border-destructive/30 bg-destructive/10 px-3 py-2 text-body-sm text-destructive">
+          You are not allowed to update this team.
+        </p>
+      </DialogContent>
+    )
+  }
+
+  return <TeamEditorEditable team={team} members={members} editableFields={editableFields} />
+}
+
+function TeamEditorEditable({
+  team,
+  members,
+  editableFields,
+}: {
+  team: NonNullable<ReturnType<typeof useTeamsList>['data']>[number]
+  members: NonNullable<ReturnType<typeof useMembers>['data']>
+  editableFields: readonly TeamEditorField[]
+}) {
+  const closeEditor = useOrganizationUiStore((state) => state.closeEditor)
+  const setMutationNotice = useOrganizationUiStore((state) => state.setMutationNotice)
+  const updateTeam = useUpdateTeam()
+  const [form, setForm] = useState(() => buildTeamEditorInitialState(team))
+  const [traineeSearch, setTraineeSearch] = useState('')
+  const [formError, setFormError] = useState<string | null>(null)
+  const fields = useMemo(() => new Set(editableFields), [editableFields])
+  const memberOptions = useMemo(
+    () => buildMemberPickerOptions(members, team.trainees),
+    [members, team.trainees],
+  )
+  const isPending = updateTeam.isPending
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+
+    const validationError = validateTeamEditorForm(form, editableFields)
+    if (validationError) {
+      setFormError(validationError)
+      return
+    }
+
+    const payload = buildTeamUpdatePayload(team, form, editableFields)
+    setFormError(null)
+
+    if (Object.keys(payload).length === 0) {
+      closeEditor()
+      return
+    }
+
+    try {
+      await updateTeam.mutateAsync({ id: team.id, ...payload })
+      setMutationNotice('Team updated.')
+      closeEditor()
+    } catch (error) {
+      setFormError(serverErrorMessage(error))
+    }
+  }
+
+  return (
+    <DialogContent className="max-h-[92vh] overflow-y-auto sm:max-w-2xl">
+      <DialogHeader>
+        <DialogTitle>Edit Team</DialogTitle>
+        <DialogDescription>{team.sport.name}</DialogDescription>
+      </DialogHeader>
+
+      <form className="space-y-5" onSubmit={handleSubmit}>
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          {fields.has('name') && (
+            <div className="space-y-1.5 sm:col-span-2">
+              <Label htmlFor="team-name">Name</Label>
+              <Input
+                id="team-name"
+                value={form.name}
+                onChange={(event) => setForm({ ...form, name: event.target.value })}
+                required
+                disabled={isPending}
+                aria-invalid={formError !== null && form.name.trim() === ''}
+              />
+            </div>
+          )}
+
+          {fields.has('description') && (
+            <div className="space-y-1.5 sm:col-span-2">
+              <Label htmlFor="team-description">Description</Label>
+              <Textarea
+                id="team-description"
+                value={form.description}
+                onChange={(event) => setForm({ ...form, description: event.target.value })}
+                disabled={isPending}
+                className="min-h-24"
+              />
+            </div>
+          )}
+
+          {fields.has('address') && (
+            <div className="space-y-1.5 sm:col-span-2">
+              <Label htmlFor="team-address">Address</Label>
+              <Input
+                id="team-address"
+                value={form.address}
+                onChange={(event) => setForm({ ...form, address: event.target.value })}
+                disabled={isPending}
+              />
+            </div>
+          )}
+        </div>
+
+        {fields.has('trainees') && (
+          <TraineeSelector
+            options={memberOptions}
+            selectedIds={form.traineeIds}
+            search={traineeSearch}
+            disabled={isPending}
+            onSearchChange={setTraineeSearch}
+            onToggle={(id) =>
+              setForm((current) => ({
+                ...current,
+                traineeIds: toggleId(current.traineeIds, id),
+              }))
+            }
+          />
+        )}
+
+        {formError && (
+          <p className="border border-destructive/30 bg-destructive/10 px-3 py-2 text-body-sm text-destructive">
+            {formError}
+          </p>
+        )}
+
+        <DialogFooter>
+          <Button type="button" variant="outline" onClick={closeEditor} disabled={isPending}>
+            Cancel
+          </Button>
+          <Button type="submit" disabled={isPending}>
+            {isPending ? 'Saving' : 'Save Team'}
+          </Button>
+        </DialogFooter>
+      </form>
+    </DialogContent>
+  )
+}
+
+function TraineeSelector({
+  options,
+  selectedIds,
+  search,
+  disabled,
+  onSearchChange,
+  onToggle,
+}: {
+  options: MemberPickerOption[]
+  selectedIds: string[]
+  search: string
+  disabled: boolean
+  onSearchChange: (search: string) => void
+  onToggle: (id: string) => void
+}) {
+  const normalizedSearch = search.trim().toLowerCase()
+  const visibleOptions = normalizedSearch
+    ? options.filter((option) =>
+        `${option.name} ${option.meta ?? ''}`.toLowerCase().includes(normalizedSearch),
+      )
+    : options
+  const selectedOptions = selectedIds
+    .map((id) => options.find((option) => option.id === id))
+    .filter((option): option is MemberPickerOption => option !== undefined)
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between gap-3">
+        <Label htmlFor="team-trainee-search">Trainees</Label>
+        <Badge size="sm">{selectedIds.length}</Badge>
+      </div>
+
+      {selectedOptions.length > 0 && (
+        <div className="flex max-h-28 flex-wrap gap-1.5 overflow-y-auto border bg-card p-2">
+          {selectedOptions.map((option) => (
+            <Badge key={option.id} className="gap-1">
+              {option.name}
+              <button
+                type="button"
+                className="inline-flex size-4 items-center justify-center text-text-tertiary hover:text-destructive disabled:pointer-events-none disabled:opacity-50"
+                disabled={disabled}
+                onClick={() => onToggle(option.id)}
+              >
+                <X className="size-3" />
+                <span className="sr-only">Remove {option.name}</span>
+              </button>
+            </Badge>
+          ))}
+        </div>
+      )}
+
+      <Input
+        id="team-trainee-search"
+        value={search}
+        onChange={(event) => onSearchChange(event.target.value)}
+        placeholder="Search members"
+        disabled={disabled}
+      />
+
+      {options.length === 0 ? (
+        <p className="border bg-card px-3 py-2 text-body-sm text-text-secondary">
+          No members available.
+        </p>
+      ) : visibleOptions.length === 0 ? (
+        <p className="border bg-card px-3 py-2 text-body-sm text-text-secondary">
+          No members match that search.
+        </p>
+      ) : (
+        <div className="grid max-h-56 grid-cols-1 gap-2 overflow-y-auto sm:grid-cols-2">
+          {visibleOptions.map((option) => {
+            const selected = selectedIds.includes(option.id)
+
+            return (
+              <button
+                key={option.id}
+                type="button"
+                aria-pressed={selected}
+                disabled={disabled}
+                onClick={() => onToggle(option.id)}
+                className={cn(
+                  'flex min-h-12 items-center justify-between gap-3 border px-3 py-2 text-left transition-colors disabled:pointer-events-none disabled:opacity-50',
+                  selected
+                    ? 'border-primary bg-primary/10 text-text-primary'
+                    : 'border-border bg-card hover:bg-muted/60',
+                )}
+              >
+                <span className="min-w-0">
+                  <span className="block truncate text-body-sm font-medium">{option.name}</span>
+                  {option.meta && (
+                    <span className="mt-0.5 block truncate text-caption text-text-tertiary">
+                      {option.meta}
+                    </span>
+                  )}
+                </span>
+                <span
+                  className={cn(
+                    'size-3 shrink-0 border',
+                    selected ? 'border-primary bg-primary' : 'border-border',
+                  )}
+                  aria-hidden="true"
+                />
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/web-client/src/features/organization/model/organizationUiStore.ts b/web-client/src/features/organization/model/organizationUiStore.ts
new file mode 100644
index 00000000..ee1ee230
--- /dev/null
+++ b/web-client/src/features/organization/model/organizationUiStore.ts
@@ -0,0 +1,22 @@
+import { create } from 'zustand'
+
+export interface TeamEditorTarget {
+  teamId: string
+}
+
+interface OrganizationUiState {
+  editorTarget: TeamEditorTarget | null
+  mutationNotice: string | null
+  openEditTeam: (teamId: string) => void
+  closeEditor: () => void
+  setMutationNotice: (notice: string | null) => void
+}
+
+export const useOrganizationUiStore = create<OrganizationUiState>((set) => ({
+  editorTarget: null,
+  mutationNotice: null,
+  openEditTeam: (teamId) =>
+    set({ editorTarget: { teamId }, mutationNotice: null }),
+  closeEditor: () => set({ editorTarget: null }),
+  setMutationNotice: (notice) => set({ mutationNotice: notice }),
+}))
diff --git a/web-client/src/features/organization/model/teamEditor.test.ts b/web-client/src/features/organization/model/teamEditor.test.ts
new file mode 100644
index 00000000..625a2214
--- /dev/null
+++ b/web-client/src/features/organization/model/teamEditor.test.ts
@@ -0,0 +1,164 @@
+import { describe, expect, it } from 'vitest'
+
+import type { AuthUser, MemberRef, Sport, Team } from '@/types'
+import {
+  adminTeamEditorFields,
+  buildMemberPickerOptions,
+  buildTeamEditorInitialState,
+  buildTeamUpdatePayload,
+  coachTeamEditorFields,
+  directorTeamEditorFields,
+  teamEditorFieldsForUser,
+  validateTeamEditorForm,
+} from './teamEditor'
+
+const sport = { id: 'sport-1', name: 'Football' }
+
+function ref(id: string, name: string): MemberRef {
+  return { id, name }
+}
+
+const sportDetails: Sport = {
+  ...sport,
+  description: 'Football squads.',
+  created_at: '2026-01-01',
+  directors: [ref('director-1', 'Director One')],
+}
+
+function user(member: MemberRef, role: AuthUser['role']): AuthUser {
+  return {
+    id: member.id,
+    name: member.name,
+    email: `${member.id}@club.test`,
+    role,
+  }
+}
+
+function team(overrides: Partial<Team> = {}): Team {
+  return {
+    id: 'team-1',
+    name: 'Football Juniors',
+    description: 'Junior squad.',
+    created_at: '2026-01-01',
+    address: 'Club grounds',
+    sport,
+    trainers: [ref('coach-1', 'Coach One')],
+    trainees: [ref('member-1', 'Member One'), ref('member-2', 'Member Two')],
+    ...overrides,
+  }
+}
+
+describe('team editor helpers', () => {
+  it('builds a changed-fields-only payload for coach-editable fields', () => {
+    const baseTeam = team()
+    const form = {
+      ...buildTeamEditorInitialState(baseTeam),
+      name: 'Football U16',
+      description: 'Junior squad.',
+      address: 'New pitch',
+    }
+
+    expect(buildTeamUpdatePayload(baseTeam, form, coachTeamEditorFields)).toEqual({
+      name: 'Football U16',
+      address: 'New pitch',
+    })
+  })
+
+  it('sends a full trainee replacement list when trainees change, including empty lists', () => {
+    const baseTeam = team()
+
+    expect(
+      buildTeamUpdatePayload(
+        baseTeam,
+        { ...buildTeamEditorInitialState(baseTeam), traineeIds: ['member-2', 'member-3'] },
+        coachTeamEditorFields,
+      ),
+    ).toEqual({ trainees: ['member-2', 'member-3'] })
+
+    expect(
+      buildTeamUpdatePayload(
+        baseTeam,
+        { ...buildTeamEditorInitialState(baseTeam), traineeIds: [] },
+        coachTeamEditorFields,
+      ),
+    ).toEqual({ trainees: [] })
+  })
+
+  it('does not treat reordered trainee ids as a change', () => {
+    const baseTeam = team()
+
+    expect(
+      buildTeamUpdatePayload(
+        baseTeam,
+        { ...buildTeamEditorInitialState(baseTeam), traineeIds: ['member-2', 'member-1'] },
+        coachTeamEditorFields,
+      ),
+    ).toEqual({})
+  })
+
+  it('validates the required name field only when it is enabled', () => {
+    const form = { name: ' ', description: '', address: '', traineeIds: [] }
+
+    expect(validateTeamEditorForm(form, coachTeamEditorFields)).toBe('Name is required.')
+    expect(validateTeamEditorForm(form, ['trainees'])).toBeNull()
+  })
+
+  it('detects raw whitespace edits and trims only the submitted values', () => {
+    const baseTeam = team({ description: '', address: 'Club grounds' })
+
+    expect(
+      buildTeamUpdatePayload(
+        baseTeam,
+        { ...buildTeamEditorInitialState(baseTeam), description: '   ' },
+        ['description'],
+      ),
+    ).toEqual({ description: '' })
+
+    expect(
+      buildTeamUpdatePayload(
+        baseTeam,
+        { ...buildTeamEditorInitialState(baseTeam), address: 'Club grounds ' },
+        ['address'],
+      ),
+    ).toEqual({ address: 'Club grounds' })
+  })
+
+  it('derives editable fields from the current role and team relationship', () => {
+    const coach = ref('coach-1', 'Coach One')
+    const director = ref('director-1', 'Director One')
+    const outsider = ref('member-9', 'Member Nine')
+    const baseTeam = team({ trainers: [coach] })
+
+    expect(teamEditorFieldsForUser(baseTeam, [sportDetails], user(coach, 'trainer'))).toEqual(
+      coachTeamEditorFields,
+    )
+    expect(teamEditorFieldsForUser(baseTeam, [sportDetails], user(director, 'director'))).toEqual(
+      directorTeamEditorFields,
+    )
+    expect(teamEditorFieldsForUser(baseTeam, [sportDetails], user(outsider, 'admin'))).toEqual(
+      adminTeamEditorFields,
+    )
+    expect(teamEditorFieldsForUser(baseTeam, [sportDetails], user(outsider, 'trainer'))).toEqual(
+      [],
+    )
+  })
+
+  it('builds member picker options from known members and current refs', () => {
+    expect(
+      buildMemberPickerOptions(
+        [
+          {
+            id: 'member-1',
+            first_name: 'Known',
+            last_name: 'Member',
+            email: 'known@example.test',
+          },
+        ],
+        [ref('member-2', 'Current Member')],
+      ),
+    ).toEqual([
+      { id: 'member-2', name: 'Current Member' },
+      { id: 'member-1', name: 'Known Member', meta: 'known@example.test' },
+    ])
+  })
+})
diff --git a/web-client/src/features/organization/model/teamEditor.ts b/web-client/src/features/organization/model/teamEditor.ts
new file mode 100644
index 00000000..7fc40fad
--- /dev/null
+++ b/web-client/src/features/organization/model/teamEditor.ts
@@ -0,0 +1,162 @@
+import { sameIds } from '@/lib/id-selection'
+import {
+  isTeamCoach,
+  type AuthUser,
+  type MemberRef,
+  type MemberSummary,
+  type Sport,
+  type Team,
+  type TeamPartialUpdate,
+} from '@/types'
+
+export type TeamEditorField =
+  | 'name'
+  | 'description'
+  | 'address'
+  | 'trainees'
+  | 'sport'
+  | 'trainers'
+
+export const coachTeamEditorFields = [
+  'name',
+  'description',
+  'address',
+  'trainees',
+] as const satisfies readonly TeamEditorField[]
+
+export const directorTeamEditorFields = [
+  'name',
+  'description',
+  'address',
+  'trainees',
+  'trainers',
+] as const satisfies readonly TeamEditorField[]
+
+export const adminTeamEditorFields = [
+  'name',
+  'description',
+  'address',
+  'trainees',
+  'sport',
+  'trainers',
+] as const satisfies readonly TeamEditorField[]
+
+export interface TeamEditorFormState {
+  name: string
+  description: string
+  address: string
+  traineeIds: string[]
+}
+
+export interface MemberPickerOption {
+  id: string
+  name: string
+  meta?: string
+}
+
+export function buildTeamEditorInitialState(team: Team): TeamEditorFormState {
+  return {
+    name: team.name,
+    description: team.description ?? '',
+    address: team.address ?? '',
+    traineeIds: team.trainees.map((member) => member.id),
+  }
+}
+
+export function validateTeamEditorForm(
+  form: TeamEditorFormState,
+  fields: readonly TeamEditorField[],
+): string | null {
+  if (fields.includes('name') && form.name.trim() === '') {
+    return 'Name is required.'
+  }
+
+  return null
+}
+
+export function buildTeamUpdatePayload(
+  team: Team,
+  form: TeamEditorFormState,
+  fields: readonly TeamEditorField[],
+): TeamPartialUpdate {
+  const enabledFields = new Set(fields)
+  const payload: TeamPartialUpdate = {}
+
+  if (enabledFields.has('name')) {
+    const name = form.name.trim()
+    if (form.name !== team.name) payload.name = name
+  }
+
+  if (enabledFields.has('description')) {
+    const description = form.description.trim()
+    if (form.description !== (team.description ?? '')) payload.description = description
+  }
+
+  if (enabledFields.has('address')) {
+    const address = form.address.trim()
+    if (form.address !== (team.address ?? '')) payload.address = address
+  }
+
+  if (enabledFields.has('trainees')) {
+    const currentTraineeIds = team.trainees.map((member) => member.id)
+    if (!sameIds(form.traineeIds, currentTraineeIds)) payload.trainees = form.traineeIds
+  }
+
+  return payload
+}
+
+export function buildMemberPickerOptions(
+  members: MemberSummary[],
+  currentMembers: MemberRef[],
+): MemberPickerOption[] {
+  const options = new Map<string, MemberPickerOption>()
+
+  for (const member of members) {
+    options.set(member.id, {
+      id: member.id,
+      name: memberSummaryName(member),
+      meta: member.email,
+    })
+  }
+
+  for (const member of currentMembers) {
+    if (!options.has(member.id)) {
+      options.set(member.id, {
+        id: member.id,
+        name: member.name,
+      })
+    }
+  }
+
+  return Array.from(options.values()).toSorted((a, b) => a.name.localeCompare(b.name))
+}
+
+export function teamEditorFieldsForUser(
+  team: Team,
+  sports: readonly Sport[],
+  user: AuthUser,
+): readonly TeamEditorField[] {
+  switch (user.role) {
+    case 'admin':
+      return adminTeamEditorFields
+    case 'director':
+      return isDirectorForTeam(team, sports, user.id) ? directorTeamEditorFields : []
+    case 'trainer':
+      return isTeamCoach(team, user.id) ? coachTeamEditorFields : []
+    case 'member':
+      return []
+  }
+}
+
+function memberSummaryName(member: MemberSummary): string {
+  const name = `${member.first_name} ${member.last_name}`.trim()
+  return name || member.email
+}
+
+function isDirectorForTeam(team: Team, sports: readonly Sport[], userId: string): boolean {
+  return (
+    sports
+      .find((sport) => sport.id === team.sport.id)
+      ?.directors.some((director) => director.id === userId) ?? false
+  )
+}
diff --git a/web-client/src/features/organization/model/useTeamsViewModel.ts b/web-client/src/features/organization/model/useTeamsViewModel.ts
index f8b8234e..bae56268 100644
--- a/web-client/src/features/organization/model/useTeamsViewModel.ts
+++ b/web-client/src/features/organization/model/useTeamsViewModel.ts
@@ -45,8 +45,8 @@ export function buildTeamsView(
     const teamView: TeamView = {
       id: team.id,
       name: team.name,
-      description: team.description,
-      address: team.address,
+      description: team.description ?? '',
+      address: team.address ?? '',
       trainers: team.trainers,
       trainees: team.trainees,
     }
@@ -98,6 +98,7 @@ export function useTeamsViewModel() {
   return {
     view,
     currentUserId: user.id,
+    currentUserRole: user.role,
     isLoading: sportsQuery.isLoading || teamsQuery.isLoading,
     error: sportsQuery.error ?? teamsQuery.error,
   }
diff --git a/web-client/src/features/organization/pages/OrganizationPage.tsx b/web-client/src/features/organization/pages/OrganizationPage.tsx
index 9bd57ab6..036b1a28 100644
--- a/web-client/src/features/organization/pages/OrganizationPage.tsx
+++ b/web-client/src/features/organization/pages/OrganizationPage.tsx
@@ -1,7 +1,8 @@
 import { useState } from 'react'
-import { ChevronRight } from 'lucide-react'
+import { ChevronRight, Pencil } from 'lucide-react'
 
 import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
 import { PageHeader } from '@/components/ui/page-header'
 import { Separator } from '@/components/ui/separator'
 import {
@@ -13,22 +14,30 @@ import {
 } from '@/components/ui/sheet'
 import { Skeleton } from '@/components/ui/skeleton'
 import { StatCard } from '@/components/ui/stat-card'
-import { memberRefName } from '@/types'
+import { isTeamCoach, memberRefName } from '@/types'
 import {
   type SportTeamsView,
   type TeamView,
   useTeamsViewModel,
 } from '../model/useTeamsViewModel'
+import { TeamEditorDialog } from '../components/TeamEditorDialog'
+import { useOrganizationUiStore } from '../model/organizationUiStore'
 
 const nameList = (refs: Parameters<typeof memberRefName>[0][]) =>
   refs.map(memberRefName).join(', ') || '--'
 
 export function OrganizationPage() {
-  const { view, currentUserId, isLoading, error } = useTeamsViewModel()
+  const { view, currentUserId, currentUserRole, isLoading, error } = useTeamsViewModel()
+  const openEditTeam = useOrganizationUiStore((state) => state.openEditTeam)
+  const mutationNotice = useOrganizationUiStore((state) => state.mutationNotice)
   const [openSport, setOpenSport] = useState<string | null>(null)
   const [rosterTeamId, setRosterTeamId] = useState<string | null>(null)
   const activeOpenSport = openSport ?? view.sports[0]?.name ?? ''
   const rosterTeam = findRosterTeam(view.sports, rosterTeamId)
+  const handleEditTeam = (teamId: string) => {
+    setRosterTeamId(null)
+    openEditTeam(teamId)
+  }
 
   return (
     <div className="mx-auto flex w-full max-w-content flex-col gap-5">
@@ -44,6 +53,15 @@ export function OrganizationPage() {
         </div>
       )}
 
+      {mutationNotice && (
+        <p
+          role="status"
+          className="border border-primary/25 bg-primary/8 px-4 py-3 text-body-sm text-text-primary"
+        >
+          {mutationNotice}
+        </p>
+      )}
+
       <StatsRow view={view} isLoading={isLoading} />
 
       {isLoading ? (
@@ -64,7 +82,9 @@ export function OrganizationPage() {
                     team={team}
                     sportName={team.sportName}
                     currentUserId={currentUserId}
+                    currentUserRole={currentUserRole}
                     onOpen={() => setRosterTeamId(team.id)}
+                    onEdit={() => handleEditTeam(team.id)}
                   />
                 ))}
               </div>
@@ -84,10 +104,12 @@ export function OrganizationPage() {
                     key={sport.name}
                     sport={sport}
                     currentUserId={currentUserId}
+                    currentUserRole={currentUserRole}
                     expanded={expanded}
                     withTopBorder={index > 0}
                     onToggle={() => setOpenSport(expanded ? '' : sport.name)}
                     onOpenTeam={setRosterTeamId}
+                    onEditTeam={handleEditTeam}
                   />
                 )
               })}
@@ -98,9 +120,17 @@ export function OrganizationPage() {
 
       <Sheet open={rosterTeamId !== null} onOpenChange={(open) => !open && setRosterTeamId(null)}>
         <SheetContent className="w-full gap-0 sm:max-w-md">
-          {rosterTeam && <RosterSheet team={rosterTeam} currentUserId={currentUserId} />}
+          {rosterTeam && (
+            <RosterSheet
+              team={rosterTeam}
+              currentUserId={currentUserId}
+              canEdit={currentUserRole === 'trainer' && isTeamCoach(rosterTeam, currentUserId)}
+              onEdit={() => handleEditTeam(rosterTeam.id)}
+            />
+          )}
         </SheetContent>
       </Sheet>
+      <TeamEditorDialog />
     </div>
   )
 }
@@ -151,17 +181,21 @@ function findRosterTeam(sports: SportTeamsView[], teamId: string | null) {
 function SportSection({
   sport,
   currentUserId,
+  currentUserRole,
   expanded,
   withTopBorder,
   onToggle,
   onOpenTeam,
+  onEditTeam,
 }: {
   sport: SportTeamsView
   currentUserId: string
+  currentUserRole: ReturnType<typeof useTeamsViewModel>['currentUserRole']
   expanded: boolean
   withTopBorder: boolean
   onToggle: () => void
   onOpenTeam: (id: string) => void
+  onEditTeam: (id: string) => void
 }) {
   return (
     <div className={withTopBorder ? 'border-t' : ''}>
@@ -197,35 +231,52 @@ function SportSection({
             sport.teams.map((team) => {
               const isCoach = isTeamCoach(team, currentUserId)
               const isTrainee = isTeamTrainee(team, currentUserId)
+              const canEdit = currentUserRole === 'trainer' && isCoach
 
               return (
                 <li key={team.id} className="border-b last:border-b-0">
-                  <button
-                    type="button"
-                    onClick={() => onOpenTeam(team.id)}
-                    className="flex w-full items-center gap-3 py-2.5 pl-11 pr-4 text-left transition-colors hover:bg-surface-sunken"
-                  >
-                    <div className="min-w-0 flex-1">
-                      <p className="text-body-sm font-medium text-text-primary">{team.name}</p>
-                      <p className="truncate text-caption text-text-tertiary">
-                        Coach {nameList(team.trainers)} - {team.trainees.length} members
-                      </p>
-                    </div>
-                    {(isCoach || isTrainee) && (
-                      <div className="flex shrink-0 items-center gap-1.5">
-                        {isCoach && (
-                          <Badge tone="accent" size="sm">
-                            Coach
-                          </Badge>
-                        )}
-                        {isTrainee && (
-                          <Badge tone="positive" size="sm">
-                            Trainee
-                          </Badge>
-                        )}
+                  <div className="flex items-stretch transition-colors hover:bg-surface-sunken">
+                    <button
+                      type="button"
+                      onClick={() => onOpenTeam(team.id)}
+                      className="flex min-w-0 flex-1 items-center gap-3 py-2.5 pl-11 pr-4 text-left"
+                    >
+                      <div className="min-w-0 flex-1">
+                        <p className="text-body-sm font-medium text-text-primary">{team.name}</p>
+                        <p className="truncate text-caption text-text-tertiary">
+                          Coach {nameList(team.trainers)} - {team.trainees.length} members
+                        </p>
+                      </div>
+                      {(isCoach || isTrainee) && (
+                        <div className="flex shrink-0 items-center gap-1.5">
+                          {isCoach && (
+                            <Badge tone="accent" size="sm">
+                              Coach
+                            </Badge>
+                          )}
+                          {isTrainee && (
+                            <Badge tone="positive" size="sm">
+                              Trainee
+                            </Badge>
+                          )}
+                        </div>
+                      )}
+                    </button>
+                    {canEdit && (
+                      <div className="flex items-center pr-4">
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon-sm"
+                          onClick={() => onEditTeam(team.id)}
+                          title={`Edit ${team.name}`}
+                        >
+                          <Pencil />
+                          <span className="sr-only">Edit {team.name}</span>
+                        </Button>
                       </div>
                     )}
-                  </button>
+                  </div>
                 </li>
               )
             })
@@ -240,53 +291,60 @@ function TeamSummaryCard({
   team,
   sportName,
   currentUserId,
+  currentUserRole,
   onOpen,
+  onEdit,
 }: {
   team: TeamView
   sportName: string
   currentUserId: string
+  currentUserRole: ReturnType<typeof useTeamsViewModel>['currentUserRole']
   onOpen: () => void
+  onEdit: () => void
 }) {
   const isCoach = isTeamCoach(team, currentUserId)
   const isTrainee = isTeamTrainee(team, currentUserId)
+  const canEdit = currentUserRole === 'trainer' && isCoach
 
   return (
-    <button
-      type="button"
-      onClick={onOpen}
-      className="border border-primary/30 bg-primary/4 p-4 text-left transition-colors hover:bg-primary/8"
-    >
-      <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0 flex-1">
-          <p className="text-caption uppercase tracking-[0.1em] text-primary">{sportName}</p>
-          <h3 className="mt-0.5 truncate text-h4">{team.name}</h3>
-        </div>
-        {(isCoach || isTrainee) && (
-          <div className="flex shrink-0 items-center gap-1.5">
-            {isCoach && (
-              <Badge tone="accent" size="sm">
-                Coach
-              </Badge>
-            )}
-            {isTrainee && (
-              <Badge tone="positive" size="sm">
-                Trainee
-              </Badge>
-            )}
+    <div className="border border-primary/30 bg-primary/4 p-4 transition-colors hover:bg-primary/8">
+      <button type="button" onClick={onOpen} className="block w-full text-left">
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0 flex-1">
+            <p className="text-caption uppercase tracking-[0.1em] text-primary">{sportName}</p>
+            <h3 className="mt-0.5 truncate text-h4">{team.name}</h3>
           </div>
-        )}
-      </div>
-      <p className="mt-2 text-caption text-text-tertiary">
-        Coach {nameList(team.trainers)} - {team.trainees.length} members
-      </p>
-    </button>
+          {(isCoach || isTrainee) && (
+            <div className="flex shrink-0 items-center gap-1.5">
+              {isCoach && (
+                <Badge tone="accent" size="sm">
+                  Coach
+                </Badge>
+              )}
+              {isTrainee && (
+                <Badge tone="positive" size="sm">
+                  Trainee
+                </Badge>
+              )}
+            </div>
+          )}
+        </div>
+        <p className="mt-2 text-caption text-text-tertiary">
+          Coach {nameList(team.trainers)} - {team.trainees.length} members
+        </p>
+      </button>
+      {canEdit && (
+        <div className="mt-3 flex justify-end">
+          <Button type="button" variant="outline" size="sm" onClick={onEdit}>
+            <Pencil />
+            Edit
+          </Button>
+        </div>
+      )}
+    </div>
   )
 }
 
-function isTeamCoach(team: TeamView, currentUserId: string) {
-  return team.trainers.some((member) => member.id === currentUserId)
-}
-
 function isTeamTrainee(team: TeamView, currentUserId: string) {
   return team.trainees.some((member) => member.id === currentUserId)
 }
@@ -294,26 +352,40 @@ function isTeamTrainee(team: TeamView, currentUserId: string) {
 function RosterSheet({
   team,
   currentUserId,
+  canEdit,
+  onEdit,
 }: {
   team: TeamView & { sportName: string }
   currentUserId: string
+  canEdit: boolean
+  onEdit: () => void
 }) {
   return (
     <>
       <SheetHeader>
-        <p className="text-caption font-semibold uppercase tracking-[0.2em] text-text-tertiary">
-          {team.sportName} team
-        </p>
-        <SheetTitle className="font-display text-h2 uppercase tracking-wide">
-          {team.name}
-        </SheetTitle>
-        <SheetDescription>{team.description}</SheetDescription>
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0">
+            <p className="text-caption font-semibold uppercase tracking-[0.2em] text-text-tertiary">
+              {team.sportName} team
+            </p>
+            <SheetTitle className="font-display text-h2 uppercase tracking-wide">
+              {team.name}
+            </SheetTitle>
+            <SheetDescription>{team.description || 'No description provided.'}</SheetDescription>
+          </div>
+          {canEdit && (
+            <Button type="button" variant="outline" size="sm" onClick={onEdit}>
+              <Pencil />
+              Edit
+            </Button>
+          )}
+        </div>
       </SheetHeader>
 
       <div className="flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto px-4 py-2">
         <div>
           <FieldLabel>Address</FieldLabel>
-          <p className="mt-0.5 text-body-sm">{team.address}</p>
+          <p className="mt-0.5 text-body-sm">{team.address || '--'}</p>
         </div>
 
         <div>
diff --git a/web-client/src/features/sport-events/components/SportEventEditorDialog.tsx b/web-client/src/features/sport-events/components/SportEventEditorDialog.tsx
index b853ce7e..cc2ca39f 100644
--- a/web-client/src/features/sport-events/components/SportEventEditorDialog.tsx
+++ b/web-client/src/features/sport-events/components/SportEventEditorDialog.tsx
@@ -15,6 +15,7 @@ import { Label } from '@/components/ui/label'
 import { Textarea } from '@/components/ui/textarea'
 import { useAuth } from '@/features/auth'
 import { useSportsList, useTeamsList } from '@/features/organization/api/queries'
+import { sameIds, toggleId } from '@/lib/id-selection'
 import { serverErrorMessage } from '@/lib/server-error'
 import { cn } from '@/lib/utils'
 import { memberRefName, type AuthUser, type Reference, type Sport, type Team } from '@/types'
@@ -690,22 +691,10 @@ function cleanedDescription(description: string): string | undefined {
   return cleaned.length > 0 ? cleaned : undefined
 }
 
-function toggleId(ids: string[], id: string): string[] {
-  return ids.includes(id) ? ids.filter((item) => item !== id) : [...ids, id]
-}
-
 function unique(ids: string[]): string[] {
   return Array.from(new Set(ids))
 }
 
-function sameIds(a: string[], b: string[]): boolean {
-  if (a.length !== b.length) return false
-
-  const sortedA = [...a].sort()
-  const sortedB = [...b].sort()
-  return sortedA.every((id, index) => id === sortedB[index])
-}
-
 function isoToLocalDateTime(iso: string): string {
   return dateToLocalDateTime(new Date(iso))
 }
diff --git a/web-client/src/lib/id-selection.ts b/web-client/src/lib/id-selection.ts
new file mode 100644
index 00000000..2f44076a
--- /dev/null
+++ b/web-client/src/lib/id-selection.ts
@@ -0,0 +1,11 @@
+export function toggleId(ids: readonly string[], id: string): string[] {
+  return ids.includes(id) ? ids.filter((item) => item !== id) : [...ids, id]
+}
+
+export function sameIds(a: readonly string[], b: readonly string[]): boolean {
+  if (a.length !== b.length) return false
+
+  const sortedA = [...a].sort()
+  const sortedB = [...b].sort()
+  return sortedA.every((id, index) => id === sortedB[index])
+}
diff --git a/web-client/src/types.ts b/web-client/src/types.ts
index cc40b78a..18ead2e5 100644
--- a/web-client/src/types.ts
+++ b/web-client/src/types.ts
@@ -134,6 +134,13 @@ export function memberRefName(ref: Reference): string {
   return ref.name
 }
 
+export function isTeamCoach(
+  team: { trainers: readonly Reference[] },
+  currentUserId: string,
+): boolean {
+  return team.trainers.some((member) => member.id === currentUserId)
+}
+
 /** Render a possibly-null creator reference; falls back when the author was deleted. */
 export function creatorName(ref: Reference | null, fallback = 'Unknown'): string {
   return ref ? memberRefName(ref) : fallback

From 8bc756b337c0c27fd3d602925b2f3e24ad36da38 Mon Sep 17 00:00:00 2001
From: FadyGergesRezk <84906847+FadyGergesRezk@users.noreply.github.com>
Date: Fri, 3 Jul 2026 15:13:24 +0200
Subject: [PATCH 10/11] fix: unify letters mock switch with shared mockOr
 pattern

---
 web-client/src/features/letters/api/queries.ts | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/web-client/src/features/letters/api/queries.ts b/web-client/src/features/letters/api/queries.ts
index 8dd258ef..3d781262 100644
--- a/web-client/src/features/letters/api/queries.ts
+++ b/web-client/src/features/letters/api/queries.ts
@@ -4,13 +4,6 @@ import { mockOr } from '@/mocks/mockSwitch'
 import { lettersClient } from './client'
 import type { GeneratePdfRequest, SendMailRequest } from '../types'
 
-const LETTER_SERVICE_LIVE_ENABLED = false
-
-function lettersMockOr<T>(mock: () => T, live: () => T): T {
-  // MOCK: Letter service is hello-world; live branch is contract-ready but unexercised.
-  return LETTER_SERVICE_LIVE_ENABLED ? mockOr(mock, live) : mock()
-}
-
 export const lettersKeys = {
   hello: ['letters', 'hello'] as const,
 }
@@ -19,7 +12,7 @@ export function useLettersHello() {
   return useQuery<string>({
     queryKey: lettersKeys.hello,
     queryFn: () =>
-      lettersMockOr(
+      mockOr(
         () => Promise.resolve('Letters service mock'),
         () => lettersClient.get<string>('/hello').then(r => r.data),
       ),
@@ -29,7 +22,7 @@ export function useLettersHello() {
 export function useSendMail() {
   return useMutation<void, Error, SendMailRequest>({
     mutationFn: data =>
-      lettersMockOr(
+      mockOr(
         () => Promise.resolve(),
         () =>
           lettersClient.post<void>('/mail', data, {
@@ -42,7 +35,7 @@ export function useSendMail() {
 export function useGeneratePdf() {
   return useMutation<Blob, Error, GeneratePdfRequest>({
     mutationFn: data =>
-      lettersMockOr(
+      mockOr(
         () => Promise.resolve(new Blob([data.template], { type: 'application/pdf' })),
         () =>
           lettersClient.post<Blob>('/pdf', data, {

From c0f205c0de7951ca5fb99725c4da9e49eee60bfb Mon Sep 17 00:00:00 2001
From: Raphael Frank <04.raphael.frank@gmail.com>
Date: Mon, 6 Jul 2026 14:28:40 +0200
Subject: [PATCH 11/11] fix: enforce documented role scoping on event creation

POST /events was gated only by the blanket hasAnyRole('admin','member')
check, so any authenticated member (including plain trainees) could
create events, and a trainer/director could create one for a team/sport
they don't actually coach/direct -- contradicting the endpoint's own
OpenAPI description ("Directors: for their sport. Trainers: for their
team. Admins: any event.").

Adds read-only shadows of organization.trainers/organization.directors
(same pattern already used for TeamEntity/SportEntity here, and for all
four in spring-letter) plus a sport_id column on the existing TeamEntity
shadow, so createEvent can check the requester is a trainer of one of
the linked teams, or a director of one of the linked/team-derived
sports, before saving -- otherwise 403.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../eventservice/entity/DirectorEntity.java   | 40 +++++++++++
 .../eventservice/entity/TeamEntity.java       |  3 +
 .../eventservice/entity/TrainerEntity.java    | 40 +++++++++++
 .../repository/DirectorRepository.java        |  8 +++
 .../repository/TrainerRepository.java         |  8 +++
 .../eventservice/service/EventService.java    | 36 ++++++++++
 .../service/EventServiceTest.java             | 68 +++++++++++++++++++
 7 files changed, 203 insertions(+)
 create mode 100644 services/spring-event/src/main/java/tum/devoops/eventservice/entity/DirectorEntity.java
 create mode 100644 services/spring-event/src/main/java/tum/devoops/eventservice/entity/TrainerEntity.java
 create mode 100644 services/spring-event/src/main/java/tum/devoops/eventservice/repository/DirectorRepository.java
 create mode 100644 services/spring-event/src/main/java/tum/devoops/eventservice/repository/TrainerRepository.java

diff --git a/services/spring-event/src/main/java/tum/devoops/eventservice/entity/DirectorEntity.java b/services/spring-event/src/main/java/tum/devoops/eventservice/entity/DirectorEntity.java
new file mode 100644
index 00000000..51f01072
--- /dev/null
+++ b/services/spring-event/src/main/java/tum/devoops/eventservice/entity/DirectorEntity.java
@@ -0,0 +1,40 @@
+package tum.devoops.eventservice.entity;
+
+import java.io.Serializable;
+import java.util.UUID;
+
+import jakarta.persistence.Column;
+import jakarta.persistence.Embeddable;
+import jakarta.persistence.EmbeddedId;
+import jakarta.persistence.Entity;
+import jakarta.persistence.Table;
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+
+/**
+ * Read-only shadow of {@code organization.directors}, owned by the organization service.
+ */
+@Entity
+@Table(schema = "organization", name = "directors")
+@Getter
+@NoArgsConstructor
+public class DirectorEntity {
+
+    // Composite PK: (sport_id, member_id).
+    @EmbeddedId
+    private Id id;
+
+    @Embeddable
+    @Data
+    @NoArgsConstructor
+    @AllArgsConstructor
+    public static class Id implements Serializable {
+        @Column(name = "sport_id", nullable = false)
+        private UUID sportId;
+
+        @Column(name = "member_id", nullable = false)
+        private UUID memberId;
+    }
+}
diff --git a/services/spring-event/src/main/java/tum/devoops/eventservice/entity/TeamEntity.java b/services/spring-event/src/main/java/tum/devoops/eventservice/entity/TeamEntity.java
index 8af6bac3..d45d522d 100644
--- a/services/spring-event/src/main/java/tum/devoops/eventservice/entity/TeamEntity.java
+++ b/services/spring-event/src/main/java/tum/devoops/eventservice/entity/TeamEntity.java
@@ -25,4 +25,7 @@ public class TeamEntity {
 
     @Column(name = "name", insertable = false, updatable = false)
     private String name;
+
+    @Column(name = "sport_id", insertable = false, updatable = false)
+    private UUID sportId;
 }
diff --git a/services/spring-event/src/main/java/tum/devoops/eventservice/entity/TrainerEntity.java b/services/spring-event/src/main/java/tum/devoops/eventservice/entity/TrainerEntity.java
new file mode 100644
index 00000000..418e042f
--- /dev/null
+++ b/services/spring-event/src/main/java/tum/devoops/eventservice/entity/TrainerEntity.java
@@ -0,0 +1,40 @@
+package tum.devoops.eventservice.entity;
+
+import java.io.Serializable;
+import java.util.UUID;
+
+import jakarta.persistence.Column;
+import jakarta.persistence.Embeddable;
+import jakarta.persistence.EmbeddedId;
+import jakarta.persistence.Entity;
+import jakarta.persistence.Table;
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+
+/**
+ * Read-only shadow of {@code organization.trainers}, owned by the organization service.
+ */
+@Entity
+@Table(schema = "organization", name = "trainers")
+@Getter
+@NoArgsConstructor
+public class TrainerEntity {
+
+    // Composite PK: (team_id, member_id).
+    @EmbeddedId
+    private Id id;
+
+    @Embeddable
+    @Data
+    @NoArgsConstructor
+    @AllArgsConstructor
+    public static class Id implements Serializable {
+        @Column(name = "team_id", nullable = false)
+        private UUID teamId;
+
+        @Column(name = "member_id", nullable = false)
+        private UUID memberId;
+    }
+}
diff --git a/services/spring-event/src/main/java/tum/devoops/eventservice/repository/DirectorRepository.java b/services/spring-event/src/main/java/tum/devoops/eventservice/repository/DirectorRepository.java
new file mode 100644
index 00000000..78fbad69
--- /dev/null
+++ b/services/spring-event/src/main/java/tum/devoops/eventservice/repository/DirectorRepository.java
@@ -0,0 +1,8 @@
+package tum.devoops.eventservice.repository;
+
+import org.springframework.data.jpa.repository.JpaRepository;
+
+import tum.devoops.eventservice.entity.DirectorEntity;
+
+public interface DirectorRepository extends JpaRepository<DirectorEntity, DirectorEntity.Id> {
+}
diff --git a/services/spring-event/src/main/java/tum/devoops/eventservice/repository/TrainerRepository.java b/services/spring-event/src/main/java/tum/devoops/eventservice/repository/TrainerRepository.java
new file mode 100644
index 00000000..88829205
--- /dev/null
+++ b/services/spring-event/src/main/java/tum/devoops/eventservice/repository/TrainerRepository.java
@@ -0,0 +1,8 @@
+package tum.devoops.eventservice.repository;
+
+import org.springframework.data.jpa.repository.JpaRepository;
+
+import tum.devoops.eventservice.entity.TrainerEntity;
+
+public interface TrainerRepository extends JpaRepository<TrainerEntity, TrainerEntity.Id> {
+}
diff --git a/services/spring-event/src/main/java/tum/devoops/eventservice/service/EventService.java b/services/spring-event/src/main/java/tum/devoops/eventservice/service/EventService.java
index ce02b1a0..9bea2005 100644
--- a/services/spring-event/src/main/java/tum/devoops/eventservice/service/EventService.java
+++ b/services/spring-event/src/main/java/tum/devoops/eventservice/service/EventService.java
@@ -15,9 +15,11 @@
 
 import tum.devoops.eventservice.converter.EventConverter;
 import tum.devoops.eventservice.entity.AttendanceEntity;
+import tum.devoops.eventservice.entity.DirectorEntity;
 import tum.devoops.eventservice.entity.EventEntity;
 import tum.devoops.eventservice.entity.SportEventEntity;
 import tum.devoops.eventservice.entity.TeamEventEntity;
+import tum.devoops.eventservice.entity.TrainerEntity;
 import tum.devoops.eventservice.exception.BadRequestException;
 import tum.devoops.eventservice.exception.ForbiddenException;
 import tum.devoops.eventservice.exception.NotFoundException;
@@ -26,12 +28,14 @@
 import tum.devoops.eventservice.model.EventPartialUpdate;
 import tum.devoops.eventservice.model.EventSummary;
 import tum.devoops.eventservice.repository.AttendanceRepository;
+import tum.devoops.eventservice.repository.DirectorRepository;
 import tum.devoops.eventservice.repository.EventRepository;
 import tum.devoops.eventservice.repository.MemberRepository;
 import tum.devoops.eventservice.repository.SportEventRepository;
 import tum.devoops.eventservice.repository.SportRepository;
 import tum.devoops.eventservice.repository.TeamEventRepository;
 import tum.devoops.eventservice.repository.TeamRepository;
+import tum.devoops.eventservice.repository.TrainerRepository;
 
 @Service
 public class EventService {
@@ -50,6 +54,10 @@ public class EventService {
     private SportRepository sportRepository;
     @Autowired
     private TeamRepository teamRepository;
+    @Autowired
+    private TrainerRepository trainerRepository;
+    @Autowired
+    private DirectorRepository directorRepository;
 
     @Transactional(readOnly = true)
     public List<EventSummary> getAllEvents(UUID requesterId, boolean isAdmin) {
@@ -99,6 +107,10 @@ public Event createEvent(EventCreate body, UUID requesterId, boolean isAdmin) {
             throw new BadRequestException("Event end time must be after start time");
         }
 
+        if (!isAdmin && !canCreateEvent(requesterId, body)) {
+            throw new ForbiddenException("Access denied");
+        }
+
         EventEntity entity = new EventEntity();
         entity.setName(body.getName());
         entity.setDescription(body.getDescription());
@@ -177,6 +189,30 @@ public void deleteEvent(UUID eventId, UUID requesterId, boolean isAdmin) {
         eventRepository.delete(entity);
     }
 
+    // Per the API contract: trainers may only create events for a team they coach; directors
+    // only for a sport they direct (either linked directly via sports_linked, or via one of the
+    // linked teams' sport). Admins bypass this entirely (checked by the caller).
+    private boolean canCreateEvent(UUID requesterId, EventCreate body) {
+        List<UUID> teamIds = body.getTeamsLinked() == null
+                ? List.of()
+                : body.getTeamsLinked().stream().map(t -> parseUuid(t, "teams_linked")).collect(Collectors.toList());
+
+        boolean isTrainerOfTeam = teamIds.stream()
+                .anyMatch(teamId -> trainerRepository.existsById(new TrainerEntity.Id(teamId, requesterId)));
+        if (isTrainerOfTeam) {
+            return true;
+        }
+
+        Set<UUID> sportIds = new HashSet<>();
+        if (body.getSportsLinked() != null) {
+            sportIds.addAll(body.getSportsLinked());
+        }
+        teamRepository.findAllById(teamIds).forEach(team -> sportIds.add(team.getSportId()));
+
+        return sportIds.stream()
+                .anyMatch(sportId -> directorRepository.existsById(new DirectorEntity.Id(sportId, requesterId)));
+    }
+
     private void persistLinks(UUID eventId, List<String> attendees, List<UUID> sports, List<String> teams) {
         if (attendees != null) {
             attendanceRepository.saveAll(buildAttendanceEntities(eventId, attendees));
diff --git a/services/spring-event/src/test/java/tum/devoops/eventservice/service/EventServiceTest.java b/services/spring-event/src/test/java/tum/devoops/eventservice/service/EventServiceTest.java
index 3d41fbfe..4e06c343 100644
--- a/services/spring-event/src/test/java/tum/devoops/eventservice/service/EventServiceTest.java
+++ b/services/spring-event/src/test/java/tum/devoops/eventservice/service/EventServiceTest.java
@@ -22,10 +22,13 @@
 import org.mockito.junit.jupiter.MockitoExtension;
 
 import tum.devoops.eventservice.entity.AttendanceEntity;
+import tum.devoops.eventservice.entity.DirectorEntity;
 import tum.devoops.eventservice.entity.MemberEntity;
 import tum.devoops.eventservice.entity.EventEntity;
 import tum.devoops.eventservice.entity.SportEventEntity;
+import tum.devoops.eventservice.entity.TeamEntity;
 import tum.devoops.eventservice.entity.TeamEventEntity;
+import tum.devoops.eventservice.entity.TrainerEntity;
 import tum.devoops.eventservice.exception.BadRequestException;
 import tum.devoops.eventservice.exception.ForbiddenException;
 import tum.devoops.eventservice.exception.NotFoundException;
@@ -35,12 +38,14 @@
 import tum.devoops.eventservice.model.EventSummary;
 import tum.devoops.eventservice.model.Reference;
 import tum.devoops.eventservice.repository.AttendanceRepository;
+import tum.devoops.eventservice.repository.DirectorRepository;
 import tum.devoops.eventservice.repository.EventRepository;
 import tum.devoops.eventservice.repository.MemberRepository;
 import tum.devoops.eventservice.repository.SportEventRepository;
 import tum.devoops.eventservice.repository.SportRepository;
 import tum.devoops.eventservice.repository.TeamEventRepository;
 import tum.devoops.eventservice.repository.TeamRepository;
+import tum.devoops.eventservice.repository.TrainerRepository;
 
 @ExtendWith(MockitoExtension.class)
 class EventServiceTest {
@@ -59,6 +64,10 @@ class EventServiceTest {
     private SportRepository sportRepository;
     @Mock
     private TeamRepository teamRepository;
+    @Mock
+    private TrainerRepository trainerRepository;
+    @Mock
+    private DirectorRepository directorRepository;
 
     @InjectMocks
     private EventService service;
@@ -218,6 +227,65 @@ void createEventWithInvalidAttendeeUuidThrowsBadRequest() {
                 .isInstanceOf(BadRequestException.class);
     }
 
+    @Test
+    void createEventAsPlainMemberThrowsForbidden() {
+        EventCreate body = validCreate().teamsLinked(List.of(TEAM_ID.toString()));
+
+        assertThatThrownBy(() -> service.createEvent(body, REQUESTER_ID, false))
+                .isInstanceOf(ForbiddenException.class);
+        verify(eventRepository, never()).save(any());
+    }
+
+    @Test
+    void createEventAsTrainerOfLinkedTeamSucceeds() {
+        when(trainerRepository.existsById(new TrainerEntity.Id(TEAM_ID, REQUESTER_ID))).thenReturn(true);
+        when(eventRepository.save(any())).thenReturn(eventEntity(EVENT_ID, REQUESTER_ID));
+        EventCreate body = validCreate().teamsLinked(List.of(TEAM_ID.toString()));
+
+        Event result = service.createEvent(body, REQUESTER_ID, false);
+
+        assertThat(result.getId()).isEqualTo(EVENT_ID);
+    }
+
+    @Test
+    void createEventAsTrainerOfUnrelatedTeamThrowsForbidden() {
+        // Trainer of some other team, not the one this event links to.
+        when(trainerRepository.existsById(new TrainerEntity.Id(TEAM_ID, REQUESTER_ID))).thenReturn(false);
+        when(teamRepository.findAllById(List.of(TEAM_ID))).thenReturn(List.of());
+        EventCreate body = validCreate().teamsLinked(List.of(TEAM_ID.toString()));
+
+        assertThatThrownBy(() -> service.createEvent(body, REQUESTER_ID, false))
+                .isInstanceOf(ForbiddenException.class);
+        verify(eventRepository, never()).save(any());
+    }
+
+    @Test
+    void createEventAsDirectorOfLinkedTeamsSportSucceeds() {
+        TeamEntity team = new TeamEntity();
+        team.setId(TEAM_ID);
+        team.setSportId(SPORT_ID);
+        when(trainerRepository.existsById(new TrainerEntity.Id(TEAM_ID, REQUESTER_ID))).thenReturn(false);
+        when(teamRepository.findAllById(List.of(TEAM_ID))).thenReturn(List.of(team));
+        when(directorRepository.existsById(new DirectorEntity.Id(SPORT_ID, REQUESTER_ID))).thenReturn(true);
+        when(eventRepository.save(any())).thenReturn(eventEntity(EVENT_ID, REQUESTER_ID));
+        EventCreate body = validCreate().teamsLinked(List.of(TEAM_ID.toString()));
+
+        Event result = service.createEvent(body, REQUESTER_ID, false);
+
+        assertThat(result.getId()).isEqualTo(EVENT_ID);
+    }
+
+    @Test
+    void createEventAsDirectorOfExplicitSportSucceeds() {
+        when(directorRepository.existsById(new DirectorEntity.Id(SPORT_ID, REQUESTER_ID))).thenReturn(true);
+        when(eventRepository.save(any())).thenReturn(eventEntity(EVENT_ID, REQUESTER_ID));
+        EventCreate body = validCreate().sportsLinked(List.of(SPORT_ID));
+
+        Event result = service.createEvent(body, REQUESTER_ID, false);
+
+        assertThat(result.getId()).isEqualTo(EVENT_ID);
+    }
+
     // ─── getEventDetails ───────────────────────────────────────────────────────
 
     @Test