RankFlow AI — User Dashboard UI Specifications

Version: 1.0.0
Route Prefix: /dashboard
Auth Required: CLIENT, EDITOR, or VIEWER role
Layout: Dashboard shell with sidebar navigation

---

1. Layout Architecture#

┌─────────────────────────────────────────────────────────────┐
│  Dashboard Shell (src/app/(client)/layout.tsx)               │
│  ┌──────────┐  ┌─────────────────────────────────────────┐  │
│  │ Sidebar  │  │  Header Bar                             │  │
│  │          │  │  ─────────────────────────────────────  │  │
│  │ • Home   │  │                                       │  │
│  │ • GBP    │  │  Main Content Area                    │  │
│  │ • Social │  │  (page-specific)                      │  │
│  │ • Citations│ │                                       │  │
│  │ • Site   │  │                                       │  │
│  │ • Reports│  │                                       │  │
│  │ • Leads  │  │                                       │  │
│  │ • Content│  │                                       │  │
│  │ • Settings│ │                                       │  │
│  │ • Billing│  │                                       │  │
│  └──────────┘  └─────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────┘

Shell Components#

---

2. Route Map#

---

3. Page Specifications#

3.1 /dashboard — Home Overview#

Purpose: At-a-glance view of the practice's SEO health

Layout: Grid of stat cards + recent activity

Stat Cards (top row):

Sections Below:

---

3.2 /dashboard/gbp — GBP Overview#

Purpose: Central hub for Google Business Profile management

Layout: Tabbed sub-navigation + cards

Sub-Routes:

• /dashboard/gbp — Overview
• /dashboard/gbp/posts — Posts
• /dashboard/gbp/reviews — Reviews
• /dashboard/gbp/insights — Insights

Overview Tab:

┌────────────────────────────────────────┐
│  GBP Status Card                       │
│  [Connected] account@email.com          │
│  Locations: 2 | Last sync: 2 min ago   │
│  [Sync Now] [Reconnect]                │
└────────────────────────────────────────┘

┌─────────────────┐ ┌─────────────────┐
│  Posts This Week │ │  Reviews         │
│  3 published     │ │  12 new (2 unr.) │
│  [View all]      │ │  [Reply]         │
└─────────────────┘ └─────────────────┘

Posts Tab:

Reviews Tab:

Insights Tab:

---

3.3 /dashboard/social — Social Media#

Purpose: Manage connected social accounts and posts

Layout: Account cards + post scheduler

Account Cards:

┌────────────────────────────────────────┐
│  [FB Logo]  Facebook                   │
│  @practice_name                       │
│  ✅ Connected | 1.2k followers         │
│  [Post] [Schedule] [Disconnect]      │
└────────────────────────────────────────┘

Post Scheduler:

---

3.4 /dashboard/citations — Citation Network#

Purpose: Monitor and manage business directory listings

Layout: Progress card + directory table

Progress Card:

Citation Health: 87%
┌────────────────────────────────────┐
│███████████████████░░░░░│ 26/30 live
└────────────────────────────────────┘
Verified: 26 | Pending: 2 | Failed: 2

Directory Table:

Actions:

• Submit to new directory
• Re-verify NAP
• View mismatch details
• Download citation report

---

3.5 /dashboard/site — Landing Page#

Purpose: Preview and manage the practice's public website

Layout: Split view — preview left, editor right

Preview Panel:

• Live iframe of the site
• Device toggle: Desktop / Tablet / Mobile
• URL display: https://practice.rankflow.ai

Editor Panel:

Settings:

• Template selector (Medical Modern, Dental Clean, etc.)
• Primary color picker
• Font family selector
• Custom domain input
• Publish / Unpublish toggle
• Auto-update toggle

---

3.6 /dashboard/reports — Reports#

Purpose: View and download monthly SEO reports

Layout: Report cards + PDF viewer

Report Card:

┌────────────────────────────────────────┐
│  Monthly Report — January 2025       │
│  Overall Score: 78/100                 │
│  ┌────┐ ┌────┐ ┌────┐ ┌────┐         │
│  │GBP │ │CIT │ │REV │ │RNK │         │
│  │ 82 │ │ 75 │ │ 90 │ │ 65 │         │
│  └────┘ └────┘ └────┘ └────┘         │
│  [View PDF] [Email] [Download]       │
└────────────────────────────────────────┘

