Move software files one directory up, Readme

src/pages/admin/accountsAdminPage/index.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { useAccountStore } from '@/stores/account.store';
+import adminDataLayout from '@/layouts/adminDataLayout.vue';
+import { useFeedbackStore } from '@/stores/feedback.store';
+
+const accountStore = useAccountStore()
+const feedbackStore = useFeedbackStore()
+
+const headers = [
+  { title: feedbackStore.i18n.t('account.userData.username'), value: "username" },
+  { title: feedbackStore.i18n.t('account.userData.email'), value: "email" },
+  { title: feedbackStore.i18n.t('account.userData.firstName'), value: "firstName" },
+  { title: feedbackStore.i18n.t('account.userData.lastName'), value: "lastName" },
+  { title: feedbackStore.i18n.t('account.accountRole'), value: "accountRole.name" },
+  { title: "", value: "edit", width: 130 }
+]
+
+accountStore.getAllAccounts()
+</script>
+
+<template>
+  <admin-data-layout
+    :add-button-string="$t('account.addNewAccount')"
+    :fetch-in-progress="accountStore.fetchInProgress"
+  >
+    <v-data-table
+      :items="accountStore.accounts"
+      :loading="accountStore.fetchInProgress"
+      :headers="headers"
+    >
+      <template #item.edit="{ item }">
+        <v-btn
+          icon="mdi-pencil"
+          variant="plain"
+          color="orange"
+          @click="accountStore.editAccount(item)"
+        />
+
+        <v-btn
+          icon="mdi-delete"
+          variant="plain"
+          color="red"
+          @click="accountStore.deleteAccount(item)"
+        />
+      </template>
+    </v-data-table>
+  </admin-data-layout>
+</template>

src/pages/admin/bandsAdminPage/bandEditDialog.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import actionDialog from '@/components/basics/actionDialog.vue';
+import OutlinedButton from '@/components/basics/outlinedButton.vue';
+import { GenreModel } from '@/data/models/acts/genreModel';
+import { useBandStore } from '@/stores/band.store';
+import { useGenreStore } from '@/stores/genre.store';
+
+const bandStore = useBandStore()
+const genreStore = useGenreStore()
+
+function itemProps(item: GenreModel) {
+  return {
+    title: item.name
+  }
+}
+</script>
+
+<template>
+  <action-dialog
+    v-model="bandStore.showEditDialog"
+    :title="$t('band.editBand')"
+    icon="mdi-pencil"
+  >
+    <v-container>
+      <v-row>
+        <v-col>
+          <v-text-field
+            :label="$t('band.name')"
+            v-model="bandStore.band.name"
+            variant="outlined"
+            hide-details
+          />
+        </v-col>
+
+        <v-col>
+          <v-text-field
+            :label="$t('band.foundingYear')"
+            v-model="bandStore.band.foundingYear"
+            variant="outlined"
+            hide-details
+          />
+        </v-col>
+
+        <v-col>
+          <v-select
+            :label="$t('band.genre', 2)"
+            v-model="bandStore.band.genres"
+            :items="genreStore.genres"
+            :item-props="itemProps"
+            variant="outlined"
+            hide-details
+            chips
+            multiple
+          />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-textarea
+            :label="$t('band.descriptionDe')"
+            v-model="bandStore.band.descriptionDe"
+            variant="outlined"
+            hide-details
+          />
+        </v-col>
+
+        <v-col>
+          <v-textarea
+            :label="$t('band.descriptionEn')"
+            v-model="bandStore.band.descriptionEn"
+            variant="outlined"
+            hide-details
+          />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-img
+          :src="bandStore.band.logo"
+        />
+        </v-col>
+        <v-col>
+          <v-img
+            max-width="300"
+            :src="bandStore.band.imageMembers"
+            placeholder=""
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+    
+    <template #actions>
+      <outlined-button
+        color="green"
+        @click="bandStore.saveBand"
+        :loading="bandStore.fetchInProgress"
+      >
+        {{ $t('misc.actions.save') }}
+      </outlined-button>
+    </template>
+  </action-dialog>
+</template>

