chore: dashboard ui update

Frontend/src/components/dashboard/FeedBackScore.tsx

@@ -9,9 +9,10 @@ interface Props {
 }
 
 const ScoreCard = ({ label, value }: any) => (
-  <div className="p-4 text-center bg-gray-100 rounded-xl">
-    <p className="text-3xl font-bold text-black">{value}%</p>
-    <p className="text-gray-600">{label}</p>
+  // Updated: Transparent/Darker background for individual score items
+  <div className="p-4 text-center bg-[#434E78]/50 border border-white/5 rounded-xl">
+    <p className="text-3xl font-bold text-[#F7E396]">{value}%</p>
+    <p className="text-gray-300 text-sm mt-1">{label}</p>
   </div>
 );
 
@@ -23,22 +24,30 @@ const FeedbackScore: React.FC<Props> = ({
   improvements,
 }) => {
   return (
-    <div className="bg-white p-5 shadow rounded-xl">
-      <h3 className="text-xl font-bold mb-3 text-black">AI Feedback Summary</h3>
-
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+    // Updated: Removed bg-white, using transparent container
+    <div className="w-full">
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6">
         <ScoreCard label="Confidence" value={confidence} />
         <ScoreCard label="Clarity" value={clarity} />
-        <ScoreCard label="Technical Accuracy" value={accuracy} />
+        <ScoreCard label="Accuracy" value={accuracy} />
         <ScoreCard label="Speed" value={speed} />
       </div>
 
-      <h4 className="text-lg font-semibold mt-5 text-black">Suggested Improvements</h4>
-      <ul className="list-disc pl-5 text-blue-600">
-        {improvements.map((item, i) => (
-          <li key={i}>{item}</li>
-        ))}
-      </ul>
+      <div className="bg-[#434E78]/30 p-4 rounded-xl border border-white/5">
+        <h4 className="text-sm font-semibold text-white mb-2 uppercase tracking-wide opacity-80">
+          Suggested Improvements
+        </h4>
+        <ul className="space-y-1">
+          {improvements.map((item, i) => (
+            <li
+              key={i}
+              className="text-gray-200 text-sm flex items-start gap-2"
+            >
+              <span className="text-[#E97F4A] mt-1">•</span> {item}
+            </li>
+          ))}
+        </ul>
+      </div>
     </div>
   );
 };

Frontend/src/components/dashboard/SkillRadarChart.tsx

@@ -1,27 +1,45 @@
 import {
-  Radar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer
+  Radar,
+  RadarChart,
+  PolarGrid,
+  PolarAngleAxis,
+  PolarRadiusAxis,
+  ResponsiveContainer,
 } from "recharts";
 
 const SkillRadarChart = ({ data }: { data: any[] }) => (
-  <div className="bg-white p-5 shadow rounded-xl">
-    <h3 className="text-xl font-bold mb-3 text-black">Skill Strength Chart</h3>
+  // Updated: Transparent background
+  <div className="w-full h-full flex items-center justify-center">
+    <ResponsiveContainer width="100%" height="100%">
+      <RadarChart cx="50%" cy="50%" outerRadius="70%" data={data}>
+        {/* Grid lines: lighter for dark theme */}
+        <PolarGrid stroke="#e5e7eb" strokeOpacity={0.2} />
 
-    <div className="w-full h-80">
-      <ResponsiveContainer>
-        <RadarChart cx="50%" cy="50%" outerRadius="70%" data={data}>
-          <PolarGrid />
-          <PolarAngleAxis dataKey="skill" />
-          <PolarRadiusAxis angle={30} domain={[0, 100]} />
-          <Radar
-            name="Skill Level"
-            dataKey="value"
-            stroke="#1170d6"
-            fill="#1170d6"
-            fillOpacity={0.4}
-          />
-        </RadarChart>
-      </ResponsiveContainer>
-    </div>
+        {/* Labels: White text */}
+        <PolarAngleAxis
+          dataKey="skill"
+          tick={{ fill: "#ffffff", fontSize: 12, fontWeight: 500 }}
+        />
+
+        {/* Radius Axis: Hidden or subtle */}
+        <PolarRadiusAxis
+          angle={30}
+          domain={[0, 100]}
+          tick={false}
+          axisLine={false}
+        />
+
+        {/* The Radar Shape: Highlight Yellow with opacity */}
+        <Radar
+          name="Skill Level"
+          dataKey="value"
+          stroke="#F7E396"
+          strokeWidth={2}
+          fill="#F7E396"
+          fillOpacity={0.4}
+        />
+      </RadarChart>
+    </ResponsiveContainer>
   </div>
 );
 

