chore: Nuxt 4 upgrade (#7426)

frontend/app/pages/household/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <v-container
+    v-if="household"
+    class="narrow-container"
+  >
+    <BasePageTitle class="mb-5">
+      <template #header>
+        <v-img
+          width="100%"
+          max-height="100"
+          max-width="100"
+          src="/svgs/manage-group-settings.svg"
+        />
+      </template>
+      <template #title>
+        {{ $t("profile.household-settings") }}
+      </template>
+      {{ $t("profile.household-description") }}
+    </BasePageTitle>
+    <v-form ref="refHouseholdEditForm" @submit.prevent="handleSubmit">
+      <v-card variant="outlined" style="border-color: lightgray;">
+        <v-card-text>
+          <HouseholdPreferencesEditor v-if="household.preferences" v-model="household.preferences" />
+        </v-card-text>
+      </v-card>
+      <div class="d-flex pa-2">
+        <BaseButton type="submit" edit class="ml-auto">
+          {{ $t("general.update") }}
+        </BaseButton>
+      </div>
+    </v-form>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import HouseholdPreferencesEditor from "~/components/Domain/Household/HouseholdPreferencesEditor.vue";
+import { useHouseholdSelf } from "~/composables/use-households";
+import { alert } from "~/composables/use-toast";
+import type { VForm } from "~/types/auto-forms";
+
+definePageMeta({
+  middleware: ["can-manage-household-only"],
+});
+
+const { household, actions: householdActions } = useHouseholdSelf();
+const i18n = useI18n();
+
+useSeoMeta({
+  title: i18n.t("household.household"),
+});
+
+const refHouseholdEditForm = ref<VForm | null>(null);
+
+async function handleSubmit() {
+  if (!refHouseholdEditForm.value?.validate() || !household.value?.preferences) {
+    console.log(refHouseholdEditForm.value?.validate());
+    return;
+  }
+
+  const data = await householdActions.updatePreferences();
+  if (data) {
+    alert.success(i18n.t("settings.settings-updated"));
+  }
+  else {
+    alert.error(i18n.t("settings.settings-update-failed"));
+  }
+}
+</script>
+
+<style lang="css">
+.preference-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-width: 600px;
+}
+</style>

frontend/app/pages/household/mealplan/planner.vue

@@ -0,0 +1,281 @@
+<template>
+  <v-container>
+    <RecipeDialogAddToShoppingList
+      v-if="shoppingLists"
+      v-model="state.shoppingListDialog"
+      :recipes="weekRecipesWithScales"
+      :shopping-lists="shoppingLists"
+    />
+    <v-menu
+      v-model="state.picker"
+      :close-on-content-click="false"
+      transition="scale-transition"
+      offset-y
+      min-width="auto"
+    >
+      <template #activator="{ props }">
+        <v-btn
+          color="primary"
+          class="mb-2"
+          v-bind="props"
+        >
+          <v-icon start>
+            {{ $globals.icons.calendar }}
+          </v-icon>
+          {{ $d(weekRange.start, "short") }} - {{ $d(weekRange.end, "short") }}
+        </v-btn>
+      </template>
+
+      <v-card>
+        <v-date-picker
+          v-model="state.range"
+          hide-header
+          :multiple="'range'"
+          :first-day-of-week="firstDayOfWeek"
+          :local="$i18n.locale"
+        />
+
+        <v-card-text>
+          <v-number-input
+            v-model="numberOfDaysPast"
+            :min="0"
+            control-variant="stacked"
+            inset
+            :label="$t('meal-plan.numberOfDaysPast-label')"
+            :hint="$t('meal-plan.numberOfDaysPast-hint')"
+            persistent-hint
+          />
+        </v-card-text>
+
+        <v-card-text>
+          <v-number-input
+            v-model="numberOfDays"
+            :min="1"
+            control-variant="stacked"
+            inset
+            :label="$t('meal-plan.numberOfDays-label')"
+            :hint="$t('meal-plan.numberOfDays-hint')"
+            persistent-hint
+          />
+        </v-card-text>
+      </v-card>
+    </v-menu>
+
+    <div class="d-flex flex-wrap align-center justify-space-between mb-2">
+      <v-tabs style="width: fit-content;">
+        <v-tab :to="{ name: TABS.view, query: route.query }">
+          {{ $t('meal-plan.meal-planner') }}
+        </v-tab>
+        <v-tab :to="{ name: TABS.edit, query: route.query }">
+          {{ $t('general.edit') }}
+        </v-tab>
+      </v-tabs>
+      <BaseButton
+        v-if="route.name === TABS.view"
+        color="info"
+        :icon="$globals.icons.cartCheck"
+        :text="$t('meal-plan.add-all-to-list')"
+        :disabled="!hasRecipes"
+        :loading="state.addAllLoading"
+        class="ml-auto mr-4"
+        @click="addAllToList"
+      />
+      <ButtonLink
+        :icon="$globals.icons.calendar"
+        :to="`/household/mealplan/settings`"
+        :text="$t('general.settings')"
+      />
+    </div>
+
+    <div>
+      <NuxtPage
+        :mealplans="mealsByDate"
+        :actions="actions"
+      />
+    </div>
+
+    <v-row />
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { isSameDay, addDays, parseISO, format, isValid } from "date-fns";
+import RecipeDialogAddToShoppingList from "~/components/Domain/Recipe/RecipeDialogAddToShoppingList.vue";
+import { useHouseholdSelf } from "~/composables/use-households";
+import { useMealplans } from "~/composables/use-group-mealplan";
+import { useUserMealPlanPreferences } from "~/composables/use-users/preferences";
+import type { ShoppingListSummary } from "~/lib/api/types/household";
+import { useUserApi } from "~/composables/api";
+
+const TABS = {
+  view: "household-mealplan-planner-view",
+  edit: "household-mealplan-planner-edit",
+};
+
+const route = useRoute();
+const router = useRouter();
+const i18n = useI18n();
+const api = useUserApi();
+const { household } = useHouseholdSelf();
+
+useSeoMeta({
+  title: i18n.t("meal-plan.dinner-this-week"),
+});
+
+const mealPlanPreferences = useUserMealPlanPreferences();
+const numberOfDaysPast = ref<number>(mealPlanPreferences.value.numberOfDaysPast || 0);
+const numberOfDays = ref<number>(mealPlanPreferences.value.numberOfDays || 7);
+watch(numberOfDaysPast, (val) => {
+  mealPlanPreferences.value.numberOfDaysPast = Number(val);
+});
+watch(numberOfDays, (val) => {
+  mealPlanPreferences.value.numberOfDays = Number(val);
+});
+
+// Force to /view if current route is /planner
+if (route.path === "/household/mealplan/planner") {
+  router.push({
+    name: TABS.view,
+    query: route.query,
+  });
+}
+
+function safeParseISO(date: string, fallback: Date | undefined = undefined) {
+  try {
+    const parsed = parseISO(date);
+    return isValid(parsed) ? parsed : fallback;
+  }
+  catch {
+    return fallback;
+  }
+}
+
+// Initialize dates from query parameters or defaults
+const initialStartDate = safeParseISO(route.query.start as string, addDays(new Date(), adjustForToday(-numberOfDaysPast.value)));
+const initialEndDate = safeParseISO(route.query.end as string, addDays(new Date(), adjustForToday(numberOfDays.value)));
+
+const state = ref({
+  range: [initialStartDate, initialEndDate] as [Date, Date],
+  start: initialStartDate,
+  picker: false,
+  end: initialEndDate,
+  shoppingListDialog: false,
+  addAllLoading: false,
+});
+
+const shoppingLists = ref<ShoppingListSummary[]>();
+
+const firstDayOfWeek = computed(() => {
+  return household.value?.preferences?.firstDayOfWeek || 0;
+});
+
+const weekRange = computed(() => {
+  const sorted = [...state.value.range].sort((a, b) => a.getTime() - b.getTime());
+
+  const start = sorted[0];
+  const end = sorted[sorted.length - 1];
+
+  if (start && end) {
+    return { start, end };
+  }
+  return {
+    start: addDays(new Date(), adjustForToday(-numberOfDaysPast.value)),
+    end: addDays(new Date(), adjustForToday(numberOfDays.value)),
+  };
+});
+
+// Update query parameters when date range changes
+watch(weekRange, (newRange) => {
+  // Keep current route name and params, just update the query
+  router.replace({
+    name: route.name || TABS.view,
+    params: route.params,
+    query: {
+      ...route.query,
+      start: format(newRange.start, "yyyy-MM-dd"),
+      end: format(newRange.end, "yyyy-MM-dd"),
+    },
+  });
+}, { immediate: true });
+
+const { mealplans, actions } = useMealplans(weekRange);
+
+function filterMealByDate(date: Date) {
+  if (!mealplans.value) return [];
+  return mealplans.value.filter((meal) => {
+    const mealDate = parseISO(meal.date);
+    return isSameDay(mealDate, date);
+  });
+}
+
+function adjustForToday(days: number) {
+  // e.g. If the user wants 7 days, we subtract one to do "today + 6"
+  // e.g. If the user wants 2 days in the past, we keep it the same to do "today - 2"
+  return days > 0 ? days - 1 : days;
+}
+
+const days = computed(() => {
+  const numDays
+    = Math.floor((weekRange.value.end.getTime() - weekRange.value.start.getTime()) / (1000 * 60 * 60 * 24)) + 1;
+
+  // Calculate absolute value
+  if (numDays < 0) return [];
+
+  return Array.from(Array(numDays).keys()).map(
+    (i) => {
+      const date = new Date(weekRange.value.start.getTime());
+      date.setDate(date.getDate() + i);
+      return date;
+    },
+  );
+});
+
+const mealsByDate = computed(() => {
+  return days.value.map((day) => {
+    return { date: day, meals: filterMealByDate(day) };
+  });
+});
+
+const hasRecipes = computed(() => {
+  return mealsByDate.value.some(day => day.meals.some(meal => meal.recipe));
+});
+
+const weekRecipesWithScales = computed(() => {
+  const allRecipes: any[] = [];
+  for (const day of mealsByDate.value) {
+    for (const meal of day.meals) {
+      if (meal.recipe) {
+        allRecipes.push(meal.recipe);
+      }
+    }
+  }
+  return allRecipes.map(recipe => ({
+    scale: 1,
+    ...recipe,
+  }));
+});
+
+async function getShoppingLists() {
+  const { data } = await api.shopping.lists.getAll(1, -1, { orderBy: "name", orderDirection: "asc" });
+  if (data) {
+    shoppingLists.value = data.items as ShoppingListSummary[] ?? [];
+  }
+}
+
+async function addAllToList() {
+  state.value.addAllLoading = true;
+  await getShoppingLists();
+  state.value.shoppingListDialog = true;
+  state.value.addAllLoading = false;
+}
+</script>
+
+<style lang="css">
+.left-color-border {
+  border-left: 5px solid var(--v-primary-base) !important;
+}
+
+.bottom-color-border {
+  border-bottom: 2px solid var(--v-primary-base) !important;
+}
+</style>