src/pages/admin/bandsAdminPage/index.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { useBandStore } from '@/stores/band.store';
+import bandEditDialog from './bandEditDialog.vue';
+import adminDataLayout from '@/layouts/adminDataLayout.vue';
+import { useFeedbackStore } from '@/stores/feedback.store';
+
+const bandStore = useBandStore()
+const feedbackStore = useFeedbackStore()
+
+const headers = [
+  { title: feedbackStore.i18n.t('band.name'), value: "name" },
+  { title: feedbackStore.i18n.t('band.foundingYear'), value: "foundingYear" },
+  { title: feedbackStore.i18n.t('band.genre', 2), value: "genres" },
+  { title: feedbackStore.i18n.t('band.logo', 2), value: "logo" },
+  { title: feedbackStore.i18n.t('band.imageMember', 2), value: "imageMembers" },
+  { title: feedbackStore.i18n.t('band.image', 2), value: "images" },
+  { title: feedbackStore.i18n.t('concert.concert', 2), value: "nrOfConcerts" },
+  { title: "", value: "edit", width: 130 }
+]
+
+bandStore.getBands()
+</script>
+
+<template>
+  <admin-data-layout
+    :add-button-string="$t('band.addNewBand')"
+    :fetch-in-progress="bandStore.fetchInProgress"
+    :on-add-click="() => bandStore.newBand()"
+  >
+    <v-data-table
+      :items="bandStore.bands"
+      :headers="headers"
+      :loading="bandStore.fetchInProgress"
+    >
+      <template #item.genres="{ item }">
+        <v-chip v-for="genre of item.genres" class="mx-1">
+          {{ genre.name }}
+        </v-chip>
+      </template>
+
+      <template #item.logo="{ item }">
+        <v-icon
+          :icon="item.logo != '' ? 'mdi-check' : 'mdi-close'"
+          :color="item.logo != '' ? 'green' : 'red'"
+        />
+      </template>
+
+      <template #item.imageMembers="{ item }">
+        <v-icon
+          :icon="item.imageMembers != '' ? 'mdi-check' : 'mdi-close'"
+          :color="item.imageMembers != '' ? 'green' : 'red'"
+        />
+      </template>
+
+      <template #item.images="{ item }">
+        {{ item.images.length }} {{ $t('band.image', item.images.length) }}
+      </template>
+
+      <template #item.edit="{ item }">
+        <v-btn
+          icon="mdi-pencil"
+          variant="plain"
+          color="orange"
+          @click="bandStore.editBand(item.name)"
+        />
+
+        <v-btn
+          icon="mdi-delete"
+          variant="plain"
+          color="red"
+          @click="bandStore.deleteBand(item.id)"
+        />
+      </template>
+    </v-data-table>
+  </admin-data-layout>
+
+  <band-edit-dialog />
+</template>

