@wger-project/react-components 25.10.16

package/src/components/Nutrition/models/nutritionalPlan.ts

@@ -0,0 +1,268 @@
+import { NutritionalValues } from "components/Nutrition/helpers/nutritionalValues";
+import { DiaryEntry } from "components/Nutrition/models/diaryEntry";
+import { Meal } from "components/Nutrition/models/meal";
+import { ApiNutritionalPlanType } from "types";
+import { Adapter } from "utils/Adapter";
+import { dateToYYYYMMDD, isSameDay } from "utils/date";
+
+/* eslint-disable camelcase */
+
+export type GroupedDiaryEntries = {
+    entries: DiaryEntry[];
+    nutritionalValues: NutritionalValues;
+}
+
+export const PSEUDO_MEAL_ID = -1;
+
+
+type NutritionalPlanConstructorParams = {
+    id?: number | null,
+    creationDate?: Date,
+    start?: Date,
+    end?: Date | null,
+    description?: string,
+    onlyLogging?: boolean,
+    goalEnergy?: number | null,
+    goalProtein?: number | null,
+    goalCarbohydrates?: number | null,
+    goalFiber?: number | null,
+    goalSodium?: number | null,
+    goalFat?: number | null,
+    goalFatsSaturated?: number | null,
+};
+
+
+export class NutritionalPlan {
+    id: number | null;
+    creationDate: Date;
+    start: Date;
+    end: Date | null;
+    description: string;
+    onlyLogging: boolean;
+    goalEnergy: number | null;
+    goalProtein: number | null;
+    goalCarbohydrates: number | null;
+    goalFiber: number | null;
+    goalSodium: number | null;
+    goalFat: number | null;
+    goalFatsSaturated: number | null;
+
+    meals: Meal[] = [];
+    diaryEntries: DiaryEntry[] = [];
+
+    constructor(data: NutritionalPlanConstructorParams) {
+        this.id = data.id ?? null;
+        this.creationDate = data.creationDate ?? new Date();
+        this.start = data.start ?? this.creationDate;
+        this.end = data.end ?? null;
+        this.description = data.description ?? '';
+        this.onlyLogging = data.onlyLogging ?? false;
+        this.goalEnergy = data.goalEnergy ?? null;
+        this.goalProtein = data.goalProtein ?? null;
+        this.goalCarbohydrates = data.goalCarbohydrates ?? null;
+        this.goalFiber = data.goalFiber ?? null;
+        this.goalSodium = data.goalSodium ?? null;
+        this.goalFat = data.goalFat ?? null;
+        this.goalFatsSaturated = data.goalFatsSaturated ?? null;
+    }
+
+
+    get hasAnyGoals() {
+        return this.goalEnergy !== null
+            || this.goalProtein !== null
+            || this.goalCarbohydrates !== null
+            || this.goalFat !== null;
+    }
+
+    get hasAnyAdvancedGoals() {
+        return this.goalFiber !== null
+            || this.goalSodium !== null
+            || this.goalFatsSaturated !== null;
+    }
+
+    get hasAnyPlanned() {
+        return this.hasAnyGoals || this.plannedNutritionalValues.energy > 0;
+    }
+
+    /*
+     * Returns the nutritional values for the planned meals
+     */
+    get plannedNutritionalValues() {
+        if (this.hasAnyGoals) {
+            return new NutritionalValues({
+                energy: this.goalEnergy!,
+                carbohydrates: this.goalCarbohydrates!,
+                protein: this.goalProtein!,
+                fat: this.goalFat!
+            });
+        }
+
+        const out = new NutritionalValues();
+        for (const item of this.meals) {
+            out.add(item.plannedNutritionalValues);
+        }
+
+        return out;
+    }
+
+    /*
+     * Returns the average nutritional values of the last 7 days.
+     *
+     * If no entries are available, the function returns an empty NutritionalValues object.
+     */
+    get loggedNutritionalValues7DayAvg(): NutritionalValues {
+        const today = new Date();
+        const sevenDaysAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
+        const relevantEntries = this.diaryEntries.filter(entry => entry.datetime >= sevenDaysAgo);
+
+        return this.getAverageNutritionalValuesFromDiaryEntries(relevantEntries);
+    }
+
+    /*
+     * Returns the nutritional values for the logged meals for today
+     */
+    get loggedNutritionalValuesToday() {
+        const relevantEntries = this.diaryEntries.filter(entry => isSameDay(entry.datetime, new Date()));
+        // console.log(relevantEntries);
+        // console.log(this.getNutritionalValuesFromDiaryEntries(relevantEntries));
+        return this.getNutritionalValuesFromDiaryEntries(relevantEntries);
+    }
+
+    /*
+     * Returns a map of diary entries grouped by day
+     */
+    get groupDiaryEntries(): Map<string, GroupedDiaryEntries> {
+
+        return this.diaryEntries.reduce((map, entry) => {
+            const dateKey = entry.datetime.toISOString().split('T')[0]; // Use ISO string format as the key
+            const entriesForDay = map.get(dateKey) || { entries: [], nutritionalValues: new NutritionalValues() };
+            entriesForDay.entries.push(entry);
+            entriesForDay.nutritionalValues.add(entry.nutritionalValues);
+            map.set(dateKey, entriesForDay);
+
+            return map;
+        }, new Map<string, GroupedDiaryEntries>());
+    }
+
+    get percentageValuesLoggedToday() {
+        return new NutritionalValues({
+            protein: this.loggedNutritionalValuesToday.protein / this.plannedNutritionalValues.protein * 100,
+            carbohydrates: this.loggedNutritionalValuesToday.carbohydrates / this.plannedNutritionalValues.carbohydrates * 100,
+            fat: this.loggedNutritionalValuesToday.fat / this.plannedNutritionalValues.fat * 100,
+        });
+    }
+
+    clone(values: Partial<NutritionalPlan>): NutritionalPlan {
+        return new NutritionalPlan({
+            id: values.id !== undefined ? values.id : this.id,
+            creationDate: values.creationDate !== undefined ? values.creationDate : this.creationDate,
+            start: values.start !== undefined ? values.start : this.start,
+            end: values.end !== undefined ? values.end : this.end,
+            description: values.description !== undefined ? values.description : this.description,
+            onlyLogging: values.onlyLogging !== undefined ? values.onlyLogging : this.onlyLogging,
+            goalEnergy: values.goalEnergy !== undefined ? values.goalEnergy : this.goalEnergy,
+            goalProtein: values.goalProtein !== undefined ? values.goalProtein : this.goalProtein,
+            goalCarbohydrates: values.goalCarbohydrates !== undefined ? values.goalCarbohydrates : this.goalCarbohydrates,
+            goalFiber: values.goalFiber !== undefined ? values.goalFiber : this.goalFiber,
+            goalSodium: values.goalSodium !== undefined ? values.goalSodium : this.goalSodium,
+            goalFat: values.goalFat !== undefined ? values.goalFat : this.goalFat,
+            goalFatsSaturated: values.goalFatsSaturated !== undefined ? values.goalFatsSaturated : this.goalFatsSaturated,
+        });
+    }
+
+    /*
+     * Returns a synthetic meal object for the pseudo meal 'Others'
+     *
+     * This contains all logs not logged to any of the other meals
+     */
+    pseudoMealOthers(name: string): Meal {
+        const out = new Meal({
+            id: PSEUDO_MEAL_ID,
+            order: -1,
+            name: name
+        });
+        out.diaryEntries = this.diaryEntries.filter((entry) => entry.mealId === null);
+
+        return out;
+    }
+
+    /*
+     * Returns the nutritional values for the logged meals for a given date
+     */
+    loggedNutritionalValuesDate(date: Date) {
+        return this.getNutritionalValuesFromDiaryEntries(this.loggedEntriesDate(date));
+    }
+
+    /*
+     * Returns the diary entries for a given date
+     */
+    loggedEntriesDate(date: Date) {
+        return this.diaryEntries.filter(entry => isSameDay(entry.datetime, date));
+    }
+
+    getAverageNutritionalValuesFromDiaryEntries(entries: DiaryEntry[]) {
+        const nrOfEntries = entries.length;
+        const out = this.getNutritionalValuesFromDiaryEntries(entries);
+
+        if (nrOfEntries === 0) {
+            return out;
+        }
+
+        out.energy = out.energy / nrOfEntries;
+        out.protein = out.protein / nrOfEntries;
+        out.carbohydrates = out.carbohydrates / nrOfEntries;
+        out.carbohydratesSugar = out.carbohydratesSugar / nrOfEntries;
+        out.fat = out.fat / nrOfEntries;
+        out.fatSaturated = out.fatSaturated / nrOfEntries;
+        out.fiber = out.fiber / nrOfEntries;
+        out.sodium = out.sodium / nrOfEntries;
+        return out;
+    }
+
+    getNutritionalValuesFromDiaryEntries(entries: DiaryEntry[]) {
+        return entries.reduce(
+            (acc, entry) => acc.add(entry.nutritionalValues), new NutritionalValues()
+        );
+    }
+}
+
+
+export class NutritionalPlanAdapter implements Adapter<NutritionalPlan> {
+    fromJson(item: ApiNutritionalPlanType) {
+        return new NutritionalPlan({
+            id: item.id,
+            creationDate: new Date(item.creation_date),
+            start: new Date(item.start),
+            end: item.end !== null ? new Date(item.end) : null,
+            description: item.description,
+            onlyLogging: item.only_logging,
+            goalEnergy: item.goal_energy,
+            goalProtein: item.goal_protein,
+            goalCarbohydrates: item.goal_carbohydrates,
+            goalFiber: item.goal_fiber,
+            goalSodium: null,
+            goalFat: item.goal_fat,
+            goalFatsSaturated: null,
+        });
+    }
+
+    toJson(item: NutritionalPlan) {
+        return {
+            ...(item.id != null ? { id: item.id } : {}),
+
+            start: dateToYYYYMMDD(item.start),
+            end: item.end ? dateToYYYYMMDD(item.end) : null,
+            description: item.description,
+            only_logging: item.onlyLogging,
+            goal_energy: item.goalEnergy,
+            goal_protein: item.goalProtein,
+            goal_carbohydrates: item.goalCarbohydrates,
+            goal_fiber: item.goalFiber,
+            goal_sodium: item.goalSodium,
+            goal_fat: item.goalFat,
+            goal_fats_saturated: item.goalFatsSaturated,
+        };
+    }
+}
+
+export const nutritionalPlanAdapter = new NutritionalPlanAdapter();

