@wger-project/react-components 25.11.22 → 26.1.18

package/src/components/Dashboard/MeasurementCard.tsx

@@ -0,0 +1,101 @@
+import Button from "@mui/material/Button";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Typography from "@mui/material/Typography";
+import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
+import { DashboardCard } from "components/Dashboard/DashboardCard";
+import { EmptyCard } from "components/Dashboard/EmptyCard";
+import { MeasurementCategory } from "components/Measurements/models/Category";
+import { useMeasurementsCategoryQuery } from "components/Measurements/queries";
+import { CategoryForm } from "components/Measurements/widgets/CategoryForm";
+import { MeasurementChart } from "components/Measurements/widgets/MeasurementChart";
+import i18n from "i18n";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import Slider, { Settings } from "react-slick";
+import { makeLink, WgerLink } from "utils/url";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+
+
+export const MeasurementCard = () => {
+    const { t } = useTranslation();
+    const categoryQuery = useMeasurementsCategoryQuery();
+
+    if (categoryQuery.isLoading) {
+        return <LoadingPlaceholder />;
+    }
+
+    return categoryQuery.data === null
+        ? <EmptyCard
+            title={t("measurements.measurements")}
+            modalContent={<CategoryForm />}
+            modalTitle={t("add")} />
+        : <MeasurementCardContent categories={categoryQuery.data!} />;
+};
+
+const MeasurementCardContent = (props: { categories: MeasurementCategory[] }) => {
+    const { t } = useTranslation();
+
+    const settings: Settings = {
+        dots: true,
+        infinite: true,
+        speed: 500,
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+    };
+
+    return (<>
+        <DashboardCard
+            title={t("measurements.measurements")}
+            actions={
+                <>
+                    <Button
+                        size="small"
+                        href={makeLink(WgerLink.MEASUREMENT_OVERVIEW, i18n.language)}
+                    >
+                        {t("seeDetails")}
+                    </Button>
+                </>
+            }
+        >
+            <div className="slider-container">
+                <Slider {...settings}>
+                    {props.categories.map(c => <MeasurementCardTableContent category={c} />)}
+                </Slider>
+            </div>
+        </DashboardCard>
+    </>);
+};
+
+
+const MeasurementCardTableContent = (props: { category: MeasurementCategory }) => {
+    const { t } = useTranslation();
+
+    return (<>
+        <Typography variant="h6" gutterBottom>
+            {props.category.name}
+        </Typography>
+        <MeasurementChart category={props.category} />
+        <Table size="small">
+            <TableHead>
+                <TableRow>
+                    <TableCell>{t('date')}</TableCell>
+                    <TableCell>{t('value')}</TableCell>
+                </TableRow>
+            </TableHead>
+            <TableBody>
+                {[...props.category.entries].slice(0, 5).map(entry => (
+                    <TableRow key={`measurement-entry-${entry.id}`}>
+                        <TableCell>{entry.date.toLocaleDateString()}</TableCell>
+                        <TableCell>{entry.value} {props.category.unit}</TableCell>
+                    </TableRow>
+                ))}
+            </TableBody>
+        </Table>
+    </>);
+};

package/src/components/Dashboard/NutritionCard.tsx

@@ -1,15 +1,11 @@
 import ExpandLessIcon from "@mui/icons-material/ExpandLess";
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import HistoryEduIcon from '@mui/icons-material/HistoryEdu';
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import HistoryEduIcon from "@mui/icons-material/HistoryEdu";
 import PhotoIcon from "@mui/icons-material/Photo";
 import {
     Alert,
     Avatar,
     Button,
-    Card,
-    CardActions,
-    CardContent,
-    CardHeader,
     Collapse,
     IconButton,
     List,
@@ -19,7 +15,7 @@ import {
     ListItemIcon,
     ListItemText,
     Snackbar,
-} from '@mui/material';
+} from "@mui/material";
 import Tooltip from "@mui/material/Tooltip";
 import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
 import { WgerModal } from "components/Core/Modals/WgerModal";
