ONE Platform: Analytics Dashboard Platform v1.0.0

Focus: Comprehensive analytics dashboard with real-time metrics, team management, and data visualization Type: Complete frontend implementation (Astro + React 19 + Tailwind v4 + Recharts) Integration: Convex for real-time data, role-based access control Process: Cycle 1-100 cycle sequence Timeline: 12-16 cycles per specialist per day Target: Fully functional analytics and team management dashboard

---

PHASE 1: FOUNDATION & DESIGN (Cycle 1-10)

Purpose: Define dashboard requirements, metrics, user flows, design system

Cycle 1: Define Dashboard Structure

• Core Dashboards:
  • Overview dashboard (key metrics at a glance)
  • Analytics dashboard (detailed charts and graphs)
  • Team management dashboard (members, roles, permissions)
  • Reports dashboard (custom reports, exports)
  • Settings dashboard (account, preferences, integrations)
• Dashboard Features:
  • Real-time metrics streaming
  • Interactive charts and graphs
  • Date range filters
  • Metric comparisons (vs previous period)
  • Goal tracking and KPI monitoring
  • Custom widgets and layouts
  • Data export (PDF, CSV, Excel)
• Team Management:
  • Invite team members
  • Assign roles and permissions
  • View activity logs
  • Team collaboration features
  • User directory
• Reports:
  • Pre-built report templates
  • Custom report builder
  • Scheduled reports
  • Report sharing
  • Report history

Cycle 2: Map Dashboard to 6-Dimension Ontology

• Groups: Organization (company), team, department
• People: Admin (owner), manager, member, viewer
• Things:
  • dashboard_config (layout, widgets, preferences)
  • metric (name, value, target, trend)
  • widget (type, data source, config)
  • report (title, config, schedule, recipients)
  • team_member (user, role, permissions)
• Connections:
  • user → dashboard (owns, views)
  • user → team (member_of, manages)
  • metric → target (tracks)
  • report → user (shared_with)
  • widget → dashboard (displayed_on)
• Events:
  • dashboard_viewed, metric_updated, report_generated
  • team_member_invited, role_changed, permission_granted
  • widget_added, layout_changed, export_completed
• Knowledge: Metric trends, insights, anomalies, predictions

Cycle 3: Design Metrics & KPIs

• Key Metrics:
  • Revenue (total, MRR, ARR)
  • Growth (users, revenue, engagement)
  • Conversion rates (signup, trial, paid)
  • Engagement (DAU, MAU, session duration)
  • Retention (churn rate, LTV)
  • Performance (page load, API response times)
  • User satisfaction (NPS, CSAT)
• Metric Card Shows:
  • Metric name and value
  • Trend indicator (up/down arrow, %)
  • Comparison to previous period
  • Sparkline mini chart
  • Target progress bar (if applicable)
  • Link to detailed view

Cycle 4: Design Chart Types

• Chart Library: Recharts
• Chart Types:
  • Line chart (trends over time)
  • Bar chart (comparisons)
  • Pie/donut chart (proportions)
  • Area chart (cumulative trends)
  • Scatter plot (correlations)
  • Heatmap (intensity over time)
  • Funnel chart (conversion flows)
  • Gauge chart (single metric progress)
• Chart Features:
  • Interactive tooltips
  • Zoom and pan
  • Legend toggle
  • Data point click events
  • Export chart as image
  • Responsive sizing

Cycle 5: Design Team Management UI

• Team Page Shows:
  • Team member list (cards or table)
  • Each member shows:
    • Avatar, name, email
    • Role badge
    • Last active time
    • Activity summary
    • Actions menu (edit, remove)
  • Invite button (prominent)
  • Filter by role
  • Search members
  • Sort by name, role, last active
• Invite Flow:
  • Email input
  • Role selection (admin, manager, member, viewer)
  • Permission customization
  • Welcome message (optional)
  • Send invitation
• Roles & Permissions:
  • Admin: Full access (manage team, settings, billing)
  • Manager: View all, manage team, edit content
  • Member: View own data, create content
  • Viewer: Read-only access

Cycle 6: Design Reports Builder

• Report Builder UI:
  • Step 1: Select report type (template or custom)
  • Step 2: Choose metrics and dimensions
  • Step 3: Configure filters and date range
  • Step 4: Select visualization (table, chart)
  • Step 5: Preview report
  • Step 6: Schedule or export