src/pages/admin/concertsAdminPage/index.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { useBandStore } from '@/stores/band.store';
+import { useConcertStore } from '@/stores/concert.store';
+import { useFeedbackStore } from '@/stores/feedback.store';
+import adminDataLayout from '@/layouts/adminDataLayout.vue';
+import moment from 'moment';
+
+const concertStore = useConcertStore()
+const bandStore = useBandStore()
+const feedbackStore = useFeedbackStore()
+
+const headers = [
+  { title: feedbackStore.i18n.t('concert.date'), value: "date" },
+  { title: feedbackStore.i18n.t('concert.name'), value: "name" },
+  { title: feedbackStore.i18n.t('band.name'), value: "band.name" },
+  { title: feedbackStore.i18n.t('location.name'), value: "location.name" },
+  { title: feedbackStore.i18n.t('concert.inStock'), value: "inStock" },
+  { title: feedbackStore.i18n.t('concert.offered'), value: "offered" },
+  { title: feedbackStore.i18n.t('concert.image'), value: "image" },
+  { title: feedbackStore.i18n.t('concert.price'), value: "price" },
+  { title: "", value: "edit", width: 130 }
+]
+
+concertStore.getConcerts()
+</script>
+
+<template>
+  <admin-data-layout
+    :add-button-string="$t('concert.addNewConcert')"
+    :fetch-in-progress="concertStore.fetchInProgress"
+    :on-add-click="() => concertStore.newConcert()"
+  >
+    <v-data-table
+      :items="concertStore.concerts"
+      :loading="concertStore.fetchInProgress"
+      :headers="headers"
+    >
+      <template #item.date="{ item }">
+        {{ moment(item.date).format("dd, DD.MM.YYYY") }}
+      </template>
+
+      <template #item.price="{ item }">
+        {{ item.price.toFixed(2) }} €
+      </template>
+
+      <template #item.image="{ item }">
+        <v-icon
+          :icon="item.image != '' ? 'mdi-check' : 'mdi-close'"
+          :color="item.image != '' ? 'green' : 'red'"
+        />
+      </template>
+
+      <template #item.offered="{ item }">
+        <v-icon
+          :icon="item.offered ? 'mdi-check' : 'mdi-close'"
+          :color="item.offered ? 'green' : 'red'"
+        />
+      </template>
+
+      <template #item.edit="{ item }">
+        <v-btn
+          icon="mdi-pencil"
+          variant="plain"
+          color="orange"
+          @click="concertStore.editConcert(item)"
+        />
+
+        <v-btn
+          icon="mdi-delete"
+          variant="plain"
+          color="red"
+          @click="concertStore.deleteConcert(item)"
+        />
+      </template>
+    </v-data-table>
+  </admin-data-layout>
+</template>

src/pages/admin/dashboardPage/dashboardCard.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import cardView from '@/components/basics/cardView.vue';
+import { useRouter } from 'vue-router';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
+
+const router = useRouter()
+
+defineProps({
+  title: String,
+  icon: String,
+  firstLine: String,
+  secondLine: String,
+  buttonRoute: String,
+  loading: Boolean
+})
+</script>
+
+<template>
+  <v-col cols="12" md="6" lg="4">
+    <card-view
+      :title="title"
+      :icon="icon"
+    >
+      <v-skeleton-loader
+        type="heading"
+        :loading="loading"
+        class="text-h4 d-flex justify-center"
+      >
+        {{ firstLine }}
+      </v-skeleton-loader>
+
+      <v-skeleton-loader
+        type="text"
+        :loading="loading"
+        class="text-h6 text-disabled d-flex justify-center"
+      >
+        {{ secondLine }}
+      </v-skeleton-loader>
+
+      <template #actions>
+        <outlined-button
+          @click="router.push(buttonRoute)"
+          :loading="loading"
+        >
+          {{ $t('misc.actions.more') }}
+        </outlined-button>
+      </template>
+    </card-view>
+  </v-col>
+</template>

