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

UI, layout, and target exam logic updates

Browse Source
This commit is contained in:
ectasy663
2026-09-22 17:26:22 +05:30
parent a21518ab6c
commit e6f1fc9c1f
6 changed files with 75 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/dashboard/cbt/page.tsx
View File

@@ -1,11 +1,11 @@
"use client"; "use client";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Link from "next/link"; import Link from "next/link";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card"; import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Activity, Clock, PlayCircle, Search, Lock, MonitorPlay } from "lucide-react"; import { Activity, Clock, PlayCircle, Search, Lock, CheckSquare } from "lucide-react";
import { useActiveUser } from "@/hooks/useActiveUser"; import { useActiveUser } from "@/hooks/useActiveUser";
interface TestData { interface TestData {
@@ -41,7 +41,7 @@ export default function CBTPage() {
if (!userRes.ok) throw new Error("Failed to load user target exam"); if (!userRes.ok) throw new Error("Failed to load user target exam");
const userData = await userRes.json(); const userData = await userRes.json();
const pattern = userData.target_exam; const pattern = userData.target_exam;
setTargetExam(pattern === "NEET" ? "NEET" : pattern === "JEE_Advanced" ? "JEE Advanced" : "JEE Main"); setTargetExam(pattern === "NEET" ? "NEET" : pattern === "JEE_Advanced" ? "JEE Advanced" : "JEE");
// Only set the initial pattern if it hasn't been changed by the user // Only set the initial pattern if it hasn't been changed by the user
if (!selectedPattern) { if (!selectedPattern) {
@@ -130,13 +130,12 @@ export default function CBTPage() {
<div> <div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1"> <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)]"> <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)]">
<MonitorPlay className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} /> <CheckSquare className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
</span> </span>
Computer Based Tests (CBT) Computer Based Tests (CBT)
</h1> </h1>
{/* BUG-09 fix: Dynamic subtitle reflecting current exam pattern tab (NEET vs JEE) */}
<p className="text-muted-foreground text-base font-medium max-w-2xl pl-1"> <p className="text-muted-foreground text-base font-medium max-w-2xl pl-1">
Real exam environment simulations to conquer {selectedPattern === "NEET" ? "NEET" : (targetExam || "JEE Main & Advanced")}. Real exam environment simulations to conquer {selectedPattern === "NEET" ? "NEET" : (targetExam || "JEE")}.
</p> </p>
</div> </div>
<div className="flex flex-col sm:flex-row gap-3"> <div className="flex flex-col sm:flex-row gap-3">

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

@@ -133,22 +133,15 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
active={pathname.startsWith("/dashboard/cbt")} active={pathname.startsWith("/dashboard/cbt")}
isLocked={!hasAccessTo("weekly-test-series")} isLocked={!hasAccessTo("weekly-test-series")}
/> />
<NavItem {/* <NavItem
section="pro" section="pro"
href="/dashboard/materials" href="/dashboard/materials"
icon={<BookOpen size={17} />} icon={<BookOpen size={17} />}
label="Quick Notes" label="Quick Notes"
active={pathname.startsWith("/dashboard/materials")} active={pathname.startsWith("/dashboard/materials")}
isLocked={!hasAccessTo("detailed-performance-analytics")} isLocked={!hasAccessTo("detailed-performance-analytics")}
/> /> */}
<NavItem
section="pro"
href="/dashboard/analytics"
icon={<LineChart size={17} />}
label="Performance Analytics"
active={pathname.startsWith("/dashboard/analytics")}
isLocked={!hasAccessTo("detailed-performance-analytics")}
/>
<NavItem <NavItem
section="pro" section="pro"
href="/dashboard/community" href="/dashboard/community"
@@ -170,6 +163,14 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
</div> </div>
</div> </div>
<NavItem
section="ai"
href="/dashboard/analytics"
icon={<LineChart size={17} />}
label="Performance Analytics"
active={pathname.startsWith("/dashboard/analytics")}
isLocked={!hasAccessTo("detailed-performance-analytics")}
/>
<NavItem <NavItem
section="ai" section="ai"
href="/dashboard/ai-coach/tutor" href="/dashboard/ai-coach/tutor"
@@ -266,15 +267,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
<div className="px-4 py-3 border-b border-border bg-secondary/30"> <div className="px-4 py-3 border-b border-border bg-secondary/30">
<p className="text-sm font-bold text-foreground truncate">{cleanDisplayName(user.name)}</p> <p className="text-sm font-bold text-foreground truncate">{cleanDisplayName(user.name)}</p>
<p className="text-xs text-muted-foreground truncate">{user.email || user.phone}</p> <p className="text-xs text-muted-foreground truncate">{user.email || user.phone}</p>
{/* Trial info in dropdown */} {/* Trial info in dropdown removed */}
{trialInfo.isTrialActive && (
<div className="mt-1.5 flex items-center gap-1.5">
<span className="inline-flex items-center gap-1 text-[10px] font-bold px-2 py-0.5 rounded-full bg-primary/10 text-primary border border-primary/20">
Day {trialInfo.trialDayNumber} of {trialInfo.trialTotalDays} Trial
</span>
<span className="text-[10px] text-muted-foreground">{trialInfo.trialDaysRemaining}d left</span>
</div>
)}
</div> </div>
<div className="p-1.5"> <div className="p-1.5">
<Link href="/dashboard/settings" className="flex items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-secondary rounded-lg transition-colors"> <Link href="/dashboard/settings" className="flex items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-secondary rounded-lg transition-colors">
@@ -310,13 +303,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<p className="text-sm font-bold leading-none truncate">{user ? cleanDisplayName(user.name).split(" ")[0] : "Loading..."}</p> <p className="text-sm font-bold leading-none truncate">{user ? cleanDisplayName(user.name).split(" ")[0] : "Loading..."}</p>
<div className="mt-1"> <div className="mt-1">
{trialInfo.isTrialActive ? (
<span className="inline-flex items-center text-[10px] font-bold text-primary">
Day {trialInfo.trialDayNumber}/{trialInfo.trialTotalDays} Trial
</span>
) : (
<TierBadge tier={user ? (user.tier === "Al_Coach" ? "AI Coach" : user.tier) : "Free"} /> <TierBadge tier={user ? (user.tier === "Al_Coach" ? "AI Coach" : user.tier) : "Free"} />
)}
</div> </div>
</div> </div>
</div> </div>
@@ -339,13 +326,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
{targetExamLabel} Target {targetExamLabel} Target
</Badge> </Badge>
)} )}
{/* Trial countdown badge — shown to trial users in top header */} {/* Trial countdown badge removed from top header */}
{trialInfo.isTrialActive && (
<Badge variant="outline" className="bg-primary/10 text-primary border-primary/20 font-bold px-2.5 py-0.5 hidden md:inline-flex gap-1">
<span className="size-1.5 rounded-full bg-primary animate-pulse"></span>
Day {trialInfo.trialDayNumber}/{trialInfo.trialTotalDays} Trial · {trialInfo.trialDaysRemaining}d left
</Badge>
)}
</div> </div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">

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