• Report Templates:
  • Executive summary
  • Marketing performance
  • Sales pipeline
  • User engagement
  • Financial overview
  • Custom (blank template)
• Export Options:
  • PDF (formatted document)
  • CSV (raw data)
  • Excel (with formulas)
  • PNG (charts as images)
  • Email delivery
  • Scheduled exports (daily, weekly, monthly)

Cycle 7: Design Responsive Layout

• Mobile-first (< 768px):
  • Single column metric cards
  • Stacked charts
  • Hamburger menu
  • Simplified navigation
  • Touch-friendly controls
  • Swipeable sections
• Tablet (768px-1023px):
  • Two-column grid
  • Collapsible sidebar
  • Tablet-optimized charts
• Desktop (1024px+):
  • Multi-column grid (up to 4 columns)
  • Persistent sidebar
  • Drag-and-drop widgets
  • Resizable charts
  • Multi-panel views

Cycle 8: Design Visual System

• Color Palette:
  • Primary: Blue (#3B82F6) for metrics, CTAs
  • Success: Green (#10B981) for positive trends
  • Warning: Yellow (#F59E0B) for alerts
  • Danger: Red (#EF4444) for negative trends
  • Neutral: Grays for borders, backgrounds
  • Chart colors: Distinct, accessible palette
  • Dark mode support (muted colors)
• Typography:
  • Metric values: 32-48px (bold)
  • Card titles: 18-20px (semibold)
  • Body text: 16px (regular)
  • Small text: 14px (dates, labels)
• Components:
  • Metric card (with trend indicator)
  • Chart container (with controls)
  • Data table (sortable, filterable)
  • Team member card
  • Report card
  • Date range picker
  • Filter controls

Cycle 9: Plan Real-time Updates

• Convex Integration:
  • Subscribe to metrics changes
  • Real-time data streaming
  • Optimistic UI updates
  • Connection status indicator
  • Reconnection handling
• Update Strategy:
  • Push updates for critical metrics
  • Poll for non-critical data
  • Debounce rapid updates
  • Cache for offline viewing
• Notifications:
  • Metric threshold alerts
  • Team activity notifications
  • Report completion alerts
  • System notifications

Cycle 10: Define Success Metrics

• Dashboard complete when:
  • Overview dashboard displays key metrics
  • Charts render with real-time data
  • Team management CRUD operations work
  • Role-based access control enforced
  • Reports generate and export correctly
  • Date range filtering works
  • Metric comparisons calculate accurately
  • Real-time updates stream smoothly
  • Mobile responsive on all screen sizes
  • Lighthouse score > 85
  • Accessible (WCAG 2.1 AA compliant)
  • Export formats valid (PDF, CSV, Excel)

---

PHASE 2: BACKEND SCHEMA & SERVICES (Cycle 11-20)

Purpose: Define Convex schema, queries, mutations for dashboard data

Cycle 11: Define Dashboard Schema

• Tables:
  • dashboards (user configs, layouts)
  • metrics (tracked values, targets)
  • widgets (dashboard components)
  • reports (saved reports, schedules)
  • team_members (users, roles, permissions)
• Indexes:
  • by_user, by_organization, by_date

Cycle 12: Create Metrics Queries

• Convex queries:
  • metrics.list (get all metrics for user/org)
  • metrics.get (get single metric)
  • metrics.history (get time series data)
  • metrics.compare (compare periods)
  • metrics.trends (calculate trends)

Cycle 13: Create Dashboard Mutations

• Convex mutations:
  • dashboard.create (new dashboard)
  • dashboard.update (update layout, widgets)
  • dashboard.delete (remove dashboard)
  • dashboard.addWidget (add widget)
  • dashboard.removeWidget (remove widget)

Cycle 14: Create Team Management Mutations

• Convex mutations:
  • team.invite (send invitation)
  • team.updateRole (change role)
  • team.updatePermissions (change permissions)
  • team.removeMember (remove from team)

Cycle 15: Create Reports Mutations

• Convex mutations:
  • reports.create (save report config)
  • reports.generate (generate report data)
  • reports.schedule (set up recurring reports)
  • reports.export (export to format)

Cycle 16-20: Continue with real-time subscriptions, caching, and optimization

---

PHASE 3: REACT COMPONENTS (Cycle 21-40)

Purpose: Build interactive React components for dashboard UI

Cycle 21: Create Dashboard Layout

• DashboardLayout component:
  • Sidebar navigation
  • Top bar (search, notifications, profile)
  • Main content area (grid)
  • Mobile navigation drawer

Cycle 22: Create Metric Card Component

• MetricCard component:
  • Metric name, value, unit
  • Trend indicator (arrow, percentage)
  • Sparkline mini chart
  • Comparison text (“vs last week”)
  • Target progress bar
  • Loading skeleton
  • Error state

Cycle 23: Create Chart Components

• LineChart component (Recharts)
• BarChart component (Recharts)
• PieChart component (Recharts)
• AreaChart component (Recharts)
• Common features:
  • Responsive container
  • Custom tooltips
  • Legend toggle
  • Export button
  • Loading state

Cycle 24: Create Data Table Component

• DataTable component:
  • Column sorting
  • Row filtering
  • Pagination
  • Row selection
  • Export button
  • Empty state
  • Loading skeleton

Cycle 25: Create Team Member Card

• TeamMemberCard component:
  • Avatar, name, email
  • Role badge
  • Last active indicator
  • Activity summary
  • Actions menu (edit, remove)
  • Hover state

Cycle 26: Create Invite Member Modal

• InviteModal component:
  • Email input (with validation)
  • Role selector
  • Permissions checkboxes
  • Welcome message textarea
  • Send button
  • Loading state
  • Success/error feedback

Cycle 27: Create Report Builder

• ReportBuilder component:
  • Multi-step wizard
  • Metric selector (multi-select)
  • Filter controls
  • Date range picker
  • Visualization selector
  • Preview pane
  • Export options
  • Save button

Cycle 28: Create Date Range Picker

• DateRangePicker component:
  • Preset ranges (today, week, month, year)
  • Custom range selector
  • Comparison toggle (“compare to previous”)
  • Apply button
  • Clear button

Cycle 29-40: Continue with filters, settings, notifications, and polish

---

PHASE 4: ASTRO PAGES & INTEGRATION (Cycle 41-60)

Purpose: Create Astro pages and integrate React components

Cycle 41: Create Dashboard Index Page

• /account/index.astro:
  • Overview dashboard
  • Key metrics grid
  • Recent activity feed
  • Quick actions

Cycle 42: Create Analytics Page

• /account/analytics.astro:
  • Detailed charts
  • Time series data
  • Metric deep dives
  • Custom date ranges

Cycle 43: Create Team Page

• /account/team.astro:
  • Team member list
  • Invite button
  • Role management
  • Activity logs

Cycle 44: Create Reports Page

• /account/reports.astro:
  • Saved reports list
  • Report templates
  • Report builder
  • Export history

Cycle 45: Create Settings Page

• /account/settings.astro:
  • Profile settings
  • Notification preferences
  • Dashboard preferences
  • Integrations
  • Billing (optional)

Cycle 46-60: Continue with real-time integration, error handling, and optimization

---

PHASE 5: POLISH & OPTIMIZATION (Cycle 61-100)

Purpose: Refine UX, performance, accessibility, testing

Cycle 61-70: Animations, transitions, loading states

Cycle 71-80: Accessibility, keyboard navigation, screen reader support

Cycle 81-90: Performance optimization, caching, lazy loading

Cycle 91-100: Testing, documentation, deployment

---

SUCCESS CRITERIA

Dashboard platform is complete when:

• ✅ Overview dashboard displays key metrics with real-time updates
• ✅ Analytics dashboard shows interactive charts
• ✅ Team management CRUD operations work
• ✅ Role-based access control enforced
• ✅ Reports builder creates custom reports
• ✅ Export to PDF, CSV, Excel works
• ✅ Date range filtering works across all views
• ✅ Metric comparisons calculate accurately
• ✅ Real-time data streams smoothly via Convex
• ✅ Notifications display for important events
• ✅ Mobile responsive on all devices
• ✅ Dark mode works
• ✅ Lighthouse score > 85
• ✅ Accessible (WCAG 2.1 AA compliant)
• ✅ Cross-browser tested (Chrome, Firefox, Safari, Edge)

---

Timeline: 80-90 cycles for complete implementation Status: Ready to build Next: Use Claude Code to implement step by step following cycle sequence