src/pages/admin/dashboardPage/index.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { useConcertStore } from '@/stores/concert.store';
+import { useBandStore } from '@/stores/band.store';
+import { useAccountStore } from '@/stores/account.store';
+import { useLocationStore } from '@/stores/location.store';
+import { useGenreStore } from '@/stores/genre.store';
+import { usePreferencesStore } from '@/stores/preferences.store';
+import dashboardCard from './dashboardCard.vue';
+import { useOrderStore } from '@/stores/order.store';
+import { useFilesStore } from '@/stores/files.store';
+
+const concertStore = useConcertStore()
+const bandStore = useBandStore()
+const accountStore = useAccountStore()
+const genreStore = useGenreStore()
+const locationStore = useLocationStore()
+const preferencesStore = usePreferencesStore()
+const orderStore = useOrderStore()
+const filesStore = useFilesStore()
+
+filesStore.getStaticFolders()
+bandStore.getBands()
+locationStore.getLocations()
+genreStore.getGenres()
+accountStore.getAllAccounts()
+concertStore.getConcerts()
+orderStore.getAllOrders()
+</script>
+
+<template>
+  <v-container>
+    <v-row>
+      <dashboard-card
+        :title="$t('band.band', 2)"
+        icon="mdi-guitar-electric"
+        :first-line="bandStore.bands.length + ' ' + $t('band.band', 2)"
+        :second-line="bandStore.bands.reduce((counter, band) => {
+          return band.concerts.length == 0 ? counter += 1 : counter
+        }, 0) + ' ' + $t('band.withoutConcert', 2)"
+        button-route="/admin/bands"
+        :loading="bandStore.fetchInProgress"
+      />
+
+      <dashboard-card
+        :title="$t('concert.concert', 2)"
+        icon="mdi-ticket"
+        :first-line="concertStore.concerts.length + ' ' + $t('concert.concert', 2)"
+        :second-line="concertStore.concerts.reduce((counter, obj) => {
+          if (obj.inStock == 0) {
+            counter += 1
+          }
+
+          return counter
+        }, 0) + ' ' + $t('concert.concertSoldOut')"
+        button-route="/admin/concerts"
+        :loading="concertStore.fetchInProgress"
+      />
+
+
+      <dashboard-card
+        :title="$t('location.location', 2)"
+        icon="mdi-city"
+        :first-line="locationStore.locations.length + ' ' + $t('location.location', 2)"
+        :second-line="locationStore.locations.reduce((city, obj) => {
+          city[obj.city.name] = 
+            city[obj.city.name] === undefined ? city.push(obj.city.name) : city[obj.city.name] += 1
+
+          return city
+        }, []).length + ' ' + $t('location.city', 2)"
+        button-route="/admin/locations"
+        :loading="locationStore.fetchInProgress"
+      />
+
+      <dashboard-card
+        :title="$t('account.account', 2)"
+        icon="mdi-account"
+        :first-line="accountStore.accounts.length + ' ' + $t('account.account', 2)"
+        :second-line="accountStore.accounts.reduce((counter, obj) => {
+          return obj.accountRole.privilegeAdminPanel ? counter += 1 : counter
+          }, 0) + ' ' + $t('account.administrator', 2)"
+        button-route="/admin/accounts"
+        :loading="accountStore.fetchInProgress"
+      />
+
+      <dashboard-card
+        :title="$t('band.genre', 2)"
+        icon="mdi-music-clef-treble"
+        :first-line="genreStore.genres.length + ' ' + $t('band.genre', 2)"
+        :second-line="genreStore.genres.reduce((counter, obj) => {
+            return obj.bands.length == 0 ? counter += 1 : counter
+          }, 0) + ' ' + $t('genre.withoutBand', 2)"
+        button-route="/admin/genres"
+        :loading="genreStore.fetchInProgress"
+      />
+
+      <dashboard-card
+        :title="$t('misc.file', 2)"
+        icon="mdi-file"
+        :first-line="filesStore.staticFolders.reduce((counter, obj) => {
+          return counter + obj.nrOfItems
+        }, 0) + ' ' + $t('misc.file', 2)"
+        :second-line="filesStore.staticFolders.length + ' ' + $t('misc.folder', 2)"
+        button-route="/admin/files"
+        :loading="preferencesStore.fetchInProgress"
+      />
+
+      <dashboard-card
+        :title="$t('order.order', 2)"
+        icon="mdi-basket"
+        :first-line="orderStore.orders.length + ' ' + $t('order.order', 2)"
+        :second-line="orderStore.orders.reduce((counter, obj) => {
+          return !obj.shipped ? counter += 1 : counter
+        }, 0) + ' ' + $t('order.notShipped')"
+        button-route="/admin/orders"
+        :loading="orderStore.fetchInProgress"
+      />
+    </v-row>
+  </v-container>
+</template>