frontend/app/pages/household/mealplan/planner/edit.vue

@@ -0,0 +1,402 @@
+<template>
+  <div>
+    <!-- Create Meal Dialog -->
+    <BaseDialog
+      v-model="state.dialog"
+      :title="newMeal.existing ? $t('meal-plan.update-this-meal-plan') : $t('meal-plan.create-a-new-meal-plan')"
+      :submit-text="newMeal.existing ? $t('general.update') : $t('general.create')"
+      color="primary"
+      :icon="$globals.icons.foods"
+      :submit-disabled="isCreateDisabled"
+      can-submit
+      @submit="
+        () => {
+          if (newMeal.existing) {
+            actions.updateOne({ ...newMeal, date: newMealDateString });
+          }
+          else {
+            actions.createOne({ ...newMeal, date: newMealDateString });
+          }
+          resetDialog();
+        }
+      "
+      @close="resetDialog()"
+    >
+      <v-card-text class="pb-2">
+        <v-date-picker
+          v-model="newMeal.date"
+          class="mx-auto"
+          hide-header
+          show-adjacent-months
+          color="primary"
+          :first-day-of-week="firstDayOfWeek"
+          :local="$i18n.locale"
+        />
+        <v-card-text class="pb-0">
+          <v-select
+            v-model="newMeal.entryType"
+            :return-object="false"
+            :items="planTypeOptions"
+            :label="$t('recipe.entry-type')"
+            item-title="text"
+            item-value="value"
+          />
+          <v-autocomplete
+            v-if="!dialog.note"
+            v-model="newMeal.recipeId"
+            v-model:search="search.query.value"
+            :label="$t('meal-plan.meal-recipe')"
+            :items="search.data.value"
+            :custom-filter="normalizeFilter"
+            :loading="search.loading.value"
+            cache-items
+            item-title="name"
+            item-value="id"
+            :return-object="false"
+            :rules="[requiredRule]"
+          />
+          <template v-else>
+            <v-text-field v-model="newMeal.title" :rules="[requiredRule]" :label="$t('meal-plan.meal-title')" />
+            <v-textarea v-model="newMeal.text" rows="2" :label="$t('meal-plan.meal-note')" />
+          </template>
+        </v-card-text>
+        <v-card-actions class="py-0 px-4">
+          <v-switch v-model="dialog.note" class="mt-n3 mb-n4" :label="$t('meal-plan.note-only')" />
+        </v-card-actions>
+      </v-card-text>
+    </BaseDialog>
+    <v-row>
+      <v-col
+        v-for="(plan, index) in mealplans"
+        :key="index"
+        cols="12"
+        sm="12"
+        md="3"
+        lg="3"
+        xl="2"
+        class="col-borders my-1 d-flex flex-column"
+      >
+        <v-card class="mb-2 border-left-primary rounded-sm pa-2">
+          <p class="pl-2 mb-1">
+            {{ $d(plan.date, "short") }}
+          </p>
+        </v-card>
+        <VueDraggable
+          v-model="mealplansByDate[plan.date.toString()]"
+          tag="div"
+          handle=".handle"
+          :delay="250"
+          :delay-on-touch-only="true"
+          group="meals"
+          :data-index="index"
+          :data-box="plan.date"
+          style="min-height: 150px"
+          @end="onMoveCallback"
+        >
+          <v-card
+            v-for="mealplan in mealplansByDate[plan.date.toString()]"
+            :key="mealplan.id"
+            class="my-1"
+            :class="{ handle: $vuetify.display.smAndUp }"
+          >
+            <v-list-item lines="three" @click="editMeal(mealplan)">
+              <template #prepend>
+                <v-avatar>
+                  <RecipeCardImage
+                    v-if="mealplan.recipe"
+                    :recipe-id="mealplan.recipe.id!"
+                    tiny
+                    icon-size="25"
+                    :slug="mealplan.recipe ? mealplan.recipe.slug : ''"
+                  />
+                  <v-icon v-else>
+                    {{ $globals.icons.primary }}
+                  </v-icon>
+                </v-avatar>
+              </template>
+              <v-list-item-title class="mb-1">
+                {{ mealplan.recipe ? mealplan.recipe.name : mealplan.title }}
+              </v-list-item-title>
+              <v-list-item-subtitle style="min-height: 16px">
+                {{ mealplan.recipe ? mealplan.recipe.description + " " : mealplan.text }}
+              </v-list-item-subtitle>
+            </v-list-item>
+            <v-divider class="mx-2" />
+            <div class="py-2 px-2 d-flex" style="align-items: center">
+              <v-btn size="small" icon variant="text" :class="{ handle: !$vuetify.display.smAndUp }">
+                <v-icon>
+                  {{ $globals.icons.arrowUpDown }}
+                </v-icon>
+              </v-btn>
+              <v-menu offset-y>
+                <template #activator="{ props: menuProps }">
+                  <v-chip
+                    v-bind="menuProps"
+                    label
+                    variant="elevated"
+                    size="small"
+                    color="accent"
+                    @click.prevent
+                  >
+                    <v-icon start>
+                      {{ $globals.icons.tags }}
+                    </v-icon>
+                    {{ getEntryTypeText(mealplan.entryType!) }}
+                  </v-chip>
+                </template>
+                <v-list>
+                  <v-list-item
+                    v-for="mealType in planTypeOptions"
+                    :key="mealType.value"
+                    @click="actions.setType(mealplan, mealType.value)"
+                  >
+                    <v-list-item-title> {{ mealType.text }} </v-list-item-title>
+                  </v-list-item>
+                </v-list>
+              </v-menu>
+              <v-btn class="ml-auto" size="small" variant="text" icon @click="actions.deleteOne(mealplan.id)">
+                <v-icon>{{ $globals.icons.delete }}</v-icon>
+              </v-btn>
+            </div>
+          </v-card>
+        </VueDraggable>
+        <!-- Day Column Actions -->
+        <div class="d-flex justify-end mt-auto">
+          <BaseButtonGroup
+            :buttons="[
+              {
+                icon: $globals.icons.diceMultiple,
+                text: $t('meal-plan.random-meal'),
+                event: 'random',
+                children: [
+                  {
+                    icon: $globals.icons.diceMultiple,
+                    text: $t('meal-plan.breakfast'),
+                    event: 'randomBreakfast',
+                  },
+                  {
+                    icon: $globals.icons.diceMultiple,
+                    text: $t('meal-plan.lunch'),
+                    event: 'randomLunch',
+                  },
+                  {
+                    icon: $globals.icons.diceMultiple,
+                    text: $t('meal-plan.side'),
+                    event: 'randomSide',
+                  },
+                  {
+                    icon: $globals.icons.diceMultiple,
+                    text: $t('meal-plan.snack'),
+                    event: 'randomSnack',
+                  },
+                  {
+                    icon: $globals.icons.diceMultiple,
+                    text: $t('meal-plan.drink'),
+                    event: 'randomDrink',
+                  },
+                  {
+                    icon: $globals.icons.diceMultiple,
+                    text: $t('meal-plan.dessert'),
+                    event: 'randomDessert',
+                  },
+                ],
+              },
+              {
+                icon: $globals.icons.potSteam,
+                text: $t('meal-plan.random-dinner'),
+                event: 'randomDinner',
+              },
+              {
+                icon: $globals.icons.bowlMixOutline,
+                text: $t('meal-plan.random-side'),
+                event: 'randomSide',
+              },
+              {
+                icon: $globals.icons.createAlt,
+                text: $t('general.new'),
+                event: 'create',
+              },
+            ]"
+            @create="openDialog(plan.date)"
+            @random-breakfast="randomMeal(plan.date, 'breakfast')"
+            @random-lunch="randomMeal(plan.date, 'lunch')"
+            @random-dinner="randomMeal(plan.date, 'dinner')"
+            @random-side="randomMeal(plan.date, 'side')"
+            @random-snack="randomMeal(plan.date, 'snack')"
+            @random-drink="randomMeal(plan.date, 'drink')"
+            @random-dessert="randomMeal(plan.date, 'dessert')"
+          />
+        </div>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { format } from "date-fns";
+import type { SortableEvent } from "sortablejs";
+import { VueDraggable } from "vue-draggable-plus";
+import type { MealsByDate } from "./view.vue";
+import type { useMealplans } from "~/composables/use-group-mealplan";
+import { usePlanTypeOptions, getEntryTypeText } from "~/composables/use-group-mealplan";
+import RecipeCardImage from "~/components/Domain/Recipe/RecipeCardImage.vue";
+import type { PlanEntryType, UpdatePlanEntry } from "~/lib/api/types/meal-plan";
+import { useUserApi } from "~/composables/api";
+import { useHouseholdSelf } from "~/composables/use-households";
+import { normalizeFilter } from "~/composables/use-utils";
+import { useRecipeSearch } from "~/composables/recipes/use-recipe-search";
+
+const props = defineProps<{
+  mealplans: MealsByDate[];
+  actions: ReturnType<typeof useMealplans>["actions"];
+}>();
+
+const api = useUserApi();
+const auth = useMealieAuth();
+const { household } = useHouseholdSelf();
+const requiredRule = (value: any) => !!value || "Required.";
+
+const state = ref({
+  dialog: false,
+});
+
+const firstDayOfWeek = computed(() => {
+  return household.value?.preferences?.firstDayOfWeek || 0;
+});
+
+// Local mutable meals object
+const mealplansByDate = reactive<{ [date: string]: UpdatePlanEntry[] }>({});
+watch(
+  () => props.mealplans,
+  (plans) => {
+    for (const plan of plans) {
+      mealplansByDate[plan.date.toString()] = plan.meals ? [...plan.meals] : [];
+    }
+    // Remove any dates that no longer exist
+    Object.keys(mealplansByDate).forEach((date) => {
+      if (!plans.find(p => p.date.toString() === date)) {
+        mealplansByDate[date] = [];
+      }
+    });
+  },
+  { immediate: true, deep: true },
+);
+
+function onMoveCallback(evt: SortableEvent) {
+  const supportedEvents = ["drop", "touchend"];
+
+  // Adapted From https://github.com/SortableJS/Vue.Draggable/issues/1029
+  const ogEvent: DragEvent = (evt as any).originalEvent;
+
+  if (ogEvent && ogEvent.type in supportedEvents) {
+    // The drop was cancelled, unsure if anything needs to be done?
+    console.log("Cancel Move Event");
+  }
+  else {
+    // A Meal was moved, set the new date value and make an update request and refresh the meals
+    const fromMealsByIndex = parseInt(evt.from.getAttribute("data-index") ?? "");
+    const toMealsByIndex = parseInt(evt.to.getAttribute("data-index") ?? "");
+
+    if (!isNaN(fromMealsByIndex) && !isNaN(toMealsByIndex)) {
+      const destDate = props.mealplans[toMealsByIndex].date;
+      const mealData = mealplansByDate[destDate.toString()][evt.newIndex as number];
+
+      mealData.date = format(destDate, "yyyy-MM-dd");
+
+      props.actions.updateOne(mealData);
+    }
+  }
+}
+
+// =====================================================
+// New Meal Dialog
+
+const dialog = reactive({
+  loading: false,
+  error: false,
+  note: false,
+});
+
+watch(dialog, () => {
+  if (dialog.note) {
+    newMeal.recipeId = undefined;
+  }
+});
+
+const newMeal = reactive({
+  date: new Date(Date.now() - new Date().getTimezoneOffset() * 60000),
+  title: "",
+  text: "",
+  recipeId: undefined as string | undefined,
+  entryType: "dinner" as PlanEntryType,
+  existing: false,
+  id: 0,
+  groupId: "",
+  userId: auth.user.value?.id || "",
+});
+
+const newMealDateString = computed(() => {
+  return format(newMeal.date, "yyyy-MM-dd");
+});
+
+const isCreateDisabled = computed(() => {
+  if (dialog.note) {
+    return !newMeal.title.trim();
+  }
+  return !newMeal.recipeId;
+});
+
+function openDialog(date: Date) {
+  newMeal.date = date;
+  state.value.dialog = true;
+}
+
+function editMeal(mealplan: UpdatePlanEntry) {
+  const { date, title, text, entryType, recipeId, id, groupId, userId } = mealplan;
+  if (!entryType) return;
+
+  const [year, month, day] = date.split("-").map(Number);
+  newMeal.date = new Date(year, month - 1, day);
+  newMeal.title = title || "";
+  newMeal.text = text || "";
+  newMeal.recipeId = recipeId || undefined;
+  newMeal.entryType = entryType;
+  newMeal.existing = true;
+  newMeal.id = id;
+  newMeal.groupId = groupId;
+  newMeal.userId = userId || auth.user.value?.id || "";
+
+  state.value.dialog = true;
+  dialog.note = !recipeId;
+}
+
+function resetDialog() {
+  newMeal.date = new Date(Date.now() - new Date().getTimezoneOffset() * 60000);
+  newMeal.title = "";
+  newMeal.text = "";
+  newMeal.entryType = "dinner";
+  newMeal.recipeId = undefined;
+  newMeal.existing = false;
+}
+
+async function randomMeal(date: Date, type: PlanEntryType) {
+  const { data } = await api.mealplans.setRandom({
+    date: format(date, "yyyy-MM-dd"),
+    entryType: type,
+  });
+
+  if (data) {
+    props.actions.refreshAll();
+  }
+}
+
+// =====================================================
+// Search
+
+const search = useRecipeSearch(api);
+const planTypeOptions = usePlanTypeOptions();
+
+onMounted(async () => {
+  await search.trigger();
+});
+</script>

