Fix toFixed errors on undefined values

- Add null coalescing (?? 0) before all toFixed calls
- Prevents 'Cannot read properties of undefined' errors
- Affected files: page.tsx, progress/page.tsx, quiz/result/page.tsx,
  XPProgressBar, TopicCard, RecommendedCard, CoachFeedbackPanel

Author: mohi-devhub

frontend/app/page.tsx

@@ -451,7 +451,7 @@ export default function Dashboard() {
                 // AVG_SCORE
               </div>
               <div className="text-3xl font-bold">
-                {recommendations.overall_stats.avg_score.toFixed(1)}%
+                {(recommendations.overall_stats?.avg_score ?? 0).toFixed(1)}%
               </div>
             </div>
             <div className="border border-terminal-white p-4">

frontend/app/progress/page.tsx

@@ -278,7 +278,7 @@ export default function ProgressDashboard() {
           <div className="border border-gray-700 p-4">
             <div className="text-gray-500 text-xs mb-2">// AVG ACCURACY</div>
             <div className="text-2xl font-bold">
-              {stats?.avg_best_score.toFixed(1) || 0}%
+              {(stats?.avg_best_score ?? 0).toFixed(1)}%
             </div>
             <div className="text-xs text-gray-500 mt-1">BEST SCORES</div>
           </div>
@@ -364,12 +364,12 @@ export default function ProgressDashboard() {
 
                   {/* Latest Score */}
                   <div className="col-span-1 text-right text-gray-400">
-                    {topic.score.toFixed(1)}%
+                    {(topic.score ?? 0).toFixed(1)}%
                   </div>
 
                   {/* Best Score */}
                   <div className="col-span-2 text-right font-bold">
-                    {topic.best_score.toFixed(1)}%
+                    {(topic.best_score ?? 0).toFixed(1)}%
                   </div>
 
                   {/* Attempts */}

frontend/app/quiz/result/page.tsx

@@ -128,7 +128,7 @@ function ResultContent() {
 
         {/* Score Display */}
         <div className="border-2 border-terminal-white p-12 mb-8 text-center">
-          <div className="text-8xl font-bold mb-6">{score.toFixed(0)}%</div>
+          <div className="text-8xl font-bold mb-6">{(score ?? 0).toFixed(0)}%</div>
           <div className="text-3xl mb-4">
             {correct} / {total} Correct
           </div>
@@ -156,7 +156,7 @@ function ResultContent() {
             <div className="flex justify-between">
               <span className="text-terminal-gray">Success Rate:</span>
               <span className={`font-mono ${performance.color}`}>
-                {score.toFixed(1)}%
+                {(score ?? 0).toFixed(1)}%
               </span>
             </div>
             {xpEarned !== null && (

frontend/components/CoachFeedbackPanel.tsx

@@ -140,7 +140,7 @@ export default function CoachFeedbackPanel({ userId }: CoachFeedbackProps) {
                     </div>
                     <div className="text-right ml-4">
                       <div className="font-bold font-mono">
-                        {topic.score.toFixed(0)}%
+                        {(topic.score ?? 0).toFixed(0)}%
                       </div>
                       <div className="text-gray-600 text-xs">
                         {topic.attempts} attempts

frontend/components/RecommendedCard.tsx

@@ -82,7 +82,7 @@ export default function RecommendedCard({
           <div className="border border-terminal-gray p-3">
             <div className="text-terminal-gray text-xs mb-1">// CURRENT_SCORE</div>
             <div className="text-xl font-bold">
-              {recommendation.current_score !== null
+              {recommendation.current_score !== null && recommendation.current_score !== undefined
                 ? `${recommendation.current_score.toFixed(1)}%`
                 : "[NEW]"}
             </div>

frontend/components/TopicCard.tsx

@@ -64,7 +64,7 @@ export default function TopicCard({ topic, delay = 0 }: TopicCardProps) {
           <div
             className={`text-3xl font-bold ${getScoreColor(topic.avg_score)}`}
           >
-            {topic.avg_score.toFixed(1)}%
+            {(topic.avg_score ?? 0).toFixed(1)}%
           </div>
         </div>
 

frontend/components/XPProgressBar.tsx

@@ -83,7 +83,7 @@ export default function XPProgressBar({
 
           {/* Percentage text */}
           <div className="absolute inset-0 flex items-center justify-center text-xs font-bold mix-blend-difference">
-            {xpProgress.toFixed(1)}%
+            {(xpProgress ?? 0).toFixed(1)}%
           </div>
         </div>