Skip to content

feat: refined DashboardPage #142

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

feat: refined DashboardPage #142

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
252 changes: 252 additions & 0 deletions Frontend/src/pages/DashboardPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,252 @@
import React from "react"
import { Link } from "react-router-dom"
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "../components/ui/card"
import { Button } from "../components/ui/button"
import {
BarChart3,
Briefcase,
DollarSign,
LayoutDashboard,
MessageSquare,
Rocket,
Users,
RefreshCw,
TrendingUp,
Sparkles,
Heart,
} from "lucide-react"

import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs"
import { PerformanceMetrics } from "../components/dashboard/performance-metrics"
import { RecentActivity } from "../components/dashboard/recent-activity"
import { SponsorshipMatches } from "../components/dashboard/sponsorship-matches"
import { useAuth } from "../context/AuthContext"
import CreateCampaignDialog from "@/components/Campaign/CreateCampaign"
import CollaborationsPage from "./Collaborations"

export default function DashboardPage() {
const { user } = useAuth()



return (
<div className="min-h-screen flex flex-col bg-gray-50 text-gray-900">
{/* HEADER */}
<header className="sticky top-0 z-50 w-full border-b border-gray-200 bg-white/90 backdrop-blur-md shadow-sm">
<div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
<div className="flex items-center gap-3">
<Rocket className="h-6 w-6 text-purple-600" />
<span className="font-bold text-xl">Inpact</span>
<nav className="hidden md:flex items-center space-x-6 ml-6 text-sm text-gray-600">
<Link to="/dashboard" className="hover:text-purple-600 flex items-center gap-2">
<LayoutDashboard className="h-4 w-4" /> Dashboard
</Link>
<Link to="/dashboard/sponsorships" className="hover:text-purple-600 flex items-center gap-2">
<Briefcase className="h-4 w-4" /> Sponsorships
</Link>
<Link to="/dashboard/collaborations" className="hover:text-purple-600 flex items-center gap-2">
<Users className="h-4 w-4" /> Collaborations
</Link>
<Link to="/dashboard/messages" className="hover:text-purple-600 flex items-center gap-2">
<MessageSquare className="h-4 w-4" /> Messages
</Link>
</nav>
</div>

<div className="flex items-center gap-4">

<CreateCampaignDialog>
<Button className="bg-purple-600 hover:bg-purple-700 text-white px-5 py-2 rounded-lg text-sm">
<DollarSign className="mr-2 h-4 w-4" /> New Campaign
</Button>
</CreateCampaignDialog>
</div>
</div>
</header>
Comment on lines +41 to +71
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Header implementation doesn't match PR description.

The PR description states the header was simplified to "keep only Notification and New Campaign buttons," but the implementation includes:

  1. Full navigation menu with Dashboard, Sponsorships, Collaborations, and Messages links (lines 46-59)
  2. Only the New Campaign button in the actions area (lines 62-69)
  3. No notification button or dropdown

This suggests either the PR description is inaccurate or the notification feature wasn't fully implemented.

Please clarify the intended header design and update either the code or the PR description accordingly.


{/* MAIN CONTENT */}
<main className="w-full max-w-7xl mx-auto px-6 py-10 space-y-10">
{/* HERO SECTION */}
<section className="bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-2xl p-8 shadow-lg">
<h1 className="text-3xl font-bold">
Welcome back, {user?.name || "Creator"} 👋
</h1>
<p className="mt-2 text-white/80">
Your performance, sponsorships, and collaborations — all in one place.
</p>
</section>

{/* PERFORMANCE OVERVIEW */}
<section>
<Card className="rounded-2xl border-gray-200 shadow-sm">
<CardHeader>
<CardTitle>Performance Overview</CardTitle>
<CardDescription>Monthly snapshot of your brand’s performance.</CardDescription>
</CardHeader>
<CardContent className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
{[
{ title: "Revenue", icon: DollarSign, value: "$45,200", growth: "+18%" },
{ title: "Active Campaigns", icon: Briefcase, value: "12", growth: "+2" },
{ title: "Collaborations", icon: Users, value: "8", growth: "+3" },
{ title: "Engagement", icon: BarChart3, value: "5.3%", growth: "+1.1%" },
].map((i) => (
<div
key={i.title}
className="p-5 rounded-xl bg-white border border-gray-100 shadow-sm hover:shadow-md transition"
>
<div className="flex items-center justify-between">
<h3 className="text-sm text-gray-600">{i.title}</h3>
<i.icon className="h-5 w-5 text-purple-600" />
</div>
<p className="text-2xl font-bold mt-3">{i.value}</p>
<p className="text-xs text-green-600 mt-1">{i.growth} this month</p>
</div>
))}
</CardContent>
</Card>
</section>

{/* PERFORMANCE CHARTS */}
<section>
<Card className="rounded-2xl border-gray-200 shadow-sm">
<CardHeader>
<CardTitle>Analytics & Trends</CardTitle>
<CardDescription>
Engagement rate, audience growth, and sponsorship conversions.
</CardDescription>
</CardHeader>
<CardContent>
<PerformanceMetrics />
</CardContent>
</Card>
</section>

{/* RECENT ACTIVITY */}
<section>
<Card className="rounded-2xl border-gray-200 shadow-sm">
<CardHeader>
<CardTitle>Recent Activity</CardTitle>
<CardDescription>Your latest sponsorships and collaboration updates.</CardDescription>
</CardHeader>
<CardContent>
<RecentActivity />
</CardContent>
</Card>
</section>

{/* CREATOR COLLABORATIONS */}
<section className="w-full">
<Card className="rounded-2xl border-gray-200 shadow-sm w-full">
<CardHeader>
<CardTitle>Creator Collaborations</CardTitle>
<CardDescription>
Explore creators with aligned audiences and engagement.
</CardDescription>
</CardHeader>
<CardContent className="p-0 overflow-hidden">
<CollaborationsPage />
</CardContent>
</Card>
</section>

{/* AI-MATCHED SPONSORSHIPS */}
<section>
<Card className="rounded-2xl border-gray-200 shadow-sm">
<CardHeader className="flex justify-between items-center">
<div>
<CardTitle>AI-Matched Sponsorships</CardTitle>
<CardDescription>Smart recommendations for you.</CardDescription>
</div>
<Button
size="sm"
variant="outline"
className="border-purple-600 text-purple-600 hover:bg-purple-50"
>
<RefreshCw className="mr-1 h-4 w-4" /> Refresh
</Button>
Comment on lines +166 to +172
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Refresh button has no functionality.

The Refresh button renders but has no onClick handler, making it non-functional. Users clicking it will see no response.

You'll need to:

  1. Add state management for sponsorship data
  2. Implement a refresh function that fetches updated matches
  3. Add loading state during refresh

Would you like me to generate the implementation for the refresh functionality?

🤖 Prompt for AI Agents 
In Frontend/src/pages/DashboardPage.tsx around lines 166-172, the Refresh button
is missing an onClick and related state/logic; add component state for
sponsorship/matches (e.g., matches and isRefreshing), implement an async
refreshMatches function that sets isRefreshing=true, fetches the updated
sponsorship/match data from the existing API/data loader, updates the matches
state, handles errors, and then sets isRefreshing=false, and wire that function
to the Button's onClick; also disable the button and show a loading indicator
while isRefreshing is true so users get feedback during refresh.

</CardHeader>
Comment on lines +161 to +173
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

CardHeader flex layout may not work as intended.

Applying flex layout classes directly to <CardHeader> (line 161) may not achieve the desired layout since CardHeader likely renders its own internal structure. The flex container should wrap the content inside CardHeader.

Apply this diff to fix the layout:

-            <CardHeader className="flex justify-between items-center">
-              <div>
+            <CardHeader>
+              <div className="flex justify-between items-center">
+                <div>
-                <CardTitle>AI-Matched Sponsorships</CardTitle>
-                <CardDescription>Smart recommendations for you.</CardDescription>
-              </div>
-              <Button
-                size="sm"
-                variant="outline"
-                className="border-purple-600 text-purple-600 hover:bg-purple-50"
-              >
-                <RefreshCw className="mr-1 h-4 w-4" /> Refresh
-              </Button>
+                  <CardTitle>AI-Matched Sponsorships</CardTitle>
+                  <CardDescription>Smart recommendations for you.</CardDescription>
+                </div>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="border-purple-600 text-purple-600 hover:bg-purple-50"
+                >
+                  <RefreshCw className="mr-1 h-4 w-4" /> Refresh
+                </Button>
+              </div>
             </CardHeader>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<CardHeader className="flex justify-between items-center">
<div>
<CardTitle>AI-Matched Sponsorships</CardTitle>
<CardDescription>Smart recommendations for you.</CardDescription>
</div>
<Button
size="sm"
variant="outline"
className="border-purple-600 text-purple-600 hover:bg-purple-50"
>
<RefreshCw className="mr-1 h-4 w-4" /> Refresh
</Button>
</CardHeader>
<CardHeader>
<div className="flex justify-between items-center">
<div>
<CardTitle>AI-Matched Sponsorships</CardTitle>
<CardDescription>Smart recommendations for you.</CardDescription>
</div>
<Button
size="sm"
variant="outline"
className="border-purple-600 text-purple-600 hover:bg-purple-50"
>
<RefreshCw className="mr-1 h-4 w-4" /> Refresh
</Button>
</div>
</CardHeader>
🤖 Prompt for AI Agents 
Frontend/src/pages/DashboardPage.tsx around lines 161 to 173: CardHeader
currently receives flex utility classes which may be ignored by the component;
remove className="flex justify-between items-center" from CardHeader and instead
wrap the existing children (the left title/description block and the Button) in
a plain div that has className="flex justify-between items-center" so the layout
is applied to the actual DOM container holding those elements.

<CardContent>
<SponsorshipMatches creatorId={user?.id || ""} />
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Empty string fallback for user ID may cause errors.

Using user?.id || "" passes an empty string when the user is not authenticated. If SponsorshipMatches expects a valid creator ID and makes API calls with it, this could result in errors or unexpected behavior.

Consider these approaches:

Approach 1: Conditional rendering

{user?.id ? (
  <SponsorshipMatches creatorId={user.id} />
) : (
  <p className="text-gray-500 text-center py-4">
    Please log in to view sponsorship matches.
  </p>
)}

Approach 2: Early return in component

if (!user?.id) {
  return <div className="min-h-screen flex items-center justify-center">
    <p>Please log in to view your dashboard.</p>
  </div>
}
🤖 Prompt for AI Agents 
In Frontend/src/pages/DashboardPage.tsx around line 175, passing user?.id || ""
into SponsorshipMatches can pass an empty string when unauthenticated and cause
API errors; change to conditionally render SponsorshipMatches only when user?.id
exists (show a login prompt or placeholder otherwise) or ensure the
page/component returns early when no user id is present so that
SponsorshipMatches only ever receives a valid creatorId.

</CardContent>
</Card>
</section>

{/* INSIGHTS & TRENDS */}
<section>
<Card className="rounded-2xl border-gray-200 shadow-sm">
<CardHeader>
<CardTitle>Insights & Highlights</CardTitle>
<CardDescription>Key trends from your recent activity.</CardDescription>
</CardHeader>
<CardContent className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
{[
{
icon: TrendingUp,
title: "Audience Growth Spike",
desc: "+12% increase due to consistent posting.",
},
{
icon: Sparkles,
title: "Top Performing Post",
desc: "‘AI in Tech’ gained 7k engagements last week.",
},
{
icon: Heart,
title: "Most Engaged Audience",
desc: "18–24 age group contributes 42% engagement.",
},
].map((x) => (
<div
key={x.title}
className="p-5 bg-white rounded-xl border border-gray-100 shadow-sm hover:shadow-md transition"
>
<x.icon className="h-5 w-5 text-purple-600 mb-2" />
<h3 className="font-semibold">{x.title}</h3>
<p className="text-sm text-gray-600 mt-1">{x.desc}</p>
</div>
))}
</CardContent>
</Card>
</section>

{/* FINAL TABS SECTION */}
<section>
<Tabs defaultValue="analytics" className="w-full">
<TabsList className="bg-gray-100 rounded-lg w-fit mb-5 mx-auto">
<TabsTrigger value="analytics">Analytics</TabsTrigger>
<TabsTrigger value="sponsorships">Sponsorships</TabsTrigger>
<TabsTrigger value="collabs">Collaborations</TabsTrigger>
</TabsList>

<TabsContent value="analytics">
<Card className="rounded-2xl shadow-sm text-center py-10 w-full">
<h3 className="text-xl font-semibold">Analytics Overview</h3>
<p className="text-gray-500 mt-2">Comprehensive data coming soon.</p>
</Card>
</TabsContent>

<TabsContent value="sponsorships">
<Card className="rounded-2xl shadow-sm text-center py-10 w-full">
<h3 className="text-xl font-semibold">Sponsorship Insights</h3>
<p className="text-gray-500 mt-2">ROI and conversion tracking coming soon.</p>
</Card>
</TabsContent>

<TabsContent value="collabs">
<Card className="rounded-2xl shadow-sm text-center py-10 w-full">
<h3 className="text-xl font-semibold">Collaboration Analytics</h3>
<p className="text-gray-500 mt-2">Synergy graphs and overlap data soon.</p>
</Card>
</TabsContent>
</Tabs>
</section>
</main>
</div>
)
Comment on lines +33 to +251
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

Add error handling and loading states.

The component lacks error boundaries, loading states, and error handling for several potential failure points:

  1. Authentication failure: If useAuth() throws or returns undefined, the component may crash
  2. Child component errors: Components like PerformanceMetrics, RecentActivity, and SponsorshipMatches may fail to load data
  3. No loading indicators: Users see a blank or partially rendered page during data fetching

Add basic error handling:

export default function DashboardPage() {
  const { user, loading, error } = useAuth()

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <p>Loading dashboard...</p>
      </div>
    )
  }

  if (error || !user) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <p>Unable to load dashboard. Please log in.</p>
      </div>
    )
  }

  return (
    // ... existing JSX
  )
}

Additionally, consider wrapping the entire page in an ErrorBoundary component to gracefully handle runtime errors in child components.

🤖 Prompt for AI Agents 
In Frontend/src/pages/DashboardPage.tsx around lines 33-251, the page currently
assumes useAuth always returns a user and that child components never fail; add
robust loading and error handling: destructure { user, loading, error } from
useAuth, return a centered loading placeholder when loading is true, and return
a centered error/login prompt when error or !user; prevent rendering components
that require a user (e.g. pass creatorId only when user.id exists or skip
SponsorshipMatches until user is available); wrap main content (or at least
PerformanceMetrics, RecentActivity, SponsorshipMatches, CollaborationsPage) in
an ErrorBoundary (or try/catch + fallback UI) and add simple loading/skeleton
placeholders for sections while their data loads.

}