Score Breakdown:

---

3.7 /dashboard/leads — Lead Inbox#

Purpose: Manage contact form submissions and enquiries

Layout: Inbox-style list + detail panel

Lead List:

Lead Detail:

• Full message
• Source page URL
• UTM parameters (if any)
• Action buttons

---

3.8 /dashboard/content — Content Approval#

Purpose: Review AI-generated content before publishing

Layout: Card list of pending content

Content Card:

┌────────────────────────────────────────┐
│  GBP Post — AI-generated               │
│  Auto-publishes in 18 hours            │
│                                        │
│  [Content preview...]                  │
│                                        │
│  [Approve] [Reject] [Edit]            │
└────────────────────────────────────────┘

Auto-publish Timer:

• Content queued for 24 hours after generation
• Countdown displayed
• Approve → publishes immediately
• Reject → archived, not published
• Edit → opens inline editor

Content Types in Queue:

---

3.9 /dashboard/settings — Practice Settings#

Purpose: Manage business information and team

Tabs:

Team Roles:

---

3.10 /dashboard/billing — Billing#

Purpose: Manage subscription and payment

Layout: Plan card + invoice table

Current Plan Card:

┌────────────────────────────────────────┐
│  Premium Plan — Rs 12,000/mo           │
│  Next billing: Feb 15, 2025            │
│                                        │
│  Included:                             │
│  ✓ 30 Citations                        │
│  ✓ 12 Social Posts/mo                  │
│  ✓ Custom Domain                       │
│  ✓ 12 GBP Posts/mo                     │
│  ✓ Priority Support                    │
│                                        │
│  [Upgrade] [Cancel]                    │
└────────────────────────────────────────┘

Plan Comparison:

---

4. Component Hierarchy#

ClientLayout
├── DashboardShell
│   ├── DashboardSidebar
│   │   ├── PracticeSwitcher (if multiple practices)
│   │   ├── NavGroup "Marketing"
│   │   │   ├── NavItem "GBP" → /dashboard/gbp
│   │   │   ├── NavItem "Social" → /dashboard/social
│   │   │   └── NavItem "Citations" → /dashboard/citations
│   │   ├── NavGroup "Website"
│   │   │   └── NavItem "Landing Page" → /dashboard/site
│   │   ├── NavGroup "Analytics"
│   │   │   ├── NavItem "Reports" → /dashboard/reports
│   │   │   └── NavItem "Leads" → /dashboard/leads
│   │   ├── NavGroup "Content"
│   │   │   └── NavItem "Approval Queue" → /dashboard/content
│   │   └── NavGroup "Account"
│   │       ├── NavItem "Settings" → /dashboard/settings
│   │       └── NavItem "Billing" → /dashboard/billing
│   ├── DashboardHeader
│   │   ├── Breadcrumbs
│   │   ├── NotificationBell (review alerts, citation issues)
│   │   └── UserMenu
│   └── PageContent
│       ├── (page-specific components)
│       └── Cards / Tables / Forms / Charts

Reusable Dashboard Components#

---

5. Data Requirements#

tRPC Queries per Page#

---

6. Role-Based Access#

Permission Matrix#

UI Enforcement#

• Buttons hidden for unauthorized actions
• Forms disabled in read-only mode
• API returns 403 for unauthorized mutations

---

7. Content Approval Workflow#

Flow Diagram#

AI Generates Content
        ↓
   Status: DRAFT
        ↓
   Auto-queue (24h timer)
        ↓
   Status: PENDING_REVIEW
        ↓
┌─────────────────┐
│  Client sees in │
│  /dashboard/content
└─────────────────┘
        ↓
   ┌────────┐
   │ Approve │ → Status: APPROVED → Auto-publish
   └────────┘
        ↓
   ┌────────┐
   │ Reject  │ → Status: REJECTED → Archive
   └────────┘
        ↓
   ┌────────┐
   │  Edit   │ → Status: PENDING_REVIEW (reset timer)
   └────────┘
        ↓
   Timer expires (24h)
        ↓
   Status: APPROVED → Auto-publish

Approval UI States#

---

8. Responsive Behavior#

Mobile Adaptations#

• Sidebar becomes bottom nav or drawer
• Data tables become card lists
• Charts simplified
• Site preview opens in modal
• Content approval uses swipe gestures

---

End of User Dashboard UI Specifications