frontend/app/pages/household/mealplan/planner/view.vue

@@ -0,0 +1,139 @@
+<template>
+  <v-container class="mx-0 my-3 pa">
+    <v-row>
+      <v-col
+        v-for="(day, index) in plan"
+        :key="index"
+        cols="12"
+        sm="12"
+        md="4"
+        lg="4"
+        xl="2"
+        class="col-borders my-1 d-flex flex-column"
+      >
+        <v-card class="mb-2 border-left-primary rounded-sm px-2">
+          <v-container class="px-0 d-flex align-center" height="56px">
+            <v-row no-gutters style="width: 100%;">
+              <v-col cols="10" class="d-flex align-center">
+                <p class="pl-2 my-1" :class="{ 'text-primary': isToday(day.date) }">
+                  {{ $d(day.date, "short") }}
+                </p>
+              </v-col>
+              <v-col class="d-flex align-center" cols="2">
+                <GroupMealPlanDayContextMenu v-if="day.recipes.length" :recipes="day.recipes" />
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-card>
+        <div v-for="section in day.sections" :key="section.title">
+          <div class="py-2 d-flex flex-column">
+            <div class="primary" style="width: 50px; height: 2.5px" />
+            <p class="text-overline my-0">
+              {{ section.title }}
+            </p>
+          </div>
+
+          <RecipeCardMobile
+            v-for="mealplan in section.meals"
+            :key="mealplan.id"
+            :recipe-id="mealplan.recipe ? mealplan.recipe.id! : ''"
+            class="mb-2"
+            :rating="mealplan.recipe ? mealplan.recipe.rating! : 0"
+            :slug="mealplan.recipe ? mealplan.recipe.slug! : mealplan.title!"
+            :description="mealplan.recipe ? mealplan.recipe.description! : mealplan.text!"
+            :name="mealplan.recipe ? mealplan.recipe.name! : mealplan.title!"
+            :tags="mealplan.recipe ? mealplan.recipe.tags! : []"
+          />
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { isSameDay } from "date-fns";
+
+import type { ReadPlanEntry } from "~/lib/api/types/meal-plan";
+import GroupMealPlanDayContextMenu from "~/components/Domain/Household/GroupMealPlanDayContextMenu.vue";
+import RecipeCardMobile from "~/components/Domain/Recipe/RecipeCardMobile.vue";
+import type { RecipeSummary } from "~/lib/api/types/recipe";
+
+export type MealsByDate = {
+  date: Date;
+  meals: ReadPlanEntry[];
+};
+
+const props = defineProps<{
+  mealplans: MealsByDate[];
+}>();
+
+type DaySection = {
+  title: string;
+  meals: ReadPlanEntry[];
+};
+
+type Days = {
+  date: Date;
+  sections: DaySection[];
+  recipes: RecipeSummary[];
+};
+
+const i18n = useI18n();
+
+const plan = computed<Days[]>(() => {
+  return props.mealplans.reduce((acc, day) => {
+    const out: Days = {
+      date: day.date,
+      sections: [
+        { title: i18n.t("meal-plan.breakfast"), meals: [] },
+        { title: i18n.t("meal-plan.lunch"), meals: [] },
+        { title: i18n.t("meal-plan.dinner"), meals: [] },
+        { title: i18n.t("meal-plan.side"), meals: [] },
+        { title: i18n.t("meal-plan.snack"), meals: [] },
+        { title: i18n.t("meal-plan.drink"), meals: [] },
+        { title: i18n.t("meal-plan.dessert"), meals: [] },
+      ],
+      recipes: [],
+    };
+
+    for (const meal of day.meals) {
+      if (meal.entryType === "breakfast") {
+        out.sections[0].meals.push(meal);
+      }
+      else if (meal.entryType === "lunch") {
+        out.sections[1].meals.push(meal);
+      }
+      else if (meal.entryType === "dinner") {
+        out.sections[2].meals.push(meal);
+      }
+      else if (meal.entryType === "side") {
+        out.sections[3].meals.push(meal);
+      }
+      else if (meal.entryType === "snack") {
+        out.sections[4].meals.push(meal);
+      }
+      else if (meal.entryType === "drink") {
+        out.sections[5].meals.push(meal);
+      }
+      else if (meal.entryType === "dessert") {
+        out.sections[6].meals.push(meal);
+      }
+
+      if (meal.recipe) {
+        out.recipes.push(meal.recipe);
+      }
+    }
+
+    // Drop empty sections
+    out.sections = out.sections.filter(section => section.meals.length > 0);
+
+    acc.push(out);
+
+    return acc;
+  }, [] as Days[]);
+});
+
+const isToday = (date: Date) => {
+  return isSameDay(date, new Date());
+};
+</script>

