chore: Secure routes with auth middleware, update text and fix minor bugs
This commit is contained in:
@@ -1,24 +1,129 @@
|
||||
"use client"
|
||||
|
||||
import { WeeklyProgressReport } from "@/components/AI/WeeklyProgressReport"
|
||||
import { ArrowLeft, Target } from "lucide-react"
|
||||
import { Target, TrendingUp, Calendar, Zap, ArrowRight, BookOpen, CheckCircle2 } from "lucide-react"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import Link from "next/link"
|
||||
|
||||
const 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 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" },
|
||||
]
|
||||
|
||||
export default function WeeklyProgressPage() {
|
||||
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">
|
||||
{/* 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">
|
||||
<Target className="text-[#00F0FF]" size={36} />
|
||||
Weekly Progress Overview
|
||||
</h1>
|
||||
<p className="text-muted-foreground text-base md:text-lg mt-1 font-medium max-w-3xl">
|
||||
Track your syllabus completion goals and weekly milestones.
|
||||
</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-1">
|
||||
<span className="p-2.5 rounded-xl bg-[#00F0FF]/10 border border-[#00F0FF]/20">
|
||||
<Target className="text-[#00F0FF]" 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-[#00F0FF] bg-[#00F0FF]/10 border border-[#00F0FF]/20 px-3 py-1.5 rounded-full flex items-center gap-1.5">
|
||||
<Zap size={12} /> Live Analytics
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<WeeklyProgressReport />
|
||||
{/* 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-[#00F0FF]" /> 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">
|
||||
{SYLLABUS_PROGRESS.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-[#00F0FF]/10 via-secondary/20 to-background border border-[#00F0FF]/20 rounded-2xl">
|
||||
<CardContent className="p-5 space-y-3">
|
||||
<h3 className="text-sm font-black uppercase tracking-wider text-[#00F0FF]">Weekly Goals</h3>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-start gap-2 p-2 rounded-lg bg-white/5">
|
||||
<CheckCircle2 size={16} className="text-green-400 mt-0.5 shrink-0" />
|
||||
<div>
|
||||
<div className="text-xs font-bold">Complete 200 Questions</div>
|
||||
<div className="text-[10px] text-muted-foreground">Goal Met (214/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>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user