# Epic 7: Client Dashboard

## Epic Goal

Create a client portal where logged-in clients can view their consultations, case timelines, profile information, and book new consultations.

## Epic Description

### Business Context

Clients need a simple, intuitive interface to access their information and services. They can view (but not modify) their profile, see upcoming and past consultations, track case progress through timelines, and request new consultations.

### Technical Context

- **Access:** Authenticated clients only
- **Capabilities:** Read-mostly (can only submit bookings)
- **Restrictions:** Cannot edit profile, cancel bookings, or comment
- **Design:** Mobile-friendly, professional

### Success Criteria

- [ ] Client overview dashboard
- [ ] View upcoming and past consultations
- [ ] Download calendar files
- [ ] View case timelines (read-only)
- [ ] View profile information
- [ ] Submit new booking requests
- [ ] Booking limit enforcement (1 per day)
- [ ] Responsive mobile design

---

## Stories

### Story 7.1: Client Dashboard Overview

**Description:** Main dashboard page for clients showing key information at a glance.

**Acceptance Criteria:**
- [ ] Welcome message with client name
- [ ] **Upcoming Consultations Widget:**
  - Next consultation date/time
  - Type (free/paid)
  - Status
  - Quick link to details
- [ ] **Active Cases Widget:**
  - Count of active timelines
  - Latest update preview
  - Link to full list
- [ ] **Recent Updates Widget:**
  - Last 3 timeline updates (across all cases)
  - Case name and date
  - Link to full timeline
- [ ] **Booking Status Widget:**
  - Pending booking requests
  - Daily booking limit indicator
  - Quick book button
- [ ] Clean, card-based layout
- [ ] Bilingual content

**Technical Notes:**
- Scoped to authenticated user's data only
- Use Livewire components for widgets
- Mobile-first responsive design

---

### Story 7.2: My Consultations View

**Description:** List of all client's consultations (upcoming and past).

**Acceptance Criteria:**
- [ ] **Upcoming Consultations Section:**
  - Date and time
  - Consultation type (free/paid)
  - Status (approved/pending)
  - Payment status (for paid)
  - Download .ics calendar file button
- [ ] **Pending Requests Section:**
  - Submitted bookings awaiting approval
  - Submission date
  - Problem summary preview
  - Status: "Pending Review"
- [ ] **Past Consultations Section:**
  - Historical consultations
  - Status (completed/cancelled/no-show)
  - Date and type
- [ ] Visual status indicators
- [ ] Sort by date (default: newest first for past)
- [ ] Pagination if many consultations
- [ ] No edit/cancel capabilities

**Technical Notes:**
- Filter by authenticated user
- Group by status categories
- Calendar download from Epic 3

---

### Story 7.3: My Cases/Timelines View

**Description:** List and detail view of client's case timelines.

**Acceptance Criteria:**
- [ ] **Active Cases Section:**
  - List of active timelines
  - Case name and reference
  - Last update date
  - Update count
  - "View" button
- [ ] **Archived Cases Section:**
  - Clearly separated from active
  - Different visual styling (muted)
  - Still accessible for viewing
- [ ] **Individual Timeline View:**
  - Case name and reference
  - Status badge (active/archived)
  - All updates in chronological order
  - Each update shows:
    - Date and time
    - Update content
  - Read-only (no interactions)
- [ ] Back to cases list navigation
- [ ] Responsive layout

**Technical Notes:**
- Reuse components from Epic 4
- Read-only view only
- Proper date formatting per locale

---

### Story 7.4: My Profile View

**Description:** Display client's profile information (read-only).

**Acceptance Criteria:**
- [ ] **Individual Client Profile:**
  - Full name
  - National ID
  - Email address
  - Phone number
  - Preferred language
  - Account created date
- [ ] **Company Client Profile:**
  - Company name
  - Registration number
  - Contact person name
  - Contact person ID
  - Email address
  - Phone number
  - Preferred language
  - Account created date
- [ ] Account type indicator
- [ ] No edit capabilities
- [ ] Message: "Contact admin to update your information"
- [ ] Logout button

**Technical Notes:**
- Display based on user_type
- Mask sensitive data if needed (e.g., partial ID)

---

### Story 7.5: New Booking Interface

**Description:** Interface for clients to submit new consultation booking requests.

**Acceptance Criteria:**
- [ ] Quick access from dashboard
- [ ] Calendar view showing available dates
- [ ] Available time slots for selected date
- [ ] **Booking Form:**
  - Selected date/time (display)
  - Problem summary (required, textarea)
  - Submit button
- [ ] **Validation:**
  - Enforce 1 booking per day limit
  - Show warning if already booked that day
  - Prevent booking on unavailable slots
- [ ] Confirmation before submission
- [ ] Success message with "Pending Review" status
- [ ] Redirect to consultations list

**Technical Notes:**
- Reuse availability calendar from Epic 3
- Client-side validation + server-side enforcement
- Check existing bookings for same day

---

### Story 7.6: Booking Limit Indicator

**Description:** Visual indicator of client's booking status and limits.

**Acceptance Criteria:**
- [ ] Show on dashboard and booking page
- [ ] Display current booking status:
  - "You can book a consultation today"
  - "You already have a booking for today"
  - "You have a pending request for [date]"
- [ ] Calendar shows booked days as unavailable
- [ ] Clear messaging about 1-per-day limit
- [ ] Bilingual messages

**Technical Notes:**
- Query consultations for user
- Consider future bookings in calculation

---

## Dependencies

| Epic | Dependency |
|------|------------|
| Epic 1 | Authentication, base UI |
| Epic 2 | User accounts (client data) |
| Epic 3 | Consultation data, booking interface |
| Epic 4 | Timeline data |

## Risks & Mitigations

| Risk | Impact | Mitigation |
|------|--------|------------|
| Confusion over read-only restrictions | Medium | Clear messaging, contact admin prompts |
| Mobile usability issues | Medium | Thorough mobile testing |
| Booking limit bypass attempts | Low | Server-side validation always |

## Definition of Done

- [ ] All stories completed with acceptance criteria met
- [ ] Dashboard displays accurate data
- [ ] Consultations list works correctly
- [ ] Timelines display read-only
- [ ] Profile shows correct information
- [ ] Booking limit enforced
- [ ] Calendar files downloadable
- [ ] Mobile responsive verified
- [ ] Bilingual support verified
- [ ] Code formatted with Pint