@@ -31,16 +27,15 @@ import { useAddDiaryEntryQuery, useFetchLastNutritionalPlanQuery } from "compone
 import { NutritionalValuesDashboardChart } from "components/Nutrition/widgets/charts/NutritionalValuesDashboardChart";
 import { NutritionDiaryEntryForm } from "components/Nutrition/widgets/forms/NutritionDiaryEntryForm";
 import { PlanForm } from "components/Nutrition/widgets/forms/PlanForm";
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { SNACKBAR_AUTO_HIDE_DURATION } from "utils/consts";
 import { dateTimeToLocaleHHMM } from "utils/date";
 import { numberGramLocale } from "utils/numbers";
 import { makeLink, WgerLink } from "utils/url";
-
+import { DashboardCard } from "./DashboardCard";
 
 export const NutritionCard = () => {
-
     const [t] = useTranslation();
     const planQuery = useFetchLastNutritionalPlanQuery();
 
@@ -48,13 +43,11 @@ export const NutritionCard = () => {
         return <LoadingPlaceholder />;
     }
 
-    return planQuery.data !== null
-        ? <NutritionCardContent plan={planQuery.data!} />
-        : <EmptyCard
-            title={t('nutritionalPlan')}
-            modalContent={<PlanForm />}
-            modalTitle={t('add')}
-        />;
+    return planQuery.data !== null ? (
+        <NutritionCardContent plan={planQuery.data!} />
+    ) : (
+        <EmptyCard title={t("nutritionalPlan")} modalContent={<PlanForm />} modalTitle={t("add")} />
+    );
 };
 
 function NutritionCardContent(props: { plan: NutritionalPlan }) {
@@ -64,53 +57,50 @@ function NutritionCardContent(props: { plan: NutritionalPlan }) {
     const handleOpenLogModal = () => setOpenLogModal(true);
     const handleCloseLogModal = () => setOpenLogModal(false);
 
-
-    return <>
-        <Card>
-            <CardHeader
-                title={t('nutritionalPlan')}
+    return (
+        <>
+            <DashboardCard
+                title={t("nutritionalPlan")}
                 subheader={props.plan.description}
-            />
-            <CardContent sx={{ height: "500px", overflow: "auto" }}>
+                actions={
+                    <>
+                        <Button
+                            size="small"
+                            href={makeLink(WgerLink.NUTRITION_DETAIL, i18n.language, { id: props.plan.id! })}
+                        >
+                            {t("seeDetails")}
+                        </Button>
+                        <Tooltip title={t("nutrition.logThisMealItem")}>
+                            <IconButton onClick={handleOpenLogModal}>
+                                <HistoryEduIcon />
+                            </IconButton>
+                        </Tooltip>
+                    </>
+                }
+            >
                 <NutritionalValuesDashboardChart
                     percentage={props.plan.percentageValuesLoggedToday}
                     planned={props.plan.plannedNutritionalValues}
                     logged={props.plan.loggedNutritionalValuesToday}
                 />
                 <List>
-                    {props.plan.meals.map(meal =>
+                    {props.plan.meals.map((meal) => (
                         <MealListItem meal={meal} planId={props.plan.id!} key={meal.id} />
-                    )}
+                    ))}
                 </List>
-            </CardContent>
-            <CardActions sx={{
-                justifyContent: "space-between",
-                alignItems: "flex-start",
-            }}>
-                <Button size="small"
-                        href={makeLink(WgerLink.NUTRITION_DETAIL, i18n.language, { id: props.plan.id! })}>
-                    {t('seeDetails')}
-                </Button>
-                <Tooltip title={t('nutrition.logThisMealItem')}>
-                    <IconButton onClick={handleOpenLogModal}>
-                        <HistoryEduIcon />
-                    </IconButton>
-                </Tooltip>
-            </CardActions>
-        </Card>
-        <WgerModal title={t('nutrition.addNutritionalDiary')}
-                   isOpen={openLogModal}
-                   closeFn={handleCloseLogModal}>
-            <NutritionDiaryEntryForm
-                closeFn={handleCloseLogModal}
-                planId={props.plan.id!}
-                meals={props.plan.meals}
-            />
-        </WgerModal>
-    </>;
+            </DashboardCard>
+            <WgerModal title={t("nutrition.addNutritionalDiary")} isOpen={openLogModal} closeFn={handleCloseLogModal}>
+                <NutritionDiaryEntryForm
+                    closeFn={handleCloseLogModal}
+                    planId={props.plan.id!}
+                    meals={props.plan.meals}
+                />
+            </WgerModal>
+        </>
+    );
 }
 
-const MealListItem = (props: { meal: Meal, planId: number }) => {
+const MealListItem = (props: { meal: Meal; planId: number }) => {
     const [t, i18n] = useTranslation();
     const addDiaryEntryQuery = useAddDiaryEntryQuery(props.planId);
 
@@ -120,7 +110,7 @@ const MealListItem = (props: { meal: Meal, planId: number }) => {
     const handleToggleExpand = () => setExpandView(!expandView);
 
     const handleCloseSnackbar = (event?: React.SyntheticEvent | Event, reason?: string) => {
-        if (reason === 'clickaway') {
+        if (reason === "clickaway") {
             return;
         }
         setOpenSnackbar(false);
@@ -134,45 +124,47 @@ const MealListItem = (props: { meal: Meal, planId: number }) => {
     const primaryHeader = props.meal.name ? props.meal.name : dateTimeToLocaleHHMM(props.meal.time);
     const secondaryHeader = props.meal.name ? dateTimeToLocaleHHMM(props.meal.time) : null;
 
-    return <>
-        <ListItemButton onClick={handleToggleExpand} selected={expandView}>
-            <ListItemIcon>
-                {expandView ? <ExpandLessIcon /> : <ExpandMoreIcon />}
-            </ListItemIcon>
-            <ListItemText primary={primaryHeader} secondary={secondaryHeader} />
-
-        </ListItemButton>
-        <Collapse in={expandView} timeout="auto" unmountOnExit>
-            <List>
-                {props.meal.items.map((item) =>
-                    <ListItem key={item.id} secondaryAction={
-                        <Tooltip title={t('nutrition.logThisMealItem')}>
-                            <IconButton edge="end" onClick={() => handleAddDiaryEntry(item)}>
-                                <HistoryEduIcon />
-                            </IconButton>
-                        </Tooltip>
-                    }>
-                        <ListItemAvatar>
-                            <Avatar
-                                alt={item.ingredient?.name}
-                                src={item.ingredient?.image?.url}
-                                sx={{ width: 45, height: 45 }}
-                            >
-                                <PhotoIcon />
-                            </Avatar>
-                        </ListItemAvatar>
-                        <ListItemText
-                            primary={item.ingredient?.name}
-                            secondary={numberGramLocale(item.amount, i18n.language)}
-                        />
-                    </ListItem>
-                )}
-            </List>
-        </Collapse>
-        <Snackbar open={openSnackbar} autoHideDuration={SNACKBAR_AUTO_HIDE_DURATION} onClose={handleCloseSnackbar}>
-            <Alert onClose={handleCloseSnackbar} severity="success" sx={{ width: '100%' }}>
-                {t('nutrition.diaryEntrySaved')}
-            </Alert>
-        </Snackbar>
-    </>;
-};
+    return (
+        <>
+            <ListItemButton onClick={handleToggleExpand} selected={expandView}>
+                <ListItemIcon>{expandView ? <ExpandLessIcon /> : <ExpandMoreIcon />}</ListItemIcon>
+                <ListItemText primary={primaryHeader} secondary={secondaryHeader} />
+            </ListItemButton>
+            <Collapse in={expandView} timeout="auto" unmountOnExit>
+                <List>
+                    {props.meal.items.map((item) => (
+                        <ListItem
+                            key={item.id}
+                            secondaryAction={
+                                <Tooltip title={t("nutrition.logThisMealItem")}>
+                                    <IconButton edge="end" onClick={() => handleAddDiaryEntry(item)}>
+                                        <HistoryEduIcon />
+                                    </IconButton>
+                                </Tooltip>
+                            }
+                        >
+                            <ListItemAvatar>
+                                <Avatar
+                                    alt={item.ingredient?.name}
+                                    src={item.ingredient?.image?.url}
+                                    sx={{ width: 45, height: 45 }}
+                                >
+                                    <PhotoIcon />
+                                </Avatar>
+                            </ListItemAvatar>
+                            <ListItemText
+                                primary={item.ingredient?.name}
+                                secondary={numberGramLocale(item.amount, i18n.language)}
+                            />
+                        </ListItem>
+                    ))}
+                </List>
+            </Collapse>
+            <Snackbar open={openSnackbar} autoHideDuration={SNACKBAR_AUTO_HIDE_DURATION} onClose={handleCloseSnackbar}>
+                <Alert onClose={handleCloseSnackbar} severity="success" sx={{ width: "100%" }}>
+                    {t("nutrition.diaryEntrySaved")}
+                </Alert>
+            </Snackbar>
+        </>
+    );
+};

package/src/components/Dashboard/RoutineCard.tsx

@@ -1,18 +1,7 @@
 import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import TodayIcon from "@mui/icons-material/Today";
-import {
-    Button,
-    Card,
-    CardActions,
-    CardContent,
-    CardHeader,
-    Collapse,
-    List,
-    ListItemButton,
-    ListItemIcon,
-    ListItemText,
-} from '@mui/material';
+import { Button, Collapse, List, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
 import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
 import { EmptyCard } from "components/Dashboard/EmptyCard";
 import { getDayName } from "components/WorkoutRoutines/models/Day";
@@ -20,11 +9,11 @@ import { Routine } from "components/WorkoutRoutines/models/Routine";
 import { RoutineDayData } from "components/WorkoutRoutines/models/RoutineDayData";
 import { useActiveRoutineQuery } from "components/WorkoutRoutines/queries";
 import { SetConfigDataDetails } from "components/WorkoutRoutines/widgets/RoutineDetailsCard";
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { isSameDay } from "utils/date";
 import { makeLink, WgerLink } from "utils/url";
-
+import { DashboardCard } from "./DashboardCard";
 
 export const RoutineCard = () => {
     const [t, i18n] = useTranslation();
@@ -34,37 +23,33 @@ export const RoutineCard = () => {
         return <LoadingPlaceholder />;
     }
 
-    return routineQuery.data !== null
-        ? <RoutineCardContent routine={routineQuery.data!} />
-        : <EmptyCard
-            title={t('routines.routine')}
-            link={makeLink(WgerLink.ROUTINE_ADD, i18n.language)}
-        />;
+    return routineQuery.data !== null ? (
+        <RoutineCardContent routine={routineQuery.data!} />
+    ) : (
+        <EmptyCard title={t("routines.routine")} link={makeLink(WgerLink.ROUTINE_ADD, i18n.language)} />
+    );
 };
 
 const RoutineCardContent = (props: { routine: Routine }) => {
     const [t, i18n] = useTranslation();
 
-    return <Card>
-        <CardHeader
-            title={t('routines.routine')}
+    return (
+        <DashboardCard
+            title={t("routines.routine")}
             subheader={props.routine.name ?? "."}
-        />
-        {/* Note: not 500 like the other cards, but a bit more since we don't have an action icon... */}
-        <CardContent sx={{ height: "510px", overflow: "auto" }}>
+            actions={
+                <Button size="small" href={makeLink(WgerLink.ROUTINE_DETAIL, i18n.language, { id: props.routine.id! })}>
+                    {t("seeDetails")}
+                </Button>
+            }
+        >
             <List>
-                {props.routine.dayDataCurrentIterationNoNulls.map((dayData) =>
-                    <DayListItem dayData={dayData} key={`dayDetails-${dayData.date.toISOString()}`} />)}
+                {props.routine.dayDataCurrentIterationNoNulls.map((dayData) => (
+                    <DayListItem dayData={dayData} key={`dayDetails-${dayData.date.toISOString()}`} />
+                ))}
             </List>
-        </CardContent>
-
-        <CardActions>
-            <Button size="small"
-                    href={makeLink(WgerLink.ROUTINE_DETAIL, i18n.language, { id: props.routine.id! })}>
-                {t('seeDetails')}
-            </Button>
-        </CardActions>
-    </Card>;
+        </DashboardCard>
+    );
 };
 
 const DayListItem = (props: { dayData: RoutineDayData }) => {
@@ -72,36 +57,36 @@ const DayListItem = (props: { dayData: RoutineDayData }) => {
 
     const handleToggleExpand = () => setExpandView(!expandView);
 
-    return (<>
-        <ListItemButton
-            onClick={handleToggleExpand}
-            selected={expandView}
-            disabled={props.dayData.day === null || props.dayData.day?.isRest}
-        >
-            <ListItemIcon>
-                {expandView ? <ExpandLessIcon /> : <ExpandMoreIcon />}
-            </ListItemIcon>
-            <ListItemText
-                primary={getDayName(props.dayData.day)}
-                slotProps={{ secondary: { noWrap: true, style: { overflow: 'hidden', textOverflow: 'ellipsis' } } }}
-                secondary={props.dayData.day?.description}
-            />
-            <ListItemIcon>
-                {isSameDay(props.dayData.date, new Date()) ? <TodayIcon /> : undefined}
-            </ListItemIcon>
-        </ListItemButton>
+    return (
+        <>
+            <ListItemButton
+                onClick={handleToggleExpand}
+                selected={expandView}
+                disabled={props.dayData.day === null || props.dayData.day?.isRest}
+            >
+                <ListItemIcon>{expandView ? <ExpandLessIcon /> : <ExpandMoreIcon />}</ListItemIcon>
+                <ListItemText
+                    primary={getDayName(props.dayData.day)}
+                    slotProps={{ secondary: { noWrap: true, style: { overflow: "hidden", textOverflow: "ellipsis" } } }}
+                    secondary={props.dayData.day?.description}
+                />
+                <ListItemIcon>{isSameDay(props.dayData.date, new Date()) ? <TodayIcon /> : undefined}</ListItemIcon>
+            </ListItemButton>
 
-        <Collapse in={expandView} timeout="auto" unmountOnExit>
-            {props.dayData.slots.map((slotData, index) => (<div key={index}>
-                {slotData.setConfigs.map((setConfigData, index) =>
-                    <SetConfigDataDetails
-                        setConfigData={setConfigData}
-                        key={index}
-                        rowHeight={'70px'}
-                        showExercise={true}
-                    />
-                )}
-            </div>))}
-        </Collapse>
-    </>);
-};
+            <Collapse in={expandView} timeout="auto" unmountOnExit>
+                {props.dayData.slots.map((slotData, index) => (
+                    <div key={index}>
+                        {slotData.setConfigs.map((setConfigData, index) => (
+                            <SetConfigDataDetails
+                                setConfigData={setConfigData}
+                                key={index}
+                                rowHeight={"70px"}
+                                showExercise={true}
+                            />
+                        ))}
+                    </div>
+                ))}
+            </Collapse>
+        </>
+    );
+};

package/src/components/Dashboard/TrophiesCard.test.tsx

@@ -0,0 +1,63 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from '@testing-library/react';
+import { TrophiesCard } from "components/Dashboard/TrophiesCard";
+import { useUserTrophiesQuery } from "components/Trophies/queries/trophies";
+import { testQueryClient } from "tests/queryClient";
+import { testUserTrophies } from "tests/trophies/trophiesTestData";
+
+jest.mock("components/Trophies/queries/trophies");
+
+describe("test the TrophiesCard component", () => {
+
+    describe("Trophies available", () => {
+        beforeEach(() => {
+            (useUserTrophiesQuery as jest.Mock).mockImplementation(() => ({
+                isSuccess: true,
+                isLoading: false,
+                data: testUserTrophies()
+            }));
+        });
+
+        test('renders the trophies correctly', async () => {
+            // Act
+            render(
+                <QueryClientProvider client={testQueryClient}>
+                    <TrophiesCard />
+                </QueryClientProvider>
+            );
+
+            // Assert
+            expect(useUserTrophiesQuery).toHaveBeenCalled();
+            expect(screen.getByText('Beginner')).toBeInTheDocument();
+            expect(screen.getByText('Unstoppable')).toBeInTheDocument();
+        });
+    });
+
+
+    describe("No trophies available", () => {
+
+        beforeEach(() => {
+            (useUserTrophiesQuery as jest.Mock).mockImplementation(() => ({
+                isSuccess: true,
+                isLoading: false,
+                data: null
+            }));
+        });
+
+        test('correctly shows custom empty card, without call to action button', async () => {
+
+            // Act
+            render(
+                <QueryClientProvider client={testQueryClient}>
+                    <TrophiesCard />
+                </QueryClientProvider>
+            );
+
+            // Assert
+            expect(useUserTrophiesQuery).toHaveBeenCalled();
+            expect(screen.getByText('nothingHereYet')).toBeInTheDocument();
+            expect(screen.queryByText('nothingHereYetAction')).not.toBeInTheDocument();
+            expect(screen.queryByText('add')).not.toBeInTheDocument();
+        });
+    });
+});

package/src/components/Dashboard/TrophiesCard.tsx

@@ -0,0 +1,84 @@
+import { Button, Card, CardContent, CardHeader, CardMedia, Tooltip, Typography, } from "@mui/material";
+import Box from "@mui/system/Box";
+import Stack from "@mui/system/Stack";
+import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
+import { UserTrophy } from "components/Trophies/models/userTrophy";
+import { useUserTrophiesQuery } from "components/Trophies/queries/trophies";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { makeLink, WgerLink } from "utils/url";
+import { DashboardCard } from "./DashboardCard";
+
+export const TrophiesCard = () => {
+    const trophiesQuery = useUserTrophiesQuery();
+
+    if (trophiesQuery.isLoading) {
+        return <LoadingPlaceholder />;
+    }
+
+    return trophiesQuery.data !== null
+        ? <TrophiesCardContent trophies={trophiesQuery.data!} />
+        : <EmptyTrophiesCardContent />;
+};
+
+function TrophiesCardContent(props: { trophies: UserTrophy[] }) {
+    const { t, i18n } = useTranslation();
+
+    const tooltipWidget = (tooltip: string) => <Typography variant="body2" textAlign={'center'}>
+        {tooltip}
+    </Typography>;
+
+    return (<DashboardCard
+        title={''}
+        scrollable={false}
+        actions={
+            <>
+                <Button
+                    size="small"
+                    href={makeLink(WgerLink.TROPHIES, i18n.language)}
+                >
+                    {t("seeDetails")}
+                </Button>
+            </>
+        }
+    >
+        <Box sx={{ overflowX: 'auto', width: '100%' }}>
+            <Stack direction="row" spacing={3} sx={{ display: 'flex' }}>
+                {props.trophies.map((userTrophy) => (
+                    <Tooltip title={tooltipWidget(userTrophy.trophy.description)} arrow key={userTrophy.trophy.uuid}>
+                        <Card sx={{ width: 80, flex: '0 0 auto', boxShadow: 'none' }}>
+                            <CardMedia
+                                component="img"
+                                image={userTrophy.trophy.image}
+                                title={userTrophy.trophy.name}
+                            />
+                            <CardContent>
+                                <Typography gutterBottom variant="body2" component="div" textAlign="center">
+                                    {userTrophy.trophy.name}
+                                </Typography>
+                            </CardContent>
+                        </Card>
+                    </Tooltip>
+                ))}
+            </Stack>
+        </Box>
+    </DashboardCard>);
+}
+
+export const EmptyTrophiesCardContent = () => {
+    const [t] = useTranslation();
+
+    return (<>
+        <Card sx={{ paddingTop: 0, height: "100%", }}>
+            <CardHeader
+                title={t("trophies.trophies")}
+                sx={{ paddingBottom: 0 }}
+            />
+            <CardContent>
+                <Typography variant="h6" mr={3}>
+                    {t('nothingHereYet')}
+                </Typography>
+            </CardContent>
+        </Card>
+    </>);
+};