@wger-project/react-components 25.10.16

package/src/components/BodyWeight/utils.ts

@@ -0,0 +1,22 @@
+import { WeightEntry } from "components/BodyWeight/model";
+
+export const processWeight = (weights: WeightEntry[]) => {
+    // go through weights, referencing the same weights to have days and weight changes
+    return weights.map((entry, i) => {
+
+        // since there is no day before day 1, changes are 0
+        if (i === 0) {
+            return {
+                entry,
+                change: 0,
+                days: Math.abs(entry.date.getTime() - entry.date.getTime()) / (1000 * 60 * 60 * 24)
+            };
+        }
+
+        return {
+            entry,
+            change: weights[i].weight - weights[i - 1].weight,
+            days: Math.abs(entry.date.getTime() - weights[i - 1].date.getTime()) / (1000 * 60 * 60 * 24)
+        };
+    });
+};

package/src/components/BodyWeight/widgets/FilterButtons.test.tsx

@@ -0,0 +1,57 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import React from 'react';
+import { FilterButtons, FilterType } from './FilterButtons';
+
+describe('FilterButtons Component', () => {
+    const onFilterChange = jest.fn();
+
+    const renderComponent = (currentFilter: FilterType) => {
+        render(
+            <FilterButtons
+                currentFilter={currentFilter}
+                onFilterChange={onFilterChange}
+            />
+        );
+    };
+
+    afterEach(() => {
+        onFilterChange.mockClear();
+    });
+
+    test('renders all filter buttons', () => {
+        renderComponent('');
+        const buttonLabels = ['all', 'lastYear', 'lastHalfYear', 'lastMonth', 'lastWeek'];
+        buttonLabels.forEach(label => {
+            expect(screen.getByText(label)).toBeInTheDocument();
+        });
+    });
+
+    test('applies primary color and contained variant to the active filter button', () => {
+        renderComponent('lastMonth');
+        const activeButton = screen.getByText('lastMonth');
+        expect(activeButton).toHaveClass('MuiButton-containedPrimary');
+    });
+
+    test('calls onFilterChange with correct value when a button is clicked', () => {
+        renderComponent('');
+        const lastYearButton = screen.getByText('lastYear');
+
+        fireEvent.click(lastYearButton);
+        expect(onFilterChange).toHaveBeenCalledWith('lastYear');
+    });
+
+    test('does not trigger onFilterChange when clicking the currently active filter button', () => {
+        renderComponent('lastYear');
+        const lastYearButton = screen.getByText('lastYear');
+
+        fireEvent.click(lastYearButton);
+        expect(onFilterChange).not.toHaveBeenCalled();
+    });
+
+    test('displays correct default style for inactive filter buttons', () => {
+        renderComponent('');
+        const inactiveButton = screen.getByText('lastYear');
+        expect(inactiveButton).toHaveClass('MuiButton-outlined');
+    });
+});

package/src/components/BodyWeight/widgets/FilterButtons.tsx

