DEAR-122 add average happiness per most tracked workkind

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

@@ -4,7 +4,7 @@ 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 { AudioWaveform, Bike, CircleSlash } from 'lucide-react';
 import Progress from '@components/ui/Progress/Progress';
 import AverageHappinessButton from '@components/Buttons/AverageHappinessButton';
 
@@ -44,12 +44,17 @@ const WidgetRow: React.FC<DashboardOverviewProps> = ({ dashboardData }) => (
     />
     <Widget
       header={{
-        title: 'Most Tracked Worktype',
-        icon: <Shapes />,
+        title: `Most Tracked Worktype - tracked ${dashboardData?.mostVotedWorkKind ? dashboardData?.mostVotedWorkKind?.voteCount : 0} times`,
       }}
       content={{
-        mainContent: dashboardData?.mostVotedWorkKind ? dashboardData?.mostVotedWorkKind?.workKindName : '-',
-        subContent: 'tracked 37 times, Happiness :(',
+        mainContent: dashboardData?.mostVotedWorkKind ? (
+          <div className="flex items-center space-x-4">
+            <span>{dashboardData.mostVotedWorkKind.workKindName}</span>
+            <AverageHappinessButton score={dashboardData?.mostVotedWorkKind.happinessScore ?? 0} size="h-8 w-8" />
+          </div>
+        ) : (
+          '-'
+        ),
       }}
     />
   </div>

components/Buttons/AverageHappinessButton.tsx

@@ -4,24 +4,25 @@ import { AverageScoreResponse } from '@/types/DashboardType';
 
 interface HappinessButtonProps {
   score: AverageScoreResponse | number;
+  size?: string;
 }
 
-const AverageHappinessButton: React.FC<HappinessButtonProps> = ({ score }) => {
+const AverageHappinessButton: React.FC<HappinessButtonProps> = ({ score, size }) => {
   const scoreValue = typeof score === 'number' ? score : score.averageScore;
 
   if (scoreValue > 0 && scoreValue < 5) {
-    return <Frown className="rotate-360 h-20 w-20 text-black" />;
+    return <Frown className={`rotate-360 h-16 w-16 text-black ${size}`} />;
   }
   if (scoreValue >= 5 && scoreValue < 11) {
-    return <Annoyed className="rotate-360 h-20 w-20 text-primaryRed-main" />;
+    return <Annoyed className={`rotate-360 h-16 w-16 text-primaryRed-main ${size}`} />;
   }
   if (scoreValue >= 11 && scoreValue < 17) {
-    return <Smile className="rotate-360 h-20 w-20 text-primaryBlue-main" />;
+    return <Smile className={`rotate-360 h-16 w-16 text-primaryBlue-main ${size}`} />;
   }
   if (scoreValue >= 17 && scoreValue <= 21) {
-    return <Laugh className="rotate-360 h-20 w-20 text-primaryGreen-main" />;
+    return <Laugh className={`rotate-360 h-16 w-16 text-primaryGreen-main ${size}`} />;
   }
-  return <BoxSelect className="h-20 w-20 text-black" />;
+  return <BoxSelect className={`h-16 w-16 text-black ${size}`} />;
 };
 
 export default AverageHappinessButton;

types/DashboardType.ts

@@ -7,6 +7,7 @@ export interface MostVotedWorkKind {
   workKindId: number;
   workKindName: string;
   voteCount: number;
+  happinessScore: number;
 }
 
 export interface AverageScoreResponse {