naman_panwar_gnpl/pragativeer-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: complete comprehensive zero-state metrics across all dashboard pages for new accounts

Browse Source
This commit is contained in:
ectasy663
2026-09-13 22:17:40 +05:30
parent d9bd142e6a
commit afab06d33c
22 changed files with 771 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/app/dashboard/ai-coach/time-optimization/page.tsx
View File

@@ -4,8 +4,9 @@ import { StudyTimeOptimizationCard } from "@/components/AI/StudyTimeOptimization
import { Clock, Zap, Moon, Sun, AlertCircle, ArrowRight, BarChart2 } from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"
import Link from "next/link"
import { useActiveUser, isDemoUser } from "@/hooks/useActiveUser"
const INSIGHTS = [
const DEMO_INSIGHTS = [
{
icon: <Sun size={16} className="text-yellow-400" />,
title: "Peak Cognitive Window",
@@ -26,7 +27,7 @@ const INSIGHTS = [
},
]
const HOURLY_EFFICIENCY = [
const DEMO_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" },
@@ -37,7 +38,36 @@ const HOURLY_EFFICIENCY = [
{ slot: "11 PM+", pct: 32, label: "Avoid" },
]
const ZERO_HOURLY_EFFICIENCY = [
{ slot: "6–9 AM", pct: 0, label: "Pending" },
{ slot: "9–12 PM", pct: 0, label: "Pending" },
{ slot: "12–2 PM", pct: 0, label: "Pending" },
{ slot: "2–5 PM", pct: 0, label: "Calibrating", highlight: false },
{ slot: "5–7 PM", pct: 0, label: "Pending" },
{ slot: "7–9 PM", pct: 0, label: "Pending" },
{ slot: "9–11 PM", pct: 0, label: "Pending" },
{ slot: "11 PM+", pct: 0, label: "Pending" },
]
export default function TimeOptimizationPage() {
const { userId } = useActiveUser()
const isDemo = isDemoUser(userId)
const hourlySlots = isDemo ? DEMO_HOURLY_EFFICIENCY : ZERO_HOURLY_EFFICIENCY
const insights = isDemo ? DEMO_INSIGHTS : [
{
icon: <Sun size={16} className="text-yellow-400" />,
title: "Peak Window Calibrating",
desc: "Complete 3 test sessions at different times of day to establish your circadian peak focus hours.",
color: "border-yellow-400/20 bg-yellow-400/5",
},
{
icon: <Moon size={16} className="text-indigo-400" />,
title: "Consistency Booster",
desc: "Start with a 30-minute daily review routine to jumpstart your spaced repetition learning schedule.",
color: "border-indigo-400/20 bg-indigo-400/5",
},
]
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 */}
@@ -63,10 +93,10 @@ export default function TimeOptimizationPage() {
{/* 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" /> },
{ label: "Peak Efficiency", value: isDemo ? "95%" : "--", sub: isDemo ? "2–5 PM window" : "Calibrating", color: "border-yellow-400/20 bg-yellow-400/5", icon: <Sun size={18} className="text-yellow-400" /> },
{ label: "Study Hrs Today", value: isDemo ? "3.8 h" : "0.0 h", sub: "Target: 6 h", color: "border-[#00F0FF]/20 bg-[#00F0FF]/5", icon: <Clock size={18} className="text-[#00F0FF]" /> },
{ label: "Morning Block", value: isDemo ? "60%" : "0%", 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: isDemo ? "74%" : "0%", 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">
@@ -96,12 +126,12 @@ export default function TimeOptimizationPage() {
<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 => (
{hourlySlots.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"}`}
className={`h-full rounded-full ${slot.pct >= 80 ? (slot.highlight ? "bg-yellow-400" : "bg-green-400") : slot.pct >= 60 ? "bg-[#00F0FF]" : isDemo ? "bg-red-400" : "bg-white/10"}`}
style={{ width: `${slot.pct}%` }}
/>
</div>
@@ -115,7 +145,7 @@ export default function TimeOptimizationPage() {
{/* AI Insights */}
<div className="space-y-3">
{INSIGHTS.map(insight => (
{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>