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

fix: eliminate chart, bar, and button layout transitions across all dashboard components

Browse Source
This commit is contained in:
ectasy663
2026-10-23 18:41:54 +05:30
parent af75d7d4f4
commit 4ae7c8fb65
13 changed files with 19 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/admin/students/page.tsx
View File

@@ -263,7 +263,7 @@ export default function StudentsPage() {
</div>
<div className="w-full bg-secondary rounded-full h-2 overflow-hidden">
<div
className="bg-primary h-2 rounded-full transition-all duration-1000 ease-in-out"
className="bg-primary h-2 rounded-full"
style={{ width: `${uploadProgress}%` }}
></div>
</div>

2
src/app/dashboard/ai-coach/page.tsx
View File

@@ -119,7 +119,7 @@ export default function AICoachDashboard() {
{ label: "Mistakes Mastered", value: mistakesMastered, color: "text-green-400", bg: "bg-green-400/5", border: "border-green-400/20", icon: <CheckCircle2 size={32} /> },
{ label: "AI Sessions", value: aiSessions, color: "text-purple-400", bg: "bg-purple-400/5", border: "border-purple-400/20", icon: <Bot size={32} /> },
].map((stat) => (
<Card key={stat.label} className={`border ${stat.border} ${stat.bg} backdrop-blur-sm transition-all duration-300 transform hover:-translate-y-1 rounded-2xl`}>
<Card key={stat.label} className={`border ${stat.border} ${stat.bg} backdrop-blur-sm rounded-2xl`}>
<CardContent className="p-6 flex flex-col items-center justify-center text-center">
<div className="text-3xl mb-2 filter drop-shadow-md">{stat.icon}</div>
<div className={`text-4xl font-black ${stat.color} leading-none tracking-tight mb-2 filter drop-shadow-sm`}>{stat.value}</div>

4
src/app/dashboard/ai-coach/readiness/page.tsx
View File

@@ -108,7 +108,7 @@ export default function ReadinessPage() {
<span className={`text-xs font-bold ${sub.statusColor}`}>{sub.score}% · {sub.status}</span>
</div>
<div className="h-2.5 w-full bg-secondary rounded-full overflow-hidden">
<div className={`h-full ${sub.color} rounded-full transition-all duration-700`} style={{ width: `${sub.score}%` }} />
<div className={`h-full ${sub.color} rounded-full`} style={{ width: `${sub.score}%` }} />
</div>
</div>
))}
@@ -126,7 +126,7 @@ export default function ReadinessPage() {
<div key={d.week} className="flex flex-col items-center gap-1 flex-1">
<span className="text-xs font-black text-muted-foreground">{d.score}</span>
<div
className={`w-full rounded-t-md transition-all duration-700 ${
className={`w-full rounded-t-md ${
!isDemo
? "bg-white/5 border border-white/10"
: i === scoreHistory.length - 1

4
src/app/dashboard/ai-coach/study-plan/page.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { StudyPlanCard } from "@/components/AI/StudyPlanCard"
import { WeeklyProgressReport } from "@/components/AI/WeeklyProgressReport"
@@ -99,7 +99,7 @@ export default function StudyPlanPage() {
</div>
<div className="h-2.5 w-full bg-secondary rounded-full overflow-hidden">
<div
className={`h-full rounded-full transition-all duration-700 ${sub.covered >= 70 ? "bg-green-400" : sub.covered >= 55 ? "bg-amber-400" : "bg-red-400"}`}
className={`h-full rounded-full ${sub.covered >= 70 ? "bg-green-400" : sub.covered >= 55 ? "bg-amber-400" : "bg-red-400"}`}
style={{ width: `${sub.covered}%` }}
/>
</div>

2
src/app/dashboard/ai-coach/weekly-progress/page.tsx
View File

@@ -108,7 +108,7 @@ export default function WeeklyProgressPage() {
</div>
<div className="h-2 w-full bg-secondary rounded-full overflow-hidden">
<div
className={`h-full ${item.color} rounded-full transition-all duration-500`}
className={`h-full ${item.color} rounded-full`}
style={{ width: `${item.percentage}%` }}
/>
</div>

2
src/app/dashboard/page.tsx
View File

@@ -254,7 +254,7 @@ export default function DashboardPage() {
<div className="space-y-4">
{dpps.length > 0 ? (
dpps.map((dpp) => (
<Card key={dpp.id} className="hover:border-primary/30 hover:shadow-md cursor-pointer transition-all duration-300 group">
<Card key={dpp.id} className="hover:border-primary/30 cursor-pointer group">
<CardContent className="p-5 flex items-center justify-between">
<div className="flex gap-4 items-center">
<div className="p-3 bg-secondary rounded-xl text-foreground">

2
src/components/AI/MistakeHeatmap.tsx
View File

@@ -71,7 +71,7 @@ export function MistakeHeatmap() {
{row.attempts.map((errRate, i) => (
<div
key={i}
className={`h-8 sm:h-9 rounded-sm sm:rounded-md border transition-all duration-300 group-hover:scale-105 flex items-center justify-center cursor-help ${getColor(errRate)}`}
className={`h-8 sm:h-9 rounded-sm sm:rounded-md border flex items-center justify-center cursor-help ${getColor(errRate)}`}
title={`Error Rate: ${errRate}%`}
>
<span className="text-[8px] sm:text-xs font-black text-foreground/90">{errRate}%</span>

5
src/components/AI/ReadinessGauge.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { fetchWithAuth } from "@/lib/apiClient";
import { useEffect, useState } from "react"
@@ -103,7 +103,6 @@ export function ReadinessGauge() {
strokeDasharray={circumference}
strokeDashoffset={isZero ? circumference : strokeDashoffset}
strokeLinecap="round"
className="transition-all duration-1500 ease-out"
/>
</svg>
<div className="absolute inset-0 flex flex-col items-center justify-center text-center mt-1">
@@ -156,7 +155,7 @@ export function ReadinessGauge() {
<span className="text-xs font-bold text-muted-foreground w-24 shrink-0 truncate">{sub.name}</span>
<div className="flex-1 h-2 rounded-full bg-white/10 overflow-hidden">
<div
className="h-full rounded-full transition-all duration-1000"
className="h-full rounded-full"
style={{ width: `${sub.val}%`, background: sub.color }}
/>
</div>

2
src/components/AI/ReferralCard.tsx
View File

@@ -75,7 +75,7 @@ export function ReferralCard() {
</div>
<div className="h-2 w-full bg-secondary rounded-full overflow-hidden">
<div
className="h-full bg-gradient-to-r from-primary to-teal-400 rounded-full transition-all duration-500"
className="h-full bg-gradient-to-r from-primary to-teal-400 rounded-full"
style={{ width: `${Math.min((referralCount / nextTier) * 100, 100)}%` }}
/>
</div>

2
src/components/AI/StudyPlanCard.tsx
View File

@@ -103,7 +103,7 @@ export function StudyPlanCard() {
{/* Progress bar */}
<div className="h-[3px] bg-[var(--cyan-ai-10)] w-full">
<div
className="h-full bg-gradient-to-r from-[var(--cyan-ai)] to-teal-400 rounded-r-[2px] transition-all duration-500"
className="h-full bg-gradient-to-r from-[var(--cyan-ai)] to-teal-400 rounded-r-[2px]"
style={{ width: `${progressPercent}%` }}
/>
</div>

4
src/components/AI/StudyTimeOptimizationCard.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { Card, CardContent } from "@/components/ui/card"
import { Flame, Star, Clock, TrendingUp, Sparkles } from "lucide-react"
import { useState } from "react"
@@ -92,7 +92,7 @@ export function StudyTimeOptimizationCard() {
</div>
)}
<div
className={`w-full rounded-t-md transition-all duration-300 ${
className={`w-full rounded-t-md ${
slot.peak
? "bg-gradient-to-t from-yellow-600/80 to-yellow-400 shadow-[0_0_14px_rgba(234,179,8,0.5)]"
: hovered === i

4
src/components/AI/WeeklyProgressReport.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { TrendingUp, TrendingDown, Brain, Zap, Target, Clock } from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"
@@ -97,7 +97,7 @@ export function WeeklyProgressReport() {
</div>
)}
<div
className={`w-full rounded-t-md transition-all duration-700 ${
className={`w-full rounded-t-md ${
!isDemo
? "bg-white/5 border border-white/10"
: i === 6

4
src/components/ui/button.tsx
View File

@@ -13,9 +13,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
<button
ref={ref}
className={cn(
"inline-flex items-center justify-center whitespace-nowrap rounded-xl text-sm font-medium ring-offset-background transition-all duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
"inline-flex items-center justify-center whitespace-nowrap rounded-xl text-sm font-medium ring-offset-background transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
{
"bg-primary text-primary-foreground hover:bg-primary/90 hover:scale-[1.02] active:scale-[0.98]": variant === "default",
"bg-primary text-primary-foreground hover:bg-primary/90": variant === "default",
"bg-secondary text-secondary-foreground hover:bg-secondary/80": variant === "secondary",
"border border-border bg-background hover:bg-accent hover:text-accent-foreground": variant === "outline",
"hover:bg-accent hover:text-accent-foreground": variant === "ghost",