DEAR-122 clean up dashbaord

24FSIIT16 · Jul 21, 2024 · 6d5ff51 · 6d5ff51
1 parent 9e29eaf
commit 6d5ff51
Show file tree

Hide file tree

Showing 11 changed files with 190 additions and 301 deletions.
diff --git a/app/(main)/(home)/components/EmotionSurvey.tsx b/app/(main)/(home)/components/EmotionSurvey.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '@components/ui/Card/Card';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@components/ui/Card/Card';
 import { User } from '@/types/UserType';
 import { Emotion } from '@/types/EmotionType';
 import { Badge } from '@components/ui/Badge/Badge';
@@ -39,16 +39,15 @@ const EmotionSurvey: React.FC<EmotionSurveyProps> = ({ fetchDashboardData, emoti
     <Card>
       <CardHeader>
         <CardTitle className="space-x-2 text-sm font-medium">Survey</CardTitle>
-      </CardHeader>
-
-      <CardContent>
-        <div className="text-2xl font-bold">How do you feel?</div>
-        <p className="text-muted-foreground text-s">
+        <CardTitle className="text-2xl font-bold">How do you feel?</CardTitle>
+        <CardDescription className="text-muted-foreground text-2lg">
           We value your well-being and would love to know how you feel today. Please select the emotion that best
           represents your current mood. Your feedback helps us understand your overall happiness and track changes over
           time.
-        </p>
+        </CardDescription>
+      </CardHeader>
 
+      <CardContent>
         <div className="mt-4 flex flex-wrap gap-2">
           {emotions.map((emotion) => (
             <Badge

diff --git a/components/Surveys/Feedback.tsx → ...ain)/(home)/components/FeedbackSurvey.tsx b/components/Surveys/Feedback.tsx → ...ain)/(home)/components/FeedbackSurvey.tsx
@@ -3,11 +3,9 @@
 import * as React from 'react';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import Label from '@components/ui/Label/Label';
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@components/ui/Card/Card';
-import { Button } from '@components/ui/Buttons/Button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@components/ui/Card/Card';
 import { toast } from '@components/ui/Toast/use-toast';
 import { Textarea } from '@components/ui/Text/Textarea';
-import getTodayDate from '@/lib/dateUtils';
 
 type FormValues = {
   question3: string;
@@ -38,30 +36,28 @@ const FeedbackSurvey: React.FC = () => {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Give us some context about your day!</CardTitle>
-        <CardDescription>
-          Submit your feedback to provide positive and negative aspects of your work day.
+        <CardTitle className="space-x-2 text-sm font-medium">Survey</CardTitle>
+        <CardTitle className="text-2xl font-bold">Give us some context about your day!</CardTitle>
+        <CardDescription className="text-muted-foreground text-2lg">
+          Your feedback is invaluable in helping us understand the positive and negative aspects of your workday. By
+          sharing your experiences, you help us identify areas for improvement and celebrate the things that are working
+          well. Please take a moment to provide your insights so we can create a better work environment for everyone.
         </CardDescription>
       </CardHeader>
 
       <form onSubmit={handleSubmit(onSubmit)}>
         <CardContent>
-          <Label>{getTodayDate()}</Label>
-
           <div className="mb-4">
-            <Label>What was especially positive about it?</Label>
+            <Label className="text-md space-x-2 font-medium">What was especially positive about it?</Label>
             <Textarea id="positiveFeedback" {...register('question3', { required: false })} />
             {errors.question3 && <span className="text-red-500">This field is required</span>}
           </div>
           <div className="mb-4">
-            <Label>What was especially negative about it?</Label>
+            <Label className="text-md space-x-2 font-medium">What was especially negative about it?</Label>
             <Textarea id="negativeFeedback" {...register('question4', { required: false })} />
             {errors.question4 && <span className="text-red-500">This field is required</span>}
           </div>
         </CardContent>
-        <CardFooter className="border-t px-6 py-4">
-          <Button className="w-full">Submit </Button>
-        </CardFooter>
       </form>
     </Card>
   );

diff --git a/app/(main)/(home)/components/HappinessSurvey.tsx b/app/(main)/(home)/components/HappinessSurvey.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '@components/ui/Card/Card';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@components/ui/Card/Card';
 import { Annoyed, Frown, Laugh, Smile } from 'lucide-react';
 import SurveyHappinessButton from '@components/Buttons/SurveyHappinessButton';
 import { SubmitHappinessScoreDTO } from '@/types/SurveyType';
@@ -51,15 +51,15 @@ const HappinessSurvey: React.FC<HappinessSurveyProps> = ({ fetchDashboardData, u
 
   return (
     <Card>
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+      <CardHeader>
         <CardTitle className="text-sm font-medium">Survey</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="text-2xl font-bold">How happy are you with your working day?</div>
-        <p className="text-muted-foreground text-s mb-7">
+        <CardTitle className="text-2xl font-bold">How happy are you with your working day?</CardTitle>
+        <CardDescription className="text-muted-foreground text-2lg">
           We want to know how satisfied you are with your workday today. Your feedback is important to us and helps us
           understand your daily work experience.
-        </p>
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
         <div className="flex flex-row items-center justify-between">
           <SurveyHappinessButton
             score={2}

diff --git a/app/(main)/(home)/components/InactivityAlert.tsx b/app/(main)/(home)/components/InactivityAlert.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import * as React from 'react';
+
+import { DashboardDTO } from '@/types/DashboardType';
+import Widget from '@components/Cards/Widget';
+import { Megaphone } from 'lucide-react';
+
+interface DashboardOverviewProps {
+  dashboardData?: DashboardDTO;
+}
+
+const InactivityAlert: React.FC<DashboardOverviewProps> = ({ dashboardData }) => (
+  <div>
+    <Widget
+      header={{
+        title: 'We think you forgot something?!',
+        icon: <Megaphone />,
+      }}
+      content={{
+        mainContent: 'No Happiness tracking since 52 days.',
+        subContent: dashboardData?.averageScore,
+      }}
+      borderColor="border-primaryBlue-main"
+      fontColor="text-primaryBlue-main"
+    />
+  </div>
+);
+
+export default InactivityAlert;
diff --git a/app/(main)/(home)/components/WidgetRow.tsx b/app/(main)/(home)/components/WidgetRow.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import * as React from 'react';
+
+import { DashboardDTO } from '@/types/DashboardType';
+import Widget from '@components/Cards/Widget';
+import { AudioWaveform, Bike, CircleSlash, Shapes } from 'lucide-react';
+import Progress from '@components/ui/Progress/Progress';
+import AverageHappinessButton from '@components/Buttons/AverageHappinessButton';
+
+interface DashboardOverviewProps {
+  dashboardData?: DashboardDTO;
+}
+
+const WidgetRow: React.FC<DashboardOverviewProps> = ({ dashboardData }) => (
+  <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+    <Widget
+      header={{
+        title: 'Average Happiness',
+        icon: <CircleSlash />,
+      }}
+      content={{
+        mainContent: <AverageHappinessButton score={dashboardData?.averageScore ?? 0} />,
+      }}
+    />
+    <Widget
+      header={{
+        title: 'Current Sprint',
+        icon: <Bike />,
+      }}
+      content={{
+        mainContent: <Progress value={85} aria-label="12% increase" />,
+        subContent: '4 days left',
+      }}
+    />
+    <Widget
+      header={{
+        title: 'Most tracked Emotions',
+        icon: <AudioWaveform />,
+      }}
+      content={{
+        mainContent: <div> Bored, Lonely, Sick</div>,
+      }}
+    />
+    <Widget
+      header={{
+        title: 'Most Tracked Worktype',
+        icon: <Shapes />,
+      }}
+      content={{
+        mainContent: dashboardData?.mostVotedWorkKind ? dashboardData?.mostVotedWorkKind?.workKindName : '-',
+        subContent: 'tracked 37 times, Happiness :(',
+      }}
+    />
+  </div>
+);
+
+export default WidgetRow;
diff --git a/app/(main)/(home)/components/WorkKindSurvey.tsx b/app/(main)/(home)/components/WorkKindSurvey.tsx
@@ -1,11 +1,11 @@
 'use client';
 
 import * as React from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '@components/ui/Card/Card';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@components/ui/Card/Card';
 import { toast } from '@components/ui/Toast/use-toast';
 import { WorkKind } from '@/types/WorkKindType';
 import { Annoyed, Frown, Laugh, Smile } from 'lucide-react';
-import { Table, TableCell, TableHead, TableHeader, TableRow } from '@components/ui/Table/BasicTable';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@components/ui/Table/BasicTable';
 import useDashboardClient from '@hooks/useDashboardClient';
 import { SubmitWorkKindScoreDTO } from '@/types/SurveyType';
 import { User } from '@/types/UserType';
@@ -48,59 +48,60 @@ const WorkKindSurvey: React.FC<WorkKindSurveyProps> = ({ fetchDashboardData, wor
     <Card>
       <CardHeader>
         <CardTitle className="space-x-2 text-sm font-medium">Survey</CardTitle>
-      </CardHeader>
-
-      <CardContent>
-        <div className="text-2xl font-bold">How happy are you with specific worktypes?</div>
-        <p className="text-muted-foreground text-s">
+        <CardTitle className="text-2xl font-bold">How happy are you with specific worktypes?</CardTitle>
+        <CardDescription className="text-muted-foreground text-2lg">
           We want to understand your satisfaction with the different types of work you do. Your feedback helps us
           improve and tailor tasks to better fit your preferences.
-        </p>
+        </CardDescription>
+      </CardHeader>
 
+      <CardContent>
         <Table className="mt-5">
           <TableHeader>
             <TableRow>
               <TableHead className="font-semibold">Work type</TableHead>
               <TableHead className="font-semibold">Happiness</TableHead>
             </TableRow>
           </TableHeader>
-          {workKinds.map((workKind) => (
-            <TableRow>
-              <TableCell className="font-light">{workKind.name}</TableCell>
-              <TableCell className="font">
-                <div className="flex space-x-2">
-                  <SurveyHappinessButton
-                    score={2}
-                    size="icon"
-                    onClick={(score) => handleClick(score, workKind.id)}
-                    className="bg-tertiaryBG-light"
-                    icon={<Frown className="h-6 w-6" />}
-                  />
-                  <SurveyHappinessButton
-                    score={8}
-                    size="icon"
-                    onClick={(score) => handleClick(score, workKind.id)}
-                    className="bg-primaryRed-light text-primaryRed-main"
-                    icon={<Annoyed className="h-6 w-6" />}
-                  />
-                  <SurveyHappinessButton
-                    score={14}
-                    size="icon"
-                    onClick={(score) => handleClick(score, workKind.id)}
-                    className="bg-primaryBlue-light text-primaryBlue-main"
-                    icon={<Smile className="h-6 w-6" />}
-                  />
-                  <SurveyHappinessButton
-                    score={20}
-                    size="icon"
-                    onClick={(score) => handleClick(score, workKind.id)}
-                    className="bg-primaryGreen-light text-primaryGreen-main"
-                    icon={<Laugh className="h-6 w-6" />}
-                  />
-                </div>
-              </TableCell>
-            </TableRow>
-          ))}
+          <TableBody>
+            {workKinds.map((workKind) => (
+              <TableRow key={workKind.id}>
+                <TableCell className="font-light">{workKind.name}</TableCell>
+                <TableCell className="font">
+                  <div className="flex space-x-2">
+                    <SurveyHappinessButton
+                      score={2}
+                      size="icon"
+                      onClick={(score) => handleClick(score, workKind.id)}
+                      className="bg-tertiaryBG-light"
+                      icon={<Frown className="h-6 w-6" />}
+                    />
+                    <SurveyHappinessButton
+                      score={8}
+                      size="icon"
+                      onClick={(score) => handleClick(score, workKind.id)}
+                      className="bg-primaryRed-light text-primaryRed-main"
+                      icon={<Annoyed className="h-6 w-6" />}
+                    />
+                    <SurveyHappinessButton
+                      score={14}
+                      size="icon"
+                      onClick={(score) => handleClick(score, workKind.id)}
+                      className="bg-primaryBlue-light text-primaryBlue-main"
+                      icon={<Smile className="h-6 w-6" />}
+                    />
+                    <SurveyHappinessButton
+                      score={20}
+                      size="icon"
+                      onClick={(score) => handleClick(score, workKind.id)}
+                      className="bg-primaryGreen-light text-primaryGreen-main"
+                      icon={<Laugh className="h-6 w-6" />}
+                    />
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
         </Table>
       </CardContent>
     </Card>