frontend/app/pages/household/mealplan/settings.vue

@@ -0,0 +1,247 @@
+<template>
+  <v-container class="lg-container">
+    <BasePageTitle divider>
+      <template #header>
+        <v-img
+          width="100%"
+          max-height="100"
+          max-width="100"
+          src="/svgs/manage-cookbooks.svg"
+        />
+      </template>
+      <template #title>
+        {{ $t('meal-plan.meal-plan-rules') }}
+      </template>
+      {{ $t('meal-plan.meal-plan-rules-description') }}
+    </BasePageTitle>
+
+    <v-card>
+      <v-card-title class="headline">
+        {{ $t('meal-plan.new-rule') }}
+      </v-card-title>
+      <v-divider class="mx-2" />
+      <v-card-text>
+        {{ $t('meal-plan.new-rule-description') }}
+
+        <GroupMealPlanRuleForm
+          :key="createDataFormKey"
+          v-model:day="createData.day"
+          v-model:entry-type="createData.entryType"
+          v-model:query-filter-string="createData.queryFilterString"
+          class="mt-2"
+        />
+      </v-card-text>
+      <v-card-actions class="justify-end">
+        <BaseButton
+          create
+          :disabled="!createData.queryFilterString"
+          @click="createRule"
+        />
+      </v-card-actions>
+    </v-card>
+
+    <section>
+      <BaseCardSectionTitle
+        class="mt-10"
+        :title="$t('meal-plan.recipe-rules')"
+      />
+      <div>
+        <div
+          v-for="(rule, idx) in allRules"
+          :key="rule.id"
+        >
+          <v-card class="my-2 left-border">
+            <v-card-title class="headline pb-1">
+              {{ rule.day === "unset" ? $t('meal-plan.applies-to-all-days') : $t('meal-plan.applies-on-days', [rule.day]) }}
+              {{ rule.entryType === "unset" ? $t('meal-plan.for-all-meal-types') : $t('meal-plan.for-type-meal-types', [rule.entryType]) }}
+              <span class="ml-auto">
+                <BaseButtonGroup
+                  :buttons="[
+                    {
+                      icon: $globals.icons.edit,
+                      text: $t('general.edit'),
+                      event: 'edit',
+                    },
+                    {
+                      icon: $globals.icons.delete,
+                      text: $t('general.delete'),
+                      event: 'delete',
+                    },
+                  ]"
+                  @delete="deleteRule(rule.id)"
+                  @edit="toggleEditState(rule.id)"
+                />
+              </span>
+            </v-card-title>
+            <v-card-text>
+              <template v-if="!editState[rule.id]">
+                <div v-if="rule.categories">
+                  <h4 class="py-1">
+                    {{ $t("category.categories") }}:
+                  </h4>
+                  <RecipeChips
+                    v-if="rule.categories.length"
+                    :items="rule.categories"
+                    small
+                    class="pb-3"
+                  />
+                  <v-card-text
+                    v-else
+                    label
+                    class="ma-0 px-0 pt-0 pb-3"
+                    text-color="accent"
+                    size="small"
+                    dark
+                  >
+                    {{ $t("meal-plan.any-category") }}
+                  </v-card-text>
+                </div>
+
+                <div v-if="rule.tags">
+                  <h4 class="py-1">
+                    {{ $t("tag.tags") }}:
+                  </h4>
+                  <RecipeChips
+                    v-if="rule.tags.length"
+                    :items="rule.tags"
+                    url-prefix="tags"
+                    small
+                    class="pb-3"
+                  />
+                  <v-card-text
+                    v-else
+                    label
+                    class="ma-0 px-0 pt-0 pb-3"
+                    text-color="accent"
+                    size="small"
+                    dark
+                  >
+                    {{ $t("meal-plan.any-tag") }}
+                  </v-card-text>
+                </div>
+                <div v-if="rule.households">
+                  <h4 class="py-1">
+                    {{ $t("household.households") }}:
+                  </h4>
+                  <div v-if="rule.households.length">
+                    <v-chip
+                      v-for="household in rule.households"
+                      :key="household.id"
+                      label
+                      class="ma-1"
+                      color="accent"
+                      size="small"
+                      dark
+                    >
+                      {{ household.name }}
+                    </v-chip>
+                  </div>
+                  <v-card-text
+                    v-else
+                    label
+                    class="ma-0 px-0 pt-0 pb-3"
+                    text-color="accent"
+                    size="small"
+                    dark
+                  >
+                    {{ $t("meal-plan.any-household") }}
+                  </v-card-text>
+                </div>
+              </template>
+              <template v-else>
+                <GroupMealPlanRuleForm
+                  v-model:day="allRules[idx].day"
+                  v-model:entry-type="allRules[idx].entryType"
+                  v-model:query-filter-string="allRules[idx].queryFilterString"
+                  :query-filter="allRules[idx].queryFilter"
+                />
+                <div class="d-flex justify-end">
+                  <BaseButton
+                    update
+                    :disabled="!allRules[idx].queryFilterString"
+                    @click="updateRule(rule)"
+                  />
+                </div>
+              </template>
+            </v-card-text>
+          </v-card>
+        </div>
+      </div>
+    </section>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { useUserApi } from "~/composables/api";
+import type { PlanRulesCreate, PlanRulesOut } from "~/lib/api/types/meal-plan";
+import GroupMealPlanRuleForm from "~/components/Domain/Household/GroupMealPlanRuleForm.vue";
+import { useAsyncKey } from "~/composables/use-utils";
+import RecipeChips from "~/components/Domain/Recipe/RecipeChips.vue";
+
+const api = useUserApi();
+const i18n = useI18n();
+
+useSeoMeta({
+  title: i18n.t("meal-plan.meal-plan-settings"),
+});
+
+// ======================================================
+// Manage All
+const editState = ref<{ [key: string]: boolean }>({});
+const allRules = ref<PlanRulesOut[]>([]);
+
+function toggleEditState(id: string) {
+  editState.value[id] = !editState.value[id];
+  editState.value = { ...editState.value };
+}
+
+async function refreshAll() {
+  const { data } = await api.mealplanRules.getAll();
+
+  if (data) {
+    allRules.value = data.items ?? [];
+  }
+}
+
+useAsyncData(useAsyncKey(), async () => {
+  await refreshAll();
+});
+
+// ======================================================
+// Creating Rules
+
+const createDataFormKey = ref(0);
+const createData = ref<PlanRulesCreate>({
+  entryType: "unset",
+  day: "unset",
+  queryFilterString: "",
+});
+
+async function createRule() {
+  const { data } = await api.mealplanRules.createOne(createData.value);
+  if (data) {
+    refreshAll();
+    createData.value = {
+      entryType: "unset",
+      day: "unset",
+      queryFilterString: "",
+    };
+    createDataFormKey.value++;
+  }
+}
+
+async function deleteRule(ruleId: string) {
+  const { data } = await api.mealplanRules.deleteOne(ruleId);
+  if (data) {
+    refreshAll();
+  }
+}
+
+async function updateRule(rule: PlanRulesOut) {
+  const { data } = await api.mealplanRules.updateOne(rule.id, rule);
+  if (data) {
+    refreshAll();
+    toggleEditState(rule.id);
+  }
+}
+</script>

