Content Management

The content management module covers all aspects of creating, reviewing, and organizing social media content. It includes four pages: a content hub for browsing all posts, a post detail view with per-post analytics, a multi-platform post composer, and a media library for managing uploads. All screens are in the (dashboard) route group.

Content Hub

Route: /content

The content hub is the central post management screen. It displays all posts across platforms in a filterable, searchable list with two view modes.

View toggle -- switch between grid view (PostCard components) and list view (PostRow components)
Status filter tabs -- filter by All, Published, Scheduled, or Draft using pill-style tabs that map to the PostStatus type
Platform filter -- dropdown to filter posts by one or more platforms (Instagram, Twitter/X, Facebook, LinkedIn, TikTok, YouTube)
Search bar -- text input to search posts by caption text or hashtags
Sort options -- sort by Most Recent, Most Engagement, or Alphabetical
Bulk actions -- select multiple posts to delete, reschedule, or change status
Post status badges -- each post shows a PostStatusBadge (green for published, blue for scheduled, gray for draft) along with platform badges for each target platform

import { PostCard } from "@/components/content/post-card"
import { PostRow } from "@/components/content/post-row"
import { PostStatusBadge } from "@/components/content/post-status-badge"
import { PlatformBadge } from "@/components/social/platform-badge"

Content Hub Layout

┌───────────────────────────────────────────┐
│ Search │ Status Tabs │ Platform │ Sort    │
├───────────────────────────────────────────┤
│ Grid / List Toggle                [+ New] │
├───────────┬───────────┬───────────────────┤
│ Post Card │ Post Card │ Post Card         │
│ (image,   │ (video,   │ (carousel,        │
│  caption, │  caption, │  caption,         │
│  metrics) │  metrics) │  metrics)         │
├───────────┼───────────┼───────────────────┤
│ Post Card │ Post Card │ Post Card         │
└───────────┴───────────┴───────────────────┘

Post Types

Type	Icon	Description
`image`	Image	Single image post
`video`	Video	Video content
`carousel`	Layers	Multi-image carousel
`text`	Type	Text-only post
`story`	Circle	Ephemeral story content
`reel`	Film	Short-form video reel

Data Sources

Data	Source	Location
Posts	`posts`	`data/seed.ts`
Post types	`PostType`	`types/index.ts`
Post statuses	`PostStatus`	`types/index.ts`

Post Detail

Route: /content/[postId]

The post detail page provides a deep dive into an individual post's content and performance metrics.

Post preview -- full-size media preview with caption, hashtags, and publish/schedule date
Platform badges -- which platforms the post was published to, with platform-specific icons
Engagement metrics -- EngagementMetrics component showing impressions, reach, likes, comments, shares, saves, clicks, and engagement rate
Engagement over time chart -- Recharts AreaChart showing how engagement accumulated after publishing
Comments feed -- scrollable list of comments from followers with username, avatar, text, sentiment indicator (positive/neutral/negative), platform badge, and timestamp
Post metadata -- creation date, publish date, scheduled date, media type, and status badge
Actions -- edit post, duplicate, delete, and view on platform (external link)

import { EngagementMetrics } from "@/components/social/engagement-metrics"
import { PostStatusBadge } from "@/components/content/post-status-badge"
import { PlatformBadge } from "@/components/social/platform-badge"
import { EngagementChart } from "@/components/charts/engagement-chart"

Post Detail Layout

┌─────────────────────┬─────────────────────┐
│ Post Preview        │ Engagement Metrics   │
│ (media + caption)   │ (impressions, reach, │
│                     │  likes, comments,    │
│                     │  shares, saves)      │
├─────────────────────┴─────────────────────┤
│ Engagement Over Time (area chart)         │
├───────────────────────────────────────────┤
│ Comments Feed                             │
│ [avatar] @username — comment text   [time]│
│ [avatar] @username — comment text   [time]│
└───────────────────────────────────────────┘

Data Sources

Data	Source	Location
Post	`posts` (filtered by id)	`data/seed.ts`
Post metrics	`PostMetrics` (embedded in post)	`data/seed.ts`
Comments	`postComments` (filtered by postId)	`data/seed.ts`

Post Composer

