From b1238ed6113bc543476ee31041f174d4a0239d0a Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <rpm@fthiessen.de>
Date: Tue, 25 May 2021 21:36:09 +0200
Subject: [PATCH] Moved source from main flaschengeist source tree

---
 package.json                                  |  48 ++
 .../BuildManual/BuildManualVolume.vue         |  63 +++
 .../BuildManual/BuildManualVolumePart.vue     |  66 +++
 src/components/CalculationTable.vue           | 511 ++++++++++++++++++
 .../CalculationTable/BuildManual.vue          |  61 +++
 .../CalculationTable/DrinkPriceVolumes.vue    | 340 ++++++++++++
 .../CalculationTable/Ingredients.vue          | 271 ++++++++++
 src/components/CalculationTable/NewPrice.vue  |  60 ++
 src/components/DrinkModify.vue                | 353 ++++++++++++
 src/components/DrinkTypes.vue                 | 113 ++++
 src/components/ExtraIngredients.vue           | 154 ++++++
 src/components/MinPriceSetting.vue            |  56 ++
 src/components/Pricelist.vue                  | 326 +++++++++++
 src/components/SearchInput.vue                |  90 +++
 src/components/Tags.vue                       | 181 +++++++
 src/pages/CocktailBuilder.vue                 |  66 +++
 src/pages/InnerPricelist.vue                  |  39 ++
 src/pages/OuterPricelist.vue                  |  37 ++
 src/pages/Receipts.vue                        | 176 ++++++
 src/pages/Settings.vue                        | 136 +++++
 src/permissions.ts                            |  33 ++
 src/plugin.ts                                 |  15 +
 src/routes/index.ts                           |  73 +++
 src/shims.d.ts                                |   5 +
 src/store.ts                                  | 313 +++++++++++
 src/utils/filter.ts                           |  39 ++
 src/utils/sort.ts                             |   7 +
 src/utils/utils.ts                            |  84 +++
 28 files changed, 3716 insertions(+)
 create mode 100644 package.json
 create mode 100644 src/components/BuildManual/BuildManualVolume.vue
 create mode 100644 src/components/BuildManual/BuildManualVolumePart.vue
 create mode 100644 src/components/CalculationTable.vue
 create mode 100644 src/components/CalculationTable/BuildManual.vue
 create mode 100644 src/components/CalculationTable/DrinkPriceVolumes.vue
 create mode 100644 src/components/CalculationTable/Ingredients.vue
 create mode 100644 src/components/CalculationTable/NewPrice.vue
 create mode 100644 src/components/DrinkModify.vue
 create mode 100644 src/components/DrinkTypes.vue
 create mode 100644 src/components/ExtraIngredients.vue
 create mode 100644 src/components/MinPriceSetting.vue
 create mode 100644 src/components/Pricelist.vue
 create mode 100644 src/components/SearchInput.vue
 create mode 100644 src/components/Tags.vue
 create mode 100644 src/pages/CocktailBuilder.vue
 create mode 100644 src/pages/InnerPricelist.vue
 create mode 100644 src/pages/OuterPricelist.vue
 create mode 100644 src/pages/Receipts.vue
 create mode 100644 src/pages/Settings.vue
 create mode 100644 src/permissions.ts
 create mode 100644 src/plugin.ts
 create mode 100644 src/routes/index.ts
 create mode 100644 src/shims.d.ts
 create mode 100644 src/store.ts
 create mode 100644 src/utils/filter.ts
 create mode 100644 src/utils/sort.ts
 create mode 100644 src/utils/utils.ts

