365 lines
17 KiB
TypeScript
365 lines
17 KiB
TypeScript
"use client"
|
|
|
|
import { ReactNode, useState, useEffect, useRef } from "react"
|
|
import { BookOpen, LayoutDashboard, Settings, FileText, Activity, LineChart, Trophy, User, ChevronUp, Lock, ShieldAlert, Flame, Target, Gauge, Zap, Calendar, Clock, BrainCircuit, BarChart3, School, CheckSquare } from "lucide-react"
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
import { LanguageToggle } from "@/components/LanguageToggle"
|
|
import { Logo } from "@/components/Logo"
|
|
import { ThemeToggle } from "@/components/ThemeToggle"
|
|
import { TierBadge } from "@/components/TierBadge"
|
|
import { StreakCounter } from "@/components/StreakCounter"
|
|
import { AITutorChat } from "@/components/AI/AITutorChat"
|
|
import { useActiveUser, DEMO_USERS } from "@/hooks/useActiveUser"
|
|
import { StreakOnboardingModal } from "@/components/Dashboard/StreakOnboardingModal"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import MaintenanceScreen from "@/components/MaintenanceScreen"
|
|
|
|
export default function DashboardLayout({ children }: { children: ReactNode }) {
|
|
const pathname = usePathname()
|
|
const [dropdownOpen, setDropdownOpen] = useState(false)
|
|
const dropdownRef = useRef<HTMLDivElement>(null)
|
|
|
|
const { userId, user, globalSettings, switchUser, hasAccessTo, loading } = useActiveUser();
|
|
const [maintenance, setMaintenance] = useState(false);
|
|
const [checkingMaintenance, setCheckingMaintenance] = useState(true);
|
|
|
|
useEffect(() => {
|
|
if (globalSettings !== undefined && globalSettings !== null) {
|
|
if (globalSettings.maintenance_mode) {
|
|
setMaintenance(true);
|
|
} else {
|
|
setMaintenance(false);
|
|
}
|
|
setCheckingMaintenance(false);
|
|
} else if (globalSettings === null && !loading) {
|
|
// If we finished loading but settings failed to load
|
|
setCheckingMaintenance(false);
|
|
}
|
|
}, [globalSettings, loading]);
|
|
|
|
// Close dropdown when clicking outside
|
|
useEffect(() => {
|
|
function handleClickOutside(event: MouseEvent) {
|
|
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
|
setDropdownOpen(false)
|
|
}
|
|
}
|
|
document.addEventListener("mousedown", handleClickOutside)
|
|
return () => document.removeEventListener("mousedown", handleClickOutside)
|
|
}, [])
|
|
|
|
const userInitials = user ? user.name.split(" ").filter(n => /^[a-zA-Z]/.test(n)).slice(0, 2).map(n => n[0]).join("").toUpperCase() : "DS"
|
|
const targetExamLabel = user?.target_exam === "JEE_Main" ? "JEE Main" : user?.target_exam === "JEE_Advanced" ? "JEE Advanced" : user?.target_exam === "NEET" ? "NEET" : "NEET/JEE"
|
|
|
|
// Trial logic removed as requested
|
|
|
|
if (maintenance) {
|
|
return <MaintenanceScreen />;
|
|
}
|
|
|
|
if (loading || !user) {
|
|
return (
|
|
<div className="h-screen w-screen flex flex-col items-center justify-center bg-background">
|
|
<div className="animate-pulse flex flex-col items-center gap-4">
|
|
<Logo height={56} className="mb-4" />
|
|
<div className="h-6 w-6 border-4 border-[#00F0FF] border-t-transparent rounded-full animate-spin"></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex h-screen bg-background overflow-hidden text-foreground selection:bg-primary/20">
|
|
{/* Sidebar */}
|
|
<aside className="w-64 border-r border-border bg-background flex flex-col hidden md:flex">
|
|
<div className="px-6 py-5">
|
|
<Logo href="/dashboard" className="w-full" imageClassName="object-contain object-left scale-110 origin-left" height={56} />
|
|
</div>
|
|
<nav className="flex-1 px-4 space-y-1.5 mt-4 overflow-y-auto">
|
|
{/* <div className="pt-2 pb-2">
|
|
<p className="px-3 text-xs font-bold uppercase tracking-widest text-muted-foreground flex items-center gap-2">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-white"></span> Free Tier
|
|
</p>
|
|
</div> */}
|
|
|
|
<div className="pt-3 pb-1">
|
|
<p className="px-3 text-[10px] font-black uppercase tracking-widest text-muted-foreground/60 flex items-center gap-2">
|
|
<span className="flex-1 h-px bg-border/60"></span>
|
|
<span className="flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-yellow-500 shadow-[0_0_8px_-2px_rgba(234,179,8,0.8)]"></span>Pro Tier</span>
|
|
<span className="flex-1 h-px bg-border/60"></span>
|
|
</p>
|
|
</div>
|
|
|
|
<NavItem href="/dashboard" icon={<LayoutDashboard size={17} />} label="Overview" active={pathname === "/dashboard"} />
|
|
{/* <NavItem href="/dashboard/dpp" icon={<FileText size={17} />} label="Target DPPs" active={pathname.startsWith("/dashboard/dpp")} /> */}
|
|
<NavItem href="/dashboard/leaderboard" icon={<Trophy size={17} />} label="Leaderboard" active={pathname.startsWith("/dashboard/leaderboard")} />
|
|
<NavItem
|
|
href="/dashboard/progress"
|
|
icon={<BarChart3 size={17} />}
|
|
label="Syllabus Tracker"
|
|
active={pathname.startsWith("/dashboard/progress")}
|
|
isLocked={!hasAccessTo("chapter-wise-progress-tracking")}
|
|
/>
|
|
<NavItem
|
|
href="/dashboard/cbt"
|
|
icon={<CheckSquare size={17} />}
|
|
label="Mock Tests (CBT)"
|
|
active={pathname.startsWith("/dashboard/cbt")}
|
|
isLocked={!hasAccessTo("weekly-test-series")}
|
|
/>
|
|
<NavItem
|
|
href="/dashboard/materials"
|
|
icon={<BookOpen size={17} />}
|
|
label="Quick Notes"
|
|
active={pathname.startsWith("/dashboard/materials")}
|
|
isLocked={!hasAccessTo("detailed-performance-analytics")}
|
|
/>
|
|
<NavItem
|
|
href="/dashboard/analytics"
|
|
icon={<LineChart size={17} />}
|
|
label="Performance Analytics"
|
|
active={pathname.startsWith("/dashboard/analytics")}
|
|
isLocked={!hasAccessTo("detailed-performance-analytics")}
|
|
/>
|
|
<NavItem
|
|
href="/dashboard/community"
|
|
icon={<School size={17} />}
|
|
label="Doubt Forum"
|
|
active={pathname.startsWith("/dashboard/community")}
|
|
isLocked={!hasAccessTo("doubt-resolution-community")}
|
|
/>
|
|
|
|
<div className="pt-4 pb-1">
|
|
<p className="px-3 text-[10px] font-black uppercase tracking-widest text-muted-foreground/60 flex items-center gap-2">
|
|
<span className="flex-1 h-px bg-border/60"></span>
|
|
<span className="flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-[#00F0FF] shadow-[0_0_8px_-2px_#00F0FF]"></span>AI Coach</span>
|
|
<span className="flex-1 h-px bg-border/60"></span>
|
|
</p>
|
|
</div>
|
|
<NavItem
|
|
href="/dashboard/ai-coach/tutor"
|
|
icon={<BrainCircuitIcon />}
|
|
label="AI Tutor"
|
|
active={pathname.startsWith("/dashboard/ai-coach/tutor") || pathname === "/dashboard/ai-coach"}
|
|
isLocked={!hasAccessTo("ai-tutor-chat")}
|
|
/>
|
|
<NavItem
|
|
href="/dashboard/ai-coach/cbt-dpp"
|
|
icon={<Zap size={17} />}
|
|
label="PrepPilot AI"
|
|
active={pathname.startsWith("/dashboard/ai-coach/cbt-dpp")}
|
|
isLocked={!hasAccessTo("ai-tutor-chat")}
|
|
/>
|
|
<NavItem
|
|
href="/dashboard/ai-coach/readiness"
|
|
icon={<Gauge size={17} />}
|
|
label="Exam Readiness"
|
|
active={pathname.startsWith("/dashboard/ai-coach/readiness")}
|
|
isLocked={!hasAccessTo("detailed-performance-analytics")}
|
|
/>
|
|
<NavItem
|
|
href="/dashboard/ai-coach/college-predictor"
|
|
icon={<School size={17} />}
|
|
label="College Predictor"
|
|
active={pathname.startsWith("/dashboard/ai-coach/college-predictor")}
|
|
isLocked={!hasAccessTo("college-predictor")}
|
|
/>
|
|
<NavItem
|
|
href="/dashboard/ai-coach/strategy"
|
|
icon={<Target size={17} />}
|
|
label="Exam Strategy"
|
|
active={pathname.startsWith("/dashboard/ai-coach/strategy")}
|
|
isLocked={!hasAccessTo("exam-day-strategy")}
|
|
/>
|
|
<NavItem
|
|
href="/dashboard/ai-coach/study-plan"
|
|
icon={<Calendar size={17} />}
|
|
label="AI Study Plan"
|
|
active={pathname.startsWith("/dashboard/ai-coach/study-plan")}
|
|
isLocked={!hasAccessTo("personalized-study-plan")}
|
|
/>
|
|
<NavItem
|
|
href="/dashboard/ai-coach/time-optimization"
|
|
icon={<Clock size={17} />}
|
|
label="Time Optimization"
|
|
active={pathname.startsWith("/dashboard/ai-coach/time-optimization")}
|
|
isLocked={!hasAccessTo("personalized-study-plan")}
|
|
/>
|
|
<NavItem
|
|
href="/dashboard/ai-coach/heatmap"
|
|
icon={<Flame size={17} />}
|
|
label="Mistake Heatmap"
|
|
active={pathname.startsWith("/dashboard/ai-coach/heatmap")}
|
|
isLocked={!hasAccessTo("ai-mistake-tracking")}
|
|
/>
|
|
<NavItem
|
|
href="/dashboard/ai-coach/weekly-progress"
|
|
icon={<Activity size={17} />}
|
|
label="Weekly Progress"
|
|
active={pathname.startsWith("/dashboard/ai-coach/weekly-progress")}
|
|
isLocked={!hasAccessTo("detailed-performance-analytics")}
|
|
/>
|
|
<NavItem
|
|
href="/dashboard/ai-coach/mistakes"
|
|
icon={<BrainCircuit size={17} />}
|
|
label="Mistake Analyzer"
|
|
active={pathname.startsWith("/dashboard/ai-coach/mistakes")}
|
|
isLocked={!hasAccessTo("ai-mistake-tracking")}
|
|
/>
|
|
</nav>
|
|
|
|
<div className="p-4 border-t border-border space-y-2 bg-secondary/30">
|
|
<Link
|
|
href="/dashboard/settings"
|
|
className={`flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-300 border ${
|
|
pathname.startsWith("/dashboard/settings")
|
|
? "bg-background text-foreground font-medium border-border shadow-sm"
|
|
: "text-muted-foreground hover:bg-background/80 hover:text-foreground border-transparent hover:border-border/50"
|
|
}`}
|
|
>
|
|
<Settings size={18} />
|
|
<span className="text-sm">Settings</span>
|
|
</Link>
|
|
|
|
{/* Functional User Dropdown */}
|
|
<div className="relative mt-2" ref={dropdownRef}>
|
|
{dropdownOpen && user && (
|
|
<div className="absolute bottom-full left-0 w-full mb-2 bg-background border border-border rounded-xl shadow-lg shadow-black/10 overflow-hidden animate-in fade-in slide-in-from-bottom-2 duration-200 z-50">
|
|
<div className="px-4 py-3 border-b border-border">
|
|
<p className="text-sm font-bold text-foreground truncate">{user.name}</p>
|
|
<p className="text-xs text-muted-foreground truncate">{user.email || user.phone}</p>
|
|
</div>
|
|
<div className="p-1">
|
|
<Link href="/dashboard/settings" className="flex items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-secondary rounded-lg transition-colors">
|
|
<User size={16} /> Edit Profile
|
|
</Link>
|
|
<button
|
|
onClick={() => switchUser(DEMO_USERS.AI_COACH.id)}
|
|
className="w-full text-left flex items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-secondary rounded-lg transition-colors"
|
|
>
|
|
Reset Demo
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<button
|
|
onClick={() => setDropdownOpen(!dropdownOpen)}
|
|
className="w-full flex items-center justify-between p-2 rounded-xl bg-background/50 hover:bg-background transition-colors border border-border/50 shadow-sm mt-3"
|
|
>
|
|
<div className="flex items-center gap-3 text-left">
|
|
<div className="h-8 w-8 rounded-full bg-[#00F0FF]/25 text-[#00F0FF] flex items-center justify-center font-bold text-sm shadow-[0_0_10px_-2px_#00F0FF] shrink-0">
|
|
{userInitials}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-bold leading-none truncate">{user ? user.name.split(" ")[0] : "Loading..."}</p>
|
|
<div className="mt-1"><TierBadge tier={user ? (user.tier === "Al_Coach" ? "AI Coach" : user.tier) : "Free"} /></div>
|
|
</div>
|
|
</div>
|
|
<ChevronUp size={16} className={`text-muted-foreground transition-transform shrink-0 ${dropdownOpen ? "rotate-180" : ""}`} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Main Content Area */}
|
|
<div className="flex-1 flex flex-col h-screen overflow-hidden">
|
|
{/* Top Header Static Bar */}
|
|
<header className="h-16 border-b border-border bg-background/95 backdrop-blur-md flex items-center justify-between px-8 shrink-0 z-40">
|
|
<div className="flex items-center gap-4">
|
|
<h2 className="font-bold text-lg hidden sm:block">
|
|
{user ? `Welcome back, ${user.name.split(" ")[0]}!` : "Welcome back!"}
|
|
</h2>
|
|
{user && (
|
|
<Badge variant="outline" className="bg-[#00F0FF]/10 text-[#00F0FF] border-[#00F0FF]/20 font-bold tracking-wide uppercase px-2.5 py-0.5 animate-pulse">
|
|
{targetExamLabel} Target
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
{/* Streak count moved to top header */}
|
|
{user && (
|
|
<Link href="/dashboard/streaks" className="hover:opacity-85 transition-opacity">
|
|
<StreakCounter streak={user.streak_count} />
|
|
</Link>
|
|
)}
|
|
|
|
{/* Profile switcher dropdown for testing */}
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs text-muted-foreground font-bold hidden lg:inline">Demo Switcher:</span>
|
|
<select
|
|
value={userId}
|
|
onChange={(e) => switchUser(e.target.value)}
|
|
className="bg-secondary border border-border text-foreground px-2.5 py-1.5 rounded-xl text-xs font-bold focus:ring-2 focus:ring-[#00F0FF] outline-none cursor-pointer hover:bg-secondary/80 transition-colors"
|
|
>
|
|
<option value={DEMO_USERS.NEHA.id}>Neha Verma (AI Coach)</option>
|
|
<option value={DEMO_USERS.AI_COACH.id}>Rahul (AI Coach)</option>
|
|
<option value={DEMO_USERS.PRO.id}>Priya (Pro Plan)</option>
|
|
{/* <option value={DEMO_USERS.FREE.id}>Amit (Free Plan)</option> */}
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 border-l border-border pl-4">
|
|
{/* <LanguageToggle /> */}
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Scrollable page body */}
|
|
<main className="flex-1 overflow-y-auto relative bg-background/50">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
|
|
{/* Global AI Tutor Chat */}
|
|
{hasAccessTo("ai-tutor-chat") && <AITutorChat />}
|
|
|
|
{/* Onboarding Motivation Popup */}
|
|
<StreakOnboardingModal />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function NavItem({ href, icon, label, active, isLocked }: { href: string, icon: React.ReactNode, label: string, active?: boolean, isLocked?: boolean }) {
|
|
return (
|
|
<Link
|
|
href={isLocked ? "#" : href}
|
|
className={`group flex items-center justify-between px-3 py-2 rounded-xl transition-all duration-200 ${
|
|
active
|
|
? "bg-[#00F0FF]/10 text-[#00F0FF] font-semibold border border-[#00F0FF]/20 shadow-[0_0_12px_-4px_rgba(0,240,255,0.3)]"
|
|
: isLocked
|
|
? "text-muted-foreground/40 cursor-not-allowed border border-transparent"
|
|
: "text-muted-foreground/80 hover:bg-secondary/60 hover:text-foreground border border-transparent hover:border-border/40"
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-2.5">
|
|
<span className={`transition-all duration-200 ${
|
|
active ? "text-[#00F0FF]" : isLocked ? "text-muted-foreground/30" : "text-muted-foreground/60 group-hover:text-foreground/80"
|
|
}`}>
|
|
{icon}
|
|
</span>
|
|
<span className="text-[13px] font-medium tracking-[-0.01em]">{label}</span>
|
|
</div>
|
|
{isLocked && <Lock size={11} className="text-muted-foreground/30 shrink-0" />}
|
|
{active && <span className="w-1 h-4 rounded-full bg-[#00F0FF] shrink-0 shadow-[0_0_6px_rgba(0,240,255,0.8)]"></span>}
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
function BrainCircuitIcon() {
|
|
return (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-brain-circuit">
|
|
<path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>
|
|
<path d="M18 8a3 3 0 0 0-3-3h-1"/>
|
|
<path d="M9 5H8a3 3 0 0 0-3 3v1"/>
|
|
<path d="M5 14v1a3 3 0 0 0 3 3h1"/>
|
|
<path d="M14 18h1a3 3 0 0 0 3-3v-1"/>
|
|
<path d="M12 18v2"/>
|
|
<path d="M12 4V2"/>
|
|
</svg>
|
|
)
|
|
}
|