Skip to content

Improve/dashboard UI#149

Open
GauravOP-03 wants to merge 8 commits intoscriptaiapp:mainfrom
GauravOP-03:improve/dashboard-ui
Open

Improve/dashboard UI#149
GauravOP-03 wants to merge 8 commits intoscriptaiapp:mainfrom
GauravOP-03:improve/dashboard-ui

Conversation

@GauravOP-03
Copy link
Copy Markdown
Collaborator

📝 Description

Add and refine the dashboard page and its components so it stays self-contained and won’t break existing flows. Integrates useBilling and useChannelStats, shows returning users a hub with weekly activity, billing info, and YouTube channel card, and shows new users an onboarding flow. Only modified and new dashboard-related files are included.

🎯 Type of Change

  • 🐛 Bug fix (non-breaking change which fixes an issue)
  • ✨ New feature (non-breaking change which adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • 📚 Documentation update
  • 🎨 Style/UI changes (formatting, missing semi colons, etc; no logic change)
  • ♻️ Refactoring (no functional changes, code improvements)
  • ⚡ Performance improvements
  • 🧪 Adding or updating tests
  • 🔧 Configuration changes

🧪 Testing

  • I have tested my changes locally
  • I have added tests for my changes
  • All existing tests pass
  • I have tested on different browsers/devices (if applicable)

Describe:

  • Verified dashboard for new vs returning users
  • Confirmed billing card and channel stats display
  • Tested YouTube connect/disconnect and Gmail dialog
  • Checked loading skeleton while data is fetching

📋 Checklist

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • I have checked my code and corrected any misspellings
  • I have read the Contributing Guide

📸 Screenshots (if applicable)

image image image

🔧 Technical Details

  • app/dashboard/page.tsx

    • Uses useChannelStats, useBilling
    • Fetches scripts, thumbnails, dubbings, ideations, subtitles via Promise.allSettled
    • Calls fetchStats() and refreshBilling() on mount
    • Chooses ReturningUserHub or NewUserOnboarding based on youtube_connected && ai_trained
    • Passes stats (channel stats), billingInfo, billingLoading into ReturningUserHub
    • Handles YouTube connect/disconnect; Gmail dialog when provider is not Google
  • ReturningUserHub

    • Props: profile, data (DashboardData), youtubeChannel (ChannelStats), billingInfo, billingLoading, disconnect handlers
    • Uses Recharts: AreaChart (weekly output), PieChart (content mix)
    • Displays billing card: plan name, renewal date, credits, upgrade/manage CTA
    • YouTube channel card: thumbnail, name, language, AI training status, unlink button
    • Uses formatTimeAgo for recent activity timestamps
  • NewUserOnboarding

    • Two-step progress: connect YouTube → AI training
    • Links to /dashboard/train and /dashboard/scripts/new, /dashboard/thumbnails
    • Handles OAuth error from ?error query param
  • DashboardSkeleton

    • Skeleton layout aligned with hub: hero, metrics, chart, quick actions, side cards
  • useBilling / useChannelStats

    • Provide billingInfo, plan, credits and stats, fetchStats(forceSync) for dashboard

🚀 Deployment Notes

  • No extra env vars
  • Backend billing and channel-stats API must be deployed and available

📚 Documentation Updates

  • README.md updated
  • CONTRIBUTING.md updated (if applicable)
  • API documentation updated (if applicable)
  • Component documentation updated (if applicable)

🔍 Review Notes

  • Ensure ReturningUserHub receives and renders youtubeChannel and billingInfo correctly
  • Check that fetchStats and refreshBilling are called at the right time
  • Confirm skeleton layout matches the real hub layout

📊 Performance Impact

  • No performance impact
  • Performance improvement
  • Performance regression (explain below)

🔒 Security Considerations

  • No security implications
  • Security improvement
  • Potential security concern (explain below)

Details:

  • All data fetching uses authenticated API calls (requireAuth: true)

🎉 Additional Notes

  • This PR focuses only on the dashboard page and its components so it can be merged without breaking other flows; other features can follow in separate PRs.

@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Feb 28, 2026

@GauravOP-03 is attempting to deploy a commit to the afrin127329's projects Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant