- {emotions.map((emotion) => (
-
handleClick(emotion.id)}
- className="cursor-pointer p-4 text-sm transition-colors duration-200 ease-in-out hover:bg-primaryBlue-main"
- >
- {emotion.name}
-
- ))}
+
+
+
+ {emotions.map((emotion) => (
+ handleClick(emotion.id)}
+ >
+ {emotion.name.toUpperCase()}
+
+ ))}
+
+
How do you feel?
diff --git a/app/(main)/(home)/components/HappinessSurvey.tsx b/app/(main)/(home)/components/HappinessSurvey.tsx
index 21ae722..1038d06 100644
--- a/app/(main)/(home)/components/HappinessSurvey.tsx
+++ b/app/(main)/(home)/components/HappinessSurvey.tsx
@@ -1,13 +1,14 @@
'use client';
import * as React from 'react';
-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 { User } from '@/types/UserType';
+import { Card, CardContent, CardHeader } from '@components/ui/Card/Card';
+import useDashboardClient from '@hooks/useDashboardClient';
import { SubmitHappinessScoreDTO } from '@/types/SurveyType';
+import { Annoyed, Frown, Laugh, Smile } from 'lucide-react';
+import { Button } from '@components/ui/Buttons/Button';
import { toast } from '@components/ui/Toast/use-toast';
-import useDashboardClient from '@hooks/useDashboardClient';
-import { User } from '@/types/UserType';
+import SurveyHoverCard from './SurveyHoverCard';
interface HappinessSurveyProps {
fetchDashboardData: () => void;
@@ -15,11 +16,8 @@ interface HappinessSurveyProps {
}
const HappinessSurvey: React.FC
= ({ fetchDashboardData, user }) => {
- const [rotateButton, setRotateButton] = React.useState(null);
const { submitHappinessScore } = useDashboardClient();
- const iconClasses = (score: number) => `h-12 w-12 ${rotateButton === score ? 'rotate-360' : ''}`;
-
const handleHappinessSubmit = async (score: number) => {
const happinessScore: SubmitHappinessScoreDTO = {
score,
@@ -44,51 +42,35 @@ const HappinessSurvey: React.FC = ({ fetchDashboardData, u
};
const handleClick = (score: number) => {
- setRotateButton(score);
- setTimeout(() => setRotateButton(null), 1000);
handleHappinessSubmit(score);
};
return (
-
-
- Survey
- How happy are you with your working 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.
-
+
+
+
+
-
-
-
}
- />
-
}
- />
-
}
- />
-
}
- />
+
+
+
+
handleClick(2)}>
+
+
handleClick(8)}>
+
+
handleClick(14)}>
+
+
handleClick(20)}>
+
+
+
How happy are you with your working day?
diff --git a/app/(main)/(home)/components/InactivityAlert.tsx b/app/(main)/(home)/components/InactivityAlert.tsx
deleted file mode 100644
index deff3a4..0000000
--- a/app/(main)/(home)/components/InactivityAlert.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-import { DashboardDTO } from '@/types/DashboardType';
-import Widget from '@components/Cards/Widget';
-import { Activity, Annoyed, Bike, CircleSlash2, Component, Megaphone, Siren } from 'lucide-react';
-import AlertWidget from './AlertWidget';
-import Widget2 from './Widget';
-import SprintWidget from './SprintWidget';
-
-interface DashboardOverviewProps {
- dashboardData?: DashboardDTO;
-}
-
-const InactivityAlert: React.FC
= ({ dashboardData }) => (
-
-
} days={12} />
-
-
-
-
}
- content={
}
- description="Average Happiness"
- />
-
} content="Bored, Lonely" description="Most tracked emotions" />
-
} content="4" description="Days left in the sprint" />
-
} content="Coding" description="Most tracked worktype" />
-
-
} days={12} />
-
,
- }}
- content={{
- mainContent: 'No Happiness tracking since 52 days.',
- subContent: dashboardData?.averageScore,
- }}
- borderColor="border-primaryBlue-main"
- fontColor="text-primaryBlue-main"
- />
-
= ({ icon, content, description }) => (
-
-
-
-
- {icon}
-
-
-
-
-
{content}
-
{description}
-
-
-);
+const SprintWidget: React.FC = ({ icon, content, description }) => {
+ const controls = useAnimation();
+
+ const handleHoverStart = () => {
+ controls.start({
+ x: [-30, 30],
+ });
+ };
+
+ const handleHoverEnd = () => {
+ controls.stop();
+ controls.set({ x: 0 });
+ };
+
+ return (
+
+
+
+
+
+
+ {icon}
+
+
+
+
+
+
{content}
+
{description}
+
+
+
+ );
+};
export default SprintWidget;
diff --git a/app/(main)/(home)/components/SurveyHoverCard.tsx b/app/(main)/(home)/components/SurveyHoverCard.tsx
new file mode 100644
index 0000000..798f357
--- /dev/null
+++ b/app/(main)/(home)/components/SurveyHoverCard.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { HoverCard, HoverCardTrigger, HoverCardContent } from '@components/ui/HoverCard/HoverCard';
+import { FilePlus } from 'lucide-react';
+
+interface SurveyHoverCardProps {
+ title: string;
+ description: string;
+}
+
+const SurveyHoverCard: React.FC = ({ title, description }) => (
+
+
+
+
+
+
+
+
+
+
+
+
{title}
+
{description}
+
+
+
+
+);
+
+export default SurveyHoverCard;
diff --git a/app/(main)/(home)/components/Widget.tsx b/app/(main)/(home)/components/Widget.tsx
index 027706e..0ece139 100644
--- a/app/(main)/(home)/components/Widget.tsx
+++ b/app/(main)/(home)/components/Widget.tsx
@@ -7,7 +7,7 @@ interface WidgetProps {
description: string;
}
-const Widget2: React.FC = ({ icon, content, description }) => (
+const Widget: React.FC = ({ icon, content, description }) => (
@@ -17,11 +17,11 @@ const Widget2: React.FC = ({ icon, content, description }) => (
-
{content}
+
{content}
{description}
);
-export default Widget2;
+export default Widget;
diff --git a/app/(main)/(home)/components/WidgetRow.tsx b/app/(main)/(home)/components/WidgetRow.tsx
deleted file mode 100644
index 67c5a24..0000000
--- a/app/(main)/(home)/components/WidgetRow.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-import { DashboardDTO } from '@/types/DashboardType';
-import Widget from '@components/Cards/Widget';
-import { AudioWaveform, Bike, CircleSlash } from 'lucide-react';
-import Progress from '@components/ui/Progress/Progress';
-import AverageHappinessButton from '@components/Buttons/AverageHappinessButton';
-
-interface DashboardOverviewProps {
- dashboardData?: DashboardDTO;
-}
-
-const WidgetRow: React.FC = ({ dashboardData }) => (
-
-
,
- }}
- content={{
- mainContent:
,
- }}
- />
-
,
- }}
- content={{
- mainContent:
,
- subContent: '4 days left',
- }}
- />
-
,
- }}
- content={{
- mainContent:
Bored, Lonely, Sick
,
- }}
- />
-
- {dashboardData.mostVotedWorkKind.workKindName}
- ;
- user: User;
- fetchDashboardData: () => void;
-}
-
-const WorkKindSurvey: React.FC = ({ fetchDashboardData, workKinds, user }) => {
- const { submitWorkKindScore } = useDashboardClient();
-
- const handleClick = async (score: number, workKindId: number) => {
- const workKindScore: SubmitWorkKindScoreDTO = {
- score,
- userId: user.id,
- workKindId,
- };
-
- try {
- await submitWorkKindScore(workKindScore);
- toast({
- title: 'Success!',
- description: `Happiness score submitted`,
- });
- fetchDashboardData();
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- } catch (error: any) {
- toast({
- title: 'Error!',
- description: `Failed to submit score: ${error.message}`,
- variant: 'destructive',
- });
- }
- };
-
- return (
-
-
- Survey
- How happy are you with specific worktypes?
-
- 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.
-
-
-
-
-
-
-
- Work type
- Happiness
-
-
-
- {workKinds.map((workKind) => (
-
- {workKind.name}
-
-
-
handleClick(score, workKind.id)}
- className="bg-tertiaryBG-light"
- icon={ handleClick(score, workKind.id)}
- className="bg-primaryRed-light text-primaryRed-main"
- icon={ handleClick(score, workKind.id)}
- className="bg-primaryBlue-light text-primaryBlue-main"
- icon={ handleClick(score, workKind.id)}
- className="bg-primaryGreen-light text-primaryGreen-main"
- icon={
-
- ))}
-
-
-
-
- );
-};
-
-export default WorkKindSurvey;
diff --git a/app/(main)/(home)/components/WorktypeSurvey.tsx b/app/(main)/(home)/components/WorktypeSurvey.tsx
new file mode 100644
index 0000000..941d55f
--- /dev/null
+++ b/app/(main)/(home)/components/WorktypeSurvey.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import * as React from 'react';
+import { Card, CardContent, CardHeader } from '@components/ui/Card/Card';
+import { WorkKind } from '@/types/WorkKindType';
+import { Annoyed, Frown, Laugh, Smile } from 'lucide-react';
+import useDashboardClient from '@hooks/useDashboardClient';
+import { User } from '@/types/UserType';
+import { SubmitWorkKindScoreDTO } from '@/types/SurveyType';
+import { Button } from '@components/ui/Buttons/Button';
+import { toast } from '@components/ui/Toast/use-toast';
+import SurveyHoverCard from './SurveyHoverCard';
+
+interface WorktypeSurveyProps {
+ workKinds: Array;
+ user: User;
+ fetchDashboardData: () => void;
+}
+
+const WorktypeSurvey: React.FC = ({ fetchDashboardData, workKinds, user }) => {
+ const { submitWorkKindScore } = useDashboardClient();
+
+ const handleClick = async (score: number, workKindId: number) => {
+ const workKindScore: SubmitWorkKindScoreDTO = {
+ score,
+ userId: user.id,
+ workKindId,
+ };
+
+ try {
+ await submitWorkKindScore(workKindScore);
+ toast({
+ title: 'Success!',
+ description: `Happiness score submitted`,
+ });
+ fetchDashboardData();
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ } catch (error: any) {
+ toast({
+ title: 'Error!',
+ description: `Failed to submit score: ${error.message}`,
+ variant: 'destructive',
+ });
+ }
+ };
+
+ return (
+
+
+
+
+
+ {workKinds.map((workKind) => (
+
+
{workKind.name}
+
+
handleClick(2, workKind.id)}>
+
+
handleClick(8, workKind.id)}>
+
+
handleClick(14, workKind.id)}
+ >
+
+
handleClick(20, workKind.id)}
+ >
+
+
+
How happy are you with specific worktypes?
+
+
+ );
+};
+
+export default WorktypeSurvey;
diff --git a/app/(main)/(home)/components/index.ts b/app/(main)/(home)/components/index.ts
new file mode 100644
index 0000000..55ae29a
--- /dev/null
+++ b/app/(main)/(home)/components/index.ts
@@ -0,0 +1,6 @@
+export { default as HappinessSurvey } from './HappinessSurvey';
+export { default as WorktypeSurvey } from './WorktypeSurvey';
+export { default as EmotionSurvey } from './EmotionSurvey';
+export { default as Widget } from './Widget';
+export { default as AlertWidget } from './AlertWidget';
+export { default as SprintWidget } from './SprintWidget';
diff --git a/app/(main)/(home)/page.tsx b/app/(main)/(home)/page.tsx
index d740328..94c62e3 100644
--- a/app/(main)/(home)/page.tsx
+++ b/app/(main)/(home)/page.tsx
@@ -5,22 +5,15 @@ import { useRouter } from 'next/navigation';
import Loading from '@components/Loading/Loading';
import Error from '@components/Error/Error';
import { useAuth } from '@providers/AuthProvider';
-import { ShipWheel } from 'lucide-react';
-import HappinessSurvey from '@/(main)/(home)/components/HappinessSurvey';
-import Widget from '@components/Cards/Widget';
+import { Activity, Bike, Component, CircleSlash2, Annoyed } from 'lucide-react';
import useDashboardClient from '@hooks/useDashboardClient';
import { toast } from '@components/ui/Toast/use-toast';
import { WorkKind } from '@/types/WorkKindType';
import useWorkKindClient from '@hooks/useWorkKindClient';
-import WorkKindSurvey from '@/(main)/(home)/components/WorkKindSurvey';
import { DashboardDTO } from '@/types/DashboardType';
import useEmotionClient from '@hooks/useEmotionClient';
import { Emotion } from '@/types/EmotionType';
-import EmotionSurvey from '@/(main)/(home)/components/EmotionSurvey';
-import WidgetRow from '@/(main)/(home)/components/WidgetRow';
-import InactivityAlert from '@/(main)/(home)/components/InactivityAlert';
-import FeedbackSurvey from '@/(main)/(home)/components/FeedbackSurvey';
-import AverageHappinessButton from '@components/Buttons/AverageHappinessButton';
+import { HappinessSurvey, WorktypeSurvey, EmotionSurvey, Widget, AlertWidget, SprintWidget } from './components';
const Home: React.FC = () => {
const { user, isLoading, error } = useAuth();
@@ -28,7 +21,7 @@ const Home: React.FC = () => {
const { getDashboardData } = useDashboardClient();
const { getWorkKinds } = useWorkKindClient();
const { getEmotions } = useEmotionClient();
- const [dashboardData, setDashboardData] = React.useState();
+ const [setDashboardData] = React.useState();
const [workKinds, setWorkKinds] = React.useState([]);
const [emotions, setEmotions] = React.useState([]);
const [isLoadingWorkKinds, setIsLoadingWorkKinds] = React.useState();
@@ -100,42 +93,18 @@ const Home: React.FC = () => {
{user && user.hasTeam ? (
-
-
-
-
-
-
-
-
-
-
,
- }}
- content={{
- mainContent: 53,
- subContent: 'Story Points',
- }}
- />
-
,
- }}
- content={{
- mainContent:
,
- }}
- />
-
-
-
+
+
+
+
+
} content="4" description="Days left in the sprint" />
+
} content="Bored, Lonely" description="Most tracked emotions" />
+
} content="Coding" description="Most tracked worktype" />
+
}
+ content={
}
+ description="Average Happiness"
+ />
) : (
diff --git a/app/(onboarding)/onboarding/components/SelectableCard.tsx b/app/(onboarding)/onboarding/components/SelectableCard.tsx
index f2a903e..b28d5ad 100644
--- a/app/(onboarding)/onboarding/components/SelectableCard.tsx
+++ b/app/(onboarding)/onboarding/components/SelectableCard.tsx
@@ -12,7 +12,7 @@ interface SelectableCardProps {
const SelectableCard: React.FC
= ({ onClick, title, description, icon }) => (
diff --git a/components/Buttons/SurveyHappinessButton.tsx b/components/Buttons/SurveyHappinessButton.tsx
deleted file mode 100644
index 5ea9d52..0000000
--- a/components/Buttons/SurveyHappinessButton.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { Button } from '@components/ui/Buttons/Button';
-
-interface SurveyButtonProps {
- score: number;
- onClick: (score: number) => void;
- className: string;
- icon: React.ReactNode;
- size: 'icon' | 'default' | 'mood' | 'sm' | 'lg' | 'navigation' | null | undefined;
-}
-
-const SurveyHappinessButton: React.FC = ({ score, onClick, className, icon, size }) => (
- onClick(score)} variant="mood" size={size} className={className}>
- {icon}
-
-);
-
-export default SurveyHappinessButton;
diff --git a/components/Cards/Widget.tsx b/components/Cards/Widget.tsx
deleted file mode 100644
index 9437773..0000000
--- a/components/Cards/Widget.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { Card, CardHeader, CardTitle, CardContent } from '@components/ui/Card/Card';
-
-interface CardProps {
- header: {
- title: string;
- icon?: React.ReactNode;
- };
- content: {
- mainContent: React.ReactNode;
- subContent?: React.ReactNode;
- };
- borderColor?: string;
- fontColor?: string;
-}
-
-const Widget: React.FC = ({ header, content, borderColor, fontColor }) => (
-
-
- {header.title}
- {header.icon && {header.icon}
}
-
-
- {content.mainContent}
- {content.subContent && {content.subContent}
}
-
-
-);
-
-export default Widget;
diff --git a/components/ui/Buttons/Button.tsx b/components/ui/Buttons/Button.tsx
index 00c70f3..395b19b 100644
--- a/components/ui/Buttons/Button.tsx
+++ b/components/ui/Buttons/Button.tsx
@@ -20,15 +20,16 @@ const buttonVariants = cva(
link: 'text-slate-900 underline-offset-4 hover:underline dark:text-slate-50',
selected: 'bg-tertiaryBG-light dark:bg-secondaryBG-dark',
icon: 'dark:hover:bg-secondaryBG-dark hover:bg-tertiaryBG-light',
- mood: 'rounded-2xl hover:bg-secondaryBG-light focus-visible:bg-secondaryBG-light',
+ mood: 'rounded-3xl bg-tertiaryBG-light hover:bg-slate-50 text-black hover:text-black p-4',
},
size: {
default: 'h-10 px-4 py-2',
sm: '