GEWIS · JustSamuel · Nov 2, 2024 · Oct 14, 2024 · Oct 14, 2024 · Oct 18, 2024
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -0,0 +1,12 @@
+version: 2
+updates:
+  - package-ecosystem: "npm" # Specify npm as the package manager
+    directories:
+      - "apps/point-of-sale"
+      - "apps/dashboard"
+      - "lib/common"
+    schedule:
+      interval: "weekly" # Set the update schedule to weekly
+    ignore:
+      - dependency-name: "*"
+        update-types: ["version-update:semver-major"] # Ignore major updates
diff --git a/README.md b/README.md
@@ -67,4 +67,12 @@ You can quickly start development directly in your browser by using [Codespaces]
 - You can access the dashboard and point of sale at `localhost:5173` and `localhost:5174` respectively.
 
 ### Proxying requests to different backends
-In the respective `.env` files, you can change which backend the frontend uses in development by changing the `VITE_DEV_API_BASE`. By default, this is set to the test backend (`https://sudosos.test.gewis.nl/api/v1`), but you can also change it to `https://sudosos.gewis.nl/api/v1` for the production backend. Or you can change it to `http://localhost:3000` if you are running the backend locally.   
+In the respective `.env` files, you can change which backend the frontend uses in development by changing the `VITE_DEV_API_BASE`. By default, this is set to the test backend (`https://sudosos.test.gewis.nl/api/v1`), but you can also change it to `https://sudosos.gewis.nl/api/v1` for the production backend. Or you can change it to `http://localhost:3000` if you are running the backend locally.   
+
+## Contributors
+
+This project exists thanks to all the people who contribute code.
+
+[//]: # (TODO create a CONTRIBUTING.md)
+[//]: # (If you'd like to help, see [our guide to contributing code]&#40;CONTRIBUTING.md&#41;.)
+<a href="https://github.com/GEWIS/sudosos-frontend/graphs/contributors"><img src="https://contributors.aika.dev/GEWIS/sudosos-frontend/contributors.svg?max=44" alt="Code contributors" /></a>
diff --git a/apps/dashboard/index.html b/apps/dashboard/index.html
@@ -12,6 +12,11 @@
     <meta name="theme-color" content="#ffffff">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SudoSOS</title>
+    <!-- For OpenGraph -->
+    <meta property="og:title" content="SudoSOS Dashboard">
+    <meta property="og:description" content="The bar system for study association GEWIS">
+    <meta property="og:image" content="/bier_margin_red.png">
+
   </head>
   <body>
     <div id="app"></div>

diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
@@ -15,50 +15,14 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@stripe/stripe-js": "^4.4.0",
-    "@sudosos/sudosos-client": "github:GEWIS/sudosos-client#cfcc3dad2494d8eb1911002fe0526c1e2e29cd25",
+    "@stripe/stripe-js": "^4.8.0",
     "@sudosos/sudosos-frontend-common": "workspace:^",
-    "@types/dinero.js": "^1.9.4",
-    "@vee-validate/rules": "^4.12.8",
-    "@vee-validate/yup": "^4.11.1",
-    "dinero.js": "^1.9.1",
-    "fuse.js": "^7.0.0",
-    "jwt-decode": "^4.0.0",
-    "marked": "^11.1.1",
-    "pinia": "^2.1.3",
-    "primeflex": "^3.3.1",
-    "primeicons": "^6.0.1",
-    "primevue": "^3.49.0",
-    "sass": "^1.63.6",
-    "uuid": "^9.0.0",
-    "vee-validate": "^4.11.1",
-    "vue": "^3.3.4",
-    "vue-i18n": "^9.2.2",
-    "vue-router": "^4.2.2",
+    "@vee-validate/rules": "^4.14.1",
+    "@vee-validate/yup": "^4.14.1",
+    "marked": "^11.2.0",
+    "vee-validate": "^4.14.1",
+    "vue-i18n": "^9.14.1",
     "vue3-pdf-app": "^1.0.3",
-    "yup": "^1.2.0"
-  },
-  "devDependencies": {
-    "@intlify/eslint-plugin-vue-i18n": "^2.0.0",
-    "@rushstack/eslint-patch": "^1.2.0",
-    "@tsconfig/node18": "^18.2.2",
-    "@types/lodash": "^4.14.198",
-    "@types/node": "^18.19.4",
-    "@types/uuid": "^9.0.2",
-    "@vitejs/plugin-vue": "^5.0.2",
-    "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/tsconfig": "^0.5.1",
-    "axios": "^1.6.8",
-    "eslint": "^8.50.0",
-    "eslint-plugin-github-commit-hash": "^1.0.3",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-vue": "^9.11.0",
-    "lodash": "^4.17.21",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^3.1.1",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.12",
-    "vue-tsc": "^2.0.29"
+    "yup": "^1.4.0"
   }
 }
