Social Media Content Dashboard

What This Skill Builds

A dark-themed internal dashboard (navy/orange) that serves as the "brain" for a weekly content automation system. It stores all configuration variables that feed into the weekly content creator, and provides a live Meta Ads review panel with AI-generated strategic recommendations.

Core sections:

• Channel Routing (posts/stories per channel per week)
• Post Type Config (content mix per brand)
• CTA Config (call-to-action templates)
• Brand Voice (tone, keywords, audience, UVP per brand)
• Content Settings (global key-value settings)
• Influencer Tracker
• YouTube Channels (research sources)
• Research Sources (RSS, Reddit, blogs)
• Events Calendar (promotions with lead-time)
• Specials & Promos (day-of-week recurring)
• Meta Ads Review (live data, active-only, dual-account, AI recommendations)
• Automation Log

Phase 1: Database Schema

Read the full schema reference before writing any code: /home/ubuntu/skills/social-media-content-dashboard/references/dashboard-schema.md

Key schema decisions:

• Use double not decimal for float columns (TiDB/MySQL compatibility)
• Store all timestamps as bigint (Unix ms)
• Brand enum: b2c | b2b | brand
• Platform enum: facebook | instagram | linkedin | tiktok | youtube | twitter

After editing drizzle/schema.ts, generate and apply migration:

pnpm drizzle-kit generate
# Then read the generated .sql file and apply via webdev_execute_sql

Seed all tables on server startup — check if empty first, insert defaults if so. Run seed non-blocking with .catch().

Phase 2: tRPC Router Structure

Split routers by feature once routers.ts exceeds ~150 lines. Each config table needs:

• list / get query
• upsert / set mutation
• delete mutation (where applicable)

For contentSettings, use a key-value pattern:

getContentSettings: protectedProcedure.query(() => db.getContentSettings()),
setContentSetting: protectedProcedure
  .input(z.object({ key: z.string(), value: z.string() }))
  .mutation(({ input }) => db.setContentSetting(input.key, input.value))

Phase 3: Frontend — DashboardLayout

Use the pre-built DashboardLayout component. Read it before modifying:

client/src/components/DashboardLayout.tsx

Navigation groups for this dashboard:

• OVERVIEW: Dashboard, Meta Ads Review, Automation Log
• CONTENT CONFIG: Channel Routing, Post Type Config, CTA Config, Brand Voice, Content Settings
• RESEARCH & INSPIRATION: Research Sources, Influencer Tracker, YouTube Channels
• PROMOTIONS & EVENTS: Events Calendar, Specials & Promos

Design tokens: dark navy background (#0a0f1e), orange accent (oklch(0.65 0.2 45)). Set defaultTheme="dark" in ThemeProvider and ensure .dark {} CSS variables match.

Phase 4: Meta Ads Live Integration

Read the full integration reference: /home/ubuntu/skills/social-media-content-dashboard/references/meta-ads-integration.md

Quick summary of the workflow:

1. User gets token from https://developers.facebook.com/tools/explorer/ with ads_read + ads_management
2. Save as META_ACCESS_TOKEN via webdev_request_secrets
3. Extend to 60-day token immediately (short-lived expires in ~1 hour)
4. Find ad account IDs: GET /me/adaccounts?fields=id,name
5. Fetch campaigns with inline insights using field expansion (single API call)
6. Filter status === "ACTIVE" server-side before returning to frontend
7. For AI recommendations: pass all campaign data to invokeLLM with structured JSON schema output

Multi-account layout: Stack account sections vertically. Each section has its own account summary stats (total spend, active campaigns, total leads, avg CPL) and campaign cards below.

Ad-set drill-down: Add getAdSets procedure that fetches /${campaignId}/adsets with the same insight fields. Render as expandable section per campaign card.

Critical pitfall: manus-mcp-cli only works in the Manus sandbox session — it cannot be called from deployed server Node.js code. Always use the Meta Graph API directly with META_ACCESS_TOKEN in server procedures.

Phase 5: Instagram MCP Posting

Read the posting reference: /home/ubuntu/skills/social-media-content-dashboard/references/instagram-mcp-posting.md

Quick workflow:

1. Generate image with generate tool (1080×1080 for feed, 1080×1920 for story)
2. Upload: manus-upload-file /path/to/image.png → get public HTTPS URL
3. Post via MCP: manus-mcp-cli tool call create_instagram --server instagram --input '{"image_url":"URL","caption":"...","post_type":"feed"}'
4. Verify: check Instagram profile on phone — most recent post should appear

Scope: Instagram MCP only posts to the connected Instagram account. Facebook, LinkedIn, VanX Funnels social planner require separate integrations.

Phase 6: Daily Meta Ads Digest (Scheduled Task)

Read the full setup guide: /home/ubuntu/skills/social-media-content-dashboard/references/daily-digest-setup.md

Key requirements:

1. Add metaDigest POST endpoint to the scheduled router using publicProcedure (not protectedProcedure)
2. Deploy the app before creating the scheduled task (scheduled tasks POST to the deployed URL)
3. Use the schedule tool with cron 0 0 8 * * * (8am daily, repeat: true)
4. Scheduled task prompt must instruct the agent to POST via curl (not Python requests) using $SCHEDULED_TASK_ENDPOINT_BASE and $SCHEDULED_TASK_COOKIE

Common Pitfalls & Fixes

Vitest Coverage

Write tests in server/*.test.ts. Key things to test:

• META_ACCESS_TOKEN env var is set and has ads_read permission (call /me/permissions)
• getLiveDashboard returns only ACTIVE campaigns (status filter)
• getStrategicRecommendations returns valid JSON with all required fields
• All db helpers return correct types (list returns array, get returns object or null)

Run: pnpm test