162 lines
9.5 KiB
TypeScript
162 lines
9.5 KiB
TypeScript
"use client"
|
|
|
|
import { StudyPlanCard } from "@/components/AI/StudyPlanCard"
|
|
import { WeeklyProgressReport } from "@/components/AI/WeeklyProgressReport"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import { Calendar, BookOpen, Clock, Target, CheckCircle2, TrendingUp, Flame } from "lucide-react"
|
|
import { useActiveUser, isDemoUser } from "@/hooks/useActiveUser"
|
|
|
|
export default function StudyPlanPage() {
|
|
const { user, userId } = useActiveUser()
|
|
const isDemo = isDemoUser(userId)
|
|
const streakCount = user?.streak_count || (isDemo ? 12 : 1)
|
|
|
|
return (
|
|
<div className="p-6 md:p-8 space-y-8 max-w-7xl mx-auto min-h-screen">
|
|
{/* Page Header */}
|
|
<div className="border-b border-border/50 pb-6">
|
|
<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-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)]">
|
|
<Calendar className="text-cyan-700 dark:text-[var(--cyan-ai)]" size={28} />
|
|
</span>
|
|
Personalized Daily & Weekly Study Plan
|
|
</h1>
|
|
<p className="text-muted-foreground text-base font-medium max-w-2xl pl-1">
|
|
AI-generated task schedule dynamically tailored to fix your weak areas and maintain optimal syllabus coverage.
|
|
</p>
|
|
</div>
|
|
<span className="text-xs font-bold uppercase tracking-wider text-[var(--cyan-ai)] bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)] px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
|
|
<Calendar size={12} /> AI Powered
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* KPI Strip */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
{[
|
|
{ label: "Tasks Today", value: isDemo ? "5" : "3", sub: isDemo ? "2 completed" : "0 completed", icon: <CheckCircle2 size={18} className="text-green-400" />, color: "border-green-400/20 bg-green-400/5" },
|
|
{ label: "Study Hours Today", value: isDemo ? "3.8 hrs" : "0.0 hrs", sub: "Target: 5 hrs", icon: <Clock size={18} className="text-[var(--cyan-ai)]" />, color: "border-[var(--cyan-ai-20)] bg-[var(--cyan-ai-10)]" },
|
|
{ label: "Syllabus Coverage", value: isDemo ? "64%" : "0%", sub: isDemo ? "+8% this week" : "Day 1 Baseline", icon: <Target size={18} className="text-amber-400" />, color: "border-amber-400/20 bg-amber-400/5" },
|
|
{ label: "Current Streak", value: `${streakCount} Day${streakCount === 1 ? '' : 's'}`, sub: isDemo ? "Keep it up!" : "Day 1 active", icon: <Flame size={18} className="text-orange-400" />, color: "border-orange-400/20 bg-orange-400/5" },
|
|
].map((kpi) => (
|
|
<Card key={kpi.label} className={`rounded-2xl border ${kpi.color} hover:scale-[1.02] transition-transform`}>
|
|
<CardContent className="p-5 flex flex-col gap-2">
|
|
{kpi.icon}
|
|
<div className="text-2xl font-black">{kpi.value}</div>
|
|
<div className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">{kpi.label}</div>
|
|
<div className="text-[11px] font-bold text-muted-foreground/60">{kpi.sub}</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">
|
|
{/* Today's Schedule */}
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2 text-sm font-black uppercase tracking-wider text-muted-foreground">
|
|
<Clock size={16} className="text-[var(--cyan-ai)]" />
|
|
Today's Schedule
|
|
</div>
|
|
<span className="text-xs font-bold text-[var(--cyan-ai)]">
|
|
{new Date().toLocaleDateString("en-IN", { weekday: "long", day: "numeric", month: "long" })}
|
|
</span>
|
|
</div>
|
|
<StudyPlanCard />
|
|
</div>
|
|
|
|
{/* Weekly Overview */}
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2 text-sm font-black uppercase tracking-wider text-muted-foreground">
|
|
<TrendingUp size={16} className="text-emerald-400" />
|
|
Weekly Syllabus Progress
|
|
</div>
|
|
<WeeklyProgressReport />
|
|
</div>
|
|
|
|
{/* Syllabus Coverage */}
|
|
<Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl">
|
|
<div className="flex items-center gap-2 mb-5">
|
|
<BookOpen size={20} className="text-[var(--cyan-ai)]" />
|
|
<h3 className="text-lg font-extrabold tracking-tight">Subject Coverage Breakdown</h3>
|
|
</div>
|
|
<div className="space-y-4">
|
|
{[
|
|
{ subject: "Physics", covered: 58, total: 100, chapters: "21 / 29 chapters" },
|
|
{ subject: "Chemistry", covered: 71, total: 100, chapters: "19 / 26 chapters" },
|
|
{ subject: "Biology / Maths", covered: 64, total: 100, chapters: "32 / 52 topics" },
|
|
].map((sub) => (
|
|
<div key={sub.subject}>
|
|
<div className="flex items-center justify-between mb-1.5">
|
|
<span className="text-sm font-black">{sub.subject}</span>
|
|
<div className="flex items-center gap-3 text-xs font-semibold text-muted-foreground">
|
|
<span>{sub.chapters}</span>
|
|
<span className={`font-black ${sub.covered >= 70 ? "text-green-400" : sub.covered >= 55 ? "text-amber-400" : "text-red-400"}`}>{sub.covered}%</span>
|
|
</div>
|
|
</div>
|
|
<div className="h-2.5 w-full bg-secondary rounded-full overflow-hidden">
|
|
<div
|
|
className={`h-full rounded-full ${sub.covered >= 70 ? "bg-green-400" : sub.covered >= 55 ? "bg-amber-400" : "bg-red-400"}`}
|
|
style={{ width: `${sub.covered}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Sidebar */}
|
|
<div className="space-y-6">
|
|
<Card className="p-6 bg-gradient-to-br from-[var(--cyan-ai-10)] via-secondary/20 to-background border border-[var(--cyan-ai-30)] rounded-3xl space-y-4">
|
|
<h3 className="text-base font-black tracking-tight text-[var(--cyan-ai)] flex items-center gap-2">
|
|
<BookOpen size={18} /> AI Scheduler Rules
|
|
</h3>
|
|
<ul className="space-y-3 text-sm font-medium text-muted-foreground">
|
|
<li className="flex items-start gap-2">
|
|
<CheckCircle2 size={16} className="text-[var(--cyan-ai)] shrink-0 mt-0.5" />
|
|
<span><strong className="text-foreground">High-Yield Prioritization:</strong> Extra time on topics with heavy exam weightage.</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<CheckCircle2 size={16} className="text-[var(--cyan-ai)] shrink-0 mt-0.5" />
|
|
<span><strong className="text-foreground">Error Interleaving:</strong> Recent incorrect questions are integrated directly into study blocks.</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<CheckCircle2 size={16} className="text-[var(--cyan-ai)] shrink-0 mt-0.5" />
|
|
<span><strong className="text-foreground">Burnout Prevention:</strong> 10-minute micro-breaks recommended between intensive problem sets.</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<CheckCircle2 size={16} className="text-[var(--cyan-ai)] shrink-0 mt-0.5" />
|
|
<span><strong className="text-foreground">Spaced Repetition:</strong> SM-2 algorithm reschedules mistake reviews at optimal intervals.</span>
|
|
</li>
|
|
</ul>
|
|
</Card>
|
|
|
|
<Card className="p-5 bg-secondary/10 border-border/60 rounded-3xl space-y-3">
|
|
<h3 className="text-sm font-black uppercase tracking-wider text-muted-foreground">Upcoming This Week</h3>
|
|
<div className="space-y-2">
|
|
{[
|
|
{ day: "Tue, Aug 5", task: "Full-Length Mock — JEE Mains Pattern", type: "Test", color: "text-purple-400 bg-purple-400/10" },
|
|
{ day: "Wed, Aug 6", task: "Rotational Dynamics Intensive Drill", type: "Practice", color: "text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)]" },
|
|
{ day: "Thu, Aug 7", task: "Chemistry Organic — Mistake Review", type: "Review", color: "text-red-400 bg-red-400/10" },
|
|
{ day: "Fri, Aug 8", task: "Optics + Wave Optics Revision", type: "Revision", color: "text-yellow-400 bg-yellow-400/10" },
|
|
].map((item) => (
|
|
<div key={item.day} className="flex items-center gap-2 p-2.5 rounded-lg bg-white/5 border border-border/30">
|
|
<span className={`text-[10px] font-black px-2 py-0.5 rounded-md shrink-0 ${item.color}`}>{item.type}</span>
|
|
<div className="min-w-0">
|
|
<div className="text-xs font-bold truncate">{item.task}</div>
|
|
<div className="text-[11px] text-muted-foreground">{item.day}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|