> ## Documentation Index
> Fetch the complete documentation index at: https://memberpulseptyltd.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# UJ-M-007: View Event Details

> Member views comprehensive event information before deciding to register

## Journey Overview

| Attribute      | Value                                                     |
| -------------- | --------------------------------------------------------- |
| **Journey ID** | UJ-M-007                                                  |
| **Actor**      | Member or public visitor                                  |
| **Goal**       | Review event details to decide on attendance              |
| **Trigger**    | Member clicks on an event from listing                    |
| **Outcome**    | Member has full information to make registration decision |

## Preconditions

* Event exists and is published
* For member-only events: User is authenticated
* Event is not cancelled

## Journey Flow

```mermaid theme={null}
flowchart TD
    A[Click event from listing] --> B[Load event details page]
    B --> C[View basic information]
    C --> D[Review schedule/sessions]
    D --> E[View speakers]
    E --> F[Check ticket options]
    F --> G{Decision}
    G -->|Register| H[Proceed to registration]
    G -->|Save| I[Add to favorites]
    G -->|Share| J[Share event]
    G -->|Exit| K[Return to listing]
```

## Event Details Page Layout

```
┌─────────────────────────────────────────────────────────────────┐
│ [Featured Image / Banner]                                       │
│                                                                 │
│ Event Category Badge    Share Button    Favorite Button         │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│ Event Title                                                     │
│ ─────────────────────────                                       │
│                                                                 │
│ 📅 Date & Time                    💰 From $XX.XX                │
│ 📍 Location / Online              🎓 X CPD Points               │
│                                                                 │
│ [Register Now Button]                                           │
│                                                                 │
├─────────────────────────────────────────────────────────────────┤
│ Tabs: [Overview] [Schedule] [Speakers] [Sponsors] [Location]    │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│ Tab Content Area                                                │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

## Detailed Sections

<Steps>
  <Step title="Header Section">
    **Featured Image:**

    * Full-width banner image
    * Fallback to category default if none

    **Quick Actions:**

    * Share button (copy link, social share)
    * Favorite/Save button
    * Add to calendar (preview)

    **Key Details:**

    * Event title (H1)
    * Category badge
    * Date and time with timezone
    * Location or "Online Event"
    * Price range or "Free"
    * CPD points (if applicable)
    * Registration deadline (if set)
  </Step>

  <Step title="Overview Tab">
    **Description:**

    * Full event description (rich text)
    * Key highlights
    * What attendees will learn
    * Who should attend

    **Quick Facts:**

    | Field            | Value                   |
    | ---------------- | ----------------------- |
    | Duration         | X hours                 |
    | Format           | Live / Online / Hybrid  |
    | Capacity         | X spots (Y remaining)   |
    | CPD Points       | X points in \[Category] |
    | Member Price     | \$XX                    |
    | Non-Member Price | \$XX                    |
  </Step>

  <Step title="Schedule Tab (Multi-Session Events)">
    Timeline view of sessions:

    ```
    9:00 AM  ┌─────────────────────────────────┐
             │ Registration & Networking       │
             │ Foyer                           │
             └─────────────────────────────────┘

    9:30 AM  ┌─────────────────────────────────┐
             │ Keynote: Future of Industry     │
             │ Speaker: Jane Smith             │
             │ Main Hall • 60 min              │
             └─────────────────────────────────┘

    10:30 AM ┌─────────────────────────────────┐
             │ Morning Tea                     │
             │ Foyer • 30 min                  │
             └─────────────────────────────────┘
    ```

    Each session shows:

    * Time slot
    * Session title
    * Speaker(s)
    * Room/Location
    * Duration
    * CPD points (if per-session)
  </Step>

  <Step title="Speakers Tab">
    Speaker cards with:

    | Element | Description                      |
    | ------- | -------------------------------- |
    | Photo   | Professional headshot            |
    | Name    | Full name                        |
    | Title   | Job title                        |
    | Company | Organization                     |
    | Bio     | Brief biography                  |
    | Session | Which session they're presenting |
    | Links   | LinkedIn, Website                |

    **Main Speaker** highlighted with badge
  </Step>

  <Step title="Sponsors Tab (if sponsors attached)">
    Sponsor logos organized by tier:

    * **Platinum Sponsors** - Large logos, full descriptions
    * **Gold Sponsors** - Medium logos, brief descriptions
    * **Silver Sponsors** - Small logos
    * **Bronze Sponsors** - Logo list

    Each sponsor links to their company profile or website
  </Step>

  <Step title="Location Tab (Live Events)">
    **Venue Information:**

    * Venue name
    * Full address
    * Embedded map (Google Maps)
    * Directions link
    * Parking information
    * Public transport options
    * Accessibility information

    **For Online Events:**

    * "This is an online event"
    * Platform information (Zoom, Teams, etc.)
    * Note: Link provided after registration
  </Step>

  <Step title="Ticket Options Section">
    Ticket types displayed:

    | Ticket Type | Price   | Availability |
    | ----------- | ------- | ------------ |
    | Early Bird  | \$79    | Until Dec 1  |
    | Member      | \$99    | Available    |
    | Non-Member  | \$149   | Available    |
    | Student     | \$49    | ID required  |
    | Group (5+)  | \$89/ea | Contact us   |

    **Shows:**

    * Current best price highlighted
    * Member discount if logged in
    * "You save \$XX" messaging
    * Urgency: "Only X spots left"
  </Step>

  <Step title="Registration CTA">
    Primary call-to-action:

    **Available:**

    * "Register Now" button
    * Selected ticket type
    * Quantity selector
    * Total price preview

    **Sold Out:**

    * "Join Waitlist" button
    * Notification when spots open

    **Not Yet Open:**

    * "Registration opens \[Date]"
    * "Notify Me" button

    **Closed:**

    * "Registration Closed"
    * View only mode
  </Step>
</Steps>

## Additional Features

### Social Proof

* "X people registered"
* "Y people interested"
* Attendee avatars (if public)

### Related Events

* "You might also like"
* Same category events
* Same speaker events
* Same series events

### Member Benefits

If member is logged in:

* Member pricing highlighted
* Savings displayed
* "Member Exclusive" badge if applicable

## Related Entities

* [`Event`](/entities/core/event)
* [`Event Ticket`](/entities/core/event-ticket)
* [`Sponsorship`](/entities/core/sponsorship)
* [`CPD Category`](/entities/core/cpd-category)

## Related Journeys

* [UJ-M-006](/member/journeys/browse-events)
* [UJ-M-008](/member/journeys/purchase-event-ticket)
* [UJ-M-032](/member/journeys/add-to-calendar)

## Acceptance Criteria

### Frontend

* [ ] Event header with featured image
* [ ] Tabbed content layout
* [ ] Schedule timeline view
* [ ] Speaker cards with photos
* [ ] Sponsor logo display by tier
* [ ] Embedded map for venue
* [ ] Ticket selection interface
* [ ] Share functionality (link, social)
* [ ] Favorite/save functionality
* [ ] Mobile-responsive design
* [ ] SEO meta tags for public events

### Backend

* [ ] `GET /api/events/{id}` - Full event details
* [ ] Includes: sessions, speakers, sponsors, tickets
* [ ] Includes: registration count, availability
* [ ] Includes: member pricing if authenticated

### Permissions

* [ ] Public events viewable by all
* [ ] Member-only events require authentication
* [ ] Online event links hidden until registered

### Business Rules

* [ ] Member pricing shown only to authenticated members
* [ ] Sold out events show waitlist option
* [ ] Past events show "Event Ended" state
* [ ] Cancelled events redirect to listing

### Error Handling

* [ ] Event not found → 404 page
* [ ] Private event without auth → Login prompt
* [ ] Loading state while fetching