@@ -0,0 +1,69 @@
+import { Button, ButtonGroup } from "@mui/material";
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from "react-i18next";
+
+export type FilterType = 'lastYear' | 'lastHalfYear' | 'lastMonth' | 'lastWeek' | '';
+
+export interface FilterButtonsProps {
+    currentFilter: FilterType;
+    onFilterChange: (newFilter: FilterType) => void;
+}
+
+export const FilterButtons = ({ currentFilter, onFilterChange }: FilterButtonsProps) => {
+
+    const [t] = useTranslation();
+
+    const theme = useTheme();
+
+    // Won't call onFilterChange if the filter stays the same 
+    const handleFilterChange = (newFilter: FilterType) => {
+        if (currentFilter !== newFilter) {
+            onFilterChange(newFilter);
+        }
+    };
+
+    return (
+        <ButtonGroup variant="outlined" sx={{ mb: 2 }}>
+            <Button
+                onClick={() => handleFilterChange('')}
+                color={currentFilter === '' ? 'primary' : 'inherit'}
+                variant={currentFilter === '' ? 'contained' : 'outlined'}
+                sx={{ fontFamily: theme.typography.fontFamily }}
+            >
+                {t('all')}
+            </Button>
+            <Button
+                onClick={() => handleFilterChange('lastYear')}
+                color={currentFilter === 'lastYear' ? 'primary' : 'inherit'}
+                variant={currentFilter === 'lastYear' ? 'contained' : 'outlined'}
+                sx={{ fontFamily: theme.typography.fontFamily }}
+            >
+                {t('lastYear')}
+            </Button>
+            <Button
+                onClick={() => handleFilterChange('lastHalfYear')}
+                color={currentFilter === 'lastHalfYear' ? 'primary' : 'inherit'}
+                variant={currentFilter === 'lastHalfYear' ? 'contained' : 'outlined'}
+                sx={{ fontFamily: theme.typography.fontFamily }}
+            >
+                {t('lastHalfYear')}
+            </Button>
+            <Button
+                onClick={() => handleFilterChange('lastMonth')}
+                color={currentFilter === 'lastMonth' ? 'primary' : 'inherit'}
+                variant={currentFilter === 'lastMonth' ? 'contained' : 'outlined'}
+                sx={{ fontFamily: theme.typography.fontFamily }}
+            >
+                {t('lastMonth')}
+            </Button>
+            <Button
+                onClick={() => handleFilterChange('lastWeek')}
+                color={currentFilter === 'lastWeek' ? 'primary' : 'inherit'}
+                variant={currentFilter === 'lastWeek' ? 'contained' : 'outlined'}
+                sx={{ fontFamily: theme.typography.fontFamily }}
+            >
+                {t('lastWeek')}
+            </Button>
+        </ButtonGroup>
+    );
+};

package/src/components/BodyWeight/widgets/fab.tsx

@@ -0,0 +1,33 @@
+import AddIcon from "@mui/icons-material/Add";
+import { Fab } from "@mui/material";
+import { WeightForm } from "components/BodyWeight/Form/WeightForm";
+import { WgerModal } from "components/Core/Modals/WgerModal";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+export const AddBodyWeightEntryFab = () => {
+    const [t] = useTranslation();
+    const [openModal, setOpenModal] = useState(false);
+    const handleOpenModal = () => setOpenModal(true);
+    const handleCloseModal = () => setOpenModal(false);
+
+    return (
+        <div>
+            <Fab
+                color="secondary"
+                aria-label="add"
+                onClick={handleOpenModal}
+                sx={{
+                    position: 'fixed',
+                    bottom: '5rem',
+                    right: (theme) => `max(${theme.spacing(2)}, calc((100vw - ${theme.breakpoints.values.lg}px) / 2 + ${theme.spacing(2)}))`,
+                    zIndex: 9,
+                }}>
+                <AddIcon />
+            </Fab>
+            <WgerModal title={t('add')} isOpen={openModal} closeFn={handleCloseModal}>
+                <WeightForm closeFn={handleCloseModal} />
+            </WgerModal>
+        </div>
+    );
+};

package/src/components/Calendar/Components/CalendarComponent.test.tsx