diff --git a/package.json b/package.json
new file mode 100644
index 0000000..2e63349
--- /dev/null
+++ b/package.json
@@ -0,0 +1,48 @@
+{
+  "private": true,
+  "license": "MIT",
+  "version": "1.0.0-alpha.1",
+  "name": "@flaschengeist/pricelist",
+  "author": "Tim Gröger <flaschengeist@wu5.de>",
+  "homepage": "https://flaschengeist.dev/Flaschengeist",
+  "description": "Flaschengeist pricelist plugin",
+  "bugs": {
+    "url": "https://flaschengeist.dev/Flaschengeist/flaschengeist/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://flaschengeist.dev/Flaschengeist/flaschengeist-pricelist"
+  },
+  "main": "src/index.ts",
+  "scripts": {
+    "pretty": "prettier --config ./package.json  --write '{,!(node_modules)/**/}*.ts'",
+    "lint": "eslint --ext .js,.ts,.vue ./src"
+  },
+  "dependencies": {
+    "vuedraggable": "^4.0.1"
+  },
+  "devDependencies": {
+    "@flaschengeist/types": "git+https://flaschengeist.dev/ferfissimo/flaschengeist-types.git#develop",
+    "@quasar/app": "^3.0.0-beta.26",
+    "@typescript-eslint/eslint-plugin": "^4.24.0",
+    "@typescript-eslint/parser": "^4.24.0",
+    "axios": "^0.21.1",
+    "eslint": "^7.26.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-vue": "^7.9.0",
+    "pinia": "^2.0.0-alpha.18",
+    "prettier": "^2.3.0",
+    "quasar": "^2.0.0-beta.18",
+    "typescript": "^4.2.4"
+  },
+  "peerDependencies": {
+    "@flaschengeist/api": "^1.0.0-alpha.1",
+    "@flaschengeist/users": "^1.0.0-alpha.1"
+  },
+  "prettier": {
+    "singleQuote": true,
+    "semi": true,
+    "printWidth": 100,
+    "arrowParens": "always"
+  }
+}
diff --git a/src/components/BuildManual/BuildManualVolume.vue b/src/components/BuildManual/BuildManualVolume.vue
new file mode 100644
index 0000000..4400095
--- /dev/null
+++ b/src/components/BuildManual/BuildManualVolume.vue
@@ -0,0 +1,63 @@
+<template>
+  <q-carousel
+    v-model="volume"
+    transition-prev="slide-right"
+    transition-next="slide-left"
+    animated
+    swipeable
+    control-color="primary"
+    arrows
+  >
+    <q-carousel-slide v-for="volume in volumes" :key="volume.id" :name="volume.id">
+      <build-manual-volume-part :volume="volume" />
+    </q-carousel-slide>
+  </q-carousel>
+  <div class="full-width row justify-center q-pa-sm">
+    <div class="q-px-sm">
+      <q-btn-toggle v-model="volume" :options="btn_options" rounded />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, PropType, ref, computed } from 'vue';
+import { DrinkPriceVolume } from '../../store';
+import BuildManualVolumePart from './BuildManualVolumePart.vue';
+
+export default defineComponent({
+  name: 'BuildManualVolume',
+  components: { BuildManualVolumePart },
+  props: {
+    volumes: {
+      type: Array as PropType<Array<DrinkPriceVolume>>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const _volume = ref<number>();
+    const volume = computed({
+      get: () => {
+        if (_volume.value !== undefined) {
+          return _volume.value;
+        }
+        return props.volumes[0].id;
+      },
+      set: (val: number) => (_volume.value = val),
+    });
+    const options = computed(() => {
+      let ret: Array<{ label: number; value: number }> = [];
+      props.volumes.forEach((volume: DrinkPriceVolume) => {
+        ret.push({ label: volume.id, value: volume.id });
+      });
+      return ret;
+    });
+    const btn_options = computed<Array<{ label: string; value: number }>>(() => {
+      const retVal: Array<{ label: string; value: number }> = [];
+      props.volumes.forEach((volume: DrinkPriceVolume) => {
+        retVal.push({ label: `${(<number>volume.volume).toFixed(3)}L`, value: volume.id });
+      });
+      return retVal;
+    });
+    return { volume, options, btn_options };
+  },
+});
+</script>
diff --git a/src/components/BuildManual/BuildManualVolumePart.vue b/src/components/BuildManual/BuildManualVolumePart.vue
new file mode 100644
index 0000000..6f07523
--- /dev/null
+++ b/src/components/BuildManual/BuildManualVolumePart.vue
@@ -0,0 +1,66 @@
+<template>
+  <q-card-section>
+    <div class="text-h6">Zutaten</div>
+    <div v-for="ingredient in volume.ingredients" :key="ingredient.id">
+      <div v-if="ingredient.drink_ingredient">
+        <div class="full-width row q-gutter-sm q-py-sm">
+          <div class="col">
+            {{ name(ingredient.drink_ingredient?.ingredient_id) }}
+          </div>
+          <div class="col">
+            {{
+              ingredient.drink_ingredient?.volume
+                ? `${ingredient.drink_ingredient?.volume * 100} cl`
+                : ''
+            }}
+          </div>
+        </div>
+        <q-separator />
+      </div>
+    </div>
+    <div v-for="ingredient in volume.ingredients" :key="ingredient.id">
+      <div v-if="ingredient.extra_ingredient">
+        <div class="full-width row q-gutter-sm q-py-sm">
+          <div class="col">
+            {{ ingredient.extra_ingredient?.name }}
+          </div>
+          <div class="col"></div>
+        </div>
+        <q-separator />
+      </div>
+    </div>
+  </q-card-section>
+  <q-card-section>
+    <div class="text-h6">Preise</div>
+    <div class="full-width row q-gutter-sm justify-around">
+      <div v-for="price in volume.prices" :key="price.id">
+        <div class="text-body1">{{ price.price.toFixed(2) }}€</div>
+        <q-badge v-if="price.public" class="text-caption"> öffentlich </q-badge>
+        <div class="text-caption text-weight-thin">
+          {{ price.description }}
+        </div>
+      </div>
+    </div>
+  </q-card-section>
+</template>
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { DrinkPriceVolume, usePricelistStore } from '../../store';
+
+export default defineComponent({
+  name: 'BuildManualVolumePart',
+  props: {
+    volume: {
+      type: Object as PropType<DrinkPriceVolume>,
+      required: true,
+    },
+  },
+  setup() {
+    const store = usePricelistStore();
+    function name(id: number) {
+      return store.drinks.find((a) => a.id === id)?.name;
+    }
+    return { name };
+  },
+});
+</script>
diff --git a/src/components/CalculationTable.vue b/src/components/CalculationTable.vue
new file mode 100644
index 0000000..dabe8a2
--- /dev/null
+++ b/src/components/CalculationTable.vue
@@ -0,0 +1,511 @@
+<template>
+  <q-table
+    v-model:pagination="pagination"
+    title="Preistabelle"
+    :columns="columns"
+    :rows="drinks"
+    dense
+    :filter="search"
+    :filter-method="filter"
+    grid
+    :rows-per-page-options="[0]"
+  >
+    <template #top-right>
+      <div class="row justify-end q-gutter-sm">
+        <search-input v-model="search" :keys="search_keys" />
+        <slot></slot>
+        <q-btn v-if="!public && !nodetails" label="Aufpreise">
+          <q-menu anchor="center middle" self="center middle">
+            <min-price-setting />
+          </q-menu>
+        </q-btn>
+        <q-btn
+          v-if="!public && !nodetails && editable && hasPermission(PERMISSIONS.CREATE)"
+          color="primary"
+          round
+          icon="mdi-plus"
+          @click="newDrink"
+        >
+          <q-tooltip> Neues Getränk </q-tooltip>
+        </q-btn>
+      </div>
+    </template>
+    <template #item="props">
+      <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
+        <q-card>
+          <q-img style="max-height: 256px" :src="image(props.row.uuid)">
+            <div
+              v-if="!public && !nodetails && editable"
+              class="absolute-top-right justify-end"
+              style="background-color: transparent"
+            >
+              <q-btn
+                round
+                icon="mdi-pencil"
+                style="background-color: rgba(0, 0, 0, 0.5)"
+                @click="editDrink = props.row"
+              />
+            </div>
+            <div class="absolute-bottom-right justify-end">
+              <div class="text-subtitle1 text-right">
+                {{ props.row.name }}
+              </div>
+              <div class="text-caption text-right">
+                {{ props.row.type.name }}
+              </div>
+            </div>
+          </q-img>
+          <q-card-section>
+            <q-badge
+              v-for="tag in props.row.tags"
+              :key="`${props.row.id}-${tag.id}`"
+              class="text-caption"
+              rounded
+              :style="`background-color: ${tag.color}`"
+            >
+              {{ tag.name }}
+            </q-badge>
+          </q-card-section>
+          <q-card-section v-if="!public && !nodetails">
+            <div class="fit row">
+              <q-input
+                v-if="props.row.article_id"
+                class="col-xs-12 col-sm-6 q-pa-sm"
+                :model-value="props.row.article_id"
+                outlined
+                readonly
+                label="Artikelnummer"
+                dense
+              />
+              <q-input
+                v-if="props.row.volume"
+                class="col-xs-12 col-sm-6 q-pa-sm"
+                :model-value="props.row.volume"
+                outlined
+                readonly
+                label="Inhalt"
+                dense
+                suffix="L"
+              />
+              <q-input
+                v-if="props.row.package_size"
+                class="col-xs-12 col-sm-6 q-pa-sm"
+                :model-value="props.row.package_size"
+                outlined
+                readonly
+                label="Gebindegröße"
+                dense
+              />
+              <q-input
+                v-if="props.row.cost_per_package"
+                class="col-xs-12 col-sm-6 q-pa-sm"
+                :model-value="props.row.cost_per_package"
+                outlined
+                readonly
+                label="Preis Gebinde"
+                suffix="€"
+                dense
+              />
+              <q-input
+                v-if="props.row.cost_per_volume"
+                class="col-xs-12 col-sm-6 q-pa-sm q-pb-lg"
+                :model-value="props.row.cost_per_volume"
+                outlined
+                readonly
+                label="Preis pro L"
+                hint="Inkl. 19% Mehrwertsteuer"
+                suffix="€"
+                dense
+              />
+            </div>
+          </q-card-section>
+          <q-card-section v-if="props.row.volumes.length > 0 && notLoading">
+            <drink-price-volumes
+              :model-value="props.row.volumes"
+              :public="public"
+              :nodetails="nodetails"
+            />
+          </q-card-section>
+        </q-card>
+      </div>
+    </template>
+  </q-table>
+  <q-dialog :model-value="editDrink !== undefined" persistent>
+    <drink-modify
+      :drink="editDrink"
+      @save="editing_drink"
+      @cancel="editDrink = undefined"
+      @delete="deleteDrink"
+    />
+  </q-dialog>
+</template>
+
+<script lang="ts">
+import DrinkPriceVolumes from '../components/CalculationTable/DrinkPriceVolumes.vue';
+import { defineComponent, onBeforeMount, ComputedRef, computed, ref } from 'vue';
+import { Drink, usePricelistStore, DrinkPriceVolume } from '../store';
+import MinPriceSetting from '../components/MinPriceSetting.vue';
+import { api, hasPermission } from '@flaschengeist/api';
+import { filter, Search } from '../utils/filter';
+import SearchInput from './SearchInput.vue';
+import DrinkModify from './DrinkModify.vue';
+import { DeleteObjects } from '../utils/utils';
+import { PERMISSIONS } from '../permissions';
+import { sort } from '../utils/sort';
+import { Notify } from 'quasar';
+
+export default defineComponent({
+  name: 'CalculationTable',
+  components: {
+    SearchInput,
+    MinPriceSetting,
+    DrinkPriceVolumes,
+    DrinkModify,
+  },
+  props: {
+    public: {
+      type: Boolean,
+      default: false,
+    },
+    editable: {
+      type: Boolean,
+      default: false,
+    },
+    nodetails: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    const store = usePricelistStore();
+
+    onBeforeMount(() => {
+      void store.getDrinks();
+    });
+
+    const columns = [
+      {
+        name: 'picture',
+        label: 'Bild',
+      },
+      {
+        name: 'name',
+        label: 'Name',
+        field: 'name',
+        sortable: true,
+        sort,
+        filterable: true,
+        public: true,
+      },
+
+      {
+        name: 'drink_type',
+        label: 'Kategorie',
+        field: 'type',
+        format: (val: FG.DrinkType) => `${val.name}`,
+        sortable: true,
+        sort: (a: FG.DrinkType, b: FG.DrinkType) => sort(a.name, b.name),
+        filterable: true,
+        public: true,
+      },
+      {
+        name: 'tags',
+        label: 'Tags',
+        field: 'tags',
+        format: (val: Array<FG.Tag>) => {
+          let retVal = '';
+          val.forEach((tag, index) => {
+            if (index > 0) {
+              retVal += ', ';
+            }
+            retVal += tag.name;
+          });
+          return retVal;
+        },
+        filterable: true,
+        public: true,
+      },
+      {
+        name: 'article_id',
+        label: 'Artikelnummer',
+        field: 'article_id',
+        sortable: true,
+        sort,
+        filterable: true,
+        public: false,
+      },
+      {
+        name: 'volume_package',
+        label: 'Inhalt in l des Gebinde',
+        field: 'volume',
+        sortable: true,
+        sort,
+        public: false,
+      },
+      {
+        name: 'package_size',
+        label: 'Gebindegröße',
+        field: 'package_size',
+        sortable: true,
+        sort,
+        public: false,
+      },
+      {
+        name: 'cost_per_package',
+        label: 'Preis Netto/Gebinde',
+        field: 'cost_per_package',
+        format: (val: number | null) => (val ? `${val.toFixed(3)}€` : ''),
+        sortable: true,
+        sort,
+        public: false,
+      },
+      {
+        name: 'cost_per_volume',
+        label: 'Preis mit 19%/Liter',
+        field: 'cost_per_volume',
+        format: (val: number | null) => (val ? `${val.toFixed(3)}€` : ''),
+        sortable: true,
+        sort: (a: ComputedRef, b: ComputedRef) => sort(a.value, b.value),
+      },
+      {
+        name: 'volumes',
+        label: 'Preiskalkulation',
+        field: 'volumes',
+        format: (val: Array<DrinkPriceVolume>) => {
+          let retVal = '';
+          val.forEach((val, index) => {
+            if (index > 0) {
+              retVal += ', ';
+            }
+            retVal += val.id;
+          });
+          return retVal;
+        },
+        sortable: false,
+      },
+      {
+        name: 'receipt',
+        label: 'Bauanleitung',
+        field: 'receipt',
+        format: (val: Array<string>) => {
+          let retVal = '';
+          val.forEach((value, index) => {
+            if (index > 0) {
+              retVal += ', ';
+            }
+            retVal += value;
+          });
+          return retVal;
+        },
+        filterable: true,
+        sortable: false,
+        public: false,
+      },
+    ];
+    const column_calc = [
+      {
+        name: 'volume',
+        label: 'Abgabe in l',
+        field: 'volume',
+      },
+      {
+        name: 'min_prices',
+        label: 'Minimal Preise',
+        field: 'min_prices',
+      },
+      {
+        name: 'prices',
+        label: 'Preise',
+        field: 'prices',
+      },
+    ];
+    const column_prices = [
+      {
+        name: 'price',
+        label: 'Preis',
+        field: 'price',
+        format: (val: number) => `${val.toFixed(2)}€`,
+      },
+      {
+        name: 'description',
+        label: 'Beschreibung',
+        field: 'description',
+      },
+      {
+        name: 'public',
+        label: 'Öffentlich',
+        field: 'public',
+      },
+    ];
+
+    const search_keys = computed(() =>
+      columns.filter(
+        (column) => column.filterable && (props.public || props.nodetails ? column.public : true)
+      )
+    );
+
+    const pagination = ref({
+      sortBy: 'name',
+      descending: false,
+      rowsPerPage: store.drinks.length,
+    });
+
+    const drinkTypes = computed(() => store.drinkTypes);
+
+    function updateDrink(drink: Drink) {
+      void store.updateDrink(drink);
+    }
+
+    function deleteDrink() {
+      if (editDrink.value) {
+        store.deleteDrink(editDrink.value);
+      }
+      editDrink.value = undefined;
+    }
+
+    const showNewDrink = ref(false);
+
+    const drinkPic = ref<File>();
+
+    function onPictureRejected() {
+      Notify.create({
+        group: false,
+        type: 'negative',
+        message: 'Datei zu groß oder keine gültige Bilddatei.',
+        timeout: 10000,
+        progress: true,
+        actions: [{ icon: 'mdi-close', color: 'white' }],
+      });
+      drinkPic.value = undefined;
+    }
+
+    async function savePicture(drinkPic: File) {
+      if (editDrink.value) {
+        await store.upload_drink_picture(editDrink.value, drinkPic).catch((response: Response) => {
+          if (response && response.status == 400) {
+            onPictureRejected();
+          }
+        });
+      }
+    }
+
+    async function deletePicture() {
+      if (editDrink.value) {
+        await store.delete_drink_picture(editDrink.value);
+      }
+    }
+
+    const search = ref<Search>({
+      value: '',
+      key: '',
+      label: '',
+    });
+
+    const emptyDrink: Drink = {
+      id: -1,
+      article_id: undefined,
+      package_size: undefined,
+      name: '',
+      volume: undefined,
+      cost_per_volume: undefined,
+      cost_per_package: undefined,
+      tags: [],
+      type: undefined,
+      volumes: [],
+      uuid: '',
+    };
+
+    function newDrink() {
+      editDrink.value = Object.assign({}, emptyDrink);
+    }
+
+    const editDrink = ref<Drink>();
+
+    async function editing_drink(
+      drink: Drink,
+      toDeleteObjects: DeleteObjects,
+      drinkPic: File | undefined,
+      deletePic: boolean
+    ) {
+      notLoading.value = false;
+      for (const ingredient of toDeleteObjects.ingredients) {
+        await store.deleteIngredient(ingredient);
+      }
+      for (const price of toDeleteObjects.prices) {
+        await store.deletePrice(price);
+      }
+      for (const volume of toDeleteObjects.volumes) {
+        await store.deleteVolume(volume, drink);
+      }
+      if (drink.id > 0) {
+        await store.updateDrink(drink);
+      } else {
+        const _drink = await store.setDrink(drink);
+        if (editDrink.value) {
+          editDrink.value.id = _drink.id;
+        }
+      }
+      if (deletePic) {
+        await deletePicture();
+      }
+      if (drinkPic instanceof File) {
+        await savePicture(drinkPic);
+      }
+      editDrink.value = undefined;
+      notLoading.value = true;
+    }
+
+    function get_volumes(drink_id: number) {
+      return store.drinks.find((a) => a.id === drink_id)?.volumes;
+    }
+
+    const notLoading = ref(true);
+
+    const imageloading = ref<Array<{ id: number; loading: boolean }>>([]);
+    function getImageLoading(id: number) {
+      const loading = imageloading.value.find((a) => a.id === id);
+      if (loading) {
+        return loading.loading;
+      }
+      return false;
+    }
+
+    function image(uuid: string | undefined) {
+      if (uuid) {
+        return `${api.defaults.baseURL||''}/pricelist/picture/${uuid}?size=256`;
+      }
+      return 'no-image.svg';
+    }
+
+    return {
+      drinks: computed(() => store.drinks),
+      pagination,
+      columns,
+      column_calc,
+      column_prices,
+      drinkTypes,
+      updateDrink,
+      deleteDrink,
+      showNewDrink,
+      drinkPic,
+      savePicture,
+      deletePicture,
+      search,
+      filter,
+      search_keys,
+      tags: computed(() => store.tags),
+      editDrink,
+      editing_drink,
+      get_volumes,
+      notLoading,
+      getImageLoading,
+      newDrink,
+      hasPermission,
+      PERMISSIONS,
+      image,
+    };
+  },
+});
+</script>
+
+<style scoped></style>
diff --git a/src/components/CalculationTable/BuildManual.vue b/src/components/CalculationTable/BuildManual.vue
new file mode 100644
index 0000000..cabbdea
--- /dev/null
+++ b/src/components/CalculationTable/BuildManual.vue
@@ -0,0 +1,61 @@
+<template>
+  <div
+    v-for="(step, index) in steps"
+    :key="index"
+    class="full-width row q-gutter-sm justify-between q-py-sm"
+  >
+    <div class="row">
+      <div>{{ index + 1 }}.</div>
+      <div class="q-pl-sm">
+        {{ step }}
+      </div>
+    </div>
+    <q-btn
+      v-if="editable"
+      round
+      color="negative"
+      size="sm"
+      icon="mdi-delete"
+      @click="deleteStep(index)"
+    />
+  </div>
+  <div v-if="editable" class="full-width row q-gutter-sm justify-between">
+    <q-input v-model="newStep" filled label="Arbeitsschritt" dense />
+    <q-btn label="Schritt hinzufügen" dense @click="addStep" />
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  name: 'BuildManual',
+  props: {
+    steps: {
+      type: Array as PropType<Array<string>>,
+      default: undefined,
+    },
+    editable: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: {
+    deleteStep: (index: number) => index,
+    addStep: (val: string) => val,
+  },
+  setup(_, { emit }) {
+    const newStep = ref('');
+    function deleteStep(index: number) {
+      emit('deleteStep', index);
+    }
+    function addStep() {
+      emit('addStep', newStep.value);
+      newStep.value = '';
+    }
+    return { newStep, addStep, deleteStep };
+  },
+});
+</script>
+
+<style scoped></style>
diff --git a/src/components/CalculationTable/DrinkPriceVolumes.vue b/src/components/CalculationTable/DrinkPriceVolumes.vue
new file mode 100644
index 0000000..7ad9aa2
--- /dev/null
+++ b/src/components/CalculationTable/DrinkPriceVolumes.vue
@@ -0,0 +1,340 @@
+<template>
+  <q-carousel
+    v-model="volume"
+    transition-prev="slide-right"
+    transition-next="slide-left"
+    animated
+    swipeable
+    control-color="primary"
+    arrows
+    :keep-alive="false"
+  >
+    <q-carousel-slide v-for="volume in volumes" :key="volume.id" :name="volume.id">
+      <div class="full-width row">
+        <q-input
+          v-model.number="volume._volume"
+          class="q-pa-sm col-10"
+          :outlined="!editable || !volume_can_edit"
+          :filled="editable && volume_can_edit"
+          :readonly="!editable || !volume_can_edit"
+          dense
+          label="Inhalt"
+          mask="#.###"
+          fill-mask="0"
+          suffix="L"
+          min="0"
+          step="0.001"
+          @update:model-value="updateVolume(volume)"
+        />
+        <div
+          v-if="deleteable && editable && hasPermission(PERMISSIONS.DELETE_VOLUME)"
+          class="q-pa-sm col-2 text-right"
+        >
+          <q-btn round icon="mdi-delete" size="sm" color="negative" @click="deleteVolume">
+            <q-tooltip> Abgabe entfernen </q-tooltip>
+          </q-btn>
+        </div>
+      </div>
+      <div v-if="!public && !nodetails" class="full-width row q-gutter-sm q-pa-sm justify-around">
+        <div v-for="(min_price, index) in volume.min_prices" :key="index">
+          <q-badge class="text-body1" color="primary"> {{ min_price.percentage }}% </q-badge>
+          <div class="text-body1">{{ min_price.price.toFixed(3) }}€</div>
+        </div>
+      </div>
+      <div class="q-pa-sm">
+        <div v-for="(price, index) in volume.prices" :key="price.id">
+          <div class="fit row justify-around q-py-sm">
+            <div
+              v-if="!editable || !hasPermission(PERMISSIONS.EDIT_PRICE)"
+              class="text-body1 col-3"
+            >
+              {{ price.price.toFixed(2) }}€
+            </div>
+            <q-input
+              v-else
+              v-model.number="price.price"
+              class="col-3"
+              type="number"
+              min="0"
+              step="0.01"
+              suffix="€"
+              filled
+              dense
+              label="Preis"
+              @update:model-value="change"
+            />
+            <div class="text-body1 col-2">
+              <q-toggle
+                v-model="price.public"
+                :disable="!editable || !hasPermission(PERMISSIONS.EDIT_PRICE)"
+                checked-icon="mdi-earth"
+                unchecked-icon="mdi-earth-off"
+                @update:model-value="change"
+              />
+            </div>
+            <div
+              v-if="!editable || !hasPermission(PERMISSIONS.EDIT_PRICE)"
+              class="text-body1 col-5"
+            >
+              {{ price.description }}
+            </div>
+            <q-input
+              v-else
+              v-model="price.description"
+              class="col-5"
+              filled
+              dense
+              label="Beschreibung"
+              @update:model-value="change"
+            />
+            <div v-if="editable && hasPermission(PERMISSIONS.DELETE_PRICE)" class="col-1">
+              <q-btn round icon="mdi-delete" color="negative" size="xs" @click="deletePrice(price)">
+                <q-tooltip> Preis entfernen </q-tooltip>
+              </q-btn>
+            </div>
+          </div>
+          <q-separator v-if="index < volume.prices.length - 1" />
+        </div>
+        <div
+          v-if="!public && !nodetails && isUnderMinPrice"
+          class="fit warning bg-red text-center text-white text-body1"
+        >
+          Einer der Preise ist unterhalb des niedrigsten minimal Preises.
+        </div>
+        <div
+          v-if="editable && hasPermission(PERMISSIONS.EDIT_PRICE)"
+          class="full-width row justify-end text-right"
+        >
+          <q-btn round icon="mdi-plus" size="sm" color="primary">
+            <q-tooltip> Preis hinzufügen </q-tooltip>
+            <q-menu anchor="center middle" self="center middle">
+              <new-price @save="addPrice" />
+            </q-menu>
+          </q-btn>
+        </div>
+      </div>
+      <div class="q-pa-sm">
+        <ingredients
+          v-if="!public && !costPerVolume"
+          v-model="volume.ingredients"
+          :editable="editable && hasPermission(PERMISSIONS.EDIT_INGREDIENTS_DRINK)"
+          @update="updateVolume(volume)"
+          @delete-ingredient="deleteIngredient"
+        />
+      </div>
+    </q-carousel-slide>
+  </q-carousel>
+  <div class="full-width row justify-center q-pa-sm">
+    <div class="q-px-sm">
+      <q-btn-toggle v-model="volume" :options="options" rounded />
+    </div>
+    <div v-if="editable" class="q-px-sm">
+      <q-btn class="q-px-sm" round icon="mdi-plus" color="primary" size="sm" @click="newVolume">
+        <q-tooltip> Abgabe hinzufügen </q-tooltip>
+      </q-btn>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref, onBeforeMount } from 'vue';
+import { calc_volume, clone } from '../../utils/utils';
+import { hasPermission } from '@flaschengeist/api';
+import { PERMISSIONS } from '../../permissions';
+import { DrinkPriceVolume } from '../../store';
+import Ingredients from './Ingredients.vue';
+import NewPrice from './NewPrice.vue';
+
+export default defineComponent({
+  name: 'DrinkPriceVolume',
+  components: { Ingredients, NewPrice },
+  props: {
+    modelValue: {
+      type: Array as PropType<Array<DrinkPriceVolume>>,
+      required: true,
+    },
+    costPerVolume: {
+      type: undefined,
+      default: undefined,
+    },
+    editable: {
+      type: Boolean,
+      default: false,
+    },
+    public: {
+      type: Boolean,
+      default: false,
+    },
+    nodetails: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: {
+    'update:modelValue': (val: Array<DrinkPriceVolume>) => val,
+    update: (val: number) => val,
+    'delete-volume': (val: DrinkPriceVolume) => val,
+    'delete-price': (val: FG.DrinkPrice) => val,
+    'delete-ingredient': (val: FG.Ingredient) => val,
+  },
+  setup(props, { emit }) {
+    onBeforeMount(() => {
+      //volumes.value = <Array<DrinkPriceVolume>>JSON.parse(JSON.stringify(props.modelValue));
+      volumes.value = clone(props.modelValue);
+    });
+    const volumes = ref<Array<DrinkPriceVolume>>([]);
+    const _volume = ref<number | undefined>();
+    const volume = computed<number | undefined>({
+      get: () => {
+        if (_volume.value !== undefined) {
+          return _volume.value;
+        }
+        if (volumes.value.length > 0) {
+          return volumes.value[0].id;
+        }
+        return undefined;
+      },
+      set: (val: number | undefined) => (_volume.value = val),
+    });
+    const edit_volume = computed(() => {
+      return volumes.value.find((a) => a.id === volume.value);
+    });
+    const options = computed<Array<{ label: string; value: number }>>(() => {
+      const retVal: Array<{ label: string; value: number }> = [];
+      volumes.value.forEach((volume: DrinkPriceVolume) => {
+        retVal.push({ label: `${(<number>volume.volume).toFixed(3)}L`, value: volume.id });
+      });
+      return retVal;
+    });
+
+    function updateVolume(_volume: DrinkPriceVolume) {
+      const index = volumes.value.findIndex((a) => a.id === _volume.id);
+      if (index > -1) {
+        volumes.value[index].volume = calc_volume(_volume);
+        volumes.value[index]._volume = <number>volumes.value[index].volume;
+      }
+      change();
+      setTimeout(() => {
+        emit('update', index);
+      }, 50);
+    }
+
+    const volume_can_edit = computed(() => {
+      if (edit_volume.value) {
+        return !edit_volume.value.ingredients.some((ingredient) => ingredient.drink_ingredient);
+      }
+      return true;
+    });
+
+    const newVolumeId = ref(-1);
+
+    function newVolume() {
+      const new_volume: DrinkPriceVolume = {
+        id: newVolumeId.value,
+        _volume: 0,
+        volume: 0,
+        prices: [],
+        ingredients: [],
+        min_prices: [],
+      };
+      newVolumeId.value--;
+      volumes.value.push(new_volume);
+      change();
+      _volume.value = volumes.value[volumes.value.length - 1].id;
+    }
+
+    function deleteVolume() {
+      if (edit_volume.value) {
+        if (edit_volume.value.id > 0) {
+          emit('delete-volume', edit_volume.value);
+        }
+        const index = volumes.value.findIndex((a) => a.id === edit_volume.value?.id);
+        if (index > -1) {
+          _volume.value = volumes.value[0].id;
+          volumes.value.splice(index, 1);
+        }
+      }
+    }
+
+    const deleteable = computed(() => {
+      if (edit_volume.value) {
+        const has_ingredients = edit_volume.value.ingredients.length > 0;
+        const has_prices = edit_volume.value.prices.length > 0;
+
+        return !(has_ingredients || has_prices);
+      }
+      return true;
+    });
+
+    function addPrice(price: FG.DrinkPrice) {
+      if (edit_volume.value) {
+        edit_volume.value.prices.push(price);
+        change();
+      }
+    }
+
+    function deletePrice(price: FG.DrinkPrice) {
+      if (edit_volume.value) {
+        const index = edit_volume.value.prices.findIndex((a) => a.id === price.id);
+        if (index > -1) {
+          if (edit_volume.value.prices[index].id > 0) {
+            emit('delete-price', edit_volume.value.prices[index]);
+            change();
+          }
+          edit_volume.value.prices.splice(index, 1);
+        }
+      }
+    }
+
+    function deleteIngredient(ingredient: FG.Ingredient) {
+      emit('delete-ingredient', ingredient);
+    }
+
+    function change() {
+      emit('update:modelValue', volumes.value);
+    }
+
+    const isUnderMinPrice = computed(() => {
+      if (volumes.value) {
+        const this_volume = volumes.value.find((a) => a.id === volume.value);
+        if (this_volume) {
+          if (this_volume.min_prices.length > 0) {
+            const min_price = this_volume.min_prices.sort((a, b) => {
+              if (a.price > b.price) return 1;
+              if (a.price < b.price) return -1;
+              return 0;
+            })[0];
+            console.log('min_price', min_price);
+            return this_volume.prices.some((a) => a.price < min_price.price);
+          }
+        }
+      }
+      return false;
+    });
+
+    return {
+      volumes,
+      volume,
+      options,
+      updateVolume,
+      volume_can_edit,
+      newVolume,
+      deleteable,
+      addPrice,
+      deletePrice,
+      deleteVolume,
+      deleteIngredient,
+      change,
+      isUnderMinPrice,
+      hasPermission,
+      PERMISSIONS,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.warning {
+  border-radius: 5px;
+}
+</style>
diff --git a/src/components/CalculationTable/Ingredients.vue b/src/components/CalculationTable/Ingredients.vue
new file mode 100644
index 0000000..7090199
--- /dev/null
+++ b/src/components/CalculationTable/Ingredients.vue
@@ -0,0 +1,271 @@
+<template>
+  <div class="full-width">
+    <div
+      v-for="ingredient in edit_ingredients"
+      :key="`ingredient:${ingredient.id}`"
+      class="full-width row justify-evenly q-py-xs"
+    >
+      <div class="full-width row justify-evenly">
+        <div v-if="ingredient.drink_ingredient" class="col">
+          <div class="full-width row justify-evenly q-py-xs">
+            <div class="col">
+              {{ get_drink_ingredient_name(ingredient.drink_ingredient.ingredient_id) }}
+              <q-popup-edit
+                v-if="editable"
+                v-slot="scope"
+                v-model="ingredient.drink_ingredient.ingredient_id"
+                buttons
+                label-cancel="Abbrechen"
+                label-set="Speichern"
+                @save="updateValue"
+              >
+                <q-select
+                  v-model="scope.ingredient_id"
+                  class="col q-px-sm"
+                  label="Getränk"
+                  filled
+                  dense
+                  :options="drinks"
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                />
+              </q-popup-edit>
+            </div>
+            <div class="col">
+              {{ ingredient.drink_ingredient.volume.toFixed(3) }}L
+              <q-popup-edit
+                v-if="editable"
+                v-slot="scope"
+                v-model="ingredient.drink_ingredient.volume"
+                buttons
+                label-cancel="Abbrechen"
+                label-set="Speichern"
+                @save="updateValue"
+              >
+                <q-input
+                  v-model.number="scope.value"
+                  class="col q-px-sm"
+                  label="Volume"
+                  type="number"
+                  filled
+                  dense
+                  suffix="L"
+                  step="0.01"
+                  min="0"
+                />
+              </q-popup-edit>
+            </div>
+          </div>
+        </div>
+        <div v-else-if="ingredient.extra_ingredient" class="col">
+          <div class="full-width row justify-evenly q-py-xs">
+            <div class="col">
+              {{ ingredient.extra_ingredient.name }}
+            </div>
+            <div class="col">{{ ingredient.extra_ingredient.price.toFixed(3) }}€</div>
+          </div>
+          <q-popup-edit
+            v-if="editable"
+            v-model="ingredient.extra_ingredient"
+            buttons
+            label-cancel="Abbrechen"
+            label-set="Speichern"
+            @save="updateValue"
+          >
+            <q-select
+              v-model="ingredient.extra_ingredient"
+              filled
+              dense
+              :options="extra_ingredients"
+              option-label="name"
+            />
+          </q-popup-edit>
+        </div>
+        <div v-if="editable" class="col-1 row justify-end q-pa-xs">
+          <q-btn
+            icon="mdi-delete"
+            round
+            size="xs"
+            color="negative"
+            @click="deleteIngredient(ingredient)"
+          >
+            <q-tooltip> Zutat entfernen </q-tooltip>
+          </q-btn>
+        </div>
+      </div>
+      <q-separator />
+    </div>
+    <div v-if="editable" class="full-width row justify-end q-py-xs">
+      <q-btn size="sm" round icon="mdi-plus" color="primary">
+        <q-tooltip> Neue Zutat hinzufügen </q-tooltip>
+        <q-menu anchor="center middle" self="center middle" persistent>
+          <div class="full-width row justify-around q-gutter-sm q-pa-sm">
+            <div class="col">
+              <q-select
+                v-model="newIngredient"
+                filled
+                dense
+                label="Zutat"
+                :options="[...drinks, ...extra_ingredients]"
+                option-label="name"
+              />
+            </div>
+            <div class="col">
+              <q-slide-transition>
+                <q-input
+                  v-if="newIngredient && newIngredient.volume"
+                  v-model.number="newIngredientVolume"
+                  filled
+                  dense
+                  label="Volume"
+                  type="number"
+                  step="0.01"
+                  min="0"
+                  suffix="L"
+                />
+              </q-slide-transition>
+              <q-slide-transition>
+                <q-input
+                  v-if="newIngredient && newIngredient.price"
+                  v-model="newIngredient.price"
+                  filled
+                  dense
+                  label="Preis"
+                  disable
+                  min="0"
+                  step="0.1"
+                  fill-mask="0"
+                  mask="#.##"
+                  suffix="€"
+                />
+              </q-slide-transition>
+            </div>
+          </div>
+          <div class="full-width row justify-around q-gutter-sm q-pa-sm">
+            <q-btn v-close-popup flat label="Abbrechen" @click="cancelAddIngredient" />
+            <q-btn v-close-popup flat label="Speichern" color="primary" @click="addIngredient" />
+          </div>
+        </q-menu>
+      </q-btn>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref, onBeforeMount, unref } from 'vue';
+import { usePricelistStore } from '../../store';
+import { clone } from '../../utils/utils';
+
+export default defineComponent({
+  name: 'Ingredients',
+  props: {
+    modelValue: {
+      type: Object as PropType<Array<FG.Ingredient>>,
+      required: true,
+    },
+    editable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: {
+    'update:modelValue': (val: Array<FG.Ingredient>) => val,
+    update: () => true,
+    'delete-ingredient': (val: FG.Ingredient) => val,
+  },
+  setup(props, { emit }) {
+    onBeforeMount(() => {
+      //edit_ingredients.value = <Array<FG.Ingredient>>JSON.parse(JSON.stringify(props.modelValue))
+      //edit_ingredients.value = props.modelValue
+      edit_ingredients.value = clone(props.modelValue);
+    });
+
+    const store = usePricelistStore();
+
+    const edit_ingredients = ref<Array<FG.Ingredient>>([]);
+    const newIngredient = ref<FG.Drink | FG.ExtraIngredient>();
+    const newIngredientVolume = ref<number>(0);
+    function addIngredient() {
+      let _ingredient: FG.Ingredient;
+      if ((<FG.Drink>newIngredient.value)?.volume && newIngredient.value) {
+        _ingredient = {
+          id: -1,
+          drink_ingredient: {
+            id: -1,
+            ingredient_id: newIngredient.value.id,
+            volume: newIngredientVolume.value,
+          },
+          extra_ingredient: undefined,
+        };
+      } else {
+        _ingredient = {
+          id: -1,
+          drink_ingredient: undefined,
+          extra_ingredient: <FG.ExtraIngredient>newIngredient.value,
+        };
+      }
+      edit_ingredients.value.push(_ingredient);
+      emit('update:modelValue', unref(edit_ingredients));
+      update();
+      cancelAddIngredient();
+    }
+
+    function updateValue(value: number, initValue: number) {
+      console.log('updateValue', value, initValue);
+      emit('update:modelValue', unref(edit_ingredients));
+      update();
+    }
+
+    function cancelAddIngredient() {
+      setTimeout(() => {
+        (newIngredient.value = undefined), (newIngredientVolume.value = 0);
+      }, 200);
+    }
+    function deleteIngredient(ingredient: FG.Ingredient) {
+      const index = edit_ingredients.value.findIndex((a) => a.id === ingredient.id);
+      if (index > -1) {
+        if (edit_ingredients.value[index].id > 0) {
+          emit('delete-ingredient', edit_ingredients.value[index]);
+        }
+        edit_ingredients.value.splice(index, 1);
+      }
+      emit('update:modelValue', unref(edit_ingredients));
+      update();
+    }
+    const drinks = computed(() =>
+      store.drinks.filter((drink) => {
+        console.log('computed drinks', drink.name, drink.cost_per_volume);
+        return drink.cost_per_volume;
+      })
+    );
+    const extra_ingredients = computed(() => store.extraIngredients);
+
+    function get_drink_ingredient_name(id: number) {
+      return store.drinks.find((a) => a.id === id)?.name;
+    }
+
+    function update() {
+      setTimeout(() => {
+        emit('update');
+      }, 50);
+    }
+
+    return {
+      addIngredient,
+      drinks,
+      extra_ingredients,
+      newIngredient,
+      newIngredientVolume,
+      cancelAddIngredient,
+      updateValue,
+      deleteIngredient,
+      get_drink_ingredient_name,
+      edit_ingredients,
+    };
+  },
+});
+</script>
+
+<style scoped></style>
diff --git a/src/components/CalculationTable/NewPrice.vue b/src/components/CalculationTable/NewPrice.vue
new file mode 100644
index 0000000..9f26a70
--- /dev/null
+++ b/src/components/CalculationTable/NewPrice.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="row justify-around q-pa-sm">
+    <q-input
+      v-model.number="newPrice.price"
+      dense
+      filled
+      class="q-px-sm"
+      type="number"
+      label="Preis"
+      suffix="€"
+      min="0"
+      step="0.1"
+    />
+    <q-input
+      v-model="newPrice.description"
+      dense
+      filled
+      class="q-px-sm"
+      label="Beschreibung"
+      clearable
+    />
+    <q-toggle v-model="newPrice.public" dense class="q-px-sm" label="Öffentlich" />
+  </div>
+  <div class="row justify-between q-pa-sm">
+    <q-btn v-close-popup label="Abbrechen" @click="cancelAddPrice" />
+    <q-btn v-close-popup label="Speichern" color="primary" @click="addPrice(row)" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  name: 'NewPrice',
+  emits: {
+    save: (val: FG.DrinkPrice) => val,
+  },
+  setup(_, { emit }) {
+    const emptyPrice: FG.DrinkPrice = {
+      id: -1,
+      price: 0,
+      description: '',
+      public: true,
+    };
+    const newPrice = ref(emptyPrice);
+    function addPrice() {
+      emit('save', newPrice.value);
+      cancelAddPrice();
+    }
+    function cancelAddPrice() {
+      setTimeout(() => {
+        newPrice.value = emptyPrice;
+      }, 200);
+    }
+    return { newPrice, addPrice, cancelAddPrice };
+  },
+});
+</script>
+
+<style scoped></style>
diff --git a/src/components/DrinkModify.vue b/src/components/DrinkModify.vue
new file mode 100644
index 0000000..ef7565d
--- /dev/null
+++ b/src/components/DrinkModify.vue
@@ -0,0 +1,353 @@
+<template>
+  <q-card>
+    <q-card-section>
+      <div class="text-h6">Getränk Bearbeiten</div>
+    </q-card-section>
+    <q-card-section>
+      <div class="full-width row">
+        <q-input
+          v-model="edit_drink.name"
+          class="col-xs-12 col-sm-6 q-pa-sm"
+          filled
+          label="Name"
+          dense
+        />
+        <q-select
+          v-model="edit_drink.type"
+          class="col-xs-12 col-sm-6 q-pa-sm"
+          filled
+          label="Kategorie"
+          dense
+          :options="types"
+          option-label="name"
+        />
+      </div>
+    </q-card-section>
+    <q-card-section>
+      <q-img :src="image" style="max-height: 256px" fit="contain" />
+      <div class="full-width row">
+        <div class="col-10 q-pa-sm">
+          <q-file
+            v-model="drinkPic"
+            filled
+            clearable
+            dense
+            @update:model-value="imagePreview"
+            @clear="imgsrc = undefined"
+          >
+            <template #prepend>
+              <q-icon name="mdi-image" />
+            </template>
+          </q-file>
+        </div>
+        <div class="col-2 q-pa-sm text-right">
+          <q-btn round icon="mdi-delete" color="negative" size="sm" @click="delete_pic">
+            <q-tooltip> Bild entfernen </q-tooltip>
+          </q-btn>
+        </div>
+      </div>
+    </q-card-section>
+    <q-card-section>
+      <q-select
+        v-model="edit_drink.tags"
+        multiple
+        :options="tags"
+        label="Tags"
+        option-label="name"
+        filled
+        dense
+      >
+        <template #selected-item="item">
+          <q-chip
+            removable
+            :tabindex="item.tabindex"
+            :style="`background-color: ${item.opt.color}`"
+            @remove="item.removeAtIndex(item.index)"
+          >
+            {{ item.opt.name }}
+          </q-chip>
+        </template>
+        <template #option="item">
+          <q-item v-bind="item.itemProps" v-on="item.itemEvents">
+            <q-chip :style="`background-color: ${item.opt.color}`">
+              <q-avatar v-if="item.selected" icon="mdi-check" color="positive" text-color="white" />
+              {{ item.opt.name }}
+            </q-chip>
+          </q-item>
+        </template>
+      </q-select>
+    </q-card-section>
+    <q-card-section>
+      <div class="fit row">
+        <q-input
+          v-model="edit_drink.article_id"
+          class="col-xs-12 col-sm-6 q-pa-sm"
+          filled
+          label="Artikelnummer"
+          dense
+        />
+        <q-input
+          v-model="edit_drink.volume"
+          class="col-xs-12 col-sm-6 q-pa-sm"
+          filled
+          label="Inhalt"
+          dense
+          suffix="L"
+        />
+        <q-input
+          v-model="edit_drink.package_size"
+          class="col-xs-12 col-sm-6 q-pa-sm"
+          filled
+          label="Gebindegröße"
+          dense
+        />
+        <q-input
+          v-model="edit_drink.cost_per_package"
+          class="col-xs-12 col-sm-6 q-pa-sm"
+          filled
+          label="Preis Gebinde"
+          suffix="€"
+          dense
+        />
+        <q-input
+          v-model="cost_per_volume"
+          class="col-xs-12 col-sm-6 q-pa-sm q-pb-lg"
+          :outlined="auto_cost_per_volume || hasIngredients"
+          :filled="!auto_cost_per_volume && !hasIngredients"
+          :readonly="auto_cost_per_volume || hasIngredients"
+          label="Preis pro L"
+          hint="Inkl. 19% Mehrwertsteuer"
+          suffix="€"
+          dense
+        />
+      </div>
+    </q-card-section>
+    <q-card-section :key="key">
+      <drink-price-volumes
+        v-model="edit_volumes"
+        :cost-per-volume="cost_per_volume"
+        :editable="hasPermission(PERMISSIONS.EDIT_VOLUME)"
+        @update="updateVolume"
+        @delete-volume="deleteVolume"
+        @delete-price="deletePrice"
+        @delete-ingredient="deleteIngredient"
+      />
+    </q-card-section>
+    <q-card-section>
+      <build-manual :steps="edit_drink.receipt" @deleteStep="deleteStep" @addStep="addStep" />
+    </q-card-section>
+    <q-card-actions class="justify-around">
+      <q-btn label="Abbrechen" @click="cancel" />
+      <q-btn v-if="can_delete" label="Löschen" color="negative" @click="delete_drink" />
+      <q-btn label="Speichern" color="primary" @click="save" />
+    </q-card-actions>
+  </q-card>
+</template>
+<script lang="ts">
+import { clone, calc_min_prices, DeleteObjects, calc_cost_per_volume } from '../utils/utils';
+import { defineComponent, PropType, ref, onBeforeMount, computed } from 'vue';
+import DrinkPriceVolumes from './CalculationTable/DrinkPriceVolumes.vue';
+import BuildManual from '../components/CalculationTable/BuildManual.vue';
+import { Drink, DrinkPriceVolume, usePricelistStore } from '../store';
+import { api, hasPermission } from '@flaschengeist/api';
+import { PERMISSIONS } from '../permissions';
+
+export default defineComponent({
+  name: 'DrinkModify',
+  components: { BuildManual, DrinkPriceVolumes },
+  props: {
+    drink: {
+      type: Object as PropType<Drink>,
+      required: true,
+    },
+  },
+  emits: {
+    save: (
+      drink: Drink,
+      toDeleteObjects: DeleteObjects,
+      drinkPic: File | undefined,
+      deletePic: boolean
+    ) => (drink && toDeleteObjects) || drinkPic || deletePic,
+    delete: () => true,
+    cancel: () => true,
+  },
+  setup(props, { emit }) {
+    onBeforeMount(() => {
+      //edit_drink.value = <Drink>JSON.parse(JSON.stringify(props.drink));
+      edit_drink.value = clone(props.drink);
+      edit_volumes.value = clone(props.drink.volumes);
+    });
+
+    const key = ref(0);
+
+    const store = usePricelistStore();
+
+    const toDeleteObjects = ref<DeleteObjects>({
+      prices: [],
+      volumes: [],
+      ingredients: [],
+    });
+
+    const edit_drink = ref<Drink>();
+    const edit_volumes = ref<Array<DrinkPriceVolume>>([]);
+    function save() {
+      (<Drink>edit_drink.value).volumes = edit_volumes.value;
+      emit('save', <Drink>edit_drink.value, toDeleteObjects.value, drinkPic.value, deletePic.value);
+    }
+
+    function cancel() {
+      emit('cancel');
+    }
+    function updateVolume(index: number) {
+      if (index > -1 && edit_volumes.value) {
+        edit_volumes.value[index].min_prices = calc_min_prices(
+          edit_volumes.value[index],
+          //edit_drink.value.cost_per_volume,
+          cost_per_volume.value,
+          store.min_prices
+        );
+      }
+    }
+
+    function updateVolumes() {
+      setTimeout(() => {
+        edit_volumes.value?.forEach((_, index) => {
+          updateVolume(index);
+        });
+        key.value++;
+      }, 50);
+    }
+
+    function deletePrice(price: FG.DrinkPrice) {
+      toDeleteObjects.value.prices.push(price);
+    }
+
+    function deleteVolume(volume: DrinkPriceVolume) {
+      toDeleteObjects.value.volumes.push(volume);
+    }
+
+    function deleteIngredient(ingredient: FG.Ingredient) {
+      toDeleteObjects.value.ingredients.push(ingredient);
+    }
+
+    function addStep(event: string) {
+      edit_drink.value?.receipt?.push(event);
+    }
+
+    function deleteStep(event: number) {
+      edit_drink.value?.receipt?.splice(event, 1);
+    }
+
+    const drinkPic = ref();
+    const imgsrc = ref();
+
+    const deletePic = ref(false);
+
+    function delete_pic() {
+      deletePic.value = true;
+      imgsrc.value = undefined;
+      drinkPic.value = undefined;
+      if (edit_drink.value) {
+        edit_drink.value.uuid = '';
+      }
+    }
+
+    function imagePreview() {
+      if (drinkPic.value && drinkPic.value instanceof File) {
+        let reader = new FileReader();
+
+        reader.onload = (e) => {
+          imgsrc.value = e.target?.result;
+        };
+
+        reader.readAsDataURL(drinkPic.value);
+      }
+    }
+
+    const image = computed(() => {
+      if (deletePic.value) {
+        return 'no-image.svg';
+      }
+      if (imgsrc.value) {
+        return <string>imgsrc.value;
+      }
+      if (edit_drink.value?.uuid) {
+        return `${api.defaults.baseURL||''}/pricelist/picture/${edit_drink.value.uuid}?size=256`;
+      }
+      return 'no-image.svg';
+    });
+
+    const can_delete = computed(() => {
+      if (edit_drink.value) {
+        if (edit_drink.value.id < 0) {
+          return false;
+        }
+        const _edit_drink = edit_drink.value;
+        const test = _edit_drink.volumes ? _edit_drink.volumes.length === 0 : true;
+        console.log(test);
+        return test;
+      }
+      return false;
+    });
+
+    function delete_drink() {
+      emit('delete');
+    }
+
+    const auto_cost_per_volume = computed(
+      () =>
+        !!(
+          edit_drink.value?.cost_per_package &&
+          edit_drink.value?.package_size &&
+          edit_drink.value?.volume
+        )
+    );
+
+    const cost_per_volume = computed({
+      get: () => {
+        let retVal: number;
+        if (auto_cost_per_volume.value) {
+          retVal = <number>calc_cost_per_volume(<Drink>edit_drink.value);
+        } else {
+          retVal = <number>(<Drink>edit_drink.value).cost_per_volume;
+        }
+        updateVolumes();
+        return retVal;
+      },
+      set: (val: number) => ((<Drink>edit_drink.value).cost_per_volume = val),
+    });
+
+    const hasIngredients = computed(() =>
+      edit_volumes.value?.some((a) => a.ingredients.length > 0)
+    );
+
+    return {
+      edit_drink,
+      save,
+      cancel,
+      updateVolume,
+      deletePrice,
+      deleteIngredient,
+      deleteVolume,
+      addStep,
+      deleteStep,
+      tags: computed(() => store.tags),
+      image,
+      imgsrc,
+      drinkPic,
+      imagePreview,
+      delete_pic,
+      types: computed(() => store.drinkTypes),
+      can_delete,
+      delete_drink,
+      auto_cost_per_volume,
+      cost_per_volume,
+      edit_volumes,
+      key,
+      hasIngredients,
+      hasPermission,
+      PERMISSIONS,
+    };
+  },
+});
+</script>
diff --git a/src/components/DrinkTypes.vue b/src/components/DrinkTypes.vue
new file mode 100644
index 0000000..517e4c6
--- /dev/null
+++ b/src/components/DrinkTypes.vue
@@ -0,0 +1,113 @@
+<template>
+  <q-table
+    title="Getränkearten"
+    :rows="rows"
+    :row-key="(row) => row.id"
+    :columns="columns"
+    style="height: 100%"
+    :pagination="pagination"
+  >
+    <template #top-right>
+      <div class="full-width row q-gutter-sm">
+        <q-input v-model="newDrinkType" dense placeholder="Neue Getränkeart" filled />
+        <q-btn round color="primary" icon="mdi-plus" @click="addType">
+          <q-tooltip> Getränkeart hinzufügen </q-tooltip>
+        </q-btn>
+      </div>
+    </template>
+    <template #body="props">
+      <q-tr :props="props">
+        <q-td key="drinkTypeName" :props="props">
+          {{ props.row.name }}
+          <q-popup-edit
+            v-model="props.row.name"
+            buttons
+            label-set="Speichern"
+            label-cancel="Abbrechen"
+            @save="saveChanges(props.row)"
+          >
+            <template #default="scope">
+              <q-input v-model="scope.value" dense label="name" filled />
+            </template>
+          </q-popup-edit>
+        </q-td>
+        <q-td key="actions" :props="props">
+          <q-btn
+            round
+            icon="mdi-delete"
+            color="negative"
+            size="sm"
+            @click="deleteType(props.row.id)"
+          />
+        </q-td>
+      </q-tr>
+    </template>
+  </q-table>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onBeforeMount, ref } from 'vue';
+import { usePricelistStore } from '../store';
+
+export default defineComponent({
+  name: 'DrinkTypes',
+  setup() {
+    const store = usePricelistStore();
+    const newDrinkType = ref('');
+
+    onBeforeMount(() => {
+      void store.getDrinkTypes(true);
+    });
+    const rows = computed(() => store.drinkTypes);
+    const columns = [
+      {
+        name: 'drinkTypeName',
+        label: 'Getränkeart',
+        field: 'name',
+        align: 'left',
+        sortable: true,
+      },
+      {
+        name: 'actions',
+        label: 'Aktionen',
+        field: 'actions',
+        align: 'right',
+      },
+    ];
+
+    async function addType() {
+      await store.addDrinkType(newDrinkType.value);
+      newDrinkType.value = '';
+    }
+
+    function saveChanges(drinkType: FG.DrinkType) {
+      setTimeout(() => {
+        const _drinkType = store.drinkTypes.find((a) => a.id === drinkType.id);
+        if (_drinkType) {
+          void store.changeDrinkTypeName(drinkType);
+        }
+      }, 50);
+    }
+
+    function deleteType(id: number) {
+      void store.removeDrinkType(id);
+    }
+    const pagination = ref({
+      sortBy: 'name',
+      rowsPerPage: 10,
+    });
+
+    return {
+      columns,
+      rows,
+      addType,
+      newDrinkType,
+      deleteType,
+      saveChanges,
+      pagination,
+    };
+  },
+});
+</script>
+
+<style scoped></style>
diff --git a/src/components/ExtraIngredients.vue b/src/components/ExtraIngredients.vue
new file mode 100644
index 0000000..096d5ea
--- /dev/null
+++ b/src/components/ExtraIngredients.vue
@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <q-page padding>
+      <q-table
+        title="Getränkearten"
+        :rows="rows"
+        :row-key="(row) => row.id"
+        :columns="columns"
+        :pagination="pagination"
+      >
+        <template #top-right>
+          <div class="full-width row q-gutter-sm">
+            <q-input
+              v-model="newExtraIngredient.name"
+              dense
+              placeholder="Neue Zutatenbezeichnung"
+              label="Neue Zutatenbezeichnung"
+              filled
+            />
+            <q-input
+              v-model.number="newExtraIngredient.price"
+              dense
+              placeholder="Preis"
+              label="Preis"
+              filled
+              type="number"
+              min="0"
+              step="0.1"
+              suffix="€"
+            />
+            <q-btn color="primary" icon="mdi-plus" round @click="addExtraIngredient">
+              <q-tooltip> Zutat hinzufügen </q-tooltip>
+            </q-btn>
+          </div>
+        </template>
+        <template #body="props">
+          <q-tr :props="props">
+            <q-td key="name" :props="props" align="left">
+              {{ props.row.name }}
+              <q-popup-edit
+                v-model="props.row.name"
+                buttons
+                label-set="Speichern"
+                label-cancel="Abbrechen"
+                @save="saveChanges(props.row)"
+              >
+                <template #default="scope">
+                  <q-input v-model="scope.value" dense label="name" filled />
+                </template>
+              </q-popup-edit>
+            </q-td>
+            <q-td key="price" :props="props" align="right">
+              {{ props.row.price.toFixed(2) }}€
+            </q-td>
+            <q-td key="actions" :props="props" align="right" auto-width>
+              <q-btn
+                round
+                icon="mdi-delete"
+                color="negative"
+                size="sm"
+                @click="deleteType(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </q-table>
+    </q-page>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, ComputedRef, defineComponent, ref } from 'vue';
+import { usePricelistStore } from '../store';
+
+export default defineComponent({
+  name: 'DrinkTypes',
+  setup() {
+    const store = usePricelistStore();
+    const emptyExtraIngredient: FG.ExtraIngredient = {
+      name: '',
+      price: 0,
+      id: -1,
+    };
+    const newExtraIngredient = ref<FG.ExtraIngredient>(emptyExtraIngredient);
+
+    const rows = computed(() => store.extraIngredients);
+    const columns = [
+      {
+        name: 'name',
+        label: 'Bezeichnung',
+        field: 'name',
+        align: 'left',
+        sortable: true,
+      },
+      {
+        name: 'price',
+        label: 'Preis',
+        field: 'price',
+        sortable: true,
+        format: (val: number) => `${val.toFixed(2)}€`,
+        align: 'right',
+      },
+      {
+        name: 'actions',
+        label: 'Aktionen',
+        field: 'actions',
+        align: 'right',
+      },
+    ];
+
+    async function addExtraIngredient() {
+      await store.setExtraIngredient((<ComputedRef>newExtraIngredient).value);
+      newExtraIngredient.value = Object.assign({}, emptyExtraIngredient);
+      discardChanges();
+    }
+
+    function saveChanges(ingredient: FG.ExtraIngredient) {
+      setTimeout(() => {
+        const _ingredient = store.extraIngredients.find((a) => a.id === ingredient.id);
+        if (_ingredient) {
+          void store.updateExtraIngredient(_ingredient);
+        }
+      }, 50);
+    }
+
+    function discardChanges() {
+      newExtraIngredient.value.name = '';
+      newExtraIngredient.value.price = 0;
+    }
+
+    function deleteType(extraIngredient: FG.ExtraIngredient) {
+      void store.deleteExtraIngredient(extraIngredient);
+    }
+
+    const pagination = ref({
+      sortBy: 'name',
+      rowsPerPage: 10,
+    });
+
+    return {
+      columns,
+      rows,
+      addExtraIngredient,
+      newExtraIngredient,
+      deleteType,
+      discardChanges,
+      saveChanges,
+      pagination,
+    };
+  },
+});
+</script>
+
+<style scoped></style>
diff --git a/src/components/MinPriceSetting.vue b/src/components/MinPriceSetting.vue
new file mode 100644
index 0000000..f736bfa
--- /dev/null
+++ b/src/components/MinPriceSetting.vue
@@ -0,0 +1,56 @@
+<template>
+  <q-list>
+    <div v-for="(min_price, index) in min_prices" :key="index">
+      <q-item>
+        <q-item-section>{{ min_price }}%</q-item-section>
+        <q-btn
+          round
+          icon="mdi-delete"
+          size="sm"
+          color="negative"
+          @click="delete_min_price(min_price)"
+        />
+      </q-item>
+      <q-separator />
+    </div>
+  </q-list>
+  <q-input v-model.number="new_min_price" class="q-pa-sm" type="number" suffix="%" filled dense />
+  <q-btn class="full-width" label="speichern" @click="save_min_prices"></q-btn>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue';
+import { usePricelistStore } from '../store';
+
+export default defineComponent({
+  name: 'MinPriceSetting',
+  setup() {
+    const store = usePricelistStore();
+    const min_prices = computed(() => store.min_prices);
+    const new_min_price = ref<number>();
+    function save_min_prices() {
+      const index = min_prices.value.findIndex((a) => a === new_min_price.value);
+      if (index < 0) {
+        min_prices.value.push(<number>new_min_price.value);
+        void store.set_min_prices();
+        new_min_price.value = undefined;
+      }
+    }
+    function delete_min_price(min_price: number) {
+      const index = min_prices.value.findIndex((a) => a === min_price);
+      if (index > -1) {
+        min_prices.value.splice(index, 1);
+        void store.set_min_prices();
+      }
+    }
+    return {
+      min_prices,
+      new_min_price,
+      save_min_prices,
+      delete_min_price,
+    };
+  },
+});
+</script>
+
+<style scoped></style>
diff --git a/src/components/Pricelist.vue b/src/components/Pricelist.vue
new file mode 100644
index 0000000..3660b58
--- /dev/null
+++ b/src/components/Pricelist.vue
@@ -0,0 +1,326 @@
+<template>
+  <q-table
+    title="Preisliste"
+    :columns="columns"
+    :rows="drinks"
+    :visible-columns="visibleColumns"
+    :filter="search"
+    :filter-method="filter"
+    dense
+    :pagination="pagination"
+    :fullscreen="fullscreen"
+  >
+    <template #top-right>
+      <div class="row justify-end q-gutter-sm">
+        <search-input v-model="search" :keys="options" />
+        <q-select
+          v-model="visibleColumns"
+          multiple
+          filled
+          dense
+          options-dense
+          display-value="Sichtbarkeit"
+          emit-value
+          map-options
+          :options="options"
+          option-value="name"
+          options-cover
+        />
+        <q-btn round icon="mdi-backburger">
+          <q-tooltip anchor='top middle' self='bottom middle'> Reihenfolge ändern </q-tooltip>
+          <q-menu anchor="bottom middle" self="top middle">
+            <drag v-model="order" class="q-list" ghost-class="ghost" group="people" item-key="id">
+              <template #item="{ element }">
+                <q-item>
+                  <q-item-section>
+                    {{ element.label }}
+                  </q-item-section>
+                </q-item>
+              </template>
+            </drag>
+          </q-menu>
+        </q-btn>
+        <slot></slot>
+        <q-btn
+          round
+          :icon="fullscreen ? 'mdi-fullscreen-exit' : 'mdi-fullscreen'"
+          @click="fullscreen = !fullscreen"
+        />
+      </div>
+    </template>
+    <template #body-cell-tags="props">
+      <q-td :props="props">
+        <q-badge
+          v-for="tag in props.row.tags"
+          :key="`${props.row.id}-${tag.id}`"
+          class="text-caption"
+          rounded
+          :style="`background-color: ${tag.color}`"
+        >
+          {{ tag.name }}
+        </q-badge>
+      </q-td>
+    </template>
+    <template #body-cell-public="props">
+      <q-td :props="props">
+        <q-toggle
+          v-model="props.row.public"
+          disable
+          checked-icon="mdi-earth"
+          unchecked-icon="mdi-earth-off"
+        />
+      </q-td>
+    </template>
+  </q-table>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onBeforeMount, ref, ComponentPublicInstance } from 'vue';
+import SearchInput from '../components/SearchInput.vue';
+import { usePricelistStore, Order } from '../store';
+import { useMainStore } from '@flaschengeist/api';
+import { Search, filter } from '../utils/filter';
+import drag from 'vuedraggable';
+
+interface Row {
+  name: string;
+  label: string;
+  field: string;
+  sortable?: boolean;
+  filterable?: boolean;
+  format?: (val: never) => string;
+  align?: string;
+}
+
+export default defineComponent({
+  name: 'Pricelist',
+  components: { SearchInput, drag: <ComponentPublicInstance>drag },
+  props: {
+    public: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    const store = usePricelistStore();
+    const user = ref('');
+
+    onBeforeMount(() => {
+      if (!props.public) {
+        user.value = useMainStore().currentUser.userid;
+        void store.getPriceListColumnOrder(user.value);
+        void store.getDrinks();
+        void store.getPriceCalcColumn(user.value);
+      } else {
+        user.value = '';
+      }
+    });
+
+    const _order = ref<Array<Order>>([
+      {
+        name: 'name',
+        label: 'Name',
+      },
+      {
+        name: 'type',
+        label: 'Kategorie',
+      },
+      {
+        name: 'tags',
+        label: 'Tags',
+      },
+      {
+        name: 'volume',
+        label: 'Inhalt',
+      },
+      {
+        name: 'price',
+        label: 'Preis',
+      },
+      {
+        name: 'public',
+        label: 'Öffentlich',
+      },
+      {
+        name: 'description',
+        label: 'Beschreibung',
+      },
+    ]);
+
+    const order = computed<Array<Order>>({
+      get: () => {
+        if (props.public) {
+          return _order.value;
+        }
+        if (store.pricelist_columns_order.length === 0) {
+          return _order.value;
+        }
+        return store.pricelist_columns_order;
+      },
+      set: (val: Array<Order>) => {
+        if (!props.public) {
+          void store.updatePriceListColumnOrder(user.value, val);
+        } else {
+          _order.value = val;
+        }
+      },
+    });
+
+    const _columns: Array<Row> = [
+      {
+        name: 'name',
+        label: 'Name',
+        field: 'name',
+        sortable: true,
+        filterable: true,
+        align: 'left',
+      },
+      {
+        name: 'type',
+        label: 'Kategorie',
+        field: 'type',
+        sortable: true,
+        filterable: true,
+        format: (val: FG.DrinkType) => val.name,
+      },
+      {
+        name: 'tags',
+        label: 'Tags',
+        field: 'tags',
+        filterable: true,
+
+        format: (val: Array<FG.Tag>) => {
+          let retVal = '';
+          val.forEach((tag, index) => {
+            if (index >= val.length - 1 && index > 0) {
+              retVal += ', ';
+            }
+            retVal += tag.name;
+          });
+          return retVal;
+        },
+      },
+      {
+        name: 'volume',
+        label: 'Inhalt',
+        field: 'volume',
+        filterable: true,
+        sortable: true,
+        format: (val: number) => `${val.toFixed(3)}L`,
+      },
+      {
+        name: 'price',
+        label: 'Preis',
+        field: 'price',
+        sortable: true,
+        filterable: true,
+        format: (val: number) => `${val.toFixed(2)}€`,
+      },
+      {
+        name: 'public',
+        label: 'Öffentlich',
+        field: 'public',
+        format: (val: boolean) => (val ? 'Öffentlich' : 'nicht Öffentlich'),
+      },
+      {
+        name: 'description',
+        label: 'Beschreibung',
+        field: 'description',
+        filterable: true,
+      },
+    ];
+
+    const columns = computed(() => {
+      const retVal: Array<Row> = [];
+      if (order.value) {
+        order.value.forEach((col) => {
+          const _col = _columns.find((a) => a.name === col.name);
+          if (_col) {
+            retVal.push(_col);
+          }
+        });
+        retVal.forEach((element, index) => {
+          element.align = 'right';
+          if (index === 0) {
+            element.align = 'left';
+          }
+        });
+        return retVal;
+      }
+      return _columns;
+    });
+
+    const _options = computed(() => {
+      const retVal: Array<{ name: string; label: string; field: string }> = [];
+      columns.value.forEach((col) => {
+        if (props.public) {
+          if (col.name !== 'public') {
+            retVal.push(col);
+          }
+        } else {
+          retVal.push(col);
+        }
+      });
+      return retVal;
+    });
+
+    const _colums = computed<Array<string>>(() => {
+      const retVal: Array<string> = [];
+      columns.value.forEach((col) => {
+        if (props.public) {
+          if (col.name !== 'public') {
+            retVal.push(col.name);
+          }
+        } else {
+          retVal.push(col.name);
+        }
+      });
+      return retVal;
+    });
+
+    const _visibleColumns = ref(_colums.value);
+
+    const visibleColumns = computed({
+      get: () => (props.public ? _visibleColumns.value : store.pricecalc_columns),
+      set: (val) => {
+        if (!props.public) {
+          void store.updatePriceCalcColumn(user.value, val);
+        } else {
+          _visibleColumns.value = val;
+        }
+      },
+    });
+
+    const search = ref<Search>({
+      value: '',
+      key: '',
+      label: '',
+    });
+
+    const pagination = ref({
+      sortBy: 'name',
+      rowsPerPage: 10,
+    });
+
+    const fullscreen = ref(false);
+
+    return {
+      drinks: computed(() => store.pricelist),
+      columns,
+      order,
+      visibleColumns,
+      options: _options,
+      search,
+      filter,
+      pagination,
+      fullscreen,
+    };
+  },
+});
+</script>
+
+<style scoped lang="sass">
+.ghost
+  opacity: 0.5
+  background: $accent
+</style>
diff --git a/src/components/SearchInput.vue b/src/components/SearchInput.vue
new file mode 100644
index 0000000..c7d38a3
--- /dev/null
+++ b/src/components/SearchInput.vue
@@ -0,0 +1,90 @@
+<template>
+  <q-dialog v-model="alert">
+    <q-card>
+      <q-card-section>
+        <div class="text-h6">Suche</div>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">
+        <div>
+          Wenn du in die Suche etwas eingibst, wird in allen Spalten gesucht. Mit einem `@` Zeichen,
+          kann man die Suche eingrenzen auf eine Spalte. Zumbeispiel: `Tequilaparty@Tags`
+        </div>
+      </q-card-section>
+      <q-card-section>
+        <div>Mögliche Suchbegriffe nach dem @:</div>
+        <div class="fit row q-gutter-sm">
+          <div v-for="key in keys" :key="key.name">
+            {{ key.label }}
+          </div>
+        </div>
+      </q-card-section>
+
+      <q-card-actions align="right">
+        <q-btn v-close-popup flat label="OK" color="primary" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+  <q-input v-model="v_model" filled dense>
+    <template #append>
+      <q-icon name="mdi-magnify" />
+    </template>
+    <template #prepend>
+      <q-btn icon="mdi-help-circle" flat round @click="alert = true" />
+    </template>
+  </q-input>
+</template>
+<script lang="ts">
+import { defineComponent, computed, PropType, ref } from 'vue';
+import { Search, Col } from '../utils/filter';
+
+export default defineComponent({
+  name: 'SearchInput',
+  props: {
+    modelValue: {
+      type: Object as PropType<Search>,
+      default: () => ({ value: '', key: undefined, label: '' }),
+    },
+    keys: {
+      type: Object as PropType<Array<Col>>,
+      required: true,
+    },
+  },
+  emits: {
+    'update:modelValue': (val: {
+      value: string;
+      key: string | undefined;
+      label: string | undefined;
+    }) => val,
+  },
+  setup(props, { emit }) {
+    const v_model = computed<string>({
+      get: () => {
+        if (!props.modelValue.label || props.modelValue.label === '') {
+          return `${props.modelValue.value}`;
+        }
+        return `${props.modelValue.value}@${props.modelValue.label}`;
+      },
+      set: (val: string) => {
+        const split = val.toLowerCase().split('@');
+        if (split.length < 2) {
+          emit('update:modelValue', { value: split[0], label: undefined, key: undefined });
+        } else {
+          props.keys.find((key) => {
+            if (key.label.toLowerCase() === split[1]) {
+              console.log(key.name);
+              emit('update:modelValue', { value: split[0], label: split[1], key: key.name });
+              return true;
+            }
+            return false;
+          });
+        }
+      },
+    });
+
+    const alert = ref(false);
+    return { v_model, alert };
+  },
+});
+</script>
+a
diff --git a/src/components/Tags.vue b/src/components/Tags.vue
new file mode 100644
index 0000000..a690550
--- /dev/null
+++ b/src/components/Tags.vue
@@ -0,0 +1,181 @@
+<template>
+  <div>
+    <q-page padding>
+      <q-table
+        title="Tags"
+        :rows="rows"
+        :row-key="(row) => row.id"
+        :columns="columns"
+        :pagination="pagination"
+      >
+        <template #top-right>
+          <q-btn color="primary" icon="mdi-plus" round>
+            <q-tooltip> Tag hinzufügen </q-tooltip>
+            <q-menu v-model="popup" anchor="center middle" self="center middle" persistent>
+              <q-input
+                v-model="newTag.name"
+                filled
+                dense
+                label="Name"
+                class="q-pa-sm"
+                :rule="[notExists]"
+              />
+              <q-color
+                :model-value="newTag.color"
+                flat
+                class="q-pa-sm"
+                @change="
+                  (val) => {
+                    newTag.color = val;
+                  }
+                "
+              />
+              <div class="full-width row q-gutter-sm justify-around q-py-sm">
+                <q-btn v-close-popup flat label="Abbrechen" />
+                <q-btn flat label="Speichern" color="primary" @click="save" />
+              </div>
+            </q-menu>
+          </q-btn>
+        </template>
+        <template #header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              {{ col.label }}
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
+        <template #body="props">
+          <q-tr :props="props">
+            <q-td key="name" :props="props">
+              {{ props.row.name }}
+              <q-popup-edit
+                v-model="props.row.name"
+                buttons
+                label-cancel="Abbrechen"
+                label-set="Speichern"
+                @update:modelValue="updateTag(props.row)"
+              >
+                <template #default="scope">
+                  <q-input v-model="scope.value" :rules="[notExists]" dense filled />
+                </template>
+              </q-popup-edit>
+            </q-td>
+            <q-td key="color" :props="props">
+              <div class="full-width row q-gutter-sm justify-end items-center">
+                <div>
+                  {{ props.row.color }}
+                </div>
+                <div class="color-box" :style="`background-color: ${props.row.color};`">&nbsp;</div>
+              </div>
+              <q-popup-edit
+                v-model="props.row.color"
+                buttons
+                label-cancel="Abbrechen"
+                label-set="Speichern"
+                @update:modelValue="updateTag(props.row)"
+              >
+                <template #default="slot">
+                  <div class="full-width row justify-center">
+                    <q-color
+                      :model-value="slot.value"
+                      class="full-width"
+                      flat
+                      @change="(val) => (slot.value = val)"
+                    />
+                  </div>
+                </template>
+              </q-popup-edit>
+            </q-td>
+            <q-td>
+              <q-btn
+                icon="mdi-delete"
+                color="negative"
+                round
+                size="sm"
+                @click="deleteTag(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </q-table>
+    </q-page>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onBeforeMount, computed } from 'vue';
+import { usePricelistStore } from '../store';
+
+export default defineComponent({
+  name: 'Tags',
+  setup() {
+    const store = usePricelistStore();
+    onBeforeMount(() => {
+      void store.getTags();
+    });
+    const columns = [
+      {
+        name: 'name',
+        label: 'Name',
+        field: 'name',
+        align: 'left',
+      },
+      {
+        name: 'color',
+        label: 'Farbe',
+        field: 'color',
+      },
+    ];
+    const rows = computed(() => store.tags);
+    const emptyTag = {
+      id: -1,
+      color: '#1976d2',
+      name: '',
+    };
+
+    async function save() {
+      await store.setTag(newTag.value);
+      popup.value = false;
+      newTag.value = emptyTag;
+    }
+
+    const newTag = ref(emptyTag);
+    const popup = ref(false);
+    function notExists(val: string) {
+      const index = store.tags.findIndex((a) => a.name === val);
+      if (index > -1) {
+        return 'Tag existiert bereits.';
+      }
+      return true;
+    }
+    const pagination = ref({
+      sortBy: 'name',
+      rowsPerPage: 10,
+    });
+    return {
+      columns,
+      rows,
+      newTag,
+      popup,
+      save,
+      updateTag: store.updateTag,
+      notExists,
+      deleteTag: store.deleteTag,
+      pagination,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.color-box {
+  min-width: 28px;
+  min-height: 28px;
+  max-width: 28px;
+  max-height: 28px;
+  border-width: 1px;
+  border-color: black;
+  border-radius: 5px;
+}
+</style>
diff --git a/src/pages/CocktailBuilder.vue b/src/pages/CocktailBuilder.vue
new file mode 100644
index 0000000..1b02dd0
--- /dev/null
+++ b/src/pages/CocktailBuilder.vue
@@ -0,0 +1,66 @@
+<template>
+  <q-card>
+    <q-card-section>
+      <div class="q-table__title">Cocktailbuilder</div>
+    </q-card-section>
+    <q-card-section>
+      <ingredients
+        v-model="volume.ingredients"
+        class="q-pa-sm"
+        editable
+        @update:modelValue="update"
+      />
+    </q-card-section>
+    <q-card-section>
+      <div class="q-table__title">Du solltest mindest sowiel verlangen oder bezahlen:</div>
+      <div class="full-width row q-gutter-sm justify-around">
+        <div v-for="min_price in volume.min_prices" :key="min_price.percentage">
+          <div>
+            <q-badge class="text-h6" color="primary"> {{ min_price.percentage }}% </q-badge>
+          </div>
+          <div>{{ min_price.price.toFixed(2) }}€</div>
+        </div>
+      </div>
+    </q-card-section>
+  </q-card>
+</template>
+
+<script lang="ts">
+import { defineComponent, onBeforeMount, ref } from 'vue';
+import Ingredients from '../components/CalculationTable/Ingredients.vue';
+import { DrinkPriceVolume, usePricelistStore } from '../store';
+import { calc_min_prices } from '../utils/utils';
+
+export default defineComponent({
+  name: 'CocktailBuilder',
+  components: { Ingredients },
+  setup() {
+    onBeforeMount(() => {
+      void store.get_min_prices().finally(() => {
+        volume.value.min_prices = calc_min_prices(volume.value, undefined, store.min_prices);
+      });
+      void store.getDrinks();
+      void store.getDrinkTypes();
+      void store.getExtraIngredients();
+    });
+    const store = usePricelistStore();
+
+    const emptyVolume: DrinkPriceVolume = {
+      id: -1,
+      _volume: 0,
+      min_prices: [],
+      prices: [],
+      ingredients: [],
+    };
+    const volume = ref(emptyVolume);
+
+    function update() {
+      volume.value.min_prices = calc_min_prices(volume.value, undefined, store.min_prices);
+    }
+
+    return { volume, update };
+  },
+});
+</script>
+
+<style scoped></style>
diff --git a/src/pages/InnerPricelist.vue b/src/pages/InnerPricelist.vue
new file mode 100644
index 0000000..9e23e80
--- /dev/null
+++ b/src/pages/InnerPricelist.vue
@@ -0,0 +1,39 @@
+<template>
+  <calculation-table v-if="!list" nodetails>
+    <q-btn icon="mdi-view-list" round @click="list = !list">
+      <q-tooltip> Zur Listenansicht wechseln </q-tooltip>
+    </q-btn>
+  </calculation-table>
+  <pricelist v-if="list">
+    <q-btn icon="mdi-cards-variant" round @click="list = !list">
+      <q-tooltip> Zur Kartenansicht wechseln </q-tooltip>
+    </q-btn>
+  </pricelist>
+</template>
+<script lang="ts">
+import { defineComponent, onBeforeMount, computed } from 'vue';
+import CalculationTable from '../components/CalculationTable.vue';
+import Pricelist from '../components/Pricelist.vue';
+import { useMainStore } from '@flaschengeist/api';
+import { usePricelistStore } from '../store';
+
+export default defineComponent({
+  name: 'InnerPricelist',
+  components: { Pricelist, CalculationTable },
+  setup() {
+    const store = usePricelistStore();
+    const mainStore = useMainStore();
+
+    onBeforeMount(() => {
+      void store.getDrinks();
+      void store.getPriceListView(mainStore.currentUser.userid);
+    });
+
+    const list = computed({
+      get: () => store.pricelist_view,
+      set: (val: boolean) => store.updatePriceListView(mainStore.currentUser.userid, val),
+    });
+    return { list };
+  },
+});
+</script>
diff --git a/src/pages/OuterPricelist.vue b/src/pages/OuterPricelist.vue
new file mode 100644
index 0000000..338f9ae
--- /dev/null
+++ b/src/pages/OuterPricelist.vue
@@ -0,0 +1,37 @@
+<template>
+  <calculation-table v-if="!list" public>
+    <q-btn icon="mdi-view-list" round @click="list = !list">
+      <q-tooltip> Zur Listenansicht wechseln </q-tooltip>
+    </q-btn>
+  </calculation-table>
+  <pricelist v-if="list" public>
+    <q-btn icon="mdi-cards-variant" round @click="list = !list">
+      <q-tooltip> Zur Kartenansicht wechseln </q-tooltip>
+    </q-btn>
+  </pricelist>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import CalculationTable from '../components/CalculationTable.vue';
+import Pricelist from '../components/Pricelist.vue';
+import { usePricelistStore } from '../store';
+import { onBeforeMount, ref } from 'vue';
+
+export default defineComponent({
+  name: 'OuterPricelist',
+  components: { Pricelist, CalculationTable },
+  setup() {
+    const store = usePricelistStore();
+
+    onBeforeMount(() => {
+      void store.getDrinks();
+    });
+
+    const list = ref(false);
+    return { list };
+  },
+});
+</script>
+
+<style scoped></style>
diff --git a/src/pages/Receipts.vue b/src/pages/Receipts.vue
new file mode 100644
index 0000000..1c94485
--- /dev/null
+++ b/src/pages/Receipts.vue
@@ -0,0 +1,176 @@
+<template>
+  <q-table
+    grid
+    title="Rezepte"
+    :rows="drinks"
+    row-key="id"
+    hide-header
+    :filter="search"
+    :filter-method="filter"
+    :columns="options"
+  >
+    <template #top-right>
+      <search-input v-model="search" :keys="search_keys" />
+    </template>
+    <template #item="props">
+      <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
+        <q-card>
+          <q-img
+            style="max-height: 256px"
+            loading="lazy"
+            :src="image(props.row.uuid)"
+            placeholder-src="no-image.svg"
+          >
+            <div class="absolute-bottom-right justify-end">
+              <div class="text-subtitle1 text-right">
+                {{ props.row.name }}
+              </div>
+              <div class="text-caption text-right">
+                {{ props.row.type.name }}
+              </div>
+            </div>
+          </q-img>
+          <q-card-section>
+            <q-badge
+              v-for="tag in props.row.tags"
+              :key="`${props.row.id}-${tag.id}`"
+              class="text-caption"
+              rounded
+              :style="`background-color: ${tag.color}`"
+            >
+              {{ tag.name }}
+            </q-badge>
+          </q-card-section>
+          <build-manual-volume :volumes="props.row.volumes" />
+          <q-card-section>
+            <div class="text-h6">Anleitung</div>
+            <build-manual :steps="props.row.receipt" :editable="false" />
+          </q-card-section>
+        </q-card>
+      </div>
+    </template>
+  </q-table>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onBeforeMount, ref } from 'vue';
+import BuildManual from 'src/plugins/pricelist/components/CalculationTable/BuildManual.vue';
+import BuildManualVolume from '../components/BuildManual/BuildManualVolume.vue';
+import SearchInput from '../components/SearchInput.vue';
+import { filter, Search } from '../utils/filter';
+import { usePricelistStore } from '../store';
+import { sort } from '../utils/sort';
+import { api } from '@flaschengeist/api';
+
+export default defineComponent({
+  name: 'Reciepts',
+  components: { BuildManual, BuildManualVolume, SearchInput },
+  setup() {
+    const store = usePricelistStore();
+    onBeforeMount(() => {
+      void store.getDrinks();
+    });
+    const drinks = computed(() =>
+      store.drinks.filter((drink) => {
+        return drink.volumes.some((volume) => volume.ingredients.length > 0);
+      })
+    );
+
+    const columns_drinks = [
+      {
+        name: 'picture',
+        label: 'Bild',
+        align: 'center',
+      },
+      {
+        name: 'name',
+        label: 'Name',
+        field: 'name',
+        align: 'center',
+        sortable: true,
+        filterable: true,
+      },
+      {
+        name: 'drink_type',
+        label: 'Kategorie',
+        field: 'type',
+        format: (val: FG.DrinkType) => `${val.name}`,
+        sortable: true,
+        sort: (a: FG.DrinkType, b: FG.DrinkType) => sort(a.name, b.name),
+        filterable: true,
+      },
+      {
+        name: 'tags',
+        label: 'Tag',
+        field: 'tags',
+        format: (val: Array<FG.Tag>) => {
+          let retVal = '';
+          val.forEach((tag, index) => {
+            if (index > 0) {
+              retVal += ', ';
+            }
+            retVal += tag.name;
+          });
+          return retVal;
+        },
+        filterable: true,
+      },
+      {
+        name: 'volumes',
+        label: 'Preise',
+        field: 'volumes',
+        align: 'center',
+      },
+    ];
+    const columns_volumes = [
+      {
+        name: 'volume',
+        label: 'Inhalt',
+        field: 'volume',
+        align: 'left',
+      },
+      {
+        name: 'prices',
+        label: 'Preise',
+        field: 'prices',
+      },
+    ];
+    const columns_prices = [
+      {
+        name: 'price',
+        label: 'Preis',
+        field: 'price',
+      },
+      {
+        name: 'description',
+        label: 'Beschreibung',
+        field: 'description',
+      },
+      {
+        name: 'public',
+        label: 'Öffentlich',
+        field: 'public',
+      },
+    ];
+
+    const search = ref<Search>({ value: '', key: '', label: '' });
+    const search_keys = computed(() => columns_drinks.filter((column) => column.filterable));
+    function image(uuid: string | undefined) {
+      if (uuid) {
+        return `${api.defaults.baseURL||''}/pricelist/picture/${uuid}?size=256`;
+      }
+      return 'no-image.svg';
+    }
+    return {
+      drinks,
+      options: [...columns_drinks, ...columns_volumes, ...columns_prices],
+      search,
+      filter,
+      search_keys,
+      image,
+    };
+  },
+});
+</script>
+
+<style scoped></style>
diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue
new file mode 100644
index 0000000..6f51be7
--- /dev/null
+++ b/src/pages/Settings.vue
@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <q-tabs v-if="$q.screen.gt.sm" v-model="tab">
+      <q-tab
+        v-for="(tabindex, index) in tabs"
+        :key="'tab' + index"
+        :name="tabindex.name"
+        :label="tabindex.label"
+      />
+    </q-tabs>
+    <div v-else class="fit row justify-end">
+      <q-btn flat round icon="mdi-menu" @click="showDrawer = !showDrawer"></q-btn>
+    </div>
+    <q-drawer v-model="showDrawer" side="right" behavior="mobile" @click="showDrawer = !showDrawer">
+      <q-list v-model="tab">
+        <q-item
+          v-for="(tabindex, index) in tabs"
+          :key="'tab' + index"
+          :active="tab == tabindex.name"
+          clickable
+          @click="tab = tabindex.name"
+        >
+          <q-item-label>{{ tabindex.label }}</q-item-label>
+        </q-item>
+      </q-list>
+    </q-drawer>
+    <q-page paddding class="fit row justify-center content-start items-start q-gutter-sm">
+      <q-tab-panels
+        v-model="tab"
+        style="background-color: transparent"
+        animated
+        class="q-ma-none q-pa-none fit row justify-center content-start items-start"
+      >
+        <q-tab-panel name="pricelist">
+          <calculation-table editable />
+        </q-tab-panel>
+        <q-tab-panel name="extra_ingredients">
+          <extra-ingredients />
+        </q-tab-panel>
+        <q-tab-panel name="drink_types">
+          <drink-types />
+        </q-tab-panel>
+        <q-tab-panel name="tags">
+          <tags />
+        </q-tab-panel>
+      </q-tab-panels>
+    </q-page>
+  </div>
+</template>
+
+<script lang="ts">
+import CalculationTable from '../components/CalculationTable.vue';
+import ExtraIngredients from '../components/ExtraIngredients.vue';
+import { computed, defineComponent, onBeforeMount, ref } from 'vue';
+import DrinkTypes from '../components/DrinkTypes.vue';
+import { hasPermissions } from '@flaschengeist/api';
+import { usePricelistStore } from '../store';
+import Tags from '../components/Tags.vue';
+import { Screen } from 'quasar';
+
+export default defineComponent({
+  name: 'Settings',
+  components: { ExtraIngredients, DrinkTypes, Tags, CalculationTable },
+  setup() {
+    interface Tab {
+      name: string;
+      label: string;
+      permissions: Array<string>;
+    }
+    const store = usePricelistStore();
+    onBeforeMount(() => {
+      store
+        .getExtraIngredients()
+        .then(() => {
+          console.log(store.extraIngredients);
+        })
+        .catch((err) => console.log(err));
+      void store.getTags();
+      void store.getDrinkTypes();
+      void store.getDrinks();
+      void store.get_min_prices();
+    });
+
+    const drawer = ref<boolean>(false);
+
+    const showDrawer = computed({
+      get: () => {
+        return !Screen.gt.sm && drawer.value;
+      },
+      set: (val: boolean) => {
+        drawer.value = val;
+      },
+    });
+
+    const _tabs: Tab[] = [
+      { name: 'pricelist', label: 'Getränke', permissions: ['drink_edit'] },
+      {
+        name: 'extra_ingredients',
+        label: 'Zutaten',
+        permissions: ['edit_ingredients', 'delete_ingredients'],
+      },
+      {
+        name: 'drink_types',
+        label: 'Getränketypen',
+        permissions: ['drink_type_edit', 'drink_type_delete'],
+      },
+      {
+        name: 'tags',
+        label: 'Tags',
+        permissions: ['drink_tag_edit', 'drink_tag_create', 'drink_tag_delete'],
+      },
+    ];
+
+    const tabs = computed(() => {
+      const retVal: Tab[] = [];
+      _tabs.forEach((tab) => {
+        if (tab.permissions.length > 0) {
+          if (hasPermissions(tab.permissions)) {
+            retVal.push(tab);
+          }
+        }
+        if (tab.permissions.length === 0) {
+          retVal.push(tab);
+        }
+      });
+      return retVal;
+    });
+
+    const tab = ref<string>('pricelist');
+
+    return { tabs, tab, showDrawer };
+  },
+});
+</script>
+
+<style scoped></style>
diff --git a/src/permissions.ts b/src/permissions.ts
new file mode 100644
index 0000000..a378a74
--- /dev/null
+++ b/src/permissions.ts
@@ -0,0 +1,33 @@
+export const PERMISSIONS = {
+  CREATE: 'drink_create',
+
+  EDIT: 'drink_edit',
+
+  DELETE: 'drink_delete',
+
+  CREATE_TAG: 'drink_tag_create',
+
+  EDIT_PRICE: 'edit_price',
+  DELETE_PRICE: 'delete_price',
+
+  EDIT_VOLUME: 'edit_volume',
+  DELETE_VOLUME: 'delete_volume',
+
+  EDIT_INGREDIENTS_DRINK: 'edit_ingredients_drink',
+  DELETE_INGREDIENTS_DRINK: 'delete_ingredients_drink',
+
+  EDIT_INGREDIENTS: 'edit_ingredients',
+  DELETE_INGREDIENTS: 'delete_ingredients',
+
+  EDIT_TAG: 'drink_tag_edit',
+
+  DELETE_TAG: 'drink_tag_delete',
+
+  CREATE_TYPE: 'drink_type_create',
+
+  EDIT_TYPE: 'drink_type_edit',
+
+  DELETE_TYPE: 'drink_type_delete',
+
+  EDIT_MIN_PRICES: 'edit_min_prices',
+};
diff --git a/src/plugin.ts b/src/plugin.ts
new file mode 100644
index 0000000..1a65597
--- /dev/null
+++ b/src/plugin.ts
@@ -0,0 +1,15 @@
+import { innerRoutes, outerRoutes } from './routes';
+import { FG_Plugin } from '@flaschengeist/typings';
+
+const plugin: FG_Plugin.Plugin = {
+  id: 'pricelist',
+  name: 'Pricelist',
+  innerRoutes,
+  outerRoutes,
+  requiredModules: [],
+  requiredBackendModules: ['pricelist'],
+  version: '0.0.1',
+  widgets: [],
+};
+
+export default plugin;
diff --git a/src/routes/index.ts b/src/routes/index.ts
new file mode 100644
index 0000000..cde6fdd
--- /dev/null
+++ b/src/routes/index.ts
@@ -0,0 +1,73 @@
+import { FG_Plugin } from '@flaschengeist/types';
+
+export const innerRoutes: FG_Plugin.MenuRoute[] = [
+  {
+    title: 'Getränke',
+    icon: 'mdi-glass-mug-variant',
+    route: {
+      path: 'drinks',
+      name: 'drinks',
+      redirect: { name: 'drinks-pricelist' },
+    },
+    permissions: ['user'],
+    children: [
+      {
+        title: 'Preisliste',
+        icon: 'mdi-cash-100',
+        shortcut: true,
+        permissions: ['user'],
+        route: {
+          path: 'pricelist',
+          name: 'drinks-pricelist',
+          component: () => import('../pages/InnerPricelist.vue'),
+        },
+      },
+      {
+        title: 'Rezepte',
+        shortcut: false,
+        icon: 'mdi-receipt',
+        permissions: ['user'],
+        route: {
+          path: 'reciepts',
+          name: 'reciepts',
+          component: () => import('../pages/Receipts.vue'),
+        },
+      },
+      {
+        title: 'Cocktailbuilder',
+        shortcut: false,
+        icon: 'mdi-glass-cocktail',
+        permissions: ['user'],
+        route: {
+          path: 'cocktail-builder',
+          name: 'cocktail-builder',
+          component: () => import('../pages/CocktailBuilder.vue'),
+        },
+      },
+      {
+        title: 'Einstellungen',
+        icon: 'mdi-coffee-to-go',
+        shortcut: false,
+        permissions: ['drink_edit', 'drink_tag_edit'],
+        route: {
+          path: 'settings',
+          name: 'drinks-settings',
+          component: () => import('../pages/Settings.vue'),
+        },
+      },
+    ],
+  },
+];
+
+export const outerRoutes: FG_Plugin.MenuRoute[] = [
+  {
+    title: 'Preisliste',
+    icon: 'mdi-glass-mug-variant',
+    shortcut: true,
+    route: {
+      path: 'pricelist',
+      name: 'outter-pricelist',
+      component: () => import('../pages/OuterPricelist.vue'),
+    },
+  },
+];
diff --git a/src/shims.d.ts b/src/shims.d.ts
new file mode 100644
index 0000000..e051226
--- /dev/null
+++ b/src/shims.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { ComponentOptions } from 'vue'
+  const component: ComponentOptions
+  export default component
+}
\ No newline at end of file
diff --git a/src/store.ts b/src/store.ts
new file mode 100644
index 0000000..4707cdb
--- /dev/null
+++ b/src/store.ts
@@ -0,0 +1,313 @@
+import { api } from '@flaschengeist/api';
+import { defineStore } from 'pinia';
+import {
+  calc_volume,
+  calc_cost_per_volume,
+  calc_all_min_prices,
+} from './utils/utils';
+
+interface DrinkPriceVolume extends Omit<FG.DrinkPriceVolume, 'volume'> {
+  _volume: number;
+  volume?: number;
+}
+
+interface Drink extends Omit<Omit<FG.Drink, 'cost_per_volume'>, 'volumes'> {
+  volumes: DrinkPriceVolume[];
+  cost_per_volume?: number;
+  _cost_per_volume?: number;
+}
+
+interface Pricelist {
+  name: string;
+  type: FG.DrinkType;
+  tags: Array<FG.Tag>;
+  volume: number;
+  price: number;
+  public: boolean;
+  description: string;
+}
+
+class DrinkPriceVolume implements DrinkPriceVolume {
+  constructor({ id, volume, prices, ingredients }: FG.DrinkPriceVolume) {
+    this.id = id;
+    this._volume = volume;
+    this.prices = prices;
+    this.ingredients = ingredients;
+    this.min_prices = [];
+    this.volume = calc_volume(this);
+  }
+}
+
+class Drink {
+  constructor({
+    id,
+    article_id,
+    package_size,
+    name,
+    volume,
+    cost_per_volume,
+    cost_per_package,
+    tags,
+    type,
+    uuid,
+    receipt,
+  }: FG.Drink) {
+    this.id = id;
+    this.article_id = article_id;
+    this.package_size = package_size;
+    this.name = name;
+    this.volume = volume;
+    this.cost_per_package = cost_per_package;
+    this._cost_per_volume = cost_per_volume;
+    this.cost_per_volume = calc_cost_per_volume(this);
+    this.tags = tags;
+    this.type = type;
+    this.volumes = [];
+    this.uuid = uuid;
+    this.receipt = receipt || [];
+  }
+}
+
+interface Order {
+  label: string;
+  name: string;
+}
+
+export const usePricelistStore = defineStore({
+  id: 'pricelist',
+
+  state: () => ({
+    drinkTypes: [] as Array<FG.DrinkType>,
+    drinks: [] as Array<Drink>,
+    extraIngredients: [] as Array<FG.ExtraIngredient>,
+    min_prices: [] as Array<number>,
+    tags: [] as Array<FG.Tag>,
+    pricecalc_columns: [] as Array<string>,
+    pricelist_view: false as boolean,
+    pricelist_columns_order: [] as Array<Order>,
+  }),
+
+  actions: {
+    async getDrinkTypes(force = false) {
+      if (force || this.drinks.length == 0) {
+        const { data } = await api.get<Array<FG.DrinkType>>('/pricelist/drink-types');
+        this.drinkTypes = data;
+      }
+      return this.drinkTypes;
+    },
+    async addDrinkType(name: string) {
+      const { data } = await api.post<FG.DrinkType>('/pricelist/drink-types', { name: name });
+      this.drinkTypes.push(data);
+    },
+    async removeDrinkType(id: number) {
+      await api.delete(`/pricelist/drink-types/${id}`);
+      const idx = this.drinkTypes.findIndex((val) => val.id == id);
+      if (idx >= 0) this.drinkTypes.splice(idx, 1);
+    },
+    async changeDrinkTypeName(drinkType: FG.DrinkType) {
+      await api.put(`/pricelist/drink-types/${drinkType.id}`, drinkType);
+      const itm = this.drinkTypes.filter((val) => val.id == drinkType.id);
+      if (itm.length > 0) itm[0].name = drinkType.name;
+    },
+    async getExtraIngredients() {
+      const { data } = await api.get<Array<FG.ExtraIngredient>>(
+        'pricelist/ingredients/extraIngredients'
+      );
+      this.extraIngredients = data;
+    },
+    async setExtraIngredient(ingredient: FG.ExtraIngredient) {
+      const { data } = await api.post<FG.ExtraIngredient>(
+        'pricelist/ingredients/extraIngredients',
+        ingredient
+      );
+      this.extraIngredients.push(data);
+    },
+    async updateExtraIngredient(ingredient: FG.ExtraIngredient) {
+      const { data } = await api.put<FG.ExtraIngredient>(
+        `pricelist/ingredients/extraIngredients/${ingredient.id}`,
+        ingredient
+      );
+      const index = this.extraIngredients.findIndex((a) => a.id === ingredient.id);
+      if (index > -1) {
+        this.extraIngredients[index] = data;
+      } else {
+        this.extraIngredients.push(data);
+      }
+    },
+    async deleteExtraIngredient(ingredient: FG.ExtraIngredient) {
+      await api.delete(`pricelist/ingredients/extraIngredients/${ingredient.id}`);
+      const index = this.extraIngredients.findIndex((a) => a.id === ingredient.id);
+      if (index > -1) {
+        this.extraIngredients.splice(index, 1);
+      }
+    },
+    async getDrinks() {
+      const { data } = await api.get<Array<FG.Drink>>('pricelist/drinks');
+      this.drinks = [];
+      data.forEach((drink) => {
+        const _drink = new Drink(drink);
+        drink.volumes.forEach((volume) => {
+          const _volume = new DrinkPriceVolume(volume);
+          _drink.volumes.push(_volume);
+        });
+        this.drinks.push(_drink);
+      });
+      calc_all_min_prices(this.drinks, this.min_prices);
+    },
+    sortPrices(volume: DrinkPriceVolume) {
+      volume.prices.sort((a, b) => {
+        if (a.price > b.price) return 1;
+        if (b.price > a.price) return -1;
+        return 0;
+      });
+    },
+    async deletePrice(price: FG.DrinkPrice) {
+      await api.delete(`pricelist/prices/${price.id}`);
+    },
+    async deleteVolume(volume: DrinkPriceVolume, drink: Drink) {
+      await api.delete(`pricelist/volumes/${volume.id}`);
+      const index = drink.volumes.findIndex((a) => a.id === volume.id);
+      if (index > -1) {
+        drink.volumes.splice(index, 1);
+      }
+    },
+    async deleteIngredient(ingredient: FG.Ingredient) {
+      await api.delete(`pricelist/ingredients/${ingredient.id}`);
+    },
+    async setDrink(drink: Drink) {
+      const { data } = await api.post<FG.Drink>('pricelist/drinks', {
+        ...drink,
+      });
+      const _drink = new Drink(data);
+      data.volumes.forEach((volume) => {
+        const _volume = new DrinkPriceVolume(volume);
+        _drink.volumes.push(_volume);
+      });
+      this.drinks.push(_drink);
+      calc_all_min_prices(this.drinks, this.min_prices);
+      return _drink;
+    },
+    async updateDrink(drink: Drink) {
+      const { data } = await api.put<FG.Drink>(`pricelist/drinks/${drink.id}`, {
+        ...drink,
+      });
+      const index = this.drinks.findIndex((a) => a.id === data.id);
+      if (index > -1) {
+        const _drink = new Drink(data);
+        data.volumes.forEach((volume) => {
+          const _volume = new DrinkPriceVolume(volume);
+          _drink.volumes.push(_volume);
+        });
+        this.drinks[index] = _drink;
+      }
+      calc_all_min_prices(this.drinks, this.min_prices);
+    },
+    deleteDrink(drink: Drink) {
+      api
+        .delete(`pricelist/drinks/${drink.id}`)
+        .then(() => {
+          const index = this.drinks.findIndex((a) => a.id === drink.id);
+          if (index > -1) {
+            this.drinks.splice(index, 1);
+          }
+        })
+        .catch((err) => console.warn(err));
+    },
+    async get_min_prices() {
+      const { data } = await api.get<Array<number>>('pricelist/settings/min_prices');
+      this.min_prices = data;
+    },
+    async set_min_prices() {
+      await api.post<Array<number>>('pricelist/settings/min_prices', this.min_prices);
+      calc_all_min_prices(this.drinks, this.min_prices);
+    },
+    async upload_drink_picture(drink: Drink, file: File) {
+      const formData = new FormData();
+      formData.append('file', file);
+      const { data } = await api.post<FG.Drink>(`pricelist/drinks/${drink.id}/picture`, formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+      const _drink = this.drinks.find((a) => a.id === drink.id);
+      if (_drink) {
+        _drink.uuid = data.uuid;
+      }
+    },
+    async delete_drink_picture(drink: Drink) {
+      await api.delete(`pricelist/drinks/${drink.id}/picture`);
+      drink.uuid = '';
+    },
+    async getTags() {
+      const { data } = await api.get<Array<FG.Tag>>('/pricelist/tags');
+      this.tags = data;
+    },
+    async setTag(tag: FG.Tag) {
+      const { data } = await api.post<FG.Tag>('/pricelist/tags', tag);
+      this.tags.push(data);
+    },
+    async updateTag(tag: FG.Tag) {
+      const { data } = await api.put<FG.Tag>(`/pricelist/tags/${tag.id}`, tag);
+      const index = this.tags.findIndex((a) => a.id === data.id);
+      if (index > -1) {
+        this.tags[index] = data;
+      }
+    },
+    async deleteTag(tag: FG.Tag) {
+      await api.delete(`/pricelist/tags/${tag.id}`);
+      const index = this.tags.findIndex((a) => a.id === tag.id);
+      if (index > -1) {
+        this.tags.splice(index, 1);
+      }
+    },
+    async getPriceCalcColumn(userid: string) {
+      const { data } = await api.get<Array<string>>(`pricelist/users/${userid}/pricecalc_columns`);
+      this.pricecalc_columns = data;
+    },
+    async updatePriceCalcColumn(userid: string, data: Array<string>) {
+      await api.put<Array<string>>(`pricelist/users/${userid}/pricecalc_columns`, data);
+      this.pricecalc_columns = data;
+    },
+    async getPriceListView(userid: string) {
+      const { data } = await api.get<{ value: boolean }>(`pricelist/users/${userid}/pricelist`);
+      this.pricelist_view = data.value;
+    },
+    async updatePriceListView(userid: string, data: boolean) {
+      await api.put<Array<string>>(`pricelist/users/${userid}/pricelist`, { value: data });
+      this.pricelist_view = data;
+    },
+    async getPriceListColumnOrder(userid: string) {
+      const { data } = await api.get<Array<Order>>(
+        `pricelist/users/${userid}/pricecalc_columns_order`
+      );
+      this.pricelist_columns_order = data;
+    },
+    async updatePriceListColumnOrder(userid: string, data: Array<Order>) {
+      await api.put<Array<string>>(`pricelist/users/${userid}/pricecalc_columns_order`, data);
+      this.pricelist_columns_order = data;
+    },
+  },
+  getters: {
+    pricelist() {
+      const retVal: Array<Pricelist> = [];
+      this.drinks.forEach((drink) => {
+        drink.volumes.forEach((volume) => {
+          volume.prices.forEach((price) => {
+            retVal.push({
+              name: drink.name,
+              type: <FG.DrinkType>drink.type,
+              tags: <Array<FG.Tag>>drink.tags,
+              volume: <number>volume.volume,
+              price: price.price,
+              public: price.public,
+              description: <string>price.description,
+            });
+          });
+        });
+      });
+      return retVal;
+    },
+  },
+});
+
+export { DrinkPriceVolume, Drink, Order };
diff --git a/src/utils/filter.ts b/src/utils/filter.ts
new file mode 100644
index 0000000..cb8c5ba
--- /dev/null
+++ b/src/utils/filter.ts
@@ -0,0 +1,39 @@
+import { Drink } from '../store';
+
+function filter(
+  rows: Array<Drink>,
+  terms: Search,
+  cols: Array<Col>,
+  cellValue: { (col: Col, row: Drink): string }
+) {
+  if (terms.value) {
+    return rows.filter((row) => {
+      if (!terms.key || terms.key === '') {
+        return cols.some((col) => {
+          const val = cellValue(col, row) + '';
+          const haystack = val === 'undefined' || val === 'null' ? '' : val.toLowerCase();
+          return haystack.indexOf(terms.value) !== -1;
+        });
+      }
+      const index = cols.findIndex((col) => col.name === terms.key);
+      const val = cellValue(cols[index], row) + '';
+      const haystack = val === 'undefined' || val === 'null' ? '' : val.toLowerCase();
+      return haystack.indexOf(terms.value) !== -1;
+    });
+  }
+  return rows;
+}
+
+interface Search {
+  value: string;
+  label: string | undefined;
+  key: string | undefined;
+}
+
+interface Col {
+  name: string;
+  label: string;
+  field: string;
+}
+
+export { filter, Search, Col };
diff --git a/src/utils/sort.ts b/src/utils/sort.ts
new file mode 100644
index 0000000..cfd6f2a
--- /dev/null
+++ b/src/utils/sort.ts
@@ -0,0 +1,7 @@
+function sort(a: string | number, b: string | number) {
+  if (a > b) return 1;
+  if (b > a) return -1;
+  return 0;
+}
+
+export { sort };
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
new file mode 100644
index 0000000..c31b13a
--- /dev/null
+++ b/src/utils/utils.ts
@@ -0,0 +1,84 @@
+import { Drink, DrinkPriceVolume, usePricelistStore } from '../store';
+
+function calc_volume(volume: DrinkPriceVolume) {
+  if (volume.ingredients.some((ingredient) => !!ingredient.drink_ingredient)) {
+    let retVal = 0;
+    volume.ingredients.forEach((ingredient) => {
+      if (ingredient.drink_ingredient?.volume) {
+        retVal += ingredient.drink_ingredient.volume;
+      }
+    });
+    return retVal;
+  } else {
+    return volume._volume;
+  }
+}
+
+function calc_cost_per_volume(drink: Drink) {
+  let retVal = drink._cost_per_volume;
+  if (!!drink.volume && !!drink.package_size && !!drink.cost_per_package) {
+    retVal =
+      ((drink.cost_per_package || 0) / ((drink.volume || 0) * (drink.package_size || 0))) * 1.19;
+  }
+
+  return retVal ? Math.round(retVal * 1000) / 1000 : retVal;
+}
+
+function calc_all_min_prices(drinks: Array<Drink>, min_prices: Array<number>) {
+  drinks.forEach((drink) => {
+    drink.volumes.forEach((volume) => {
+      volume.min_prices = calc_min_prices(volume, drink.cost_per_volume, min_prices);
+    });
+  });
+}
+
+function helper(volume: DrinkPriceVolume, min_price: number) {
+  let retVal = 0;
+  let extraIngredientPrice = 0;
+  volume.ingredients.forEach((ingredient) => {
+    if (ingredient.drink_ingredient) {
+      const _drink = usePricelistStore().drinks.find(
+        (a) => a.id === ingredient.drink_ingredient?.ingredient_id
+      );
+      retVal += ingredient.drink_ingredient.volume * <number>(<unknown>_drink?.cost_per_volume);
+    }
+    if (ingredient.extra_ingredient) {
+      extraIngredientPrice += ingredient.extra_ingredient.price;
+    }
+  });
+  return (retVal * min_price) / 100 + extraIngredientPrice;
+}
+
+function calc_min_prices(
+  volume: DrinkPriceVolume,
+  cost_per_volume: number | undefined,
+  min_prices: Array<number>
+) {
+  const retVal: Array<FG.MinPrices> = [];
+  volume.min_prices = [];
+  if (min_prices) {
+    min_prices.forEach((min_price) => {
+      let computedMinPrice: number;
+      if (cost_per_volume) {
+        computedMinPrice = (cost_per_volume * <number>volume.volume * min_price) / 100;
+      } else {
+        computedMinPrice = helper(volume, min_price);
+      }
+      retVal.push({ percentage: min_price, price: computedMinPrice });
+    });
+  }
+  return retVal;
+}
+
+function clone<T>(o: T): T {
+  return <T>JSON.parse(JSON.stringify(o));
+}
+
+interface DeleteObjects {
+  prices: Array<FG.DrinkPrice>;
+  volumes: Array<DrinkPriceVolume>;
+  ingredients: Array<FG.Ingredient>;
+}
+export { DeleteObjects };
+
+export { calc_volume, calc_cost_per_volume, calc_all_min_prices, calc_min_prices, clone };