@wger-project/react-components 25.12.5 → 26.1.18

package/src/components/Dashboard/ConfigurableDashboard.tsx

@@ -1,28 +1,43 @@
-import { Box, Button, IconButton, Tooltip } from "@mui/material";
 import DashboardCustomizeIcon from "@mui/icons-material/DashboardCustomize";
-import RestartAltIcon from "@mui/icons-material/RestartAlt";
 import DoneIcon from '@mui/icons-material/Done';
-import React, { useState, useCallback, useMemo } from "react";
-import { Responsive, WidthProvider, Layout, Layouts } from "react-grid-layout";
-import "react-grid-layout/css/styles.css";
-import "react-resizable/css/styles.css";
+import RestartAltIcon from "@mui/icons-material/RestartAlt";
+import RuleIcon from '@mui/icons-material/Rule';
+import { Box, Button, IconButton, ListItemText, Menu, MenuItem, Switch, Tooltip } from "@mui/material";
+import { CalendarCard } from "components/Dashboard/CalendarCard";
+import { MeasurementCard } from "components/Dashboard/MeasurementCard";
 import { NutritionCard } from "components/Dashboard/NutritionCard";
 import { RoutineCard } from "components/Dashboard/RoutineCard";
+import { TrophiesCard } from "components/Dashboard/TrophiesCard";
 import { WeightCard } from "components/Dashboard/WeightCard";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Layout, Layouts, Responsive, WidthProvider } from "react-grid-layout";
+import "react-grid-layout/css/styles.css";
+import "react-resizable/css/styles.css";
 import { useTranslation } from "react-i18next";
 
 const ResponsiveGridLayout = WidthProvider(Responsive);
 
-// Local storage key for persisting layouts
-const LAYOUT_STORAGE_KEY = "dashboard-layout";
+const DASHBOARD_STORAGE_KEY = "dashboard-state";
+
+const VERSION = 1;
+
+type DashboardState = {
+    version: number;
+    selectedWidgetIds: string[];
+    hiddenWidgetIds: string[];
+    layouts: Layouts | null;
+};
+
+const BREAKPOINTS = ['lg', 'md', 'sm', 'xs'] as const;
 
 // Define widget types for extensibility