@@ -0,0 +1,141 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { WeightEntry } from "components/BodyWeight/model";
+import { MeasurementCategory } from "components/Measurements/models/Category";
+import { MeasurementEntry } from "components/Measurements/models/Entry";
+import i18n from "i18next";
+import React from "react";
+import { I18nextProvider } from "react-i18next";
+import { BrowserRouter } from "react-router-dom";
+import { getMeasurementCategories, getNutritionalDiaryEntries, getSessions, getWeights } from "services";
+import { TEST_DIARY_ENTRY_1, TEST_DIARY_ENTRY_2 } from "tests/nutritionDiaryTestdata";
+import { testQueryClient } from "tests/queryClient";
+import { testWorkoutSession } from "tests/workoutLogsRoutinesTestData";
+import { dateToYYYYMMDD } from "utils/date";
+import CalendarComponent from "./CalendarComponent";
+
+jest.mock('services');
+
+
+// TODO: using jest.useFakeTimers() and jest.setSystemTime(new Date('2024-12-01'));
+//       seems to break the test and they never complete. As a workaround the dates
+//       for the entries are set to the 1st and 2nd of the month, but that means
+//       that this test won't work on the 1st of every month since days in the future
+//       are not clickable.
+describe('CalendarComponent', () => {
+    const today = new Date();
+    const currentYear = today.getFullYear();
+    const currentMonth = today.getMonth();
+
+    const user = userEvent.setup();
+
+    beforeEach(() => {
+
+        (getWeights as jest.Mock).mockImplementation(() => Promise.resolve([
+                new WeightEntry(
+                    new Date(currentYear, currentMonth, 2, 12, 0),
+                    70
+                ),
+            ]
+        ));
+
+        (getSessions as jest.Mock).mockImplementation(() => Promise.resolve([
+                testWorkoutSession
+            ]
+        ));
+
+        (getMeasurementCategories as jest.Mock).mockImplementation(() => Promise.resolve([
+                new MeasurementCategory(
+                    1,
+                    "Body Fat",
+                    "%",
+                    [new MeasurementEntry(1, 1, new Date(currentYear, currentMonth, 1, 12, 0), 20, "Normal")]
+                ),
+            ],
+        ));
+
+        (getNutritionalDiaryEntries as jest.Mock).mockImplementation(() => Promise.resolve([
+                TEST_DIARY_ENTRY_1,
+                TEST_DIARY_ENTRY_2,
+            ],
+        ));
+
+        testQueryClient.clear();
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    const renderComponent = () => {
+        render(
+            <BrowserRouter>
+                <I18nextProvider i18n={i18n}>
+                    <QueryClientProvider client={testQueryClient}>
+                        <CalendarComponent />
+                    </QueryClientProvider>
+                </I18nextProvider>
+            </BrowserRouter>
+        );
+    };
+
+    const getDaysInMonth = (year: number, month: number) => {
+        return new Date(year, month + 1, 0).getDate();
+    };
+
+    test("renders calendar with days and header", () => {
+        renderComponent();
+        const days = screen.getAllByText(/^\d+$/);
+        const monthName = new Date(currentYear, currentMonth, 1).toLocaleString('en-US', { month: 'long' });
+        expect(days.length).toBeGreaterThan(getDaysInMonth(currentYear, currentMonth));
+
+        expect(screen.getByText(`${monthName} ${currentYear}`)).toBeInTheDocument();
+
+        const weekDays = Array.from({ length: 7 }, (_, i) =>
+            new Date(1970, 0, i + 5).toLocaleString('en-US', { weekday: 'short' })
+        );
+        weekDays.forEach((day) => {
+            expect(screen.getByText(day)).toBeInTheDocument();
+        });
+    });
+
+    test('navigates to previous and next month', () => {
+        renderComponent();
+
+        const previousMonthDate = new Date(currentYear, currentMonth - 1, 1);
+        const previousMonthName = previousMonthDate.toLocaleString('en-US', { month: 'long' });
+        const previousMonthYear = previousMonthDate.getFullYear();
+
+        fireEvent.click(screen.getByText('<'));
+        expect(screen.getByText(`${previousMonthName} ${previousMonthYear}`)).toBeInTheDocument();
+
+        fireEvent.click(screen.getByText('>'));
+        const currentMonthName = today.toLocaleString('en-US', { month: 'long' });
+        expect(screen.getByText(`${currentMonthName} ${currentYear}`)).toBeInTheDocument();
+    });
+
+    test('displays measurement details for selected day', async () => {
+        // Arrange
+        renderComponent();
+
+        // Act
+        const day = await screen.findByTestId(`day-${dateToYYYYMMDD(new Date(currentYear, currentMonth, 1))}`);
+        await user.click(day);
+
+        // Assert
+        expect(await screen.findByText(/body fat: 20 %/i)).toBeInTheDocument();
+    });
+
+    test('displays weight details for selected day', async () => {
+        // Arrange
+        renderComponent();
+
+        // Act
+        const day = screen.getByTestId(`day-${dateToYYYYMMDD(new Date(currentYear, currentMonth, 2))}`);
+        await user.click(day);
+
+        // Assert
+        expect(screen.getByText('70.0')).toBeInTheDocument();
+    });
+});

package/src/components/Calendar/Components/CalendarComponent.tsx

@@ -0,0 +1,250 @@
+import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
+import { Box, Card, CardContent, CardHeader, useMediaQuery, useTheme } from '@mui/material';
+import { WeightEntry } from "components/BodyWeight/model";
+import { useBodyWeightQuery } from "components/BodyWeight/queries";
+import CalendarDayGrid from "components/Calendar/Components/CalendarDayGrid";
+import CalendarHeader from "components/Calendar/Components/CalendarHeader";
+import { CalendarMeasurement } from "components/Calendar/Helpers/CalendarMeasurement";
+import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
+import { useMeasurementsCategoryQuery } from "components/Measurements/queries";
+import { DiaryEntry } from "components/Nutrition/models/diaryEntry";
+import { useNutritionDiaryQuery } from "components/Nutrition/queries";
+import { WorkoutSession } from "components/WorkoutRoutines/models/WorkoutSession";
+import { useSessionsQuery } from "components/WorkoutRoutines/queries";
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from "react-i18next";
+import { dateToYYYYMMDD, isSameDay } from "utils/date";
+import Entries from './Entries';
+
+export interface DayProps {
+    date: Date,
+    weightEntry: WeightEntry | undefined,
+    measurements: CalendarMeasurement[],
+    nutritionLogs: DiaryEntry[],
+    workoutSession: WorkoutSession | undefined,
+}
+
+
+const CalendarComponent = () => {
+    const [t] = useTranslation();
+
+    const currentDate = new Date();
+    const [currentMonth, setCurrentMonth] = useState(currentDate.getMonth());
+    const [currentYear, setCurrentYear] = useState(currentDate.getFullYear());
+
+    const startOfMonth = new Date(currentYear, currentMonth, 1);
+    const endOfMonth = new Date(currentYear, currentMonth + 1, 0);
+
+
+    const weightsQuery = useBodyWeightQuery();
+    const sessionQuery = useSessionsQuery({
+        filtersetQuerySessions: {
+            "date__gte": dateToYYYYMMDD(startOfMonth),
+            "date__lte": dateToYYYYMMDD(endOfMonth),
+        },
+        filtersetQueryLogs: {
+            "date__gte": dateToYYYYMMDD(startOfMonth),
+            "date__lte": dateToYYYYMMDD(endOfMonth),
+        }
+    });
+    const measurementQuery = useMeasurementsCategoryQuery({
+        filtersetQueryEntries: {
+            "date__gte": dateToYYYYMMDD(startOfMonth),
+            "date__lte": dateToYYYYMMDD(endOfMonth),
+        }
+    });
+    const nutritionDiaryQuery = useNutritionDiaryQuery({
+        filtersetQuery: {
+            "datetime__gte": dateToYYYYMMDD(startOfMonth),
+            "datetime__lte": dateToYYYYMMDD(endOfMonth),
+        }
+    });
+
+    const isLoading = weightsQuery.isLoading || sessionQuery.isLoading || measurementQuery.isLoading || nutritionDiaryQuery.isLoading;
+    const isSuccess = weightsQuery.isSuccess && sessionQuery.isSuccess && measurementQuery.isSuccess && nutritionDiaryQuery.isSuccess;
+
+    const categories = measurementQuery.data;
+    const measurements = categories?.flatMap(category =>
+        category.entries.map(entry => new CalendarMeasurement(category.name, category.unit, entry.value, entry.date))
+    ) ?? [];
+
+    const getDaysInMonth = (year: number, month: number): DayProps[] => {
+        const date = new Date(year, month, 1);
+        const days: DayProps[] = [];
+
+        const firstDayOfMonth = new Date(year, month, 1);
+        let dayOfWeek = firstDayOfMonth.getDay();
+        dayOfWeek = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+
+        for (let i = 0; i < dayOfWeek; i++) {
+            days.push({
+                date: new Date(year, month, -dayOfWeek + i + 1),
+                weightEntry: undefined,
+                measurements: [],
+                nutritionLogs: [],
+                workoutSession: undefined
+            });
+        }
+
+        while (date.getMonth() === month) {
+            days.push({
+                date: new Date(date),
+                weightEntry: weightsQuery.data?.find(w => isSameDay(w.date, date)),
+                measurements: measurements.filter(m => isSameDay(m.date, date)) || [],
+                workoutSession: sessionQuery.data?.find(m => isSameDay(m.date, date)) || undefined,
+                nutritionLogs: nutritionDiaryQuery.data?.filter(m => isSameDay(m.datetime, date)) || [],
+            });
+            date.setDate(date.getDate() + 1);
+        }
+
+        const lastDayOfMonth = new Date(year, month + 1, 0);
+        dayOfWeek = lastDayOfMonth.getDay();
+        const remainingDays = dayOfWeek === 0 ? 0 : 7 - dayOfWeek;
+
+        for (let i = 1; i <= remainingDays; i++) {
+            days.push({
+                date: new Date(year, month + 1, i),
+                weightEntry: undefined,
+                workoutSession: undefined,
+                measurements: [],
+                nutritionLogs: []
+            });
+        }
+
+        return days;
+    };
+
+    const defaultDay: DayProps = {
+        date: currentDate,
+        weightEntry: undefined,
+        workoutSession: undefined,
+        measurements: [],
+        nutritionLogs: []
+    };
+
+    const days = useMemo(() =>
+            getDaysInMonth(currentYear, currentMonth),
+        [currentYear, currentMonth, weightsQuery.data, sessionQuery.data, measurementQuery.data, nutritionDiaryQuery.data]
+    );
+    const [selectedDay, setSelectedDay] = useState<DayProps>(days.find(day => isSameDay(day.date, currentDate)) || defaultDay);
+
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+    useEffect(() => {
+        if (isSuccess) {
+            const todayWithData = days.find(day => isSameDay(day.date, currentDate));
+            if (todayWithData) {
+                setSelectedDay(todayWithData);
+            }
+        }
+    }, [isSuccess]);
+
+
+    useEffect(() => {
+        setCurrentMonth(selectedDay.date.getMonth());
+        setCurrentYear(selectedDay.date.getFullYear());
+    }, [selectedDay]);
+
+    const handleDayClick = (day: DayProps) => {
+        setSelectedDay(day);
+    };
+
+    const handlePrevMonth = () => {
+        if (currentMonth === 0) {
+            setCurrentMonth(11);
+            setCurrentYear(currentYear - 1);
+        } else {
+            setCurrentMonth(currentMonth - 1);
+        }
+    };
+
+    const handleNextMonth = () => {
+        if (currentMonth < currentDate.getMonth() || currentYear < currentDate.getFullYear()) {
+            if (currentMonth === 11) {
+                setCurrentMonth(0);
+                setCurrentYear(currentYear + 1);
+            } else {
+                setCurrentMonth(currentMonth + 1);
+            }
+        }
+    };
+
+    return (
+        <Box sx={{
+            display: 'flex',
+            gap: 2,
+            flexDirection: { xs: 'column', md: 'row' },
+            height: { xs: 'auto', md: 'calc(100vh - 130px)' },
+            width: '100%',
+        }}>
+            <Card sx={{
+                width: { xs: 'auto', md: '65%' },
+                height: { xs: 'auto', md: '100%' },
+                m: { xs: 0, sm: 1, md: 2 },
+                p: { xs: 1, sm: 1.5, md: 2 },
+                display: 'flex',
+                flexDirection: 'column'
+            }}>
+                <CardHeader
+                    sx={{ '& .MuiCardHeader-content': { width: '100%' } }}
+                    title={
+                        <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
+                            <div style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                marginBottom: '16px'
+                            }}>
+                                <CalendarMonthIcon style={{
+                                    width: isMobile ? '28px' : '32px',
+                                    height: isMobile ? '28px' : '32px',
+                                    marginRight: '12px'
+                                }} />
+                                <span style={{
+                                    fontSize: isMobile ? '1.5rem' : '1.8rem',
+                                    fontWeight: 'bold'
+                                }}>
+                                    {t("calendar")}
+                                </span>
+                            </div>
+                        </div>
+                    }
+                />
+                <CardContent sx={{
+                    overflow: 'auto',
+                    flex: 1,
+                    '&:last-child': { paddingBottom: 2 }
+                }}>
+                    <CalendarHeader
+                        currentMonth={currentMonth}
+                        currentYear={currentYear}
+                        onPrevMonth={handlePrevMonth}
+                        onNextMonth={handleNextMonth}
+                    />
+                    <CalendarDayGrid
+                        days={days}
+                        currentMonth={currentMonth}
+                        currentDate={currentDate}
+                        selectedDay={selectedDay}
+                        onDayClick={handleDayClick}
+                    />
+                </CardContent>
+            </Card>
+            {isLoading &&
+                <Card
+                    sx={{
+                        width: { xs: 'auto', md: '65%' },
+                        height: { xs: '60%', md: '100%' },
+                        m: { xs: 0, sm: 1, md: 2 },
+                        p: { xs: 1, sm: 1.5, md: 2 }
+                    }}
+                >
+                    <LoadingPlaceholder />
+                </Card>}
+
+            {isSuccess && <Entries selectedDay={selectedDay} />}
+        </Box>
+    );
+};
+
+export default CalendarComponent;

