154 lines
7.8 KiB
TypeScript
154 lines
7.8 KiB
TypeScript
"use client"
|
||
|
||
import { StudyTimeOptimizationCard } from "@/components/AI/StudyTimeOptimizationCard"
|
||
import { Clock, Zap, Moon, Sun, AlertCircle, ArrowRight, BarChart2 } from "lucide-react"
|
||
import { Card, CardContent } from "@/components/ui/card"
|
||
import Link from "next/link"
|
||
|
||
const INSIGHTS = [
|
||
{
|
||
icon: <Sun size={16} className="text-yellow-400" />,
|
||
title: "Peak Cognitive Window",
|
||
desc: "2 PM – 5 PM is your highest-efficiency block. Reserve this for new concepts, hard problems, and mock tests.",
|
||
color: "border-yellow-400/20 bg-yellow-400/5",
|
||
},
|
||
{
|
||
icon: <Moon size={16} className="text-indigo-400" />,
|
||
title: "Evening Consolidation",
|
||
desc: "9–10 PM is ideal for light revision and flashcard review — this window solidifies short-term to long-term memory.",
|
||
color: "border-indigo-400/20 bg-indigo-400/5",
|
||
},
|
||
{
|
||
icon: <AlertCircle size={16} className="text-red-400" />,
|
||
title: "Avoid After 11 PM",
|
||
desc: "Cognitive fatigue significantly increases error rate. Solving new concepts late at night is counterproductive.",
|
||
color: "border-red-400/20 bg-red-400/5",
|
||
},
|
||
]
|
||
|
||
const HOURLY_EFFICIENCY = [
|
||
{ slot: "6–9 AM", pct: 60, label: "Morning" },
|
||
{ slot: "9–12 PM", pct: 72, label: "Mid-Morning" },
|
||
{ slot: "12–2 PM", pct: 55, label: "Post-Lunch dip" },
|
||
{ slot: "2–5 PM", pct: 95, label: "Peak ★", highlight: true },
|
||
{ slot: "5–7 PM", pct: 82, label: "Afternoon" },
|
||
{ slot: "7–9 PM", pct: 74, label: "Evening" },
|
||
{ slot: "9–11 PM", pct: 60, label: "Night Revision" },
|
||
{ slot: "11 PM+", pct: 32, label: "Avoid" },
|
||
]
|
||
|
||
export default function TimeOptimizationPage() {
|
||
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">
|
||
<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">
|
||
<Clock className="text-[#00F0FF]" size={28} />
|
||
</span>
|
||
Study Time Optimization
|
||
</h1>
|
||
<p className="text-muted-foreground text-base font-medium max-w-2xl pl-1">
|
||
Understand your peak productive hours and schedule your hardest topics in your highest-efficiency windows.
|
||
</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">
|
||
<Zap size={12} /> Chronobiology Analytics
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* KPI Strip */}
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||
{[
|
||
{ label: "Peak Efficiency", value: "95%", sub: "2–5 PM window", color: "border-yellow-400/20 bg-yellow-400/5", icon: <Sun size={18} className="text-yellow-400" /> },
|
||
{ label: "Study Hrs Today", value: "3.8 h", sub: "Target: 6 h", color: "border-[#00F0FF]/20 bg-[#00F0FF]/5", icon: <Clock size={18} className="text-[#00F0FF]" /> },
|
||
{ label: "Morning Block", value: "60%", sub: "6–9 AM", color: "border-indigo-400/20 bg-indigo-400/5", icon: <Moon size={18} className="text-indigo-400" /> },
|
||
{ label: "Evening Block", value: "74%", sub: "7–9 PM", color: "border-green-400/20 bg-green-400/5", icon: <BarChart2 size={18} className="text-green-400" /> },
|
||
].map(kpi => (
|
||
<Card key={kpi.label} className={`rounded-2xl border ${kpi.color}`}>
|
||
<CardContent className="p-4 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">
|
||
{/* Chart — 2/3 */}
|
||
<div className="lg:col-span-2 space-y-4">
|
||
<div className="flex items-center gap-2 text-sm font-black uppercase tracking-wider text-muted-foreground">
|
||
<BarChart2 size={16} className="text-[#00F0FF]" />
|
||
Hourly Efficiency Profile
|
||
</div>
|
||
<StudyTimeOptimizationCard />
|
||
</div>
|
||
|
||
{/* Right Panel */}
|
||
<div className="space-y-5">
|
||
{/* Slot breakdown table */}
|
||
<Card className="bg-secondary/10 border-border/60 rounded-2xl">
|
||
<CardContent className="p-5 space-y-3">
|
||
<h3 className="text-sm font-black uppercase tracking-wider text-muted-foreground">Time Slot Breakdown</h3>
|
||
<div className="space-y-2">
|
||
{HOURLY_EFFICIENCY.map(slot => (
|
||
<div key={slot.slot} className={`flex items-center gap-3 p-2 rounded-lg ${slot.highlight ? "bg-yellow-400/10 border border-yellow-400/20" : "bg-white/5"}`}>
|
||
<div className="w-16 text-xs font-bold text-muted-foreground shrink-0">{slot.slot}</div>
|
||
<div className="flex-1 h-1.5 bg-secondary rounded-full overflow-hidden">
|
||
<div
|
||
className={`h-full rounded-full ${slot.pct >= 80 ? (slot.highlight ? "bg-yellow-400" : "bg-green-400") : slot.pct >= 60 ? "bg-[#00F0FF]" : "bg-red-400"}`}
|
||
style={{ width: `${slot.pct}%` }}
|
||
/>
|
||
</div>
|
||
<div className={`text-xs font-black w-8 text-right shrink-0 ${slot.highlight ? "text-yellow-400" : "text-muted-foreground"}`}>{slot.pct}%</div>
|
||
{slot.highlight && <span className="text-[10px] font-black text-yellow-400 shrink-0">PEAK</span>}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* AI Insights */}
|
||
<div className="space-y-3">
|
||
{INSIGHTS.map(insight => (
|
||
<Card key={insight.title} className={`rounded-2xl border ${insight.color}`}>
|
||
<CardContent className="p-4 flex items-start gap-3">
|
||
<div className="mt-0.5 shrink-0">{insight.icon}</div>
|
||
<div>
|
||
<p className="text-sm font-black">{insight.title}</p>
|
||
<p className="text-xs text-muted-foreground font-medium mt-0.5">{insight.desc}</p>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
|
||
<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]">Apply Insights</h3>
|
||
<div className="space-y-2">
|
||
{[
|
||
{ label: "Schedule Today's Study Plan", href: "/dashboard/ai-coach/study-plan" },
|
||
{ label: "Check Exam Readiness", href: "/dashboard/ai-coach/readiness" },
|
||
{ label: "Launch a Practice Test Now", href: "/dashboard/ai-coach/cbt-dpp" },
|
||
].map(link => (
|
||
<Link key={link.href} href={link.href}
|
||
className="flex items-center justify-between text-sm font-bold text-muted-foreground hover:text-foreground py-2 border-b border-border/30 last:border-0 transition-colors group">
|
||
{link.label}
|
||
<ArrowRight size={14} className="group-hover:translate-x-1 transition-transform" />
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|