naman_panwar_gnpl/pragativeer-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI/UX Polishing: CBT dashboard, sidebar tiers, landing pricing, and exam disclaimer

Browse Source
This commit is contained in:
ectasy663
2026-07-09 17:05:40 +05:30
parent b80d73ec26
commit 22b167b985
15 changed files with 481 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/app/dashboard/layout.tsx
View File

@@ -35,6 +35,17 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
const userInitials = user ? user.name.split(" ").filter(n => /^[a-zA-Z]/.test(n)).slice(0, 2).map(n => n[0]).join("").toUpperCase() : "DS"
const targetExamLabel = user?.target_exam === "JEE_Main" ? "JEE Main" : user?.target_exam === "JEE_Advanced" ? "JEE Advanced" : user?.target_exam === "NEET" ? "NEET" : "NEET/JEE"
let daysLeft = null;
if (user && user.created_at) {
const createdDate = new Date(user.created_at);
const msPerDay = 1000 * 60 * 60 * 24;
const daysElapsed = Math.floor((new Date().getTime() - createdDate.getTime()) / msPerDay);
daysLeft = Math.max(0, 15 - daysElapsed);
} else if (user && user.tier === 'Free') {
// Mock value for demo Free tier if no date
daysLeft = 14;
}
return (
<div className="flex h-screen bg-background overflow-hidden text-foreground selection:bg-primary/20">
{/* Sidebar */}
@@ -43,7 +54,22 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
<Logo href="/dashboard" className="w-full" imageClassName="object-contain object-left scale-110 origin-left" height={56} />
</div>
<nav className="flex-1 px-4 space-y-1.5 mt-4 overflow-y-auto">
<div className="pt-2 pb-2">
<p className="px-3 text-xs font-bold uppercase tracking-widest text-muted-foreground flex items-center gap-2">
<span className="w-1.5 h-1.5 rounded-full bg-white"></span> Free Tier
</p>
</div>
<NavItem href="/dashboard" icon={<LayoutDashboard size={18} />} label="Overview" active={pathname === "/dashboard"} />
<NavItem href="/dashboard/dpp" icon={<FileText size={18} />} label="Daily Practice" active={pathname.startsWith("/dashboard/dpp")} />
<NavItem href="/dashboard/materials" icon={<BookOpen size={18} />} label="Study Materials" active={pathname.startsWith("/dashboard/materials")} />
<NavItem href="/dashboard/progress" icon={<Activity size={18} />} label="Syllabus Tracker" active={pathname.startsWith("/dashboard/progress")} />
<NavItem href="/dashboard/leaderboard" icon={<Trophy size={18} />} label="Leaderboard" active={pathname.startsWith("/dashboard/leaderboard")} />
<div className="pt-4 pb-2">
<p className="px-3 text-xs font-bold uppercase tracking-widest text-muted-foreground flex items-center gap-2">
<span className="w-1.5 h-1.5 rounded-full bg-yellow-500 shadow-[0_0_8px_-2px_var(--color-yellow-500)]"></span> Pro Tier
</p>
</div>
<NavItem
href="/dashboard/cbt"
icon={<Activity size={18} />}
@@ -51,25 +77,6 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
active={pathname.startsWith("/dashboard/cbt")}
isLocked={!hasAccessTo("weekly-test-series")}
/>
<NavItem href="/dashboard/dpp" icon={<FileText size={18} />} label="Daily Practice" active={pathname.startsWith("/dashboard/dpp")} />
<NavItem href="/dashboard/materials" icon={<BookOpen size={18} />} label="Study Materials" active={pathname.startsWith("/dashboard/materials")} />
<div className="pt-4 pb-2">
<p className="px-3 text-xs font-bold uppercase tracking-widest text-muted-foreground">Community & Tracking</p>
</div>
<NavItem href="/dashboard/leaderboard" icon={<Trophy size={18} />} label="Leaderboard" active={pathname.startsWith("/dashboard/leaderboard")} />
<NavItem href="/dashboard/progress" icon={<Activity size={18} />} label="Syllabus Tracker" active={pathname.startsWith("/dashboard/progress")} />
<NavItem
href="/dashboard/community"
icon={<BookOpen size={18} />}
label="Doubt Forum"
active={pathname.startsWith("/dashboard/community")}
isLocked={!hasAccessTo("ask-doubts-from-tutors")}
/>
<div className="pt-4 pb-2">
<p className="px-3 text-xs font-bold uppercase tracking-widest text-muted-foreground">AI Intelligence</p>
</div>
<NavItem
href="/dashboard/analytics"
icon={<LineChart size={18} />}
@@ -84,6 +91,19 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
active={pathname.startsWith("/dashboard/rank-predictor")}
isLocked={!hasAccessTo("college-predictor")}
/>
<NavItem
href="/dashboard/community"
icon={<BookOpen size={18} />}
label="Doubt Forum"
active={pathname.startsWith("/dashboard/community")}
isLocked={!hasAccessTo("ask-doubts-from-tutors")}
/>
<div className="pt-4 pb-2">
<p className="px-3 text-xs font-bold uppercase tracking-widest text-muted-foreground flex items-center gap-2">
<span className="w-1.5 h-1.5 rounded-full bg-[#00F0FF] shadow-[0_0_8px_-2px_#00F0FF]"></span> AI Coach
</p>
</div>
<NavItem
href="/dashboard/ai-coach"
icon={<BrainCircuitIcon />}
@@ -160,6 +180,11 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
{targetExamLabel} Target
</Badge>
)}
{daysLeft !== null && user?.tier !== 'Al_Coach' && user?.tier !== 'Pro' && (
<Badge variant="outline" className="bg-yellow-500/10 text-yellow-500 border-yellow-500/20 font-bold px-2.5 py-0.5">
{daysLeft} Days Left in AI Coach Trial
</Badge>
)}
</div>
<div className="flex items-center gap-4">
@@ -185,7 +210,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
</div>
<div className="flex items-center gap-2 border-l border-border pl-4">
<LanguageToggle />
{/* <LanguageToggle /> */}
<ThemeToggle />
</div>
</div>