frontend/app/pages/household/members.vue

@@ -0,0 +1,165 @@
+<template>
+  <v-container>
+    <BasePageTitle divider>
+      <template #header>
+        <v-img
+          width="100%"
+          max-height="125"
+          max-width="125"
+          src="/svgs/manage-members.svg"
+        />
+      </template>
+      <template #title>
+        {{ $t('group.manage-members') }}
+      </template>
+      <i18n-t keypath="group.manage-members-description">
+        <template #manage>
+          <b>{{ $t('group.manage') }}</b>
+        </template>
+        <template #invite>
+          <b>{{ $t('group.invite') }}</b>
+        </template>
+      </i18n-t>
+      <v-container class="mt-1 px-0">
+        <nuxt-link
+          class="text-center"
+          :to="`/user/profile/edit`"
+        > {{ $t('group.looking-to-update-your-profile') }}
+        </nuxt-link>
+      </v-container>
+    </BasePageTitle>
+    <v-data-table
+      :headers="headers"
+      :items="members || []"
+      item-key="id"
+      class="elevation-0"
+      :items-per-page="-1"
+      hide-default-footer
+      disable-pagination
+    >
+      <template #[`item.avatar`]="{ item }">
+        <UserAvatar
+          v-if="item"
+          :tooltip="false"
+          :user-id="item.id"
+        />
+      </template>
+      <template #[`item.admin`]="{ item }">
+        {{ item && item.admin ? $t('user.admin') : $t('user.user') }}
+      </template>
+      <template #[`item.manageHousehold`]="{ item }">
+        <div
+          v-if="item"
+          class="d-flex justify-center"
+        >
+          <v-checkbox
+            v-model="item.canManageHousehold"
+            :disabled="item.id === sessionUser?.id || item.admin"
+            color="primary"
+            class=""
+            style="max-width: 30px"
+            hide-details
+            @change="setPermissions(item)"
+          />
+        </div>
+      </template>
+      <template #[`item.manage`]="{ item }">
+        <div
+          v-if="item"
+          class="d-flex justify-center"
+        >
+          <v-checkbox
+            v-model="item.canManage"
+            :disabled="item.id === sessionUser?.id || item.admin"
+            class=""
+            style="max-width: 30px"
+            hide-details
+            color="primary"
+            @change="setPermissions(item)"
+          />
+        </div>
+      </template>
+      <template #[`item.organize`]="{ item }">
+        <div
+          v-if="item"
+          class="d-flex justify-center"
+        >
+          <v-checkbox
+            v-model="item.canOrganize"
+            :disabled="item.id === sessionUser?.id || item.admin"
+            class=""
+            style="max-width: 30px"
+            hide-details
+            color="primary"
+            @change="setPermissions(item)"
+          />
+        </div>
+      </template>
+      <template #[`item.invite`]="{ item }">
+        <div
+          v-if="item"
+          class="d-flex justify-center"
+        >
+          <v-checkbox
+            v-model="item.canInvite"
+            :disabled="item.id === sessionUser?.id || item.admin"
+            class=""
+            style="max-width: 30px"
+            hide-details
+            color="primary"
+            @change="setPermissions(item)"
+          />
+        </div>
+      </template>
+    </v-data-table>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { useUserApi } from "~/composables/api";
+import type { UserOut } from "~/lib/api/types/user";
+import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
+
+const api = useUserApi();
+const i18n = useI18n();
+
+useSeoMeta({
+  title: i18n.t("profile.members"),
+});
+
+const members = ref<UserOut[] | null[]>([]);
+
+const headers = [
+  { title: "", value: "avatar", sortable: false, align: "center" },
+  { title: i18n.t("user.username"), value: "username" },
+  { title: i18n.t("user.full-name"), value: "fullName" },
+  { title: i18n.t("user.admin"), value: "admin" },
+  { title: i18n.t("group.manage"), value: "manage", sortable: false, align: "center" },
+  { title: i18n.t("settings.organize"), value: "organize", sortable: false, align: "center" },
+  { title: i18n.t("group.invite"), value: "invite", sortable: false, align: "center" },
+  { title: i18n.t("group.manage-household"), value: "manageHousehold", sortable: false, align: "center" },
+];
+
+async function refreshMembers() {
+  const { data } = await api.households.fetchMembers();
+  if (data) {
+    members.value = data.items;
+  }
+}
+
+async function setPermissions(user: UserOut) {
+  const payload = {
+    userId: user.id,
+    canInvite: user.canInvite,
+    canManageHousehold: user.canManageHousehold,
+    canManage: user.canManage,
+    canOrganize: user.canOrganize,
+  };
+
+  await api.households.setMemberPermissions(payload);
+}
+
+onMounted(async () => {
+  await refreshMembers();
+});
+</script>