package/src/components/Nutrition/models/weightUnit.ts

@@ -0,0 +1,24 @@
+import { ApiIngredientWeightUnitType } from "types";
+import { Adapter } from "utils/Adapter";
+
+export class NutritionWeightUnit {
+
+    constructor(
+        public id: number,
+        public amount: number,
+        public grams: number,
+        public name: string = ''
+    ) {
+    }
+}
+
+
+export class NutritionWeightUnitAdapter implements Adapter<NutritionWeightUnit> {
+    fromJson(item: ApiIngredientWeightUnitType) {
+        return new NutritionWeightUnit(
+            item.id,
+            parseFloat(item.amount),
+            item.gram,
+        );
+    }
+}

package/src/components/Nutrition/queries/diary.ts

@@ -0,0 +1,59 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { DiaryEntry } from "components/Nutrition/models/diaryEntry";
+import {
+    addNutritionalDiaryEntry,
+    deleteNutritionalDiaryEntry,
+    editNutritionalDiaryEntry,
+    getNutritionalDiaryEntries
+} from "services";
+import { NutritionalDiaryEntriesOptions } from "services/nutritionalDiary";
+import { QueryKey } from "utils/consts";
+
+export const useNutritionDiaryQuery = (options?: NutritionalDiaryEntriesOptions) => useQuery({
+    queryFn: () => getNutritionalDiaryEntries(options),
+    queryKey: [QueryKey.NUTRITIONAL_PLAN_DIARY, JSON.stringify(options || {})],
+});
+
+export const useAddDiaryEntryQuery = (planId: number) => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (diaryEntry: DiaryEntry) => addNutritionalDiaryEntry(diaryEntry),
+        onSuccess: () => queryClient.invalidateQueries({
+            queryKey: [QueryKey.NUTRITIONAL_PLAN, planId]
+        })
+    });
+};
+
+export const useAddDiaryEntriesQuery = (planId: number) => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (data: DiaryEntry[]) => Promise.all(data.map(d => addNutritionalDiaryEntry(d))),
+        onSuccess: () => queryClient.invalidateQueries({
+            queryKey: [QueryKey.NUTRITIONAL_PLAN, planId]
+        })
+    });
+};
+
+export const useDeleteDiaryEntryQuery = (planId: number) => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (id: number) => deleteNutritionalDiaryEntry(id),
+        onSuccess: () => queryClient.invalidateQueries({
+            queryKey: [QueryKey.NUTRITIONAL_PLAN, planId]
+        })
+    });
+};
+
+export const useEditDiaryEntryQuery = (planId: number) => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (diaryEntry: DiaryEntry) => editNutritionalDiaryEntry(diaryEntry),
+        onSuccess: () => queryClient.invalidateQueries({
+            queryKey: [QueryKey.NUTRITIONAL_PLAN, planId]
+        })
+    });
+};

