Restructure project to atomize structure

.vscode/settings.json

@@ -13,4 +13,5 @@
   ],
   "i18n-ally.keystyle": "nested",
   "i18n-ally.extract.autoDetect": true,
+  "vue.features.takeOverMode.enabled": true
 }

CHANGELOG.md

@@ -1,4 +1,4 @@
-# v.0.4.0 (2025-08-30)
+# v.0.4.0 MuC-Edition (2025-09-01)
 
 ## 🚀 Features
 
@@ -12,7 +12,13 @@
 - Icons on exercise groups on help page
 - Welcome dialog: New page for look and feel, merge database and exercise creation in one step
 - Add links to GitHub and project page on settings
+- New section on homepage for popular genres
 
+## 🐛 Bugfixes
+
+- Filter on band page changes visible bands on homepage
+- No startup after packaging
+- Infinity loading on concert booking page is user comes from band page
 
 # v.0.3.0 (2025-02-28)
 ## 🚀 Features

backend/server.ts

@@ -36,7 +36,7 @@ app.use("/files", files)
 
 // Add delay for more realistic response times
 app.use((req, res, next) => {
-  setTimeout(next, Math.floor((Math.random() * 1000) + 100))
+  setTimeout(next, Math.floor((Math.random() * 500) + 100))
 })
 
 // Routes

electron-builder.json

@@ -37,7 +37,6 @@
     "!dist",
     "!out",
     "!misc",
-    "!database.sqlite",
+    "!database.sqlite"
-    "!node_modules"
   ]
 }

package.json

@@ -44,8 +44,8 @@
     "exifreader": "^4.25.0",
     "express": "^4.21.1",
     "jsonwebtoken": "^9.0.2",
-    "jspdf": "^2.5.2",
+    "jspdf": "^3.0.2",
-    "jspdf-autotable": "^3.8.4",
+    "jspdf-autotable": "^5.0.2",
     "moment": "^2.30.1",
     "multer": "^1.4.5-lts.1",
     "pinia": "^2.2.4",
@@ -81,7 +81,7 @@
     "nodemon": "^3.1.7",
     "rimraf": "^6.0.1",
     "ts-node": "^10.9.2",
-    "vite": "^5.4.9",
+    "vite": "^7.1.4",
     "vue-tsc": "^2.1.10"
   }
 }

src/App.vue

@@ -1,50 +1,63 @@
 <script setup lang="ts">
-import { useTheme } from 'vuetify/lib/framework.mjs';
+import { useTheme } from "vuetify/lib/framework.mjs";
-import { i18n } from './plugins/i18n';
+import { i18n } from "./plugins/i18n";
-import { ref, watch } from 'vue';
+import { ref, watch } from "vue";
-import { usePreferencesStore } from './stores/preferences.store';
+import { usePreferencesStore } from "./stores/preferences.store";
-import { useFeedbackStore } from './stores/feedback.store';
+import { useFeedbackStore } from "./stores/feedback.store";
-import companyFooter from './components/navigation/companyFooter.vue';
+import companyFooter from "./components/organisms/companyFooter.vue";
-import urlBar from './components/navigation/urlBar.vue';
+import urlBar from "./components/organisms/urlBar.vue";
-import { useRouter } from 'vue-router';
+import { useRouter } from "vue-router";
-import NavigationBar from './components/navigation/navigationBar.vue';
+import navigationBar from "./components/organisms/navigationBar.vue";
-import { BannerStateEnum } from './data/enums/bannerStateEnum';
+import { BannerStateEnum } from "./data/enums/bannerStateEnum";
 
-const preferencesStore = usePreferencesStore()
+const preferencesStore = usePreferencesStore();
-const feedbackStore = useFeedbackStore()
+const feedbackStore = useFeedbackStore();
-const theme = useTheme()
+const theme = useTheme();
-const router = useRouter()
+const router = useRouter();
 
-theme.global.name.value = preferencesStore.theme
+theme.global.name.value = preferencesStore.theme;
 
 // Global watcher
 // Watch for language change
-watch(() => preferencesStore.language, () => {
+watch(
-  i18n.global.locale = preferencesStore.language
+  () => preferencesStore.language,
-}, { immediate: true })
+  () => {
+    i18n.global.locale = preferencesStore.language;
+  },
+  { immediate: true }
+);
 
 // Watch for theme change
-watch(() => preferencesStore.theme, () => {
+watch(
-  theme.global.name.value = preferencesStore.theme
+  () => preferencesStore.theme,
-})
+  () => {
+    theme.global.name.value = preferencesStore.theme;
+  }
+);
 
 // Watch for 404 page directions