@@ -1,8 +1,8 @@
"use client" "use client"
import { useState, useEffect } from "react" import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { ChevronDown, ChevronRight, CheckCircle2, Circle, Clock, Activity, Target } from "lucide-react" import { ChevronDown, ChevronRight, CheckCircle2, Circle, Clock, Activity, BarChart3 } from "lucide-react"
import { useActiveUser, isDemoUser } from "@/hooks/useActiveUser" import { useActiveUser, isDemoUser } from "@/hooks/useActiveUser"
type ChapterStatus = 'Mastered' | 'Practiced' | 'In Progress' | 'Not Started' type ChapterStatus = 'Mastered' | 'Practiced' | 'In Progress' | 'Not Started'
@@ -160,13 +160,26 @@ const ZERO_SUBJECTS: Subject[] = [
] ]
export default function ProgressTrackerPage() { export default function ProgressTrackerPage() {
const { userId } = useActiveUser() const { userId, user } = useActiveUser()
const isDemo = isDemoUser(userId) const isDemo = isDemoUser(userId)
const [subjects, setSubjects] = useState<Subject[]>(isDemo ? DEMO_SUBJECTS : ZERO_SUBJECTS) const [subjects, setSubjects] = useState<Subject[]>([])
useEffect(() => { useEffect(() => {
setSubjects(isDemo ? DEMO_SUBJECTS : ZERO_SUBJECTS) const targetExam = user?.target_exam || "JEE_Main";
}, [isDemo]) const mathOrBio = targetExam === "NEET" ? "Biology" : "Mathematics";
const getSubjects = (demo: boolean) => {
const base = demo ? DEMO_SUBJECTS : ZERO_SUBJECTS;
return base.map(s => {
if (s.name === "Mathematics / Biology") {
return { ...s, name: mathOrBio };
}
return s;
});
};
setSubjects(getSubjects(isDemo));
}, [isDemo, user?.target_exam]);
const toggleChapter = (subjectIndex: number, chapterIndex: number) => { const toggleChapter = (subjectIndex: number, chapterIndex: number) => {
const newSubjects = [...subjects] const newSubjects = [...subjects]
@@ -180,7 +193,7 @@ export default function ProgressTrackerPage() {
<div> <div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1"> <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)]"> <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)]">
<Target className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} /> <BarChart3 className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
</span> </span>
Syllabus Tracker Syllabus Tracker
</h1> </h1>

10
src/app/dashboard/settings/page.tsx
View File

@@ -1,4 +1,4 @@
"use client"; "use client";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -111,7 +111,7 @@ export default function SettingsPage() {
Account Settings Account Settings
</h1> </h1>
<p className="text-muted-foreground text-base font-medium max-w-2xl pl-1"> <p className="text-muted-foreground text-base font-medium max-w-2xl pl-1">
Manage your personal details, school details, and platform preferences. Manage your personal details, institute details, and platform preferences.
</p> </p>
</div> </div>
</div> </div>
@@ -159,7 +159,7 @@ export default function SettingsPage() {
<Card className="border-border bg-background shadow-sm"> <Card className="border-border bg-background shadow-sm">
<CardHeader> <CardHeader>
<CardTitle>Profile Details</CardTitle> <CardTitle>Profile Details</CardTitle>
<CardDescription>Update your personal and school information.</CardDescription> <CardDescription>Update your personal and institute information.</CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
@@ -183,11 +183,11 @@ export default function SettingsPage() {
</div> </div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-bold">School Name</label> <label className="text-sm font-bold">Institute Name</label>
<input <input
type="text" type="text"
value={school} value={school}
placeholder="Enter your school name" placeholder="Enter your institute name"
onChange={(e) => setSchool(e.target.value)} onChange={(e) => setSchool(e.target.value)}
className="w-full bg-secondary/50 border border-border rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan-ai)]" className="w-full bg-secondary/50 border border-border rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan-ai)]"
/> />

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

@@ -24,8 +24,8 @@ export function MistakeHeatmap() {
const isDemo = isDemoUser(userId); const isDemo = isDemoUser(userId);
const getColor = (errorRate: number) => { const getColor = (errorRate: number) => {
if (errorRate === 0) return 'bg-white/5 border-white/10 text-muted-foreground'; if (errorRate === 0) return 'bg-green-600/50 border-green-600/80 text-green-100';
if (errorRate >= 50) return 'bg-red-500/80 border-red-500 shadow-[0_0_10px_-2px_rgba(239,68,68,0.5)]'; // Critical if (errorRate >= 50) return 'bg-red-600/80 border-red-600 shadow-[0_0_10px_-2px_rgba(220,38,38,0.5)] text-red-100'; // Critical
if (errorRate >= 30) return 'bg-amber-500/60 border-amber-500'; // Warning if (errorRate >= 30) return 'bg-amber-500/60 border-amber-500'; // Warning
if (errorRate >= 10) return 'bg-yellow-500/30 border-yellow-500/50'; // Moderate if (errorRate >= 10) return 'bg-yellow-500/30 border-yellow-500/50'; // Moderate
return 'bg-green-500/20 border-green-500/30'; // Good return 'bg-green-500/20 border-green-500/30'; // Good
@@ -41,7 +41,6 @@ export function MistakeHeatmap() {
<Flame className="text-orange-500" /> Mastery Map <Flame className="text-orange-500" /> Mastery Map
<Badge variant="outline" className="border-[var(--cyan-ai-30)] text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] rounded-md text-[10px] uppercase font-bold ml-2 hidden sm:flex">AI Coach</Badge> <Badge variant="outline" className="border-[var(--cyan-ai-30)] text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] rounded-md text-[10px] uppercase font-bold ml-2 hidden sm:flex">AI Coach</Badge>
</CardTitle> </CardTitle>
<Info size={16} className="text-muted-foreground" />
</div> </div>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{isDemo ? "Topic-wise error rate across last 5 tests." : "Topic-wise error rate across your recent test sessions."} {isDemo ? "Topic-wise error rate across last 5 tests." : "Topic-wise error rate across your recent test sessions."}
@@ -95,13 +94,6 @@ export function MistakeHeatmap() {
)} )}
</div> </div>
{/* Legend */}
<div className="mt-6 pt-4 border-t border-border/50 flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-xs font-bold text-muted-foreground">
<div className="flex items-center gap-1.5"><div className="size-3 rounded-sm bg-green-500/20 border border-green-500/30"></div> {"0-10% (Optimal)"}</div>
<div className="flex items-center gap-1.5"><div className="size-3 rounded-sm bg-yellow-500/30 border border-yellow-500/50"></div> {"10-30%"}</div>
<div className="flex items-center gap-1.5"><div className="size-3 rounded-sm bg-amber-500/60 border border-amber-500"></div> {"30-50%"}</div>
<div className="flex items-center gap-1.5"><div className="size-3 rounded-sm bg-red-500/80 border border-red-500"></div> {"> 50%"}</div>
</div>
</CardContent> </CardContent>
</Card> </Card>
) )

40
src/components/AI/ProgressShare.tsx
View File

@@ -1,4 +1,4 @@
"use client" "use client"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
@@ -68,25 +68,41 @@ export function ProgressShare() {
</div> </div>
</div> </div>
<div className="mt-auto mb-auto text-center"> <div className="mt-auto mb-auto text-center w-full pt-2">
<h3 className="text-2xl font-black text-white mb-4">You crushed it this week!</h3> <h3 className="text-xl sm:text-2xl font-black text-white mb-4">You crushed it this week!</h3>
<div className="flex justify-center gap-4"> <div className="grid grid-cols-2 gap-3 max-w-[240px] mx-auto">
<div className="bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl p-3 w-28"> <div className="bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl p-3 flex flex-col items-center justify-center">
<TrendingUp className="text-amber-400 mx-auto mb-1" size={20} /> <TrendingUp className="text-amber-400 mb-1" size={18} />
<div className="text-2xl font-black text-white">{streak}</div> <div className="text-xl font-black text-white">{streak}</div>
<div className="text-[9px] text-white/70 uppercase font-bold tracking-wider">Day Streak</div> <div className="text-[9px] text-white/70 uppercase font-bold tracking-wider">Day Streak</div>
</div> </div>
<div className="bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl p-3 w-28"> <div className="bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl p-3 flex flex-col items-center justify-center">
<Target className="text-green-400 mx-auto mb-1" size={20} /> <Target className="text-green-400 mb-1" size={18} />
<div className="text-2xl font-black text-white">{accuracy}%</div> <div className="text-xl font-black text-white">{accuracy}%</div>
<div className="text-[9px] text-white/70 uppercase font-bold tracking-wider">Accuracy</div> <div className="text-[9px] text-white/70 uppercase font-bold tracking-wider">Accuracy</div>
</div> </div>
<div className="bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl p-3 flex flex-col items-center justify-center">
<TrendingUp className="text-cyan-400 mb-1" size={18} />
<div className="text-xl font-black text-white">4</div>
<div className="text-[9px] text-white/70 uppercase font-bold tracking-wider">Tests Taken</div>
</div>
<div className="bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl p-3 flex flex-col items-center justify-center">
<Target className="text-purple-400 mb-1" size={18} />
<div className="text-xl font-black text-white">78%</div>
<div className="text-[9px] text-white/70 uppercase font-bold tracking-wider">Avg Score</div>
</div>
</div> </div>
</div> </div>
<div className="text-left mt-auto"> <div className="mt-auto flex justify-between items-end w-full pt-4">
<div className="text-left">
<div className="text-sm font-bold text-white">{name}</div> <div className="text-sm font-bold text-white">{name}</div>
<div className="text-[10px] text-white/50">JEE Aspirant</div> <div className="text-[10px] text-white/70 mt-0.5">{user?.tier === "Al_Coach" ? "AI Coach Plan" : `${user?.tier || "Free"} Plan`}</div>
<div className="text-[10px] text-[var(--cyan-ai)]">{user?.target_exam === "NEET" ? "NEET Aspirant" : "JEE Aspirant"}</div>
</div>
<div className="text-right">
<div className="text-[9px] text-white/50 tracking-wider">contact@pragativeer.com</div>
</div>
</div> </div>
</div> </div>
</div> </div>