package/src/components/Nutrition/queries/index.ts

@@ -0,0 +1,20 @@
+export {
+    useFetchNutritionalPlansQuery,
+    useFetchNutritionalPlanDateQuery,
+    useEditNutritionalPlanQuery,
+    useAddNutritionalPlanQuery,
+    useFetchNutritionalPlanQuery,
+    useDeleteNutritionalPlanQuery,
+    useFetchLastNutritionalPlanQuery,
+
+} from './plan';
+
+export {
+    useAddDiaryEntryQuery, useDeleteDiaryEntryQuery, useEditDiaryEntryQuery, useNutritionDiaryQuery
+} from './diary';
+
+export { useEditMealQuery, useAddMealQuery, useDeleteMealQuery } from './meal';
+
+export { useEditMealItemQuery, useAddMealItemQuery, useDeleteMealItemQuery } from './mealItem';
+
+export { useFetchIngredientQuery } from './ingredient' ;

package/src/components/Nutrition/queries/ingredient.ts

@@ -0,0 +1,12 @@
+import { useQuery } from "@tanstack/react-query";
+import { getIngredient } from "services";
+import { QueryKey } from "utils/consts";
+
+
+export function useFetchIngredientQuery(ingredientId: number) {
+    return useQuery({
+        queryKey: [QueryKey.INGREDIENT, ingredientId],
+        queryFn: () => getIngredient(ingredientId)
+    });
+}
+