package/src/components/Calendar/Components/CalendarDay.tsx

@@ -0,0 +1,105 @@
+import { useMediaQuery, useTheme } from '@mui/material';
+import React from 'react';
+import { dateToYYYYMMDD, isSameDay } from "../../../utils/date";
+import { DayProps } from "./CalendarComponent";
+
+interface CalendarDayProps {
+    day: DayProps;
+    currentMonth: number;
+    currentDate: Date;
+    selectedDay: DayProps;
+    onClick: (day: DayProps) => void;
+}
+
+const CalendarDay: React.FC<CalendarDayProps> = ({ day, currentMonth, currentDate, selectedDay, onClick }) => {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+    const isTablet = useMediaQuery(theme.breakpoints.down('md'));
+
+    const isSelected = isSameDay(day.date, selectedDay.date);
+    const isToday = isSameDay(day.date, currentDate);
+    const isClickable = day.date.getTime() <= currentDate.getTime();
+    const isWeekend = day.date.getDay() === 6 || day.date.getDay() === 0;
+
+    const getDayColor = (): string => {
+        if (isSelected || isToday) return 'white';
+        if (!isClickable) return 'gray';
+        return isWeekend ? '#E53945' : 'black';
+    };
+
+    const getDaySize = () => {
+        if (isMobile) return 35;
+        if (isTablet) return 40;
+        return 50;
+    };
+
+    const getDotSize = () => {
+        if (isMobile) return 8;
+        if (isTablet) return 9;
+        return 10;
+    };
+
+    const hasDayEntry = () => {
+        return day.measurements.length > 0 ||
+            day.weightEntry !== undefined ||
+            day.workoutSession !== undefined;
+    };
+
+    const handleClick = () => {
+        if (isClickable) {
+            onClick(day);
+        }
+    };
+
+    const daySize = getDaySize();
+    const dotSize = getDotSize();
+
+    return (
+        <div style={{
+            position: 'relative',
+            width: `${daySize}px`,
+            height: `${daySize + (dotSize / 2)}px`,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center'
+        }}>
+            <div
+                style={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    width: `${daySize}px`,
+                    height: `${daySize}px`,
+                    fontSize: isMobile ? '0.8rem' : isTablet ? '0.9rem' : '1rem',
+                    color: isSelected ? 'white' : isToday ? 'white' : getDayColor(),
+                    backgroundColor: isSelected ? '#E53945' : isToday ? '#FEC107' : 'transparent',
+                    borderRadius: '50%',
+                    fontWeight: 'bold',
+                    cursor: isClickable ? 'pointer' : 'default',
+                    opacity: day.date.getMonth() !== currentMonth ? 0.25 : 1,
+                }}
+                data-testid={`day-${dateToYYYYMMDD(day.date)}`}
+                onClick={handleClick}
+            >
+                {day.date.getDate()}
+            </div>
+            {hasDayEntry() && (
+                <div
+                    style={{
+                        width: `${dotSize}px`,
+                        height: `${dotSize}px`,
+                        backgroundColor: 'black',
+                        borderRadius: '50%',
+                        position: 'absolute',
+                        bottom: 0,
+                        left: '50%',
+                        transform: 'translateX(-50%)',
+                        zIndex: 2
+                    }}
+                />
+            )}
+        </div>
+    );
+};
+
+export default CalendarDay;