-watch(() => feedbackStore.notFound, () => {
+watch(
-  if (feedbackStore.notFound) {
+  () => feedbackStore.notFound,
-    feedbackStore.notFound = false
+  () => {
-    router.push("/404")
+    if (feedbackStore.notFound) {
+      feedbackStore.notFound = false;
+      router.push("/404");
+    }
   }
-})
+);
 
 // Watch for snackbar disappear
-watch(() => feedbackStore.showSnackbar, () => {
+watch(
-  if (!feedbackStore.showSnackbar) {
+  () => feedbackStore.showSnackbar,
-    feedbackStore.snackbars = []
+  () => {
+    if (!feedbackStore.showSnackbar) {
+      feedbackStore.snackbars = [];
+    }
   }
-})
+);
 
 function calcMargin(i) {
-  return (i * 60) + 10 + 'px'
+  return i * 60 + 10 + "px";
 }
 </script>
 
@@ -56,7 +69,6 @@ function calcMargin(i) {
     <!-- Navigaion bar of page -->
     <navigation-bar />
 
-
     <v-main>
       <!-- Snackbar in the top right corner for user feedback -->
       <v-snackbar
@@ -75,21 +87,18 @@ function calcMargin(i) {
       </v-snackbar>
 
       <!-- Here changes the router the content -->
-      <v-container max-width="1400" min-height="1000" class="py-0" height="100%">
+      <v-container
+        max-width="1400"
+        min-height="1000"
+        class="py-0 px-0"
+        height="100%"
+      >
         <v-sheet color="sheet" height="100%">
           <router-view></router-view>
         </v-sheet>
-
       </v-container>
 
-      <v-btn
+      <v-btn fab dark fixed bottom right color="primary">
-        fab
-        dark
-        fixed
-        bottom
-        right
-        color="primary"
-      >
         <v-icon>keyboard_arrow_up</v-icon>
       </v-btn>
 
@@ -104,8 +113,8 @@ function calcMargin(i) {
     location="bottom right"
     class="pa-3 mb-12 mr-n16 text-center text-h5"
     width="300"
-    style="rotate: 315deg; z-index: 1008;"
+    style="rotate: 315deg; z-index: 1008"
   >
-    {{ $t('misc.testEnvironment') }}
+    {{ $t("misc.testEnvironment") }}
   </v-sheet>
 </template>

src/components/atoms/circularProgressIndeterminate.vue

@@ -1,6 +1,3 @@
-<script setup lang="ts">
-</script>
-
 <template>
   <v-progress-circular
     size="128"

src/components/atoms/headerText.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineProps({
+  // Title text
+  title: String,
+
+  // Activate loading state (skeleton loader)
+  loading: {
+    default: false,
+    type: Boolean,
+  },
+});
+</script>
+
+<template>
+  <v-skeleton-loader
+    type="heading"
+    :loading="loading"
+    width="300"
+    class="d-flex justify-center align-center text-h4"
+  >
+    {{ title }}
+  </v-skeleton-loader>
+</template>

src/components/atoms/horizontalLine.vue

@@ -0,0 +1,3 @@
+<template>
+  <v-sheet height="12" width="100%" color="primary" class="rounded-pill" />
+</template>

src/components/atoms/listItem.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const props = defineProps({
+  // Title string
+  title: String,
+
+  // Subtitle string below title
+  subtitle: String,
+
+  // Icon on the left side
+  prependIcon: String,
+
+  // Activate loading state (skeleton loader)
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+
+  // Handle action if user taps on item
+  // Activates a icon on the right site
+  onTap: {
+    type: Function,
+    default: undefined,
+  },
+});
+
+function executeOnTapped() {
+  if (props.onTap != undefined) {
+    props.onTap();
+  }
+}
+</script>
+
+<template>
+  <v-skeleton-loader :loading="loading" type="list-item">
+    <v-list-item
+      :title="title"
+      :subtitle="subtitle"
+      :prepend-icon="prependIcon"
+      :append-icon="onTap != undefined ? 'mdi-open-in-new' : ''"
+      width="100%"
+      @click="executeOnTapped()"
+    />
+  </v-skeleton-loader>
+</template>

src/components/atoms/outlinedButton.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
 defineProps({
+  // Icon displayed on the left side
   prependIcon: String,
+
+  // Color of button, defaults to secondary
   color: {
     type: String,
     default: "secondary"
-  }
+  },
+
+  // Activate loading state
+  loading: Boolean
 })
 </script>
 
@@ -13,6 +19,7 @@ defineProps({
     :prepend-icon="prependIcon"
     variant="outlined"
     :color="color"
+    :loading="loading"
   >
     <slot></slot>
   </v-btn>

src/components/basics/sectionDivider.vue

@@ -1,55 +0,0 @@
-<script setup lang="ts">
-defineProps({
-  title: String,
-  image: String,
-  loading: Boolean
-})
-</script>
-
-<template>
-  <v-row class="pt-3 d-none d-md-flex">
-    <!-- Left line -->
-    <v-col class="d-flex justify-center align-center">
-      <v-sheet height="12" width="100%" color="primary" class="rounded-s-lg" />
-    </v-col>
-    
-    <!-- Title -->
-    <v-col class="v-col-auto">
-      <v-skeleton-loader
-        type="heading"
-        :loading="loading"
-        width="300"
-      >
-        <v-sheet
-          class="text-h4"
-          color="sheet"
-        >
-          {{ title }}
-        </v-sheet>
-      </v-skeleton-loader>
-    </v-col>
-
-    <!-- Right line -->
-    <v-col class="d-flex justify-center align-center">
-      <v-sheet height="12" width="100%" color="primary" class="rounded-e-lg" />
-    </v-col>
-  </v-row>
-
-  <v-row class="d-md-none">
-    <v-col>
-      <v-skeleton-loader
-        type="heading"
-        :loading="loading"
-        class="d-flex justify-center align-center"
-      >
-        <span class="text-h4 text-center">{{ title }}</span>
-      </v-skeleton-loader>
-    </v-col>
-  </v-row>
-
-  <v-row class="d-md-none">
-    <v-col class="d-flex justify-center align-center">
-      <v-sheet height="12" width="80%" color="primary" class="rounded-pill" />
-    </v-col>
-  </v-row>
-</template>

src/components/molecules/sectionDivider.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import horizontalLine from "../atoms/horizontalLine.vue";
+import headerText from "../atoms/headerText.vue";
+
+defineProps({
+  // Title text
+  title: String,
+
+  // Activate loading state
+  loading: Boolean,
+});
+</script>
+
+<template>
+  <!-- Layout for displays >=md -->
+  <v-row class="pt-3 d-none d-md-flex">
+    <!-- Left line -->
+    <v-col class="d-flex justify-center align-center">
+      <horizontal-line />
+    </v-col>
+
+    <!-- Title -->
+    <v-col class="v-col-auto">
+      <header-text :loading="loading" :title="title" />
+    </v-col>
+
+    <!-- Right line -->
+    <v-col class="d-flex justify-center align-center">
+      <horizontal-line />
+    </v-col>
+  </v-row>
+
+  <!-- Layout for display <md -->
+
+  <v-row class="d-md-none">
+    <v-col>
+      <header-text :loading="loading" :title="title" />
+    </v-col>
+  </v-row>
+
+  <v-row class="d-md-none">
+    <v-col class="d-flex justify-center align-center">
+      <horizontal-line />
+    </v-col>
+  </v-row>
+</template>

src/components/organisms/aboutSection.vue

@@ -1,54 +1,63 @@
 <script setup lang="ts">
-import cardView from "@/components/basics/cardView.vue";
+import cardView from "@/components/molecules/cardView.vue";
-import packageJson from "./../../../../package.json";
+import packageJson from "../../../package.json";
+import listItem from "@/components/atoms/listItem.vue";
 
 function openExternal(url: string) {
   window.open(url, "_blank");
 }
+
+function openRepository() {
+  openExternal(
+    "https://github.com/TobiZog/eventmaster"
+  );
+}
+
+function openWebsite() {
+  openExternal(
+    "https://www.itsec.uni-hannover.de/de/usec/forschung/eventmaster-learning-web-attacks"
+  );
+}
 </script>
 
 <template>
   <card-view :title="$t('preferences.aboutProject')" icon="mdi-information">
     <template #borderless>
       <v-list>
-        <v-list-item
+        <list-item
           :title="$t('misc.softwareVersion')"
           :subtitle="packageJson.version"
           prepend-icon="mdi-counter"
         />
-        <v-list-item
+        <list-item
           :title="$t('misc.license')"
           subtitle="MIT"
           prepend-icon="mdi-license"
         />
-        <v-list-item
+        <list-item
           :title="$t('misc.developer')"
           subtitle="Tobias Zoghaib"
           prepend-icon="mdi-account"
         />
-        <v-list-item
+        <list-item
           :title="$t('misc.developedFor')"
           subtitle="Uni Hannover, Institut für IT-Sicherheit, Fachgebiet Usable Security and Privacy"
           prepend-icon="mdi-school"
         />
-        <v-list-item
+        <list-item
           :title="$t('misc.copyright')"
           subtitle="2024-2025"
           prepend-icon="mdi-copyright"
         />
-        <v-list-item
+        <list-item
           :title="$t('misc.githubRepository')"
           prepend-icon="mdi-web"
-          @click="openExternal('https://github.com/TobiZog/eventmaster')"
+          :onTap="openRepository"
         />
-        <v-list-item
+        <list-item
           :title="$t('misc.projectPage')"
           prepend-icon="mdi-web"
-          @click="
+          :onTap="openWebsite"
-            openExternal(
-              'https://www.itsec.uni-hannover.de/de/usec/forschung/eventmaster-learning-web-attacks'
-            )
-          "
         />
       </v-list>
     </template>

src/components/organisms/accountDataCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import cardView from '@/components/basics/cardView.vue';
+import cardView from '@/components/molecules/cardView.vue';
 import { useAccountStore } from '@/stores/account.store';
 import { useFeedbackStore } from '@/stores/feedback.store';
 

src/components/organisms/accountManagingCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import cardView from '@/components/basics/cardView.vue';
+import cardView from '@/components/molecules/cardView.vue';
-import confirmDialog from '@/components/basics/confirmDialog.vue';
+import confirmDialog from '@/components/organisms/confirmDialog.vue';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
+import outlinedButton from '@/components/atoms/outlinedButton.vue';
 import { useAccountStore } from '@/stores/account.store';
 import { ref } from 'vue';
 

src/components/organisms/actionDialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ModelRef } from 'vue';
-import cardView from './cardView.vue';
+import cardView from '../molecules/cardView.vue';
 
 const showDialog: ModelRef<boolean> = defineModel()
 

src/components/organisms/addressEditDialog.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import actionDialog from '@/components/basics/actionDialog.vue';
+import actionDialog from '@/components/organisms/actionDialog.vue';
-import OutlinedButton from '@/components/basics/outlinedButton.vue';
+import OutlinedButton from '@/components/atoms/outlinedButton.vue';
 import { getIbanRules, getNumberStartRules, getPostalRules, getStringRules } from '@/scripts/validationRules';
 import { useAccountStore } from '@/stores/account.store';
-import cardViewOneLine from '@/components/basics/cardViewOneLine.vue';
+import cardViewOneLine from '@/components/molecules/cardViewOneLine.vue';
 import { ref } from 'vue';
 
 const valid = ref(false)

src/components/organisms/bandEditDialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import actionDialog from '@/components/basics/actionDialog.vue';
+import actionDialog from '@/components/organisms/actionDialog.vue';
-import OutlinedButton from '@/components/basics/outlinedButton.vue';
+import OutlinedButton from '@/components/atoms/outlinedButton.vue';
 import { GenreModel } from '@/data/models/acts/genreModel';
 import { useBandStore } from '@/stores/band.store';
 import { useGenreStore } from '@/stores/genre.store';

src/components/organisms/bandFilterbar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import cardView from '@/components/basics/cardView.vue';
+import cardView from '@/components/molecules/cardView.vue';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
+import outlinedButton from '@/components/atoms/outlinedButton.vue';
 import { GenreModel } from '@/data/models/acts/genreModel';
 import { useGenreStore } from '@/stores/genre.store';
 import { useRouter } from 'vue-router';

src/components/organisms/bandListItem.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { BandModel } from '@/data/models/acts/bandModel';
 import { lowestTicketPrice } from '@/scripts/concertScripts';
-import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
+import cardViewHorizontal from '@/components/molecules/cardViewHorizontal.vue';
 import { useRouter } from 'vue-router';
 import { GenreModel } from '@/data/models/acts/genreModel';
 import { ConcertModel } from '@/data/models/acts/concertModel';

src/components/organisms/bandMemberSection.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import cardWithTopImage from '@/components/basics/cardViewTopImage.vue';
+import cardWithTopImage from '@/components/molecules/cardViewTopImage.vue';
-import sectionDivider from '@/components/basics/sectionDivider.vue';
+import sectionDivider from '@/components/molecules/sectionDivider.vue';
 import { useBandStore } from '@/stores/band.store';
 
 const bandStore = useBandStore()
@@ -22,7 +22,7 @@ const bandStore = useBandStore()
   <v-row>
     <v-spacer />
 
-    <v-col v-for="member of bandStore.band.members" cols="6" md="3">
+    <v-col v-for="member of bandStore.band.members" cols="12" md="3">
       <card-with-top-image
         :title="member.name"
         :image=" member.image"

src/components/organisms/concertFilterbar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import cardView from '@/components/basics/cardView.vue';
+import cardView from '@/components/molecules/cardView.vue';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
+import outlinedButton from '@/components/atoms/outlinedButton.vue';
 import { CityModel } from '@/data/models/locations/cityModel';
 import { LocationModel } from '@/data/models/locations/locationModel';
 import { useConcertStore } from '@/stores/concert.store';

src/components/organisms/concertListItem.vue

@@ -1,27 +1,27 @@
 <script setup lang="ts">
-import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
+import cardViewHorizontal from "@/components/molecules/cardViewHorizontal.vue";
-import { BandModel } from '@/data/models/acts/bandModel';
+import { BandModel } from "@/data/models/acts/bandModel";
-import { ConcertModel } from '@/data/models/acts/concertModel';
+import { ConcertModel } from "@/data/models/acts/concertModel";
-import { LocationModel } from '@/data/models/locations/locationModel';
+import { LocationModel } from "@/data/models/locations/locationModel";
-import { useRouter } from 'vue-router';
+import { useRouter } from "vue-router";
 
-const router = useRouter()
+const router = useRouter();
 
 defineProps({
   /** Concert to display */
   concert: {
     type: ConcertModel,
-    required: true
+    required: true,
   },
 
   band: {
     type: BandModel,
-    required: true
+    required: true,
   },
 
   location: {
     type: LocationModel,
-    required: true
+    required: true,
   },
 
   /** Display text parts as skeleton */
@@ -30,9 +30,9 @@ defineProps({
   /** Show or hide the button on the right side */
   showButton: {
     type: Boolean,
-    default: true
+    default: true,
-  }
+  },
-})
+});
 </script>
 
 <template>
@@ -40,7 +40,13 @@ defineProps({
     :title="concert.name"
     v-if="!loading"
     :link="showButton && concert.inStock > 0"
-    @click="showButton && concert.inStock > 0 ? router.push('/concerts/booking/' + location.urlName + '/' + concert.date) : () => {}"
+    @click="console.log(concert.date);
+      showButton && concert.inStock > 0
+        ? router.push(
+            '/concerts/booking/' + location.urlName + '/' + concert.date
+          )
+        : () => {}
+    "
   >
     <template #prepend>
       <div>
@@ -49,7 +55,9 @@ defineProps({
         </div>
 
         <div class="text-h6">
-          {{ new Date(concert.date).toLocaleString('default', { month: 'long' }) }}
+          {{
+            new Date(concert.date).toLocaleString("default", { month: "long" })
+          }}
         </div>
 
         <div class="text-h6">
@@ -71,28 +79,23 @@ defineProps({
     <template #append>
       <div>
         <div class="text-secondary font-weight-medium text-h6 pb-1">
-          {{ $t('misc.from') + ' ' + concert.price.toFixed(2) + ' €' }}
+          {{ $t("misc.from") + " " + concert.price.toFixed(2) + " €" }}
         </div>
 
         <div v-if="concert.inStock == 0 && showButton" class="text-h6">
-          {{ $t('concert.concertSoldOut') }}
+          {{ $t("concert.concertSoldOut") }}
         </div>
 
         <div v-else-if="showButton">
           <v-btn variant="flat" color="secondary">
-            {{ $t('concert.goToTheConcert') }}
+            {{ $t("concert.goToTheConcert") }}
           </v-btn>
         </div>
-
       </div>
     </template>
   </card-view-horizontal>
 
-  <card-view-horizontal 
+  <card-view-horizontal v-else :loading="loading">
-    v-else
+    <v-skeleton-loader type="text" />
-    :loading="loading"
-  >
-    <v-skeleton-loader
-      type="text" />
   </card-view-horizontal>
 </template>

src/components/organisms/concertSection.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import concertListItem from '@/components/pageParts/concertListItem.vue';
+import concertListItem from '@/components/organisms/concertListItem.vue';
-import CardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
+import CardViewHorizontal from '@/components/molecules/cardViewHorizontal.vue';
-import sectionDivider from '@/components/basics/sectionDivider.vue';
+import sectionDivider from '@/components/molecules/sectionDivider.vue';
 import { useBandStore } from '@/stores/band.store';
 
 const bandStore = useBandStore()

src/components/organisms/concertsListSection.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { useConcertStore } from "@/stores/concert.store";
+import concertListItem from "@/components/organisms/concertListItem.vue";
+import cardViewHorizontal from "@/components/molecules/cardViewHorizontal.vue";
+import sectionDivider from "@/components/molecules/sectionDivider.vue";
+import concertFilterbar from "./concertFilterbar.vue";
+
+const concertStore = useConcertStore();
+</script>
+
+<template>
+  <div v-if="concertStore.fetchInProgress">
+    <section-divider :loading="true" />
+    <v-row v-for="i in 3">
+      <v-col>
+        <card-view-horizontal :loading="true" />
+      </v-col>
+    </v-row>
+  </div>
+
+  <div
+    v-else-if="concertStore.concerts.length > 0"
+    v-for="(concert, index) of concertStore.concerts"
+  >
+    <div v-if="concert.offered">
+      <v-row
+        v-if="
+          index == 0 ||
+          new Date(concertStore.concerts[index - 1].date).getMonth() !=
+            new Date(concertStore.concerts[index].date).getMonth()
+        "
+      >
+        <v-col>
+          <section-divider
+            :title="
+              new Date(concert.date).toLocaleString('default', {
+                month: 'long',
+              }) +
+              ' ' +
+              new Date(concert.date).getFullYear()
+            "
+          />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <concert-list-item
+            :concert="concert"
+            :band="concert.band"
+            :location="concert.location"
+          />
+        </v-col>
+      </v-row>
+    </div>
+  </div>
+</template>

src/components/organisms/confirmDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ModelRef } from 'vue';
-import actionDialog from './../basics/actionDialog.vue';
+import actionDialog from '../organisms/actionDialog.vue';
-import outlinedButton from './../basics/outlinedButton.vue';
+import outlinedButton from '../atoms/outlinedButton.vue';
 
 const showDialog: ModelRef<boolean> = defineModel()
 

src/components/organisms/dashboardCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import cardView from '@/components/basics/cardView.vue';
+import cardView from '@/components/molecules/cardView.vue';
 import { useRouter } from 'vue-router';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
+import outlinedButton from '@/components/atoms/outlinedButton.vue';
 
 const router = useRouter()
 

src/components/organisms/exerciseDialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import actionDialog from "@/components/basics/actionDialog.vue";
+import actionDialog from "@/components/organisms/actionDialog.vue";
-import OutlinedButton from "@/components/basics/outlinedButton.vue";
+import OutlinedButton from "@/components/atoms/outlinedButton.vue";
 import {
   getExerciseGroupNameLanguage,
   getExerciseNameLanguage,

src/components/organisms/exerciseSection.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import cardView from "@/components/basics/cardView.vue";
+import cardView from "@/components/molecules/cardView.vue";
-import OutlinedButton from "@/components/basics/outlinedButton.vue";
+import OutlinedButton from "@/components/atoms/outlinedButton.vue";
 import { ExerciseGroupModel } from "@/data/models/exercises/exerciseGroupModel";
 import { ExerciseModel } from "@/data/models/exercises/exerciseModel";
 import { getExerciseGroupNameLanguage } from "@/scripts/languageScripts";
 import { useExerciseStore } from "@/stores/exercise.store";
 import { ref, watch } from "vue";
 import exerciseDialog from "./exerciseDialog.vue";
+import listItem from "@/components/atoms/listItem.vue";
 
 const exerciseStore = useExerciseStore();
 const exerciseGroups = ref<Array<ExerciseGroupModel>>([]);
@@ -49,9 +50,10 @@ watch(
   >
     <template #borderless>
       <v-list>
-        <v-list-item
+        <list-item
           v-for="group in exerciseGroups"
           :title="getExerciseGroupNameLanguage(group)"
+          hover
           :subtitle="
             $t('preferences.exercises.available', [
               filterByExerciseGroup(exerciseStore.exercises, group).filter((exercise) => exercise.available)

src/components/organisms/fileUploadDialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import actionDialog from '@/components/basics/actionDialog.vue';
+import actionDialog from '@/components/organisms/actionDialog.vue';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
+import outlinedButton from '@/components/atoms/outlinedButton.vue';
 import { useFilesStore } from '@/stores/files.store';
 import { ref } from 'vue';
 

src/components/organisms/gallerySection.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useBandStore } from '@/stores/band.store';
-import sectionDivider from '@/components/basics/sectionDivider.vue';
+import sectionDivider from '@/components/molecules/sectionDivider.vue';
 
 const bandStore = useBandStore()
 </script>

src/components/organisms/genreEditDialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import actionDialog from '@/components/basics/actionDialog.vue';
+import actionDialog from '@/components/organisms/actionDialog.vue';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
+import outlinedButton from '@/components/atoms/outlinedButton.vue';
 import { getStringRules } from '@/scripts/validationRules';
 import { useGenreStore } from '@/stores/genre.store';
 import { ref } from 'vue';

src/components/organisms/heroImage.vue

@@ -50,7 +50,7 @@ defineProps({
         </v-col>
 
 
-        <v-col cols="8">
+        <v-col cols="12" md="10">
           <!-- Title -->
           <v-skeleton-loader
             type="heading"

src/components/organisms/importExportSection.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import cardView from '@/components/basics/cardView.vue';
+import cardView from '@/components/molecules/cardView.vue';
-import OutlinedButton from "@/components/basics/outlinedButton.vue";
+import OutlinedButton from "@/components/atoms/outlinedButton.vue";
 
 </script>
 

src/components/organisms/locationConcertsSection.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useLocationStore } from '@/stores/location.store';
-import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
+import cardViewHorizontal from '@/components/molecules/cardViewHorizontal.vue';
-import sectionDivider from '@/components/basics/sectionDivider.vue';
+import sectionDivider from '@/components/molecules/sectionDivider.vue';
-import concertListItem from '@/components/pageParts/concertListItem.vue';
+import concertListItem from '@/components/organisms/concertListItem.vue';
 
 const locationStore = useLocationStore()
 </script>

src/components/organisms/locationListItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import cardViewTopImage from '../basics/cardViewTopImage.vue';
+import cardViewTopImage from '../molecules/cardViewTopImage.vue';
 import { useRouter } from 'vue-router';
 import { LocationModel } from '@/data/models/locations/locationModel';
 

src/components/organisms/locationSeatMapSection.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useLocationStore } from '@/stores/location.store';
-import seatPlanMap from '@/components/seatPlanMap/seatPlanMap.vue';
+import seatPlanMap from '@/components/organisms/seatPlanMap.vue';
-import sectionDivider from '@/components/basics/sectionDivider.vue';
+import sectionDivider from '@/components/molecules/sectionDivider.vue';
 
 const locationStore = useLocationStore()
 </script>

src/components/organisms/loginForm.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import cardView from '@/components/basics/cardView.vue';
+import cardView from '@/components/molecules/cardView.vue';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
+import outlinedButton from '@/components/atoms/outlinedButton.vue';
 import { useAccountStore } from '@/stores/account.store';
 import { watch } from 'vue';
 import { useRouter } from 'vue-router';

src/components/organisms/navigationBar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import navigationPrependItems from './navigationPrependItems.vue';
+import navigationPrependItems from '../molecules/navigationPrependItems.vue';
-import navigationAppendItems from './navigationAppendItems.vue';
+import navigationAppendItems from '../molecules/navigationAppendItems.vue';
 </script>
 
 <template>

src/components/organisms/orderDetailDialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import actionDialog from '@/components/basics/actionDialog.vue';
+import actionDialog from '@/components/organisms/actionDialog.vue';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
+import outlinedButton from '@/components/atoms/outlinedButton.vue';
 import { useOrderStore } from '@/stores/order.store';
 import moment from 'moment';
 

src/components/organisms/orderItem.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import cardView from '@/components/basics/cardView.vue';
+import cardView from '@/components/molecules/cardView.vue';
-import ticketListItem from '@/components/pageParts/ticketListItem.vue';
+import ticketListItem from '@/components/organisms/ticketListItem.vue';
 import { OrderApiModel } from '@/data/models/apiEndpoints/orderApiModel';
 import moment from 'moment';
 

src/components/organisms/orderingDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import actionDialog from '@/components/basics/actionDialog.vue';
+import actionDialog from '@/components/organisms/actionDialog.vue';
 import { useBasketStore } from '@/stores/basket.store';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
+import outlinedButton from '@/components/atoms/outlinedButton.vue';
 import { ModelRef, ref } from 'vue';
 import { useAccountStore } from '@/stores/account.store';
 import { AddressModel } from '@/data/models/user/addressModel';

src/components/organisms/pageSetupSection.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ThemeEnum } from '@/data/enums/themeEnums';
-import cardView from '@/components/basics/cardView.vue';
+import cardView from '@/components/molecules/cardView.vue';
 import { usePreferencesStore } from '@/stores/preferences.store';
 
 const preferencesStore = usePreferencesStore()

src/components/organisms/paymentEditDialog.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import actionDialog from '@/components/basics/actionDialog.vue';
+import actionDialog from '@/components/organisms/actionDialog.vue';
-import OutlinedButton from '@/components/basics/outlinedButton.vue';
+import OutlinedButton from '@/components/atoms/outlinedButton.vue';
 import { getIbanRules, getStringRules } from '@/scripts/validationRules';
 import { useAccountStore } from '@/stores/account.store';
-import cardViewOneLine from '@/components/basics/cardViewOneLine.vue';
+import cardViewOneLine from '@/components/molecules/cardViewOneLine.vue';
 import { ref } from 'vue';
 
 const valid = ref(false)

src/components/organisms/ratingSection.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { RatingModel } from '@/data/models/acts/ratingModel';
-import sectionDivider from '@/components/basics/sectionDivider.vue';
+import sectionDivider from '@/components/molecules/sectionDivider.vue';
 
 defineProps({
   /**
@@ -26,7 +26,7 @@ defineProps({
   </v-row>
 
   <v-row>
-    <v-col>
+    <v-col cols="12" md="6">
       <div class="d-flex align-center justify-center flex-column" style="height: 100%;">
         <div class="text-h2 mt-5">
           {{ rating.toFixed(1) }}
@@ -45,7 +45,7 @@ defineProps({
       </div>
     </v-col>
 
-    <v-col>
+    <v-col cols="12" md="6">
       <v-list style="background-color: transparent;">
         <v-list-item
           v-for="ratingValue in ratings"

src/components/organisms/registerForm.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import cardView from '@/components/basics/cardView.vue';
+import cardView from '@/components/molecules/cardView.vue';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
+import outlinedButton from '@/components/atoms/outlinedButton.vue';
 import { useAccountStore } from '@/stores/account.store';
 import { getEmailRules, getPasswordRules, getStringRules } from '@/scripts/validationRules';
 

src/components/organisms/searchBar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import cardView from '@/components/basics/cardView.vue';
+import cardView from '@/components/molecules/cardView.vue';
 import { useSearchStore } from '@/stores/search.store';
 
 const searchStore = useSearchStore()

src/components/organisms/seatGroupSheet.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { SeatGroupModel } from '@/data/models/locations/seatGroupModel';
 import seatGroupTable from './seatGroupTable.vue';
-import standingArea from './standingArea.vue';
+import standingArea from '@/components/organisms/standingArea.vue';
 import { ConcertModel } from '@/data/models/acts/concertModel';
 
 let props = defineProps({

src/components/organisms/step1.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import ServerStateText from '@/components/pageParts/serverStateText.vue';
+import ServerStateText from '@/components/organisms/serverStateText.vue';
 </script>
 
 <template>

src/components/organisms/systemSetupSection.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import cardView from "@/components/basics/cardView.vue";
+import cardView from "@/components/molecules/cardView.vue";
-import outlinedButton from "@/components/basics/outlinedButton.vue";
+import outlinedButton from "@/components/atoms/outlinedButton.vue";
-import confirmDialog from "@/components/basics/confirmDialog.vue";
+import confirmDialog from "@/components/organisms/confirmDialog.vue";
 import { ServerStateEnum } from "@/data/enums/serverStateEnum";
 import { usePreferencesStore } from "@/stores/preferences.store";
-import ServerStateText from "@/components/pageParts/serverStateText.vue";
+import ServerStateText from "@/components/organisms/serverStateText.vue";
 import { useRouter } from "vue-router";
 
 const preferenceStore = usePreferencesStore();

src/components/organisms/ticketListItem.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { ConcertModel } from '@/data/models/acts/concertModel';
-import cardWithLeftImage from '../basics/cardViewHorizontal.vue';
+import cardWithLeftImage from '../molecules/cardViewHorizontal.vue';
 import { dateStringToHumanReadableString } from '@/scripts/dateTimeScripts';
 import { BandModel } from '@/data/models/acts/bandModel';
 import { LocationModel } from '@/data/models/locations/locationModel';
 import { CityModel } from '@/data/models/locations/cityModel';
-import cardViewOneLine from '../basics/cardViewOneLine.vue';
+import cardViewOneLine from '../molecules/cardViewOneLine.vue';
 
 defineProps({
   concert: {

src/components/organisms/topGenresSection.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import CardView from "@/components/basics/cardView.vue";
+import CardView from "@/components/molecules/cardView.vue";
-import CardViewOneLine from "@/components/basics/cardViewOneLine.vue";
+import CardViewOneLine from "@/components/molecules/cardViewOneLine.vue";
-import SectionDivider from "@/components/basics/sectionDivider.vue";
+import SectionDivider from "@/components/molecules/sectionDivider.vue";
 import { GenreApiModel } from "@/data/models/acts/genreApiModel";
 import { useGenreStore } from "@/stores/genre.store";
 import { ref, watch } from "vue";
 import { useRouter } from "vue-router";
+import outlinedButton from "@/components/atoms/outlinedButton.vue";
 
 const genreStore = useGenreStore();
 const genresByNumberOfBands = ref<Array<GenreApiModel>>([]);
@@ -37,7 +38,7 @@ watch(
       <v-skeleton-loader :loading="true" type="card" />
     </v-col>
 
-    <v-col v-else v-for="genre in genresByNumberOfBands" cols="6" md="3">
+    <v-col v-else v-for="genre in genreStore.topGenres" cols="6" md="3">
       <card-view
         @click="router.push({ path: '/bands', query: { genreName: genre.name }})"
         :title="genre.name"
@@ -45,4 +46,17 @@ watch(
       />
     </v-col>
   </v-row>
+
+  <!-- todo?
+  <v-row>
+    <v-col>
+      <outlined-button
+        append-icon="mdi-chevron-right"
+        @click="router.push('/')"
+        block
+      >
+        {{ $t('genre.allGenres') }}
+      </outlined-button>
+    </v-col>
+  </v-row> -->
 </template>

src/components/organisms/topLocationsSection.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import outlinedButton from '@/components/basics/outlinedButton.vue';
+import outlinedButton from '@/components/atoms/outlinedButton.vue';
-import cardViewTopImage from '@/components/basics/cardViewTopImage.vue';
+import cardViewTopImage from '@/components/molecules/cardViewTopImage.vue';
-import sectionDivider from '@/components/basics/sectionDivider.vue';
+import sectionDivider from '@/components/molecules/sectionDivider.vue';
 import { useRouter } from 'vue-router';
 import { useLocationStore } from '@/stores/location.store';
 

src/components/organisms/upcomingConcertsSection.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useConcertStore } from '@/stores/concert.store';
 import { useRouter } from 'vue-router';
-import cardViewTopImage from '@/components/basics/cardViewTopImage.vue';
+import cardViewTopImage from '@/components/molecules/cardViewTopImage.vue';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
+import outlinedButton from '@/components/atoms/outlinedButton.vue';
-import sectionDivider from '@/components/basics/sectionDivider.vue';
+import sectionDivider from '@/components/molecules/sectionDivider.vue';
 import moment from 'moment';
 
 const concertStore = useConcertStore()

src/components/organisms/welcomeDialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import actionDialog from '@/components/basics/actionDialog.vue';
+import actionDialog from '@/components/organisms/actionDialog.vue';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
+import outlinedButton from '@/components/atoms/outlinedButton.vue';
 import { useFeedbackStore } from '@/stores/feedback.store';
 import { usePreferencesStore } from '@/stores/preferences.store';
 import { ref, watch } from 'vue';

src/layouts/accountSubPageLayout.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
+import outlinedButton from '@/components/atoms/outlinedButton.vue';
 
 const router = useRouter()
 </script>

src/layouts/dataLayout.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import outlinedButton from '@/components/basics/outlinedButton.vue';
+import outlinedButton from '@/components/atoms/outlinedButton.vue';
 import { useRouter } from 'vue-router';
 
 const fetchInProgress = defineModel("fetchInProgress", { default: false })

src/locales/de.json

@@ -297,7 +297,8 @@
   },
   "genre": {
     "withoutBand": "ohne Band",
-    "popular": "Beliebte Genres"
+    "popular": "Beliebte Genres",
+    "allGenres": "Alle Genres"
   },
   "admin": {
     "adminpanel": "Admin Panel"

src/locales/en.json

@@ -297,7 +297,8 @@
   },
   "genre": {
     "withoutBand": "without Band",
-    "popular": "Popular Genres"
+    "popular": "Popular Genres",
+    "allGenres": "All Genres"
   },
   "admin": {
     "adminpanel": "Admin Panel"

src/pages/AccountAddressesPage.vue

@@ -2,7 +2,7 @@
 import dataLayout from '@/layouts/dataLayout.vue';
 import { useAccountStore } from '@/stores/account.store';
 import { useFeedbackStore } from '@/stores/feedback.store';
-import addressEditDialog from './addressEditDialog.vue';
+import addressEditDialog from '@/components/organisms/addressEditDialog.vue';
 
 const accountStore = useAccountStore()
 const feedbackStore = useFeedbackStore()

src/pages/AccountHomePage.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useAccountStore } from '@/stores/account.store';
-import dashboardCard from '@/components/pageParts/dashboardCard.vue';
+import dashboardCard from '@/components/organisms/dashboardCard.vue';
 import { useOrderStore } from '@/stores/order.store';
-import OutlinedButton from '@/components/basics/outlinedButton.vue';
+import OutlinedButton from '@/components/atoms/outlinedButton.vue';
 import { useRouter } from 'vue-router';
 import moment from 'moment';
 import { millisecondsToHumanReadableString } from '@/scripts/dateTimeScripts';

src/pages/AccountLoginPage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import loginForm from './loginForm.vue';
+import loginForm from '@/components/organisms/loginForm.vue';
-import registerForm from './registerForm.vue';
+import registerForm from '@/components/organisms/registerForm.vue';
 
 const showRegisterCard = ref(false)
 </script>

src/pages/AccountOrdersPage.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useAccountStore } from '@/stores/account.store';
-import orderItem from './orderItem.vue';
+import orderItem from '@/components/organisms/orderItem.vue';
 import accountSubPageLayout from '@/layouts/accountSubPageLayout.vue';
-import circularProgressIndeterminate from '@/components/basics/circularProgressIndeterminate.vue';
+import circularProgressIndeterminate from '@/components/atoms/circularProgressIndeterminate.vue';
 import { useOrderStore } from '@/stores/order.store';
 
 const accountStore = useAccountStore()

src/pages/AccountPaymentsPage.vue

@@ -2,7 +2,7 @@
 import dataLayout from '@/layouts/dataLayout.vue';
 import { useAccountStore } from '@/stores/account.store';
 import { useFeedbackStore } from '@/stores/feedback.store';
-import PaymentEditDialog from './paymentEditDialog.vue';
+import paymentEditDialog from '@/components/organisms/paymentEditDialog.vue';
 
 const accountStore = useAccountStore()
 const feedbackStore = useFeedbackStore()

src/pages/AccountUserDataPage.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import accountDataCard from './accountDataCard.vue';
+import accountDataCard from '@/components/organisms/accountDataCard.vue';
-import accountManagingCard from './accountManagingCard.vue';
+import accountManagingCard from '@/components/organisms/accountManagingCard.vue';
 import { useRouter } from 'vue-router';
 import accountSubPageLayout from '@/layouts/accountSubPageLayout.vue';
 

src/pages/AdminBandsPage.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useBandStore } from '@/stores/band.store';
-import bandEditDialog from './bandEditDialog.vue';
+import bandEditDialog from '@/components/organisms/bandEditDialog.vue';
 import dataLayout from '@/layouts/dataLayout.vue';
 import { useFeedbackStore } from '@/stores/feedback.store';
 

src/pages/AdminDashboardPage.vue

@@ -5,7 +5,7 @@ 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 '../../../components/pageParts/dashboardCard.vue';
+import dashboardCard from '@/components/organisms/dashboardCard.vue';
 import { useOrderStore } from '@/stores/order.store';
 import { useFilesStore } from '@/stores/files.store';
 

src/pages/AdminFilesPage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import dataLayout from '@/layouts/dataLayout.vue';
 import { ref } from 'vue';
-import FileUploadDialog from './fileUploadDialog.vue';
+import fileUploadDialog from '@/components/organisms/fileUploadDialog.vue';
 import { useFilesStore } from '@/stores/files.store';
 
 const filesStore = useFilesStore()

src/pages/AdminGenresPage.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import dataLayout from '@/layouts/dataLayout.vue';
-import genreEditDialog from './genreEditDialog.vue';
+import genreEditDialog from '@/components/organisms/genreEditDialog.vue';
 import { useGenreStore } from '@/stores/genre.store';
 import { useFeedbackStore } from '@/stores/feedback.store';
 

src/pages/AdminOrdersPage.vue

@@ -2,7 +2,7 @@
 import dataLayout from '@/layouts/dataLayout.vue';
 import { useOrderStore } from '@/stores/order.store';
 import moment from 'moment';
-import OrderDetailDialog from './orderDetailDialog.vue';
+import orderDetailDialog from '@/components/organisms/orderDetailDialog.vue';
 import { useFeedbackStore } from '@/stores/feedback.store';
 
 const orderStore = useOrderStore()

src/pages/BandDetailPage.vue

@@ -1,15 +1,19 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
-import ratingSection from './ratingSection.vue';
+import ratingSection from '../components/organisms/ratingSection.vue';
-import bandMemberSection from './bandMemberSection.vue';
+import bandMemberSection from '../components/organisms/bandMemberSection.vue';
-import gallerySection from './gallerySection.vue';
+import gallerySection from '../components/organisms/gallerySection.vue';
-import concertSection from './concertSection.vue';
+import concertSection from '../components/organisms/concertSection.vue';
-import heroImage from '@/components/pageParts/heroImage.vue';
+import heroImage from '@/components/organisms/heroImage.vue';
 import { useBandStore } from '@/stores/band.store';
 import { onMounted, watch } from 'vue';
+import { useConcertStore } from '@/stores/concert.store';
 
 const router = useRouter()
 const bandStore = useBandStore()
+const concertStore = useConcertStore()
+
+concertStore.getConcerts()
 
 onMounted(async () => {
   bandStore.getBand(String(router.currentRoute.value.params.name).replaceAll('-', ' '))
@@ -34,7 +38,7 @@ watch(() => router.currentRoute.value.params.name, () => {
     <v-row>
       <v-spacer />
 
-      <v-col cols="10">
+      <v-col cols="12" md="10">
         <concert-section />
 
         <band-member-section />

src/pages/BandListPage.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useBandStore } from '@/stores/band.store';
-import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
+import cardViewHorizontal from '@/components/molecules/cardViewHorizontal.vue';
-import bandListItem from '@/components/pageParts/bandListItem.vue';
+import bandListItem from '@/components/organisms/bandListItem.vue';
-import bandFilterbar from './bandFilterbar.vue';
+import bandFilterbar from '../components/organisms/bandFilterbar.vue';
 import { watch } from 'vue';
 import { useRouter } from 'vue-router';
 
@@ -39,8 +39,8 @@ watch(() => router.currentRoute.value.query, () => {
         </v-row>
 
         <v-row
-          v-else-if="bandStore.bands.length > 0"
+          v-else-if="bandStore.filteredBands.length > 0"
-          v-for="band in bandStore.bands"
+          v-for="band in bandStore.filteredBands"
         >
           <v-col>
             <band-list-item

src/pages/BasketPage.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { useBasketStore } from '@/stores/basket.store';
-import cardView from '@/components/basics/cardView.vue';
+import cardView from '@/components/molecules/cardView.vue';
-import orderingDialog from './orderingDialog.vue';
+import orderingDialog from '../components/organisms/orderingDialog.vue';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
+import outlinedButton from '@/components/atoms/outlinedButton.vue';
 import { ref } from 'vue';
 import { useAccountStore } from '@/stores/account.store';
-import ticketsTable from './ticketsTable.vue';
+import ticketsTable from '../components/organisms/ticketsTable.vue';
 
 const basketStore = useBasketStore()
 const accountStore = useAccountStore()

src/pages/ConcertBookingPage.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import seatPlanMap from '@/components/seatPlanMap/seatPlanMap.vue';
+import seatPlanMap from '@/components/organisms/seatPlanMap.vue';
 import { useRouter } from 'vue-router';
-import sectionDivider from '@/components/basics/sectionDivider.vue';
+import sectionDivider from '@/components/molecules/sectionDivider.vue';
 import { useBasketStore } from '@/stores/basket.store';
-import concertListItem from '@/components/pageParts/concertListItem.vue';
+import concertListItem from '@/components/organisms/concertListItem.vue';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
+import outlinedButton from '@/components/atoms/outlinedButton.vue';
 import { useConcertStore } from '@/stores/concert.store';
-import ticketListItem from '@/components/pageParts/ticketListItem.vue';
+import ticketListItem from '@/components/organisms/ticketListItem.vue';
-import circularProgressIndeterminate from '@/components/basics/circularProgressIndeterminate.vue';
+import circularProgressIndeterminate from '@/components/atoms/circularProgressIndeterminate.vue';
 import { onMounted, watch } from 'vue';
 
 const router = useRouter()

src/pages/ConcertListPage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useConcertStore } from '@/stores/concert.store';
-import concertFilterbar from './concertFilterbar.vue';
+import concertFilterbar from '../components/organisms/concertFilterbar.vue';
-import ConcertsListSection from './concertsListSection.vue';
+import concertsListSection from '../components/organisms/concertsListSection.vue';
 import { onMounted } from 'vue';
 
 const concertStore = useConcertStore()

src/pages/HelpPage.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useExerciseStore } from "@/stores/exercise.store";
-import outlinedButton from "@/components/basics/outlinedButton.vue";
+import outlinedButton from "@/components/atoms/outlinedButton.vue";
 import { generateResultsPdf } from "@/scripts/pdfScripts";
 import { usePreferencesStore } from "@/stores/preferences.store";
-import cardView from "@/components/basics/cardView.vue";
+import cardView from "@/components/molecules/cardView.vue";
 import { LanguageEnum } from "@/data/enums/languageEnum";
 import { ExerciseModel } from "@/data/models/exercises/exerciseModel";
 import { getExerciseDotColor } from "@/scripts/colorScripts";
@@ -104,7 +104,7 @@ function generateExerciseKey() {
                 <!-- Exercise item -->
                 <v-timeline-item
                   v-if="exercise.available"
-                  :dot-color="exercise.solved ? 'green' : 'primary'"
+                  :dot-color="exercise.solved ? 'green-darken-4' : 'primary'"
                   :icon="exercise.solved ? 'mdi-check' : 'mdi-pencil'"
                 >
                   <!-- Right side -->
@@ -115,7 +115,7 @@ function generateExerciseKey() {
                         exercise.exerciseNr,
                       ]) + getExerciseNameLanguage(exercise)
                     "
-                    :color="exercise.solved ? 'green' : 'primary'"
+                    :color="exercise.solved ? 'green-darken-4' : 'primary'"
                   >
                     {{ getExerciseDescriptionLanguage(exercise) }}
                   </card-view>

src/pages/HomePage.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { useConcertStore } from "@/stores/concert.store";
 import { useLocationStore } from "@/stores/location.store";
-import bandSection from "./bandsSection.vue";
+import bandsSection from "../components/organisms/bandsSection.vue";
-import UpcomingConcertsSection from "./upcomingConcertsSection.vue";
+import upcomingConcertsSection from "../components/organisms/upcomingConcertsSection.vue";
-import TopLocationsSection from "./topLocationsSection.vue";
+import topLocationsSection from "../components/organisms/topLocationsSection.vue";
 import { usePreferencesStore } from "@/stores/preferences.store";
-import welcomeDialog from "./welcomeDialog/dialog.vue";
+import welcomeDialog from "../components/organisms/welcomeDialog.vue";
 import { ref } from "vue";
-import genresSection from "./genresSection.vue";
+import topGenresSection from "../components/organisms/topGenresSection.vue";
 
 const concertStore = useConcertStore();
 const locationStore = useLocationStore();
@@ -25,7 +25,7 @@ if (preferencesStore.firstStartup) {
 
 <template>
   <div class="pt-4">
-    <band-section v-if="!preferencesStore.firstStartup" />
+    <bands-section v-if="!preferencesStore.firstStartup" />
   </div>
 
   <v-container v-if="!preferencesStore.firstStartup">
@@ -35,7 +35,7 @@ if (preferencesStore.firstStartup) {
       <v-col cols="10">
         <upcoming-concerts-section />
 
-        <genres-section />
+        <top-genres-section />
 
         <top-locations-section />
       </v-col>