diff --git a/apps/dashboard/public/bier_margin_red.png b/apps/dashboard/public/bier_margin_red.png
diff --git a/apps/dashboard/src/assets/img/bier_grayscale.png b/apps/dashboard/src/assets/img/bier_grayscale.png
diff --git a/apps/dashboard/src/locales/en/common/common.json b/apps/dashboard/src/locales/en/common/common.json
@@ -106,6 +106,9 @@
                     "verify": "Verification Failed",
                     "details": "Payout amount does not match the amount of purchases. {amount} vs. {totalInclVat}",
                     "unable": "Unable to verify the payout."
+                },
+                "topUp": {
+                    "unable": "Unable to complete the top-up. Please try again later."
                 }
             }
         },

diff --git a/apps/dashboard/src/locales/en/modules/admin.json b/apps/dashboard/src/locales/en/modules/admin.json
@@ -16,9 +16,13 @@
           "header": "Balance",
           "waiveFines": "Waive fines",
           "allIsFines": "All of which is a fine",
+          "waiveAllFines": "Waive all fines",
           "someIsFines": "Of which {fine} is fines",
+          "someIsFinesDetailed": "Current fine is {fine} of which {waived} is waived.",
           "waiveFinesConfirmation": "Are you sure you want to waive the fines? This cannot be undone.",
-          "waiveFinesConfirmationTitle": "Waive fines"
+          "waiveFinesConfirmationTitle": "Waive fines",
+          "waiveFineTooMuch": "You cannot waive more than the fine of the user.",
+          "waiveExplanation": "There can only be one waive per fine group, adding a fine when there is already one, will replace the existing waive."
         }
       },
       "banners": {

diff --git a/apps/dashboard/src/locales/en/modules/auth.json b/apps/dashboard/src/locales/en/modules/auth.json
@@ -23,6 +23,10 @@
         "agreeData": "I agree with extensive data processing for my account (optional).",
         "agreeToS": "I agree with the Terms of Service",
         "description": "Before you can use SudoSOS, you need to accept the Terms of Service. Please read the contents of the terms of service below."
+      },
+      "maintenance": {
+        "maintenance": "SudoSOS is under maintenance.",
+        "tryAgain": "Please try again later..."
       }
     }
   }

diff --git a/apps/dashboard/src/locales/nl/common/common.json b/apps/dashboard/src/locales/nl/common/common.json
@@ -106,6 +106,9 @@
                     "verify": "Verificatie mislukt",
                     "details": "Uitbetaling heeft een ongeldige bedrag. {amount} vs. {totalInclVat}",
                     "unable": "Kan de uitbetaling niet verifiëren."
+                },
+                "topUp": {
+                    "unable": "Het is niet gelukt om op te waarderen. Probeer het later opnieuw."
                 }
             }
         },

diff --git a/apps/dashboard/src/locales/nl/modules/admin.json b/apps/dashboard/src/locales/nl/modules/admin.json
@@ -16,9 +16,13 @@
           "header": "Saldo",
           "waiveFines": "Boetes kwijtschelden",
           "allIsFines": "Alles hiervan is een boete",
+          "waiveAllFines": "Scheld alle boetes kwijt",
           "someIsFines": "Waarvan {fine} boetes zijn",
+          "someIsFinesDetailed": "Huidige boete is {fine} waarvan {waived} kwijt gescholden ",
           "waiveFinesConfirmation": "Weet je zeker dat je de boetes wilt kwijtschelden? Dit kan niet ongedaan worden gemaakt.",
