DemoBuy

Reports

Last updated on 2026-03-26

The reports module provides four screens for generating, managing, comparing, and exporting social media performance reports. All screens are in the (dashboard) route group.

Report Templates

Route: /reports

The main reports page displays a library of pre-built report templates that users can generate with customizable date ranges and platform filters.

  • Template grid -- ReportTemplateCard components displaying each template's icon, name, description, and category
  • Category filter -- horizontal tabs for All, Performance, Audience, Content, and Competitor template categories
  • Generate report -- clicking a template opens a configuration dialog to select date range, platforms to include, and output format (PDF, CSV, XLSX)
  • Quick generate -- shortcut buttons for common reports: "Monthly Performance" and "Weekly Summary"
import { ReportTemplateCard } from "@/components/reports/report-template-card"

Available Templates

Template Category Description
Monthly Performance Performance Complete monthly metrics across all platforms
Weekly Summary Performance Week-over-week engagement and growth summary
Audience Insights Audience Demographics, locations, and growth patterns
Content Performance Content Top-performing posts and content type analysis
Hashtag Report Content Hashtag usage, reach, and trend analysis
Competitor Benchmark Competitor Side-by-side comparison with competitors
Platform Deep Dive Performance Detailed metrics for a single platform
Sentiment Report Audience Sentiment trends and mention analysis 
// types/index.ts
interface ReportTemplate {
  id: string
  name: string
  description: string
  icon: string
  category: string
}

Data Sources

Data Source Location
Report templates reportTemplates data/seed.ts

My Reports

Route: /reports/my-reports

A list of previously generated reports with status indicators and download links.

  • Report list -- ReportRow components in a table format showing report name, template name, date range, generated date, status, and format
  • Status indicators -- "Ready" (green badge with checkmark) or "Generating" (amber badge with spinner) using the ReportStatus type
  • Download -- click a ready report to download in its generated format (PDF, CSV, XLSX, or ZIP)
  • Delete -- remove a generated report from the list
  • Sort and filter -- sort by generated date (newest/oldest) and filter by status or template type
import { ReportRow } from "@/components/reports/report-row"

Report List Layout

┌──────────────────┬──────────┬──────────┬────────┬────────┐
│ Report Name      │ Date     │ Created  │ Status │ Format │
│                  │ Range    │          │        │        │
├──────────────────┼──────────┼──────────┼────────┼────────┤
│ March Monthly    │ Mar 1-31 │ Mar 25   │ Ready  │ PDF    │
│ Performance      │          │          │        │        │
├──────────────────┼──────────┼──────────┼────────┼────────┤
│ Week 12 Summary  │ Mar 17-23│ Mar 24   │ Ready  │ XLSX   │
├──────────────────┼──────────┼──────────┼────────┼────────┤
│ Competitor Q1    │ Jan-Mar  │ Mar 26   │ Gen... │ PDF    │
└──────────────────┴──────────┴──────────┴────────┴────────┘

// types/index.ts
interface GeneratedReport {
  id: string
  name: string
  templateId: string
  templateName: string
  dateRange: { start: string; end: string }
  createdAt: string
  status: ReportStatus  // "ready" | "generating"
  format: ExportFormat  // "pdf" | "csv" | "xlsx" | "zip"
}

Data Sources

Data Source Location
Generated reports generatedReports data/seed.ts

Platform Comparison

Route: /reports/comparison

Side-by-side comparison of performance metrics across platforms.

  • Platform selector -- multi-select dropdown to choose which platforms to compare (2-6 platforms)
  • Date range picker -- DateRangePicker for setting the comparison period
  • Comparison table -- data table with platforms as columns and metrics as rows: Followers, Engagement Rate, Impressions, Reach, Posts Published, Best Performing Post, and Growth Rate
  • Bar chart comparison -- PlatformBarChart with grouped bars comparing a selected metric across platforms, color-coded with platform brand colors
  • Trend overlay chart -- multi-line FollowerGrowthChart overlaying growth trajectories for each selected platform on the same chart
  • Key insights -- auto-generated summary cards highlighting which platform leads in each metric category
import { PlatformBarChart } from "@/components/charts/platform-bar-chart"
import { FollowerGrowthChart } from "@/components/charts/follower-growth-chart"
import { DateRangePicker } from "@/components/analytics/date-range-picker"

Comparison Layout

┌───────────────────────────────────────────┐
│ Platform Selector: [IG] [TW] [FB] [LI]   │
├───────────┬───────┬───────┬───────┬───────┤
│ Metric    │  IG   │  TW   │  FB   │  LI   │
├───────────┼───────┼───────┼───────┼───────┤
│ Followers │ 45.2K │ 12.8K │ 23.1K │ 8.9K  │
│ Eng Rate  │ 4.2%  │ 2.8%  │ 1.9%  │ 3.1%  │
│ Impress.  │ 280K  │ 95K   │ 145K  │ 52K   │
│ Growth    │ +3.2% │ +1.8% │ +0.9% │ +2.4% │
├───────────┴───────┴───────┴───────┴───────┤
│ Bar Chart Comparison                      │
│ (grouped bars by platform)                │
├───────────────────────────────────────────┤
│ Growth Trend Overlay (multi-line chart)   │
└───────────────────────────────────────────┘

Data Sources

Data Source Location
Platform metrics platformMetrics data/seed.ts
Connected platforms connectedPlatforms data/seed.ts
Growth data growthData data/seed.ts

Export Center

Route: /reports/export

Centralized interface for exporting data in various formats.

  • Export option cards -- ExportOptionCard components for each export type showing icon, name, description, and supported formats
  • Format selection -- toggle between PDF, CSV, XLSX, and ZIP for each export
  • Data scope -- select what to export: All Data, Posts Only, Analytics Only, Audience Data, or Competitor Data
  • Platform filter -- choose which platforms to include in the export
  • Date range -- DateRangePicker for setting the export period
  • Export button -- triggers the export generation with a toast confirmation
import { ExportOptionCard } from "@/components/reports/export-option-card"

Export Options

Export Type Formats Description
Full Report PDF, ZIP Complete analytics report with charts and tables
Raw Data CSV, XLSX Spreadsheet export of all metrics data
Post Data CSV, XLSX All posts with captions, metrics, and dates
Audience Data CSV, XLSX Demographics, locations, and growth data
Media Assets ZIP Download all uploaded media files 
// types/index.ts
type ExportFormat = "pdf" | "csv" | "xlsx" | "zip"

interface ExportConfig {
  id: string
  name: string
  description: string
  formats: ExportFormat[]
  icon: string
}

Data Sources

Data Source Location
Export configs exportConfigs data/seed.ts

Next Steps

Previous

Analytics

Next

Social Inbox