frontend/app/pages/household/notifiers.vue

@@ -0,0 +1,408 @@
+<template>
+  <v-container class="narrow-container">
+    <BaseDialog
+      v-model="state.deleteDialog"
+      color="error"
+      :title="$t('general.confirm')"
+      :icon="$globals.icons.alertCircle"
+      can-confirm
+      @confirm="deleteNotifier(state.deleteTargetId)"
+    >
+      <v-card-text>
+        {{ $t("general.confirm-delete-generic") }}
+      </v-card-text>
+    </BaseDialog>
+    <BaseDialog
+      v-model="state.createDialog"
+      :title="$t('events.new-notification')"
+      :icon="$globals.icons.bellPlus"
+      can-submit
+      @submit="createNewNotifier"
+    >
+      <v-card-text>
+        <v-text-field
+          v-model="createNotifierData.name"
+          :label="$t('general.name')"
+        />
+        <v-text-field
+          v-model="createNotifierData.appriseUrl"
+          :label="$t('events.apprise-url')"
+        />
+      </v-card-text>
+    </BaseDialog>
+
+    <BasePageTitle divider>
+      <template #header>
+        <v-img
+          width="100%"
+          max-height="125"
+          max-width="125"
+          src="/svgs/manage-notifiers.svg"
+        />
+      </template>
+      <template #title>
+        {{ $t("events.event-notifiers") }}
+      </template>
+      {{ $t("events.new-notification-form-description") }}
+
+      <div class="mt-3 d-flex flex-wrap justify-space-between mx-n2">
+        <a
+          href="https://github.com/caronc/apprise/wiki"
+          target="_blanks"
+          class="mx-2"
+        > Apprise </a>
+        <a
+          href="https://github.com/caronc/apprise/wiki/Notify_gotify"
+          target="_blanks"
+          class="mx-2"
+        > Gotify </a>
+        <a
+          href="https://github.com/caronc/apprise/wiki/Notify_discord"
+          target="_blanks"
+          class="mx-2"
+        > Discord </a>
+        <a
+          href="https://github.com/caronc/apprise/wiki/Notify_homeassistant"
+          target="_blanks"
+          class="mx-2"
+        > Home
+          Assistant
+        </a>
+        <a
+          href="https://github.com/caronc/apprise/wiki/Notify_matrix"
+          target="_blanks"
+          class="mx-2"
+        > Matrix </a>
+        <a
+          href="https://github.com/caronc/apprise/wiki/Notify_pushover"
+          target="_blanks"
+          class="mx-2"
+        > Pushover </a>
+      </div>
+    </BasePageTitle>
+
+    <BaseButton
+      create
+      @click="state.createDialog = true"
+    />
+    <v-expansion-panels
+      v-if="notifiers"
+      class="mt-2"
+    >
+      <v-expansion-panel
+        v-for="(notifier, index) in notifiers"
+        :key="index"
+        class="my-2 left-border rounded"
+      >
+        <v-expansion-panel-title
+          disable-icon-rotate
+          class="text-h6"
+        >
+          <div class="d-flex align-center">
+            {{ notifier.name }}
+          </div>
+          <template #actions>
+            <v-btn
+              icon
+              flat
+              class="ml-2"
+            >
+              <v-icon>
+                {{ $globals.icons.edit }}
+              </v-icon>
+            </v-btn>
+          </template>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
+          <v-text-field
+            v-model="notifiers[index].name"
+            :label="$t('general.name')"
+          />
+          <v-text-field
+            v-model="notifiers[index].appriseUrl"
+            :label="$t('events.apprise-url-skipped-if-blank')"
+            :hint="$t('events.apprise-url-is-left-intentionally-blank')"
+          />
+          <v-checkbox
+            v-model="notifiers[index].enabled"
+            :label="$t('events.enable-notifier')"
+            density="compact"
+          />
+
+          <v-divider />
+          <p class="pt-4">
+            {{ $t("events.what-events") }}
+          </p>
+          <div class="notifier-options">
+            <section
+              v-for="sec in optionsSections"
+              :key="sec.id"
+            >
+              <h4>
+                {{ sec.text }}
+              </h4>
+              <v-checkbox
+                v-for="opt in sec.options"
+                :key="opt.key"
+                v-model="notifiers[index].options[opt.key]"
+                hide-details
+                density="compact"
+                :label="opt.text"
+              />
+            </section>
+          </div>
+          <v-card-actions class="py-0">
+            <v-spacer />
+            <BaseButtonGroup
+              :buttons="[
+                {
+                  icon: $globals.icons.delete,
+                  text: $t('general.delete'),
+                  event: 'delete',
+                },
+                {
+                  icon: $globals.icons.testTube,
+                  text: $t('general.test'),
+                  event: 'test',
+                },
+                {
+                  icon: $globals.icons.save,
+                  text: $t('general.save'),
+                  event: 'save',
+                },
+              ]"
+              @delete="openDelete(notifier)"
+              @save="saveNotifier(notifier)"
+              @test="testNotifier(notifier)"
+            />
+          </v-card-actions>
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+    </v-expansion-panels>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { useUserApi } from "~/composables/api";
+import { useAsyncKey } from "~/composables/use-utils";
+import type { GroupEventNotifierCreate, GroupEventNotifierOut } from "~/lib/api/types/household";
+
+interface OptionKey {
+  text: string;
+  key: keyof GroupEventNotifierOut["options"];
+}
+
+interface OptionSection {
+  id: number;
+  text: string;
+  options: OptionKey[];
+}
+
+definePageMeta({
+  middleware: ["advanced-only"],
+});
+
+const api = useUserApi();
+const i18n = useI18n();
+
+useSeoMeta({
+  title: i18n.t("profile.notifiers"),
+});
+
+const state = reactive({
+  deleteDialog: false,
+  createDialog: false,
+  deleteTargetId: "",
+});
+
+const { data: notifiers } = useAsyncData(useAsyncKey(), async () => {
+  const { data } = await api.groupEventNotifier.getAll();
+  return data?.items;
+});
+
+async function refreshNotifiers() {
+  const { data } = await api.groupEventNotifier.getAll();
+  notifiers.value = data?.items;
+}
+
+const createNotifierData: GroupEventNotifierCreate = reactive({
+  name: "",
+  enabled: true,
+  appriseUrl: "",
+});
+
+async function createNewNotifier() {
+  await api.groupEventNotifier.createOne(createNotifierData);
+  refreshNotifiers();
+}
+
+function openDelete(notifier: GroupEventNotifierOut) {
+  state.deleteDialog = true;
+  state.deleteTargetId = notifier.id;
+}
+
+async function deleteNotifier(targetId: string) {
+  await api.groupEventNotifier.deleteOne(targetId);
+  refreshNotifiers();
+  state.deleteTargetId = "";
+}
+
+async function saveNotifier(notifier: GroupEventNotifierOut) {
+  await api.groupEventNotifier.updateOne(notifier.id, notifier);
+  refreshNotifiers();
+}
+
+async function testNotifier(notifier: GroupEventNotifierOut) {
+  await api.groupEventNotifier.test(notifier.id);
+}
+
+// ===============================================================
+// Options Definitions
+
+const optionsSections: OptionSection[] = [
+  {
+    id: 1,
+    text: i18n.t("events.recipe-events"),
+    options: [
+      {
+        text: i18n.t("general.create") as string,
+        key: "recipeCreated",
+      },
+      {
+        text: i18n.t("general.update") as string,
+        key: "recipeUpdated",
+      },
+      {
+        text: i18n.t("general.delete") as string,
+        key: "recipeDeleted",
+      },
+    ],
+  },
+  {
+    id: 2,
+    text: i18n.t("events.user-events"),
+    options: [
+      {
+        text: i18n.t("events.when-a-new-user-joins-your-group"),
+        key: "userSignup",
+      },
+    ],
+  },
+  {
+    id: 3,
+    text: i18n.t("events.mealplan-events"),
+    options: [
+      {
+        text: i18n.t("general.create") as string,
+        key: "mealplanEntryCreated",
+      },
+      {
+        text: i18n.t("general.update") as string,
+        key: "mealplanEntryUpdated",
+      },
+      {
+        text: i18n.t("general.delete") as string,
+        key: "mealplanEntryDeleted",
+      },
+    ],
+  },
+  {
+    id: 4,
+    text: i18n.t("events.shopping-list-events"),
+    options: [
+      {
+        text: i18n.t("general.create") as string,
+        key: "shoppingListCreated",
+      },
+      {
+        text: i18n.t("general.update") as string,
+        key: "shoppingListUpdated",
+      },
+      {
+        text: i18n.t("general.delete") as string,
+        key: "shoppingListDeleted",
+      },
+    ],
+  },
+  {
+    id: 5,
+    text: i18n.t("events.cookbook-events"),
+    options: [
+      {
+        text: i18n.t("general.create") as string,
+        key: "cookbookCreated",
+      },
+      {
+        text: i18n.t("general.update") as string,
+        key: "cookbookUpdated",
+      },
+      {
+        text: i18n.t("general.delete") as string,
+        key: "cookbookDeleted",
+      },
+    ],
+  },
+  {
+    id: 6,
+    text: i18n.t("events.tag-events"),
+    options: [
+      {
+        text: i18n.t("general.create") as string,
+        key: "tagCreated",
+      },
+      {
+        text: i18n.t("general.update") as string,
+        key: "tagUpdated",
+      },
+      {
+        text: i18n.t("general.delete") as string,
+        key: "tagDeleted",
+      },
+    ],
+  },
+  {
+    id: 7,
+    text: i18n.t("events.category-events"),
+    options: [
+      {
+        text: i18n.t("general.create") as string,
+        key: "categoryCreated",
+      },
+      {
+        text: i18n.t("general.update") as string,
+        key: "categoryUpdated",
+      },
+      {
+        text: i18n.t("general.delete") as string,
+        key: "categoryDeleted",
+      },
+    ],
+  },
+  {
+    id: 8,
+    text: i18n.t("events.label-events"),
+    options: [
+      {
+        text: i18n.t("general.create") as string,
+        key: "labelCreated",
+      },
+      {
+        text: i18n.t("general.update") as string,
+        key: "labelUpdated",
+      },
+      {
+        text: i18n.t("general.delete") as string,
+        key: "labelDeleted",
+      },
+    ],
+  },
+];
+</script>
+
+<style>
+.notifier-options {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+</style>

frontend/app/pages/household/webhooks.vue

@@ -0,0 +1,86 @@
+<template>
+  <v-container class="narrow-container">
+    <BasePageTitle divider>
+      <template #header>
+        <v-img
+          width="100%"
+          max-height="125"
+          max-width="125"
+          src="/svgs/manage-webhooks.svg"
+        />
+      </template>
+      <template #title>
+        {{ $t('settings.webhooks.webhooks') }}
+      </template>
+      <v-card-text class="pb-0">
+        {{ $t('settings.webhooks.description') }}
+      </v-card-text>
+    </BasePageTitle>
+
+    <BaseButton
+      create
+      @click="actions.createOne()"
+    />
+    <v-expansion-panels class="mt-2">
+      <v-expansion-panel
+        v-for="(webhook, index) in webhooks"
+        :key="index"
+        class="my-2 left-border rounded"
+      >
+        <v-expansion-panel-title
+          disable-icon-rotate
+          class="headline"
+        >
+          <div class="d-flex align-center">
+            <v-icon
+              size="large"
+              start
+              :color="webhook.enabled ? 'info' : undefined"
+            >
+              {{ $globals.icons.webhook }}
+            </v-icon>
+            {{ webhook.name }} - {{ $d(timeUTC(webhook.scheduledTime), "time") }}
+          </div>
+          <template #actions>
+            <v-btn
+              size="small"
+              icon
+              flat
+              class="ml-2"
+            >
+              <v-icon>
+                {{ $globals.icons.edit }}
+              </v-icon>
+            </v-btn>
+          </template>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
+          <GroupWebhookEditor
+            :key="webhook.id"
+            :webhook="webhook"
+            @save="actions.updateOne($event)"
+            @delete="actions.deleteOne($event)"
+            @test="actions.testOne($event).then(() => alert.success($t('events.test-message-sent')))"
+          />
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+    </v-expansion-panels>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { useGroupWebhooks, timeUTC } from "~/composables/use-group-webhooks";
+import GroupWebhookEditor from "~/components/Domain/Household/GroupWebhookEditor.vue";
+import { alert } from "~/composables/use-toast";
+
+definePageMeta({
+  middleware: ["advanced-only"],
+});
+
+const i18n = useI18n();
+const { actions, webhooks } = useGroupWebhooks();
+
+useSeoMeta({
+  title: i18n.t("settings.webhooks.webhooks"),
+});
+</script>