src/pages/admin/filesAdminPage/fileUploadDialog.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import actionDialog from '@/components/basics/actionDialog.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
+import { useFilesStore } from '@/stores/files.store';
+import { ref } from 'vue';
+
+const filesStore = useFilesStore()
+
+const test = ref()
+</script>
+
+<template>
+  <action-dialog
+    v-model="filesStore.showFileUploadDialog"
+    :title="$t('misc.uploadFile')"
+    icon="mdi-file"
+    max-width="800"
+  >
+    <v-form :model-value="test">
+      <v-container>
+        <v-row>
+          <v-col>
+            <v-file-input
+              v-model="filesStore.fileUpload"
+              clearable
+              :label="$t('misc.chooseFile')"
+              :disabled="filesStore.fetchInProgress"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col>
+            <v-radio-group
+              v-model="filesStore.fileUploadDir"
+              :label="$t('misc.chooseDestinationFolder')"
+              :disabled="filesStore.fetchInProgress"
+            >
+              <v-radio
+                v-for="folder of filesStore.staticFolders"
+                :label="folder.name + '/'"
+                :value="folder.name"
+              />
+            </v-radio-group>
+          </v-col>
+        </v-row>
+      </v-container>
+
+      <v-btn type="submit">Submit</v-btn>
+    </v-form>
+
+    <template #actions>
+      <outlined-button
+        @click="filesStore.uploadFile"
+        prepend-icon="mdi-file-upload"
+        color="green"
+        :disabled="filesStore.fileUploadDir.length == 0 || filesStore.fileUpload == undefined"
+        :loading="filesStore.fetchInProgress"
+      >
+        {{ $t('misc.upload') }}
+      </outlined-button>
+    </template>
+  </action-dialog>
+</template>

src/pages/admin/filesAdminPage/index.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import adminDataLayout from '@/layouts/adminDataLayout.vue';
+import { ref } from 'vue';
+import FileUploadDialog from './fileUploadDialog.vue';
+import { useFilesStore } from '@/stores/files.store';
+
+const filesStore = useFilesStore()
+const showPreviewDialog = ref(false)
+const previewFile = ref("")
+
+filesStore.getStaticFolders()
+</script>
+
+<template>
+  <admin-data-layout
+    :add-button-string="$t('misc.uploadFile')"
+    :fetch-in-progress="filesStore.fetchInProgress"
+    :on-add-click="() => { filesStore.showFileUploadDialog = true }"
+  >
+    <v-row >
+      <v-col cols="2" class="border">
+        <v-list>
+          <v-list-item
+            v-for="folder of filesStore.staticFolders"
+            :key="folder.name"
+            :value="folder"
+            :title="folder.name + '/'"
+            @click="filesStore.selectedFolder = folder; filesStore.getStaticFiles()"
+          />
+        </v-list>
+      </v-col>
+
+      <v-col cols="4" class="border">
+        <v-skeleton-loader
+          :loading="filesStore.fetchInProgress"
+          type="list-item-two-line"
+        >
+          <v-list max-height="800" class="w-100">
+            <v-list-item
+              v-for="file of filesStore.staticFiles"
+              :title="file.name"
+              :value="file.name"
+              :subtitle="Math.round(file.size / 1024) + ' KB'"
+              @click="() => { filesStore.selectedFile = file }"
+            />
+          </v-list>
+        </v-skeleton-loader>
+      </v-col>
+
+      <v-col class="border">
+        <v-img
+          v-if="filesStore.selectedFile != undefined"
+          :src="filesStore.selectedFile.url" max-height="400" />
+      </v-col>
+    </v-row>
+  </admin-data-layout>
+
+  <file-preview-dialog
+    v-model:show-dialog="showPreviewDialog"
+    :url="previewFile"
+  />
+
+  <file-upload-dialog />
+</template>

