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

fix: unify entry animations and eliminate layout flicker on overview, syllabus tracker, and doubt forum

Browse Source
This commit is contained in:
ectasy663
2026-10-23 17:42:34 +05:30
parent 5c9126ed7a
commit f9e0fb752b
7 changed files with 401 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/app/dashboard/community/page.tsx
View File

@@ -84,39 +84,46 @@ export default function CommunityPage() {
return true
})
if (loading) {
return (
<div className="h-[70vh] flex flex-col items-center justify-center p-8">
<div className="h-8 w-8 border-4 border-[var(--cyan-ai)] border-t-transparent rounded-full animate-spin mb-4"></div>
<p className="text-muted-foreground font-medium animate-pulse">Loading Doubt Forum...</p>
</div>
)
}
if (!hasAccessTo("doubt-resolution-community")) {
if (!hasAccessTo("doubt-resolution-community") && !isDemo) {
return (
<div className="p-8 h-full flex flex-col items-center justify-center text-center max-w-2xl mx-auto">
<div className="size-20 rounded-full bg-red-500/10 flex items-center justify-center mx-auto text-red-500 mb-6">
<Lock size={40} />
<div className="p-8 space-y-8 max-w-7xl mx-auto">
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4 animate-section animate-section-1">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
<span className="p-2.5 rounded-xl bg-yellow-50 dark:bg-[var(--cyan-ai-10)] border border-yellow-300/60 dark:border-[var(--cyan-ai-20)]">
<MessageSquare className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
</span>
Doubt Forum
</h1>
<p className="text-muted-foreground text-base font-medium max-w-2xl pl-1">
Ask questions, share knowledge, and learn together with the community.
</p>
</div>
</div>
<div className="p-12 text-center max-w-2xl mx-auto bg-secondary/20 border border-border rounded-3xl space-y-6 animate-section animate-section-2">
<div className="size-20 rounded-full bg-red-500/10 flex items-center justify-center mx-auto text-red-500">
<Lock size={40} />
</div>
<h2 className="text-2xl font-bold">Premium Feature</h2>
<p className="text-muted-foreground">
The Doubt Forum is a premium feature. Upgrade your plan to ask doubts and interact with tutors and the community.
</p>
<button
className="px-8 py-3 bg-[var(--cyan-ai)] text-black font-bold rounded-xl shadow-[0_0_20px_-5px_var(--cyan-ai)]"
onClick={() => window.location.href = '/upgrade'}
>
Upgrade Plan
</button>
</div>
<h2 className="text-3xl font-bold mb-4">Premium Feature</h2>
<p className="text-muted-foreground text-lg mb-8">
The Doubt Forum is a premium feature. Upgrade your plan to ask doubts and interact with tutors and the community.
</p>
<button
className="px-8 py-3 bg-primary text-primary-foreground font-bold rounded-xl shadow-[0_0_20px_-5px_var(--color-primary)] text-lg"
onClick={() => window.location.href = '/upgrade'}
>
Upgrade Plan
</button>
</div>
)
}
return (
<PremiumGate featureKey="doubt-resolution-community">
<div className="p-8 space-y-6 max-w-7xl mx-auto">
<div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4 animate-section animate-section-1">
<div className="p-8 space-y-8 max-w-7xl mx-auto">
<div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4 animate-section animate-section-1">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
<span className="p-2.5 rounded-xl bg-yellow-50 dark:bg-[var(--cyan-ai-10)] border border-yellow-300/60 dark:border-[var(--cyan-ai-20)]">
@@ -159,7 +166,9 @@ export default function CommunityPage() {
</div>
<div className="space-y-4 animate-section animate-section-3">
{filteredDoubts.map((doubt) => (
{loading ? (
<div className="text-center py-12 text-muted-foreground animate-pulse">Loading doubts...</div>
) : (<>{filteredDoubts.map((doubt) => (
<Card key={doubt.id} className="border-border shadow-sm hover:border-[var(--cyan-ai-10)] transition-colors cursor-pointer">
<CardContent className="p-0 flex">
{/* Upvote Sidebar */}
@@ -259,6 +268,7 @@ export default function CommunityPage() {
</p>
</div>
)}
</>)}
</div>
{/* Ask Doubt Modal */}
{isAskModalOpen && (
@@ -331,7 +341,7 @@ export default function CommunityPage() {
</div>
)}
</div>
</PremiumGate>
)
}

291
src/app/dashboard/page.tsx
View File

@@ -9,11 +9,33 @@ import { Button } from "@/components/ui/button"
import { BrainCircuit, Play, ChevronRight, Activity, Target, CheckCircle2, AlertTriangle, TrendingUp, Calendar, Zap, LayoutDashboard, Share2, Trophy, Lock, ArrowRight, Clock, Download } from "lucide-react"
import { MistakeHeatmap } from "@/components/AI/MistakeHeatmap"
import { AdaptiveStudyPlan } from "@/components/AI/AdaptiveStudyPlan"
import { useActiveUser } from "@/hooks/useActiveUser"
import { useActiveUser, isDemoUser, DEFAULT_USER_ID } from "@/hooks/useActiveUser"
export default function DashboardPage() {
const { user, userId, loading: userLoading, hasAccessTo, trialInfo } = useActiveUser()
const [userStats, setUserStats] = useState<any>(null)
const [userStats, setUserStats] = useState<any>(() => {
const currentId = (typeof window !== "undefined" ? localStorage.getItem("activeUserId") : null) || DEFAULT_USER_ID;
if (isDemoUser(currentId)) {
return {
today_score: 42,
today_max_score: 60,
overall_accuracy: 82.0,
total_questions_attempted: 1245,
city_rank: 42,
city_total: 1200,
is_new_user: false,
};
}
return {
today_score: 0,
today_max_score: 0,
overall_accuracy: 0,
total_questions_attempted: 0,
city_rank: null,
city_total: null,
is_new_user: true,
};
})
const [loading, setLoading] = useState(true)
const [dpps, setDpps] = useState<any[]>([])
const [cbts, setCbts] = useState<any[]>([])
@@ -22,8 +44,7 @@ export default function DashboardPage() {
const progressRef = useRef<HTMLDivElement>(null)
useEffect(() => {
if (userLoading) return
const currentUserId = user?.id || userId
const currentUserId = user?.id || userId || (typeof window !== "undefined" ? localStorage.getItem("activeUserId") : null) || DEFAULT_USER_ID;
if (!currentUserId) {
setLoading(false)
return
@@ -48,7 +69,7 @@ export default function DashboardPage() {
}
}
fetchStatsAndTests()
}, [userLoading, user?.id, userId])
}, [user?.id, userId, user?.target_exam])
const getShareUrl = () => {
const score = isNew ? "0 / 0" : `${userStats?.today_score || 0} / ${userStats?.today_max_score || 60}`
@@ -108,132 +129,127 @@ export default function DashboardPage() {
setShareMenuOpen(false)
}
if (loading) {
return (
<div className="h-[70vh] flex flex-col items-center justify-center p-8">
<div className="h-8 w-8 border-4 border-[var(--cyan-ai)] border-t-transparent rounded-full animate-spin mb-4"></div>
<p className="text-muted-foreground font-medium animate-pulse">Loading dashboard...</p>
</div>
)
}
const isNew = userStats ? userStats.is_new_user : true
const isNeet = user?.target_exam === "NEET"
return (
<div className="p-8 max-w-7xl mx-auto space-y-10">
<div className="p-8 max-w-7xl mx-auto space-y-8">
{/* Basic Performance Dashboard (F-05) */}
<section className="animate-section animate-section-1">
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-8">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
<span className="p-2.5 rounded-xl bg-yellow-50 dark:bg-[var(--cyan-ai-10)] border border-yellow-300/60 dark:border-[var(--cyan-ai-20)]">
<LayoutDashboard className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
</span>
Performance Overview
</h1>
<p className="text-muted-foreground text-base font-medium max-w-2xl pl-1">
Your overall progress, scores, and active study plan at a glance.
{/* Page Header */}
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4 animate-section animate-section-1">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
<span className="p-2.5 rounded-xl bg-yellow-50 dark:bg-[var(--cyan-ai-10)] border border-yellow-300/60 dark:border-[var(--cyan-ai-20)]">
<LayoutDashboard className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
</span>
Performance Overview
</h1>
<p className="text-muted-foreground text-base font-medium max-w-2xl pl-1">
Your overall progress, scores, and active study plan at a glance.
</p>
</div>
<div className="relative">
<Button onClick={() => setShareMenuOpen(!shareMenuOpen)} variant="outline" size="sm" className="gap-2 font-medium shrink-0" disabled={downloading}>
{downloading ? <div className="h-4 w-4 border-2 border-current border-t-transparent rounded-full animate-spin"></div> : <Share2 size={16} />}
{downloading ? 'Generating...' : 'Share Card'}
</Button>
{shareMenuOpen && (
<div className="absolute right-0 top-full mt-2 w-48 bg-white dark:bg-zinc-950 border border-border rounded-xl shadow-xl z-50 overflow-hidden">
<button onClick={handleShareFacebook} className="flex items-center w-full px-4 py-3 text-sm hover:bg-secondary text-left transition-colors">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-3 text-blue-600"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
Share on Facebook
</button>
<button onClick={handleShareWhatsApp} className="flex items-center w-full px-4 py-3 text-sm hover:bg-secondary text-left transition-colors">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-3 text-green-500"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
Share on WhatsApp
</button>
<button onClick={handleDownload} className="flex items-center w-full px-4 py-3 text-sm hover:bg-secondary text-left transition-colors border-t border-border">
<Download size={16} className="mr-3 text-primary" />
Download Image
</button>
</div>
)}
</div>
</div>
{/* KPI Stat Cards */}
<div ref={progressRef} className="grid grid-cols-2 md:grid-cols-4 gap-4 animate-section animate-section-2">
{/* Today's Score */}
<Card className="border-border shadow-sm">
<CardContent className="p-5 flex flex-col items-center text-center">
<div className="p-3 bg-secondary rounded-full mb-3 text-primary"><Target size={24} /></div>
<p className="text-sm font-bold text-muted-foreground uppercase tracking-wider mb-1">Today's Score</p>
<h3 className="text-2xl font-bold">
{isNew ? "0 / 0" : `${userStats.today_score} / ${userStats.today_max_score || 60}`}
</h3>
<p className="text-xs text-muted-foreground font-medium mt-2">
{isNew ? "No tests taken today" : userStats.today_score > 0 ? "Daily session score" : "Start today's DPP"}
</p>
</div>
<div className="relative">
<Button onClick={() => setShareMenuOpen(!shareMenuOpen)} variant="outline" size="sm" className="gap-2 font-medium shrink-0" disabled={downloading}>
{downloading ? <div className="h-4 w-4 border-2 border-current border-t-transparent rounded-full animate-spin"></div> : <Share2 size={16} />}
{downloading ? 'Generating...' : 'Share Card'}
</Button>
{shareMenuOpen && (
<div className="absolute right-0 top-full mt-2 w-48 bg-white dark:bg-zinc-950 border border-border rounded-xl shadow-xl z-50 overflow-hidden">
<button onClick={handleShareFacebook} className="flex items-center w-full px-4 py-3 text-sm hover:bg-secondary text-left transition-colors">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-3 text-blue-600"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
Share on Facebook
</button>
<button onClick={handleShareWhatsApp} className="flex items-center w-full px-4 py-3 text-sm hover:bg-secondary text-left transition-colors">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-3 text-green-500"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
Share on WhatsApp
</button>
<button onClick={handleDownload} className="flex items-center w-full px-4 py-3 text-sm hover:bg-secondary text-left transition-colors border-t border-border">
<Download size={16} className="mr-3 text-primary" />
Download Image
</button>
</div>
)}
</div>
</div>
<div ref={progressRef} className="grid grid-cols-2 md:grid-cols-4 gap-4 p-4 -mx-4 bg-background rounded-2xl">
{/* Today's Score */}
<Card>
<CardContent className="p-5 flex flex-col items-center text-center">
<div className="p-3 bg-secondary rounded-full mb-3 text-primary"><Target size={24} /></div>
<p className="text-sm font-bold text-muted-foreground uppercase tracking-wider mb-1">Today's Score</p>
<h3 className="text-2xl font-bold">
{isNew ? "0 / 0" : `${userStats.today_score} / ${userStats.today_max_score || 60}`}
</h3>
<p className="text-xs text-muted-foreground font-medium mt-2">
{isNew ? "No tests taken today" : userStats.today_score > 0 ? "Daily session score" : "Start today's DPP"}
</p>
</CardContent>
</Card>
</CardContent>
</Card>
{/* Overall Accuracy */}
<Card>
<CardContent className="p-5 flex flex-col items-center text-center">
<div className="p-3 bg-secondary rounded-full mb-3 text-amber-500"><Activity size={24} /></div>
<p className="text-sm font-bold text-muted-foreground uppercase tracking-wider mb-1">Overall Accuracy</p>
<h3 className="text-2xl font-bold">
{isNew ? "0%" : `${userStats.overall_accuracy}%`}
</h3>
<p className={`text-xs font-bold mt-2 ${isNew ? 'text-muted-foreground font-normal' : userStats.overall_accuracy >= 70 ? 'text-green-500' : 'text-amber-500'}`}>
{isNew ? "Start a DPP to calculate" : userStats.overall_accuracy >= 70 ? "On Track" : "Needs Improvement"}
</p>
</CardContent>
</Card>
{/* Overall Accuracy */}
<Card className="border-border shadow-sm">
<CardContent className="p-5 flex flex-col items-center text-center">
<div className="p-3 bg-secondary rounded-full mb-3 text-amber-500"><Activity size={24} /></div>
<p className="text-sm font-bold text-muted-foreground uppercase tracking-wider mb-1">Overall Accuracy</p>
<h3 className="text-2xl font-bold">
{isNew ? "0%" : `${userStats.overall_accuracy}%`}
</h3>
<p className={`text-xs font-bold mt-2 ${isNew ? 'text-muted-foreground font-normal' : userStats.overall_accuracy >= 70 ? 'text-green-500' : 'text-amber-500'}`}>
{isNew ? "Start a DPP to calculate" : userStats.overall_accuracy >= 70 ? "On Track" : "Needs Improvement"}
</p>
</CardContent>
</Card>
{/* Qs Attempted */}
<Card>
<CardContent className="p-5 flex flex-col items-center text-center">
<div className="p-3 bg-secondary rounded-full mb-3 text-[var(--cyan-ai)]"><CheckCircle2 size={24} /></div>
<p className="text-sm font-bold text-muted-foreground uppercase tracking-wider mb-1">Qs Attempted</p>
<h3 className="text-2xl font-bold">
{isNew ? "0" : (userStats.total_questions_attempted || 0).toLocaleString()}
</h3>
<p className="text-xs text-muted-foreground font-medium mt-2">
{isNew ? "0 questions answered" : "Lifetime total"}
</p>
</CardContent>
</Card>
{/* Qs Attempted */}
<Card className="border-border shadow-sm">
<CardContent className="p-5 flex flex-col items-center text-center">
<div className="p-3 bg-secondary rounded-full mb-3 text-[var(--cyan-ai)]"><CheckCircle2 size={24} /></div>
<p className="text-sm font-bold text-muted-foreground uppercase tracking-wider mb-1">Qs Attempted</p>
<h3 className="text-2xl font-bold">
{isNew ? "0" : (userStats.total_questions_attempted || 0).toLocaleString()}
</h3>
<p className="text-xs text-muted-foreground font-medium mt-2">
{isNew ? "0 questions answered" : "Lifetime total"}
</p>
</CardContent>
</Card>
{/* City Rank */}
<Card className="relative overflow-hidden group">
<div className="absolute inset-0 bg-gradient-to-br from-background to-secondary/50 z-0"></div>
<CardContent className="p-5 flex flex-col items-center text-center relative z-10">
<div className="p-3 bg-background border border-border shadow-sm rounded-full mb-3 text-foreground group-hover:scale-110 transition-transform"><Trophy size={24} /></div>
<div className="flex items-center gap-2 mb-1">
<p className="text-sm font-bold text-muted-foreground uppercase tracking-wider">City Rank</p>
</div>
<h3 className="text-2xl font-bold">
{isNew ? (
<span className="text-muted-foreground text-xl">#--</span>
) : (
<>#{userStats.city_rank || 1} <span className="text-base text-muted-foreground font-medium">/ {userStats.city_total || 50}</span></>
)}
</h3>
<p className="text-xs text-muted-foreground font-medium mt-2 text-[var(--cyan-ai)]">
{isNew ? "Unranked · Take a test" : `Top rank in ${user?.city || "your city"}`}
</p>
</CardContent>
</Card>
</div>
</section>
{/* City Rank */}
<Card className="border-border shadow-sm relative overflow-hidden group">
<div className="absolute inset-0 bg-gradient-to-br from-background to-secondary/50 z-0"></div>
<CardContent className="p-5 flex flex-col items-center text-center relative z-10">
<div className="p-3 bg-background border border-border shadow-sm rounded-full mb-3 text-foreground group-hover:scale-110 transition-transform"><Trophy size={24} /></div>
<div className="flex items-center gap-2 mb-1">
<p className="text-sm font-bold text-muted-foreground uppercase tracking-wider">City Rank</p>
</div>
<h3 className="text-2xl font-bold">
{isNew ? (
<span className="text-muted-foreground text-xl">#--</span>
) : (
<>#{userStats.city_rank || 1} <span className="text-base text-muted-foreground font-medium">/ {userStats.city_total || 50}</span></>
)}
</h3>
<p className="text-xs text-muted-foreground font-medium mt-2 text-[var(--cyan-ai)]">
{isNew ? "Unranked · Take a test" : `Top rank in ${user?.city || "your city"}`}
</p>
</CardContent>
</Card>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
{/* Tests & DPPs Grid */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 animate-section animate-section-3">
{/* Dynamic DPP Modules */}
<section className="animate-section animate-section-2">
<section>
<div className="flex items-center justify-between mb-5">
<h2 className="text-xl font-semibold tracking-tight flex items-center gap-2">
Today's DPPs
</h2>
<Button variant="ghost" size="sm" className="text-muted-foreground font-medium">View All</Button>
<Link href="/dashboard/dpp">
<Button variant="ghost" size="sm" className="text-muted-foreground font-medium">View All</Button>
</Link>
</div>
<div className="space-y-4">
{dpps.length > 0 ? (
@@ -257,18 +273,40 @@ export default function DashboardPage() {
</CardContent>
</Card>
))
) : loading ? (
<div className="space-y-4">
{[1, 2].map((i) => (
<Card key={i} className="animate-pulse">
<CardContent className="p-5 flex items-center justify-between">
<div className="flex gap-4 items-center">
<div className="size-11 bg-secondary rounded-xl"></div>
<div className="space-y-2">
<div className="h-4 w-40 bg-secondary rounded"></div>
<div className="h-3 w-28 bg-secondary/60 rounded"></div>
</div>
</div>
<div className="h-8 w-16 bg-secondary rounded-xl"></div>
</CardContent>
</Card>
))}
</div>
) : (
<p className="text-muted-foreground text-sm py-4">No DPPs scheduled for today.</p>
<Card className="overflow-hidden p-6 border-dashed opacity-70">
<p className="text-muted-foreground text-sm">No DPPs scheduled for today.</p>
</Card>
)}
</div>
</section>
{/* Upcoming CBTs */}
<section className="animate-section animate-section-3">
<section>
<div className="flex items-center justify-between mb-5">
<h2 className="text-xl font-semibold tracking-tight flex items-center gap-2">
Upcoming CBTs
</h2>
<Link href="/dashboard/cbt">
<Button variant="ghost" size="sm" className="text-muted-foreground font-medium">View All</Button>
</Link>
</div>
<div className="space-y-4">
{cbts.length > 0 ? (
@@ -291,6 +329,14 @@ export default function DashboardPage() {
</div>
</Card>
))
) : loading ? (
<div className="space-y-4">
<Card className="animate-pulse p-6 space-y-3">
<div className="h-4 w-24 bg-secondary rounded"></div>
<div className="h-5 w-48 bg-secondary rounded"></div>
<div className="h-3 w-32 bg-secondary/60 rounded"></div>
</Card>
</div>
) : (
<Card className="overflow-hidden p-6 border-dashed opacity-70">
<p className="text-muted-foreground text-sm">No upcoming CBTs at the moment.</p>
@@ -300,13 +346,14 @@ export default function DashboardPage() {
</section>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
<section className="animate-section animate-section-4">
{/* AI Intelligence Grid */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 animate-section animate-section-4">
<div>
<AdaptiveStudyPlan />
</section>
<section className="animate-section animate-section-5">
</div>
<div>
<MistakeHeatmap />
</section>
</div>
</div>
</div>

87
src/app/dashboard/progress/page.tsx
View File

@@ -2,7 +2,7 @@
import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { ChevronDown, ChevronRight, CheckCircle2, Circle, Clock, Activity, BarChart3 } from "lucide-react"
import { ChevronDown, ChevronRight, CheckCircle2, Circle, Clock, Activity, BarChart3, Lock } from "lucide-react"
import { useActiveUser, isDemoUser } from "@/hooks/useActiveUser"
import { PremiumGate } from "@/components/PremiumGate"
@@ -134,17 +134,8 @@ const ZERO_SUBJECTS: Subject[] = [
// Math/Bio dynamic subjects handled below
]
export default function ProgressTrackerPage() {
const { userId, user } = useActiveUser()
const isDemo = isDemoUser(userId)
const [subjects, setSubjects] = useState<Subject[]>([])
useEffect(() => {
const targetExam = user?.target_exam || "JEE_Main";
const isNeet = targetExam === "NEET";
const isJeeNeet = targetExam === "JEE_NEET";
const mathDemoSubject: Subject = {
const mathDemoSubject: Subject = {
name: "Mathematics",
completionPct: 28,
chapters: [
@@ -238,21 +229,67 @@ export default function ProgressTrackerPage() {
]
};
const base = isDemo ? [...DEMO_SUBJECTS] : [...ZERO_SUBJECTS];
function getInitialSubjects(isDemoUser: boolean, targetExam: string): Subject[] {
const isNeet = targetExam === "NEET";
const isJeeNeet = targetExam === "JEE_NEET";
const base = isDemoUser ? [...DEMO_SUBJECTS] : [...ZERO_SUBJECTS];
if (isJeeNeet) {
base.push(isDemoUser ? mathDemoSubject : mathZeroSubject);
base.push(isDemoUser ? bioDemoSubject : bioZeroSubject);
} else if (isNeet) {
base.push(isDemoUser ? bioDemoSubject : bioZeroSubject);
} else {
base.push(isDemoUser ? mathDemoSubject : mathZeroSubject);
}
return base;
}
export default function ProgressTrackerPage() {
const { userId, user, hasAccessTo } = useActiveUser();
const isDemo = isDemoUser(userId);
const [subjects, setSubjects] = useState<Subject[]>(() =>
getInitialSubjects(isDemoUser(userId), user?.target_exam || "JEE_Main")
);
if (isJeeNeet) {
// 4 Subjects for JEE + NEET: Physics, Chemistry, Mathematics, Biology
base.push(isDemo ? mathDemoSubject : mathZeroSubject);
base.push(isDemo ? bioDemoSubject : bioZeroSubject);
} else if (isNeet) {
base.push(isDemo ? bioDemoSubject : bioZeroSubject);
} else {
base.push(isDemo ? mathDemoSubject : mathZeroSubject);
}
setSubjects(base);
useEffect(() => {
setSubjects(getInitialSubjects(isDemo, user?.target_exam || "JEE_Main"));
}, [isDemo, user?.target_exam]);
if (!hasAccessTo("chapter-wise-progress-tracking") && !isDemo) {
return (
<div className="p-8 space-y-8 max-w-7xl mx-auto">
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4 animate-section animate-section-1">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
<span className="p-2.5 rounded-xl bg-yellow-50 dark:bg-[var(--cyan-ai-10)] border border-yellow-300/60 dark:border-[var(--cyan-ai-20)]">
<BarChart3 className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
</span>
Syllabus Tracker
</h1>
<p className="text-muted-foreground text-base font-medium max-w-2xl pl-1">
Track your syllabus coverage and mastery per chapter to ensure no gaps.
</p>
</div>
</div>
<div className="p-12 text-center max-w-2xl mx-auto bg-secondary/20 border border-border rounded-3xl space-y-6 animate-section animate-section-2">
<div className="size-20 rounded-full bg-red-500/10 flex items-center justify-center mx-auto text-red-500">
<Lock size={40} />
</div>
<h2 className="text-2xl font-bold">Premium Feature</h2>
<p className="text-muted-foreground">
Chapter-wise syllabus tracking is available on Pro and AI Coach plans.
</p>
<button
className="px-8 py-3 bg-[var(--cyan-ai)] text-black font-bold rounded-xl shadow-[0_0_20px_-5px_var(--cyan-ai)]"
onClick={() => window.location.href = '/upgrade'}
>
Upgrade Plan
</button>
</div>
</div>
);
}
const toggleChapter = (subjectIndex: number, chapterIndex: number) => {
const newSubjects = [...subjects]
newSubjects[subjectIndex].chapters[chapterIndex].isExpanded = !newSubjects[subjectIndex].chapters[chapterIndex].isExpanded
@@ -260,7 +297,7 @@ export default function ProgressTrackerPage() {
}
return (
<PremiumGate featureKey="chapter-wise-progress-tracking">
<div className="p-8 space-y-8 max-w-7xl mx-auto">
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4 animate-section animate-section-1">
<div>
@@ -351,6 +388,6 @@ export default function ProgressTrackerPage() {
))}
</div>
</div>
</PremiumGate>
)
}

10
src/components/AI/AdaptiveStudyPlan.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
@@ -32,14 +32,10 @@ const NEW_USER_PLAN: PlanItem[] = [
export function AdaptiveStudyPlan() {
const { user } = useActiveUser();
const isDemo = isDemoUser(user?.id);
const [items, setItems] = useState<PlanItem[]>(DEMO_PLAN);
const [items, setItems] = useState<PlanItem[]>(() => isDemo ? DEMO_PLAN : NEW_USER_PLAN);
useEffect(() => {
if (isDemo) {
setItems(DEMO_PLAN);
} else {
setItems(NEW_USER_PLAN);
}
setItems(isDemo ? DEMO_PLAN : NEW_USER_PLAN);
}, [isDemo]);
const updateStatus = (id: string, newStatus: PlanState) => {

4
src/components/AI/MistakeHeatmap.tsx
View File

@@ -20,8 +20,8 @@ const ZERO_HEATMAP_DATA = [
];
export function MistakeHeatmap() {
const { userId } = useActiveUser();
const isDemo = isDemoUser(userId);
const { userId, user } = useActiveUser();
const isDemo = isDemoUser(user?.id || userId);
const getColor = (errorRate: number) => {
if (errorRate === 0) return 'bg-green-600/50 border-green-600/80 text-green-100';

10
src/components/PremiumGate.tsx
View File

@@ -13,14 +13,10 @@ interface PremiumGateProps {
export function PremiumGate({ featureKey, children }: PremiumGateProps) {
const { hasAccessTo, loading, user } = useActiveUser();
// Allow children to render immediately without a blocking center spinner
// so that page entry animations (animate-section) execute smoothly on route transition.
if (loading || !user) {
return (
<div className="flex-1 min-h-[400px] flex items-center justify-center">
<div className="flex flex-col items-center gap-4">
<div className="w-10 h-10 border-4 border-[var(--cyan-ai-20)] border-t-[var(--cyan-ai)] rounded-full animate-spin"></div>
</div>
</div>
);
return <>{children}</>;
}
if (!hasAccessTo(featureKey)) {

132
src/hooks/useActiveUser.ts
View File

@@ -147,6 +147,88 @@ async function fetchSettings(): Promise<any> {
return cachedSettings ?? null;
}
let cachedUserProfile: UserProfile | null = null;
export function getKnownDemoProfile(id: string): UserProfile | null {
if (id === DEMO_USERS.AICOACH_JEE.id) {
return {
id: DEMO_USERS.AICOACH_JEE.id,
name: "Aarav",
email: "aarav.jee@pragativeer.com",
phone: "9999999991",
class: "12th",
target_exam: "JEE_Main",
medium: "English",
school: "Delhi Public School",
city: "New Delhi",
state: "Delhi",
tier: "AI Coach",
streak_count: 14,
longest_streak: 21,
created_at: new Date(Date.now() - 30 * 86400000).toISOString(),
trial_end: new Date(Date.now() + 60 * 86400000).toISOString(),
};
}
if (id === DEMO_USERS.AICOACH_NEET.id) {
return {
id: DEMO_USERS.AICOACH_NEET.id,
name: "Neha Verma",
email: "neha.neet@pragativeer.com",
phone: "9999999992",
class: "12th",
target_exam: "NEET",
medium: "English",
school: "Kendriya Vidyalaya",
city: "Kota",
state: "Rajasthan",
tier: "AI Coach",
streak_count: 18,
longest_streak: 25,
created_at: new Date(Date.now() - 30 * 86400000).toISOString(),
trial_end: new Date(Date.now() + 60 * 86400000).toISOString(),
};
}
if (id === DEMO_USERS.AICOACH_JEE_NEET.id) {
return {
id: DEMO_USERS.AICOACH_JEE_NEET.id,
name: "Rahul Verma",
email: "rahul.jeeneet@pragativeer.com",
phone: "9999999993",
class: "12th",
target_exam: "JEE_NEET",
medium: "English",
school: "Modern School",
city: "Mumbai",
state: "Maharashtra",
tier: "AI Coach",
streak_count: 12,
longest_streak: 15,
created_at: new Date(Date.now() - 30 * 86400000).toISOString(),
trial_end: new Date(Date.now() + 60 * 86400000).toISOString(),
};
}
if (id === DEMO_USERS.FREE_JEE.id) {
return {
id: DEMO_USERS.FREE_JEE.id,
name: "New Student",
email: "new.student@pragativeer.com",
phone: "9999999994",
class: "11th",
target_exam: "JEE_Main",
medium: "English",
school: "Army Public School",
city: "Jaipur",
state: "Rajasthan",
tier: "Free",
streak_count: 0,
longest_streak: 0,
created_at: new Date().toISOString(),
trial_end: undefined,
};
}
return null;
}
export function useActiveUser() {
const [userId, setUserIdState] = useState<string>(() => {
if (typeof window !== "undefined") {
@@ -155,9 +237,32 @@ export function useActiveUser() {
return DEFAULT_USER_ID;
});
const [user, setUser] = useState<UserProfile | null>(null);
const [globalSettings, setGlobalSettings] = useState<any>(null);
const [loading, setLoading] = useState(true);
const [user, setUser] = useState<UserProfile | null>(() => {
const currentId = (typeof window !== "undefined" ? localStorage.getItem("activeUserId") : null) || DEFAULT_USER_ID;
if (cachedUserProfile && cachedUserProfile.id === currentId) {
return cachedUserProfile;
}
const demo = getKnownDemoProfile(currentId);
if (demo) {
cachedUserProfile = demo;
return demo;
}
if (typeof window !== "undefined") {
try {
const stored = localStorage.getItem("pragativeer_cached_user");
if (stored) {
const parsed = JSON.parse(stored);
if (parsed && parsed.id === currentId) {
cachedUserProfile = parsed;
return parsed;
}
}
} catch {}
}
return null;
});
const [globalSettings, setGlobalSettings] = useState<any>(() => cachedSettings);
const [loading, setLoading] = useState(() => !cachedUserProfile);
const [switching, setSwitching] = useState(false);
const [error, setError] = useState<string | null>(null);
// Use a ref for fail count so it doesn't cause re-renders
@@ -205,14 +310,17 @@ export function useActiveUser() {
}
}
cachedUserProfile = data;
if (typeof window !== "undefined") {
try { localStorage.setItem("pragativeer_cached_user", JSON.stringify(data)); } catch {}
}
setUser(data);
} catch (err: any) {
failCountRef.current += 1;
if (!isPoll) {
console.warn("Backend unreachable, using local demo profile for offline testing:", err.message);
}
// If backend is unreachable (e.g. running only npm run dev), provide demo user so testing works
setUser((prev) => prev || {
const fallback = getKnownDemoProfile(id) || {
id: id || DEFAULT_USER_ID,
name: "Aarav",
email: "demo@pragativeer.com",
@@ -228,7 +336,9 @@ export function useActiveUser() {
longest_streak: 21,
created_at: new Date(Date.now() - 5 * 86400000).toISOString(),
trial_end: new Date(Date.now() + 10 * 86400000).toISOString(),
});
};
if (!cachedUserProfile) cachedUserProfile = fallback;
setUser((prev) => prev || fallback);
// Silently swallow polling errors so the UI doesn't crash
} finally {
if (!isPoll) setLoading(false);
@@ -290,11 +400,13 @@ export function useActiveUser() {
// Update refs and state before awaiting network
activeUserIdRef.current = actualUserId;
setUserIdState(actualUserId);
setUser(null); // Clear old user immediately so stale data isn't shown
const demo = getKnownDemoProfile(actualUserId);
cachedUserProfile = demo;
setUser(demo);
// Notify listeners immediately of account switch
if (typeof window !== "undefined") {
window.dispatchEvent(new CustomEvent("pragativeer-user-switched", { detail: { userId: actualUserId } }));
window.dispatchEvent(new CustomEvent("pragativeer-user-switched", { detail: { userId: actualUserId, user: demo } }));
}
// Fetch the new user's profile immediately using the new token
@@ -302,6 +414,10 @@ export function useActiveUser() {
if (newUserRes && newUserRes.ok) {
const data = await newUserRes.json();
cachedUserProfile = data;
if (typeof window !== "undefined") {
try { localStorage.setItem("pragativeer_cached_user", JSON.stringify(data)); } catch {}
}
setUser(data);
if (typeof window !== "undefined") {
window.dispatchEvent(new CustomEvent("pragativeer-user-switched", { detail: { userId: actualUserId, user: data } }));