Route: /compose

The post composer is a full-featured multi-platform content creation screen with live previews.

Text editor -- large textarea for caption input with character count (per-platform limits displayed: Twitter 280, LinkedIn 3000, Instagram 2200, Facebook 63206, TikTok 2200, YouTube 5000)
Hashtag suggestions -- type # to see suggested hashtags from saved hashtag sets with usage counts and average reach
Platform selector -- toggle which platforms to publish to; each selected platform generates a PlatformPreview showing how the post will look on that network
Media uploader -- MediaUploader component with drag-and-drop file upload, preview thumbnails, image/video support, and per-platform format validation
Scheduling -- date/time picker to schedule the post for later, or "Publish Now" button for immediate publishing
Platform previews -- live PlatformPreview components showing a mockup of how the post will render on each selected platform (Instagram feed card, Twitter tweet, Facebook post, etc.)
Draft saving -- auto-save to draft status; manual "Save as Draft" button

import { PostComposer } from "@/components/content/post-composer"
import { MediaUploader } from "@/components/content/media-uploader"
import { PlatformPreview } from "@/components/content/platform-preview"

Composer Layout

┌─────────────────────┬─────────────────────┐
│ Caption Editor      │ Platform Previews   │
│ [textarea]          │ ┌─────────────────┐ │
│                     │ │ Instagram       │ │
│ #hashtag suggestions│ │ preview card    │ │
│                     │ ├─────────────────┤ │
│ Platform Toggles    │ │ Twitter/X       │ │
│ [IG] [TW] [FB] ... │ │ preview card    │ │
├─────────────────────┤ └─────────────────┘ │
│ Media Uploader      │                     │
│ (drag & drop zone)  │                     │
├─────────────────────┴─────────────────────┤
│ [Save Draft]  [Schedule]  [Publish Now]   │
└───────────────────────────────────────────┘

// types/index.ts
interface Post {
  id: string
  caption: string
  mediaUrls: string[]
  mediaType: PostType
  platforms: SocialPlatform[]
  status: PostStatus
  publishedAt: string | null
  scheduledAt: string | null
  createdAt: string
  hashtags: string[]
  metrics: PostMetrics
}

interface ScheduledPost {
  id: string
  caption: string
  mediaUrls: string[]
  mediaType: PostType
  platforms: SocialPlatform[]
  scheduledAt: string
  timezone: string
}

Data Sources

Data	Source	Location
Hashtag suggestions	`hashtagSets`	`data/seed.ts`
Platform configs	`connectedPlatforms`	`data/seed.ts`

Media Library

Route: /media

The media library is a file management interface for organizing uploaded images, videos, and GIFs.

Upload area -- MediaUploader component at the top for drag-and-drop or click-to-browse file uploads
Folder navigation -- sidebar with folders (All Media, Images, Videos, GIFs, plus custom folders) for organizing assets
Grid view -- thumbnails with file name, dimensions, file size, upload date, usage count (how many posts reference this media), and tags
Bulk actions -- select multiple media items to move to folder, add tags, or delete
Search and filter -- search by file name or tag, filter by media type (image, video, gif)
Media detail panel -- click a media item to see full preview, metadata, usage history (which posts use it), and edit tags

import { MediaUploader } from "@/components/content/media-uploader"

Media Item Type

// types/index.ts
interface MediaItem {
  id: string
  fileName: string
  url: string
  type: MediaType  // "image" | "video" | "gif"
  width: number
  height: number
  sizeBytes: number
  uploadedAt: string
  usageCount: number
  tags: string[]
  folder: string
}

interface MediaFolder {
  id: string
  name: string
  itemCount: number
}

Data Sources

Data	Source	Location
Media items	`mediaItems`	`data/seed.ts`
Media folders	`mediaFolders`	`data/seed.ts`

Next Steps

Content Calendar -- drag-and-drop content scheduling
Analytics -- post performance and audience insights
Social Inbox -- unified messaging and comments

Content Hub

Content Hub Layout

Post Types

Data Sources

Post Detail

Post Detail Layout

Data Sources

Post Composer

Composer Layout

Related Types

Data Sources

Media Library

Media Item Type

Data Sources

Next Steps