155 lines
7.8 KiB
TypeScript
155 lines
7.8 KiB
TypeScript
"use client"
|
|
|
|
import { WeeklyProgressReport } from "@/components/AI/WeeklyProgressReport"
|
|
import { Target, TrendingUp, Calendar, Zap, ArrowRight, BookOpen, CheckCircle2 } from "lucide-react"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import Link from "next/link"
|
|
import { useActiveUser, isDemoUser } from "@/hooks/useActiveUser"
|
|
|
|
const DEMO_STATS = [
|
|
{ label: "Avg. Accuracy", value: "85%", delta: "+6%", positive: true },
|
|
{ label: "Days Active", value: "7 / 7", delta: "Perfect week", positive: true },
|
|
{ label: "Questions Solved", value: "214", delta: "+38 vs last week", positive: true },
|
|
{ label: "Topics Covered", value: "12", delta: "3 remaining", positive: false },
|
|
]
|
|
|
|
const ZERO_STATS = [
|
|
{ label: "Avg. Accuracy", value: "0%", delta: "Baseline", positive: true },
|
|
{ label: "Days Active", value: "0 / 7", delta: "Day 1 Active", positive: true },
|
|
{ label: "Questions Solved", value: "0", delta: "0 vs last week", positive: true },
|
|
{ label: "Topics Covered", value: "0", delta: "0 completed", positive: false },
|
|
]
|
|
|
|
const DEMO_SYLLABUS_PROGRESS = [
|
|
{ subject: "Physics", completed: 42, total: 60, percentage: 70, color: "bg-blue-500", text: "text-blue-500" },
|
|
{ subject: "Chemistry", completed: 35, total: 55, percentage: 63, color: "bg-amber-500", text: "text-amber-500" },
|
|
{ subject: "Mathematics", completed: 50, total: 65, percentage: 76, color: "bg-purple-500", text: "text-purple-500" },
|
|
{ subject: "Biology", completed: 20, total: 40, percentage: 50, color: "bg-emerald-500", text: "text-emerald-500" },
|
|
]
|
|
|
|
const ZERO_SYLLABUS_PROGRESS = [
|
|
{ subject: "Physics", completed: 0, total: 60, percentage: 0, color: "bg-blue-500", text: "text-blue-500" },
|
|
{ subject: "Chemistry", completed: 0, total: 55, percentage: 0, color: "bg-amber-500", text: "text-amber-500" },
|
|
{ subject: "Mathematics", completed: 0, total: 65, percentage: 0, color: "bg-purple-500", text: "text-purple-500" },
|
|
{ subject: "Biology", completed: 0, total: 40, percentage: 0, color: "bg-emerald-500", text: "text-emerald-500" },
|
|
]
|
|
|
|
export default function WeeklyProgressPage() {
|
|
const { userId } = useActiveUser()
|
|
const isDemo = isDemoUser(userId)
|
|
const stats = isDemo ? DEMO_STATS : ZERO_STATS
|
|
const syllabusProgress = isDemo ? DEMO_SYLLABUS_PROGRESS : ZERO_SYLLABUS_PROGRESS
|
|
|
|
return (
|
|
<div className="p-6 md:p-8 max-w-7xl mx-auto space-y-8 min-h-screen animate-in fade-in zoom-in-95 origin-top duration-500">
|
|
{/* 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-1">
|
|
<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)]">
|
|
<Target className="text-cyan-700 dark:text-[var(--cyan-ai)]" size={28} />
|
|
</span>
|
|
Weekly Progress Overview
|
|
</h1>
|
|
<p className="text-muted-foreground text-base font-medium max-w-2xl pl-1">
|
|
Track your syllabus completion goals, study streaks, and weekly milestones at a glance.
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2 shrink-0">
|
|
<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">
|
|
<Zap size={12} /> Live Analytics
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* KPI Stats Row */}
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{stats.map((stat) => (
|
|
<Card key={stat.label} className="bg-secondary/20 border-border/60 rounded-2xl">
|
|
<CardContent className="p-4">
|
|
<p className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-1">{stat.label}</p>
|
|
<p className="text-2xl font-black tracking-tight">{stat.value}</p>
|
|
<p className={`text-xs font-bold mt-1 ${stat.positive ? "text-emerald-400" : "text-amber-400"}`}>
|
|
{stat.delta}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
{/* Main Content Grid */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
{/* Weekly Bar Chart */}
|
|
<div className="lg:col-span-2 space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-xl font-extrabold tracking-tight flex items-center gap-2">
|
|
<Calendar size={20} className="text-[var(--cyan-ai)]" /> This Week at a Glance
|
|
</h2>
|
|
</div>
|
|
<WeeklyProgressReport />
|
|
</div>
|
|
|
|
{/* Side Panel */}
|
|
<div className="space-y-6">
|
|
{/* Syllabus Progress */}
|
|
<div className="space-y-3">
|
|
<h2 className="text-xl font-extrabold tracking-tight flex items-center gap-2">
|
|
<BookOpen size={20} className="text-purple-400" /> Syllabus Progress
|
|
</h2>
|
|
<Card className="bg-secondary/10 border-border/60 rounded-2xl">
|
|
<CardContent className="p-5 space-y-4">
|
|
{syllabusProgress.map((item) => (
|
|
<div key={item.subject} className="space-y-1.5">
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="font-bold">{item.subject}</span>
|
|
<span className={`font-black ${item.text}`}>{item.percentage}%</span>
|
|
</div>
|
|
<div className="h-2 w-full bg-secondary rounded-full overflow-hidden">
|
|
<div
|
|
className={`h-full ${item.color} rounded-full transition-all duration-500`}
|
|
style={{ width: `${item.percentage}%` }}
|
|
/>
|
|
</div>
|
|
<div className="text-[10px] text-muted-foreground font-semibold text-right">
|
|
{item.completed} / {item.total} chapters
|
|
</div>
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Weekly Goals */}
|
|
<Card className="bg-gradient-to-br from-[var(--cyan-ai-10)] via-secondary/20 to-background border border-[var(--cyan-ai-20)] rounded-2xl">
|
|
<CardContent className="p-5 space-y-3">
|
|
<h3 className="text-sm font-black uppercase tracking-wider text-[var(--cyan-ai)]">Weekly Goals</h3>
|
|
<div className="space-y-2">
|
|
<div className="flex items-start gap-2 p-2 rounded-lg bg-white/5">
|
|
{isDemo ? (
|
|
<CheckCircle2 size={16} className="text-green-400 mt-0.5 shrink-0" />
|
|
) : (
|
|
<div className="w-4 h-4 rounded-full border-2 border-muted-foreground mt-0.5 shrink-0" />
|
|
)}
|
|
<div>
|
|
<div className="text-xs font-bold">Complete 200 Questions</div>
|
|
<div className="text-[10px] text-muted-foreground">{isDemo ? "Goal Met (214/200)" : "Pending (0/200)"}</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-2 p-2 rounded-lg bg-white/5 opacity-70">
|
|
<div className="w-4 h-4 rounded-full border-2 border-muted-foreground mt-0.5 shrink-0" />
|
|
<div>
|
|
<div className="text-xs font-bold">Take 1 Full Mock Test</div>
|
|
<div className="text-[10px] text-muted-foreground">Scheduled for Sunday</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|