package/src/components/Nutrition/queries/meal.ts

@@ -0,0 +1,41 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Meal } from "components/Nutrition/models/meal";
+import { addMeal, deleteMeal, editMeal } from "services/meal";
+import { QueryKey } from "utils/consts";
+
+export const useAddMealQuery = (planId: number) => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (data: Meal) => addMeal(data),
+        onSuccess: () => {
+            queryClient.invalidateQueries({
+                queryKey: [QueryKey.NUTRITIONAL_PLAN, planId]
+            });
+        }
+    });
+};
+export const useDeleteMealQuery = (planId: number) => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (id: number) => deleteMeal(id),
+        onSuccess: () => {
+            queryClient.invalidateQueries({
+                queryKey: [QueryKey.NUTRITIONAL_PLAN, planId]
+            });
+        }
+    });
+};
+export const useEditMealQuery = (planId: number) => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (meal: Meal) => editMeal(meal),
+        onSuccess: () => {
+            queryClient.invalidateQueries({
+                queryKey: [QueryKey.NUTRITIONAL_PLAN, planId]
+            });
+        }
+    });
+};

package/src/components/Nutrition/queries/mealItem.ts

@@ -0,0 +1,43 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { MealItem } from "components/Nutrition/models/mealItem";
+import { addMealItem, deleteMealItem, editMealItem } from "services/mealItem";
+import { QueryKey } from "utils/consts";
+
+export const useAddMealItemQuery = (planId: number) => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (mealItem: MealItem) => addMealItem(mealItem),
+        onSuccess: () => {
+            queryClient.invalidateQueries({
+                queryKey: [QueryKey.NUTRITIONAL_PLAN, planId]
+            });
+        }
+    });
+};
+
+export const useEditMealItemQuery = (planId: number) => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (mealItem: MealItem) => editMealItem(mealItem),
+        onSuccess: () => {
+            queryClient.invalidateQueries({
+                queryKey: [QueryKey.NUTRITIONAL_PLAN, planId]
+            });
+        }
+    });
+};
+
+export const useDeleteMealItemQuery = (planId: number) => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (id: number) => deleteMealItem(id),
+        onSuccess: () => {
+            queryClient.invalidateQueries({
+                queryKey: [QueryKey.NUTRITIONAL_PLAN, planId]
+            });
+        }
+    });
+};

