DEAR-122 add workkind survey table

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

@@ -18,12 +18,6 @@ const HappinessSurvey: React.FC<HappinessSurveyProps> = ({ fetchAverageScore, us
   const [rotateButton, setRotateButton] = React.useState<number | null>(null);
   const { submitHappinessScore } = useSurveyClient();
 
-  const handleClick = (score: number) => {
-    setRotateButton(score);
-    setTimeout(() => setRotateButton(null), 1000);
-    handleHappinessSubmit(score);
-  };
-
   const iconClasses = (score: number) => `h-12 w-12 ${rotateButton === score ? 'rotate-360' : ''}`;
 
   const handleHappinessSubmit = async (score: number) => {
@@ -38,7 +32,7 @@ const HappinessSurvey: React.FC<HappinessSurveyProps> = ({ fetchAverageScore, us
           description: `Survey Submitted`,
         });
       });
-      await fetchAverageScore();
+      fetchAverageScore();
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (submitError: any) {
       toast({
@@ -48,6 +42,13 @@ const HappinessSurvey: React.FC<HappinessSurveyProps> = ({ fetchAverageScore, us
       });
     }
   };
+
+  const handleClick = (score: number) => {
+    setRotateButton(score);
+    setTimeout(() => setRotateButton(null), 1000);
+    handleHappinessSubmit(score);
+  };
+
   return (
     <Card>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
@@ -61,24 +62,28 @@ const HappinessSurvey: React.FC<HappinessSurveyProps> = ({ fetchAverageScore, us
         <div className="flex flex-row items-center justify-between">
           <SurveyHappinessButton
             score={2}
+            size="mood"
             onClick={handleClick}
             className="bg-tertiaryBG-light"
             icon={<Frown className={iconClasses(2)} />}
           />
           <SurveyHappinessButton
             score={8}
+            size="mood"
             onClick={handleClick}
             className="bg-primaryRed-light text-primaryRed-main"
             icon={<Annoyed className={iconClasses(8)} />}
           />
           <SurveyHappinessButton
             score={14}
+            size="mood"
             onClick={handleClick}
             className="bg-primaryBlue-light text-primaryBlue-main"
             icon={<Smile className={iconClasses(14)} />}
           />
           <SurveyHappinessButton
             score={20}
+            size="mood"
             onClick={handleClick}
             className="bg-primaryGreen-light text-primaryGreen-main"
             icon={<Laugh className={iconClasses(20)} />}

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

@@ -7,10 +7,10 @@ import { Button } from '@components/ui/Buttons/Button';
 import { WorkKind } from '@/types/WorkKindType';
 import { Annoyed, Frown, Laugh, PlusCircle, Smile } from 'lucide-react';
 import { Table, TableCell, TableHead, TableHeader, TableRow } from '@components/ui/Table/BasicTable';
-import { ToggleGroup, ToggleGroupItem } from '@components/ui/ToggleGroup/ToggleGroup';
 import useSurveyClient from '@hooks/useSurveyClient';
 import { SubmitWorkKindScoreDTO } from '@/types/SurveyType';
 import { User } from '@/types/UserType';
+import SurveyHappinessButton from '@components/Buttons/SurveyHappinessButton';
 
 interface WorkKindSurveyProps {
   workKinds: Array<WorkKind>;
@@ -20,9 +20,9 @@ interface WorkKindSurveyProps {
 const WorkKindSurvey: React.FC<WorkKindSurveyProps> = ({ workKinds, user }) => {
   const { submitWorkKindScore } = useSurveyClient();
 
-  const handleToggle = async (value: number, workKindId: number) => {
+  const handleClick = async (score: number, workKindId: number) => {
     const workKindScore: SubmitWorkKindScoreDTO = {
-      score: value,
+      score,
       userId: user.id,
       workKindId,
     };
@@ -33,6 +33,7 @@ const WorkKindSurvey: React.FC<WorkKindSurveyProps> = ({ workKinds, user }) => {
         title: 'Success!',
         description: `Happiness score submitted`,
       });
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (error: any) {
       toast({
         title: 'Error!',
@@ -49,98 +50,65 @@ const WorkKindSurvey: React.FC<WorkKindSurveyProps> = ({ workKinds, user }) => {
       </CardHeader>
 
       <CardContent>
-        <div className="text-2xl font-bold">How happy are you with the specific work kinds?</div>
+        <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 work kinds to track your happiness with different kind of tasks.
+          Submit your happiness for specific worktypes. Only fill out the relevant ones!
         </p>
 
-        <Table className={'mt-5'}>
+        <Table className="mt-5">
           <TableHeader>
             <TableRow>
-              <TableHead className="w-[100px]">Workkind</TableHead>
-              <TableHead className="w-[100px]">Happiness</TableHead>
+              <TableHead className="font-semibold">Work type</TableHead>
+              <TableHead className="font-semibold">Happiness</TableHead>
             </TableRow>
           </TableHeader>
-          <TableRow>
-            <TableCell className="font-semibold">asdasd</TableCell>
-            <TableCell className="font">
-              <ToggleGroup type="single" defaultValue="s" variant={'outline'}>
-                <ToggleGroupItem value="2" onClick={() => handleToggle(2, 1)}>
-                  <Frown className={'bg-tertiaryBG-light'} />
-                </ToggleGroupItem>
-                <ToggleGroupItem value="8" onClick={() => handleToggle(8, 1)}>
-                  <Annoyed />
-                </ToggleGroupItem>
-                <ToggleGroupItem value="14" onClick={() => handleToggle(8, 1)}>
-                  <Smile />
-                </ToggleGroupItem>
-                <ToggleGroupItem value="20" onClick={() => handleToggle(8, 1)}>
-                  <Laugh />
-                </ToggleGroupItem>
-              </ToggleGroup>
-            </TableCell>
-          </TableRow>
+          {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>
+          ))}
         </Table>
       </CardContent>
       <CardFooter className="justify-center border-t p-4">
         <Button size="sm" variant="ghost" className="gap-1">
           <PlusCircle className="h-3.5 w-3.5" />
-          Add Workkind
+          Add Worktype
         </Button>
       </CardFooter>
     </Card>
   );
-
-  // <Card>
-  //   <CardHeader>
-  //     <CardTitle>?</CardTitle>
-  //     <CardDescription>
-  //       Submit your happiness for specific work kinds to track your happiness with different kind of tasks.
-  //     </CardDescription>
-  //   </CardHeader>
-
-  {
-    /*  <form onSubmit={handleSubmit(onSubmit)}>*/
-  }
-  {
-    /*    <CardContent>*/
-  }
-  {
-    /*      <div className="mb-4">*/
-  }
-  {
-    /*        <div className="mt-2">*/
-  }
-  {
-    /*          <TaskPopover onSmilieChange={handleSmilieChange} workKinds={workKinds} />*/
-  }
-  {
-    /*          <Button className="h-8" type="button">*/
-  }
-  {
-    /*            New Workkind*/
-  }
-  {
-    /*          </Button>*/
-  }
-  {
-    /*        </div>*/
-  }
-  {
-    /*        {errors.question2 && <span className="text-red-500">This field is required</span>}*/
-  }
-  {
-    /*      </div>*/
-  }
-  {
-    /*    </CardContent>*/
-  }
-  {
-    /*  </form>*/
-  }
-  {
-    /*</Card>*/
-  }
 };
 
 export default WorkKindSurvey;

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

@@ -9,7 +9,7 @@ import { Bike, CircleSlash, Megaphone, Shapes, ShipWheel } from 'lucide-react';
 import HappinessSurvey from '@/(main)/(home)/components/HappinessSurvey';
 import Feedback from '@components/Surveys/Feedback';
 import BasicSmallCard from '@components/Cards/BasicCard';
-import { AverageScoreResponse, SubmitHappinessScoreDTO } from '@/types/SurveyType';
+import { AverageScoreResponse } from '@/types/SurveyType';
 import useSurveyClient from '@hooks/useSurveyClient';
 import { toast } from '@components/ui/Toast/use-toast';
 import AverageHappinessButton from '@components/Buttons/AverageHappinessButton';
@@ -21,24 +21,13 @@ import WorkKindSurvey from '@/(main)/(home)/components/WorkKindSurvey';
 const Home: React.FC = () => {
   const { user, isLoading, error } = useAuth();
   const router = useRouter();
-  const { submitHappinessScore, getAverageScore } = useSurveyClient();
+  const { getAverageScore } = useSurveyClient();
   const { getWorkKinds } = useWorkKindClient();
   const [averageScore, setAverageScore] = React.useState<AverageScoreResponse>();
   const [workKinds, setWorkKinds] = React.useState<WorkKind[]>([]);
-  const [isLoadingWorkKinds, setIsLoadingWorkKinds] = React.useState<boolean>(true);
-  const [errorLoadingWorkKinds, setErrorLoadingWorkKinds] = React.useState<string | null>(null);
+  const [isLoadingWorkKinds, setIsLoadingWorkKinds] = React.useState<boolean>();
 
-  React.useEffect(() => {
-    if (!isLoading && user && !user.hasTeam) {
-      router.push('/onboarding');
-    } else {
-      fetchWorkKinds().then((r) => r);
-    }
-  }, [isLoading, user, router]);
-
-  React.useEffect(() => {
-    fetchAverageScore().then((r) => r);
-  }, [user, getAverageScore]);
+  // todo display this alert card only if there were no entries in the last 2 days*/
 
   const fetchAverageScore = async () => {
     if (!user) return;
@@ -70,14 +59,25 @@ const Home: React.FC = () => {
     }
   };
 
-  if (isLoading) return <Loading />;
+  React.useEffect(() => {
+    if (!isLoading && user && !user.hasTeam) {
+      router.push('/onboarding');
+    } else {
+      fetchWorkKinds().then((r) => r);
+    }
+  }, [isLoading, user, router]);
+
+  React.useEffect(() => {
+    fetchAverageScore().then((r) => r);
+  }, [user, getAverageScore]);
+
+  if (isLoading || isLoadingWorkKinds) return <Loading />;
   if (error) return <Error errorMessage="It seems there was a problem loading your account." action="/" showContact />;
 
   return (
     <div>
       {user && user.hasTeam ? (
         <div className="space-y-4">
-          {/*todo display this card only if there were no entries in the last 2 days*/}
           <BasicSmallCard
             header={{
               title: 'We think you forgot something?!',
@@ -126,7 +126,7 @@ const Home: React.FC = () => {
             />
             <BasicSmallCard
               header={{
-                title: 'Most Tracked Workkind',
+                title: 'Most Tracked Worktypes',
                 icon: <Shapes />,
               }}
               content={{

app/(main)/insights/components/WorkkindRadarChart.tsx

@@ -44,9 +44,9 @@ export default function WorkkindRadarChart() {
         <div className="flex w-full items-start gap-2 text-sm">
           <div className="grid gap-2">
             <div className="flex items-center gap-2">
-              <p className="font-semibold">Trackings per workkind</p>
+              <p className="font-semibold">Trackings per work type</p>
             </div>
-            <div className="flex items-center text-xs font-light">Showing number of tracked workkinds this year</div>
+            <div className="flex items-center text-xs font-light">Showing number of tracked worktypes this year</div>
           </div>
         </div>
       </CardFooter>

components/Buttons/SurveyHappinessButton.tsx

@@ -6,10 +6,11 @@ interface SurveyButtonProps {
   onClick: (score: number) => void;
   className: string;
   icon: React.ReactNode;
+  size: 'icon' | 'default' | 'mood' | 'sm' | 'lg' | 'navigation' | null | undefined;
 }
 
-const SurveyHappinessButton: React.FC<SurveyButtonProps> = ({ score, onClick, className, icon }) => (
-  <Button onClick={() => onClick(score)} variant="mood" size="mood" className={className}>
+const SurveyHappinessButton: React.FC<SurveyButtonProps> = ({ score, onClick, className, icon, size }) => (
+  <Button onClick={() => onClick(score)} variant="mood" size={size} className={className}>
     {icon}
   </Button>
 );

components/ui/Progress/Progress.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import * as React from 'react';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 

components/ui/Table/BasicTable.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable react/prop-types */
+
 import * as React from 'react';
 
 import cn from '@/lib/utils';