src/pages/admin/genresAdminPage/genreEditDialog.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import actionDialog from '@/components/basics/actionDialog.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
+import { getStringRules } from '@/scripts/validationRules';
+import { useGenreStore } from '@/stores/genre.store';
+import { ref } from 'vue';
+
+const valid = ref(false)
+
+const genreStore = useGenreStore()
+</script>
+
+<template>
+  <action-dialog
+    v-model="genreStore.showEditDialog"
+    :title="$t('band.editGenre')"
+    icon="mdi-pencil"
+    max-width="500"
+  >
+    <v-form v-model="valid">
+      <v-container>
+        <v-row>
+          <v-col>
+            <v-text-field
+              :label="$t('band.genre')"
+              v-model="genreStore.genre.name"
+              variant="outlined"
+              hide-details
+              :rules="getStringRules(3)"
+            />
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-form>
+
+    <template #actions>
+      <outlined-button
+        color="green"
+        @click="genreStore.saveGenre"
+        :disabled="!valid"
+        :loading="genreStore.fetchInProgress"
+      >
+        {{ $t('misc.actions.save') }}
+      </outlined-button>
+    </template>
+  </action-dialog>
+</template>

src/pages/admin/genresAdminPage/index.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import adminDataLayout from '@/layouts/adminDataLayout.vue';
+import genreEditDialog from './genreEditDialog.vue';
+import { useGenreStore } from '@/stores/genre.store';
+
+const genreStore = useGenreStore()
+
+const headers = [
+  { title: "Name", value: "name" },
+  { title: "Bands", value: "bands" },
+  { title: "", value: "edit", width: 130 }
+]
+
+genreStore.getGenres()
+</script>
+
+<template>
+  <admin-data-layout
+    :add-button-string="$t('band.addNewGenre')"
+    :fetch-in-progress="genreStore.fetchInProgress"
+    :on-add-click="() => { genreStore.newGenre() }"
+  >
+    <v-data-table
+      :loading="genreStore.fetchInProgress"
+      :items="genreStore.genres"
+      :headers="headers"
+      :items-per-page="100"
+    >
+      <template #item.bands="{ item }">
+        <v-chip v-for="band of item.bands" class="mx-1">
+          {{ band.name }}
+        </v-chip>
+      </template>
+
+      <template #item.edit="{ item }">
+        <v-btn
+          icon="mdi-pencil"
+          variant="plain"
+          color="orange"
+          @click="genreStore.editGenre(item)"
+        />
+
+        <v-btn
+          icon="mdi-delete"
+          variant="plain"
+          color="red"
+          @click="genreStore.deleteGenre(item)"
+        />
+      </template>
+    </v-data-table>
+  </admin-data-layout>
+
+  <genre-edit-dialog />
+</template>

src/pages/admin/locationsAdminPage/index.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import adminDataLayout from '@/layouts/adminDataLayout.vue';
+import { useFeedbackStore } from '@/stores/feedback.store';
+import { useLocationStore } from '@/stores/location.store';
+
+const locationStore = useLocationStore()
+const feedbackStore = useFeedbackStore()
+
+const headers = [
+  { title: feedbackStore.i18n.t('location.name'), value: "name" },
+  { title: feedbackStore.i18n.t('location.address'), value: "address" },
+  { title: feedbackStore.i18n.t('location.imageIndoor'), value: "imageIndoor" },
+  { title: feedbackStore.i18n.t('location.imageOutdoor'), value: "imageOutdoor" },
+  { title: feedbackStore.i18n.t('location.layoutNr'), value: "layout" },
+  { title: feedbackStore.i18n.t('location.capacity'), value: "capacity" },
+  { title: feedbackStore.i18n.t('location.city'), value: "city" },
+  { title: feedbackStore.i18n.t('location.nrOfConcerts'), value: "nrOfConcerts" },
+  { title: "", value: "edit", width: 130 }
+]
+
+locationStore.getLocations()
+</script>
+
+<template>
+  <admin-data-layout
+    :fetch-in-progress="locationStore.fetchInProgress"
+    :add-button-string="$t('location.addLocation')"
+    :on-add-click="() => { locationStore.newLocation() }"
+  >
+    <v-data-table
+      :items="locationStore.locations"
+      :headers="headers"
+      :loading="locationStore.fetchInProgress"
+    >
+      <template #item.imageIndoor="{ item }">
+        <v-icon
+          :icon="item.imageIndoor != '' ? 'mdi-check' : 'mdi-close'"
+          :color="item.imageIndoor != '' ? 'green' : 'red'"
+        />
+      </template>
+
+      <template #item.imageOutdoor="{ item }">
+        <v-icon
+          :icon="item.imageOutdoor != '' ? 'mdi-check' : 'mdi-close'"
+          :color="item.imageOutdoor != '' ? 'green' : 'red'"
+        />
+      </template>
+      
+      <template #item.city="{ item }">
+        {{ item.city.name }}
+      </template>
+
+      <template #item.edit="{ item }">
+        <v-btn
+          icon="mdi-pencil"
+          variant="plain"
+          color="orange"
+          @click="locationStore.editLocation(item)"
+        />
+
+        <v-btn
+          icon="mdi-delete"
+          variant="plain"
+          color="red"
+          @click="locationStore.deleteLocation(item)"
+        />
+      </template>
+    </v-data-table>
+  </admin-data-layout>
+</template>

