# Dashboard Design for Sirus CRM

## Purpose
The Dashboard is the home screen for Sirus Infotech team members. It should provide a quick, actionable overview of business health, client compliance status, reminders, payments, and automation activity.

## Layout

### 1. Header / Top Bar
- Page title: `Dashboard`
- Current date and quick status summary
- Global search input for client name, company, or WhatsApp number
- User avatar / role badge

### 2. KPI Cards (top row)
- Revenue collected this month
- Pending payment amount
- Due reminders this week
- New leads this month
- Active compliance alerts

### 3. Quick Actions Row
- Add Client
- Send GST Reminders
- Create Invoice
- Import CSV
- Start WhatsApp Broadcast

### 4. Primary Panels
- Left main panel: Revenue chart + pipeline status
- Right side panel: Upcoming reminders + recent automation events

### 5. Secondary Panels
- Activity feed: latest notes, calls, messages
- Client summary table: important clients by status
- Compliance countdowns: GST, ITR, FSSAI, ROC
- Recent documents: latest generated invoices/quotes

## Visual Hierarchy
1. Quick business metrics at the top
2. Compliance reminders and automation status as the operational priority
3. Revenue and pipeline data for business tracking
4. Recent client activity and documents for execution

## UX Notes
- Mobile-first responsive layout with stacked cards on small screens
- Use color-coded status chips for reminders and payment states
- Keep interactions one-click: action buttons should open a modal or slide-over
- Show clear counts and next due dates for compliance tasks
- Provide a “Send All GST Reminders” CTA in the reminders panel

## Data Components
- `kpiCards`: metrics from `/api/reports/dashboard`
- `upcomingReminders`: weekly client reminders
- `pipelineStatus`: counts for Lead, Proposal, Contract, Paid, Service, Close
- `revenueTrends`: monthly revenue series
- `activityFeed`: latest interactions
- `recentDocuments`: generated invoices and quotes

## Suggested Dashboard Sections

### A. Top Metrics
- `Revenue this month`
- `Pending invoices`
- `Open reminders`
- `New leads`
- `WhatsApp sends today`

### B. Compliance Reminder Panel
- `Due today`
- `Due this week`
- `Action button`: "Send All GST Reminders"
- Stats: reminders sent, email open rate, WhatsApp reply rate

### C. Automation Snapshot
- `WhatsApp campaigns active`
- `Email workflows live`
- `Latest automation trigger`
- `Failed sends`

### D. Pipeline + Revenue
- Pipeline stages bar or progress bars
- Revenue chart with actual vs target
- Payment collection trend chart

### E. Activity Feed
- Latest interactions with client name, type, timestamp
- Reminder creation events
- Payment received events

---

## Component structure

- `DashboardPage.vue`
  - `KpiCard.vue`
  - `QuickActionButton.vue`
  - `RevenueChart.vue` (placeholder or chart library)
  - `ReminderPanel.vue`
  - `ActivityFeed.vue`
  - `RecentDocumentsTable.vue`

---

## Sample data structure

```json
{
  "kpis": [
    {"label":"Revenue this month","value":"₹1,24,000","trend":"+18%"},
    {"label":"Pending payments","value":"₹48,200","trend":"-5%"},
    {"label":"Due reminders","value":"18","trend":"+2"},
    {"label":"New leads","value":"12","trend":"+40%"}
  ],
  "nextReminders": [
    {"client":"Aarav Tax Services","dueDate":"2026-05-12","service":"GST 3B","channel":"WhatsApp"},
    {"client":"Vasudha Foods","dueDate":"2026-05-14","service":"FSSAI renewal","channel":"Email"}
  ]
}
```