-          "waiveFinesConfirmationTitle": "Boetes kwijtschelden"
+          "waiveFinesConfirmationTitle": "Boetes kwijtschelden",
+          "waiveFineTooMuch": "Je kan niet meer kwijt schelden dan de huidige boete.",
+          "waiveExplanation": "Je kan slechts 1 keer boetes kwijt schelden per boete groep, als je opnieuw kwijt scheld dan vervang je de huidige kwijtschelding."
         }
       },
       "banners": {

diff --git a/apps/dashboard/src/locales/nl/modules/auth.json b/apps/dashboard/src/locales/nl/modules/auth.json
@@ -23,6 +23,10 @@
         "agreeData": "Ik ga akkoord met uitgebreide gegevensverwerking voor mijn account (optioneel).",
         "agreeToS": "Ik ga akkoord met de Gebruiksvoorwaarden",
         "description": "Voordat je SudoSOS kunt gebruiken, moet je de Gebruiksvoorwaarden accepteren. Lees de inhoud van de voorwaarden hieronder."
+      },
+      "maintenance": {
+        "maintenance": "SudoSOS is in onderhoud.",
+        "tryAgain": "Probeer het later opnieuw..."
       }
     }
   }

diff --git a/apps/dashboard/src/main.ts b/apps/dashboard/src/main.ts
@@ -43,6 +43,8 @@ import i18n from './utils/i18nUtils';
 import ConfirmDialog from "primevue/confirmdialog";
 import ConfirmationService from 'primevue/confirmationservice';
 import InputSwitch from "primevue/inputswitch";
+import Divider from "primevue/divider";
+import beforeLoad from '@/utils/beforeLoadUtil';
 
 const app = createApp(App);
 
@@ -60,12 +62,13 @@ app.component('Button', Button);
 app.component('InputText', InputText);
 app.component('InputSwitch', InputSwitch);
 app.component('Menubar', Menubar);
-app.component('Message', Message)
+app.component('Message', Message);
 app.component('Panel', Panel);
 app.component('DataTable', DataTable);
 app.component('DataView', DataView);
 app.component('InputNumber', InputNumber);
 app.component('Dialog', Dialog);
+app.component('Divider', Divider);
 app.component('Dropdown', Dropdown);
 app.component('Checkbox', Checkbox);
 app.component('TabView', TabView);
@@ -84,11 +87,6 @@ app.component('Steps', Steps);
 app.component('Calendar', Calendar);
 app.component('ConfirmDialog', ConfirmDialog);
 
-populateStoresFromToken(apiService).then(() => {
-    app.mount('#app');
-}).catch(() => {
-    clearTokenInStorage();
-    const authStore = useAuthStore();
-    authStore.logout();
-    app.mount('#app');
+beforeLoad().then(() => {
+  app.mount('#app');
 });
diff --git a/apps/dashboard/src/modules/admin/components/users/AdminUserBalance.vue b/apps/dashboard/src/modules/admin/components/users/AdminUserBalance.vue
@@ -4,11 +4,11 @@
     :action="getAction"
     :routerLink="getRouterLink"
     :routerParams="getRouterParams"
-    :func="!isOrgan ? waiveFines : undefined"
+    :func="!isOrgan ? openFineWaiveModal : undefined"
     class="w-19rem"
   >
     <div class="flex flex-column justify-content-center">
-      <div v-if="isLoading">
+      <div v-if="userBalance === null">
         <Skeleton class="h-4rem w-10rem mx-1rem my-6"/>
       </div>
       <h1 v-else class="text-center font-medium text-6xl">{{ displayBalance }}</h1>
@@ -18,40 +18,45 @@
           : t('modules.admin.singleUser.balance.someIsFines', { fine: displayFine }) }}
       </p>
     </div>
-    <ConfirmDialog />
+    <AdminUserFineWaiveModal
+        v-if="userBalance"
+        :user="props.user"
+        :balance="userBalance"
+        v-model:is-visible="isFineWaiveModalVisible" />
   </CardComponent>
 </template>
 
 <script setup lang="ts">
 import CardComponent from '@/components/CardComponent.vue';
-import { computed, ref, onMounted, type Ref, watch } from "vue";
+import { computed, ref, onMounted, watch, type ComputedRef } from "vue";
 import type { BalanceResponse, UserResponse } from '@sudosos/sudosos-client';
 import apiService from '@/services/ApiService';
 import { formatPrice } from "@/utils/formatterUtils";
