added description to ruler survey

app/(base)/projects/[projectId]/page.tsx

@@ -4,7 +4,11 @@ import React, { useState } from "react";
 import { RadarChart, AreaChart } from "@mantine/charts";
 import GaugeChart from "@/components/GaugeChart";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { deleteProjectById, updateFeedback } from "@/services/project";
+import {
+  deleteProjectById,
+  getProjectById,
+  updateFeedback,
+} from "@/services/project";
 import { useRouter } from "next/navigation";
 import { getUserRole } from "@/services/user";
 import {
@@ -13,6 +17,7 @@ import {
 } from "@/services/sprintSurvey";
 
 import ChevronDownIcon from "@/components/icons/ChevronDownIcon";
+import Loader from "@/components/Loader";
 
 const Project = ({ params }: { params: { projectId: string } }) => {
   const router = useRouter();
@@ -34,6 +39,11 @@ const Project = ({ params }: { params: { projectId: string } }) => {
     queryFn: () => getUserRole(),
   });
 
+  const { data: projectData, isLoading: isLoadingProjectData } = useQuery({
+    queryKey: ["project-data", projectId],
+    queryFn: () => getProjectById(projectId),
+  });
+
   const { data: statistics, isLoading: isLoadingStatistics } = useQuery({
     queryKey: ["project-overall-statistics", projectId],
     queryFn: () => getOverallStatistics(projectId),
@@ -125,15 +135,23 @@ const Project = ({ params }: { params: { projectId: string } }) => {
     : [];
   const progressBarPercentage = 74;
 
-  if (isLoadingStatistics || isLoadingDetailedStatistics) {
-    return <div>Loading...</div>;
+  if (
+    isLoadingStatistics ||
+    isLoadingDetailedStatistics ||
+    isLoadingProjectData
+  ) {
+    return (
+      <div className="h-[80dvh]">
+        <Loader />
+      </div>
+    );
   }
   console.log(gaugeData);
 
   return (
     <div className="mt-2">
       <div className="flex justify-between">
-        <p className="text-3xl font-medium">Project 1</p>
+        <p className="text-3xl font-medium">{projectData?.name}</p>
         {userRoleQuery.data &&
           (userRoleQuery.data === "MANAGER" ||
             userRoleQuery.data === "ADMIN") && (

components/Dashboard/DashboardEmotionsSection.tsx

@@ -28,7 +28,7 @@ const DashboardEmotionsSection: React.FC<EmotionsSectionProps> = ({
       {emotionsData.map((circle, index) => (
         <div
           key={index}
-          className="flex items-center justify-center drop-shadow-lg"
+          className="flex items-center justify-center drop-shadow-lg transition-transform duration-300 ease-in-out hover:scale-125"
         >
           <Tooltip.Floating label={circle.title} color={circle.gradient.end}>
             <div>

components/InfoToolTip.tsx

@@ -24,7 +24,7 @@ const InfoToolTip = ({ description, size }: InfoToolTipProps) => {
   }
 
   return (
-    <div className="absolute right-6 top-6">
+    /*     <div className="absolute right-6 top-6">
       <Tooltip
         label={<span dangerouslySetInnerHTML={{ __html: description }} />}
         position="left-start"
@@ -41,7 +41,8 @@ const InfoToolTip = ({ description, size }: InfoToolTipProps) => {
           />
         </button>
       </Tooltip>
-    </div>
+    </div> */
+    <div></div>
   );
 };
 

components/Profile/ProfileSection.tsx

@@ -39,7 +39,7 @@ const ProfileSection: React.FC<ProfileSectionProps> = ({
   });
 
   return (
-    <div className="mb-6">
+    <div className="mb-4">
       <div className="mx-auto flex justify-between">
         <h3 className="text-2xl font-medium text-black">{title}</h3>
         {showMore && (

components/ProjectCard.tsx

@@ -30,15 +30,15 @@ export default function ProjectCard({
   }
 
   return (
-    <div className="flex w-fit items-center gap-10 rounded-lg bg-white p-4">
-      <div>
+    <div className="flex h-full max-h-40 w-fit items-center gap-10 rounded-lg bg-white p-4">
+      <div className="flex h-full flex-col">
         <h3 className="w-[20ch] pb-2 text-base font-medium">{name}</h3>
         {date && <p className="pb-4 text-sm text-graySubtitle">{date}</p>}
         {description && (
           <p className="w-[30ch] pb-4 text-xs text-grayText">{description}</p>
         )}
         <p className="pb-4 text-sm text-graySubtitle">In progress</p>
-        <div className="ml-[6px]">
+        <div className="ml-[6px] mt-auto">
           <ul className="flex">
             {coworkersQuery.data.map((coworker, index) => (
               <li key={index}>

components/ProjectsCarousel.tsx

@@ -26,7 +26,7 @@ export default function ProjectsCarousel({ userId }: { userId: string }) {
   }
 
   return (
-    <ul className="mt-2 flex w-full flex-row gap-4 overflow-x-auto">
+    <ul className="mt-2 flex w-full flex-row gap-4 overflow-x-auto pb-2">
       {projectsQuery.data.map((project, index) => (
         <li key={index}>
           <ProjectCard id={project.id} name={project.name} />

components/modals/ruler/RulerStepOne.tsx

@@ -149,10 +149,38 @@ const RulerStepOne = ({
       data-testid="ruler-step-one"
     >
       <p className="my-2 text-sm text-graySubtitle">How do you feel today?</p>
+      <div className="absolute left-[-17rem] top-[53%] z-50 flex w-[70%] -rotate-90 flex-row items-center  gap-5  leading-none">
+        <p>Low</p>
+        <div className="h-0.5 w-1/3 bg-gradient-to-r from-blue-800 to-blue-500" />
+        <p className="">Energy</p>
+        <div className="flex w-[30%] flex-row items-center">
+          <div className="h-0.5 w-full bg-gradient-to-r from-red-600 to-red-300" />
+          <div
+            id="triange"
+            className="h-0.5 w-0 rotate-90 border-b-[15px] border-l-[7.5px] border-r-[7.5px] border-b-red-300 border-l-transparent border-r-transparent"
+          />
+        </div>
+        <p>High</p>
+      </div>
+
+      <div className="flex w-full flex-row items-center justify-end gap-5 py-2 pe-3 leading-none">
+        <p>Low</p>
+        <div className="h-0.5 w-1/3 bg-gradient-to-r from-red-800 to-red-500" />
+        <p className="">Pleasentness</p>
+        <div className="flex w-[30%] flex-row items-center">
+          <div className="h-0.5 w-full bg-gradient-to-r from-yellow-600 to-yellow-300" />
+          <div
+            id="triange"
+            className="h-0.5 w-0 rotate-90 border-b-[15px] border-l-[7.5px] border-r-[7.5px] border-b-yellow-300 border-l-transparent border-r-transparent"
+          />
+        </div>
+        <p>High</p>
+      </div>
+
       <section id="ruler-survey" className="flex flex-col text-center">
-        <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-3 self-end">
           {rulerEmotionsMatrix.map((row, rowIndex) => (
-            <div key={rowIndex} className="flex flex-row gap-4">
+            <div key={rowIndex} className="flex flex-row gap-3">
               {row.map((emotion: Emotion, colIndex) => (
                 <button
                   data-testid={`emotion-${rowIndex}-${colIndex}`}

services/project.ts

@@ -40,6 +40,23 @@ export async function getProjects() {
   return projects;
 }
 
+export async function getProjectById(projectId: number) {
+  // get the project by id
+  const res = await db
+    .select({
+      id: project.id,
+      name: project.name,
+      description: project.description,
+      startDate: project.startDate,
+      endDate: project.endDate,
+      sprintSurveyPeriodicityInDays: project.sprintSurveyPeriodicityInDays,
+    })
+    .from(project)
+    .where(eq(project.id, projectId));
+
+  return res[0];
+}
+
 type NewProject = Omit<typeof project.$inferInsert, "managerId">;
 
 export async function createProject({

utils/utils.ts

@@ -16,13 +16,13 @@ const months: { [key: string]: string } = {
 };
 
 const days: { [key: string]: string } = {
-  Mon: "Sunday",
-  Tue: "Monday",
-  Wed: "Tuesday",
-  Thu: "Wednesday",
-  Fri: "Thursday",
-  Sat: "Friday",
-  Sun: "Saturday",
+  Mon: "Monday",
+  Tue: "Tuesday",
+  Wed: "Wednesday",
+  Thu: "Thursday",
+  Fri: "Friday",
+  Sat: "Saturday",
+  Sun: "Sunday",
 };
 
 export const parseDate = (unformattedDate: Date): DateObject => {