---
name: staff-dashboard
description: Design engaging, data-rich dashboards for clinic staff. Use when building the main dashboard, staff views, or any data-heavy interface.
---

# Staff Dashboard Skill

## Dashboard Anatomy

```
┌─────────────────────────────────────────────────────┐
│  HEADER: Logo | Search | 🔔 Notifications | Profile │
├──────────┬──────────────────────────────────────────┤
│          │  Greeting + Date                         │
│ SIDEBAR  │  ┌────────┬────────┬────────┬────────┐  │
│          │  │ Metric │ Metric │ Metric │ Metric │  │
│ • Home   │  └────────┴────────┴────────┴────────┘  │
│ • Appts  │  ┌──────────────────┬─────────────────┐ │
│ • Msgs   │  │  CHART           │  ACTION LIST    │ │
│ • Queue  │  └──────────────────┴─────────────────┘ │
│ • Stats  │  ┌─────────────────────────────────────┐│
│          │  │  DATA TABLE (appointments)          ││
└──────────┴──┴─────────────────────────────────────┴┘
```

## Core Components

### 1. Metric Cards

```tsx
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
  <MetricCard
    label="Today's Appointments"
    value={24}
    icon={Calendar}
    trend={+3}
  />
  <MetricCard
    label="Waiting Now"
    value={4}
    icon={Users}
    alert // Amber highlight
  />
  <MetricCard label="Messages" value={12} icon={MessageCircle} badge="5 new" />
  <MetricCard
    label="Revenue Today"
    value="QAR 4,200"
    icon={DollarSign}
    trend={+12}
  />
</div>
```

### 2. Action Items

```tsx
<ActionList
  items={[
    { type: "confirm", text: "Confirm 3 pending appointments", urgent: true },
    { type: "message", text: "5 WhatsApp messages waiting" },
    { type: "reminder", text: "Team meeting at 2:00 PM" },
  ]}
/>
```

### 3. Appointments Table

```tsx
<AppointmentsTable
  columns={["Time", "Patient", "Service", "Status", "Actions"]}
  statusStyles={{
    confirmed: "bg-emerald-100 text-emerald-700",
    waiting: "bg-amber-100 text-amber-700",
    completed: "bg-gray-100 text-gray-600",
    cancelled: "bg-red-100 text-red-700",
  }}
  actions={["message", "edit", "cancel"]}
/>
```

### 4. Live Queue Widget

```tsx
<div className="bg-gradient-to-br from-[#25D366] to-[#128C7E] rounded-2xl p-6 text-white">
  <h3>Live Queue</h3>
  <span className="bg-white/20 rounded-full px-2 py-1">{count} waiting</span>
  {patients.map((p, i) => (
    <QueueItem position={i + 1} name={p.name} waitTime={p.waitTime} />
  ))}
</div>
```

## Design Tokens

```css
/* Colors */
--mawidi-green: #25d366; /* Primary actions */
--mawidi-green-dark: #128c7e; /* Hover states */
--mawidi-ink: #1e293b; /* Text */
--bg-page: #f8fafc; /* Page background */

/* Alerts */
--urgent: amber tones /* Needs attention */ --success: emerald tones
  /* Confirmed */ --error: red tones /* Cancelled */ /* Spacing */
  --card-padding: 24px (p-6) --grid-gap: 16-24px (gap-4 to gap-6)
  --section-margin: 32px (mb-8) --border-radius: 16px (rounded-2xl);
```

## Layout Pattern

```tsx
export default function Dashboard() {
  return (
    <div className="min-h-screen bg-[#F8FAFC]">
      <Sidebar />
      <main className="ml-64 p-8">
        <Header greeting="Good morning, Dr. Sarah 👋" />

        {/* Row 1: Metrics */}
        <MetricCards className="mb-8" />

        {/* Row 2: Chart + Actions */}
        <div className="grid lg:grid-cols-3 gap-6 mb-8">
          <ScheduleChart className="lg:col-span-2" />
          <ActionList />
        </div>

        {/* Row 3: Queue + Messages */}
        <div className="grid lg:grid-cols-3 gap-6 mb-8">
          <LiveQueue />
          <RecentMessages className="lg:col-span-2" />
        </div>

        {/* Row 4: Table */}
        <AppointmentsTable />
      </main>
    </div>
  );
}
```

## RTL Support

```tsx
<main dir="rtl" className="font-arabic mr-64 ml-0">
  {/* Sidebar moves right, content flows RTL */}
</main>
```

## Checklist

- [ ] 4 metric cards with trends/alerts
- [ ] Today's appointments visible
- [ ] Pending actions highlighted
- [ ] Quick booking button
- [ ] Notification bell with count
- [ ] Live queue (if applicable)
- [ ] RTL support for Arabic

## See Also

- [frontend-design](../frontend-design/SKILL.md) - UI principles
- [brand-guidelines](../brand-guidelines/SKILL.md) - Mawidi colors