-import ConfirmDialog from "primevue/confirmdialog";
-import { useConfirm } from "primevue/useconfirm";
 import { useI18n } from "vue-i18n";
-import { useToast } from "primevue/usetoast";
+import { useUserStore } from "@sudosos/sudosos-frontend-common";
+import AdminUserFineWaiveModal from "@/modules/admin/components/users/AdminUserFineWaiveModal.vue";
+import Dinero from "dinero.js";
 
 const props = defineProps<{
-    user: UserResponse | undefined;
+    user: UserResponse;
 }>();
 
-const confirm = useConfirm();
 const { t } = useI18n();
-const toast = useToast();
+const userStore = useUserStore();
 
-const userBalance: Ref<BalanceResponse | null> = ref(null);
-const isLoading: Ref<boolean> = ref(true);
+const userBalance: ComputedRef<BalanceResponse | null> = computed(() => {
+  return userStore.getBalanceById(props.user.id);
+});
 const isOrgan = computed(() => props.user?.type == 'ORGAN');
-
-const emits = defineEmits(['update:value']);
+const isFineWaiveModalVisible = ref(false);
 
 const getAction = computed(() => {
   if (isOrgan.value) {
     return t('modules.seller.payouts.payout.CreatePayout');
   }
-  return t('modules.admin.singleUser.balance.waiveFinesConfirmationTitle');
+  return userBalance.value?.fine
+      ? t('modules.admin.singleUser.balance.waiveFinesConfirmationTitle')
+      : undefined;
 });
 
 const getRouterLink = computed(() => {
@@ -68,60 +73,39 @@ const getRouterParams = computed(() => {
   return undefined;
 });
 
-const updateUserBalance = async () => {
-  if(props.user) {
-    const response = await apiService.balance.getBalanceId(props.user.id);
-    userBalance.value = response.data;
-    isLoading.value = false;
-  }
-};
-
-onMounted(updateUserBalance);
+// Ideally this is done less dirty, and instead of refreshing, we make the mutations from the store reactive
+const emit = defineEmits(['updateMutations']);
+watch(userBalance, () => {
+  emit('updateMutations');
+});
 
-watch(() => props.user, () => {
-  updateUserBalance();
+onMounted(async () => {
+  await userStore.fetchUserBalance(props.user.id, apiService);
 });
 
+
 const isAllFine = computed(() => {
   if (!userBalance.value?.fine) return false;
   return userBalance.value.fine.amount >= -1*userBalance.value?.amount.amount;
 });
 
 const displayFine = computed(() => {
   if (!userBalance.value?.fine) return undefined;
-  return formatPrice(userBalance.value.fine || { amount: 0, currency: 'EUR', precision: 2 });
+  return formatPrice(
+      Dinero(userBalance.value.fine as Dinero.Options)
+          .subtract(
+              Dinero(userBalance.value.fineWaived as Dinero.Options
+                  || { amount: 0, currency: 'EUR', precision: 2 })
+          ).toObject()
+      || { amount: 0, currency: 'EUR', precision: 2 });
 });
 
 const displayBalance = computed(() => {
   return formatPrice(userBalance.value?.amount || { amount: 0, currency: 'EUR', precision: 2 });
 });
 
-const waiveFines = () => {
-  if (!props.user || !props.user.id) return;
-  confirm.require({
-    message: t('modules.admin.singleUser.balance.waiveFinesConfirmation' ),
-    header: t('modules.admin.singleUser.balance.waiveFinesConfirmationTitle'),
-    icon: 'pi pi-exclamation-triangle',
-    accept: async () => {
-      await apiService.user.waiveUserFines(props.user?.id as number).then(() => { // Use 'as number' instead of <number>
-        toast.add({
-          severity: 'success',
-          summary: t('common.toast.success.success'),
-          detail: t('common.toast.success.waiveFinesSuccess'),
-          life: 3000
-        });
-        updateUserBalance();
-      });
-    },
-    reject: () => {
-      toast.add({
-        severity: 'info',
-        summary: t('common.toast.canceled'),
-        detail: t('common.toast.reject.waiveFinesRejected'),
-        life: 3000
-      });
-    },
-  });
+const openFineWaiveModal = () => {
+  isFineWaiveModalVisible.value = true;
 };
 </script>