chore: Secure routes with auth middleware, update text and fix minor bugs
This commit is contained in:
@@ -3,75 +3,169 @@
|
||||
import { ReadinessGauge } from "@/components/AI/ReadinessGauge"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Gauge, ArrowLeft, Target, Award, ShieldAlert, CheckCircle2 } from "lucide-react"
|
||||
import { Gauge, TrendingUp, Target, Award, ShieldAlert, CheckCircle2, BookOpen, Zap, BarChart2, Clock } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
|
||||
const SCORE_HISTORY = [
|
||||
{ week: "Wk 1", score: 54 },
|
||||
{ week: "Wk 2", score: 60 },
|
||||
{ week: "Wk 3", score: 63 },
|
||||
{ week: "Wk 4", score: 68 },
|
||||
{ week: "Wk 5", score: 72 },
|
||||
{ week: "Wk 6", score: 78 },
|
||||
]
|
||||
|
||||
export default function ReadinessPage() {
|
||||
const maxScore = Math.max(...SCORE_HISTORY.map(d => d.score))
|
||||
|
||||
return (
|
||||
<div className="p-6 md:p-8 max-w-7xl mx-auto space-y-8 animate-in fade-in duration-500 min-h-screen">
|
||||
{/* Navigation Header */}
|
||||
<div className="p-6 md:p-8 space-y-8 max-w-7xl mx-auto animate-in fade-in duration-500 min-h-screen">
|
||||
{/* Page Header */}
|
||||
<div className="border-b border-border/50 pb-6">
|
||||
<h1 className="text-3xl md:text-5xl font-black tracking-tight flex items-center gap-3">
|
||||
<Gauge className="text-[#00F0FF]" size={36} />
|
||||
Exam Readiness Analytics
|
||||
</h1>
|
||||
<p className="text-muted-foreground text-base md:text-lg mt-1 font-medium max-w-3xl">
|
||||
Real-time algorithmic prediction of your readiness percentage for JEE & NEET based on speed, accuracy, and test history.
|
||||
</p>
|
||||
<div className="flex items-start justify-between gap-4 flex-wrap">
|
||||
<div>
|
||||
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-2">
|
||||
<span className="p-2.5 rounded-xl bg-[#00F0FF]/10 border border-[#00F0FF]/20">
|
||||
<Gauge className="text-[#00F0FF]" size={28} />
|
||||
</span>
|
||||
Exam Readiness Analytics
|
||||
</h1>
|
||||
<p className="text-muted-foreground text-base font-medium max-w-2xl pl-1">
|
||||
Real-time algorithmic prediction of your exam readiness — based on speed, accuracy, syllabus coverage, and test history.
|
||||
</p>
|
||||
</div>
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-[#00F0FF] bg-[#00F0FF]/10 border border-[#00F0FF]/20 px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
|
||||
<Gauge size={12} /> AI Powered
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* KPI Strip */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{[
|
||||
{ label: "Overall Score", value: "72 / 100", trend: "+5 this week", trendUp: true, icon: <Gauge size={20} className="text-[#00F0FF]" /> },
|
||||
{ label: "Accuracy Rate", value: "88%", trend: "+3% vs last week", trendUp: true, icon: <Target size={20} className="text-amber-400" /> },
|
||||
{ label: "Avg Speed / Q", value: "45 sec", trend: "↓ Needs work", trendUp: false, icon: <Clock size={20} className="text-red-400" /> },
|
||||
{ label: "Syllabus Covered", value: "64%", trend: "+8% this month", trendUp: true, icon: <BookOpen size={20} className="text-emerald-400" /> },
|
||||
].map((kpi) => (
|
||||
<Card key={kpi.label} className="border-border/60 bg-secondary/10 rounded-2xl hover:border-[#00F0FF]/30 transition-colors">
|
||||
<CardContent className="p-5">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
{kpi.icon}
|
||||
<span className={`text-xs font-bold px-2 py-0.5 rounded-full ${kpi.trendUp ? "bg-green-500/10 text-green-400" : "bg-red-500/10 text-red-400"}`}>
|
||||
{kpi.trend}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-2xl font-black mb-0.5">{kpi.value}</div>
|
||||
<div className="text-xs text-muted-foreground font-semibold uppercase tracking-wider">{kpi.label}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<div className="lg:col-span-2 space-y-8">
|
||||
<Card className="p-8 bg-secondary/10 border-border/60 rounded-3xl">
|
||||
<h2 className="text-2xl font-extrabold tracking-tight mb-6 flex items-center gap-2">
|
||||
<Award className="text-amber-400" size={24} /> Overall Readiness Index
|
||||
</h2>
|
||||
{/* Readiness Score Card */}
|
||||
<Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl">
|
||||
<div className="flex items-center gap-2 mb-5">
|
||||
<Award className="text-amber-400" size={22} />
|
||||
<h2 className="text-xl font-extrabold tracking-tight">Composite Readiness Index</h2>
|
||||
<span className="ml-auto text-xs font-bold text-[#00F0FF] bg-[#00F0FF]/10 border border-[#00F0FF]/20 px-2.5 py-1 rounded-full">Updated Daily</span>
|
||||
</div>
|
||||
<ReadinessGauge />
|
||||
</Card>
|
||||
|
||||
{/* Subject Confidence Breakdown */}
|
||||
<Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl space-y-6">
|
||||
<h3 className="text-xl font-extrabold tracking-tight">Subject Confidence Matrix</h3>
|
||||
{/* Subject Confidence Matrix */}
|
||||
<Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl space-y-5">
|
||||
<div className="flex items-center gap-2">
|
||||
<BarChart2 size={20} className="text-[#00F0FF]" />
|
||||
<h3 className="text-lg font-extrabold tracking-tight">Subject Confidence Matrix</h3>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{ subject: "Biology / Maths", score: 82, color: "bg-[#00F0FF]", status: "High Readiness" },
|
||||
{ subject: "Chemistry", score: 74, color: "bg-amber-400", status: "Moderate Readiness" },
|
||||
{ subject: "Physics", score: 61, color: "bg-red-400", status: "Needs Intensive Drill" },
|
||||
{ subject: "Biology / Maths", score: 82, color: "bg-[#00F0FF]", status: "High Readiness", statusColor: "text-[#00F0FF]" },
|
||||
{ subject: "Chemistry", score: 74, color: "bg-amber-400", status: "Moderate Readiness", statusColor: "text-amber-400" },
|
||||
{ subject: "Physics", score: 61, color: "bg-red-400", status: "Needs Intensive Drill", statusColor: "text-red-400" },
|
||||
].map((sub) => (
|
||||
<div key={sub.subject} className="space-y-2">
|
||||
<div className="flex justify-between items-center text-sm font-bold">
|
||||
<span>{sub.subject}</span>
|
||||
<span className="text-muted-foreground">{sub.score}% • {sub.status}</span>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm font-black">{sub.subject}</span>
|
||||
<span className={`text-xs font-bold ${sub.statusColor}`}>{sub.score}% · {sub.status}</span>
|
||||
</div>
|
||||
<div className="h-3 w-full bg-secondary rounded-full overflow-hidden">
|
||||
<div className={`h-full ${sub.color}`} style={{ width: `${sub.score}%` }} />
|
||||
<div className="h-2.5 w-full bg-secondary rounded-full overflow-hidden">
|
||||
<div className={`h-full ${sub.color} rounded-full transition-all duration-700`} style={{ width: `${sub.score}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Score History Chart */}
|
||||
<Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl">
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<TrendingUp size={20} className="text-green-400" />
|
||||
<h3 className="text-lg font-extrabold tracking-tight">6-Week Readiness Trend</h3>
|
||||
</div>
|
||||
<div className="flex items-end gap-3 h-28">
|
||||
{SCORE_HISTORY.map((d, i) => (
|
||||
<div key={d.week} className="flex flex-col items-center gap-1 flex-1">
|
||||
<span className="text-xs font-black text-muted-foreground">{d.score}</span>
|
||||
<div
|
||||
className={`w-full rounded-t-md transition-all duration-700 ${i === SCORE_HISTORY.length - 1 ? "bg-gradient-to-t from-[#00F0FF]/60 to-[#00F0FF]" : "bg-gradient-to-t from-white/10 to-white/25"}`}
|
||||
style={{ height: `${(d.score / maxScore) * 80}px` }}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground font-semibold">{d.week}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="space-y-6">
|
||||
<Card className="p-6 bg-gradient-to-br from-amber-500/10 via-secondary/20 to-background border border-amber-500/30 rounded-3xl space-y-4">
|
||||
<h3 className="text-xl font-black tracking-tight text-amber-400 flex items-center gap-2">
|
||||
<ShieldAlert size={20} /> Readiness Boosters
|
||||
<h3 className="text-base font-black tracking-tight text-amber-400 flex items-center gap-2">
|
||||
<ShieldAlert size={18} /> Readiness Boosters
|
||||
</h3>
|
||||
<ul className="space-y-3 text-sm font-medium text-muted-foreground">
|
||||
<li className="flex items-start gap-2">
|
||||
<ul className="space-y-3.5 text-sm font-semibold text-muted-foreground">
|
||||
<li className="flex items-start gap-2.5">
|
||||
<CheckCircle2 size={16} className="text-amber-400 shrink-0 mt-0.5" />
|
||||
<span>Complete 2 Full-Length Mock Tests this week.</span>
|
||||
<span>Complete 2 full-length mock tests this week to boost consistency score.</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 size={16} className="text-amber-400 shrink-0 mt-0.5" />
|
||||
<span>Clear 15 pending errors in Physics error queue.</span>
|
||||
<span>Clear 15 pending errors in your Physics queue to gain ~4 readiness points.</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 size={16} className="text-amber-400 shrink-0 mt-0.5" />
|
||||
<span>Maintain a 7+ day study streak.</span>
|
||||
<span>Maintain a 7+ day streak — consistency adds 6% to your readiness index.</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 size={16} className="text-amber-400 shrink-0 mt-0.5" />
|
||||
<span>Reduce avg time-per-question below 40s with daily timed DPP sessions.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl space-y-4">
|
||||
<h3 className="text-base font-black text-muted-foreground uppercase tracking-wider flex items-center gap-2">
|
||||
<Zap size={16} className="text-[#00F0FF]" /> Quick Actions
|
||||
</h3>
|
||||
<div className="space-y-2.5">
|
||||
{[
|
||||
{ label: "Practice Physics DPP", href: "/dashboard/ai-coach/cbt-dpp", color: "text-[#00F0FF]" },
|
||||
{ label: "Review Mistake Queue", href: "/dashboard/ai-coach/mistakes", color: "text-red-400" },
|
||||
{ label: "View Exam Strategy", href: "/dashboard/ai-coach/strategy", color: "text-amber-400" },
|
||||
{ label: "College Predictor", href: "/dashboard/ai-coach/college-predictor", color: "text-emerald-400" },
|
||||
].map((a) => (
|
||||
<Link key={a.href} href={a.href}
|
||||
className="flex items-center justify-between p-2.5 rounded-xl border border-border/40 hover:border-[#00F0FF]/30 hover:bg-white/5 transition-all group text-sm font-bold">
|
||||
<span className={a.color}>{a.label}</span>
|
||||
<span className="text-muted-foreground group-hover:translate-x-1 transition-transform">→</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user