feat: setup admin JSON generation and pdf viewer for free plan DPPs
This commit is contained in:
@@ -1,9 +1,9 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { CalendarClock, CheckCircle2, Circle, Clock, Loader2, PlayCircle, RefreshCw, XCircle } from "lucide-react"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Check, RefreshCw } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
|
||||
import { useActiveUser } from "@/hooks/useActiveUser"
|
||||
|
||||
@@ -30,9 +30,11 @@ export function StudyPlanCard() {
|
||||
}
|
||||
// Mock fallback if celery hasn't seeded yet
|
||||
setTasks([
|
||||
{ type: "Revision", description: "Revise Thermodynamics", duration_minutes: 15, status: "Pending" },
|
||||
{ type: "Mistake_Review", description: "Daily Mistake Review Session", duration_minutes: 10, status: "Pending" },
|
||||
{ type: "DPS", description: "Attempt Thermodynamics Practice Sheet", duration_minutes: 20, status: "Pending" }
|
||||
{ type: "DPS", description: "DPS — Electrostatics + Kinematics", duration_minutes: 20, status: "Done" },
|
||||
{ type: "Mistake_Review", description: "Mistake Review — Thermodynamics", duration_minutes: 10, status: "Done" },
|
||||
{ type: "Micro_test", description: "Micro-test — GOC (General Organic Chemistry)", duration_minutes: 5, status: "Pending" },
|
||||
{ type: "Test", description: "Weekly Test — Full Syllabus", duration_minutes: 180, status: "Pending" },
|
||||
{ type: "Revision", description: "Revise — Circles + Straight Lines", duration_minutes: 15, status: "Pending" }
|
||||
])
|
||||
} finally {
|
||||
setLoading(false)
|
||||
@@ -49,91 +51,112 @@ export function StudyPlanCard() {
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="border-border shadow-sm h-full flex flex-col">
|
||||
<CardHeader className="pb-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-xl flex items-center gap-2">
|
||||
<CalendarClock className="text-primary" size={24} />
|
||||
Today's Plan
|
||||
</CardTitle>
|
||||
<Badge variant="outline" className="bg-primary/5 text-primary border-primary/20">
|
||||
{tasks.reduce((acc, curr) => acc + curr.duration_minutes, 0)} min total
|
||||
</Badge>
|
||||
</div>
|
||||
<CardDescription>AI-generated curriculum targeting your weak spots.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex-1 flex flex-col">
|
||||
{loading ? (
|
||||
<div className="flex-1 flex items-center justify-center p-8">
|
||||
<RefreshCw className="animate-spin text-muted-foreground mr-3" /> Loading schedule...
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{tasks.map((task, idx) => {
|
||||
const isDone = task.status === "Done"
|
||||
const isSkipped = task.status === "Skipped"
|
||||
const isPending = task.status === "Pending"
|
||||
const completedTasks = tasks.filter(t => t.status === "Done").length
|
||||
const totalTasks = tasks.length
|
||||
const progressPercent = totalTasks === 0 ? 0 : Math.round((completedTasks / totalTasks) * 100)
|
||||
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className={`flex items-center p-4 rounded-xl border transition-all duration-300 ${
|
||||
isDone ? "bg-green-500/5 border-green-500/20" :
|
||||
isSkipped ? "bg-secondary/50 border-transparent opacity-60" :
|
||||
"bg-background border-border hover:border-primary/50"
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-col flex-1 mr-4">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Badge variant="secondary" className="text-[10px] uppercase tracking-wider">{task.type}</Badge>
|
||||
<span className="text-xs font-semibold text-muted-foreground flex items-center gap-1">
|
||||
<Clock size={12}/> {task.duration_minutes} min
|
||||
</span>
|
||||
</div>
|
||||
<p className={`font-semibold text-sm transition-all duration-300 ${
|
||||
isDone || isSkipped ? "line-through text-muted-foreground" : "text-foreground"
|
||||
}`}>
|
||||
{task.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="flex items-center gap-2">
|
||||
{isPending && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => toggleTask(idx, "Skipped")}
|
||||
className="p-2 rounded-full hover:bg-secondary text-muted-foreground hover:text-foreground transition-colors"
|
||||
title="Skip Task"
|
||||
>
|
||||
<XCircle size={20} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => toggleTask(idx, "Done")}
|
||||
className="p-2 rounded-full hover:bg-green-500/10 text-muted-foreground hover:text-green-500 transition-colors"
|
||||
title="Complete Task"
|
||||
>
|
||||
<Circle size={20} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{(isDone || isSkipped) && (
|
||||
<button
|
||||
onClick={() => toggleTask(idx, "Pending")}
|
||||
className={`flex items-center gap-1 text-xs font-bold px-3 py-1.5 rounded-full ${isDone ? "bg-green-500 text-white" : "bg-secondary text-muted-foreground"}`}
|
||||
>
|
||||
{isDone ? <CheckCircle2 size={14}/> : <PlayCircle size={14}/>}
|
||||
{isDone ? "Completed" : "Resume"}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
const getTagStyle = (type: string) => {
|
||||
switch(type) {
|
||||
case "Revision": return "bg-yellow-500/10 text-yellow-500"
|
||||
case "Mistake_Review": return "bg-red-500/10 text-red-500"
|
||||
case "DPS": return "bg-[#00F0FF]/10 text-[#00F0FF]"
|
||||
case "Micro_test": return "bg-green-500/10 text-green-500"
|
||||
case "Test": return "bg-purple-500/10 text-purple-500"
|
||||
default: return "bg-secondary text-muted-foreground"
|
||||
}
|
||||
}
|
||||
|
||||
const getDisplayType = (type: string) => {
|
||||
switch(type) {
|
||||
case "Revision": return "Revision"
|
||||
case "Mistake_Review": return "Review"
|
||||
case "DPS": return "Practice"
|
||||
case "Micro_test": return "Micro-test"
|
||||
case "Test": return "Test"
|
||||
default: return "Task"
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex justify-between items-center pb-3">
|
||||
<h2 className="text-base font-bold text-primary flex items-center gap-2">
|
||||
📅 Today's Study Plan
|
||||
</h2>
|
||||
<Link href="/dashboard/ai-coach/study-plan" className="text-xs text-[#00F0FF] font-semibold hover:underline transition-colors">Expand View ↗</Link>
|
||||
</div>
|
||||
|
||||
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] flex-1 overflow-hidden group hover:border-[#00F0FF]/30 transition-colors">
|
||||
<div className="px-4 py-3.5 flex justify-between items-center border-b border-border">
|
||||
<div className="text-[13px] font-bold text-muted-foreground">
|
||||
{new Date().toLocaleDateString('en-US', { weekday: 'long', day: 'numeric', month: 'short' })}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="text-[12px] text-[#00F0FF] font-bold">{progressPercent}% Completed</div>
|
||||
</div>
|
||||
|
||||
{/* Progress bar */}
|
||||
<div className="h-[3px] bg-[#00F0FF]/10 w-full">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-[#00F0FF] to-teal-400 rounded-r-[2px] transition-all duration-500"
|
||||
style={{ width: `${progressPercent}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<CardContent className="p-0 flex-1 flex flex-col">
|
||||
{loading ? (
|
||||
<div className="flex-1 flex items-center justify-center p-8 min-h-[200px]">
|
||||
<RefreshCw className="animate-spin text-muted-foreground mr-3" /> Loading schedule...
|
||||
</div>
|
||||
) : (
|
||||
<div className="py-1">
|
||||
{tasks.map((task, idx) => {
|
||||
const isDone = task.status === "Done"
|
||||
const isCurrent = idx === completedTasks && !isDone // First pending task is current
|
||||
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
onClick={() => toggleTask(idx, isDone ? "Pending" : "Done")}
|
||||
className={`flex items-center gap-3 px-4 py-2.5 transition-colors cursor-pointer border-l-[3px] ${
|
||||
isDone ? "opacity-60 border-green-500 hover:bg-white/5" :
|
||||
isCurrent ? "border-[#00F0FF] bg-[#00F0FF]/5 hover:bg-[#00F0FF]/10" :
|
||||
"border-transparent hover:bg-white/5"
|
||||
}`}
|
||||
>
|
||||
{/* Custom Checkbox */}
|
||||
<div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center shrink-0 transition-all ${
|
||||
isDone ? "bg-green-500 border-green-500" :
|
||||
isCurrent ? "border-[#00F0FF] shadow-[0_0_0_0_rgba(0,240,255,0.3)] animate-[pulse-border_2s_infinite]" :
|
||||
"border-muted-foreground"
|
||||
}`}>
|
||||
{isDone && <Check size={12} className="stroke-white stroke-[3px]" />}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-[13px] font-bold text-primary truncate">{task.description}</div>
|
||||
<div className="text-[11px] text-muted-foreground mt-0.5">{task.type.replace('_', ' ')} • Active Session</div>
|
||||
</div>
|
||||
|
||||
<div className={`text-[10px] font-bold px-2 py-0.5 rounded-md shrink-0 ${getTagStyle(task.type)}`}>
|
||||
{getDisplayType(task.type)}
|
||||
</div>
|
||||
|
||||
<div className="text-[12px] font-bold text-muted-foreground bg-white/5 px-2 py-0.5 rounded-md shrink-0">
|
||||
{task.duration_minutes}m
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<style dangerouslySetInnerHTML={{__html: `
|
||||
@keyframes pulse-border {
|
||||
0%, 100% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.3); }
|
||||
50% { box-shadow: 0 0 0 6px rgba(0, 240, 255, 0); }
|
||||
}
|
||||
`}} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user