RankFlow AI — Frontend Specification Index

Document Version: 1.0.0 Date: 2026-06-15 Scope: Complete index of all frontend specification documents

---

Document Overview#

This index serves as the master reference for all frontend specification documents in the RankFlow AI project. Each document follows the 10-point specification template for every widget:

1. Purpose
2. Visual Layout
3. Data Source (tRPC endpoint)
4. Zod Schema
5. Fetch Frequency
6. Data Manipulations
7. Rationale
8. Interaction Flows
9. Error States
10. Role-Based Variations

Design system constraints (non-negotiable across all docs):

• NO bold font weight. font-weight: 500 (Medium) maximum.
• Ember Orange #EC652B is ONLY for primary CTAs, focus rings, positive indicators.
• Page max-width: 1200px centered. Canvas background: Paper White #F6F6F8.
• Sidebar: 240px wide. Client uses deep-ink (#011821). Admin uses carbon (#12161E).
• Section gap: 80px. Card radius: 8px.
• Medical compliance: 24h approval queue for CLINIC/HOSPITAL/DOCTOR clients.

---

Design System & Foundation#

---

Client Dashboard (Non-Admin Screens)#

Part 1 — Pre-Sales & Onboarding#

• Section 1: Pre-Sales Landing Pages (homepage, pricing, features)
• Section 2: Auth Screens (login, signup, password reset, 2FA)
• Section 3: Onboarding Flow (welcome, business profile, category selection, plan selection, payment, completion)

Part 2 — Core Dashboard Modules#

• Section 4: Design System Quick Reference (inline recap)
• Section 5: Dashboard Home (/dashboard) — KPI Overview, Activity Feed, Quick Actions
• Section 6: GBP Management (/dashboard/gbp) — Dashboard, Post Manager, Review Inbox, Insights, Q&A
• Section 7: Social Media (/dashboard/social) — Dashboard, Account Manager, Composer, Calendar
• Section 8: Citations (/dashboard/citations) — Dashboard, Directory Grid, NAP Health, Submission Tracker
• Section 9: Site Management (/dashboard/site) — Dashboard, Section Editor, Template Gallery, Publish Control

Part 3 — Content, Leads & Settings#

• Section 9 (cont.): Content Management (/dashboard/content) — Dashboard, List, Editor, Calendar, Approval Queue
• Section 10: Leads (/dashboard/leads) — Dashboard, List, Detail, Form Modal
• Section 11: Reports (/dashboard/reports) — Report Builder, Scheduled Reports, Library
• Section 12: Settings (/dashboard/settings) — Profile, Business, Billing, Notifications, Security, Connected Accounts
• Section 13: Admin Dashboard Intro (partial, completed in admin specs below)

---

Admin Dashboard (ADMIN-only Screens)#

Admin Section Breakdown#

---

Total Specification Coverage#

---

Key Cross-Cutting Patterns#

Fetch Frequencies Used#

Role Access Matrix#

Zod Schema Patterns#

• All tRPC inputs validated with Zod
• All API responses typed with Zod schemas
• All forms use Zod for client-side validation
• All enums use z.enum() for type safety
• All dates use z.date() with consistent formatting
• All monetary values in cents (integer) to avoid floating-point errors

---

Last updated: 2026-06-16. All 15 sections of the admin specification are now complete. No sections are missing.