DEAR-122 submit emotions

app/(main)/(home)/components/EmotionSurvey.tsx

@@ -4,6 +4,9 @@ import * as React from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@components/ui/Card/Card';
 import { User } from '@/types/UserType';
 import { Emotion } from '@/types/EmotionType';
+import { Badge } from '@components/ui/Badge/Badge';
+import { toast } from '@components/ui/Toast/use-toast';
+import useDashboardClient from '@hooks/useDashboardClient';
 
 interface EmotionSurveyProps {
   emotions: Array<Emotion>;
@@ -12,17 +15,52 @@ interface EmotionSurveyProps {
 }
 
 const EmotionSurvey: React.FC<EmotionSurveyProps> = ({ fetchDashboardData, emotions, user }) => {
+  const { submitEmotions } = useDashboardClient();
+
+  const handleClick = async (emotionId: number) => {
+    try {
+      await submitEmotions({ userId: user.id, emotionId });
+      toast({
+        title: 'Success!',
+        description: `Emotion submitted`,
+      });
+      fetchDashboardData();
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (error: any) {
+      toast({
+        title: 'Error!',
+        description: `Failed to submit emotion: ${error.message}`,
+        variant: 'destructive',
+      });
+    }
+  };
+
   return (
     <Card>
       <CardHeader>
         <CardTitle className="space-x-2 text-sm font-medium">Survey</CardTitle>
       </CardHeader>
 
       <CardContent>
-        <div className="text-2xl font-bold">How are you feeling?</div>
-        <p className="text-muted-foreground text-s">sadasasd asd</p>
+        <div className="text-2xl font-bold">How do you feel?</div>
+        <p className="text-muted-foreground text-s">
+          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>
 
-        {emotions.map((emotion) => emotion.name)}
+        <div className="mt-4 flex flex-wrap gap-2">
+          {emotions.map((emotion) => (
+            <Badge
+              key={emotion.id}
+              variant="secondary"
+              onClick={() => handleClick(emotion.id)}
+              className="cursor-pointer p-4 text-sm transition-colors duration-200 ease-in-out hover:bg-primaryBlue-main"
+            >
+              {emotion.name}
+            </Badge>
+          ))}
+        </div>
       </CardContent>
     </Card>
   );

app/(main)/(home)/components/HappinessSurvey.tsx

@@ -57,7 +57,8 @@ const HappinessSurvey: React.FC<HappinessSurveyProps> = ({ fetchDashboardData, u
       <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">
-          Submit your overall happiness survey to track your happiness with your work day.
+          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>
         <div className="flex flex-row items-center justify-between">
           <SurveyHappinessButton

app/(main)/(home)/components/WorkKindSurvey.tsx

@@ -53,7 +53,8 @@ const WorkKindSurvey: React.FC<WorkKindSurveyProps> = ({ fetchDashboardData, wor
       <CardContent>
         <div className="text-2xl font-bold">How happy are you with specific worktypes?</div>
         <p className="text-muted-foreground text-s">
-          Submit your happiness for specific worktypes. Only fill out the relevant ones!
+          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>
 
         <Table className="mt-5">

app/(main)/(home)/page.tsx

@@ -94,7 +94,7 @@ const Home: React.FC = () => {
     fetchDashboardData().then((r) => r);
   }, [user]);
 
-  if (isLoading || isLoadingWorkKinds) return <Loading />;
+  if (isLoading || isLoadingWorkKinds || isLoadingEmotions) return <Loading />;
   if (error) return <Error errorMessage="It seems there was a problem loading your account." action="/" showContact />;
 
   return (
@@ -160,22 +160,24 @@ const Home: React.FC = () => {
           </div>
 
           <div className="grid grid-cols-2 gap-4">
-            <HappinessSurvey fetchDashboardData={fetchDashboardData} user={user} />
-            <EmotionSurvey fetchDashboardData={fetchDashboardData} emotions={emotions} user={user} />
-
-            <BasicSmallCard
-              header={{
-                title: 'Survey',
-              }}
-              content={{
-                mainContent: 'Emotions',
-                subContent: 'sdfsdfsdf',
-              }}
-            />
-          </div>
-          <div className="grid grid-cols-2 gap-4">
-            <WorkKindSurvey fetchDashboardData={fetchDashboardData} workKinds={workKinds} user={user} />
-            <Feedback />
+            <div className="space-y-4">
+              <HappinessSurvey fetchDashboardData={fetchDashboardData} user={user} />
+              <EmotionSurvey fetchDashboardData={fetchDashboardData} emotions={emotions} user={user} />
+              <Feedback />
+            </div>
+            <div className="space-y-4">
+              <WorkKindSurvey fetchDashboardData={fetchDashboardData} workKinds={workKinds} user={user} />
+              <BasicSmallCard
+                header={{
+                  title: 'Current Sprint',
+                  icon: <ShipWheel />,
+                }}
+                content={{
+                  mainContent: <Progress value={85} aria-label="12% increase" />,
+                  subContent: '4 days left',
+                }}
+              />
+            </div>
           </div>
         </div>
       ) : (

components/ui/Badge/Badge.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import cn from '@/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-slate-900 text-slate-50 hover:bg-slate-900/80 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/80',
+        secondary:
+          'border-transparent bg-slate-100 text-slate-900 hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800/80',
+        destructive:
+          'border-transparent bg-red-500 text-slate-50 hover:bg-red-500/80 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/80',
+        outline: 'text-slate-950 dark:text-slate-50',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

hooks/useDashboardClient.ts

@@ -1,7 +1,7 @@
 import axios, { AxiosResponse } from 'axios';
 import { useAuth } from '@providers/AuthProvider';
 import { API_BASE_URL } from '@/lib/api/apiClient';
-import { SubmitHappinessScoreDTO, SubmitWorkKindScoreDTO } from '@/types/SurveyType';
+import { SubmitEmotionsDTO, SubmitHappinessScoreDTO, SubmitWorkKindScoreDTO } from '@/types/SurveyType';
 import { AverageScoreResponse, DashboardDTO } from '@/types/DashboardType';
 
 const client = axios.create({ withCredentials: true, baseURL: API_BASE_URL });
@@ -20,12 +20,16 @@ const useDashboardClient = () => {
   const submitWorkKindScore = async (body: SubmitWorkKindScoreDTO): Promise<AxiosResponse<SubmitWorkKindScoreDTO>> =>
     client.post('/v1/dashboard/survey/workkind', body);
 
+  const submitEmotions = async (body: SubmitEmotionsDTO): Promise<AxiosResponse<SubmitEmotionsDTO>> =>
+    client.post('/v1/dashboard/survey/emotion', body);
+
   const getDashboardData = async (userId: string): Promise<AxiosResponse<DashboardDTO>> =>
     client.get(`/v1/dashboard/${userId}`);
 
   return {
     submitHappinessScore,
     submitWorkKindScore,
+    submitEmotions,
     getAverageScore,
     getDashboardData,
   };

types/SurveyType.ts

@@ -8,3 +8,8 @@ export interface SubmitWorkKindScoreDTO {
   workKindId: number | undefined;
   score: number;
 }
+
+export interface SubmitEmotionsDTO {
+  userId: string | undefined;
+  emotionId: number | undefined;
+}