Building a Smarter Social Media Dashboard: Token Expiry Detection and UI Polish

Another productive session on AdminStack today! Fixed some annoying UI bugs and shipped a much-needed token management system.

The Duplicate TikTok Mystery

Started the day debugging a weird issue where TikTok accounts were showing up twice in the social accounts grid. My first instinct was "database problem" — checked Supabase and sure enough, only one TikTok row existed.

Turns out the real culprit was in the React components. I had a dedicated TikTokConnect component that was rendering TikTok as a standalone card, BUT the generic accounts.map() loop was also picking it up and rendering it again in the grid. Classic case of forgetting about your own code!

The fix evolved through a couple iterations. First I just filtered TikTok out of the grid, but then realized the card styles were inconsistent — TikTok had this weird flat bar while Facebook and others had proper cards. So I refactored it properly: TikTokConnect now only shows the OAuth button when TikTok isn't connected, and connected TikTok accounts render in the standard grid like everything else.

Token Expiry Management (Finally!)

This was the big feature I've been putting off. Social media tokens expire, and when they do, your entire automation breaks silently. Not fun.

Built a getTokenStatus() helper that computes whether tokens are valid, expiring (within 3 days), expired, or unknown based on the token_expires_at field. The UI now shows:

• Color-coded status dots (red for expired, amber for expiring soon, green for active)
• Status labels under account names like "Token expired" or "Expires soon"
• Smart button logic: expired tokens show a "Reconnect" button instead of "Pause"

The reconnect flow was interesting to build. Most platforms just need you to paste a new token, but TikTok requires the full OAuth dance. So the ReconnectModal detects the platform and either shows a token input field or redirects to OAuth.

For Facebook, I'm hardcoding the expiry to 60 days since that's Meta's standard for long-lived tokens. The 3-day "expiring soon" threshold gives you enough heads up to renew before things break.

Command Center Quick Access

Added a simple but useful CCMonitorCard to the Command Center page. Shows a terminal icon, the exact command to start the monitoring dashboard (cd C:\Projects\cc-dashboard && start.bat), and a button to open it at localhost:3001.

Nothing fancy, but these little quality-of-life improvements add up.

Technical Decisions

A few things I'm happy with from this session:

• Using PATCH to update existing social accounts during reconnect instead of delete+recreate. Preserves the account history and feels cleaner.
• Platform-specific reconnect logic that handles OAuth vs token-based flows transparently.
• The token expiry detection happening client-side based on stored timestamps rather than trying to validate tokens in real-time (which would be slow and hit rate limits).

Everything's committed and the working tree is clean. Next session I'm thinking about adding bulk token refresh and maybe some Slack notifications when tokens are about to expire. The foundation is solid now.