package/src/components/Nutrition/queries/plan.ts

@@ -0,0 +1,93 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { NutritionalPlan } from "components/Nutrition/models/nutritionalPlan";
+import {
+    addNutritionalPlan,
+    deleteNutritionalPlan,
+    editNutritionalPlan,
+    getLastNutritionalPlan,
+    getNutritionalPlanFull,
+    getNutritionalPlansSparse
+} from "services/nutritionalPlan";
+import { QueryKey } from "utils/consts";
+import { dateToYYYYMMDD } from "utils/date";
+
+export function useFetchNutritionalPlansQuery() {
+    return useQuery({
+        queryKey: [QueryKey.NUTRITIONAL_PLANS],
+        queryFn: () => getNutritionalPlansSparse()
+    });
+}
+
+
+export function useFetchLastNutritionalPlanQuery() {
+    return useQuery({
+        queryKey: [QueryKey.NUTRITIONAL_PLAN, 'last'],
+        queryFn: () => getLastNutritionalPlan()
+    });
+}
+
+export function useFetchNutritionalPlanQuery(planId: number) {
+    return useQuery({
+        queryKey: [QueryKey.NUTRITIONAL_PLAN, planId],
+        queryFn: () => getNutritionalPlanFull(planId)
+    });
+}
+
+/*
+ * Fetches the full nutritional plan (meals, etc.), but only the diary entries for
+ * the given date
+ */
+export function useFetchNutritionalPlanDateQuery(planId: number | null, dateStr: string, enabled = true) {
+    return useQuery({
+        queryKey: [QueryKey.NUTRITIONAL_PLAN, planId, dateStr],
+        queryFn: () => getNutritionalPlanFull(planId, { filtersetQueryLogs: { "datetime__eq": dateToYYYYMMDD(new Date(dateStr)) } }),
+        enabled: enabled,
+    });
+}
+
+export const useAddNutritionalPlanQuery = () => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (plan: NutritionalPlan) => addNutritionalPlan(plan),
+        onSuccess: () => {
+            queryClient.invalidateQueries({
+                queryKey: [QueryKey.NUTRITIONAL_PLANS,]
+            });
+            queryClient.invalidateQueries({
+                queryKey: [QueryKey.NUTRITIONAL_PLAN,]
+            });
+        }
+    });
+};
+
+export const useDeleteNutritionalPlanQuery = (id: number) => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (id: number) => deleteNutritionalPlan(id),
+        onSuccess: () => {
+            queryClient.invalidateQueries({
+                queryKey: [QueryKey.NUTRITIONAL_PLANS,]
+            });
+            queryClient.invalidateQueries({
+                queryKey: [QueryKey.NUTRITIONAL_PLAN, id]
+            });
+        }
+    });
+};
+export const useEditNutritionalPlanQuery = (id: number) => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (plan: NutritionalPlan) => editNutritionalPlan(plan),
+        onSuccess: () => {
+            queryClient.invalidateQueries({
+                queryKey: [QueryKey.NUTRITIONAL_PLAN, id]
+            });
+            queryClient.invalidateQueries({
+                queryKey: [QueryKey.NUTRITIONAL_PLANS,]
+            });
+        }
+    });
+};