Frontend/src/components/dashboard/YearlyStreak.tsx

@@ -6,13 +6,17 @@ interface StreakData {
   month: string;
 }
 
+// Updated Colors:
+// Empty: Dark Blue (#434E78)
+// Low -> High: Light Blue -> Yellow -> Orange
 const getColor = (count: number) => {
-  if (count === 0) return "#2e2e2e"; 
-  if (count === 1) return "#9be9f8"; 
-  if (count === 2) return "#40c4f3"; 
-  if (count === 3) return "#30a1c4"; 
-  return "#216e9c"; 
+  if (count === 0) return "#434E78"; // Empty state (matches page bg)
+  if (count === 1) return "#607B8F"; // Low activity
+  if (count === 2) return "#F7E396"; // Medium activity
+  if (count === 3) return "#E97F4A"; // High activity
+  return "#E97F4A";
 };
+
 const YearlyStreak = ({ data }: { data: StreakData[] }) => {
   const totalSubmissions = data.reduce((a, b) => a + b.count, 0);
   const activeDays = data.filter((d) => d.count > 0).length;
@@ -35,26 +39,33 @@ const YearlyStreak = ({ data }: { data: StreakData[] }) => {
   }, {});
 
   return (
-    <div className="bg-gray-900 p-6 rounded-xl text-white shadow-xl">
-      <div className="flex justify-between mb-4">
-        <h3 className="text-xl font-semibold">
-          {totalSubmissions} Hour Platform Activities This Year
+    // Transparent container, relying on parent card
+    <div className="w-full text-white">
+      <div className="flex justify-between mb-6">
+        <h3 className="text-sm font-medium text-gray-300">
+          {totalSubmissions} activities in the last year
         </h3>
 
-        <div className="flex gap-6 text-gray-300">
-          <p>Total active days: <span className="text-white">{activeDays}</span></p>
-          <p>Max streak: <span className="text-white">{maxStreak}</span></p>
+        <div className="flex gap-6 text-sm text-gray-300">
+          <p>
+            Total Active Days:{" "}
+            <span className="text-[#F7E396] font-bold">{activeDays}</span>
+          </p>
+          <p>
+            Longest Streak:{" "}
+            <span className="text-[#F7E396] font-bold">{maxStreak}</span>
+          </p>
         </div>
       </div>
 
-      <div className="flex">
+      <div className="flex overflow-x-auto custom-scrollbar pb-2">
         {Object.keys(weeks).map((weekIndex) => (
-          <div key={weekIndex} className="flex flex-col mr-1">
+          <div key={weekIndex} className="flex flex-col mr-1 gap-1">
             {weeks[weekIndex].map((day: StreakData) => (
               <div
                 key={day.date}
                 title={`${day.date} — ${day.count} tasks`}
-                className="w-4 h-4 rounded-sm mb-1"
+                className="w-3 h-3 rounded-[2px] transition-all hover:ring-1 hover:ring-white"
                 style={{ backgroundColor: getColor(day.count) }}
               />
             ))}
@@ -62,12 +73,12 @@ const YearlyStreak = ({ data }: { data: StreakData[] }) => {
         ))}
       </div>
 
-      <div className="flex mt-3 text-gray-400 text-xs">
+      <div className="flex mt-2 text-gray-400 text-xs">
         {Object.keys(weeks).map((weekIndex) => {
           const firstDay = weeks[weekIndex][0];
           const showLabel = firstDay.date.endsWith("01");
           return (
-            <div key={weekIndex} className="w-4 mx-[2px]">
+            <div key={weekIndex} className="w-3 mr-1">
               {showLabel && <span>{firstDay.month}</span>}
             </div>
           );

Frontend/src/pages/dashboard.tsx

@@ -1,14 +1,24 @@
+import React from "react";
 import YearlyStreak from "../components/dashboard/YearlyStreak";
 import FeedbackScore from "../components/dashboard/FeedBackScore";
 import SkillRadarChart from "../components/dashboard/SkillRadarChart";
-import WeakAreaBanner from "../components/dashboard/WeakAreaBanner";
-import InterviewPlayback from "../components/dashboard/InterviewPlayback";
 import { generateYearlyStreakData } from "../utils/generateYearlyStreakData";
-import { useAuth } from "../components/context/AuthContext"; // Import AuthContext
+import { useAuth } from "../components/context/AuthContext";
+import {
+  PlayCircle,
+  FileText,
+  CheckCircle,
+  Brain,
+  TrendingUp,
+  AlertCircle,
+  Clock,
+} from "lucide-react";
 
 const Dashboard = () => {
-  const { username } = useAuth(); // Get dynamic username
+  const { username } = useAuth();
   const streakData = generateYearlyStreakData();
+
+  // Mock Data for Charts
   const radarData = [
     { skill: "DSA", value: 70 },
     { skill: "System Design", value: 60 },
@@ -17,88 +27,207 @@ const Dashboard = () => {
     { skill: "Accuracy", value: 68 },
     { skill: "Time Mgmt", value: 80 },
   ];
-  const weakTopic = "Dynamic Programming";
+
+  // Mock Data for Recent Activity
+  const recentActivities = [
+    {
+      id: 1,
+      type: "interview",
+      title: "React Native Interview",
+      date: "Today, 10:23 AM",
+      score: "85%",
+      icon: <PlayCircle size={20} />,
+    },
+    {
+      id: 2,
+      type: "quiz",
+      title: "Frontend Basics MCQ",
+      date: "Yesterday",
+      score: "92%",
+      icon: <CheckCircle size={20} />,
+    },
+    {
+      id: 3,
+      type: "note",
+      title: "System_Design_Notes.pdf",
+      date: "2 days ago",
+      status: "Uploaded",
+      icon: <FileText size={20} />,
+    },
+  ];
+
+  // Mock Data for Quiz Stats
+  const quizStats = {
+    completed: 15,
+    accuracy: 72,
+    weakestTopic: "Dynamic Programming",
+    strongestTopic: "React Hooks",
+  };
 
   return (
-    // Updated background to match the new dark blue theme
-    <div className="px-6 py-8 space-y-10 min-h-screen text-gray-100 bg-[#434E78] font-OpenSans">
+    // 1. Page Background: #434E78
+    <div className="px-6 py-8 space-y-8 min-h-screen text-white bg-[#434E78] font-sans">
       {/* ----------- HEADER SECTION ----------- */}
-      <div className="flex flex-col md:flex-row md:items-center justify-between mb-4">
-        {/* Replaced Hardcoded Name with {username} */}
-        <h1 className="text-3xl lg:text-4xl font-extrabold text-white tracking-tight">
-          👋 Welcome back,{" "}
-          <span className="text-[#F7E396]">{username || "User"}</span>
-        </h1>
-
-        <div className="flex items-center space-x-3 mt-4 md:mt-0">
-          {/* Updated Button to match new Highlight (#F7E396) theme */}
-          <button className="px-6 py-2 bg-[#F7E396] text-[#434E78] rounded-lg shadow-lg hover:bg-[#E97F4A] hover:text-white transition-all duration-300 ease-in-out font-bold">
-            Start Interview
-          </button>
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+        <div>
+          <h1 className="text-3xl lg:text-4xl font-bold font-handwriting tracking-wide">
+            Welcome back,{" "}
+            <span className="text-[#F7E396]">{username || "User"}!</span>
+          </h1>
+          <p className="text-[#607B8F] text-gray-300 mt-1">
+            Track your progress and stay consistent.
+          </p>
         </div>
+
+        <button className="px-6 py-3 bg-[#F7E396] text-[#434E78] rounded-xl shadow-lg hover:bg-[#E97F4A] hover:text-white transition-all duration-300 font-bold flex items-center gap-2 transform hover:-translate-y-1">
+          <PlayCircle size={20} />
+          Start New Interview
+        </button>
       </div>
 
-      {/* ----------- GRID MAIN LAYOUT ----------- */}
+      {/* ----------- TOP ROW: Performance & Skills ----------- */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        {/* LEFT PANEL (Feedback Score) */}
-        <div className="space-y-6 col-span-1">
-          {/* Updated Card Background to Secondary Blue (#607B8F) */}
-          <div className="bg-[#607B8F] rounded-xl shadow-lg p-6 border border-white/10 h-full">
-            <h2 className="text-xl font-bold mb-4 text-white">
-              AI Feedback Score
+        {/* 1. AI Feedback Score */}
+        <div className="bg-[#607B8F] rounded-2xl shadow-xl p-6 border border-white/10 flex flex-col justify-between">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-xl font-bold text-white flex items-center gap-2">
+              <Brain className="text-[#F7E396]" size={24} /> AI Feedback Score
             </h2>
-            <FeedbackScore
-              confidence={78}
-              clarity={82}
-              accuracy={70}
-              speed={65}
-              improvements={[
-                "Improve explanation clarity",
-                "Practice more DP problems",
-                "Reduce filler words in answers",
-              ]}
-            />
+            <span className="text-xs font-mono text-[#F7E396] bg-[#434E78] px-2 py-1 rounded">
+              AVG
+            </span>
           </div>
+          {/* Passed prop to handle transparent background in child */}
+          <FeedbackScore
+            confidence={78}
+            clarity={82}
+            accuracy={70}
+            speed={65}
+            improvements={[
+              "Improve explanation clarity",
+              "Practice more DP problems",
+            ]}
+          />
         </div>
 
-        {/* RIGHT PANEL (Skill Chart) */}
-        <div className="space-y-6 col-span-1">
-          <div className="bg-[#607B8F] rounded-xl shadow-lg p-6 border border-white/10 h-full">
-            <h2 className="text-xl font-bold mb-4 text-white">
-              Skill Strength Chart
+        {/* 2. Skill Radar Chart */}
+        <div className="bg-[#607B8F] rounded-2xl shadow-xl p-6 border border-white/10">
+          <div className="flex items-center justify-between mb-2">
+            <h2 className="text-xl font-bold text-white flex items-center gap-2">
+              <TrendingUp className="text-[#F7E396]" size={24} /> Skill Analysis
             </h2>
+          </div>
+          <div className="h-64 w-full">
             <SkillRadarChart data={radarData} />
           </div>
         </div>
       </div>
 
-      {/* ----------- MIDDLE ROW ----------- */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        <div className="bg-[#607B8F] rounded-xl shadow-lg p-6 border border-white/10 lg:col-span-2">
-          <h2 className="text-xl font-bold mb-4 text-white">
-            Interview Playback AI Feedback
+      {/* ----------- MIDDLE ROW: Activity & Quiz Stats ----------- */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* 3. Recent Activity List */}
+        <div className="bg-[#607B8F] rounded-2xl shadow-xl p-6 border border-white/10">
+          <h2 className="text-xl font-bold text-white mb-6 flex items-center gap-2">
+            <Clock className="text-[#F7E396]" size={24} /> Recent Activity
           </h2>
-          <InterviewPlayback
-            audioUrl="https://example.com/audio.mp3"
-            transcript={`Interviewer: Explain polymorphism.\nYou: Polymorphism means...`}
-            highlights={[
-              "Answer lacked real-world example",
-              "Need more clarity in describing LLD concepts",
-              "Example Interview Playback",
-            ]}
-          />
+
+          <div className="space-y-4">
+            {recentActivities.map((item) => (
+              <div
+                key={item.id}
+                className="flex items-center justify-between p-4 bg-[#434E78]/50 rounded-xl border border-white/5 hover:border-[#F7E396]/50 transition cursor-pointer"
+              >
+                <div className="flex items-center gap-4">
+                  <div
+                    className={`p-3 rounded-full ${
+                      item.type === "interview"
+                        ? "bg-blue-500/20 text-blue-300"
+                        : item.type === "quiz"
+                        ? "bg-green-500/20 text-green-300"
+                        : "bg-purple-500/20 text-purple-300"
+                    }`}
+                  >
+                    {item.icon}
+                  </div>
+                  <div>
+                    <h4 className="font-semibold text-white">{item.title}</h4>
+                    <p className="text-xs text-gray-300">{item.date}</p>
+                  </div>
+                </div>
+                <div className="text-right">
+                  {item.score ? (
+                    <span className="text-lg font-bold text-[#F7E396]">
+                      {item.score}
+                    </span>
+                  ) : (
+                    <span className="text-xs bg-white/10 px-2 py-1 rounded text-gray-300">
+                      {item.status}
+                    </span>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
         </div>
 
-        <div className="bg-[#607B8F] rounded-xl shadow-lg p-5 border border-white/10 col-span-1 flex-col items-center justify-center">
-          <h2 className="text-xl font-bold mb-4 text-white">WeakAreaBanner</h2>
-          <WeakAreaBanner topic={weakTopic} />
+        {/* 4. Quiz & Knowledge Metrics */}
+        <div className="bg-[#607B8F] rounded-2xl shadow-xl p-6 border border-white/10 flex flex-col justify-between">
+          <div>
+            <h2 className="text-xl font-bold text-white mb-6 flex items-center gap-2">
+              <CheckCircle className="text-[#F7E396]" size={24} /> Quiz &
+              Knowledge
+            </h2>
+
+            <div className="grid grid-cols-2 gap-4 mb-6">
+              <div className="p-4 bg-[#434E78]/50 rounded-xl border border-white/5">
+                <p className="text-gray-300 text-sm">Quizzes Completed</p>
+                <p className="text-3xl font-bold text-white mt-1">
+                  {quizStats.completed}
+                </p>
+              </div>
+              <div className="p-4 bg-[#434E78]/50 rounded-xl border border-white/5">
+                <p className="text-gray-300 text-sm">Avg. Accuracy</p>
+                <p className="text-3xl font-bold text-[#F7E396] mt-1">
+                  {quizStats.accuracy}%
+                </p>
+              </div>
+            </div>
+
+            <div className="space-y-3">
+              <div className="flex justify-between items-center p-3 bg-red-500/10 border border-red-500/20 rounded-lg">
+                <span className="text-sm text-red-200 flex items-center gap-2">
+                  <AlertCircle size={16} /> Weakest Topic
+                </span>
+                <span className="font-bold text-red-100">
+                  {quizStats.weakestTopic}
+                </span>
+              </div>
+              <div className="flex justify-between items-center p-3 bg-green-500/10 border border-green-500/20 rounded-lg">
+                <span className="text-sm text-green-200 flex items-center gap-2">
+                  <TrendingUp size={16} /> Strongest Topic
+                </span>
+                <span className="font-bold text-green-100">
+                  {quizStats.strongestTopic}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <button className="w-full mt-6 py-3 rounded-lg border border-white/20 text-white hover:bg-white/10 transition text-sm font-semibold">
+            View Detailed Analysis
+          </button>
         </div>
       </div>
 
-      {/* ----------- BOTTOM ROW ----------- */}
-      <div className="bg-[#607B8F] rounded-xl shadow-lg p-6 border border-white/10">
-        <h2 className="text-xl font-bold mb-3 text-white">Yearly Streak</h2>
-        <YearlyStreak data={streakData} />
+      {/* ----------- BOTTOM ROW: Yearly Streak ----------- */}
+      <div className="bg-[#607B8F] rounded-2xl shadow-xl p-6 border border-white/10">
+        <h2 className="text-xl font-bold mb-4 text-white flex items-center gap-2">
+          <Clock className="text-[#F7E396]" size={24} /> Activity Streak
+        </h2>
+        {/* Container for the streak chart to handle responsiveness */}
+        <div className="overflow-x-auto pb-2">
+          <YearlyStreak data={streakData} />
+        </div>
       </div>
     </div>
   );