feat: some small fixed & add calendar to dashboard

Author: filippovskii09

frontend/package-lock.json

@@ -18,14 +18,17 @@
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.3.6",
     "@mui/material": "^7.3.6",
+    "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-query": "^5.90.16",
     "@tanstack/react-query-devtools": "^5.91.2",
     "axios": "^1.13.2",
     "formik": "^2.4.9",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-hot-toast": "^2.6.0",
+    "react-icons": "^5.5.0",
     "react-router-dom": "^7.11.0",
+    "tailwindcss": "^4.1.18",
     "yup": "^1.7.1"
   },
   "devDependencies": {

frontend/package.json

@@ -0,0 +1,15 @@
+import { DICTIONARY } from '@locales';
+import type { ICalendarActionsProps } from '../types';
+
+export const CalendarActions = ({ backToday }: ICalendarActionsProps) => {
+  return (
+    <div className="flex items-center gap-2.5">
+      <button
+        onClick={backToday}
+        className="py-1 px-4 bg-slate-700 w-full rounded-lg"
+      >
+        {DICTIONARY.calendar.buttons.today}
+      </button>
+    </div>
+  );
+};

frontend/src/components/Calendar/components/CalendarActions.tsx

@@ -0,0 +1,51 @@
+import { WEEK_DAYS } from '../constants';
+import type { ICalendarGridProps } from '../types';
+
+export const CalendarGrid = ({
+  arrayByDaysInMonth,
+  indexOfFirstDayInMonth,
+  currentDay,
+  checkWorkoutInThisDay,
+}: ICalendarGridProps) => {
+  return (
+    <div className="flex flex-col gap-4 border-b-2 border-white pb-7">
+      <div className="grid grid-cols-7 gap-y-8 space-b gap-2.5">
+        {WEEK_DAYS.map((day) => (
+          <div
+            key={day}
+            className="flex justify-center font-medium text-xs text-[#9C9D9F]"
+          >
+            {day.slice(0, 3)}
+          </div>
+        ))}
+      </div>
+      <div className="grid grid-cols-7 gap-y-8 gap-x-2.5">
+        {arrayByDaysInMonth?.map((day) => {
+          const currentDayStyle =
+            currentDay === day ? 'bg-[#8CEF0D] text-[#0C110F] font-bold' : '';
+          const hasWorkout = checkWorkoutInThisDay(day);
+          return (
+            <div
+              key={day}
+              className={`h-10 w-10 flex relative items-center justify-center font-medium text-xs rounded-xl ${currentDayStyle}`}
+              style={
+                day === 1
+                  ? { gridColumnStart: `${indexOfFirstDayInMonth}` }
+                  : {}
+              }
+            >
+              {day}
+              {hasWorkout ? (
+                <span
+                  className={`w-2 h-2 ${currentDayStyle ? 'bg-[#0C110F]' : 'bg-[#8CEF0D]'} rounded-full absolute left-1/2 -translate-x-1/2 bottom-0.5`}
+                ></span>
+              ) : (
+                ''
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

frontend/src/components/Calendar/components/CalendarGrid.tsx

@@ -0,0 +1,30 @@
+import { IoIosArrowBack, IoIosArrowForward } from 'react-icons/io';
+
+import type { IMounthSwitcherProps } from '../types';
+
+export const MounthSwitcher = ({
+  prevMonth,
+  nextMonth,
+  month,
+  year,
+}: IMounthSwitcherProps) => {
+  return (
+    <div className="flex items-center gap-2 justify-between">
+      <button
+        onClick={prevMonth}
+        className="flex items-center justify-center w-8 h-8 rounded-lg border"
+      >
+        <IoIosArrowBack />
+      </button>
+      <div className="font-bold text-white px-4 py-1 rounded-3xl bg-slate-700 text-lg flex items-baseline gap-1">
+        {month} <span className="text-[10px]">{year}</span>
+      </div>
+      <button
+        onClick={nextMonth}
+        className="flex items-center justify-center w-8 h-8 rounded-lg border"
+      >
+        <IoIosArrowForward />
+      </button>
+    </div>
+  );
+};

frontend/src/components/Calendar/components/MounthSwitcher.tsx

@@ -0,0 +1,3 @@
+export * from './CalendarActions';
+export * from './CalendarGrid';
+export * from './MounthSwitcher';

frontend/src/components/Calendar/components/index.ts

@@ -0,0 +1,24 @@
+export const MONTH_NAMES: string[] = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+] as const;
+
+export const WEEK_DAYS: string[] = [
+  'Sunday',
+  'Monday',
+  'Tuesday',
+  'Wednesday',
+  'Thursday',
+  'Friday',
+  'Saturday',
+] as const;

frontend/src/components/Calendar/constants.ts

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+
+import type { WorkoutPreview } from '@types';
+import { MONTH_NAMES } from './constants';
+
+export const useCalendar = (workouts: WorkoutPreview[]) => {
+  const now = new Date();
+  const [viewDate, setViewDate] = useState(now);
+
+  const year = viewDate.getFullYear();
+  const currentMonthIndex = viewDate.getMonth();
+  const month = MONTH_NAMES[currentMonthIndex];
+
+  const prevMonth = () => {
+    setViewDate(
+      (prevMonth) =>
+        new Date(prevMonth.getFullYear(), prevMonth.getMonth() - 1),
+    );
+  };
+
+  const nextMonth = () => {
+    setViewDate(
+      (prevMonth) =>
+        new Date(prevMonth.getFullYear(), prevMonth.getMonth() + 1),
+    );
+  };
+
+  const daysInMonth = new Date(year, currentMonthIndex + 1, 0).getDate();
+
+  const arrayByDaysInMonth = Array.from(
+    { length: daysInMonth },
+    (_, index) => index + 1,
+  );
+
+  const indexOfFirstDayInMonth =
+    new Date(year, currentMonthIndex, 1).getDay() + 1;
+
+  const backToday = () => {
+    setViewDate(now);
+  };
+
+  const currentDay =
+    now.getFullYear() === year && now.getMonth() === currentMonthIndex
+      ? now.getDate()
+      : NaN;
+
+  const checkWorkoutInThisDay = (day: number) => {
+    return workouts.some((workout) => {
+      const workoutDate = new Date(workout.date);
+      return (
+        workoutDate.getFullYear() === year &&
+        workoutDate.getMonth() === currentMonthIndex &&
+        workoutDate.getDate() === day
+      );
+    });
+  };
+
+  return {
+    month,
+    year,
+    prevMonth,
+    nextMonth,
+    arrayByDaysInMonth,
+    indexOfFirstDayInMonth,
+    currentDay,
+    backToday,
+    checkWorkoutInThisDay,
+  };
+};

frontend/src/components/Calendar/hooks.ts

@@ -0,0 +1,35 @@
+import { CalendarActions, CalendarGrid, MounthSwitcher } from './components';
+import { useCalendar } from './hooks';
+import type { ICalendarProps } from './types';
+
+export const Calendar = ({ workouts }: ICalendarProps) => {
+  const {
+    month,
+    year,
+    prevMonth,
+    nextMonth,
+    arrayByDaysInMonth,
+    indexOfFirstDayInMonth,
+    currentDay,
+    backToday,
+    checkWorkoutInThisDay,
+  } = useCalendar(workouts);
+
+  return (
+    <div className="flex flex-col gap-20 w-[384px] p-6">
+      <MounthSwitcher
+        prevMonth={prevMonth}
+        nextMonth={nextMonth}
+        month={month}
+        year={year}
+      />
+      <CalendarGrid
+        arrayByDaysInMonth={arrayByDaysInMonth}
+        indexOfFirstDayInMonth={indexOfFirstDayInMonth}
+        currentDay={currentDay}
+        checkWorkoutInThisDay={checkWorkoutInThisDay}
+      />
+      <CalendarActions backToday={backToday} />
+    </div>
+  );
+};

frontend/src/components/Calendar/index.tsx

@@ -0,0 +1,23 @@
+import type { WorkoutPreview } from '@types';
+
+export interface ICalendarProps {
+  workouts: WorkoutPreview[];
+}
+
+export interface IMounthSwitcherProps {
+  prevMonth: () => void;
+  nextMonth: () => void;
+  month: string;
+  year: number;
+}
+
+export interface ICalendarGridProps {
+  arrayByDaysInMonth: number[];
+  indexOfFirstDayInMonth: number;
+  currentDay: number;
+  checkWorkoutInThisDay: (day: number) => boolean;
+}
+
+export interface ICalendarActionsProps {
+  backToday: () => void;
+}