Dashboard & Platforms | Social Media Dashboard Kit Docs

The dashboard group provides the primary landing experience for the Social Media Dashboard Kit. It includes a cross-platform home dashboard and six dedicated platform dashboards -- one for each connected social network. All screens share the (dashboard) route group layout with AppSidebar and AppHeader.

Home Dashboard

Route: /

The main dashboard is the default landing page. It provides a high-level snapshot of social media performance across all connected platforms.

Cross-platform stat cards -- Total Followers (with growth trend), Total Engagement, Total Impressions, and Average Engagement Rate using the StatsCard component with Sparkline mini-charts
Platform overview cards -- one PlatformCard per connected platform showing handle, follower count, follower change, engagement rate, and last synced time; each card uses its platform brand color
Top posts carousel -- horizontally scrollable carousel of the best-performing posts across all platforms, showing thumbnail, caption preview, engagement metrics, and platform badge
Upcoming posts -- list of the next 5 scheduled posts with scheduled time, platform icons, caption preview, and media type indicator
Quick actions -- prominent buttons for "Compose Post", "View Calendar", and "Analytics" shortcuts

import { StatsCard } from "@/components/dashboard/stats-card"
import { PlatformCard } from "@/components/dashboard/platform-card"
import { TopPostsCarousel } from "@/components/dashboard/top-posts-carousel"
import { UpcomingPosts } from "@/components/dashboard/upcoming-posts"
import { QuickActions } from "@/components/dashboard/quick-actions"
import { Sparkline } from "@/components/charts/sparkline"

Dashboard Layout

┌──────────┬──────────┬──────────┬──────────┐
│ Total    │ Total    │ Total    │ Avg      │
│ Followers│ Engage.  │ Impress. │ Eng Rate │
├──────────┴──────────┴──────────┴──────────┤
│ Platform Cards (horizontal scroll)        │
│ [Instagram] [Twitter] [Facebook] ...      │
├─────────────────────┬─────────────────────┤
│ Top Posts Carousel   │ Upcoming Posts      │
│ (best performers)    │ (next 5 scheduled) │
├─────────────────────┴─────────────────────┤
│ Quick Actions                             │
└───────────────────────────────────────────┘

Data Sources

Data	Source	Location
Cross-platform stats	Computed from `connectedPlatforms`	`data/seed.ts`
Platform cards	`connectedPlatforms`	`data/seed.ts`
Top posts	`posts` (sorted by engagement)	`data/seed.ts`
Upcoming posts	`posts` (filtered by status: scheduled)	`data/seed.ts`

Platform-Specific Dashboards

Route: /platforms/[platform]

Each of the six supported platforms has a dedicated dashboard accessible via the dynamic [platform] route segment. The platform parameter accepts: instagram, twitter, facebook, linkedin, tiktok, or youtube.

All platform dashboards share the same layout structure but display platform-filtered data and use the respective platform brand color as the accent.

Platform Colors

Platform	Color	Hex	Usage
Instagram	Pink	`#E1306C`	Stat card accents, chart lines, badges
Twitter/X	Blue	`#1DA1F2`	Stat card accents, chart lines, badges
Facebook	Blue	`#1877F2`	Stat card accents, chart lines, badges
LinkedIn	Blue	`#0A66C2`	Stat card accents, chart lines, badges
TikTok	Teal	`#00F2EA`	Stat card accents, chart lines, badges
YouTube	Red	`#FF0000`	Stat card accents, chart lines, badges

Platform Dashboard Structure

Each platform dashboard includes:

Account overview card -- AccountCard showing avatar, handle, follower/following counts, posts count, bio preview, and connection status
Platform-specific KPI cards -- four StatsCard components with metrics relevant to the platform (e.g., Followers, Engagement Rate, Impressions, Reach) with trend indicators and sparklines
Follower growth chart -- FollowerGrowthChart (Recharts AreaChart) showing follower count over the last 30/60/90 days with the platform brand color as the line/fill
Engagement chart -- EngagementChart (Recharts BarChart) showing likes, comments, shares, and saves broken down by day/week
Recent posts grid -- filterable grid of recent posts on this platform with engagement metrics, sorted by most recent
Engagement metrics summary -- EngagementMetrics component showing average likes, comments, shares, and saves per post

import { AccountCard } from "@/components/social/account-card"
import { StatsCard } from "@/components/dashboard/stats-card"
import { FollowerGrowthChart } from "@/components/charts/follower-growth-chart"
import { EngagementChart } from "@/components/charts/engagement-chart"
import { EngagementMetrics } from "@/components/social/engagement-metrics"
import { PlatformBadge } from "@/components/social/platform-badge"
import { PlatformIcon } from "@/components/social/platform-icon"

Platform Dashboard Layout

┌───────────────────────────────────────────┐
│ Account Card (avatar, handle, bio)        │
├──────────┬──────────┬──────────┬──────────┤
│ Followers│ Eng Rate │ Impress. │ Reach    │
├──────────┴──────────┼──────────┴──────────┤
│ Follower Growth     │ Engagement          │
│ (area chart)        │ (bar chart)         │
├─────────────────────┴─────────────────────┤
│ Recent Posts (grid)                       │
├───────────────────────────────────────────┤
│ Engagement Metrics Summary                │
└───────────────────────────────────────────┘

Dynamic Route Handling

The [platform] segment is validated against the SocialPlatform type to ensure only valid platforms are rendered:

// types/index.ts
export type SocialPlatform =
  | "instagram"
  | "twitter"
  | "facebook"
  | "linkedin"
  | "tiktok"
  | "youtube"

If an invalid platform slug is provided, the page renders a 404 state.

Data Sources

Data	Source	Location
Platform account	`connectedPlatforms` (filtered by platform)	`data/seed.ts`
Platform metrics	`platformMetrics` (filtered by platform)	`data/seed.ts`
Follower growth	`growthData` (filtered by platform)	`data/seed.ts`
Platform posts	`posts` (filtered by platforms array)	`data/seed.ts`

Platform Badge Component

The PlatformBadge component renders a colored badge with the platform icon and name. It is used throughout the app to identify which platform a post, conversation, or metric belongs to:

import { PlatformBadge } from "@/components/social/platform-badge"

<PlatformBadge platform="instagram" />  // Pink badge with Instagram icon
<PlatformBadge platform="twitter" />    // Blue badge with X icon
<PlatformBadge platform="tiktok" />     // Teal badge with TikTok icon

Next Steps

Content Management -- content hub, post detail, and compose
Content Calendar -- drag-and-drop content scheduling
Analytics -- audience, engagement, and competitor analytics