feat: setup admin JSON generation and pdf viewer for free plan DPPs
This commit is contained in:
@@ -1,14 +1,16 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
|
||||
import { GraduationCap, MapPin, RefreshCw } from "lucide-react"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { RefreshCw } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
|
||||
import { useActiveUser } from "@/hooks/useActiveUser"
|
||||
|
||||
export function CollegePredictorCard() {
|
||||
const [data, setData] = useState<any>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [activeTab, setActiveTab] = useState("Target")
|
||||
const { userId, loading: userLoading } = useActiveUser();
|
||||
|
||||
useEffect(() => {
|
||||
@@ -54,34 +56,65 @@ export function CollegePredictorCard() {
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="border-border shadow-sm h-full flex flex-col bg-gradient-to-br from-background to-secondary/30 relative overflow-hidden">
|
||||
<div className="absolute -right-12 -top-12 opacity-5 pointer-events-none">
|
||||
<GraduationCap size={150} />
|
||||
<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">
|
||||
🎓 College Predictor
|
||||
</h2>
|
||||
<Link href="/dashboard/ai-coach/college-predictor" className="text-xs text-[#00F0FF] font-semibold hover:underline transition-colors">Expand View ↗</Link>
|
||||
</div>
|
||||
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-xl flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin className="text-primary" size={24} />
|
||||
Admissions Radar
|
||||
|
||||
<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">
|
||||
<CardContent className="p-4 flex flex-col h-full">
|
||||
<div className="flex gap-1.5 mb-3.5">
|
||||
{["Reach", "Target", "Safety"].map(tab => (
|
||||
<div
|
||||
key={tab}
|
||||
onClick={() => setActiveTab(tab)}
|
||||
className={`flex-1 p-2 text-center text-[11px] font-semibold rounded-md cursor-pointer transition-colors border ${
|
||||
activeTab === tab
|
||||
? "bg-[#00F0FF]/10 border-[#00F0FF]/20 text-[#00F0FF]"
|
||||
: "bg-white/5 border-transparent text-muted-foreground hover:bg-white/10"
|
||||
}`}
|
||||
>
|
||||
{tab}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<span className={`px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest border ${getCategoryColor(category)}`}>
|
||||
{category}
|
||||
</span>
|
||||
</CardTitle>
|
||||
<CardDescription>AI-projected admission trajectory.</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="flex-1 flex flex-col justify-center">
|
||||
<div className="p-5 bg-background rounded-xl border border-border shadow-sm mt-4">
|
||||
<p className="font-semibold text-lg leading-snug">
|
||||
"{prediction}"
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-4 font-medium flex items-center gap-1 opacity-70">
|
||||
<RefreshCw size={10} /> Prediction updates dynamically after every test.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="flex flex-col gap-2 flex-1">
|
||||
<div className="flex items-center gap-3 p-2.5 rounded-md bg-white/5 border border-border hover:bg-white/10 transition-colors">
|
||||
<div className="w-7 h-7 rounded-full flex items-center justify-center text-[11px] font-bold shrink-0 bg-[#00F0FF]/10 text-[#00F0FF]">
|
||||
#1
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-[13px] font-bold text-primary truncate">NIT Trichy</div>
|
||||
<div className="text-[11px] text-muted-foreground truncate">Computer Science</div>
|
||||
</div>
|
||||
<div className="text-[12px] font-bold px-2 py-0.5 rounded-md shrink-0 text-green-500 bg-green-500/10">
|
||||
85%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 p-2.5 rounded-md bg-white/5 border border-border hover:bg-white/10 transition-colors">
|
||||
<div className="w-7 h-7 rounded-full flex items-center justify-center text-[11px] font-bold shrink-0 bg-[#00F0FF]/10 text-[#00F0FF]">
|
||||
#2
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-[13px] font-bold text-primary truncate">NIT Surathkal</div>
|
||||
<div className="text-[11px] text-muted-foreground truncate">Information Tech</div>
|
||||
</div>
|
||||
<div className="text-[12px] font-bold px-2 py-0.5 rounded-md shrink-0 text-yellow-500 bg-yellow-500/10">
|
||||
72%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 p-2.5 bg-yellow-500/10 border border-yellow-500/20 rounded-md text-xs text-yellow-500 font-medium text-center">
|
||||
Just 15 more marks in Maths can upgrade you to IIT Roorkee!
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user