package/src/components/Nutrition/widgets/DiaryDetail.tsx

@@ -0,0 +1,39 @@
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
+import { NutritionalValues } from "components/Nutrition/helpers/nutritionalValues";
+import { DiaryEntry } from "components/Nutrition/models/diaryEntry";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+export const DiaryDetail = (props: { entries: DiaryEntry[], planValues: NutritionalValues }) => {
+
+    const { t } = useTranslation();
+
+
+    return <TableContainer>
+        <Table>
+            <TableHead>
+                <TableRow>
+                    <TableCell>{t('date')}</TableCell>
+                    <TableCell align="right">{t('nutrition.energy')}</TableCell>
+                    <TableCell align="right">{t('nutrition.carbohydrates')}</TableCell>
+                    <TableCell align="right">{t('nutrition.protein')}</TableCell>
+                    <TableCell align="right">{t('nutrition.fat')}</TableCell>
+                </TableRow>
+            </TableHead>
+            <TableBody>
+                {props.entries.map(entry =>
+                    <TableRow key={entry.id}>
+                        <TableCell>
+                            {entry.amount}
+                            {entry.ingredient?.name}
+                        </TableCell>
+                        <TableCell align="right">{entry.nutritionalValues.energy}</TableCell>
+                        <TableCell align="right">{entry.nutritionalValues.carbohydrates}</TableCell>
+                        <TableCell align="right">{entry.nutritionalValues.protein}</TableCell>
+                        <TableCell align="right">{entry.nutritionalValues.fat}</TableCell>
+                    </TableRow>
+                )}
+            </TableBody>
+        </Table>
+    </TableContainer>;
+};

package/src/components/Nutrition/widgets/DiaryOverview.tsx

@@ -0,0 +1,51 @@
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
+import { NutritionalValues } from "components/Nutrition/helpers/nutritionalValues";
+import { GroupedDiaryEntries } from "components/Nutrition/models/nutritionalPlan";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { dateToLocale } from "utils/date";
+import { numberLocale } from "utils/numbers";
+import { makeLink, WgerLink } from "utils/url";
+
+export const DiaryOverview = (props: {
+    planId: number,
+    logged: Map<string, GroupedDiaryEntries>,
+    planned: NutritionalValues
+}) => {
+
+    const [t, i18n] = useTranslation();
+
+
+    return <TableContainer>
+        <Table size="small">
+            <TableHead>
+                <TableRow>
+                    <TableCell>{t('date')}</TableCell>
+                    <TableCell align="right">{t('nutrition.logged')}</TableCell>
+                    <TableCell align="right">{t('nutrition.difference')}</TableCell>
+                </TableRow>
+            </TableHead>
+            <TableBody>
+                {Array.from(props.logged).map(([key]) =>
+                    <TableRow key={key}>
+                        <TableCell>
+                            <Link
+                                to={makeLink(WgerLink.NUTRITION_DIARY, i18n.language, { id: props.planId, date: key })}>
+                                {dateToLocale(new Date(key))}
+                            </Link>
+                        </TableCell>
+                        <TableCell align="right">
+                            {t('nutrition.valueEnergyKcal',
+                                { value: numberLocale(props.logged.get(key)?.nutritionalValues.energy!, i18n.language) }
+                            )}
+                        </TableCell>
+                        <TableCell align="right">
+                            {numberLocale(props.logged.get(key)?.nutritionalValues.energy! - props.planned.energy, i18n.language)}
+                        </TableCell>
+                    </TableRow>)
+                }
+            </TableBody>
+        </Table>
+    </TableContainer>;
+};