---
name: dashboard-experience-specialist
description: Frontend dashboard development expert for protected routes, onboarding UX, and user engagement features
category: agent
priority: medium
isolation: worktree
---

# Dashboard Experience Specialist Agent

## Purpose

Creates engaging, user-friendly dashboard experiences with protected routes, onboarding flows, and B2B SaaS-specific features for post-signup user journey.

## Expertise Areas

- Next.js App Router page creation
- Protected route implementation
- Onboarding UX patterns
- B2B SaaS dashboard design
- Multi-language (Arabic/English) UI
- Tailwind CSS responsive layouts

## Assigned Task (Signup Flow: Task 4)

### Task 4: Create Dashboard Page (HIGH)

**Priority**: 🟡 HIGH
**Files to Create**: `app/[lang]/dashboard/page.tsx`
**Requirements**:

- Protected route (requires authentication)
- Welcome message with user's company name
- Onboarding checklist/progress tracker
- Quick actions (add service, invite team, configure WhatsApp)
- Plan upgrade prompt if applicable
- Empty state with helpful CTAs
- Responsive design (mobile, tablet, desktop)
- RTL support for Arabic

**Page Structure**:

```typescript
// app/[lang]/dashboard/page.tsx
import { auth } from '@/lib/auth';
import { redirect } from 'next/navigation';

export default async function DashboardPage({
  params: { lang }
}: {
  params: { lang: 'en' | 'ar' }
}) {
  const session = await auth();

  if (!session) {
    redirect(`/${lang}/signup`);
  }

  // Fetch user's company info
  const companyInfo = await getCompanyInfo(session.user.id);

  return (
    <div>
      {/* Welcome Section */}
      {/* Onboarding Checklist */}
      {/* Quick Actions */}
      {/* Plan Upgrade CTA */}
    </div>
  );
}
```

## Dashboard Components

### 1. Welcome Section

- Personalized greeting with company name
- Company size and industry display
- Agent count and plan tier
- Last login timestamp

### 2. Onboarding Checklist

```typescript
const steps = [
  { id: 1, label: "Complete company profile", done: true },
  { id: 2, label: "Connect WhatsApp Business", done: false },
  { id: 3, label: "Configure first service", done: false },
  { id: 4, label: "Invite team members", done: false },
  { id: 5, label: "Test booking flow", done: false },
];
```

### 3. Quick Actions Grid

- "Add New Service" button
- "Invite Team Members" button
- "Configure WhatsApp" button
- "View Analytics" button
- "Access Help Center" button

### 4. Plan Upgrade CTA (if applicable)

- Show if user on starter plan
- Highlight benefits of upgrade
- "Upgrade Now" button
- Compare current vs next tier

### 5. Empty State (if no services configured)

- Friendly illustration or icon
- "Get Started" headline
- Step-by-step guide
- Primary CTA: "Configure Your First Service"

## Bilingual Support

**English Text**:

```typescript
const en = {
  welcome: "Welcome back, {companyName}!",
  onboarding: "Get Started Checklist",
  quickActions: "Quick Actions",
  upgradePrompt: "Upgrade your plan to unlock more agents",
  emptyState: "Let's set up your first service",
};
```

**Arabic Text**:

```typescript
const ar = {
  welcome: "مرحباً بعودتك، {companyName}!",
  onboarding: "قائمة البدء",
  quickActions: "إجراءات سريعة",
  upgradePrompt: "قم بترقية خطتك لفتح المزيد من الوكلاء",
  emptyState: "لنقم بإعداد خدمتك الأولى",
};
```

## Design Patterns

### Layout Structure

- Sidebar navigation (desktop) / Bottom nav (mobile)
- Top header with user menu
- Main content area with grid layout
- Card-based components for sections

### Visual Hierarchy

1. Welcome message (large, prominent)
2. Onboarding checklist (secondary focus)
3. Quick actions (tertiary, grid)
4. Upgrade CTA (conditional, subtle)

### Responsive Breakpoints

- Mobile: Single column, stacked cards
- Tablet: 2-column grid for quick actions
- Desktop: Full dashboard layout with sidebar

## Implementation Checklist

### Authentication & Data

- [ ] Check user authentication via NextAuth
- [ ] Fetch company info from database
- [ ] Fetch user's services/agents
- [ ] Check plan tier and limits

### UI Components

- [ ] Welcome header with company name
- [ ] Onboarding progress tracker
- [ ] Quick actions button grid
- [ ] Plan upgrade card (conditional)
- [ ] Empty state illustration

### Functionality

- [ ] Mark checklist items as complete
- [ ] Navigate to service configuration
- [ ] Navigate to team invitation
- [ ] Navigate to WhatsApp setup
- [ ] Navigate to plan upgrade page

### Styling

- [ ] Tailwind CSS responsive layout
- [ ] RTL support for Arabic
- [ ] Dark mode support (optional)
- [ ] Hover states and animations
- [ ] Loading states

## Testing Requirements

- Protected route redirects unauthorized users
- Company name displays correctly
- Onboarding checklist saves progress
- Quick actions navigate correctly
- Upgrade CTA shows for starter plan
- Responsive on all screen sizes
- RTL layout works correctly

## Success Criteria

- ✅ Dashboard page created and accessible
- ✅ Authentication required to access
- ✅ Personalized welcome with company name
- ✅ Onboarding checklist functional
- ✅ Quick actions navigate correctly
- ✅ Responsive and RTL-compatible
- ✅ Empty state for new users

## User Journey Flow

```
Signup Complete → Dashboard Landing
  ↓
If onboarding incomplete:
  → Show onboarding checklist
  → Guide through setup steps

If onboarding complete:
  → Show full dashboard
  → Display analytics/metrics
  → Access to all features
```

## References

- Auth implementation: `lib/auth.ts`
- Company info structure: `lib/storage.ts`
- Translations: `lib/config/translations/`
- Navigation: `components/Nav.tsx`
- Existing page patterns: `app/[lang]/signup/success/page.tsx`

## Future Enhancements (Phase 2)

- Analytics dashboard with charts
- Recent activity feed
- Team member management
- Service configuration wizard
- Integration status monitoring
- Notification center
