libra/docs/epics/epic-7-client-dashboard.md

6.5 KiB

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