Merge pull request #174 from wizelineacademy/dashboard-ui-fixes

Dashboard UI fixes

app/(base)/dashboard/[userId]/page.tsx

@@ -5,7 +5,7 @@ import DashboardGaugeSection from "@/components/Dashboard/DashboardGaugeSection"
 import DashboardRadarSection from "@/components/Dashboard/DashboardRadarSection";
 import DashboardEmotionsSection from "@/components/Dashboard/DashboardEmotionsSection";
 import DashboardSurveyCalendar from "@/components/Dashboard/DashboardSurveyCalendar";
-import PCPSection from "@/components/Dashboard/DashboardPCPSection";
+import DashboardPCPSection from "@/components/Dashboard/DashboardPCPSection";
 import Loader from "@/components/Loader";
 import { getRulerGraphInfo } from "@/services/user-dashboard";
 
@@ -83,7 +83,7 @@ const Dashboard = async ({ params }: { params: { userId: string } }) => {
         </div>
         <div className="mt-4 grid gap-7">
           <DashboardSurveyCalendar completedSurveys={completedSurveys} />
-          <PCPSection PCPData={PCPData} />
+          <DashboardPCPSection PCPData={PCPData} />
         </div>
       </div>
     </Suspense>

components/Dashboard/DashboardEmotionsSection.tsx

@@ -2,7 +2,7 @@
 import React from "react";
 import { Tooltip } from "@mantine/core";
 import GrowthCircle from "@/components/GrowthCircle";
-
+import InfoToolTip from "@/components/InfoToolTip";
 interface EmotionsSectionProps {
   emotionsData: {
     title: string;
@@ -14,11 +14,17 @@ interface EmotionsSectionProps {
 const DashboardEmotionsSection: React.FC<EmotionsSectionProps> = ({
   emotionsData,
 }) => (
-  <div className="flex min-w-96 flex-col items-center rounded-xl bg-white px-10 py-5 drop-shadow-lg">
-    <p className="mx-auto mt-2 text-center text-xl font-semibold text-graySubtitle">
-      Emotions Summary
-    </p>
-    <div className="grid grid-cols-2 gap-5 pt-10">
+  <div className="relative flex min-w-96 flex-col items-center rounded-xl bg-white px-10 py-5 drop-shadow-lg">
+    <InfoToolTip
+      description="Shows the percentage of each quadrant of the RULER Survey"
+      size="lg"
+    />
+    <div className="flex">
+      <p className="mx-auto text-center text-xl font-semibold text-graySubtitle">
+        Emotions Summary
+      </p>
+    </div>
+    <div className="grid grid-cols-2 gap-10 pt-10">
       {emotionsData.map((circle, index) => (
         <div
           key={index}

components/Dashboard/DashboardGaugeSection.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import GaugeChart from "@/components/GaugeChart";
+import InfoToolTip from "@/components/InfoToolTip";
 
 interface GaugeSectionProps {
   gaugeData: {
@@ -10,13 +11,30 @@ interface GaugeSectionProps {
   }[];
 }
 
+const getTooltipDescription = (title: string) => {
+  switch (title) {
+    case "Productivity Level":
+      return "Represents the current productivity feeling rate.<br />Higher percentage indicates greater productivity.";
+    case "Self Perception Level":
+      return "Shows how individuals perceive their own performance.<br />Higher values indicate greater self-confidence.";
+    case "Stress Level":
+      return "Indicates the current stress level.<br />Higher percentages reflect higher stress.";
+    default:
+      return "This is a summary of your overall statistics.";
+  }
+};
+
 const DashboardGaugeSection: React.FC<GaugeSectionProps> = ({ gaugeData }) => (
   <div className="mt-4 flex justify-between gap-16">
     {gaugeData.map((gauge, index) => (
       <div
         key={index}
         className="flex w-fit flex-col rounded-xl bg-white px-10 py-5 drop-shadow-lg"
       >
+        <InfoToolTip
+          description={getTooltipDescription(gauge.title)}
+          size="sm"
+        />
         <GaugeChart
           percentage={gauge.percentage}
           type={gauge.type}

components/Dashboard/DashboardPCPSection.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import GaugeChart from "@/components/GaugeChart";
+import InfoToolTip from "@/components/InfoToolTip";
 
 interface PCPSectionProps {
   PCPData: {
@@ -10,7 +11,8 @@ interface PCPSectionProps {
 }
 
 const DashboardPCPSection: React.FC<PCPSectionProps> = ({ PCPData }) => (
-  <div className="flex flex-col rounded-xl bg-white px-10 py-5 drop-shadow-lg">
+  <div className="flex flex-col rounded-xl bg-white px-10 py-4 drop-shadow-lg">
+    <InfoToolTip description="Show the progress of your Personal Carreer Plan" />
     <p className="mt-2 text-center text-xl font-semibold text-graySubtitle">
       Personal Career Plan
     </p>

components/Dashboard/DashboardRadarSection.tsx

@@ -1,12 +1,17 @@
 import React from "react";
 import { RadarChart } from "@mantine/charts";
+import InfoToolTip from "@/components/InfoToolTip";
 
 interface RadarSectionProps {
   radarData: { statistic: string; punctuation: number }[];
 }
 
 const DashboardRadarSection: React.FC<RadarSectionProps> = ({ radarData }) => (
-  <div className="flex w-fit flex-col items-center rounded-xl bg-white px-4 pt-10 drop-shadow-lg">
+  <div className="flex w-fit flex-col items-center rounded-xl bg-white px-4 pt-5 drop-shadow-lg">
+    <InfoToolTip
+      description="Provides a comprehensive view of various performance metrics.<br />Higher values indicate better performance in each area."
+      size="lg"
+    />
     <h4 className="text-xl font-medium">Overall Statistics</h4>
     <RadarChart
       h={380}

components/Dashboard/DashboardSurveyCalendar.tsx

@@ -3,6 +3,7 @@
 import React from "react";
 import { Indicator } from "@mantine/core";
 import { Calendar } from "@mantine/dates";
+import InfoToolTip from "@/components/InfoToolTip";
 
 interface SurveyCalendarProps {
   completedSurveys: { date: Date; color: string }[];
@@ -20,7 +21,13 @@ const DashboardSurveyCalendar: React.FC<SurveyCalendarProps> = ({
   completedSurveys,
 }) => (
   <div className="flex w-fit flex-col rounded-xl bg-white px-10 py-5 drop-shadow-lg">
+    <InfoToolTip
+      description='Each indicator shows a survey type answered:<br /><span style="display: flex; align-items: center; gap: 0;"><span style="display: inline-block; width: 10px; height: 10px; background-color: #0063FF; border-radius: 50%; margin-right: 5px;"></span>RULER Survey</span><span style="display: flex; align-items: center; gap: 0;"><span style="display: inline-block; width: 10px; height: 10px; background-color: #2BDD66; border-radius: 50%; margin-right: 5px;"></span>Sprint Sprint</span><span style="display: flex; align-items: center; gap: 0;"><span style="display: inline-block; width: 10px; height: 10px; background-color: #fc8a08; border-radius: 50%; margin-right: 5px;"></span>Project Survey</span>'
+      size="md"
+    />
+
     <Calendar
+      className="px-2"
       renderDay={(date: Date) => {
         const surveysToday = completedSurveys.filter((survey) =>
           dateMatches(survey.date, date),

components/GrowthCircle.tsx

@@ -10,15 +10,20 @@ interface GradientColor {
 interface GrowthCircleProps {
   percentage: number; // Expected to be between 0 and 100
   gradient: GradientColor;
+  minSize?: number; // Optional minimum size
+  maxSize?: number; // Optional maximum size
 }
 
-const GrowthCircle = ({ percentage, gradient }: GrowthCircleProps) => {
+const GrowthCircle = ({
+  percentage,
+  gradient,
+  minSize = 50,
+  maxSize = 150,
+}: GrowthCircleProps) => {
   const [gradientId] = useState(`gradient${gradientIdCounter++}`);
 
-  // Base size for the circle
-  const baseSize = 400;
-  // Calculate radius based on percentage
-  const radius = (percentage / 100) * (baseSize / 2);
+  // Calculate the radius based on percentage and ensure it is between minSize/2 and maxSize/2
+  const radius = (maxSize / 2 - minSize / 2) * (percentage / 100) + minSize / 2;
   const size = radius * 2;
   // Calculate the font size as 40% of the radius
   const fontSize = radius * 0.4;

components/InfoToolTip.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Tooltip } from "@mantine/core";
+import InfoIcon from "@/components/icons/InfoIcon";
+
+interface InfoToolTipProps {
+  description: string;
+  size?: "sm" | "md" | "lg";
+}
+
+const InfoToolTip = ({ description, size }: InfoToolTipProps) => {
+  let tooltipWidth;
+  switch (size) {
+    case "sm":
+      tooltipWidth = 220;
+      break;
+    case "md":
+      tooltipWidth = 280;
+      break;
+    case "lg":
+      tooltipWidth = 360;
+      break;
+    default:
+      tooltipWidth = 280;
+  }
+
+  return (
+    <div className="absolute right-6 top-6">
+      <Tooltip
+        label={<span dangerouslySetInnerHTML={{ __html: description }} />}
+        position="left-start"
+        multiline
+        w={tooltipWidth}
+        transitionProps={{ duration: 200 }}
+        offset={{ mainAxis: -20, crossAxis: 28 }}
+        color="gray"
+      >
+        <button className="group">
+          <InfoIcon
+            color="text-grayText group-hover:text-black transition-colors duration-200"
+            size="h-6 w-6"
+          />
+        </button>
+      </Tooltip>
+    </div>
+  );
+};
+
+export default InfoToolTip;