src/pages/admin/ordersAdminPage/index.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import adminDataLayout from '@/layouts/adminDataLayout.vue';
+import { useOrderStore } from '@/stores/order.store';
+import moment from 'moment';
+import OrderDetailDialog from './orderDetailDialog.vue';
+
+const orderStore = useOrderStore()
+
+const headers = [
+  { title: "Account", value: "account.username" },
+  { title: "Name", value: "account" },
+  { title: "Bestellt am", value: "orderedAt" },
+  { title: "Adresse", value: "street" },
+  { title: "Stadt", value: "city" },
+  { title: "Versendet", value: "shipped" },
+  { title: "", value: "edit", width: 130 }
+]
+
+orderStore.getAllOrders()
+</script>
+
+<template>
+  <admin-data-layout
+    :hide-add-button="true"
+  >
+    <v-data-table
+      :headers="headers"
+      :items="orderStore.orders"
+    >
+      <template #item.account="{ item }">
+        {{ item.account.firstName }} {{ item.account.lastName }}
+      </template>
+
+      <template #item.orderedAt="{ item }">
+        {{ moment(item.orderedAt).format("DD.MM.YYYY, HH:mm:ss") }}
+      </template>
+
+      <template #item.street="{ item }">
+        {{ item.address.street }} {{ item.address.houseNumber }}
+      </template>
+
+      <template #item.city="{ item }">
+        {{ item.address.postalCode }} {{ item.address.city }}
+      </template>
+
+      <template #item.shipped="{ item }">
+        <v-icon
+          :icon="item.shipped ? 'mdi-check' : 'mdi-close'"
+          :color="item.shipped ? 'green' : 'red'"
+        />
+      </template>
+
+      <template #item.edit="{ item }">
+        <v-btn
+          icon="mdi-eye"
+          variant="plain"
+          @click="orderStore.openDetails(item)"
+        />
+
+        <v-btn
+          icon="mdi-delete"
+          variant="plain"
+          color="red"
+          @click="orderStore.deleteOrder(item)"
+        />
+      </template>
+
+    </v-data-table>
+  </admin-data-layout>
+
+  <order-detail-dialog />
+</template>

src/pages/admin/ordersAdminPage/orderDetailDialog.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import actionDialog from '@/components/basics/actionDialog.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
+import { useOrderStore } from '@/stores/order.store';
+import moment from 'moment';
+
+const orderStore = useOrderStore()
+</script>
+
+<template>
+  <action-dialog
+    v-model="orderStore.showDetailDialog"
+    :title="$t('order.order')"
+    icon="mdi-basket"
+  >
+    <v-list>
+      <v-list-subheader>
+        {{ $t('ticket.ticket', 2) }}
+      </v-list-subheader>
+
+      <v-list-item v-for="ticket of orderStore.order.tickets">
+        {{ moment(ticket.concert.date).format("DD.MM.YYYY") }} - 
+        {{ ticket.concert.band.name }} - {{ ticket.concert.name }}
+      </v-list-item>
+    </v-list>
+  </action-dialog>
+</template>