# T09 — Session Dashboard Template
## Generates: `pages/dashboard/collab-dashboard.component.html`

---

## Step 1 — Reference Files (fill in before running)

```
"Read CLAUDE.md.
Read @[REF:DASHBOARD] — learn how we structure a dashboard/overview page:
  page header, stat cards, content sections.
Read @[REF:LIST_PAGE] — learn how we render data grids/lists:
  table/card layout, empty states, loading skeletons, pagination.
Read @[REF:TABLE] — learn our table component and column definition pattern.
Then implement the template described below."
```

**What to look for in your references:**
- Page wrapper component or CSS class
- How page title + action button header is structured
- Stat/metric card component or pattern
- How data grids or card grids are laid out
- Table component (columns, rows, sorting, actions column)
- Empty state component/pattern (no data message + CTA)
- Loading skeleton component
- Status badge/pill component
- How action buttons appear inside table rows

---

## Step 2 — What This Page Is

The **main landing page** of the CollabSpace module (`/collaboration`).
Shows an overview of all sessions relevant to the current user.

---

## Step 3 — Content Specification

### Page Header
```
Title: "Collaboration Hub"
Primary action button:
  label: "New Session"
  click: navigateToCreate()
  only show when: isSessionActive() === false
```

### Live Session Banner
```
Show only when: sessionState.hasActiveSession() === true
Displays:
  - "Live Session" indicator (prominent, stands out from rest of page)
  - Session title:  sessionState.currentSessionTitle()
  - Session mode:   sessionState.currentSessionMode()
  - Participant count: sessionState.participantCount()
  - Action: "View Session" → uiState.openDetailPanel()
  - Action: "End Session"  → [destructive] calls endSession()
Style: use your project's "info banner" or "alert" component
if one exists, otherwise a visually distinct full-width row
```

### Stats Row
```
4 stat figures in a row — use your project's stat/metric card pattern:

[Active Sessions]     value: activeSessions().length
[Scheduled Today]     value: scheduledToday().length
[Pending Invites]     value: pendingInvites().length
[Sessions This Week]  value: computed from activeSessions (count where
                              startedAt is within current week)

Each stat: label + number + optional icon
```

### Active Sessions Section
```
Section heading: "Active Sessions"
Layout: card grid (same as how your dashboard pages show
        a grid of entity cards)

For each session in activeSessions():
  Render: <collab-session-card [session]="session" />
  track by: session.sessionId

Empty state when activeSessions().length === 0:
  Use your project's empty-state component/pattern
  Message: "No active sessions"
  CTA button: "Start a Session" → navigateToCreate()
```

### Scheduled Sessions Section
```
Section heading: "Scheduled Sessions"
Layout: table — use your project's table component

Columns:
  Session   → session title + code (code as secondary/muted text)
  Module    → contextModuleCode (or "—" if null)
  Scheduled → scheduledAt formatted as date + time
  Duration  → scheduledDurationMinutes (or "—" if null)
  Participants → maxParticipants
  Actions   → "Start Now" button (highlighted if isDueSoon)
               shown only for sessions the user created

@for scheduledSessions() track sessionId
Empty state: "No scheduled sessions"

"Start Now" button:
  show when: isDueSoon (scheduledAt within 15 minutes)
  click: startScheduled(session.sessionId)
  use your project's "primary" or "highlight" button variant
```

### Pending Invites Section
```
Show section only when: pendingInvites().length > 0
Section heading: "Pending Invites"

For each invite in pendingInvites():
  Show: session title, offered role, expires at
  Actions:
    "Accept"  → acceptInvite(invite.inviteId)   [primary]
    "Decline" → declineInvite(invite.inviteId)  [secondary/ghost]

Use your project's list or card pattern for this section.
If you have a notification card pattern, use it here.
```

### Loading State
```
When isLoading() === true:
  Show loading skeleton using your project's skeleton/spinner component
  Cover the stats row and session grid areas
  Do not show empty states while loading
```

---

## Step 4 — Angular Bindings Summary

```typescript
// Signals — read-only from template
activeSessions()      Signal<CollabSessionSummary[]>
scheduledSessions()   Signal<CollabSessionSummary[]>
scheduledToday()      Signal<CollabSessionSummary[]>   — computed
pendingInvites()      Signal<CollabSessionInvite[]>
isLoading()           Signal<boolean>

// From sessionState (injected, exposed as public)
sessionState.hasActiveSession()
sessionState.currentSessionTitle()
sessionState.currentSessionMode()
sessionState.participantCount()

// Actions
navigateToCreate()
joinSession(sessionId: string)
viewSession(sessionId: string)
startScheduled(sessionId: string)
acceptInvite(inviteId: string)
declineInvite(inviteId: string)
endSession()

// From uiState (injected, exposed as public)
uiState.openDetailPanel()
uiState.openInviteModal(sessionId)
```

---

## Constraints
- Use Angular 20 `@if`, `@for`, `@switch` — never `*ngIf`, `*ngFor`
- `<collab-session-card>` is a known component — import it in TS imports array
- Do not use inline styles — use your project's utility classes or component props
- The live session banner must be visually prominent — it is the highest-priority
  information on this page when a session is active