From 9ea437b8246b4974be644889f7812798506a93a3 Mon Sep 17 00:00:00 2001
From: Samuel <s.a.j.oosterholt@student.tue.nl>
Date: Tue, 12 Nov 2024 22:30:10 +0100
Subject: [PATCH 01/16] fix(dashboard): user being routed before app was ready
 (#453)

---
 apps/dashboard/src/main.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dashboard/src/main.ts b/apps/dashboard/src/main.ts
index f6bb8bfd..27b01e92 100644
--- a/apps/dashboard/src/main.ts
+++ b/apps/dashboard/src/main.ts
@@ -49,7 +49,6 @@ const app = createApp(App);
 
 app.use(i18n);
 app.use(createPinia());
-app.use(router);
 app.use(PrimeVue);
 
 app.use(ToastService);
@@ -85,5 +84,6 @@ app.component('ConfirmDialog', ConfirmDialog);
 app.component('Divider', Divider);
 
 beforeLoad().then(() => {
+  app.use(router);
   app.mount('#app');
 });

From 1c8377f91d2f35124381405c378a6cb20233c93a Mon Sep 17 00:00:00 2001
From: Samuel <s.a.j.oosterholt@student.tue.nl>
Date: Tue, 12 Nov 2024 22:45:44 +0100
Subject: [PATCH 02/16] ci: remove building of pos-ab (#454)

---
 .github/workflows/docker.yml | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml
index 3333181a..909b8758 100644
--- a/.github/workflows/docker.yml
+++ b/.github/workflows/docker.yml
@@ -16,7 +16,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        app: [ dashboard, point-of-sale, point-of-sale-ab]
+        app: [ dashboard, point-of-sale ]
         include:
           - app: dashboard
             env_file_main: ${{ vars.ENV_FILE_PRODUCTION }}
@@ -30,13 +30,6 @@ jobs:
             docker_tag: ${{ vars.DOCKER_TAG_POS }}
             dockerfile_path: "apps/point-of-sale/Dockerfile"
             dir: "point-of-sale"
-          - app: point-of-sale-ab
-            env_file_main: ${{ vars.ENV_FILE_PRODUCTION }}
-            env_file_develop: ${{ vars.ENV_FILE_PRODUCTION }}
-            docker_tag: ${{ vars.DOCKER_TAG_POS }}-ab
-            dockerfile_path: "apps/point-of-sale/Dockerfile"
-            dir: "point-of-sale"
-
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4

From b746f9bb083d02da6297f4cd79c20761222f213e Mon Sep 17 00:00:00 2001
From: Jobbiesaus <54932894+Jobbiesaus@users.noreply.github.com>
Date: Fri, 15 Nov 2024 19:03:50 +0100
Subject: [PATCH 03/16] feat(dashboard): allow admin to create and delete API
 key for others (#455)

---
 .../components/users/AdminUserInfoCard.vue    | 69 +++++++++++++++++++
 .../user/components/UserSettingsComponent.vue |  4 +-
 lib/common/src/stores/user.store.ts           |  3 +
 3 files changed, 75 insertions(+), 1 deletion(-)

diff --git a/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue b/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
index 35194844..0b294803 100644
--- a/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
+++ b/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
@@ -6,8 +6,25 @@
   >
       <div class="flex flex-column justify-content-between gap-2">
         <UserEditForm :user="props.user" :form="form" :edit="edit" @update:edit="edit = $event"/>
+        <Divider />
+        <h4 class="mt-0">{{ t('modules.user.settings.apiKeys') }}</h4>
+        <div class="flex flex-row align-items-center w-11">
+          <p class="flex-grow-1 my-1">{{ t('modules.user.settings.changeApiKey') }}</p>
+          <i
+              class="pi pi-arrow-up-right text-gray-500 flex align-items-center cursor-pointer"
+              @click="confirmChangeApiKey()"
+          />
+        </div>
+        <div class="flex flex-row align-items-center w-11">
+          <p class="flex-grow-1 my-1">{{ t('modules.user.settings.deleteApiKey') }}</p>
+          <i
+              class="pi pi-arrow-up-right text-gray-500 flex align-items-center cursor-pointer"
+              @click="confirmDeleteApiKey()"
+          />
+        </div>
       </div>
   </FormCard>
+  <ConfirmDialog />
 </template>
 
 <script setup lang="ts">
@@ -18,8 +35,16 @@ import { schemaToForm } from "@/utils/formUtils";
 import { updateUserDetailsObject } from "@/utils/validation-schema";
 import UserEditForm from "@/modules/admin/components/users/forms/UserEditForm.vue";
 import { useI18n } from "vue-i18n";
+import apiService from "@/services/ApiService";
+import { handleError } from "@/utils/errorUtils";
+import { useConfirm } from "primevue/useconfirm";
+import { useUserStore } from "@sudosos/sudosos-frontend-common";
+import { useToast } from "primevue/usetoast";
 
 const { t } = useI18n();
+const confirm = useConfirm();
+const userStore = useUserStore();
+const toast = useToast();
 
 const props = defineProps({
   user: {
@@ -55,6 +80,50 @@ onMounted(() => {
     updateFieldValues(props.user);
   }
 });
+
+const confirmChangeApiKey = () => {
+  confirm.require({
+    message: t('modules.user.settings.confirmChangeApiKey'),
+    header: t('modules.user.settings.changeApiKey'),
+    icon: 'pi pi-exclamation-triangle',
+    accept: () => {
+      userStore.fetchUserApi(apiService, props.user.id)
+          .then((res) => {
+            toast.add({
+              severity: "success",
+              summary: t('common.toast.success.success'),
+              detail: `${t('common.toast.success.apiKeyChanged')} \n ${res.data.key}`,
+              life: 5000,
+            });
+          })
+          .catch((err) => {
+            handleError(err, toast);
+          });
+    },
+  });
+};
+
+const confirmDeleteApiKey = () => {
+  confirm.require({
+    message: t('modules.user.settings.confirmDeleteApiKey'),
+    header: t('modules.user.settings.deleteApiKey'),
+    icon: 'pi pi-exclamation-triangle',
+    accept: () => {
+      apiService.user.deleteUserKey(props.user.id)
+          .then(() => {
+            toast.add({
+              severity: "success",
+              summary: t('common.toast.success.success'),
+              detail: t('common.toast.success.apiKeyDeleted'),
+              life: 5000,
+            });
+          })
+          .catch((err) => {
+            handleError(err, toast);
+          });
+    },
+  });
+};
 </script>
 
 <style scoped lang="scss">
diff --git a/apps/dashboard/src/modules/user/components/UserSettingsComponent.vue b/apps/dashboard/src/modules/user/components/UserSettingsComponent.vue
index 60a69a7f..3fc32cfd 100644
--- a/apps/dashboard/src/modules/user/components/UserSettingsComponent.vue
+++ b/apps/dashboard/src/modules/user/components/UserSettingsComponent.vue
@@ -87,6 +87,7 @@ import { useConfirm } from "primevue/useconfirm";
 import { useToast } from "primevue/usetoast";
 import apiService from "@/services/ApiService";
 import { handleError } from "@/utils/errorUtils";
+import { useUserStore } from "@sudosos/sudosos-frontend-common";
 
 async function startScan() {
   if (!('NDEFReader' in window)) {
@@ -151,6 +152,7 @@ const editPin = ref(true);
 const confirm = useConfirm();
 const toast = useToast();
 const dataAnalysis = ref(props.user.extensiveDataProcessing);
+const userStore = useUserStore();
 
 const handleChangeDataAnalysis = (value: boolean) => {
   apiService.user.updateUser(props.user.id, { extensiveDataProcessing: value })
@@ -174,7 +176,7 @@ const confirmChangeApiKey = () => {
     header: t('modules.user.settings.changeApiKey'),
     icon: 'pi pi-exclamation-triangle',
     accept: () => {
-      apiService.user.updateUserKey(props.user.id)
+      userStore.fetchUserApi(apiService, props.user.id)
           .then((res) => {
             toast.add({
               severity: "success",
diff --git a/lib/common/src/stores/user.store.ts b/lib/common/src/stores/user.store.ts
index e28f0644..f2db0cd9 100644
--- a/lib/common/src/stores/user.store.ts
+++ b/lib/common/src/stores/user.store.ts
@@ -125,6 +125,9 @@ export const useUserStore = defineStore('user', {
         return res.data as GewisUserResponse;
       });
     },
+    async fetchUserApi(service: ApiService, id: number){
+      return (await service.user.updateUserKey(id));
+    },
     async waiveUserFine(id: number, amount: DineroObjectRequest, service: ApiService) {
       return service.user.waiveUserFines(id, {
         amount

From f7027bf6bcddd62b5acf39f0e4738902fe89b1b1 Mon Sep 17 00:00:00 2001
From: Jobbiesaus <54932894+Jobbiesaus@users.noreply.github.com>
Date: Tue, 19 Nov 2024 15:38:46 +0100
Subject: [PATCH 04/16] fix(dashboard): Deselecting active filter shows active
 and inactive user (#459)

---
 .../modules/admin/views/AdminUserOverView.vue | 27 ++++++++++---------
 apps/dashboard/src/services/ApiService.ts     |  2 ++
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/apps/dashboard/src/modules/admin/views/AdminUserOverView.vue b/apps/dashboard/src/modules/admin/views/AdminUserOverView.vue
index c41367b4..101ae0f9 100644
--- a/apps/dashboard/src/modules/admin/views/AdminUserOverView.vue
+++ b/apps/dashboard/src/modules/admin/views/AdminUserOverView.vue
@@ -123,6 +123,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, type Ref, watch } from "vue";
 import apiService from '@/services/ApiService';
+import { DEFAULT_PAGINATION_MAX } from '@/services/ApiService';
 import type { GewisUserResponse, UserResponse } from "@sudosos/sudosos-client";
 import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
@@ -191,19 +192,19 @@ function debounce(func: (skip: number) => Promise<void>, delay: number): (skip:
 
 const apiCall: (skip: number) => Promise<void> = async (skip: number) => {
   await apiService.user
-    .getAllUsers(
-      Number.MAX_SAFE_INTEGER,
-      skip,
-      searchQuery.value.split(' ')[0] || '',
-      isActiveFilter.value,
-      ofAgeFilter.value,
-      undefined,
-      filters.value.type.value || undefined
-    )
-    .then((response) => {
-      totalRecords.value = response.data._pagination.count || 0;
-      allUsers.value = response.data.records;
-    });
+      .getAllUsers(
+          DEFAULT_PAGINATION_MAX,
+          skip,
+          searchQuery.value.split(' ')[0] || '',
+          isActiveFilter.value ? isActiveFilter.value : undefined,
+          ofAgeFilter.value,
+          undefined,
+          filters.value.type.value || undefined
+      )
+      .then((response) => {
+        totalRecords.value = response.data._pagination.count || 0;
+        allUsers.value = response.data.records;
+      });
 };
 
 const delayedAPICall = debounce(apiCall, 250);
diff --git a/apps/dashboard/src/services/ApiService.ts b/apps/dashboard/src/services/ApiService.ts
index a144f47f..681d18c5 100644
--- a/apps/dashboard/src/services/ApiService.ts
+++ b/apps/dashboard/src/services/ApiService.ts
@@ -1,3 +1,5 @@
 import { ApiService } from "@sudosos/sudosos-frontend-common";
 const apiService = new ApiService(window.location.origin + "/api/v1");
 export default apiService;
+
+export const DEFAULT_PAGINATION_MAX = 500;

From 73b80cf321bbb2dd01b2a31956b563ae61f268e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=ABl=20van=20de=20Vrie?=
 <46963141+noelvandevrie@users.noreply.github.com>
Date: Tue, 19 Nov 2024 17:07:42 +0100
Subject: [PATCH 05/16] fix(dashboard):web-nfc (#460)

* fix(dashboard): web-nfc toasts and api call

Fixes the unclear messaging of the toasts, now specifies if you are on desktop or mobile, and if you are on mobile it will give details depending on ios or android. Additionally the nfcCode is now consistent with the POS.

* fix(dashboard): remove accidentally commited files

removes accidentally commited files.

* fix(dashboard): fix in if statements deciding which toast

fixes small logic error in the if statements that decide which useragent gets which error toast.

* code(dashboard): Clean up code and change error messages

* code(dashboard): fix nit about nfcCode

fixes the nit about the nfcCode and makes the function call more neat.

---------

Co-authored-by: Job van de Ven <jobvandeven@live.nl>
---
 .../src/locales/en/common/common.json         |  6 ++--
 .../src/locales/nl/common/common.json         |  4 ++-
 .../user/components/UserSettingsComponent.vue | 33 ++++++++++++++-----
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/apps/dashboard/src/locales/en/common/common.json b/apps/dashboard/src/locales/en/common/common.json
index e0bc6814..6799e386 100644
--- a/apps/dashboard/src/locales/en/common/common.json
+++ b/apps/dashboard/src/locales/en/common/common.json
@@ -106,8 +106,10 @@
             },
             "error": {
                 "error": "Error",
-                "scanNotStarted": "NFC scan not started, please check permission regarding NFC.",
-                "unsupported": "Your browser is not mobile and does not have Web NFC."
+                "scanNotStarted": "NFC scan not started, please check permissions regarding NFC.",
+                "desktopUnsupported": "NFC scans can only be done using a mobile phone.",
+                "androidUnsupported": "Only Chrome browsers support Web NFC.",
+                "iosUnsupported": "iOS does not support Web NFC."
             },
             "canceled": "Canceled",
             "reject": {
diff --git a/apps/dashboard/src/locales/nl/common/common.json b/apps/dashboard/src/locales/nl/common/common.json
index 79a1fed0..51cb36fb 100644
--- a/apps/dashboard/src/locales/nl/common/common.json
+++ b/apps/dashboard/src/locales/nl/common/common.json
@@ -107,7 +107,9 @@
             "error": {
                 "error": "Error",
                 "scanNotStarted": "NFC scan niet gestart, kijk of NFC permissies kloppen.",
-                "unsupported": "Je browser is niet mobiel en heeft geen Web NFC."
+                "desktopUnsupported": "NFC scans kunnen alleen op telefoons gedaan worden.",
+                "androidUnsupported": "Alleen Chrome browsers bieden ondersteuning voor Web NFC.",
+                "iosUnsupported": "iOS heeft geen ondersteuning voor Web NFC."
             },
             "canceled": "Geannuleerd",
             "reject": {
diff --git a/apps/dashboard/src/modules/user/components/UserSettingsComponent.vue b/apps/dashboard/src/modules/user/components/UserSettingsComponent.vue
index 3fc32cfd..2362d819 100644
--- a/apps/dashboard/src/modules/user/components/UserSettingsComponent.vue
+++ b/apps/dashboard/src/modules/user/components/UserSettingsComponent.vue
@@ -90,14 +90,30 @@ import { handleError } from "@/utils/errorUtils";
 import { useUserStore } from "@sudosos/sudosos-frontend-common";
 
 async function startScan() {
+
+  const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
+  const isAndroid = /Android/i.test(navigator.userAgent);
+
   if (!('NDEFReader' in window)) {
+    let detail = "";
+    if (isIOS) {
+      detail = t("common.toast.error.iosUnsupported");
+    }
+    else if (isAndroid) {
+      detail = t("common.toast.error.androidUnsupported");
+    }
+    else {
+      detail = t("common.toast.error.desktopUnsupported");
+    }
+
     toast.add({
-          severity: "error",
-          summary: t("common.toast.error.error"),
-          detail: t("common.toast.error.unsupported"),
-          life: 3000,
-        });
-    return;
+      severity: "error",
+      summary: t("common.toast.error.error"),
+      detail: detail,
+      life: 3000,
+    });
+
+
   }
 
   const ndef = new window.NDEFReader();
@@ -114,9 +130,9 @@ async function startScan() {
   ndef.onreading = async (event: NDEFReadingEvent) => {
 
     // Extract and log the NFC tag's ID (serial number)
-    const tagId = event.serialNumber;
+    const nfcCode = event.serialNumber.toLowerCase().replace(/[^a-z0-9]/g, '');
 
-    await apiService.user.updateUserNfc(props.user.id, { nfcCode: tagId })
+    await apiService.user.updateUserNfc(props.user.id, { nfcCode })
         .then(() => {
           toast.add({
             severity: "success",
@@ -136,7 +152,6 @@ async function startScan() {
   };
 }
 
-
 const props = defineProps({
   user: {
     type: Object as PropType<UserResponse>,

From acbc0ebbc826056e4b1ffa7581762cab86ea56f1 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 19 Nov 2024 16:22:57 +0000
Subject: [PATCH 06/16] chore(deps): bump marked from 11.2.0 to 15.0.1 in
 /apps/dashboard (#458)

Bumps [marked](https://github.com/markedjs/marked) from 11.2.0 to 15.0.1.
- [Release notes](https://github.com/markedjs/marked/releases)
- [Changelog](https://github.com/markedjs/marked/blob/master/.releaserc.json)
- [Commits](https://github.com/markedjs/marked/compare/v11.2.0...v15.0.1)

---
updated-dependencies:
- dependency-name: marked
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 apps/dashboard/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
index 0d340405..cd3cc183 100644
--- a/apps/dashboard/package.json
+++ b/apps/dashboard/package.json
@@ -19,7 +19,7 @@
     "@sudosos/sudosos-frontend-common": "workspace:^",
     "@vee-validate/rules": "^4.14.1",
     "@vee-validate/yup": "^4.14.1",
-    "marked": "^11.2.0",
+    "marked": "^15.0.1",
     "vee-validate": "^4.14.1",
     "vue-i18n": "^9.14.1",
     "vue3-pdf-app": "^1.0.3",

From e2dd737982873746c98d48c695d9dba825a6cc88 Mon Sep 17 00:00:00 2001
From: SvenMokveldje <39305538+SvenMokveldje@users.noreply.github.com>
Date: Mon, 25 Nov 2024 12:39:09 +0100
Subject: [PATCH 07/16] feat: feedback-user-cannot-in-debt (#457)

---
 .../components/Cart/CartActionsComponent.vue  | 38 ++++++++++++++++++-
 .../src/stores/activity.store.ts              |  1 +
 apps/point-of-sale/src/stores/cart.store.ts   | 22 ++++++++---
 3 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/apps/point-of-sale/src/components/Cart/CartActionsComponent.vue b/apps/point-of-sale/src/components/Cart/CartActionsComponent.vue
index da69bb20..24af9da7 100644
--- a/apps/point-of-sale/src/components/Cart/CartActionsComponent.vue
+++ b/apps/point-of-sale/src/components/Cart/CartActionsComponent.vue
@@ -1,4 +1,20 @@
 <template>
+  <Dialog
+    v-model:visible="showDebtWarningDialog"
+    header="Warning!"
+    :closable="true"
+    modal
+    :content-style="{ width: '35rem' }"
+    @click="resetDialog"
+    :pt="{
+        header: () => ({class: ['dialog-header']}),
+        closeButton: () => ({class: ['dialog-close']})}"
+  >
+    <Message severity="warn" :closable="false" :icon="undefined">
+      You cannot checkout as you are a user that cannot go into debt! <br>
+      Please remove items before you can continue.
+    </Message>
+  </Dialog>
   <div class="flex justify-content-between w-full">
     <button
         class="c-btn rounder font-medium checkout text-3xl"
@@ -28,7 +44,6 @@ const cartStore = useCartStore();
 const cartItems = cartStore.getProducts;
 const borrelMode = computed(() => settings.isBorrelmode);
 const sound = ref<HTMLAudioElement | null>(null);
-
 const buyer = computed(() => cartStore.getBuyer);
 
 const checkoutText = computed(() => {
@@ -41,6 +56,14 @@ const checkoutText = computed(() => {
 const enabled = computed(() => {
   return cartItems.length > 0 && buyer.value;
 });
+const unallowedUserInDebt = computed(() => cartStore.checkUnallowedUserInDebt());
+const showDebtWarning = ref(true);
+const showDebtWarningDialog = computed(() => {
+  return unallowedUserInDebt.value && showDebtWarning.value;
+});
+const resetDialog = () => {
+  showDebtWarning.value = false;
+};
 
 const duration = ref(3);
 const checkingOut = ref(false);
@@ -68,11 +91,14 @@ watch(cartItems, () => {
 });
 
 const finalizeCheckout = async () => {
+  if (unallowedUserInDebt.value) return stopCheckout();
+
   stopCheckout();
   if (sound.value) {
     sound.value = new Audio('sounds/rct-cash.wav');
     sound.value.play();
   }
+
   await cartStore.checkout();
   checkingOut.value = false;
   duration.value = 3;
@@ -80,7 +106,7 @@ const finalizeCheckout = async () => {
 };
 const checkout = async () => {
   if (!enabled.value) return;
-
+  if (unallowedUserInDebt.value) return stopCheckout();
 
   if (borrelMode.value) {
     emit('selectCreator');
@@ -120,4 +146,12 @@ const checkout = async () => {
     background-color: grey;
   }
 }
+.dialog-header {
+  background: var(--accent-color)!important;
+  color: white!important;
+}
+
+.dialog-close {
+  color: white!important;
+}
 </style>
diff --git a/apps/point-of-sale/src/stores/activity.store.ts b/apps/point-of-sale/src/stores/activity.store.ts
index 28125493..bbcd553f 100644
--- a/apps/point-of-sale/src/stores/activity.store.ts
+++ b/apps/point-of-sale/src/stores/activity.store.ts
@@ -79,6 +79,7 @@ export const useActivityStore = defineStore('activity', {
 
     async onTimerEnd() {
       const cartStore = useCartStore();
+      if (cartStore.checkUnallowedUserInDebt()) return logoutService();
       if (useSettingStore().isBorrelmode) return;
       if (cartStore.cartTotalCount > 0 ) await useCartStore().checkout();
       await logoutService();
diff --git a/apps/point-of-sale/src/stores/cart.store.ts b/apps/point-of-sale/src/stores/cart.store.ts
index f7067ede..973b064c 100644
--- a/apps/point-of-sale/src/stores/cart.store.ts
+++ b/apps/point-of-sale/src/stores/cart.store.ts
@@ -4,7 +4,7 @@ import {
   ContainerResponse,
   ProductResponse,
   SubTransactionRequest,
-  TransactionRequest,
+  TransactionRequest, UserResponse,
 } from '@sudosos/sudosos-client';
 import { SubTransactionRowRequest } from '@sudosos/sudosos-client/src/api';
 import { usePointOfSaleStore } from '@/stores/pos.store';
@@ -20,10 +20,10 @@ export interface CartProduct {
 
 interface CartState {
   products: CartProduct[]
-  buyer: BaseUserResponse | null
+  buyer: UserResponse | null
   buyerBalance: DineroObjectResponse | null
   createdBy: BaseUserResponse | null
-  lockedIn: BaseUserResponse | null
+  lockedIn: UserResponse | null
 }
 export const useCartStore = defineStore('cart', {
   state: (): CartState => ({
@@ -46,15 +46,15 @@ export const useCartStore = defineStore('cart', {
         return total + product.count * productPrice;
       }, 0);
     },
-    getBuyer(): BaseUserResponse | null {
+    getBuyer(): UserResponse | null {
       return this.buyer;
     }
   },
   actions: {
-    setLockedIn(lockedIn: BaseUserResponse | null) {
+    setLockedIn(lockedIn: UserResponse | null) {
       this.lockedIn = lockedIn;
     },
-    async setBuyer(buyer: BaseUserResponse | null) {
+    async setBuyer(buyer: UserResponse | null) {
       this.buyer = buyer;
       if (buyer) {
         const response = await apiService.balance.getBalanceId(buyer.id).catch(this.buyerBalance = null);
@@ -79,6 +79,16 @@ export const useCartStore = defineStore('cart', {
         this.products.push(cartProduct);
       }
     },
+    checkUnallowedUserInDebt(): boolean{
+      const buyer = this.buyer;
+      if (buyer) {
+        if (buyer.canGoIntoDebt) return false;
+        if (!this.buyerBalance) return false;
+
+        return (this.buyerBalance.amount - this.getTotalPrice) < 0;
+      }
+      return false;
+    },
     removeFromCart(product: CartProduct): void {
       const index = this.products.findIndex(
         (p) =>

From 86eca1e7e8d0133009eb147ebdf071f25c414c45 Mon Sep 17 00:00:00 2001
From: Tom Udding <tomudding@users.noreply.github.com>
Date: Mon, 25 Nov 2024 12:41:28 +0100
Subject: [PATCH 08/16] chore: remove unused GitHub actions from POS (#463)

---
 .../.github/workflows/docker.yml              | 135 ------------------
 apps/point-of-sale/.github/workflows/lint.yml |  48 -------
 2 files changed, 183 deletions(-)
 delete mode 100644 apps/point-of-sale/.github/workflows/docker.yml
 delete mode 100644 apps/point-of-sale/.github/workflows/lint.yml

diff --git a/apps/point-of-sale/.github/workflows/docker.yml b/apps/point-of-sale/.github/workflows/docker.yml
deleted file mode 100644
index 30c4df4b..00000000
--- a/apps/point-of-sale/.github/workflows/docker.yml
+++ /dev/null
@@ -1,135 +0,0 @@
-name: Docker
-
-on:
-  push:
-    branches: [ main, develop ]
-    # Publish semver tags as releases.
-    tags: [ 'v*.*.*' ]
-  pull_request:
-    branches: [ main, develop ]
-
-jobs:
-  dockerize:
-    runs-on: ubuntu-latest
-    container:
-      image: docker:dind
-    steps:
-      - name: upgrade git
-        run: |
-          apk add --update
-          apk add git
-          git --version  
-
-      - name: Checkout repository
-        uses: actions/checkout@v3
-        with:
-          path: .
-          
-      - name: Set up environment - main
-        env:
-          ENV_FILE: ${{ secrets.ENV_FILE_PRODUCTION }}
-        if: github.ref == 'refs/heads/main'
-        run: |
-          echo "${ENV_FILE}" > .env
-
-      - name: Set up environment - develop
-        env:
-          ENV_FILE: ${{ secrets.ENV_FILE_DEVELOPMENT }}
-        if: github.ref != 'refs/heads/main'
-        run: |
-          echo "${ENV_FILE}" > .env
-    
-        
-      - name: Get Docker meta (for tags)
-        id: meta
-        uses: docker/metadata-action@v4
-        with:
-          # list of Docker images to use as base name for tags
-          images: |
-            ${{ vars.DOCKER_REGISTRY }}/${{ vars.DOCKER_TAG }}
-          # generate Docker tags based on the following events/attributes
-          tags: |
-            type=schedule
-            type=ref,event=branch
-            type=ref,event=pr
-            type=semver,pattern={{version}}
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
-
-      - name: Login to SudoSOS Container Registry
-        if: github.event_name != 'pull_request'
-        uses: docker/login-action@v2
-        with:
-          registry: ${{ vars.DOCKER_REGISTRY }}
-          username: ${{ secrets.SVC_GH_SUDOSOS_USERNAME }}
-          password: ${{ secrets.SVC_GH_SUDOSOS_PWD }}
-
-      # Build and push Docker image with Buildx (don't push on PR)
-      - name: Build and push
-        uses: docker/build-push-action@v3
-        with:
-          context: .
-          platforms: linux/amd64 #SudoSOS does not run on linux/arm64
-          push: ${{ github.event_name != 'pull_request' }}
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-
-  dockerize-ab-testing:
-    runs-on: ubuntu-latest
-    container:
-      image: docker:dind
-    steps:
-      - name: upgrade git
-        run: |
-          apk add --update
-          apk add git
-          git --version
-      - name: Checkout repository
-        uses: actions/checkout@v3
-        with:
-          path: .
-
-      - name: Get Docker meta (for tags)
-        id: meta
-        uses: docker/metadata-action@v4
-        with:
-          # list of Docker images to use as base name for tags
-          images: |
-            ${{ vars.DOCKER_REGISTRY }}/${{ vars.DOCKER_TAG }}
-          # generate Docker tags based on the following events/attributes
-          tags: |
-            type=schedule
-            type=ref,event=branch
-            type=ref,event=pr
-            type=semver,pattern={{version}}
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
-
-      - name: Login to SudoSOS Container Registry
-        if: github.event_name != 'pull_request'
-        uses: docker/login-action@v2
-        with:
-          registry: ${{ vars.DOCKER_REGISTRY }}
-          username: ${{ secrets.SVC_GH_SUDOSOS_USERNAME }}
-          password: ${{ secrets.SVC_GH_SUDOSOS_PWD }}
-
-      # Build and push Docker image with Buildx (don't push on PR)
-      - name: Build and push
-        uses: docker/build-push-action@v3
-        with:
-          context: .
-          platforms: linux/amd64 #SudoSOS does not run on linux/arm64
-          push: ${{ github.event_name != 'pull_request' }}
-          tags: ${{ steps.meta.outputs.tags }}-ab-develop
-          labels: ${{ steps.meta.outputs.labels }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
diff --git a/apps/point-of-sale/.github/workflows/lint.yml b/apps/point-of-sale/.github/workflows/lint.yml
deleted file mode 100644
index e43e8847..00000000
--- a/apps/point-of-sale/.github/workflows/lint.yml
+++ /dev/null
@@ -1,48 +0,0 @@
-name: Build & Lint
-
-on:
-  push:
-    branches: [ main, develop ]
-  pull_request:
-    branches: [ main, develop ]
-
-jobs:
-  lint:
-    runs-on: ubuntu-latest
-    container:
-      image: node:18
-    steps:
-      - uses: actions/checkout@v3
-      - name: Cache and restore node_modules
-        id: cache-node
-        uses: actions/cache@v3
-        with:
-          path: ./node_modules
-          key: ${{ runner.os }}-node-${{ hashFiles('./package-lock.json') }}
-      - run: npm install
-        if: steps.cache-node.outputs.cache-hit != 'true'
-      - run: npm run lint
-  build:
-    needs: [ lint ]
-    runs-on: ubuntu-latest
-    container:
-      image: node:18
-    steps:
-      - uses: actions/checkout@v3
-      - name: Cache and restore node_modules
-        id: cache-node
-        uses: actions/cache@v3
-        with:
-          path: ./node_modules
-          key: ${{ runner.os }}-node-${{ hashFiles('./package-lock.json') }}
-      - run: npm install
-        if: steps.cache-node.outputs.cache-hit != 'true'
-      - run: npm run build
-      - name: "Compress dist folder"
-        run: tar -zcvf dist.tar.gz dist/
-      - name: "Upload /dist of build"
-        uses: actions/upload-artifact@v3
-        with:
-          name: build
-          path: dist.tar.gz
-          retention-days: 1

From 784a6fa7d2b8ad084ddcccc97a492e4afdb44099 Mon Sep 17 00:00:00 2001
From: Jobbiesaus <54932894+Jobbiesaus@users.noreply.github.com>
Date: Mon, 25 Nov 2024 13:09:44 +0100
Subject: [PATCH 09/16] feat(dashboard): button to directly go to user page in
 fine overview (#456)

---
 .../modules/admin/views/AdminUserOverView.vue |   6 +-
 .../src/modules/financial/views/FineView.vue  | 192 ++++++++++--------
 .../src/modules/seller/views/POSInfoView.vue  |   4 +-
 apps/dashboard/src/services/ApiService.ts     |   2 +-
 4 files changed, 113 insertions(+), 91 deletions(-)

diff --git a/apps/dashboard/src/modules/admin/views/AdminUserOverView.vue b/apps/dashboard/src/modules/admin/views/AdminUserOverView.vue
index 101ae0f9..aa3f8a16 100644
--- a/apps/dashboard/src/modules/admin/views/AdminUserOverView.vue
+++ b/apps/dashboard/src/modules/admin/views/AdminUserOverView.vue
@@ -122,8 +122,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref, type Ref, watch } from "vue";
-import apiService from '@/services/ApiService';
-import { DEFAULT_PAGINATION_MAX } from '@/services/ApiService';
+import apiService, { DEFAULT_PAGINATION_MAX } from '@/services/ApiService';
 import type { GewisUserResponse, UserResponse } from "@sudosos/sudosos-client";
 import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
@@ -247,7 +246,8 @@ async function handleInfoPush(userId: number) {
       (record) => record.id == userId
   );
   if (clickedUser) userStore.addUser(clickedUser);
-  router.push({ name: 'user', params: { userId } });
+  const route = router.resolve({ name: 'user', params: { userId } });
+  window.open(route.href, '_blank');
 }
 </script>
 
diff --git a/apps/dashboard/src/modules/financial/views/FineView.vue b/apps/dashboard/src/modules/financial/views/FineView.vue
index 578469e4..8c8d500c 100644
--- a/apps/dashboard/src/modules/financial/views/FineView.vue
+++ b/apps/dashboard/src/modules/financial/views/FineView.vue
@@ -6,12 +6,12 @@
     <div class="content-wrapper flex flex-column gap-5">
       <CardComponent :header="t('modules.financial.fine.eligibleUsers.header')" class="w-full">
         <DataTable
-          paginator
-          :rows="10"
-          :rowsPerPageOptions="[5, 10, 25, 50, 100]"
-          :value="eligibleUsers"
-          dataKey="id"
-          v-model:selection="selection"
+            paginator
+            :rows="10"
+            :rowsPerPageOptions="[5, 10, 25, 50, 100]"
+            :value="eligibleUsers"
+            dataKey="id"
+            v-model:selection="selection"
         >
           <template #header>
             <div class="flex flex-column">
@@ -19,21 +19,21 @@
                 <form @submit.prevent="handlePickedDates" class="flex flex-row gap-3">
                   <span class="p-float-label">
                     <Calendar
-                      v-model="firstDate"
-                      id="firstDate"
-                      v-bind="firstDateAttrs"
-                      showTime
-                      hourFormat="24"
+                        v-model="firstDate"
+                        id="firstDate"
+                        v-bind="firstDateAttrs"
+                        showTime
+                        hourFormat="24"
                     />
                     <label for="firstDate">{{ t('modules.financial.fine.eligibleUsers.firstDate') }}</label>
                   </span>
                   <span class="p-float-label">
                     <Calendar
-                      v-model="secondDate"
-                      id="firstDate"
-                      v-bind="secondDateAttrs"
-                      showTime
-                      hourFormat="24"
+                        v-model="secondDate"
+                        id="firstDate"
+                        v-bind="secondDateAttrs"
+                        showTime
+                        hourFormat="24"
                     />
                     <label for="secondDate">{{ t('modules.financial.fine.eligibleUsers.secondDate') }}</label>
                   </span>
@@ -70,17 +70,34 @@
               {{ formatPrice(slotProps.data.lastBalance.amount) }}
             </template>
           </Column>
+          <Column
+              headerStyle="width: 3rem; text-align: center"
+              bodyStyle="text-align: center; overflow: visible"
+          >
+            <template #body v-if="isLoading">
+              <Skeleton class="w-4 my-1 h-1rem surface-300"/>
+            </template>
+            <template #body="slotProps" v-else>
+              <Button
+                  @click="handleInfoPush(slotProps.data.id)"
+                  type="button"
+                  icon="pi pi-info-circle"
+                  outlined
+              />
+            </template>
+
+          </Column>
         </DataTable>
       </CardComponent>
       <CardComponent
           :header="t('modules.financial.fine.handoutEvents.header')"
           class="w-full">
         <DataTable
-          paginator
-          :rows="10"
-          :rowsPerPageOptions="[5, 10, 25, 50, 100]"
-          :value="fineHandoutEvents"
-          @row-click="(e: any) => openHandoutEvent(e.data.id)"
+            paginator
+            :rows="10"
+            :rowsPerPageOptions="[5, 10, 25, 50, 100]"
+            :value="fineHandoutEvents"
+            @row-click="(e: any) => openHandoutEvent(e.data.id)"
         >
           <Column field="id" id="id" :header="t('common.id')">
             <template #body v-if="isLoading">
@@ -114,30 +131,30 @@
       </CardComponent>
     </div>
   </div>
-    <Dialog
-        v-model:visible="showModal"
-        class="w-auto flex w-9 md:w-4"
-        :header="t('modules.financial.fine.handoutEvents.details')">
-      <div class="flex flex-column">
-        <div class="flex flex-row justify-content-between">
-          <p>{{ t("modules.financial.fine.handoutEvents.number") }}</p>
-          <p>{{ selectedHandoutEvent?.fines.length }}</p>
-        </div>
-        <div class="flex flex-row justify-content-between">
-          <p>{{ t("modules.financial.fine.handoutEvents.total") }}</p>
-          <p>{{ formatPrice(modalTotalFines) }}
-          </p>
-        </div>
-        <div class="flex flex-row justify-content-between">
-          <p>{{ t("common.createdAt") }}</p>
-          <p>{{ formatDateTime(new Date(selectedHandoutEvent?.createdAt || '')) }}</p>
-        </div>
-        <div class="flex flex-row justify-content-between">
-          <p>{{ t("modules.financial.fine.handoutEvents.referenceDate") }}</p>
-          <p>{{ formatDateTime(new Date(selectedHandoutEvent?.referenceDate || '')) }}</p>
-        </div>
+  <Dialog
+      v-model:visible="showModal"
+      class="w-auto flex w-9 md:w-4"
+      :header="t('modules.financial.fine.handoutEvents.details')">
+    <div class="flex flex-column">
+      <div class="flex flex-row justify-content-between">
+        <p>{{ t("modules.financial.fine.handoutEvents.number") }}</p>
+        <p>{{ selectedHandoutEvent?.fines.length }}</p>
+      </div>
+      <div class="flex flex-row justify-content-between">
+        <p>{{ t("modules.financial.fine.handoutEvents.total") }}</p>
+        <p>{{ formatPrice(modalTotalFines) }}
+        </p>
+      </div>
+      <div class="flex flex-row justify-content-between">
+        <p>{{ t("common.createdAt") }}</p>
+        <p>{{ formatDateTime(new Date(selectedHandoutEvent?.createdAt || '')) }}</p>
       </div>
-    </Dialog>
+      <div class="flex flex-row justify-content-between">
+        <p>{{ t("modules.financial.fine.handoutEvents.referenceDate") }}</p>
+        <p>{{ formatDateTime(new Date(selectedHandoutEvent?.referenceDate || '')) }}</p>
+      </div>
+    </div>
+  </Dialog>
 </template>
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
@@ -169,11 +186,11 @@ const eligibleUsers = ref();
 const userStore = useUserStore();
 const { defineField, handleSubmit } = useForm({
   validationSchema: toTypedSchema(
-    yup.object({
-      firstDate: yup.date().required(),
-      secondDate: yup.date().required(),
-    }
-  ))
+      yup.object({
+            firstDate: yup.date().required(),
+            secondDate: yup.date().required(),
+          }
+      ))
 });
 const toast = useToast();
 const selection = ref();
@@ -202,8 +219,8 @@ const showMessage: Ref<boolean>  = ref(false);
 const fineHandoutEvents: Ref<Array<FineHandoutEventResponse>> = ref(new Array(10));
 const handlePickedDates = handleSubmit(async (values) => {
   const result = await apiService.debtor.calculateFines(
-    [values.firstDate.toISOString(), values.secondDate.toISOString()],
-    ["MEMBER"]);
+      [values.firstDate.toISOString(), values.secondDate.toISOString()],
+      ["MEMBER"]);
   const userFullNameMap: { [key: number]: string } = {};
   Object.values(userStore.users).forEach((user: any) => {
     userFullNameMap[user.id] = `${user.firstName} ${user.lastName}`;
@@ -214,20 +231,20 @@ const handlePickedDates = handleSubmit(async (values) => {
       .filter((u: any) => !deletedUsers.includes(u.id) && activeUsers.includes(u.id))
       .map((item: any) => {
 
-    const fullName = userFullNameMap[item.id];
+        const fullName = userFullNameMap[item.id];
 
-    // Extract balances from the item
-    const [firstBalance, secondBalance] = item.balances || [null, null];
-    return {
-      ...item,
-      // @ts-ignore
-      gewisId: (userStore.users.find((u: UserResponse) => u.id === item.id) as UserResponse).gewisId || undefined,
-      fullName,
-      // Assign first and last balance based on the first and second items in the balances array
-      firstBalance,
-      lastBalance: secondBalance,
-    };
-  });
+        // Extract balances from the item
+        const [firstBalance, secondBalance] = item.balances || [null, null];
+        return {
+          ...item,
+          // @ts-ignore
+          gewisId: (userStore.users.find((u: UserResponse) => u.id === item.id) as UserResponse).gewisId || undefined,
+          fullName,
+          // Assign first and last balance based on the first and second items in the balances array
+          firstBalance,
+          lastBalance: secondBalance,
+        };
+      });
   const totalDebtAmount = eligibleUsers.value.reduce((accumulator: number, current: any) => {
     return accumulator + current.firstBalance.amount.amount; // Use getAmount() to access the value
   }, 0);
@@ -247,11 +264,16 @@ const handlePickedDates = handleSubmit(async (values) => {
   showMessage.value = true;
 });
 
+async function handleInfoPush(userId: number) {
+  const route = router.resolve({ name: 'user', params: { userId } });
+  window.open(route.href, '_blank');
+}
+
 onMounted(async () => {
   await userStore.fetchUsers(apiService);
   fineHandoutEvents.value = await fetchAllPages<FineHandoutEventResponse>(
-    // @ts-ignore
-    (take, skip) => apiService.debtor.returnAllFineHandoutEvents(take, skip)
+      // @ts-ignore
+      (take, skip) => apiService.debtor.returnAllFineHandoutEvents(take, skip)
   );
   isLoading.value = false;
 });
@@ -280,16 +302,16 @@ const notifyUsers = async () => {
     userIds: selection.value.map((item: any) => item.id),
     referenceDate: secondDate.value?.toISOString() || new Date().toISOString()
   })
-    .then(() => {
-      toast.add({
-        summary: t('common.toast.success.success'),
-        detail: t('common.toast.success.finesNotified'),
-        life: 3000,
-        severity: 'success',
+      .then(() => {
+        toast.add({
+          summary: t('common.toast.success.success'),
+          detail: t('common.toast.success.finesNotified'),
+          life: 3000,
+          severity: 'success',
+        });
+        isNotifying.value = false;
+        selection.value = [];
       });
-      isNotifying.value = false;
-      selection.value = [];
-    });
 };
 
 const handoutFines = async () => {
@@ -301,16 +323,16 @@ const handoutFines = async () => {
     userIds: selection.value.map((item: any) => item.id),
     referenceDate: firstDate.value.toISOString(),
   })
-    .then(() => {
-      toast.add({
-        summary: t('common.toast.success.success'),
-        detail: t('common.toast.success.finesHandedOut'),
-        life: 3000,
-        severity: 'success',
-      });
-    })
-    .catch((err: AxiosError) => handleError(err, toast))
-    .finally(() => selection.value = []);
+      .then(() => {
+        toast.add({
+          summary: t('common.toast.success.success'),
+          detail: t('common.toast.success.finesHandedOut'),
+          life: 3000,
+          severity: 'success',
+        });
+      })
+      .catch((err: AxiosError) => handleError(err, toast))
+      .finally(() => selection.value = []);
 };
 </script>
 
diff --git a/apps/dashboard/src/modules/seller/views/POSInfoView.vue b/apps/dashboard/src/modules/seller/views/POSInfoView.vue
index 6e00f7bb..961017d5 100644
--- a/apps/dashboard/src/modules/seller/views/POSInfoView.vue
+++ b/apps/dashboard/src/modules/seller/views/POSInfoView.vue
@@ -38,7 +38,7 @@ import type {
 } from '@sudosos/sudosos-client';
 import ContainerCard from '@/components/container/ContainersCard.vue';
 import router from '@/router';
-import apiService from '@/services/ApiService';
+import apiService, { DEFAULT_PAGINATION_MAX } from '@/services/ApiService';
 import { useContainerStore } from "@/stores/container.store";
 import MutationPOSCard from "@/components/mutations/MutationsPOS.vue";
 import CardComponent from "@/components/CardComponent.vue";
@@ -96,7 +96,7 @@ onMounted(async () => {
       apiService,
       id.value!,
       new Date(Date.now()-(7*24*60*60*1000)).toISOString(),
-      new Date().toISOString(), Number.MAX_SAFE_INTEGER, 0)).data.records;
+      new Date().toISOString(), DEFAULT_PAGINATION_MAX, 0)).data.records;
 
   for (let transaction of transactionsInLastWeek) {
     totalSales.value = totalSales.value.add(Dinero(transaction.value as Dinero.Options));
diff --git a/apps/dashboard/src/services/ApiService.ts b/apps/dashboard/src/services/ApiService.ts
index 681d18c5..d057466f 100644
--- a/apps/dashboard/src/services/ApiService.ts
+++ b/apps/dashboard/src/services/ApiService.ts
@@ -2,4 +2,4 @@ import { ApiService } from "@sudosos/sudosos-frontend-common";
 const apiService = new ApiService(window.location.origin + "/api/v1");
 export default apiService;
 
-export const DEFAULT_PAGINATION_MAX = 500;
+export const DEFAULT_PAGINATION_MAX = 500;
\ No newline at end of file

From a47be0a418c0a87d1cfcf362fe0a51dca59ea030 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sun, 1 Dec 2024 14:28:22 +0100
Subject: [PATCH 10/16] chore(deps): bump @stripe/stripe-js in /apps/dashboard
 (#464)

Bumps [@stripe/stripe-js](https://github.com/stripe/stripe-js) from 4.10.0 to 5.2.0.
- [Release notes](https://github.com/stripe/stripe-js/releases)
- [Commits](https://github.com/stripe/stripe-js/compare/v4.10.0...v5.2.0)

---
updated-dependencies:
- dependency-name: "@stripe/stripe-js"
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 apps/dashboard/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
index cd3cc183..7843879c 100644
--- a/apps/dashboard/package.json
+++ b/apps/dashboard/package.json
@@ -15,7 +15,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@stripe/stripe-js": "^4.8.0",
+    "@stripe/stripe-js": "^5.2.0",
     "@sudosos/sudosos-frontend-common": "workspace:^",
     "@vee-validate/rules": "^4.14.1",
     "@vee-validate/yup": "^4.14.1",

From d3fbc80abfa06967d369001851c6c61b827bffa2 Mon Sep 17 00:00:00 2001
From: Victor Klomp <victor.klomp@gmail.com>
Date: Mon, 2 Dec 2024 06:47:28 +0100
Subject: [PATCH 11/16] ci(vite): Clean up vite config (#466)

---
 apps/dashboard/vite.config.ts     | 6 ++----
 apps/point-of-sale/vite.config.ts | 6 ++----
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/apps/dashboard/vite.config.ts b/apps/dashboard/vite.config.ts
index e1f64fa0..097ae266 100644
--- a/apps/dashboard/vite.config.ts
+++ b/apps/dashboard/vite.config.ts
@@ -1,13 +1,11 @@
 import { fileURLToPath, URL } from 'node:url';
-import { defineConfig, loadEnv } from 'vite';
+import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 
 const PROXY_URL = 'https://sudosos.test.gewis.nl';
 
 // https://vitejs.dev/config/
-export default defineConfig(({ mode }) => {
-  const env = loadEnv(mode, process.cwd());
-
+export default defineConfig(() => {
   return {
     plugins: [
       vue(),
diff --git a/apps/point-of-sale/vite.config.ts b/apps/point-of-sale/vite.config.ts
index eabab869..db7fdd78 100644
--- a/apps/point-of-sale/vite.config.ts
+++ b/apps/point-of-sale/vite.config.ts
@@ -1,13 +1,11 @@
 import { fileURLToPath, URL } from 'node:url';
-import { defineConfig, loadEnv } from 'vite';
+import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 
 const PROXY_URL = 'https://sudosos.test.gewis.nl';
 
 // https://vitejs.dev/config/
-export default defineConfig(({ mode }) => {
-  const env = loadEnv(mode, process.cwd());
-
+export default defineConfig(() => {
   return {
     base: "./",
     plugins: [

From 12c435db9a263cc02ca9fc32bc4f86e01d2eee86 Mon Sep 17 00:00:00 2001
From: Victor Klomp <victor.klomp@gmail.com>
Date: Mon, 2 Dec 2024 06:48:56 +0100
Subject: [PATCH 12/16] feat(routes): rework menu items (#467)

---
 apps/dashboard/src/components/TopNavbar.vue   | 30 ++++++++-----------
 .../components/mutations/MutationsBalance.vue |  2 +-
 .../src/locales/en/common/common.json         |  8 ++---
 apps/dashboard/src/modules/admin/routes.ts    |  6 ++--
 .../dashboard/src/modules/financial/routes.ts |  6 ++--
 apps/dashboard/src/modules/seller/routes.ts   |  8 ++---
 apps/dashboard/src/modules/user/routes.ts     |  4 +--
 7 files changed, 29 insertions(+), 35 deletions(-)

diff --git a/apps/dashboard/src/components/TopNavbar.vue b/apps/dashboard/src/components/TopNavbar.vue
index 72468b2e..a4df0f6c 100644
--- a/apps/dashboard/src/components/TopNavbar.vue
+++ b/apps/dashboard/src/components/TopNavbar.vue
@@ -160,19 +160,19 @@ onBeforeMount(async () => {
 const navItems = computed(() => [
   {
     label: t('common.navigation.transactions'),
-    route: '/transactions'
+    route: '/transaction'
   },
   {
     label: t('common.navigation.admin'),
     visible: isBoard(),
     items: [
       {
-        label: t('common.navigation.userOverview'),
-        route: '/user-overview'
+        label: t('common.navigation.users'),
+        route: '/user'
       },
       {
         label: t('common.navigation.banners'),
-        route: '/banners'
+        route: '/banner'
       },
     ],
   },
@@ -182,26 +182,20 @@ const navItems = computed(() => [
     notifications: getFinancialNotifications(),
     items: [
       {
-        label: t('common.navigation.userOverview'),
-        route: '/user-overview',
-      },
-      {
-        label: t('common.navigation.flaggedTransactions'),
-      },
-      {
-        label: t('common.navigation.socialDrinkCards'),
+        label: t('common.navigation.users'),
+        route: '/user',
       },
       {
         label: t('common.navigation.invoices'),
         route: '/invoice',
       },
       {
-        label: t('common.navigation.fineOverview'),
+        label: t('common.navigation.fines'),
         route: '/fine',
       },
       {
         label: t('common.navigation.payouts'),
-        route: '/payouts',
+        route: '/payout',
         notifications: pendingPayouts?.value
       }
     ]
@@ -211,12 +205,12 @@ const navItems = computed(() => [
     visible: isSeller(),
     items: [
       {
-        label: t('common.navigation.manageProducts'),
-        route: '/manage-products',
+        label: t('common.navigation.productsContainers'),
+        route: '/product',
       },
       {
-        label: t('common.navigation.posOverview'),
-        route: '/point-of-sale/overview',
+        label: t('common.navigation.pos'),
+        route: '/point-of-sale',
       },
         ...organs.value,
     ]
diff --git a/apps/dashboard/src/components/mutations/MutationsBalance.vue b/apps/dashboard/src/components/mutations/MutationsBalance.vue
index 04d9a48a..7ed1b02b 100644
--- a/apps/dashboard/src/components/mutations/MutationsBalance.vue
+++ b/apps/dashboard/src/components/mutations/MutationsBalance.vue
@@ -3,7 +3,7 @@
       :header="t('components.mutations.balance')"
       class="w-full"
       :action="simple ? undefined: t('components.mutations.all')"
-      :routerLink="simple ? undefined : 'transaction-view'"
+      :routerLink="simple ? undefined : 'transactions'"
 
   >
     <DataTable :rows="rows" :value="mutations" :rowsPerPageOptions="[5, 10, 25, 50, 100]" :paginator="paginator" lazy
diff --git a/apps/dashboard/src/locales/en/common/common.json b/apps/dashboard/src/locales/en/common/common.json
index 6799e386..7edba4b2 100644
--- a/apps/dashboard/src/locales/en/common/common.json
+++ b/apps/dashboard/src/locales/en/common/common.json
@@ -136,15 +136,15 @@
             "signOut": "Sign out",
             "dutch": "Dutch",
             "english": "English",
-            "userOverview": "User overview",
+            "users": "Users",
             "banners": "Banners",
             "socialDrinkCards": "Social drink cards",
             "invoices": "Invoices",
             "payouts": "Payouts",
-            "manageProducts": "Manage products",
-            "posOverview": "POS overview",
+            "productsContainers": "Products & containers",
+            "pos": "Points of sale",
             "flaggedTransactions": "Flagged transactions",
-            "fineOverview": "Fine overview"
+            "fines": "Fines"
         },
         "validation": {
             "number": {
diff --git a/apps/dashboard/src/modules/admin/routes.ts b/apps/dashboard/src/modules/admin/routes.ts
index 7da76b58..4eb43e12 100644
--- a/apps/dashboard/src/modules/admin/routes.ts
+++ b/apps/dashboard/src/modules/admin/routes.ts
@@ -13,8 +13,8 @@ export function adminRoutes(): RouteRecordRaw[] {
       meta: { requiresAuth: true },
       children: [
         {
-          path: '/user-overview',
-          name: 'userOverview',
+          path: '/user',
+          name: 'users',
           component: AdminUserOverView,
           meta: {
             requiresAuth: true,
@@ -22,7 +22,7 @@ export function adminRoutes(): RouteRecordRaw[] {
           }
         },
         {
-          path: '/banners',
+          path: '/banner',
           component: AdminBannersView,
           name: 'banners',
           meta: {
diff --git a/apps/dashboard/src/modules/financial/routes.ts b/apps/dashboard/src/modules/financial/routes.ts
index 85644125..ee8f117d 100644
--- a/apps/dashboard/src/modules/financial/routes.ts
+++ b/apps/dashboard/src/modules/financial/routes.ts
@@ -17,7 +17,7 @@ export function financialRoutes(): RouteRecordRaw[] {
         {
           path: '/fine',
           component: FineView,
-          name: 'fine',
+          name: 'fines',
           meta: {
             requiresAuth: true,
             rolesAllowed: [UserRole.BAC_PM]
@@ -26,7 +26,7 @@ export function financialRoutes(): RouteRecordRaw[] {
         {
           path: '/invoice',
           component: InvoiceOverview,
-          name: 'invoice',
+          name: 'invoices',
           meta: {
             requiresAuth: true,
             rolesAllowed: [UserRole.BAC_PM]
@@ -63,7 +63,7 @@ export function financialRoutes(): RouteRecordRaw[] {
           }
         },
         {
-          path: '/payouts',
+          path: '/payout',
           component: PayoutsView,
           name: 'payouts',
           meta: {
diff --git a/apps/dashboard/src/modules/seller/routes.ts b/apps/dashboard/src/modules/seller/routes.ts
index 1801521e..6824bb0a 100644
--- a/apps/dashboard/src/modules/seller/routes.ts
+++ b/apps/dashboard/src/modules/seller/routes.ts
@@ -24,17 +24,17 @@ export function sellerRoutes(): RouteRecordRaw[] {
           }
         },
         {
-          path: '/manage-products',
+          path: '/product',
           component: ProductsContainersView,
-          name: 'products-containers-overview',
+          name: 'products',
           meta: {
             requiresAuth: true,
             rolesAllowed: [UserRole.SELLER]
           }
         },
         {
-          path: '/point-of-sale/overview',
-          name: 'pointOfSale',
+          path: '/point-of-sale',
+          name: 'pointsOfSale',
           component: POSOverviewView,
           meta: {
             requiresAuth: true,
diff --git a/apps/dashboard/src/modules/user/routes.ts b/apps/dashboard/src/modules/user/routes.ts
index 5ae7b487..320bef5a 100644
--- a/apps/dashboard/src/modules/user/routes.ts
+++ b/apps/dashboard/src/modules/user/routes.ts
@@ -17,9 +17,9 @@ export function userRoutes(): RouteRecordRaw[] {
           name: 'home'
         },
         {
-          path: '/transactions',
+          path: '/transaction',
           component: UserTransactionsView,
-          name: 'transaction-view'
+          name: 'transactions'
         },
         {
           path: '/profile',

From 298207b7ee0910d7848961c855b932e2b62c005c Mon Sep 17 00:00:00 2001
From: Victor Klomp <victor.klomp@gmail.com>
Date: Tue, 10 Dec 2024 15:26:22 +0100
Subject: [PATCH 13/16] feat: Permission based rendering (#303)

* feat(seller): Permission based rendering

* feat(permissions): Permissions isAllowed function

* refactor(permissions): Added new meta for permission on routes

* refactor(permissions): Router guard based on permissions

* refactor(permissions): NavBar based on permissions

* feat(permissions): Permission based rendering for the products

* feat(permissions): Permission based rendering for the point of sales

* style(routes): Fix indenting

* fix(routes): Fix typing

* fix(permission): Fix nits
---
 apps/dashboard/src/components/FormDialog.vue  |   9 +-
 apps/dashboard/src/components/TopNavbar.vue   |  42 +++----
 .../container/ContainerActionsDialog.vue      |  10 +-
 .../container/ContainerActionsForm.vue        |   8 +-
 .../container/ContainerProductDisplay.vue     |   8 +-
 .../container/ContainerProductGrid.vue        |  22 +++-
 .../components/container/ContainersCard.vue   |  33 +++++-
 .../src/locales/en/common/common.json         |   5 +-
 .../src/locales/en/modules/seller.json        |   3 +-
 .../src/locales/nl/common/common.json         |   5 +-
 .../src/locales/nl/modules/seller.json        |   3 +-
 apps/dashboard/src/main.ts                    |   2 +
 .../users/AdminUserFineWaiveModal.vue         |   4 +-
 apps/dashboard/src/modules/admin/routes.ts    |  11 +-
 .../modules/admin/views/AdminUserOverView.vue |   2 +-
 .../dashboard/src/modules/financial/routes.ts | 104 +++++++++---------
 .../financial/views/payouts/PayoutsView.vue   |   2 +-
 .../components/POSAddContainerModal.vue       |   6 +-
 .../seller/components/POSCreateModal.vue      |   2 +-
 .../seller/components/POSOverviewTable.vue    |   8 +-
 .../seller/components/POSSettingsCard.vue     |   5 +-
 .../seller/components/ProductActionDialog.vue |  16 ++-
 .../seller/components/ProductsCard.vue        |  62 +++++------
 apps/dashboard/src/modules/seller/routes.ts   |  10 +-
 .../src/modules/seller/views/POSInfoView.vue  |  18 ++-
 .../modules/seller/views/POSOverviewView.vue  |  12 +-
 .../user/components/UserSettingsComponent.vue |   1 +
 apps/dashboard/src/modules/user/routes.ts     |  17 ++-
 apps/dashboard/src/router/index.ts            |  23 ++--
 apps/dashboard/src/utils/permissionUtils.ts   |  81 ++++++++++++++
 apps/dashboard/vite.config.ts                 |   2 +-
 lib/common/src/stores/auth.store.ts           |   3 +
 32 files changed, 365 insertions(+), 174 deletions(-)
 create mode 100644 apps/dashboard/src/utils/permissionUtils.ts

diff --git a/apps/dashboard/src/components/FormDialog.vue b/apps/dashboard/src/components/FormDialog.vue
index 3d33259e..393b41fb 100644
--- a/apps/dashboard/src/components/FormDialog.vue
+++ b/apps/dashboard/src/components/FormDialog.vue
@@ -11,7 +11,7 @@
     <slot name="form" :form="form" />
     <div class="flex flex-row gap-2 justify-content-between w-full mt-3">
       <Button
-          v-if="deletable"
+          v-if="isEditable && deletable"
           type="button"
           icon="pi pi-trash"
           :label="deleteLabel || t('common.delete')"
@@ -19,6 +19,7 @@
           @click="emits('delete')"/>
       <div class="flex flex-row justify-content-end gap-2 flex-1">
         <Button
+            v-if="isEditable"
             type="button"
             outlined
             icon="pi pi-times"
@@ -26,6 +27,7 @@
             @click="visible = false; emits('close')"
         />
         <Button
+            v-if="isEditable"
             type="submit"
             icon="pi pi-check"
             :disabled="!props.form.context.meta.value.valid"
@@ -59,6 +61,10 @@ const props = defineProps({
     required: false,
     default: '',
   },
+  isEditable: {
+    type: Boolean,
+    required: true
+  },
   deletable: {
     type: Boolean,
     required: false,
@@ -70,7 +76,6 @@ const props = defineProps({
   }
 });
 
-
 const emits = defineEmits(['update:modelValue', 'show', 'close', 'delete']);
 
 const dialog = ref();
diff --git a/apps/dashboard/src/components/TopNavbar.vue b/apps/dashboard/src/components/TopNavbar.vue
index a4df0f6c..7117d836 100644
--- a/apps/dashboard/src/components/TopNavbar.vue
+++ b/apps/dashboard/src/components/TopNavbar.vue
@@ -80,11 +80,11 @@
 import { computed, onBeforeMount, ref, type Ref } from "vue";
 import { useAuthStore, useUserStore } from "@sudosos/sudosos-frontend-common";
 import { useRouter } from "vue-router";
-import { UserRole } from "@/utils/rbacUtils";
 import { useI18n } from "vue-i18n";
 import { usePendingPayouts } from "@/mixins/pendingPayoutsMixin";
 import apiService from "@/services/ApiService";
 import { GetAllUsersTypeEnum } from "@sudosos/sudosos-client";
+import { isAllowed } from "@/utils/permissionUtils";
 
 const userStore = useUserStore();
 const authStore = useAuthStore();
@@ -100,20 +100,8 @@ const handleLogout = () => {
   router.push('/');
 };
 
-const isBoard = () => {
-  return userStore.current.rolesWithPermissions.findIndex(r => r.name == UserRole.BOARD) != -1;
-};
-
-const isSeller = () => {
-  return userStore.current.rolesWithPermissions.findIndex(r => r.name == UserRole.SELLER) != -1;
-};
-
-const isBACPM = () => {
-  return userStore.current.rolesWithPermissions.findIndex(r => r.name == UserRole.BAC_PM) != -1;
-};
-
 const { pendingPayouts } = usePendingPayouts();
-const getFinancialNotifications = () => pendingPayouts?.value;
+const getFinancialNotifications = () => isAllowed('update', ['all'], 'SellerPayout', ['any']) && pendingPayouts?.value;
 
 const organs: Ref<any[]> = ref([]);
 
@@ -164,53 +152,67 @@ const navItems = computed(() => [
   },
   {
     label: t('common.navigation.admin'),
-    visible: isBoard(),
+    visible: isAllowed('update', ['all'], 'User', ['any'])
+        || isAllowed('get', ['all'], 'Banner', ['any']),
     items: [
       {
         label: t('common.navigation.users'),
-        route: '/user'
+        route: '/user',
+        visible: isAllowed('update', ['all'], 'User', ['any']),
       },
       {
         label: t('common.navigation.banners'),
-        route: '/banner'
+        route: '/banner',
+        visible: isAllowed('get', ['own'], 'Banner', ['any']),
       },
     ],
   },
   {
     label: t('common.navigation.financial'),
-    visible: isBACPM(),
     notifications: getFinancialNotifications(),
+    visible: isAllowed('update', ['all'], 'User', ['any'])
+        || isAllowed('get', ['all'], 'Invoice', ['any'])
+        || isAllowed('get', ['all'], 'Fine', ['any'])
+        || isAllowed('get', ['all'], 'SellerPayout', ['any']),
     items: [
       {
         label: t('common.navigation.users'),
         route: '/user',
+        // TODO: Change to `action: get` after https://github.com/GEWIS/sudosos-backend/issues/62 is fully finished
+        visible: isAllowed('update', ['all'], 'User', ['any']),
       },
       {
         label: t('common.navigation.invoices'),
         route: '/invoice',
+        visible: isAllowed('get', ['all'], 'Invoice', ['any']),
       },
       {
-        label: t('common.navigation.fines'),
+        label: t('common.navigation.fineOverview'),
         route: '/fine',
+        visible: isAllowed('get', ['all'], 'Fine', ['any']),
       },
       {
         label: t('common.navigation.payouts'),
         route: '/payout',
+        visible: isAllowed('get', ['all'], 'SellerPayout', ['any']),
         notifications: pendingPayouts?.value
       }
     ]
   },
   {
     label: t('common.navigation.seller'),
-    visible: isSeller(),
     items: [
       {
         label: t('common.navigation.productsContainers'),
         route: '/product',
+        // TODO: Change to `action: get` after https://github.com/GEWIS/sudosos-backend/issues/62 is fully finished
+        visible: isAllowed('get', ['own', 'organ'], 'Product', ['any']),
       },
       {
         label: t('common.navigation.pos'),
         route: '/point-of-sale',
+        // TODO: Change to `action: get` after https://github.com/GEWIS/sudosos-backend/issues/62 is fully finished
+        visible: isAllowed('update', ['own', 'organ'], 'PointOfSale', ['any']),
       },
         ...organs.value,
     ]
diff --git a/apps/dashboard/src/components/container/ContainerActionsDialog.vue b/apps/dashboard/src/components/container/ContainerActionsDialog.vue
index 855fa73d..29e3fa73 100644
--- a/apps/dashboard/src/components/container/ContainerActionsDialog.vue
+++ b/apps/dashboard/src/components/container/ContainerActionsDialog.vue
@@ -7,9 +7,11 @@
    @close="closeDialog()"
    @delete="deleteProduct()"
    :deletable="state.edit"
+   :is-editable="state.edit || state.create"
   >
     <template #form>
       <ContainerActionsForm
+          :is-editable="state.edit || state.create"
           :is-organ-editable="state.create"
           :form="form"/>
       <ConfirmDialog group="containerDelete"/>
@@ -44,6 +46,10 @@ const props = defineProps({
   associatedPos: {
     type: Object as PropType<PointOfSaleWithContainersResponse>,
     required: false
+  },
+  isEditAllowed: {
+    type: Boolean,
+    required: false
   }
 });
 
@@ -56,13 +62,13 @@ const toast = useToast();
 const state = computed(() => {
   return {
     create: props.container == undefined,
-    edit: props.container != undefined,
+    edit: props.container != undefined && props.isEditAllowed
   };
 });
 const header = computed(() => {
   if (state.value.create) return t('modules.seller.productContainers.containers.create');
   if (state.value.edit) return t('modules.seller.productContainers.containers.edit');
-  return '';
+  return t('modules.seller.productContainers.containers.view');
 });
 
 const form = schemaToForm(containerActionSchema);
diff --git a/apps/dashboard/src/components/container/ContainerActionsForm.vue b/apps/dashboard/src/components/container/ContainerActionsForm.vue
index 95de9e34..8517f6bc 100644
--- a/apps/dashboard/src/components/container/ContainerActionsForm.vue
+++ b/apps/dashboard/src/components/container/ContainerActionsForm.vue
@@ -6,14 +6,16 @@
         @update:value="form.context.setFieldValue('name', $event)"
         :errors="form.context.errors.value.name"
         id="name" :placeholder="t('common.name')"
-        :label="t('common.name')"/>
+        :label="t('common.name')"
+        :disabled="!isEditable"
+    />
 
     <InputOrganSpan
         :organ="form.model.owner.value.value"
         :organs="!isOrganEditable
                         ? [form.model.owner.value.value]
                         : undefined"
-        :disabled="!isOrganEditable"
+        :disabled="!isEditable || !isOrganEditable"
         :attributes="form.model.owner.attr.value"
         @update:organ="form.context.setFieldValue('owner', $event)"
         :errors="form.context.errors.value.owner"
@@ -27,6 +29,7 @@
         :errors="form.context.errors.value.public"
         id="public" :placeholder="t('modules.seller.productContainers.containers.public')"
         :label="t('modules.seller.productContainers.containers.public')" type="boolean"
+        :disabled="!isEditable"
       />
   </div>
 </template>
@@ -44,6 +47,7 @@ const { t } = useI18n();
 defineProps<{
   form: Form<yup.InferType<typeof containerActionSchema>>,
   isOrganEditable?: boolean,
+  isEditable: boolean
 }>();
 
 </script>
diff --git a/apps/dashboard/src/components/container/ContainerProductDisplay.vue b/apps/dashboard/src/components/container/ContainerProductDisplay.vue
index de7115f8..8ed47ab2 100644
--- a/apps/dashboard/src/components/container/ContainerProductDisplay.vue
+++ b/apps/dashboard/src/components/container/ContainerProductDisplay.vue
@@ -11,7 +11,12 @@
       </div>
       <p class="text-center m-2 text-base text-overflow-ellipsis font-bold">{{ product.name }}</p>
   </div>
-  <ProductActionDialog :container="container" v-model:visible="visible" :product="product"/>
+  <ProductActionDialog
+      :container="container"
+      v-model:visible="visible"
+      :product="product"
+      :is-update-allowed="isAllowed('update', ['own', 'organ'], 'Product')"
+  />
 </template>
 
 <script setup lang="ts">
@@ -20,6 +25,7 @@ import { getProductImageSrc } from "@/utils/urlUtils";
 import { computed, ref } from "vue";
 import ProductActionDialog from "@/modules/seller/components/ProductActionDialog.vue";
 import { useI18n } from "vue-i18n";
+import { isAllowed } from "@/utils/permissionUtils";
 
 const visible = ref(false);
 const imageSrc = computed(() => getProductImageSrc(props.product));
diff --git a/apps/dashboard/src/components/container/ContainerProductGrid.vue b/apps/dashboard/src/components/container/ContainerProductGrid.vue
index 1c71e186..11798e6f 100644
--- a/apps/dashboard/src/components/container/ContainerProductGrid.vue
+++ b/apps/dashboard/src/components/container/ContainerProductGrid.vue
@@ -3,19 +3,29 @@
     <div v-for="product in container.products" :key="product.id" class="card">
       <ContainerProductDisplay :container="container" :product="product" />
     </div>
-    <Button class="flex flex-column h-10rem w-8rem border-300
-    border-1 border-round-sm overflow-hidden" :outlined="true" @click="visible = true">
+    <Button
+        class="flex flex-column h-10rem w-8rem border-300
+    border-1 border-round-sm overflow-hidden"
+        :outlined="true"
+        @click="visible = true"
+        v-if="isAllowed('create', ['own', 'organ'], 'Product', ['any'])"
+    >
       <i class="pi pi-plus text-5xl my-auto product-card"></i>
     </Button>
-    <ProductActionDialog v-model:visible="visible" :container="props.container"/>
+    <ProductActionDialog
+        v-model:visible="visible"
+        :container="props.container"
+        :is-update-allowed="isAllowed('update', ['own', 'organ'], 'Product')"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import type { ContainerWithProductsResponse } from "@sudosos/sudosos-client";
 import ContainerProductDisplay from "@/components/container/ContainerProductDisplay.vue";
-import { type Ref, ref, type PropType } from "vue";
+import { type Ref, ref, type PropType, onMounted } from "vue";
 import ProductActionDialog from "@/modules/seller/components/ProductActionDialog.vue";
+import { isAllowed } from "@/utils/permissionUtils";
 
 let visible: Ref<boolean> = ref(false);
 const props = defineProps({
@@ -25,6 +35,10 @@ const props = defineProps({
   }
 });
 
+onMounted(() => {
+  console.log(isAllowed('update', ['own', 'organ'], 'Product'));
+});
+
 </script>
 
 <style scoped>
diff --git a/apps/dashboard/src/components/container/ContainersCard.vue b/apps/dashboard/src/components/container/ContainersCard.vue
index a5b347ed..64ae34e5 100644
--- a/apps/dashboard/src/components/container/ContainersCard.vue
+++ b/apps/dashboard/src/components/container/ContainersCard.vue
@@ -3,10 +3,15 @@
     <template #topAction>
       <div v-if="showCreate || associatedPos" class="flex justify-content-endg gap-2">
         <Button
-            v-if="associatedPos"
+            v-if="posEditAllowed && associatedPos"
             @click="openContainerAdd()"
             outlined>{{ t('modules.seller.productContainers.containers.addExisting') }}</Button>
-        <Button @click="openContainerEdit()">{{ t('common.create') }}</Button>
+        <Button
+            @click="openContainerEdit()"
+            v-if="isAllowed('create', ['own', 'organ'], 'Container', ['any'])"
+        >
+          {{ t('common.create') }}
+        </Button>
       </div>
     </template>
     <Accordion :activeIndex="0" class="block w-full" :multiple="true"
@@ -18,10 +23,21 @@
               {{ container.name }}
             </span>
             <div>
-              <div @click="(event) => handleEditClick(event, container.id)" class="px-5">
+              <div
+                  @click="(event) => handleEditClick(event, container.id)"
+                  class="px-5"
+              >
                 <span class="mr-4 text-xs uppercase" v-if="container.public">
                   {{ t('modules.seller.productContainers.containers.public') }}
-                <i class="pi pi-pencil"/>
+                  <i
+                      class="pi pi-pencil"
+                      v-if="isAllowed('update', ['own', 'organ'], 'Container', ['any'])"
+                  />
+                  <i
+                     class="pi pi-info-circle"
+                      v-else
+                  />
+
                 </span>
               </div>
             </div>
@@ -33,7 +49,9 @@
     <ContainerActionsDialog
         :container="selectedContainer"
         v-model:visible="visible"
-        :associatedPos="associatedPos"/>
+        :associatedPos="associatedPos"
+        :is-edit-allowed="isAllowed('update', ['own', 'organ'], 'Container', ['any'])"
+    />
     <!-- For rendering in the point of sale view -->
     <POSAddContainerModal
         v-if="associatedPos"
@@ -53,6 +71,7 @@ import ContainerActionsDialog from "@/components/container/ContainerActionsDialo
 import type { ContainerWithProductsResponse, PointOfSaleWithContainersResponse } from "@sudosos/sudosos-client";
 import POSAddContainerModal from "@/modules/seller/components/POSAddContainerModal.vue";
 import { useI18n } from "vue-i18n";
+import { isAllowed } from "@/utils/permissionUtils";
 
 const visible = ref(false);
 const POSAddContainerIsVisible = ref(false);
@@ -70,6 +89,10 @@ const props = defineProps({
   associatedPos: {
     type: Object as PropType<PointOfSaleWithContainersResponse>,
     required: false
+  },
+  posEditAllowed: {
+    type: Boolean,
+    required: false
   }
 });
 
diff --git a/apps/dashboard/src/locales/en/common/common.json b/apps/dashboard/src/locales/en/common/common.json
index 7edba4b2..a743419a 100644
--- a/apps/dashboard/src/locales/en/common/common.json
+++ b/apps/dashboard/src/locales/en/common/common.json
@@ -165,6 +165,9 @@
             }
         },
         "apiError": "Error",
-        "errorMessage": "Something is going wrong, please open an issue on {link} describing the issue."
+        "errorMessage": "Something is going wrong, please open an issue on {link} describing the issue.",
+        "permissionMessages": {
+            "transactions": "You are not allowed to view these transactions."
+        }
     }
 }
diff --git a/apps/dashboard/src/locales/en/modules/seller.json b/apps/dashboard/src/locales/en/modules/seller.json
index 0a1da4cb..11c9e9b6 100644
--- a/apps/dashboard/src/locales/en/modules/seller.json
+++ b/apps/dashboard/src/locales/en/modules/seller.json
@@ -20,7 +20,8 @@
           "public": "Public",
           "container": "Container",
           "create": "Create container",
-          "edit": "Edit container"
+          "edit": "Edit container",
+          "view": "View container"
         },
         "products": {
           "header": "All products",
diff --git a/apps/dashboard/src/locales/nl/common/common.json b/apps/dashboard/src/locales/nl/common/common.json
index 51cb36fb..544c6fb9 100644
--- a/apps/dashboard/src/locales/nl/common/common.json
+++ b/apps/dashboard/src/locales/nl/common/common.json
@@ -165,6 +165,9 @@
             }
         },
         "apiError": "Fout",
-        "errorMessage": "Er is iets misgegaan, open een issue op {link} en beschrijf het probleem."
+        "errorMessage": "Er is iets misgegaan, open een issue op {link} en beschrijf het probleem.",
+        "permissionMessages": {
+            "transactions": "Je mag deze transacties niet bekijken."
+        }
     }
 }
diff --git a/apps/dashboard/src/locales/nl/modules/seller.json b/apps/dashboard/src/locales/nl/modules/seller.json
index b4c1e41c..f36d9d4d 100644
--- a/apps/dashboard/src/locales/nl/modules/seller.json
+++ b/apps/dashboard/src/locales/nl/modules/seller.json
@@ -20,7 +20,8 @@
           "public": "Openbaar",
           "container": "Container",
           "create": "Container aanmaken",
-          "edit": "Container bewerken"
+          "edit": "Container bewerken",
+          "view": "Container bekijken"
         },
         "products": {
           "header": "Alle producten",
diff --git a/apps/dashboard/src/main.ts b/apps/dashboard/src/main.ts
index 27b01e92..86a71bb3 100644
--- a/apps/dashboard/src/main.ts
+++ b/apps/dashboard/src/main.ts
@@ -6,6 +6,7 @@ import router from './router';
 import PrimeVue from 'primevue/config';
 import Button from "primevue/button";
 import "./styles/themes/sudosos-light/theme.scss";
+import Image from "primevue/image";
 import InputText from "primevue/inputtext";
 import Menubar from "primevue/menubar";
 import Message from "primevue/message";
@@ -63,6 +64,7 @@ app.component('Panel', Panel);
 app.component('DataTable', DataTable);
 app.component('DataView', DataView);
 app.component('InputNumber', InputNumber);
+app.component('Image', Image);
 app.component('Dialog', Dialog);
 app.component('Dropdown', Dropdown);
 app.component('Checkbox', Checkbox);
diff --git a/apps/dashboard/src/modules/admin/components/users/AdminUserFineWaiveModal.vue b/apps/dashboard/src/modules/admin/components/users/AdminUserFineWaiveModal.vue
index 14bc7907..dc994d2b 100644
--- a/apps/dashboard/src/modules/admin/components/users/AdminUserFineWaiveModal.vue
+++ b/apps/dashboard/src/modules/admin/components/users/AdminUserFineWaiveModal.vue
@@ -1,5 +1,7 @@
 <template>
-  <FormDialog :header="t('modules.admin.singleUser.balance.waiveFines')" v-model:modelValue="isVisible"
+  <FormDialog :header="t('modules.admin.singleUser.balance.waiveFines')"
+              v-model:modelValue="isVisible"
+              :is-editable="true"
               :form="form">
     <template #form="slotProps">
       <div>
diff --git a/apps/dashboard/src/modules/admin/routes.ts b/apps/dashboard/src/modules/admin/routes.ts
index 4eb43e12..d2695e72 100644
--- a/apps/dashboard/src/modules/admin/routes.ts
+++ b/apps/dashboard/src/modules/admin/routes.ts
@@ -3,7 +3,7 @@ import DashboardLayout from "@/layout/DashboardLayout.vue";
 import AdminUserOverView from "@/modules/admin/views/AdminUserOverView.vue";
 import AdminBannersView from "@/modules/admin/views/AdminBannersView.vue";
 import AdminSingleUserView from "@/modules/admin/views/AdminSingleUserView.vue";
-import { UserRole } from "@/utils/rbacUtils";
+import { isAllowed } from "@/utils/permissionUtils";
 
 export function adminRoutes(): RouteRecordRaw[] {
   return [
@@ -18,7 +18,8 @@ export function adminRoutes(): RouteRecordRaw[] {
           component: AdminUserOverView,
           meta: {
             requiresAuth: true,
-            rolesAllowed: [UserRole.BAC_PM, UserRole.BAC, UserRole.BOARD]
+            // TODO: Change to `action: get` after https://github.com/GEWIS/sudosos-backend/issues/62 is fully finished
+            isAllowed: () => isAllowed('update', ['all'], 'User', ['any'])
           }
         },
         {
@@ -27,7 +28,7 @@ export function adminRoutes(): RouteRecordRaw[] {
           name: 'banners',
           meta: {
             requiresAuth: true,
-            rolesAllowed: [UserRole.BOARD]
+            isAllowed: () => isAllowed('get', ['own', 'organ'], 'Banner', ['any'])
           }
         },
         {
@@ -35,6 +36,10 @@ export function adminRoutes(): RouteRecordRaw[] {
           component: AdminSingleUserView,
           name: 'user',
           props: true,
+          meta: {
+            requiresAuth: true,
+            isAllowed: () => isAllowed('get', ['all'], 'User', ['any'])
+          }
         },
       ],
     }
diff --git a/apps/dashboard/src/modules/admin/views/AdminUserOverView.vue b/apps/dashboard/src/modules/admin/views/AdminUserOverView.vue
index aa3f8a16..43eb2932 100644
--- a/apps/dashboard/src/modules/admin/views/AdminUserOverView.vue
+++ b/apps/dashboard/src/modules/admin/views/AdminUserOverView.vue
@@ -107,7 +107,7 @@
       </DataTable>
     </CardComponent>
     <FormDialog :header="t('modules.admin.forms.user.header')" v-model:modelValue="showDialog"
-                :form="form" >
+                :form="form" :is-editable="true">
       <template #form="slotProps">
         <UserCreateForm
             :form="slotProps.form"
diff --git a/apps/dashboard/src/modules/financial/routes.ts b/apps/dashboard/src/modules/financial/routes.ts
index ee8f117d..8c364391 100644
--- a/apps/dashboard/src/modules/financial/routes.ts
+++ b/apps/dashboard/src/modules/financial/routes.ts
@@ -2,9 +2,9 @@ import type { RouteRecordRaw } from "vue-router";
 import DashboardLayout from "@/layout/DashboardLayout.vue";
 import FineView from "@/modules/financial/views/FineView.vue";
 import PayoutsView from "@/modules/financial/views/payouts/PayoutsView.vue";
-import { UserRole } from "@/utils/rbacUtils";
 import InvoiceOverview from "@/modules/financial/views/invoice/InvoiceOverview.vue";
 import InvoiceInfoView from "@/modules/financial/views/invoice/InvoiceInfoView.vue";
+import { isAllowed } from "@/utils/permissionUtils";
 import InvoiceCreateView from "@/modules/financial/views/invoice/InvoiceCreateView.vue";
 
 export function financialRoutes(): RouteRecordRaw[] {
@@ -15,62 +15,62 @@ export function financialRoutes(): RouteRecordRaw[] {
       meta: { requiresAuth: true },
       children: [
         {
-          path: '/fine',
-          component: FineView,
-          name: 'fines',
-          meta: {
-            requiresAuth: true,
-            rolesAllowed: [UserRole.BAC_PM]
-          }
-        },
-        {
-          path: '/invoice',
-          component: InvoiceOverview,
-          name: 'invoices',
-          meta: {
-            requiresAuth: true,
-            rolesAllowed: [UserRole.BAC_PM]
-          }
-        },
-        {
-          path: '/invoice/create',
-          component: InvoiceCreateView,
-          name: 'invoiceCreate',
-          meta: {
-            requiresAuth: true,
-            rolesAllowed: [UserRole.BAC_PM]
-          }
-        },
-        {
-          path: '/invoice/:id',
-          redirect: to => {
+        path: '/fine',
+        component: FineView,
+        name: 'fines',
+        meta: {
+          requiresAuth: true,
+          isAllowed: () => isAllowed('get', ['own', 'organ'], 'Fine', ['any'])
+        }
+      },
+      {
+        path: '/invoice',
+        component: InvoiceOverview,
+        name: 'invoices',
+        meta: {
+          requiresAuth: true,
+          isAllowed: () => isAllowed('get', ['own', 'organ'], 'Invoice', ['any'])
+        }
+      },
+      {
+        path: '/invoice/create',
+        component: InvoiceCreateView,
+        name: 'invoiceCreate',
+        meta: {
+          requiresAuth: true,
+          isAllowed: () => isAllowed('create', ['own', 'organ'], 'Invoice', ['any'])
+        }
+      },
+      {
+        path: '/invoice/:id',
+        redirect: to => {
             const { id } = to.params;
             return `/invoice/${id}/info`;
-          },
-          meta: {
-            requiresAuth: true,
-            rolesAllowed: [UserRole.BAC_PM]
-          }
         },
-        {
-          path: '/invoice/:id/info',
-          name: 'invoiceInfo',
-          component: InvoiceInfoView,
-          props: true,
-          meta: {
-            requiresAuth: true,
-            rolesAllowed: [UserRole.BAC_PM]
-          }
-        },
-        {
-          path: '/payout',
-          component: PayoutsView,
-          name: 'payouts',
-          meta: {
+        meta: {
+        requiresAuth: true,
+            isAllowed: () => isAllowed('get', ['own', 'organ'], 'Invoice', ['any'])
+        }
+      },
+      {
+        path: '/invoice/:id/info',
+        name: 'invoiceInfo',
+        component: InvoiceInfoView,
+        props: true,
+        meta: {
             requiresAuth: true,
-            rolesAllowed: [UserRole.BAC_PM]
-          }
+            isAllowed: () => isAllowed('get', ['own', 'organ'], 'Invoice', ['any'])
+        }
+      },
+      {
+        path: '/payout',
+        component: PayoutsView,
+        name: 'payouts',
+        meta: {
+          requiresAuth: true,
+          isAllowed: () => isAllowed('get', ['own', 'organ'], 'SellerPayout', ['any'])
         }
+      }
       ]
     }
   ];
diff --git a/apps/dashboard/src/modules/financial/views/payouts/PayoutsView.vue b/apps/dashboard/src/modules/financial/views/payouts/PayoutsView.vue
index a25ef298..31d0bb80 100644
--- a/apps/dashboard/src/modules/financial/views/payouts/PayoutsView.vue
+++ b/apps/dashboard/src/modules/financial/views/payouts/PayoutsView.vue
@@ -18,7 +18,7 @@
         </TabPanel>
       </TabView>
     </div>
-    <FormDialog v-model="showDialog" :form="form" :header="t('modules.financial.payout.create')">
+    <FormDialog v-model="showDialog" :form="form" :header="t('modules.financial.payout.create')" :is-editable="false">
       <template #form="slotProps">
         <PayoutCreateForm :form="slotProps.form" @submit:success="showDialog = false"/>
       </template>
diff --git a/apps/dashboard/src/modules/seller/components/POSAddContainerModal.vue b/apps/dashboard/src/modules/seller/components/POSAddContainerModal.vue
index 1c52e3d5..f7d488c9 100644
--- a/apps/dashboard/src/modules/seller/components/POSAddContainerModal.vue
+++ b/apps/dashboard/src/modules/seller/components/POSAddContainerModal.vue
@@ -1,6 +1,8 @@
 <template>
-  <FormDialog :header="t('modules.seller.productContainers.containers.addExisting')" v-model:modelValue="isVisible"
-              :form="form">
+  <FormDialog :header="t('modules.seller.productContainers.containers.addExisting')"
+              v-model:modelValue="isVisible"
+              :form="form"
+              :is-editable="true">
     <template #form="slotProps">
       <POSAddContainerForm :form="slotProps.form" :associatedPos="associatedPos" v-model:isVisible="isVisible"/>
     </template>
diff --git a/apps/dashboard/src/modules/seller/components/POSCreateModal.vue b/apps/dashboard/src/modules/seller/components/POSCreateModal.vue
index b044420d..0f5a49f3 100644
--- a/apps/dashboard/src/modules/seller/components/POSCreateModal.vue
+++ b/apps/dashboard/src/modules/seller/components/POSCreateModal.vue
@@ -1,6 +1,6 @@
 <template>
   <FormDialog :header="t('modules.seller.forms.pos.create')" v-model:modelValue="isVisible"
-              :form="form">
+              :form="form" :is-editable="true">
     <template #form="slotProps">
       <POSCreateForm :form="slotProps.form" v-model:isVisible="isVisible"/>
     </template>
diff --git a/apps/dashboard/src/modules/seller/components/POSOverviewTable.vue b/apps/dashboard/src/modules/seller/components/POSOverviewTable.vue
index b1da90c7..7317b7e0 100644
--- a/apps/dashboard/src/modules/seller/components/POSOverviewTable.vue
+++ b/apps/dashboard/src/modules/seller/components/POSOverviewTable.vue
@@ -2,7 +2,12 @@
   <CardComponent :header="t('modules.seller.posOverview.list.header')" class="w-full">
     <template #topAction>
       <div class="flex flex-row align-items-center justify-content-end">
-        <Button :label="t('common.create')" icon="pi pi-plus" @click="openCreatePOSModal"/>
+        <Button
+            :label="t('common.create')"
+            icon="pi pi-plus"
+            @click="openCreatePOSModal"
+            v-if="isAllowed('create', ['own', 'organ'], 'PointOfSale', ['any'])"
+        />
       </div>
     </template>
     <DataTable :rows="rows" :value="pointOfSales" :rowsPerPageOptions="[5, 10, 25, 50, 100]" paginator lazy
@@ -44,6 +49,7 @@ import Skeleton from "primevue/skeleton";
 import router from "@/router";
 import POSCreateModal from "@/modules/seller/components/POSCreateModal.vue";
 import { useI18n } from "vue-i18n";
+import { isAllowed } from "@/utils/permissionUtils";
 
 const { t } = useI18n();
 
diff --git a/apps/dashboard/src/modules/seller/components/POSSettingsCard.vue b/apps/dashboard/src/modules/seller/components/POSSettingsCard.vue
index 53f840da..b4b122e8 100644
--- a/apps/dashboard/src/modules/seller/components/POSSettingsCard.vue
+++ b/apps/dashboard/src/modules/seller/components/POSSettingsCard.vue
@@ -1,10 +1,12 @@
 <template>
   <FormCard :header="t('modules.seller.forms.pos.overview')" v-if="pointOfSale" @cancel="updateFieldValues(pointOfSale)"
-            @update:modelValue="edit = $event" @save="formSubmit">
+            @update:modelValue="edit = $event" @save="formSubmit"
+            :enableEdit="isAllowed('update', ['own', 'organ'], 'PointOfSale', ['any'])">
     <div class="flex flex-column justify-content-between gap-2">
       <POSSettingsForm :point-of-sale="pointOfSale" :form="form" :edit="edit" @update:edit="edit = $event"/>
       <div class="flex flex-row justify-content-end">
         <Button
+            v-if="isAllowed('delete', ['own', 'organ'], 'PointOfSale', ['any'])"
             :disabled="!edit"
             @click="handleDelete"
             icon="pi pi-trash"
@@ -30,6 +32,7 @@ import router from "@/router";
 import { useI18n } from "vue-i18n";
 import { useToast } from "primevue/usetoast";
 import { handleError } from "@/utils/errorUtils";
+import { isAllowed } from "@/utils/permissionUtils";
 
 const confirm = useConfirm();
 
diff --git a/apps/dashboard/src/modules/seller/components/ProductActionDialog.vue b/apps/dashboard/src/modules/seller/components/ProductActionDialog.vue
index eda0964a..50981d60 100644
--- a/apps/dashboard/src/modules/seller/components/ProductActionDialog.vue
+++ b/apps/dashboard/src/modules/seller/components/ProductActionDialog.vue
@@ -5,8 +5,9 @@
               @show="openDialog()"
               @close="closeDialog()"
               @delete="deleteProduct()"
-              :deletable="product != null"
+              :deletable="props.product != null"
               :delete-label="deleteLabel"
+              :is-editable="props.isUpdateAllowed"
   >
     <template #form>
       <div class="flex flex-column gap-1">
@@ -37,15 +38,15 @@
               <!-- Row for Added on -->
               <div v-if="state.displayProduct" class="flex flex-row flex-wrap justify-content-between">
                 <h4 class="my-0">{{ t("common.createdAt") }}</h4>
-                <p class="my-0" v-if="product">
-                  {{ formatDateTime(new Date(product.createdAt ? product.createdAt.toString() : '')) }}</p>
+                <p class="my-0" v-if="props.product">
+                  {{ formatDateTime(new Date(props.product.createdAt ? props.product.createdAt.toString() : '')) }}</p>
               </div>
 
               <!-- Row for Updated on -->
               <div v-if="state.displayProduct" class="flex flex-row flex-wrap justify-content-between">
                 <h4 class="my-0">{{ t("common.updatedAt") }}</h4>
-                <p class="my-0" v-if="product">
-                  {{ formatDateTime(new Date(product.updatedAt ? product.updatedAt.toString() : '')) }}</p>
+                <p class="my-0" v-if="props.product">
+                  {{ formatDateTime(new Date(props.product.updatedAt ? props.product.updatedAt.toString() : '')) }}</p>
               </div>
             </div>
           </div>
@@ -98,6 +99,9 @@ const props = defineProps({
   product: {
     type: Object as PropType<ProductResponse | undefined>,
   },
+  isUpdateAllowed: {
+    type: Boolean
+  }
 });
 
 const visible = defineModel<boolean>('visible', { required: true });
@@ -206,7 +210,7 @@ watch(selectExistingProduct, () => {
 });
 
 // We don't allow editing of dropdown products
-const isProductEditable = computed(() => selectExistingProduct.value == null);
+const isProductEditable = computed(() => props.isUpdateAllowed && selectExistingProduct.value == null);
 
 setSubmit(form, form.context.handleSubmit(async (values) => {
   let createdProduct;
diff --git a/apps/dashboard/src/modules/seller/components/ProductsCard.vue b/apps/dashboard/src/modules/seller/components/ProductsCard.vue
index 08ec014c..62990081 100644
--- a/apps/dashboard/src/modules/seller/components/ProductsCard.vue
+++ b/apps/dashboard/src/modules/seller/components/ProductsCard.vue
@@ -2,10 +2,19 @@
   <CardComponent :header="t('modules.seller.productContainers.products.header')" class="w-full">
     <template #topAction>
       <div>
-        <Button @click="openCreateModal">{{ t('common.create') }}</Button>
+        <Button
+            @click="openCreateModal"
+            v-if="isAllowed('create', ['own', 'organ'], 'Product')"
+        >
+          {{ t('common.create') }}
+        </Button>
       </div>
     </template>
-    <ProductActionDialog v-model:visible="visible" :product="product"/>
+    <ProductActionDialog
+        v-model:visible="visible"
+        :product="product"
+        :is-update-allowed="isAllowed('update', ['own', 'organ'], 'Product')"
+    />
     <DataTable
         v-model:filters="filters"
         :value="products"
@@ -31,28 +40,19 @@
       </template>
       <Column field="image" :header="t('modules.seller.productContainers.products.image')">
         <template #body="rowDataImg" v-if="!loading">
-          <div
-              class="h-4rem flex justify-content-center align-items-center background-white
-                   w-4rem mx-1 cursor-pointer image-preview-container">
-            <div class="h-4rem w-4rem">
-              <img :src="getProductImageSrc(rowDataImg.data)" alt="img" class="h-4rem w-4rem product-image"/>
-            </div>
-            <button
-                ref="previewButton"
-                type="button"
-                class="image-preview-indicator p-image-preview-indicator fileupload"
-                @click="triggerFileInput(rowDataImg.data.id)"
-            >
-              <i class="pi pi-upload"></i>
-              <input
-                  :ref="(el) => (fileInputs[rowDataImg.data.id] = el)"
-                  type="file"
-                  accept="image/*"
-                  id="fileInput"
-                  @change="(e) => onImgUpload(e, rowDataImg.data.id)"
-              />
-            </button>
-          </div>
+          <Image
+              :src="getProductImageSrc(rowDataImg.data)" preview
+              class="h-4rem w-4rem image-preview-container"
+              :pt="{
+                image: {
+                  class: 'h-4rem w-4rem',
+                  style: {
+                    'object-fit': 'contain',
+                    'box-sizing': 'border-box'
+                  }
+                }
+              }"
+          />
         </template>
         <template #body v-else>
           <Skeleton class="w-8 my-1 h-4rem surface-300"/>
@@ -134,14 +134,13 @@ import { useProductStore } from "@/stores/product.store";
 import { FilterMatchMode } from "primevue/api";
 import ProductActionDialog from "@/modules/seller/components/ProductActionDialog.vue";
 import { useI18n } from "vue-i18n";
+import { isAllowed } from "@/utils/permissionUtils";
 
 const { t } = useI18n();
 
 const loading: Ref<boolean> = ref(true);
 const visible: Ref<boolean> = ref(false);
 const product: Ref<ProductResponse | undefined> = ref(undefined);
-const fileInputs: Ref<{ [key: number]: any }> = ref({});
-
 const productStore = useProductStore();
 
 const products = computed<ProductResponse[]>(() => Object.values(productStore.getAllProducts)
@@ -157,17 +156,6 @@ onBeforeMount(async () => {
   loading.value = false;
 });
 
-const triggerFileInput = (id: number) => {
-  if (fileInputs.value[id]) {
-    fileInputs.value[id].click();
-  }
-};
-const onImgUpload = async (event: Event, productId: number) => {
-  const el = (event.target as HTMLInputElement);
-  if (el == null || el.files == null || el.files.length === 0) return;
-  await productStore.updateProductImage(productId, el.files[0]);
-};
-
 const openCreateModal = () => {
   product.value = undefined;
   visible.value = true;
diff --git a/apps/dashboard/src/modules/seller/routes.ts b/apps/dashboard/src/modules/seller/routes.ts
index 6824bb0a..cfc1d2e7 100644
--- a/apps/dashboard/src/modules/seller/routes.ts
+++ b/apps/dashboard/src/modules/seller/routes.ts
@@ -5,6 +5,7 @@ import { UserRole } from "@/utils/rbacUtils";
 import POSOverviewView from "@/modules/seller/views/POSOverviewView.vue";
 import POSInfoView from "@/modules/seller/views/POSInfoView.vue";
 import SellerPayoutsView from "@/modules/seller/views/SellerPayoutsView.vue";
+import { isAllowed } from "@/utils/permissionUtils";
 
 export function sellerRoutes(): RouteRecordRaw[] {
   return [
@@ -20,7 +21,8 @@ export function sellerRoutes(): RouteRecordRaw[] {
           props: true,
           meta: {
             requiresAuth: true,
-            rolesAllowed: [UserRole.SELLER]
+            rolesAllowed: [UserRole.SELLER],
+            isAllowed: () => isAllowed('get', ['own', 'organ'], 'SellerPayout', ['any'])
           }
         },
         {
@@ -29,7 +31,7 @@ export function sellerRoutes(): RouteRecordRaw[] {
           name: 'products',
           meta: {
             requiresAuth: true,
-            rolesAllowed: [UserRole.SELLER]
+            isAllowed: () => isAllowed('get', ['own', 'organ'], 'Product', ['any'])
           }
         },
         {
@@ -38,7 +40,7 @@ export function sellerRoutes(): RouteRecordRaw[] {
           component: POSOverviewView,
           meta: {
             requiresAuth: true,
-            rolesAllowed: [UserRole.SELLER]
+            isAllowed: () => isAllowed('get', ['own', 'organ'], 'PointOfSale', ['any'])
           }
         },
         {
@@ -48,7 +50,7 @@ export function sellerRoutes(): RouteRecordRaw[] {
           props: true,
           meta: {
             requiresAuth: true,
-            rolesAllowed: [UserRole.SELLER]
+            isAllowed: () => isAllowed('get', ['own', 'organ'], 'PointOfSale', ['any'])
           }
         }
       ]
diff --git a/apps/dashboard/src/modules/seller/views/POSInfoView.vue b/apps/dashboard/src/modules/seller/views/POSInfoView.vue
index 961017d5..313f7a98 100644
--- a/apps/dashboard/src/modules/seller/views/POSInfoView.vue
+++ b/apps/dashboard/src/modules/seller/views/POSInfoView.vue
@@ -5,7 +5,8 @@
       <div class="flex flex-column md:flex-row gap-5 justify-content-between align-items-stretch w-12">
         <POSSettingsCard :pos-id="id!" class="flex-1 h-12" />
         <CardComponent :header="t('modules.seller.singlePos.sales')" class="flex-1" >
-          <div class="h-12 text-center text-5xl pb-3">{{ formattedTotalSales }}</div>
+          <div class="h-12 text-center text-5xl pb-3" v-if="canLoadTransactions">{{ formattedTotalSales }}</div>
+          <div v-else>{{ t('common.permissionMessages.transactions') }}</div>
         </CardComponent>
       </div>
       <ContainerCard
@@ -14,14 +15,17 @@
         :containers="posContainers"
         show-create
         :associatedPos="pointsOfSaleWithContainers[id!]"
+        :pos-edit-allowed="canEditPos"
       />
       <CardComponent :header="t('components.mutations.recent')">
         <MutationPOSCard
+            v-if="canLoadTransactions"
           class="pos-transactions"
           :get-mutations="getPOSTransactions"
           paginator
           style="width: 100% !important"
         />
+        <div v-else>{{ t('common.permissionMessages.transactions') }}</div>
       </CardComponent>
     </div>
   </div>
@@ -49,6 +53,7 @@ import Dinero from "dinero.js";
 import { type StoreGeneric, storeToRefs } from "pinia";
 import { useI18n } from "vue-i18n";
 import { type ContainerWithProductsResponse } from "@sudosos/sudosos-client/src/api";
+import { getRelation, isAllowed } from "@/utils/permissionUtils";
 
 const route = useRoute(); // Use the useRoute function to access the current route
 const id = ref<number>();
@@ -60,12 +65,22 @@ const containerStore = useContainerStore();
 
 const { t } = useI18n();
 
+const canEditPos = computed(() => {
+  return pointsOfSaleWithContainers.value[id.value!] &&
+  isAllowed('update', [getRelation(pointsOfSaleWithContainers.value[id.value!].owner!.id)], 'PointOfSale', ['any']);
+});
+
 const posName = computed(() => {
   return id.value && pointsOfSaleWithContainers.value[id.value]
   ? pointsOfSaleWithContainers.value[id.value].name
   : t('common.loading');
 });
 
+const canLoadTransactions = computed(() => {
+  if (pointsOfSaleWithContainers.value[id.value!] == undefined) return false;
+  return isAllowed('get', [getRelation(pointsOfSaleWithContainers.value[id.value!].owner!.id)], 'Transaction', ['any']);
+});
+
 // Fetch containers from the container store, then the ContainerCard will be reactive.
 const posContainerIds = computed(() =>
     pointsOfSaleWithContainers.value[id.value!]?.containers
@@ -91,6 +106,7 @@ const formattedTotalSales = computed(() => {
 });
 
 onMounted(async () => {
+  if (!canLoadTransactions.value) return;
   const transactionStore = useTransactionStore();
   const transactionsInLastWeek = (await transactionStore.fetchTransactionsFromPointOfSale(
       apiService,
diff --git a/apps/dashboard/src/modules/seller/views/POSOverviewView.vue b/apps/dashboard/src/modules/seller/views/POSOverviewView.vue
index 97759ffc..567a811c 100644
--- a/apps/dashboard/src/modules/seller/views/POSOverviewView.vue
+++ b/apps/dashboard/src/modules/seller/views/POSOverviewView.vue
@@ -9,15 +9,14 @@
 
 <script setup lang="ts">
 import POSOverviewTable from "@/modules/seller/components/POSOverviewTable.vue";
-import { computed } from "vue";
 import { useUserStore } from "@sudosos/sudosos-frontend-common";
-import { UserRole } from "@/utils/rbacUtils";
 import { usePointOfSaleStore } from "@/stores/pos.store";
 import type { PaginatedPointOfSaleResponse } from "@sudosos/sudosos-client";
 import router from "@/router";
 import { handleError } from "@/utils/errorUtils";
 import { useToast } from "primevue/usetoast";
 import { useI18n } from "vue-i18n";
+import { isAllowed } from "@/utils/permissionUtils";
 
 const { t } = useI18n();
 
@@ -26,10 +25,6 @@ const userStore = useUserStore();
 
 const toast = useToast();
 
-const isBacPM = computed(() => {
-  return userStore.current.rolesWithPermissions.findIndex(r => r.name == UserRole.BAC_PM) != -1;
-});
-
 const getPointsOfSale = async (take: number, skip: number):
     Promise<PaginatedPointOfSaleResponse | undefined> => {
   if (!userStore.getCurrentUser) {
@@ -37,7 +32,10 @@ const getPointsOfSale = async (take: number, skip: number):
     return;
   }
   let pointsOfSale;
-  if (isBacPM.value) {
+  // If you can get all point of sales, render them. Otherwise only the user ones.
+  console.log(isAllowed('get', ['all'], 'PointOfSale', ['any']));
+  // TODO: Change to `action: get` after https://github.com/GEWIS/sudosos-backend/issues/62 is fully finished
+  if (isAllowed('update', ['all'], 'PointOfSale', ['any'])) {
     pointsOfSale = await pointOfSaleStore.getPointsOfSale(take, skip)
         .catch((err) => handleError(err, toast));
   } else {
diff --git a/apps/dashboard/src/modules/user/components/UserSettingsComponent.vue b/apps/dashboard/src/modules/user/components/UserSettingsComponent.vue
index 2362d819..6eeae904 100644
--- a/apps/dashboard/src/modules/user/components/UserSettingsComponent.vue
+++ b/apps/dashboard/src/modules/user/components/UserSettingsComponent.vue
@@ -61,6 +61,7 @@
       v-model="showPasswordDialog"
       :form="passwordForm"
       :header="t('modules.user.settings.changePassword')"
+      :is-editable="true"
   >
     <template #form="slotProps">
       <ChangePasswordForm :form="slotProps.form" @submit:success="showPasswordDialog = false"/>
diff --git a/apps/dashboard/src/modules/user/routes.ts b/apps/dashboard/src/modules/user/routes.ts
index 320bef5a..e36239b6 100644
--- a/apps/dashboard/src/modules/user/routes.ts
+++ b/apps/dashboard/src/modules/user/routes.ts
@@ -3,6 +3,7 @@ import DashboardLayout from "@/layout/DashboardLayout.vue";
 import UserLandingView from "@/modules/user/views/UserLandingView.vue";
 import UserTransactionsView from "@/modules/user/views/UserTransactionsView.vue";
 import ProfileView from "@/modules/user/views/UserProfileView.vue";
+import { isAllowed } from "@/utils/permissionUtils";
 
 export function userRoutes(): RouteRecordRaw[] {
   return [
@@ -14,17 +15,29 @@ export function userRoutes(): RouteRecordRaw[] {
         {
           path: '/',
           component: UserLandingView,
-          name: 'home'
+          name: 'home',
+          meta: {
+            requiresAuth: true,
+            isAllowed: () => isAllowed('get', ['own'], 'User', ['any'])
+          }
         },
         {
           path: '/transaction',
           component: UserTransactionsView,
-          name: 'transactions'
+          name: 'transactions',
+          meta: {
+            requiresAuth: true,
+            isAllowed: () => isAllowed('get', ['own'], 'Transaction', ['any'])
+          }
         },
         {
           path: '/profile',
           component: ProfileView,
           name: 'profile',
+          meta: {
+            requiresAuth: true,
+            isAllowed: () => isAllowed('get', ['own'], 'User', ['any'])
+          }
         },
       ]
     }
diff --git a/apps/dashboard/src/router/index.ts b/apps/dashboard/src/router/index.ts
index 4d9975ac..1440a347 100644
--- a/apps/dashboard/src/router/index.ts
+++ b/apps/dashboard/src/router/index.ts
@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import PublicLayout from "@/layout/PublicLayout.vue";
 import DashboardLayout from "@/layout/DashboardLayout.vue";
-import { isAuthenticated, useAuthStore, useUserStore } from "@sudosos/sudosos-frontend-common";
+import { isAuthenticated, useAuthStore } from "@sudosos/sudosos-frontend-common";
 import 'vue-router';
 import ErrorView from "@/views/ErrorView.vue";
 import { authRoutes } from "@/modules/auth/routes";
@@ -16,8 +16,7 @@ declare module 'vue-router' {
   interface RouteMeta {
     // must be declared by every route
     requiresAuth: boolean
-
-    rolesAllowed?: string[]
+    isAllowed?: () => boolean
   }
 }
 
@@ -68,7 +67,6 @@ const router = createRouter({
 
 router.beforeEach((to, from, next) => {
   const authStore = useAuthStore();
-  const userStore = useUserStore();
   const settingsStore = useSettingsStore();
 
   if (settingsStore.activeSettings.maintenanceMode && to.name !== 'maintenance') {
@@ -91,16 +89,15 @@ router.beforeEach((to, from, next) => {
   } else if (!to.meta?.requiresAuth && isAuth && hasTOSAccepted() == 'ACCEPTED') {
     // If the route doesn't require authentication and the user is authenticated, redirect to home
     next({ name: 'home' });
-  } else {
-    if(to.meta?.rolesAllowed) {
-      // Test overlapping roles between the allowed roles and the roles the user has
-      const rolesUnion =
-          [...new Set([...to.meta.rolesAllowed, ...userStore.current.rolesWithPermissions.map(r => r.name)])];
-
-      // No overlapping roles -> No correct permissions -> Back to home
-      if(rolesUnion.length == 0) ({ name: 'home' });
+  } else if (to.meta?.isAllowed) {
+    // Permission guard present, so let's test is
+    if(to.meta?.isAllowed()) {
+      next();
+    } else {
+      next({ name: 'home' });
     }
-
+  } else {
+    // Always allowed
     next();
   }
 });
diff --git a/apps/dashboard/src/utils/permissionUtils.ts b/apps/dashboard/src/utils/permissionUtils.ts
new file mode 100644
index 00000000..075e732b
--- /dev/null
+++ b/apps/dashboard/src/utils/permissionUtils.ts
@@ -0,0 +1,81 @@
+import { useAuthStore, useUserStore } from "@sudosos/sudosos-frontend-common";
+
+/**
+ * Performs an access check for the given parameters.
+ * This method can be used to verify if a user with the given role(s)
+ * is permitted to perform the given action (eg. create, read, update, delete) on the given
+ * properties of the given data entity, to which the user has the given relations.
+ *
+ * @param action - The action on the entity to check access for.
+ *    Commonly used actions are 'create', 'get', 'update', and 'delete'.
+ * @param relations - The ownership relations towards the object.
+ *    The ownership relations describes the status of the user related to the object:
+ *    the user can be the owner, organ, or not related at all.
+ *    Commonly used ownership relations are 'own', 'organ' and 'all'.
+ * @param entity - The entity type name of the object. Most often this is a
+ *    database entity, but it could also be a computed entity such as 'balance'.
+ * @param attributes - The list of attributes to access. The wildcard '*' can be
+ *    used to verify that the user is allowed to access all properties.
+ *    'any' can be used if there is any attribute that can be edited.
+ * @returns {boolean} - True if access is allowed, false otherwise.
+ */
+export function isAllowed(
+    action: string,
+    relations: string | string[],
+    entity: string,
+    attributes?: string[] | undefined
+) {
+    const userStore = useUserStore();
+
+    // Convert relations to array if a single relation is given.
+    let relationsArray: string[];
+    if (typeof relations === 'string') {
+        relationsArray = [relations];
+    } else {
+        relationsArray = relations;
+    }
+    // Add the relation "all" to the relations, because if you have permission to access "all",
+    // it does not matter what the given relation is.
+    if (relationsArray.indexOf('all') === -1) {
+        relationsArray.push('all');
+    }
+
+    // If no attributes are specified, any attribute is fine.
+    if (!attributes) attributes = ['any'];
+
+    // For all found permission records, get a single list of all attributes the user is allowed to access
+    const allPermissions = userStore.current.rolesWithPermissions.flatMap(r => r.permissions);
+
+    const applicableAttributes = allPermissions
+        .filter(p => p.entity == entity).flatMap(p => p.actions)
+        .filter(a => a.action == action).flatMap(a => a.relations)
+        .filter(r => relations.includes(r.relation)).flatMap(r => r.attributes);
+
+    // If the user has a wildcard as attribute, they are allowed to access everything, so return true.
+    const hasStar = applicableAttributes.some((a) => a === '*');
+    if (hasStar) return true;
+
+    // If there just needs to be any attribute at least, then return true when there is atleast one applicable attribute
+    if (attributes.includes('any') && applicableAttributes.length > 0) return true;
+
+    // Find all attributes that the user should have, but the current set of permissions does not provide
+    const disallowedAttributes = attributes.filter((a) => !applicableAttributes.includes(a));
+    // Return whether the user is allowed to access all attributes
+    return disallowedAttributes.length === 0;
+}
+
+/**
+ * Get the relation of the current user to a certain user.
+ * @param userid The user that the current user needs relation to.
+ * @returns {string} - The relation, usually own if self, organ if part of organ, and all if there is no relation
+ */
+export function getRelation(userid: number): string {
+    const authStore = useAuthStore();
+
+    if (authStore.getUser?.id == userid) return 'own';
+
+    const roles = authStore.getOrgans?.map(r => r.id);
+    if (!roles) return 'all';
+    if (roles.includes(userid)) return 'organ';
+    return 'all'; // No relation means the all relation
+}
diff --git a/apps/dashboard/vite.config.ts b/apps/dashboard/vite.config.ts
index 097ae266..db948689 100644
--- a/apps/dashboard/vite.config.ts
+++ b/apps/dashboard/vite.config.ts
@@ -33,7 +33,7 @@ export default defineConfig(() => {
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api\/v1/, ''),
         },
-        'static': {
+        '/static': {
           target:  PROXY_URL + '/static',
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/static/, ''),
diff --git a/lib/common/src/stores/auth.store.ts b/lib/common/src/stores/auth.store.ts
index b79fcdc5..3e01db3c 100644
--- a/lib/common/src/stores/auth.store.ts
+++ b/lib/common/src/stores/auth.store.ts
@@ -36,6 +36,9 @@ export const useAuthStore = defineStore({
     },
     getUser(): UserResponse | null {
       return this.user;
+    },
+    getOrgans(): UserResponse[] | null {
+      return this.organs;
     }
   },
   actions: {

From fee9226a7e260627b0475dbc1eada45d19fcdac1 Mon Sep 17 00:00:00 2001
From: Ruben Lagerwerf <98549214+RubenLWF@users.noreply.github.com>
Date: Tue, 10 Dec 2024 12:03:56 -0800
Subject: [PATCH 14/16] feat(dashboard): Redirect to previous URL after login
 (#469)

---
 apps/dashboard/src/modules/auth/views/AuthLocalView.vue | 3 ++-
 apps/dashboard/src/modules/auth/views/AuthLoginView.vue | 3 ++-
 apps/dashboard/src/router/index.ts                      | 1 +
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/dashboard/src/modules/auth/views/AuthLocalView.vue b/apps/dashboard/src/modules/auth/views/AuthLocalView.vue
index 363c68bb..78fbdba9 100644
--- a/apps/dashboard/src/modules/auth/views/AuthLocalView.vue
+++ b/apps/dashboard/src/modules/auth/views/AuthLocalView.vue
@@ -140,7 +140,8 @@ const resetPassword = () => {
 };
 
 const toHomeView = () => {
-  router.push({ name: 'home' });
+  router.push(sessionStorage.getItem('fromPath') || { name: 'home' });
+  sessionStorage.removeItem('fromPath');
 };
 </script>
 
diff --git a/apps/dashboard/src/modules/auth/views/AuthLoginView.vue b/apps/dashboard/src/modules/auth/views/AuthLoginView.vue
index e78d85a6..9b7c5efa 100644
--- a/apps/dashboard/src/modules/auth/views/AuthLoginView.vue
+++ b/apps/dashboard/src/modules/auth/views/AuthLoginView.vue
@@ -51,7 +51,8 @@ onBeforeMount(() => {
     const token = route.query.token as string;
     authStore.gewisWebLogin(crypto.randomUUID(), token, apiService)
     .then(() => {
-      router.push('/');
+      router.push(sessionStorage.getItem('fromPath') || '/');
+      sessionStorage.removeItem('fromPath');
     })
     .catch(() => {
       router.replace({ path: "/error" });
diff --git a/apps/dashboard/src/router/index.ts b/apps/dashboard/src/router/index.ts
index 1440a347..dc85b331 100644
--- a/apps/dashboard/src/router/index.ts
+++ b/apps/dashboard/src/router/index.ts
@@ -82,6 +82,7 @@ router.beforeEach((to, from, next) => {
 
   if (to.meta?.requiresAuth && !isAuth) {
     // If the route requires authentication and the user is not authenticated, redirect to login
+    sessionStorage.setItem('fromPath', window.location.pathname);
     next({ name: 'login' });
   } else if (isAuth && hasTOSAccepted() == 'NOT_ACCEPTED' && to.name !== 'tos') {
     // If the user is authenticated but user hasn't accepted the TOS, always redirect to TOS

From df6792de77ee5d7402fb14d27917f5345a61ca21 Mon Sep 17 00:00:00 2001
From: Jobbiesaus <54932894+Jobbiesaus@users.noreply.github.com>
Date: Wed, 18 Dec 2024 19:10:13 +0100
Subject: [PATCH 15/16] Feature/create invoice overview (#465)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(dashboard): Created invoice account overview, including balance

Sorting could still be implemented

* feat(dashboard): Only show invoice accounts with negative balance (#462)

* feat(dashboard): Moved overview to invoices page and automatic invoices

Also we updated the number next to invoices to be the amount of open invoice accounts.

* feat(dashboard): Now also filter out inactive users from the overview

* feat(dashboard): Small fix of an error

* Auto stash before checking out "origin/develop"

* feat(dashboard): Remove unnecessary code

* feat(dashboard): Remove duplicate code

* feat(dashboard): Bugfix

* feat(dashboard): Final fix

* feat(dashboard): Real final fix

---------

Co-authored-by: Noël van de Vrie <46963141+noelvandevrie@users.noreply.github.com>
---
 apps/dashboard/src/components/FindUser.vue    |  56 +++-
 .../src/components/InputUserSpan.vue          |  16 +-
 apps/dashboard/src/components/TopNavbar.vue   |  11 +-
 .../src/locales/en/common/common.json         |   2 +
 .../src/locales/en/modules/financial.json     |   6 +
 .../src/locales/nl/common/common.json         |   4 +-
 .../src/locales/nl/modules/financial.json     |   6 +
 .../src/mixins/openInvoiceAccountsMixin.ts    |  42 +++
 .../invoice/create/InvoiceCreateUserCard.vue  |  29 ++-
 .../dashboard/src/modules/financial/routes.ts |   1 +
 .../views/invoice/InvoiceAccountOverview.vue  | 242 ++++++++++++++++++
 .../views/invoice/InvoiceOverview.vue         |   2 +
 apps/dashboard/src/services/ApiService.ts     |   3 +-
 lib/common/src/stores/user.store.ts           |  30 ++-
 14 files changed, 430 insertions(+), 20 deletions(-)
 create mode 100644 apps/dashboard/src/mixins/openInvoiceAccountsMixin.ts
 create mode 100644 apps/dashboard/src/modules/financial/views/invoice/InvoiceAccountOverview.vue

diff --git a/apps/dashboard/src/components/FindUser.vue b/apps/dashboard/src/components/FindUser.vue
index 982a503c..22d317eb 100644
--- a/apps/dashboard/src/components/FindUser.vue
+++ b/apps/dashboard/src/components/FindUser.vue
@@ -11,8 +11,10 @@
       class="w-full md:w-15rem"
       @filter="filterUsers"
   >
-  <template #option="slotProps">
-    {{ slotProps.option.fullName }} {{ slotProps.option.gewisId ? `(${slotProps.option.gewisId})` : '' }}
+  <template #option="slotProps" >
+    <span :class="{'text-gray-500': !isNegative(slotProps.option)}">
+      {{ slotProps.option.fullName }} {{ slotProps.option.gewisId ? `(${slotProps.option.gewisId})` : '' }}
+    </span>
   </template>
   </Dropdown>
 </template>
@@ -23,13 +25,18 @@ import type { Ref } from "vue";
 import apiService from "@/services/ApiService";
 import { debounce } from "lodash";
 import { type BaseUserResponse, GetAllUsersTypeEnum, type UserResponse } from "@sudosos/sudosos-client";
+import { useUserStore } from "@sudosos/sudosos-frontend-common";
 
-const emits = defineEmits(['update:value']);
+const emits = defineEmits(['update:user']);
 
 const props = defineProps({
-  value: {
+  user: {
     type: Object as PropType<UserResponse>,
   },
+  default: {
+    type: Object as PropType<BaseUserResponse>,
+    required: false,
+  },
   placeholder: {
     type: String,
     required: false,
@@ -44,20 +51,42 @@ const props = defineProps({
     type: Number,
     required: false,
     default: 10,
+  },
+  showPositive: {
+    type: Boolean,
+    required: false,
+    default: true
   }
 });
 
 const lastQuery = ref("");
-const selectedUser = ref(null);
+const selectedUser: Ref<BaseUserResponse | undefined> = ref(undefined);
+const userStore = useUserStore();
 
 const loading = ref(false);
 const users: Ref<(BaseUserResponse & { fullName: string })[]> = ref([]);
 
 const transformUsers = (userData: BaseUserResponse[]) => {
-  return userData.map((user: BaseUserResponse) => ({
+  const usersData: (BaseUserResponse & { fullName: string})[]
+      = userData.map((user) => ({
     ...user,
     fullName: `${user.firstName} ${user.lastName}`
   }));
+
+  usersData.sort((a, b) => {
+    const isANegative = isNegative(a);
+    const isBNegative = isNegative(b);
+
+    if (isANegative && !isBNegative) {
+      return -1;
+    }
+    if (!isANegative && isBNegative) {
+      return 1;
+    }
+    return a.fullName.localeCompare(b.fullName);
+  });
+
+  return usersData;
 };
 
 const debouncedSearch = debounce((e: any) => {
@@ -77,15 +106,26 @@ const filterUsers = (e: any) => {
   }
 };
 
+function isNegative(user: BaseUserResponse) {
+  return userStore.getBalanceById(user.id).amount.amount < 0;
+}
+
 onMounted(async () => {
   apiService.user.getAllUsers(props.take, 0, undefined, undefined, undefined, undefined, props.type).then((res) => {
-    users.value = transformUsers(res.data.records);
+    userStore.addUsers(res.data.records);
+    userStore.fetchUserBalances(res.data.records, apiService).then(() => {
+      users.value = transformUsers(res.data.records);
+    });
+    if (props.default) {
+      selectedUser.value = transformUsers([props.default])[0];
+    }
   });
 });
 
 watch(selectedUser, () => {
-  emits('update:value', selectedUser.value);
+  emits('update:user', selectedUser.value);
 });
+
 </script>
 
 <style scoped lang="scss">
diff --git a/apps/dashboard/src/components/InputUserSpan.vue b/apps/dashboard/src/components/InputUserSpan.vue
index 5f2d708f..19abbd48 100644
--- a/apps/dashboard/src/components/InputUserSpan.vue
+++ b/apps/dashboard/src/components/InputUserSpan.vue
@@ -4,9 +4,12 @@
      column ? 'flex-column gap-1' : 'flex-row align-items-center gap-3']">
       <span class="my-0">{{ label }}</span>
       <FindUser  :placeholder="placeholder"
-                 v-model="internalValue"
+                 v-model:user="internalValue"
                  :disabled="disabled"
-                 :type="type"/>
+                 :type="type"
+                 :showPositive="props.showPositive"
+                 :default="props.default"
+      />
     </span>
     <div class="flex justify-content-end">
       <ErrorSpan :error="errors"/>
@@ -27,6 +30,10 @@ const props = defineProps({
     type: String,
     required: true
   },
+  default: {
+    type: Object as PropType<BaseUserResponse>,
+    required: false,
+  },
   value: {
     type: Object as PropType<BaseUserResponse>,
   },
@@ -53,6 +60,11 @@ const props = defineProps({
     type: String as PropType<GetAllUsersTypeEnum>,
     required: false,
     default: undefined
+  },
+  showPositive: {
+    type: Boolean,
+    required: false,
+    default: true
   }
 });
 
diff --git a/apps/dashboard/src/components/TopNavbar.vue b/apps/dashboard/src/components/TopNavbar.vue
index 7117d836..3ea71a66 100644
--- a/apps/dashboard/src/components/TopNavbar.vue
+++ b/apps/dashboard/src/components/TopNavbar.vue
@@ -84,8 +84,9 @@ import { useI18n } from "vue-i18n";
 import { usePendingPayouts } from "@/mixins/pendingPayoutsMixin";
 import apiService from "@/services/ApiService";
 import { GetAllUsersTypeEnum } from "@sudosos/sudosos-client";
-import { isAllowed } from "@/utils/permissionUtils";
 
+import { useOpenInvoiceAccounts } from "@/mixins/openInvoiceAccountsMixin";
+import { isAllowed } from "@/utils/permissionUtils";
 const userStore = useUserStore();
 const authStore = useAuthStore();
 const router = useRouter();
@@ -101,7 +102,10 @@ const handleLogout = () => {
 };
 
 const { pendingPayouts } = usePendingPayouts();
-const getFinancialNotifications = () => isAllowed('update', ['all'], 'SellerPayout', ['any']) && pendingPayouts?.value;
+
+const { openInvoiceAccounts } = useOpenInvoiceAccounts();
+const getFinancialNotifications = () => isAllowed('update', ['all'], 'SellerPayout', ['any']) && pendingPayouts?.value + openInvoiceAccounts?.value;
+
 
 const organs: Ref<any[]> = ref([]);
 
@@ -184,7 +188,8 @@ const navItems = computed(() => [
       {
         label: t('common.navigation.invoices'),
         route: '/invoice',
-        visible: isAllowed('get', ['all'], 'Invoice', ['any']),
+        notifications: openInvoiceAccounts?.value,
+        visible: isAllowed('get', ['all'], 'Invoice', ['any'])
       },
       {
         label: t('common.navigation.fineOverview'),
diff --git a/apps/dashboard/src/locales/en/common/common.json b/apps/dashboard/src/locales/en/common/common.json
index a743419a..dea59249 100644
--- a/apps/dashboard/src/locales/en/common/common.json
+++ b/apps/dashboard/src/locales/en/common/common.json
@@ -144,6 +144,8 @@
             "productsContainers": "Products & containers",
             "pos": "Points of sale",
             "flaggedTransactions": "Flagged transactions",
+            "fineOverview": "Fine overview",
+            "invoiceAccounts": "Invoice Account Overview",
             "fines": "Fines"
         },
         "validation": {
diff --git a/apps/dashboard/src/locales/en/modules/financial.json b/apps/dashboard/src/locales/en/modules/financial.json
index 8ce6fc61..1df83234 100644
--- a/apps/dashboard/src/locales/en/modules/financial.json
+++ b/apps/dashboard/src/locales/en/modules/financial.json
@@ -47,6 +47,12 @@
           "balanceAfter": "Balance after invoice",
           "pos": "Points of sale included in the invoice:",
           "warning": "Make sure to check the invoice before creating it."
+        },
+        "account": {
+          "title": "Invoice Account Overview",
+          "header": "Invoice Account Overview",
+          "balance": "Balance",
+          "type": "INVOICE"
         }
       },
       "payout": {
diff --git a/apps/dashboard/src/locales/nl/common/common.json b/apps/dashboard/src/locales/nl/common/common.json
index 544c6fb9..d4985fe8 100644
--- a/apps/dashboard/src/locales/nl/common/common.json
+++ b/apps/dashboard/src/locales/nl/common/common.json
@@ -144,7 +144,9 @@
             "manageProducts": "Producten beheren",
             "posOverview": "POS overzicht",
             "flaggedTransactions": "Gemarkeerde transacties",
-            "fineOverview": "Boeteoverzicht"
+            "fineOverview": "Boeteoverzicht",
+            "invoiceAccounts": "Facturen Account Overzicht",
+            "fines" : "Boetes"
         },
         "validation": {
             "number": {
diff --git a/apps/dashboard/src/locales/nl/modules/financial.json b/apps/dashboard/src/locales/nl/modules/financial.json
index 2f686401..2a6b95d4 100644
--- a/apps/dashboard/src/locales/nl/modules/financial.json
+++ b/apps/dashboard/src/locales/nl/modules/financial.json
@@ -47,6 +47,12 @@
           "balanceAfter": "Saldo na factuur",
           "pos": "POS's die in de factuur zijn opgenomen:",
           "warning": "Controleer de factuur voordat je deze aanmaakt."
+        },
+        "account": {
+          "title": "Facturen Account Overzicht",
+          "header": "Facturen Account Overzicht",
+          "balance": "Saldo",
+          "type": "INVOICE"
         }
       },
       "payout": {
diff --git a/apps/dashboard/src/mixins/openInvoiceAccountsMixin.ts b/apps/dashboard/src/mixins/openInvoiceAccountsMixin.ts
new file mode 100644
index 00000000..10df49d2
--- /dev/null
+++ b/apps/dashboard/src/mixins/openInvoiceAccountsMixin.ts
@@ -0,0 +1,42 @@
+// src/mixins/pendingPayoutsMixin.ts
+import { computed, watch } from 'vue';
+import { useUserStore } from '@sudosos/sudosos-frontend-common';
+import { UserRole } from '@/utils/rbacUtils';
+import apiService from '@/services/ApiService';
+import type { BaseUserResponse } from "@sudosos/sudosos-client";
+
+
+
+export function useOpenInvoiceAccounts() {
+    const userStore = useUserStore();
+    const openInvoiceAccounts = computed(() => {
+            return Object.values(userStore.users).filter(isNotZeroAndInvoice).length;
+        }
+    );
+
+    function updateOpenInvoiceAccounts() {
+        if (userStore.current.rolesWithPermissions.findIndex(r => r.name == UserRole.BAC_PM) != -1) {
+            const userStore = useUserStore();
+            userStore.fetchInvoiceAccountsWithBalance(apiService);
+        }
+    }
+
+    function isNotZeroAndInvoice(user: BaseUserResponse) {
+        if(userStore.getBalanceById(user.id) !== undefined) {
+            return userStore.getBalanceById(user.id).amount.amount != 0 &&
+                userStore.getUserById(user.id).type == "INVOICE" &&
+                userStore.getUserById(user.id).active == true;
+        }
+        else{
+            return false;
+        }
+
+    }
+
+    watch(() => userStore.current.rolesWithPermissions, () => {
+        updateOpenInvoiceAccounts();
+    });
+
+    updateOpenInvoiceAccounts();
+    return { openInvoiceAccounts };
+}
diff --git a/apps/dashboard/src/modules/financial/components/invoice/create/InvoiceCreateUserCard.vue b/apps/dashboard/src/modules/financial/components/invoice/create/InvoiceCreateUserCard.vue
index a8834634..f830d003 100644
--- a/apps/dashboard/src/modules/financial/components/invoice/create/InvoiceCreateUserCard.vue
+++ b/apps/dashboard/src/modules/financial/components/invoice/create/InvoiceCreateUserCard.vue
@@ -6,6 +6,8 @@
                    @update:value="updateUser($event)"
                    v-model:value="selectedUser"
                    class="mb-3"
+                   :showPositive="false"
+                   :default="queryUser"
     />
 
     <div class="flex flex-row justify-content-between">
@@ -33,21 +35,24 @@
  * Component used to select the invoiced user and display the balance before and after the invoice.
  */
 
-import {computed, type PropType, type Ref, ref, watch} from "vue";
+import { computed, onMounted, type PropType, type Ref, ref, watch } from "vue";
 import { type Form, getProperty } from "@/utils/formUtils";
 import * as yup from "yup";
 import { createInvoiceObject } from "@/utils/validation-schema";
 import CardComponent from "@/components/CardComponent.vue";
 import {
+  type BaseUserResponse,
   type DineroObjectResponse,
-  type InvoiceUserResponse,
   GetAllUsersTypeEnum,
-  type UserResponse, type BaseUserResponse
+  type InvoiceUserResponse,
+  type UserResponse
 } from "@sudosos/sudosos-client";
 import InputUserSpan from "@/components/InputUserSpan.vue";
 import { useI18n } from "vue-i18n";
 import { formatPrice } from "@/utils/formatterUtils";
 import apiService from "@/services/ApiService";
+import { useRoute } from "vue-router";
+import { useUserStore } from "@sudosos/sudosos-frontend-common";
 
 const { t } = useI18n();
 
@@ -59,6 +64,8 @@ const props = defineProps({
 });
 
 const selectedUser = ref<BaseUserResponse | undefined>(undefined);
+const route = useRoute();
+const userStore = useUserStore();
 
 const transactionTotal = computed(() => {
   const total = getProperty(props.form, "transactionTotal");
@@ -137,6 +144,22 @@ const updateDefaultUser = (forId: number) => {
     props.form.context.setFieldValue('country', user.country);
   });
 };
+
+const queryUser: Ref<BaseUserResponse | undefined> = ref(undefined);
+
+onMounted(() => {
+  console.error(route.query.userId);
+  if (route.query.userId){
+    const userId = route.query.userId as unknown as number;
+    props.form.context.setFieldValue("forId", userId);
+
+    const user = userStore.getUserById(userId);
+    queryUser.value = user;
+
+    updateUserBalance();
+    updateDefaultUser(userId);
+  }
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/apps/dashboard/src/modules/financial/routes.ts b/apps/dashboard/src/modules/financial/routes.ts
index 8c364391..33a27e03 100644
--- a/apps/dashboard/src/modules/financial/routes.ts
+++ b/apps/dashboard/src/modules/financial/routes.ts
@@ -6,6 +6,7 @@ import InvoiceOverview from "@/modules/financial/views/invoice/InvoiceOverview.v
 import InvoiceInfoView from "@/modules/financial/views/invoice/InvoiceInfoView.vue";
 import { isAllowed } from "@/utils/permissionUtils";
 import InvoiceCreateView from "@/modules/financial/views/invoice/InvoiceCreateView.vue";
+import InvoiceAccountOverview from "@/modules/financial/views/invoice/InvoiceAccountOverview.vue";
 
 export function financialRoutes(): RouteRecordRaw[] {
   return [
diff --git a/apps/dashboard/src/modules/financial/views/invoice/InvoiceAccountOverview.vue b/apps/dashboard/src/modules/financial/views/invoice/InvoiceAccountOverview.vue
new file mode 100644
index 00000000..13bd7f40
--- /dev/null
+++ b/apps/dashboard/src/modules/financial/views/invoice/InvoiceAccountOverview.vue
@@ -0,0 +1,242 @@
+<template>
+  <div class="full-width my-4">
+    <CardComponent :header="t('modules.financial.invoice.account.header')" class="full-width">
+      <DataTable
+          v-model:filters="filters"
+          :value="sortedUsers.length > 0 ? sortedUsers : allUsersFullData"
+          paginator
+          :rows="10"
+          :rowsPerPageOptions="[5, 10, 25, 50, 100]"
+          filterDisplay="menu"
+          :globalFilterFields="['type', 'firstName', 'lastName', 'fullName']"
+          lazy
+          :totalRecords="searchQuery.split(' ').length > 1 ? sortedUsers.length : totalRecords"
+          :loading="isLoading"
+          @page="onPage($event)"
+          @sort="onSort"
+          @filter="onFilter"
+      >
+        <template #header>
+          <div class="flex flex-row align-items-center justify-content-between">
+            <IconField iconPosition="left">
+              <InputIcon class="pi pi-search"> </InputIcon>
+              <InputText v-model="searchQuery" :placeholder="t('common.search')" />
+            </IconField>
+            <Button :label="t('common.create')" icon="pi pi-plus" @click="showDialog = true" />
+          </div>
+        </template>
+        <Column field="firstName" :header="t('common.firstName')">
+          <template #body v-if="isLoading">
+            <Skeleton class="w-8 my-1 h-1rem surface-300"/>
+          </template>
+        </Column>
+        <Column field="lastName" :header="t('common.lastName')">
+          <template #body v-if="isLoading">
+            <Skeleton class="w-8 my-1 h-1rem surface-300"/>
+          </template>
+        </Column>
+        <Column field="balance" :showFilterMatchModes="false">
+          <template #header>
+            <div class="flex flex-row gap-2 align-items-center">
+              {{ t('modules.financial.invoice.account.balance') }}
+            </div>
+          </template>
+          <template #body v-if="isLoading">
+            <Skeleton class="w-3 my-1 h-1rem surface-300"/>
+          </template>
+
+        </Column>
+        <Column
+            headerStyle="width: 3rem; text-align: center"
+            bodyStyle="text-align: center; overflow: visible"
+        >
+          <template #body v-if="isLoading">
+            <Skeleton class="w-4 my-1 h-1rem surface-300"/>
+          </template>
+          <template #body="slotProps" v-else>
+            <Button
+                @click="handleInfoPush(slotProps.data.id)"
+                type="button"
+                icon="pi pi-info-circle"
+                class="p-button-rounded p-button-text p-button-plain"
+            />
+          </template>
+
+        </Column>
+        <Column
+            headerStyle="width: 3rem; text-align: center"
+            bodyStyle="text-align: center; overflow: visible"
+        >
+          <template #body v-if="isLoading">
+            <Skeleton class="w-4 my-1 h-1rem surface-300"/>
+          </template>
+          <template #body="slotProps" v-else>
+            <Button icon="pi pi-file-edit"
+                    @click="handleInvoicePush(slotProps.data.id)"
+                    class="p-button-rounded p-button-text p-button-plain"
+                    type="button"
+            />
+          </template>
+
+        </Column>
+      </DataTable>
+    </CardComponent>
+    <FormDialog :header="t('modules.admin.forms.user.header')" v-model:modelValue="showDialog"
+                :form="form"  :is-editable="false">
+      <template #form="slotProps">
+        <UserCreateForm
+            :form="slotProps.form"
+            v-model:isVisible="showDialog"
+            :edit="true"
+            @submit:success="showDialog = false"
+        />
+      </template>
+    </FormDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, type Ref, watch } from "vue";
+import apiService, { DEFAULT_PAGINATION_MAX } from '@/services/ApiService';
+import type { BaseUserResponse, GewisUserResponse, UserResponse } from "@sudosos/sudosos-client";
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import { FilterMatchMode } from 'primevue/api';
+import InputText from 'primevue/inputtext';
+import { createUserSchema } from "@/utils/validation-schema";
+import Fuse from 'fuse.js';
+import CardComponent from '@/components/CardComponent.vue';
+import Skeleton from "primevue/skeleton";
+import IconField from "primevue/iconfield";
+import InputIcon from "primevue/inputicon";
+import { useI18n } from "vue-i18n";
+import FormDialog from "@/components/FormDialog.vue";
+import UserCreateForm from "@/modules/admin/components/users/forms/UserCreateForm.vue";
+import { schemaToForm } from "@/utils/formUtils";
+import { useUserStore } from "@sudosos/sudosos-frontend-common";
+import router from "@/router";
+import { formatPrice } from "@/utils/formatterUtils";
+
+
+const { t } = useI18n();
+const userStore = useUserStore();
+
+const searchQuery: Ref<string> = ref('');
+
+const showDialog: Ref<boolean> = ref(false);
+const form = schemaToForm(createUserSchema);
+
+
+const filters = ref({
+  global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+  type: { value: null, matchMode: FilterMatchMode.EQUALS },
+});
+
+const isActiveFilter: Ref<boolean> = ref(true);
+const ofAgeFilter: Ref<boolean> = ref(true);
+const isLoading = ref(true);
+const totalRecords = ref(0);
+const allUsers: Ref<GewisUserResponse[]> = ref(new Array(10));
+const allUsersFullData: Ref<GewisUserResponse[]> = computed(() => {
+  const userData : GewisUserResponse[] =  allUsers.value.map((user) => {
+    return {
+      ...user,
+      fullName: `${user.firstName} ${user.lastName}`,
+      balance: formatPrice(userStore.getBalanceById(user.id).amount),
+    };
+  });
+  return userData.filter(isNotZero);
+});
+
+onMounted(() => {
+  isLoading.value = true;
+  delayedAPICall(0);
+  isLoading.value = false;
+});
+
+function debounce(func: (skip: number) => Promise<void>, delay: number): (skip: number) => Promise<void> {
+  let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+  return async function(...args: [number]) {
+    if (debounceTimer !== null) {
+      clearTimeout(debounceTimer);
+    }
+    debounceTimer = setTimeout(() => {
+      func(...args);
+    }, delay);
+  };
+}
+
+const apiCall: (skip: number) => Promise<void> = async (skip: number) => {
+  await apiService.user
+      .getAllUsers(
+          DEFAULT_PAGINATION_MAX,
+          skip,
+          searchQuery.value.split(' ')[0] || '',
+          isActiveFilter.value ? isActiveFilter.value : undefined,
+          ofAgeFilter.value,
+          undefined,
+          "INVOICE" || undefined
+      )
+      .then((response) => {
+        totalRecords.value = response.data._pagination.count || 0;
+        allUsers.value = response.data.records;
+        userStore.addUsers(allUsers.value);
+        userStore.fetchUserBalances(allUsers.value, apiService);
+      });
+};
+
+const delayedAPICall = debounce(apiCall, 250);
+
+const onPage = (event: any) => {
+  delayedAPICall(event.originalEvent.first);
+};
+// TODO: Fix sorting
+// See: https://github.com/GEWIS/sudosos-frontend-vue3/issues/19
+
+const onSort = () => {
+  delayedAPICall(0);
+};
+const onFilter = () => {
+  delayedAPICall(0);
+};
+
+watch(filters.value.global, () => {
+  delayedAPICall(0);
+});
+
+watch(searchQuery, () => {
+  delayedAPICall(0);
+});
+
+const sortedUsers = computed(() => {
+  const fuzzed: UserResponse[] = new Fuse(allUsersFullData.value, {
+    keys: ['fullName'],
+    isCaseSensitive: false,
+    shouldSort: true,
+    threshold: 0.2
+  })
+      .search(searchQuery.value || '')
+      .map((r) => r.item);
+  return fuzzed;
+});
+
+async function handleInfoPush(userId: number) {
+  const clickedUser: UserResponse | undefined = allUsers.value.find(
+      (record) => record.id == userId
+  );
+  if (clickedUser) userStore.addUser(clickedUser);
+  let route = router.resolve({ name: 'user', params: { userId } });
+  window.open(route.href, '_blank');
+}
+
+function handleInvoicePush(userId : number) {
+  router.push({ name: 'invoiceCreate', query: { userId: userId } });
+}
+
+function isNotZero(user: BaseUserResponse) {
+  return userStore.getBalanceById(user.id).amount.amount != 0;
+}
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/apps/dashboard/src/modules/financial/views/invoice/InvoiceOverview.vue b/apps/dashboard/src/modules/financial/views/invoice/InvoiceOverview.vue
index 951dfeba..25d3488a 100644
--- a/apps/dashboard/src/modules/financial/views/invoice/InvoiceOverview.vue
+++ b/apps/dashboard/src/modules/financial/views/invoice/InvoiceOverview.vue
@@ -2,6 +2,7 @@
   <div class="page-container flex flex-column">
     <div class="page-title">{{ t('modules.financial.invoice.title') }}</div>
       <div class="content-wrapper flex flex-column">
+        <InvoiceAccountOverview />
         <div class="flex flex-row justify-content-end w-full -mb-5">
           <Button
               type="button"
@@ -29,6 +30,7 @@ import { InvoiceStatusResponseStateEnum } from "@sudosos/sudosos-client/src/api"
 import { useI18n } from "vue-i18n";
 import Button from "primevue/button";
 import router from "@/router";
+import InvoiceAccountOverview from "@/modules/financial/views/invoice/InvoiceAccountOverview.vue";
 
 const { t } = useI18n();
 
diff --git a/apps/dashboard/src/services/ApiService.ts b/apps/dashboard/src/services/ApiService.ts
index d057466f..0754d4f7 100644
--- a/apps/dashboard/src/services/ApiService.ts
+++ b/apps/dashboard/src/services/ApiService.ts
@@ -2,4 +2,5 @@ import { ApiService } from "@sudosos/sudosos-frontend-common";
 const apiService = new ApiService(window.location.origin + "/api/v1");
 export default apiService;
 
-export const DEFAULT_PAGINATION_MAX = 500;
\ No newline at end of file
+export const DEFAULT_PAGINATION_MAX = 500;
+
diff --git a/lib/common/src/stores/user.store.ts b/lib/common/src/stores/user.store.ts
index f2db0cd9..d34c0b3c 100644
--- a/lib/common/src/stores/user.store.ts
+++ b/lib/common/src/stores/user.store.ts
@@ -1,9 +1,9 @@
 import { createPinia, defineStore } from 'pinia';
 import {
   BalanceResponse, PaginatedBaseTransactionResponse, PaginatedFinancialMutationResponse,
-  UserResponse, RoleWithPermissionsResponse, GewisUserResponse, DineroObjectRequest
+  UserResponse, RoleWithPermissionsResponse, GewisUserResponse, DineroObjectRequest, BaseUserResponse
 } from "@sudosos/sudosos-client";
-import { ApiService } from "../services/ApiService";
+import  { ApiService } from "../services/ApiService";
 import { fetchAllPages } from "../helpers/PaginationHelper";
 
 createPinia();
@@ -87,9 +87,30 @@ export const useUserStore = defineStore('user', {
               return this.organs;
             });
     },
+    async fetchInvoiceAccountsWithBalance(service: ApiService){
+          await fetchAllPages<UserResponse>((take, skip) =>
+              service.user.getAllUsers(
+              take,
+              skip,
+              undefined,
+              true,
+              true,
+              undefined,
+              "INVOICE"
+          )
+      ).then((users) => {
+            this.addUsers(users);
+            this.fetchUserBalances(users, service);
+          });
+    },
     async fetchCurrentUserBalance(id: number, service: ApiService) {
       this.current.balance = (await service.balance.getBalanceId(id)).data;
     },
+    async fetchUserBalances(users: UserResponse[], service: ApiService) {
+      for (const user of users) {
+        await this.fetchUserBalance(user.id, service);
+      }
+    },
     async fetchUserBalance(id: number, service: ApiService) {
       this.balances[id] = (await service.balance.getBalanceId(id)).data;
     },
@@ -142,6 +163,11 @@ export const useUserStore = defineStore('user', {
     addUser(user: UserResponse) {
       this.users[user.id] = user;
     },
+    addUsers(users: UserResponse[]) {
+      for (const user of users) {
+        this.addUser(user);
+      }
+    },
     clearCurrent() {
       this.current.balance = null;
       this.current.user = null;

From dfb3b6356f241b0d1f5fe65028e638d88cf74449 Mon Sep 17 00:00:00 2001
From: Victor Klomp <victor.klomp@gmail.com>
Date: Wed, 18 Dec 2024 19:13:46 +0100
Subject: [PATCH 16/16] feat: Wrapped (#470)

* feat: SudoSOS wrapped

* chore: i18n
---
 .../src/locales/en/common/common.json         |  13 +-
 .../src/locales/nl/common/common.json         |  14 +-
 apps/dashboard/src/router/index.ts            |   6 +
 apps/dashboard/src/views/WrappedView.vue      | 122 ++++++++++++++++++
 4 files changed, 153 insertions(+), 2 deletions(-)
 create mode 100644 apps/dashboard/src/views/WrappedView.vue

diff --git a/apps/dashboard/src/locales/en/common/common.json b/apps/dashboard/src/locales/en/common/common.json
index dea59249..4632bc8d 100644
--- a/apps/dashboard/src/locales/en/common/common.json
+++ b/apps/dashboard/src/locales/en/common/common.json
@@ -169,7 +169,18 @@
         "apiError": "Error",
         "errorMessage": "Something is going wrong, please open an issue on {link} describing the issue.",
         "permissionMessages": {
-            "transactions": "You are not allowed to view these transactions."
+          "transactions": "You are not allowed to view these transactions."
+        },
+        "wrapped": {
+            "lastYear": "In the last year:",
+            "total": "You spent in total:",
+            "totalBorrel": "You spent in total at borrels:",
+            "depth": "But more in depth",
+            "totalAlc": "On alcohol (incl. 0.0) you spent:",
+            "totalSoda": "On soda you spent:",
+            "totalSnacks": "On snacks you spent:",
+            "fav": "Lastly your favourites were:",
+            "christmas": "Merry christmas and a happy new year from the ABC!"
         }
     }
 }
diff --git a/apps/dashboard/src/locales/nl/common/common.json b/apps/dashboard/src/locales/nl/common/common.json
index d4985fe8..2e2071fa 100644
--- a/apps/dashboard/src/locales/nl/common/common.json
+++ b/apps/dashboard/src/locales/nl/common/common.json
@@ -169,7 +169,19 @@
         "apiError": "Fout",
         "errorMessage": "Er is iets misgegaan, open een issue op {link} en beschrijf het probleem.",
         "permissionMessages": {
-            "transactions": "Je mag deze transacties niet bekijken."
+          "transactions": "Je mag deze transacties niet bekijken."
+        },
+        "wrapped": {
+            "lastYear": "In het afgelopen jaar:",
+            "total": "Heb je in total uitgegeven:",
+            "totalBorrel": "In totaal bij borrel heb je uitgegeven:",
+            "depth": "Verder uitgesplitst",
+            "totalAlc": "Aan alcohol (incl. 0.0) heb je uitgegeven:",
+            "totalSoda": "Aan fris heb je uitgegeven:",
+            "totalSnacks": "Aan snacks heb je uitgegeven:",
+            "fav": "Je absolute favorieten waren:",
+            "christmas": "Fijne kerst en een gelukkig nieuw jaar van de ABC!"
         }
+
     }
 }
diff --git a/apps/dashboard/src/router/index.ts b/apps/dashboard/src/router/index.ts
index dc85b331..79bb51a5 100644
--- a/apps/dashboard/src/router/index.ts
+++ b/apps/dashboard/src/router/index.ts
@@ -11,6 +11,7 @@ import { sellerRoutes } from "@/modules/seller/routes";
 import { userRoutes } from "@/modules/user/routes";
 import MaintenanceView from '@/views/MaintenanceView.vue';
 import { useSettingsStore } from '@/stores/settings.store';
+import WrappedView from "@/views/WrappedView.vue";
 
 declare module 'vue-router' {
   interface RouteMeta {
@@ -49,6 +50,11 @@ const router = createRouter({
           component: ErrorView,
           name: 'error',
         },
+        {
+          path: 'wrapped',
+          component: WrappedView,
+          name: 'wrapped',
+        },
       ]
     },
     {
diff --git a/apps/dashboard/src/views/WrappedView.vue b/apps/dashboard/src/views/WrappedView.vue
new file mode 100644
index 00000000..06cb558a
--- /dev/null
+++ b/apps/dashboard/src/views/WrappedView.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="flex align-content-center flex-column">
+    <div class="py-4 text-center font-bold text-xl">
+      {{ t("common.wrapped.lastYear") }}</div>
+    <div class="text-center">{{ t("common.wrapped.total") }}</div>
+    <div class="text-center text-3xl">
+      <div>{{ formatPrice(total!) }}</div>
+    </div>
+
+    <div class="text-center">{{ t("common.wrapped.totalBorrel") }}</div>
+    <div class="text-center text-3xl">
+      <div>{{ formatPrice(totalBorrels!) }}</div>
+    </div>
+    <div class="py-4 text-center font-bold text-xl">
+      {{ t("common.wrapped.depth") }}
+    </div>
+    <div class="text-center">{{ t("common.wrapped.totalAlc") }}</div>
+    <div class="text-center text-3xl">
+      <div>{{ formatPrice(totalAlc!) }}</div>
+    </div>
+
+    <div class="text-center">{{ t("common.wrapped.totalSoda") }}</div>
+    <div class="text-center text-3xl">
+      <div>{{ formatPrice(totalSoda!) }}</div>
+    </div>
+
+    <div class="text-center">{{ t("common.wrapped.totalSnacks") }}</div>
+    <div class="text-center text-3xl">
+      <div>{{ formatPrice(totalSnacks!) }}</div>
+    </div>
+
+    <div class="py-4 text-center font-bold text-xl">
+      {{ t("common.wrapped.fav") }}
+    </div>
+
+    <div class="align-items-center flex-column flex">
+      <div v-for="p in topProducts" :key="p.product.id" class="w-7">
+          {{ p.count + "x" }} {{ p.product.name + " - " }} {{ formatPrice(p.totalInclVat) }}
+      </div>
+    </div>
+
+    <div class="py-4 text-center font-bold text-xl">
+      {{ t("common.wrapped.christmas") }}
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import { computed, onBeforeMount, ref } from "vue";
+import apiService from "@/services/ApiService";
+import { useAuthStore } from "@sudosos/sudosos-frontend-common";
+import type { ReportResponse } from "@sudosos/sudosos-client";
+import { formatPrice } from "@/utils/formatterUtils";
+import Dinero from "dinero.js";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
+const report = ref<ReportResponse>();
+
+const total = computed(() => {
+  return report.value?.totalInclVat || { amount: 0, currency: 'EUR', precision: 2 };
+});
+
+const totalBorrels = computed(() => {
+  if (report.value == undefined) {
+    return { amount: 0, currency: 'EUR', precision: 2 };
+  }
+
+  // Remove bac verkoop
+  return Dinero(report.value.totalInclVat as Dinero.Options)
+      .subtract(Dinero(report.value.data.pos!.find(p => p.pos.id == 1)!.totalInclVat as Dinero.Options)).toObject();
+});
+
+
+const totalAlc = computed(() => {
+  if (report.value == undefined) {
+    return { amount: 0, currency: 'EUR', precision: 2 };
+  }
+
+  return report.value.data.categories!.find(p => p.category.id == 1)!.totalInclVat;
+});
+
+const totalSoda = computed(() => {
+  if (report.value == undefined) {
+    return { amount: 0, currency: 'EUR', precision: 2 };
+  }
+
+  return report.value.data.categories!.find(p => p.category.id == 2)!.totalInclVat;
+});
+
+const totalSnacks = computed(() => {
+  if (report.value == undefined) {
+    return { amount: 0, currency: 'EUR', precision: 2 };
+  }
+
+  return report.value.data.categories!.find(p => p.category.id == 3)!.totalInclVat;
+});
+
+const topProducts = computed(() => {
+  if (report.value == undefined) {
+    return [];
+  }
+
+  return report.value.data.products!.sort((a, b) => b.count - a.count).slice(0, 10);
+});
+
+onBeforeMount(async () => {
+  let authStore = useAuthStore();
+
+  report.value = (await apiService.user
+      .getUsersPurchasesReport(authStore.getUser!.id, "2024-01-01", "2024-12-31")).data;
+
+});
+
+</script>
+
+<style>
+
+</style>
\ No newline at end of file