---
id: 7-1
title: 7-1 Client Dashboard Overview
status: Done
date: 2026-09-27
parent: 7
---

## Description

As a client, I want a dashboard showing my key information at a glance, So that I can quickly see upcoming consultations and case updates. Full implementation history: docs/stories/story-7.1-client-dashboard-overview.md

## Acceptance Criteria

- [ ] Display "Welcome, {client name}" greeting
- [ ] Use localized greeting based on user's preferred language
- [ ] Show current date in user's locale format
- [ ] Display next approved consultation (or "No upcoming consultations" if none)
- [ ] Show consultation date/time formatted per locale (AR: DD/MM/YYYY, EN: MM/DD/YYYY)
- [ ] Show time in 12-hour format (AM/PM)
- [ ] Display type badge: "Free" (green) or "Paid" (gold)
- [ ] Display status badge with appropriate color
- [ ] "View Details" link to consultation details (Story 7.2)
- [ ] Display count of active timelines
- [ ] Show preview of most recent update (truncated to ~100 chars)
- [ ] "View All Cases" link to timelines list (Story 7.3)
- [ ] Empty state: "No active cases" with muted styling
- [ ] Display last 3 timeline updates across all user's cases
- [ ] Each update shows: case name, update date, preview text
- [ ] "View Timeline" link for each update
- [ ] Empty state: "No recent updates"
- [ ] Display count of pending booking requests
- [ ] Show booking limit indicator:
- [ ] "Book Consultation" button linking to booking page (Story 7.5)
- [ ] Disable button if daily limit reached
- [ ] Card-based layout using Flux UI components
- [ ] Color scheme: Navy (#0A1F44) background sections, Gold (#D4AF37) accents
- [ ] Mobile-first responsive (stack cards vertically on mobile)
- [ ] All text content bilingual (Arabic RTL / English LTR)
- [ ] Use consistent spacing: `gap-6` between cards, `p-6` card padding
- [ ] No consultations: Show empty state with "Book your first consultation" CTA
- [ ] No timelines: Show empty state "No cases assigned yet"
- [ ] No updates: Show empty state "No recent updates"
- [ ] Loading state: Show skeleton loaders while data fetches