-export type WidgetType = "routine" | "nutrition" | "weight";
+export type WidgetType = "routine" | "nutrition" | "weight" | "calendar" | "measurement" | "trophies";
 
 export interface WidgetConfig {
     id: string;
     type: WidgetType;
     component: React.ComponentType;
+    translationKey: string; // key for i18n translations
     defaultLayout: {
         w: number;
         h: number;
@@ -39,31 +54,188 @@ export const AVAILABLE_WIDGETS: WidgetConfig[] = [
         id: "routine",
         type: "routine",
         component: RoutineCard,
+        translationKey: 'routines.routine',
         defaultLayout: { w: 4, h: 5, x: 0, y: 0, minW: 3, minH: 2 },
     },
     {
         id: "nutrition",
         type: "nutrition",
         component: NutritionCard,
+        translationKey: 'nutritionalPlan',
         defaultLayout: { w: 4, h: 5, x: 4, y: 0, minW: 3, minH: 2 },
     },
     {
         id: "weight",
         type: "weight",
         component: WeightCard,
+        translationKey: 'weight',
         defaultLayout: { w: 4, h: 5, x: 8, y: 0, minW: 3, minH: 2 },
     },
+    {
+        id: "calendar",
+        type: "calendar",
+        component: CalendarCard,
+        translationKey: 'calendar',
+        defaultLayout: { w: 8, h: 4, x: 0, y: 1, minW: 3, minH: 2 },
+    },
+    {
+        id: "measurement",
+        type: "measurement",
+        component: MeasurementCard,
+        translationKey: 'measurements.measurements',
+        defaultLayout: { w: 4, h: 4, x: 8, y: 1, minW: 3, minH: 2 },
+    },
+    {
+        id: "trophies",
+        type: "trophies",
+        component: TrophiesCard,
+        translationKey: 'trophies.trophies',
+        defaultLayout: { w: 12, h: 2, x: 0, y: 2, minW: 3, minH: 2 },
+    },
 ];
 
+/*
+ * Load dashboard state from local storage, with migration support for older formats.
+ * Returns null if no saved state exists.
+ */
+export const loadDashboardState = (): DashboardState | null => {
+    try {
+        const raw = localStorage.getItem(DASHBOARD_STORAGE_KEY);
+        if (raw === null) {
+            return null;
+        }
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const parsedAny = JSON.parse(raw) as any;
+
+        let out: DashboardState | null = null;
+
+        // If version is not present -> treat as old format and migrate
+        //TODO: Once some time has passed, this can be removed after some time, e.g. after 2026-01-31.
+        if (typeof parsedAny.version === 'undefined') {
+            out = migrateOldDashboardState(parsedAny);
+            saveDashboardState(out);
+        } else {
+            out = parsedAny as DashboardState;
+        }
+
+        if (!out) {
+            return null;
+        }
+
+
+        // Sanity checks
+        // -> remove unknown widget ids
+        const allowedWidgets = new Set(AVAILABLE_WIDGETS.map((w) => w.id));
+
+        out.selectedWidgetIds = Array.isArray(out.selectedWidgetIds)
+            ? out.selectedWidgetIds.filter((id) => allowedWidgets.has(id))
+            : [];
+
+        out.hiddenWidgetIds = Array.isArray(out.hiddenWidgetIds)
+            ? out.hiddenWidgetIds.filter((id) => allowedWidgets.has(id))
+            : [];
+
+        // -> If selected list is empty, default to all available, except those explicitly hidden
+        if (out.selectedWidgetIds.length === 0) {
+            out.selectedWidgetIds = AVAILABLE_WIDGETS.map((w) => w.id).filter((id) => !out.hiddenWidgetIds.includes(id));
+        }
+
+        // -> remove unknown ids from the layout
+        for (const bp of BREAKPOINTS) {
+            const arr = (out.layouts as Layouts)[bp] as Layout[] | undefined;
+            if (Array.isArray(arr)) {
+                (out.layouts as Layouts)[bp] = arr.filter((item: Layout) => item && allowedWidgets.has(String(item.i)));
+            }
+        }
+
+        // -> if there are widgets in AVAILABLE_WIDGETS that are not in selected or hidden
+        //   (e.g. because they have been added in the meantime), add them to selected
+        const known = new Set([...out.selectedWidgetIds, ...out.hiddenWidgetIds]);
+        const missing: string[] = AVAILABLE_WIDGETS.map((w) => w.id).filter((id) => !known.has(id));
+        if (missing.length > 0) {
+            out.selectedWidgetIds = [...out.selectedWidgetIds, ...missing];
+            saveDashboardState(out);
+        }
+
+        return out;
+    } catch (error) {
+        console.error('Error loading dashboard state', error);
+        return null;
+    }
+};
+
+const saveDashboardState = (state: DashboardState) => {
+    try {
+        const toSave: DashboardState = {
+            ...state,
+            version: state.version ?? 1,
+            selectedWidgetIds: Array.isArray(state.selectedWidgetIds) ? [...state.selectedWidgetIds].slice().sort() : [],
+            hiddenWidgetIds: Array.isArray(state.hiddenWidgetIds) ? [...state.hiddenWidgetIds].slice().sort() : [],
+        };
+        localStorage.setItem(DASHBOARD_STORAGE_KEY, JSON.stringify(toSave));
+    } catch (error) {
+        console.error('Error saving dashboard state', error);
+    }
+};
+
+// Migrate the old dashboard-state shape into the new DashboardState
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const migrateOldDashboardState = (parsedAny: any): DashboardState => {
+    const parsed = parsedAny as DashboardState;
+    parsed.version = 1;
+
+    // Ensure hiddenWidgetIds exists in migrated state
+    if (!Array.isArray(parsed.hiddenWidgetIds)) parsed.hiddenWidgetIds = [];
+
+    // If selectedWidgetIds missing, try to extract from layouts (or top-level breakpoints)
+    if (!Array.isArray(parsed.selectedWidgetIds)) {
+        const ids = new Set<string>();
+        let layoutsSource: Layouts | undefined;
+        if (parsed && parsed.layouts) {
+            layoutsSource = parsed.layouts as Layouts;
+        } else if (parsedAny && (parsedAny.lg || parsedAny.md || parsedAny.sm || parsedAny.xs)) {
+            layoutsSource = {
+                lg: parsedAny.lg ?? [],
+                md: parsedAny.md ?? [],
+                sm: parsedAny.sm ?? [],
+                xs: parsedAny.xs ?? [],
+            } as Layouts;
+            parsed.layouts = layoutsSource;
+
+            delete parsedAny.lg;
+            delete parsedAny.md;
+            delete parsedAny.sm;
+            delete parsedAny.xs;
+        }
+
+        if (layoutsSource) {
+            for (const bp of BREAKPOINTS) {
+                const arr = layoutsSource[bp] as Layout[] | undefined;
+                if (Array.isArray(arr)) arr.forEach((item: Layout) => {
+                    if (item && item.i) ids.add(String(item.i));
+                });
+            }
+        }
+
+        if (ids.size > 0) parsed.selectedWidgetIds = Array.from(ids);
+        else parsed.selectedWidgetIds = AVAILABLE_WIDGETS.map((w) => w.id);
+
+    }
+
+    return parsed;
+};
+
+
 // Generate default layouts for all breakpoints
-const generateDefaultLayouts = (): Layouts => {
-    const lg: Layout[] = AVAILABLE_WIDGETS.map((widget) => ({
+const generateDefaultLayouts = (widgets: WidgetConfig[] = AVAILABLE_WIDGETS): Layouts => {
+    const lg: Layout[] = widgets.map((widget) => ({
         i: widget.id,
         ...widget.defaultLayout,
     }));
 
     // For medium screens, make widgets full width in pairs
-    const md: Layout[] = AVAILABLE_WIDGETS.map((widget, index) => ({
+    const md: Layout[] = widgets.map((widget, index) => ({
         i: widget.id,
         w: 6,
         h: widget.defaultLayout.h,
@@ -74,7 +246,7 @@ const generateDefaultLayouts = (): Layouts => {
     }));
 
     // For small screens, stack vertically
-    const sm: Layout[] = AVAILABLE_WIDGETS.map((widget, index) => ({
+    const sm: Layout[] = widgets.map((widget, index) => ({
         i: widget.id,
         w: 12,
         h: widget.defaultLayout.h,
@@ -87,49 +259,107 @@ const generateDefaultLayouts = (): Layouts => {
     return { lg, md, sm, xs: sm };
 };
 
-// Load layouts from localStorage
-const loadLayouts = (): Layouts | null => {
-    try {
-        const saved = localStorage.getItem(LAYOUT_STORAGE_KEY);
-        return saved ? JSON.parse(saved) : null;
-    } catch (error) {
-        console.error("Error loading dashboard layout:", error);
-        return null;
-    }
-};
+interface ConfigurableDashboardProps {
+    /** Optional list of widget IDs to show (defaults to all AVAILABLE_WIDGETS) */
+    enabledWidgetIds?: string[];
+}
 
-// Save layouts to localStorage
-const saveLayouts = (layouts: Layouts) => {
-    try {
-        localStorage.setItem(LAYOUT_STORAGE_KEY, JSON.stringify(layouts));
-    } catch (error) {
-        console.error("Error saving dashboard layout:", error);
-    }
-};
+export const ConfigurableDashboard: React.FC<ConfigurableDashboardProps> = ({ enabledWidgetIds }) => {
+    const [tRaw] = useTranslation();
+    // Cast t to a looser signature so we can call dynamic keys like `dashboard.widgets` without TS errors
+    const t = tRaw as unknown as (key: string) => string;
 
-export const ConfigurableDashboard: React.FC = () => {
-    const [t] = useTranslation();
     const [isEditMode, setIsEditMode] = useState(false);
+
+    // Selected widgets (internal state) - initialize from prop or persisted single-state
+    const [selectedWidgetIds, setSelectedWidgetIds] = useState<string[]>(() => {
+        if (enabledWidgetIds && enabledWidgetIds.length > 0) return enabledWidgetIds;
+        const saved = loadDashboardState();
+        if (saved && Array.isArray(saved.selectedWidgetIds)) {
+            return saved.selectedWidgetIds;
+        }
+        return AVAILABLE_WIDGETS.map((w) => w.id);
+    });
+
+    // Hidden widgets (persisted)
+    const [hiddenWidgetIds, setHiddenWidgetIds] = useState<string[]>(() => {
+        const saved = loadDashboardState();
+        if (saved && Array.isArray(saved.hiddenWidgetIds)) return saved.hiddenWidgetIds;
+        return [];
+    });
+
+    // Menu anchor for widget selection
+    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+
+    const visibleWidgets = useMemo(() => {
+        return AVAILABLE_WIDGETS.filter((w) => selectedWidgetIds.includes(w.id));
+    }, [selectedWidgetIds]);
+
     const [layouts, setLayouts] = useState<Layouts>(() => {
-        const savedLayouts = loadLayouts();
-        return savedLayouts || generateDefaultLayouts();
+        const saved = loadDashboardState();
+        return (saved && saved.layouts) || generateDefaultLayouts(visibleWidgets);
     });
 
+    // when selected widgets change, either re-use the saved layouts (if the saved selection matches)
+    // or generate defaults for the new visible set
+    useEffect(() => {
+        const saved = loadDashboardState();
+        if (saved && Array.isArray(saved.selectedWidgetIds) && saved.layouts) {
+            // compare as sets (order-insensitive)
+            const sameLength = saved.selectedWidgetIds.length === selectedWidgetIds.length;
+            const sameMembers = saved.selectedWidgetIds.every((id) => selectedWidgetIds.includes(id));
+            if (sameLength && sameMembers) {
+                setLayouts(saved.layouts);
+                return;
+            }
+        }
+        setLayouts(generateDefaultLayouts(visibleWidgets));
+    }, [selectedWidgetIds, visibleWidgets]);
+
     const handleLayoutChange = useCallback((_: Layout[], allLayouts: Layouts) => {
         setLayouts(allLayouts);
-        saveLayouts(allLayouts);
     }, []);
 
+    // Reset to defaults for all available widgets and make all widgets visible
     const handleResetLayout = useCallback(() => {
-        const defaultLayouts = generateDefaultLayouts();
+        const allWidgetIds = AVAILABLE_WIDGETS.map((w) => w.id);
+        setSelectedWidgetIds(allWidgetIds);
+        setHiddenWidgetIds([]);
+
+        const defaultLayouts = generateDefaultLayouts(AVAILABLE_WIDGETS);
         setLayouts(defaultLayouts);
-        saveLayouts(defaultLayouts);
+        saveDashboardState({
+            selectedWidgetIds: allWidgetIds,
+            hiddenWidgetIds: [],
+            layouts: defaultLayouts,
+            version: VERSION
+        });
     }, []);
 
     const toggleEditMode = useCallback(() => {
         setIsEditMode((prev) => !prev);
     }, []);
 
+    // Widget menu handlers
+    const openWidgetMenu = (e: React.MouseEvent<HTMLElement>) => setAnchorEl(e.currentTarget);
+    const closeWidgetMenu = () => setAnchorEl(null);
+
+    const toggleWidget = (id: string) => {
+        // If currently selected -> remove from selected and add to hidden
+        if (selectedWidgetIds.includes(id)) {
+            setSelectedWidgetIds((prev) => prev.filter((p) => p !== id));
+            setHiddenWidgetIds((prev) => (prev.includes(id) ? prev : [...prev, id]));
+        } else {
+            // If currently hidden or not present -> add to selected and remove from hidden
+            setSelectedWidgetIds((prev) => [...prev, id]);
+            setHiddenWidgetIds((prev) => prev.filter((h) => h !== id));
+        }
+    };
+
+    useEffect(() => {
+        saveDashboardState({ selectedWidgetIds, hiddenWidgetIds, layouts, version: VERSION });
+    }, [selectedWidgetIds, hiddenWidgetIds, layouts]);
+
     // Grid configuration
     const gridConfig = useMemo(
         () => ({
@@ -160,32 +390,53 @@ export const ConfigurableDashboard: React.FC = () => {
                 }}
             >
                 {isEditMode && (
-                    <Box
-                        sx={{
-                            p: 1,
-                            borderRadius: 1,
-                            fontSize: "0.875rem",
-                        }}
-                    >
-                        {t('dashboard.dragWidgetsHelp')}
-                    </Box>
-                )}
-                {isEditMode && (
-                    <Tooltip title={t('dashboard.resetLayout')}>
+                    <>
+                        <Box
+                            sx={{
+                                p: 1,
+                                borderRadius: 1,
+                                fontSize: "0.875rem",
+                            }}
+                        >
+                            {t('dashboard.dragWidgetsHelp')}
+                        </Box>
                         <IconButton
-                            onClick={handleResetLayout}
                             size="small"
+                            onClick={openWidgetMenu}
                             sx={{
                                 color: "primary.main",
                                 borderRadius: 1,
                                 fontSize: "0.875rem",
                             }}
                         >
-                            <RestartAltIcon />
+                            <RuleIcon />
                         </IconButton>
-                    </Tooltip>
+                        <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={closeWidgetMenu}>
+                            {AVAILABLE_WIDGETS.map((widget) => (
+                                <MenuItem key={widget.id} onClick={() => toggleWidget(widget.id)}>
+                                    <Switch checked={selectedWidgetIds.includes(widget.id)} />
+                                    <ListItemText primary={t(widget.translationKey)} />
+                                </MenuItem>
+                            ))}
+                        </Menu>
+                        <Tooltip title={t('dashboard.resetLayout')}>
+                            <IconButton
+                                onClick={handleResetLayout}
+                                size="small"
+                                sx={{
+                                    color: "primary.main",
+                                    borderRadius: 1,
+                                    fontSize: "0.875rem",
+                                }}
+                            >
+                                <RestartAltIcon />
+                            </IconButton>
+                        </Tooltip>
+                    </>
                 )}
-                <Tooltip title={isEditMode ? t('core.exitEditMode') : t('dashboard.customizeDashboard')}>
+
+                <Tooltip
+                    title={isEditMode ? t('core.exitEditMode') : t('dashboard.customizeDashboard')}>
                     <Button
                         variant={isEditMode ? "contained" : "outlined"}
                         startIcon={isEditMode ? <DoneIcon /> : <DashboardCustomizeIcon />}
@@ -199,7 +450,7 @@ export const ConfigurableDashboard: React.FC = () => {
             </Box>
 
             <ResponsiveGridLayout {...gridConfig}>
-                {AVAILABLE_WIDGETS.map((widget) => {
+                {visibleWidgets.map((widget) => {
                     const WidgetComponent = widget.component;
                     return (
                         <Box

package/src/components/Dashboard/DashboardCard.tsx

@@ -72,7 +72,8 @@ export interface DashboardCardProps {
  * </DashboardCard>
  * ```
  */
-export const DashboardCard: React.FC<DashboardCardProps> = ({
+export const DashboardCard: React.FC<DashboardCardProps> = (
+    {
     title,
     subheader,
     children,
@@ -92,7 +93,7 @@ export const DashboardCard: React.FC<DashboardCardProps> = ({
                 ...cardSx,
             }}
         >
-            <CardHeader title={title} subheader={subheader} action={headerAction} />
+            {title !== '' && <CardHeader title={title} subheader={subheader} action={headerAction} />}
 
             <CardContent
                 sx={{

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

@@ -0,0 +1,75 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from '@testing-library/react';
+import { MeasurementCard } from "components/Dashboard/MeasurementCard";
+import { useMeasurementsCategoryQuery } from "components/Measurements/queries";
+import { TEST_MEASUREMENT_CATEGORY_1, TEST_MEASUREMENT_CATEGORY_2 } from "tests/measurementsTestData";
+
+jest.mock("components/Measurements/queries");
+jest.useFakeTimers();
+
+const queryClient = new QueryClient();
+
+describe("smoke test the MeasurementCard component", () => {
+
+    describe("Measurements available", () => {
+
+        beforeEach(() => {
+            (useMeasurementsCategoryQuery as jest.Mock).mockImplementation(() => ({
+                isSuccess: true,
+                isLoading: false,
+                data: [
+                    TEST_MEASUREMENT_CATEGORY_1,
+                    TEST_MEASUREMENT_CATEGORY_2
+                ]
+            }));
+        });
+
+        test('renders the current categories correctly', async () => {
+
+            // Act
+            render(
+                <QueryClientProvider client={queryClient}>
+                    <MeasurementCard />
+                </QueryClientProvider>
+            );
+
+            // Assert
+            expect(useMeasurementsCategoryQuery).toHaveBeenCalled();
+            expect(screen.getAllByText('Biceps').length).toBeGreaterThan(0);
+            expect(screen.getAllByText('11 %').length).toBeGreaterThan(0);
+            expect(screen.getAllByText('22 %').length).toBeGreaterThan(0);
+            expect(screen.getAllByText('33 %').length).toBeGreaterThan(0);
+            expect(screen.getAllByText('44 %').length).toBeGreaterThan(0);
+        });
+    });
+
+
+    describe("No data available", () => {
+
+        beforeEach(() => {
+            (useMeasurementsCategoryQuery as jest.Mock).mockImplementation(() => ({
+                isSuccess: true,
+                isLoading: false,
+                data: null
+            }));
+        });
+
+        test('renders the overview correctly', async () => {
+
+            // Act
+            render(
+                <QueryClientProvider client={queryClient}>
+                    <MeasurementCard />
+                </QueryClientProvider>
+            );
+
+            // Assert
+            expect(useMeasurementsCategoryQuery).toHaveBeenCalled();
+            expect(screen.getByText('nothingHereYet')).toBeInTheDocument();
+            expect(screen.getByText('nothingHereYetAction')).toBeInTheDocument();
+            expect(screen.getByText('add')).toBeInTheDocument();
+        });
+    });
+});
+
+

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>
+    </>);
+};