From 7bcfdc64624471252e0da87e9ac6edbc1f3fbd89 Mon Sep 17 00:00:00 2001
From: Samuel <samuelincognito@gmail.com>
Date: Sun, 22 Sep 2024 12:52:08 +0200
Subject: [PATCH] feat: creating invoices

---
 .../dashboard/src/components/ActionButton.vue |   2 +-
 apps/dashboard/src/components/FindUser.vue    |  13 +-
 .../src/components/InputUserSpan.vue          |  10 +-
 .../components/mutations/MutationsBalance.vue |   2 +-
 .../src/locales/en/modules/financial.json     |   3 +-
 .../src/locales/nl/modules/financial.json     |   3 +-
 apps/dashboard/src/main.ts                    |   2 +
 .../invoice/InvoiceAddressingCard.vue         |   2 +-
 .../invoice/create/InvoiceCreate.vue          |  86 ++++++++++
 .../create/InvoiceCreateAddressingCard.vue    |  35 +++++
 .../create/InvoiceCreateSettingsCard.vue      |  36 +++++
 .../invoice/create/InvoiceCreateUserCard.vue  | 111 +++++++++++++
 .../create/InvoiceTransactionsCard.vue        |  30 ++++
 ...Form.vue => InvoiceBaseAddressingForm.vue} |  41 +----
 .../invoice/forms/InvoiceBaseSettingsForm.vue |  51 ++++++
 .../invoice/forms/InvoiceSettingsForm.vue     |  25 +--
 .../invoice/forms/InvoiceTransactionsForm.vue | 148 ++++++++++++++++++
 .../forms/InvoiceUpdateAddressingForm.vue     |  61 ++++++++
 .../payout/forms/PayoutCreateForm.vue         |   3 +-
 .../dashboard/src/modules/financial/routes.ts |  91 ++++++-----
 .../views/invoice/InvoiceCreateView.vue       |  36 +++++
 .../views/invoice/InvoiceOverview.vue         |  17 +-
 apps/dashboard/src/utils/formUtils.ts         |   7 +
 apps/dashboard/src/utils/validation-schema.ts |  23 ++-
 package.json                                  |   2 +-
 yarn.lock                                     |   6 +-
 26 files changed, 732 insertions(+), 114 deletions(-)
 create mode 100644 apps/dashboard/src/modules/financial/components/invoice/create/InvoiceCreate.vue
 create mode 100644 apps/dashboard/src/modules/financial/components/invoice/create/InvoiceCreateAddressingCard.vue
 create mode 100644 apps/dashboard/src/modules/financial/components/invoice/create/InvoiceCreateSettingsCard.vue
 create mode 100644 apps/dashboard/src/modules/financial/components/invoice/create/InvoiceCreateUserCard.vue
 create mode 100644 apps/dashboard/src/modules/financial/components/invoice/create/InvoiceTransactionsCard.vue
 rename apps/dashboard/src/modules/financial/components/invoice/forms/{InvoiceAddressingForm.vue => InvoiceBaseAddressingForm.vue} (75%)
 create mode 100644 apps/dashboard/src/modules/financial/components/invoice/forms/InvoiceBaseSettingsForm.vue
 create mode 100644 apps/dashboard/src/modules/financial/components/invoice/forms/InvoiceTransactionsForm.vue
 create mode 100644 apps/dashboard/src/modules/financial/components/invoice/forms/InvoiceUpdateAddressingForm.vue
 create mode 100644 apps/dashboard/src/modules/financial/views/invoice/InvoiceCreateView.vue

diff --git a/apps/dashboard/src/components/ActionButton.vue b/apps/dashboard/src/components/ActionButton.vue
index 48a1b58c..fa8f8834 100644
--- a/apps/dashboard/src/components/ActionButton.vue
+++ b/apps/dashboard/src/components/ActionButton.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import Button from 'primevue/button';
 
 const props = defineProps({
diff --git a/apps/dashboard/src/components/FindUser.vue b/apps/dashboard/src/components/FindUser.vue
index 3364529c..fe8fb65b 100644
--- a/apps/dashboard/src/components/FindUser.vue
+++ b/apps/dashboard/src/components/FindUser.vue
@@ -22,7 +22,7 @@ import { onMounted, type PropType, ref, watch } from "vue";
 import type { Ref } from "vue";
 import apiService from "@/services/ApiService";
 import { debounce } from "lodash";
-import type { BaseUserResponse, UserResponse } from "@sudosos/sudosos-client";
+import { type BaseUserResponse, GetAllUsersTypeEnum, type UserResponse } from "@sudosos/sudosos-client";
 
 const lastQuery = ref("");
 const selectedUser = ref(null);
@@ -31,7 +31,7 @@ const loading = ref(false);
 const users: Ref<(BaseUserResponse & { fullName: string })[]> = ref([]);
 const emits = defineEmits(['update:value']);
 
-defineProps({
+const props = defineProps({
   value: {
     type: Object as PropType<UserResponse>,
   },
@@ -40,6 +40,11 @@ defineProps({
     required: false,
     default: ''
   },
+  type: {
+    type: String as PropType<GetAllUsersTypeEnum>,
+    required: false,
+    default: undefined
+  }
 });
 
 const transformUsers = (userData: BaseUserResponse[]) => {
@@ -51,7 +56,7 @@ const transformUsers = (userData: BaseUserResponse[]) => {
 
 const debouncedSearch = debounce((e: any) => {
   loading.value = true;
-  apiService.user.getAllUsers(50, 0, e.value).then((res) => {
+  apiService.user.getAllUsers(50, 0, e.value, undefined, undefined, undefined, props.type).then((res) => {
     users.value = transformUsers(res.data.records); // Transform users
   }).finally(() => {
     loading.value = false;
@@ -67,7 +72,7 @@ const filterUsers = (e: any) => {
 };
 
 onMounted(async () => {
-  apiService.user.getAllUsers(10, 0).then((res) => {
+  apiService.user.getAllUsers(10, 0, undefined, undefined, undefined, undefined, props.type).then((res) => {
     users.value = transformUsers(res.data.records); // Transform users
   });
 });
diff --git a/apps/dashboard/src/components/InputUserSpan.vue b/apps/dashboard/src/components/InputUserSpan.vue
index cb7149ae..5f2d708f 100644
--- a/apps/dashboard/src/components/InputUserSpan.vue
+++ b/apps/dashboard/src/components/InputUserSpan.vue
@@ -5,7 +5,8 @@
       <span class="my-0">{{ label }}</span>
       <FindUser  :placeholder="placeholder"
                  v-model="internalValue"
-                 :disabled="disabled"/>
+                 :disabled="disabled"
+                 :type="type"/>
     </span>
     <div class="flex justify-content-end">
       <ErrorSpan :error="errors"/>
@@ -17,7 +18,7 @@
 import ErrorSpan from "@/components/ErrorSpan.vue";
 import { onMounted, type PropType, ref, watch } from "vue";
 import FindUser from "@/components/FindUser.vue";
-import type { BaseUserResponse } from "@sudosos/sudosos-client";
+import { type BaseUserResponse, GetAllUsersTypeEnum } from "@sudosos/sudosos-client";
 
 const emit = defineEmits(['update:value']);
 
@@ -48,6 +49,11 @@ const props = defineProps({
     required: false,
     default: false
   },
+  type: {
+    type: String as PropType<GetAllUsersTypeEnum>,
+    required: false,
+    default: undefined
+  }
 });
 
 const internalValue = ref();
diff --git a/apps/dashboard/src/components/mutations/MutationsBalance.vue b/apps/dashboard/src/components/mutations/MutationsBalance.vue
index 99c5310e..04d9a48a 100644
--- a/apps/dashboard/src/components/mutations/MutationsBalance.vue
+++ b/apps/dashboard/src/components/mutations/MutationsBalance.vue
@@ -59,7 +59,7 @@
             {{ formatPrice((mutation.data as FinancialMutation).amount) }}
           </div>
 
-          <!-- Fines get green -->
+          <!-- Fines get red -->
           <div v-else-if="isFine(mutation.data.type)" style="color: #d40000"
                class="font-bold">
             {{ formatPrice((mutation.data as FinancialMutation).amount, true) }}
diff --git a/apps/dashboard/src/locales/en/modules/financial.json b/apps/dashboard/src/locales/en/modules/financial.json
index a434dd37..827aacbf 100644
--- a/apps/dashboard/src/locales/en/modules/financial.json
+++ b/apps/dashboard/src/locales/en/modules/financial.json
@@ -38,7 +38,8 @@
         "missingPdf": "PDF is missing or generation failed",
         "deleted": "Invoice has been deleted.",
         "dirty": "Invoice amount does not match transfer amount.",
-        "total": "The current total on the invoice is {total}"
+        "total": "The current total on the invoice is {total}",
+        "create": "Create invoice"
       },
       "payout": {
         "title": "Payout overview",
diff --git a/apps/dashboard/src/locales/nl/modules/financial.json b/apps/dashboard/src/locales/nl/modules/financial.json
index a13e7ee5..236b2405 100644
--- a/apps/dashboard/src/locales/nl/modules/financial.json
+++ b/apps/dashboard/src/locales/nl/modules/financial.json
@@ -38,7 +38,8 @@
         "missingPdf": "PDF ontbreekt of genereren is mislukt",
         "deleted": "Factuur is verwijderd.",
         "dirty": "De factuurbedrag komt niet overeen met de overboeking.",
-        "total": "Het huidige totaal op de factuur is {total}"
+        "total": "Het huidige totaal op de factuur is {total}",
+        "create": "Factuur aanmaken"
       },
       "payout": {
         "title": "Uitbetalingsoverzicht",
diff --git a/apps/dashboard/src/main.ts b/apps/dashboard/src/main.ts
index 4cbcd084..c170e3f0 100644
--- a/apps/dashboard/src/main.ts
+++ b/apps/dashboard/src/main.ts
@@ -16,6 +16,7 @@ import DataView from "primevue/dataview";
 import InputNumber from "primevue/inputnumber";
 import Dialog from "primevue/dialog";
 import Steps from "primevue/steps";
+import Divider from "primevue/divider";
 import 'primeicons/primeicons.css';
 import Dropdown from "primevue/dropdown";
 import Checkbox from "primevue/checkbox";
@@ -83,6 +84,7 @@ app.component('ToggleButton', ToggleButton);
 app.component('Steps', Steps);
 app.component('Calendar', Calendar);
 app.component('ConfirmDialog', ConfirmDialog);
+app.component('Divider', Divider);
 
 populateStoresFromToken(apiService).then(() => {
     app.mount('#app');
diff --git a/apps/dashboard/src/modules/financial/components/invoice/InvoiceAddressingCard.vue b/apps/dashboard/src/modules/financial/components/invoice/InvoiceAddressingCard.vue
index bfad9144..255914c3 100644
--- a/apps/dashboard/src/modules/financial/components/invoice/InvoiceAddressingCard.vue
+++ b/apps/dashboard/src/modules/financial/components/invoice/InvoiceAddressingCard.vue
@@ -11,7 +11,7 @@
 import FormCard from "@/components/FormCard.vue";
 import { computed, onBeforeMount, ref, watch } from "vue";
 import type { InvoiceResponse } from "@sudosos/sudosos-client";
-import InvoiceAddressingForm from "@/modules/financial/components/invoice/forms/InvoiceAddressingForm.vue";
+import InvoiceAddressingForm from "@/modules/financial/components/invoice/forms/InvoiceUpdateAddressingForm.vue";
 import { updateInvoiceAddressingObject } from "@/utils/validation-schema";
 import { schemaToForm } from "@/utils/formUtils";
 import { InvoiceStatusResponseStateEnum } from "@sudosos/sudosos-client/src/api";
diff --git a/apps/dashboard/src/modules/financial/components/invoice/create/InvoiceCreate.vue b/apps/dashboard/src/modules/financial/components/invoice/create/InvoiceCreate.vue
new file mode 100644
index 00000000..0baf75b3
--- /dev/null
+++ b/apps/dashboard/src/modules/financial/components/invoice/create/InvoiceCreate.vue
@@ -0,0 +1,86 @@
+<template>
+  <CardComponent header="Create Invoice">
+    <ActionButton
+        type="submit"
+        :disabled="disabled"
+        :label="t('common.create')"
+        :submitting="form.context.isSubmitting.value"
+        :result="form.success?.value != null"
+        @click="form.submit"
+    />
+  </CardComponent>
+</template>
+
+<script setup lang="ts">
+import CardComponent from "@/components/CardComponent.vue";
+import { computed, type PropType } from "vue";
+import { type Form, getProperty, setSubmit, setSuccess } from "@/utils/formUtils";
+import * as yup from "yup";
+import { createInvoiceObject } from "@/utils/validation-schema";
+import ActionButton from "@/components/ActionButton.vue";
+import { useI18n } from "vue-i18n";
+import type { CreateInvoiceRequest } from "@sudosos/sudosos-client";
+import { useAuthStore } from "@sudosos/sudosos-frontend-common";
+import apiService from "@/services/ApiService";
+import { useToast } from "primevue/usetoast";
+import { handleError } from "@/utils/errorUtils";
+
+const { t } = useI18n();
+const toast = useToast();
+
+const disabled = computed(() => {
+  return !props.form?.context.meta.value.valid || getProperty(props.form, "forId") === undefined;
+});
+
+const props = defineProps({
+  form: {
+    type: Object as PropType<Form<yup.InferType<typeof createInvoiceObject>>>,
+    required: true,
+  },
+});
+
+const authStore = useAuthStore();
+
+setSubmit(props.form, props.form.context.handleSubmit(async (values) => {
+  const byId = authStore.user?.id;
+  if (byId === undefined) {
+    setSuccess(props.form, false);
+    return;
+  }
+
+  const request: CreateInvoiceRequest = {
+    forId: values.forId,
+    byId,
+    addressee: values.addressee,
+    description: values.description,
+    reference: values.reference,
+    transactionIDs: values.transactionIDs,
+    street: values.street,
+    postalCode: values.postalCode,
+    city: values.city,
+    country: values.country,
+    date: values.date,
+    attention: values.attention,
+    amount: values.transactionTotal,
+  };
+
+  await apiService.invoices.createInvoice(request).then(() => {
+    toast.add({
+      severity: 'success',
+      summary: t('common.toast.success.success'),
+      detail: t('common.toast.success.invoiceCreated'),
+      life: 3000,
+    });
+    setSuccess(props.form, true);
+    props.form.context.resetForm();
+  }).catch((error) => {
+    setSuccess(props.form, false);
+    handleError(error, toast);
+  });
+}));
+
+</script>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/apps/dashboard/src/modules/financial/components/invoice/create/InvoiceCreateAddressingCard.vue b/apps/dashboard/src/modules/financial/components/invoice/create/InvoiceCreateAddressingCard.vue
new file mode 100644
index 00000000..79c058d6
--- /dev/null
+++ b/apps/dashboard/src/modules/financial/components/invoice/create/InvoiceCreateAddressingCard.vue
@@ -0,0 +1,35 @@
+<template>
+  <FormCard :header="t('modules.financial.forms.invoice.addressing')" :enable-edit="false">
+    <div class="flex flex-column justify-content-between gap-2">
+      <InvoiceBaseAddressingForm :form="form" :edit="edit"/>
+    </div>
+  </FormCard>
+</template>
+
+<script setup lang="ts">
+import FormCard from "@/components/FormCard.vue";
+import { computed, type PropType } from "vue";
+import { createInvoiceObject } from "@/utils/validation-schema";
+import { type Form, getProperty } from "@/utils/formUtils";
+import { useI18n } from "vue-i18n";
+import * as yup from "yup";
+import InvoiceBaseAddressingForm from "@/modules/financial/components/invoice/forms/InvoiceBaseAddressingForm.vue";
+
+const { t } = useI18n();
+
+const edit = computed(() => {
+  const forId = getProperty(props.form, "forId");
+  return forId !== undefined;
+});
+
+const props = defineProps({
+  form: {
+    type: Object as PropType<Form<yup.InferType<typeof createInvoiceObject>>>,
+    required: true,
+  },
+});
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/apps/dashboard/src/modules/financial/components/invoice/create/InvoiceCreateSettingsCard.vue b/apps/dashboard/src/modules/financial/components/invoice/create/InvoiceCreateSettingsCard.vue
new file mode 100644
index 00000000..d8a19fbc
--- /dev/null
+++ b/apps/dashboard/src/modules/financial/components/invoice/create/InvoiceCreateSettingsCard.vue
@@ -0,0 +1,36 @@
+<template>
+  <FormCard :header="t('modules.financial.forms.invoice.settings')" :enable-edit="false">
+    <div class="flex flex-column justify-content-between gap-2">
+      <InvoiceBaseSettingsForm  :form="form" :edit="edit"/>
+    </div>
+  </FormCard>
+</template>
+
+<script setup lang="ts">
+import FormCard from "@/components/FormCard.vue";
+import { computed, type PropType } from "vue";
+import { createInvoiceObject } from "@/utils/validation-schema";
+import { type Form, getProperty } from "@/utils/formUtils";
+import { useI18n } from "vue-i18n";
+import * as yup from "yup";
+import InvoiceBaseSettingsForm from "@/modules/financial/components/invoice/forms/InvoiceBaseSettingsForm.vue";
+
+const { t } = useI18n();
+
+const edit = computed(() => {
+  const forId = getProperty(props.form, "forId");
+  return forId !== undefined;
+});
+
+const props = defineProps({
+  form: {
+    type: Object as PropType<Form<yup.InferType<typeof createInvoiceObject>>>,
+    required: true,
+  },
+});
+
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/apps/dashboard/src/modules/financial/components/invoice/create/InvoiceCreateUserCard.vue b/apps/dashboard/src/modules/financial/components/invoice/create/InvoiceCreateUserCard.vue
new file mode 100644
index 00000000..58e00d1e
--- /dev/null
+++ b/apps/dashboard/src/modules/financial/components/invoice/create/InvoiceCreateUserCard.vue
@@ -0,0 +1,111 @@
+<template>
+  <CardComponent header="User Selection">
+    <InputUserSpan :label="t('modules.financial.invoice.for')"
+                   :type="GetAllUsersTypeEnum.Invoice"
+                   @update:value="updateUser($event)"
+    />
+
+    <div class="flex flex-row justify-content-between">
+      <span>{{ t('modules.financial.invoice.create.userBalance') }}</span>
+      <span v-if="userBalance">{{ formatPrice(userBalance) }}</span>
+      <span v-else>N/A</span>
+    </div>
+
+    <div class="flex flex-row justify-content-between">
+      <span>{{ t('modules.financial.invoice.create.invocieAmount') }}</span>
+      <span>{{ formatPrice(transactionTotal) }}</span>
+    </div>
+
+    <Divider />
+
+    <div class="flex flex-row justify-content-between font-bold">
+      <span>{{ t('modules.financial.invoice.create.balanceAfter') }}</span>
+      <span>{{ formatPrice(balanceAfterInvoice) }}</span>
+    </div>
+  </CardComponent>
+</template>
+
+<script setup lang="ts">
+import { computed, type PropType, type Ref, ref } 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 DineroObjectResponse,
+  type InvoiceUserResponse,
+  GetAllUsersTypeEnum,
+  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";
+
+const { t } = useI18n();
+
+const props = defineProps({
+  form: {
+    type: Object as PropType<Form<yup.InferType<typeof createInvoiceObject>>>,
+    required: true,
+  },
+});
+
+const transactionTotal = computed(() => {
+  const total = getProperty(props.form, "transactionTotal");
+  if (total) {
+    return total;
+  } else {
+    return { precision: 2, currency: 'EUR', amount: 0 };
+  }
+});
+
+const userBalance: Ref<DineroObjectResponse> = ref({ precision: 2, currency: 'EUR', amount: 0 });
+const balanceAfterInvoice: Ref<DineroObjectResponse> = computed(() => {
+  let amount = 0;
+  const transactionTotal = getProperty(props.form, "transactionTotal");
+  if (userBalance.value?.amount && transactionTotal) {
+    amount = userBalance.value?.amount + transactionTotal.amount;
+  }
+  return {
+    amount,
+    precision: 2,
+    currency: 'EUR'
+  };
+});
+
+const updateUserBalance = () => {
+  const forId = getProperty(props.form, "forId");
+  if (forId) {
+    apiService.balance.getBalanceId(forId).then((res) => {
+      userBalance.value = res.data.amount;
+    }).catch(() => {
+      userBalance.value = { precision: 2, currency: 'EUR', amount: 0 };
+    });
+  }
+};
+
+const updateUser = (event: UserResponse ) => {
+  if (event.id) {
+    props.form.context.setFieldValue('forId', event.id);
+    updateUserBalance();
+    updateDefaultUser(event.id);
+  }
+};
+
+const updateDefaultUser = (forId: number) => {
+  apiService.invoices.getSingleInvoiceUser(forId).then((res) => {
+    const user = res.data as InvoiceUserResponse;
+    props.form.context.setFieldValue('addressee', user.user.firstName);
+    props.form.context.setFieldValue('street', user.street);
+    props.form.context.setFieldValue('postalCode', user.postalCode);
+    props.form.context.setFieldValue('city', user.city);
+    props.form.context.setFieldValue('country', user.country);
+  });
+};
+
+</script>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/apps/dashboard/src/modules/financial/components/invoice/create/InvoiceTransactionsCard.vue b/apps/dashboard/src/modules/financial/components/invoice/create/InvoiceTransactionsCard.vue
new file mode 100644
index 00000000..79872f30
--- /dev/null
+++ b/apps/dashboard/src/modules/financial/components/invoice/create/InvoiceTransactionsCard.vue
@@ -0,0 +1,30 @@
+<template>
+  <FormCard :header="t('modules.financial.invoice.transfer')"  @cancel="form.context.resetForm" :create="true">
+    <div class="flex flex-column justify-content-between gap-2">
+      <InvoiceTransactionsForm :form="form"/>
+    </div>
+  </FormCard>
+</template>
+
+<script setup lang="ts">
+import FormCard from "@/components/FormCard.vue";
+import InvoiceTransactionsForm from "@/modules/financial/components/invoice/forms/InvoiceTransactionsForm.vue";
+import { createInvoiceObject } from "@/utils/validation-schema";
+import { type Form } from "@/utils/formUtils";
+import { useI18n } from "vue-i18n";
+import type { PropType } from "vue";
+import * as yup from "yup";
+
+const { t } = useI18n();
+
+const props = defineProps({
+  form: {
+    type: Object as PropType<Form<yup.InferType<typeof createInvoiceObject>>>,
+    required: true,
+  },
+});
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/apps/dashboard/src/modules/financial/components/invoice/forms/InvoiceAddressingForm.vue b/apps/dashboard/src/modules/financial/components/invoice/forms/InvoiceBaseAddressingForm.vue
similarity index 75%
rename from apps/dashboard/src/modules/financial/components/invoice/forms/InvoiceAddressingForm.vue
rename to apps/dashboard/src/modules/financial/components/invoice/forms/InvoiceBaseAddressingForm.vue
index eaf9b2ea..670cae98 100644
--- a/apps/dashboard/src/modules/financial/components/invoice/forms/InvoiceAddressingForm.vue
+++ b/apps/dashboard/src/modules/financial/components/invoice/forms/InvoiceBaseAddressingForm.vue
@@ -46,28 +46,15 @@
 
 <script setup lang="ts">
 import InputSpan from "@/components/InputSpan.vue";
-import { type PropType } from "vue";
-import type { InvoiceResponse } from "@sudosos/sudosos-client";
-import { type Form, setSubmit } from "@/utils/formUtils";
-import { updateInvoiceAddressingObject } from "@/utils/validation-schema";
-import { useToast } from "primevue/usetoast";
 import { useI18n } from "vue-i18n";
-import { useInvoiceStore } from "@/stores/invoice.store";
+import type { PropType } from "vue";
+import type { Form } from "@/utils/formUtils";
 import * as yup from "yup";
-import { handleError } from "@/utils/errorUtils";
+import { updateInvoiceAddressingObject } from "@/utils/validation-schema";
 
 const { t } = useI18n();
-const toast = useToast();
-
-const emit = defineEmits(['update:edit']);
-const invoiceStore = useInvoiceStore();
 
-
-const props = defineProps({
-  invoice: {
-    type: Object as PropType<InvoiceResponse>,
-    required: true
-  },
+defineProps({
   form: {
     type: Object as PropType<Form<yup.InferType<typeof updateInvoiceAddressingObject>>>,
     required: true,
@@ -79,25 +66,7 @@ const props = defineProps({
   },
 });
 
-setSubmit(props.form, props.form.context.handleSubmit(async (values) => {
-  if (!props.form.context.meta.value.dirty) {
-    emit('update:edit', false);
-    return;
-  }
-  await invoiceStore.updateInvoice(props.invoice.id, values).then(() => {
-    toast.add({
-      severity: 'success',
-      summary: t('common.toast.success.success'),
-      detail: values,
-      life: 3000,
-    });
-    emit('update:edit', false);
-  }).catch((error) => {
-    handleError(error, toast);
-  });
-}));
 </script>
 
 <style scoped lang="scss">
-
-</style>
+</style>
\ No newline at end of file
diff --git a/apps/dashboard/src/modules/financial/components/invoice/forms/InvoiceBaseSettingsForm.vue b/apps/dashboard/src/modules/financial/components/invoice/forms/InvoiceBaseSettingsForm.vue
new file mode 100644
index 00000000..ef44d942
--- /dev/null
+++ b/apps/dashboard/src/modules/financial/components/invoice/forms/InvoiceBaseSettingsForm.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="flex flex-column justify-content-between gap-2">
+    <InputSpan :label="t('modules.financial.forms.invoice.reference')"
+               :value="form.model.reference.value.value"
+               :attributes="form.model.reference.attr.value"
+               @update:value="form.context.setFieldValue('reference', $event)"
+               :errors="form.context.errors.value.reference"
+               id="name" placeholder="BAC-2324-000" type="text" :disabled="!edit"/>
+
+    <InputSpan :label="t('common.date')"
+               :value="form.model.date.value.value"
+               :attributes="form.model.date.attr.value"
+               @update:value="form.context.setFieldValue('date', $event)"
+               :errors="form.context.errors.value.date"
+               type="date" :disabled="!edit"/>
+
+    <InputSpan :label="t('common.description')"
+               :value="form.model.description.value.value"
+               :attributes="form.model.description.attr.value"
+               @update:value="form.context.setFieldValue('description', $event)"
+               :errors="form.context.errors.value.description"
+               id="name" column type="textarea" :disabled="!edit"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import InputSpan from "@/components/InputSpan.vue";
+import { useI18n } from "vue-i18n";
+import type { PropType } from "vue";
+import type { Form } from "@/utils/formUtils";
+import * as yup from "yup";
+import { updateInvoiceSettingsObject } from "@/utils/validation-schema";
+
+const { t } = useI18n();
+
+defineProps({
+  form: {
+    type: Object as PropType<Form<yup.InferType<typeof updateInvoiceSettingsObject>>>,
+    required: true,
+  },
+  edit: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+});
+</script>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/apps/dashboard/src/modules/financial/components/invoice/forms/InvoiceSettingsForm.vue b/apps/dashboard/src/modules/financial/components/invoice/forms/InvoiceSettingsForm.vue
index 15c74eda..ee6a72d8 100644
--- a/apps/dashboard/src/modules/financial/components/invoice/forms/InvoiceSettingsForm.vue
+++ b/apps/dashboard/src/modules/financial/components/invoice/forms/InvoiceSettingsForm.vue
@@ -1,30 +1,8 @@
 <template>
-  <div class="flex flex-column justify-content-between gap-2">
-    <InputSpan :label="t('modules.financial.forms.invoice.reference')"
-               :value="form.model.reference.value.value"
-               :attributes="form.model.reference.attr.value"
-               @update:value="form.context.setFieldValue('reference', $event)"
-               :errors="form.context.errors.value.reference"
-               id="name" placeholder="BAC-2324-000" type="text" :disabled="!edit"/>
-
-    <InputSpan :label="t('common.date')"
-               :value="form.model.date.value.value"
-               :attributes="form.model.date.attr.value"
-               @update:value="form.context.setFieldValue('date', $event)"
-               :errors="form.context.errors.value.date"
-               type="date" :disabled="!edit"/>
-
-    <InputSpan :label="t('common.description')"
-               :value="form.model.description.value.value"
-               :attributes="form.model.description.attr.value"
-               @update:value="form.context.setFieldValue('description', $event)"
-               :errors="form.context.errors.value.description"
-               id="name" column type="textarea" :disabled="!edit"/>
-  </div>
+  <InvoiceBaseSettingsForm :form="form" :edit="edit"/>
 </template>
 
 <script setup lang="ts">
-import InputSpan from "@/components/InputSpan.vue";
 import { type PropType } from "vue";
 import type { InvoiceResponse } from "@sudosos/sudosos-client";
 import { type Form, setSubmit } from "@/utils/formUtils";
@@ -34,6 +12,7 @@ import { useI18n } from "vue-i18n";
 import { useInvoiceStore } from "@/stores/invoice.store";
 import * as yup from "yup";
 import { handleError } from "@/utils/errorUtils";
+import InvoiceBaseSettingsForm from "@/modules/financial/components/invoice/forms/InvoiceBaseSettingsForm.vue";
 
 const { t } = useI18n();
 const toast = useToast();
diff --git a/apps/dashboard/src/modules/financial/components/invoice/forms/InvoiceTransactionsForm.vue b/apps/dashboard/src/modules/financial/components/invoice/forms/InvoiceTransactionsForm.vue
new file mode 100644
index 00000000..1dd395b6
--- /dev/null
+++ b/apps/dashboard/src/modules/financial/components/invoice/forms/InvoiceTransactionsForm.vue
@@ -0,0 +1,148 @@
+<template>
+  <div class="flex flex-column gap-3">
+    <Calendar v-model="dates" inline showButtonBar :disabled="disabled" :key="transactionCalendar"
+              selectionMode="range" :manualInput="true" :pt='{
+      day: (options) => {
+        const dateString = `${options.context.date.year}-${options.context.date.month}-${options.context.date.day}`;
+        if (transactionsPerDay[dateString]) {
+          return {
+            class: "transaction-day-selected",
+          }
+        }
+      }
+    }' @month-change="monthChange($event)"/>
+
+    {{ t('modules.financial.invoice.create.pos') }}
+    <span class="font-bold">{{ includedPOSString }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import type { createInvoiceObject } from "@/utils/validation-schema";
+import { computed, type ComputedRef, type PropType, reactive, type Ref, ref, watch } from "vue";
+import * as yup from "yup";
+import { type Form, getProperty } from "@/utils/formUtils";
+import { type BasePointOfSaleResponse, type BaseTransactionResponse } from "@sudosos/sudosos-client";
+import apiService from "@/services/ApiService";
+
+const { t } = useI18n();
+
+const props = defineProps({
+  form: {
+    type: Object as PropType<Form<yup.InferType<typeof createInvoiceObject>>>,
+    required: true,
+  },
+});
+
+const dates = ref<(Date|null)[]>([]);
+const transactions: Ref<BaseTransactionResponse[]>= ref([]);
+const transactionCalendar = ref(0);
+const includedPOS: Ref<{ [key: number]: BasePointOfSaleResponse }> = ref({});
+
+const selectedUser: ComputedRef<number | undefined> = computed(() => getProperty(props.form, "forId"));
+
+const isLoading: Ref<boolean> = ref(false);
+
+const disabled = computed(() => {
+  return isLoading.value || loadingHeatmap.value || !getProperty(props.form, "forId");
+});
+
+const getTransactions = () => {
+  if (!selectedUser.value) return;
+  if (!dates.value || dates.value.length !== 2
+    || !dates.value[0] || !dates.value[1]) return;
+
+  isLoading.value = true;
+  const fromDate = new Date(dates.value[0]);
+  const toDate = new Date(dates.value[1]);
+  fromDate.setHours(0, 0, 0, 0);
+  toDate.setHours(23, 59, 59, 999);
+
+  props.form.context.resetField('transactionTotal');
+  apiService.invoices.getEligibleTransactions(selectedUser.value, fromDate.toISOString(), toDate.toISOString()).then((res) => {
+    const t = res.data as any as BaseTransactionResponse[];
+    transactions.value = t;
+    includedPOS.value = {};
+    const transactionsIds: number[] = [];
+    t.forEach((transaction: BaseTransactionResponse) => {
+      // eslint-disable-next-line vue/no-mutating-props
+      props.form.model.transactionTotal.value.value.amount += (transaction as any).totalPriceInclVat.amount;
+      includedPOS.value[transaction.pointOfSale.id] = transaction.pointOfSale;
+      transactionsIds.push(transaction.id);
+    });
+    props.form.context.setFieldValue('transactionIDs', transactionsIds);
+    console.error(res.data);
+  }).finally(() => {
+    isLoading.value = false;
+  });
+};
+
+const showTransactions = () => {
+  if (!dates.value || dates.value.length !== 2) return false;
+  return selectedUser.value !== undefined && dates.value[0] !== null && dates.value[1] !== null;
+};
+
+watch(selectedUser, () => {
+  clear();
+
+  if (selectedUser.value) {
+    const now = new Date();
+    getTransactionsHeatMap({ month: now.getMonth() + 1, year: now.getFullYear() });
+  }
+  if (showTransactions()) getTransactions();
+  else transactions.value = [];
+});
+
+watch(dates, () => {
+  if (showTransactions()) getTransactions();
+  else transactions.value = [];
+});
+
+// Mapping between the date and the transactions
+const transactionsPerDay = ref<{ [key: string]: boolean }>({});
+const loadingHeatmap = ref(false);
+
+const getTransactionsHeatMap = (event: { month: number, year: number }) => {
+  if (!selectedUser.value) return;
+
+  loadingHeatmap.value = true;
+  const fromDate = new Date(event.year, event.month-1, 1);
+  const toDate = new Date(event.year, event.month, 0);
+  fromDate.setHours(0, 0, 0, 0);
+  toDate.setHours(0, 0, 0, 0);
+  apiService.invoices.getEligibleTransactions(selectedUser.value,
+      fromDate.toISOString(), toDate.toISOString()).then((res) => {
+        const t = res.data as any as BaseTransactionResponse[];
+        t.forEach((transaction: BaseTransactionResponse) => {
+          const date = new Date(transaction.createdAt as string);
+          const dateKey = `${date.getFullYear()}-${date.getUTCMonth()}-${date.getDate()}`;
+          transactionsPerDay.value[dateKey] = true;
+        });
+  }).finally(() => {
+    loadingHeatmap.value = false;
+  });
+};
+
+const monthChange = (event: { month: number, year: number }) => {
+  getTransactionsHeatMap(event);
+};
+
+const clear = () => {
+  transactions.value = [];
+  transactionsPerDay.value = {};
+};
+
+const includedPOSString = computed(() => {
+  return Object.values(includedPOS.value).map((p: BasePointOfSaleResponse) => `${p.name} (id ${p.id})`).join(", ");
+});
+
+</script>
+
+<style lang="scss">
+    .p-datepicker table td.transaction-day-selected > span {
+      background-color: rgba(11, 114, 0, 0.89) !important;
+      color: white !important;
+      font-weight: bold;
+    }
+</style>
diff --git a/apps/dashboard/src/modules/financial/components/invoice/forms/InvoiceUpdateAddressingForm.vue b/apps/dashboard/src/modules/financial/components/invoice/forms/InvoiceUpdateAddressingForm.vue
new file mode 100644
index 00000000..b5c01a0e
--- /dev/null
+++ b/apps/dashboard/src/modules/financial/components/invoice/forms/InvoiceUpdateAddressingForm.vue
@@ -0,0 +1,61 @@
+<template>
+  <InvoiceBaseAddressingForm :form="form" :edit="edit"/>
+</template>
+
+<script setup lang="ts">
+import { type PropType } from "vue";
+import type { InvoiceResponse } from "@sudosos/sudosos-client";
+import { type Form, setSubmit } from "@/utils/formUtils";
+import { updateInvoiceAddressingObject } from "@/utils/validation-schema";
+import { useToast } from "primevue/usetoast";
+import { useI18n } from "vue-i18n";
+import { useInvoiceStore } from "@/stores/invoice.store";
+import * as yup from "yup";
+import { handleError } from "@/utils/errorUtils";
+import InvoiceBaseAddressingForm from "@/modules/financial/components/invoice/forms/InvoiceBaseAddressingForm.vue";
+
+const { t } = useI18n();
+const toast = useToast();
+
+const emit = defineEmits(['update:edit']);
+const invoiceStore = useInvoiceStore();
+
+
+const props = defineProps({
+  invoice: {
+    type: Object as PropType<InvoiceResponse>,
+    required: true
+  },
+  form: {
+    type: Object as PropType<Form<yup.InferType<typeof updateInvoiceAddressingObject>>>,
+    required: true,
+  },
+  edit: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+});
+
+setSubmit(props.form, props.form.context.handleSubmit(async (values) => {
+  if (!props.form.context.meta.value.dirty) {
+    emit('update:edit', false);
+    return;
+  }
+  await invoiceStore.updateInvoice(props.invoice.id, values).then(() => {
+    toast.add({
+      severity: 'success',
+      summary: t('common.toast.success.success'),
+      detail: values,
+      life: 3000,
+    });
+    emit('update:edit', false);
+  }).catch((error) => {
+    handleError(error, toast);
+  });
+}));
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/apps/dashboard/src/modules/financial/components/payout/forms/PayoutCreateForm.vue b/apps/dashboard/src/modules/financial/components/payout/forms/PayoutCreateForm.vue
index 09cc98bf..86b1caf8 100644
--- a/apps/dashboard/src/modules/financial/components/payout/forms/PayoutCreateForm.vue
+++ b/apps/dashboard/src/modules/financial/components/payout/forms/PayoutCreateForm.vue
@@ -4,8 +4,9 @@
                    :value="form.model.user.value.value"
                    @update:value="form.context.setFieldValue('user', $event)"
                    :errors="form.context.errors.value.user"
-                   id="name" placeholder="John Doe" type="text"/>
+                   id="name" placeholder="John Doe"/>
 
+<!-- TODO think about turning this into a component? -->
     <skeleton v-if="userBalance === null && form.model.user.value.value" class="w-6 my-1 h-0.5rem surface-300"/>
     <div v-else-if="userBalance" class="flex flex-row gap-1"
          :class="{'text-gray-700': !balanceError, 'text-red-500 font-bold': balanceError}">
diff --git a/apps/dashboard/src/modules/financial/routes.ts b/apps/dashboard/src/modules/financial/routes.ts
index a4b4e57e..85644125 100644
--- a/apps/dashboard/src/modules/financial/routes.ts
+++ b/apps/dashboard/src/modules/financial/routes.ts
@@ -5,6 +5,7 @@ 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 InvoiceCreateView from "@/modules/financial/views/invoice/InvoiceCreateView.vue";
 
 export function financialRoutes(): RouteRecordRaw[] {
   return [
@@ -14,42 +15,62 @@ export function financialRoutes(): RouteRecordRaw[] {
       meta: { requiresAuth: true },
       children: [
         {
-        path: '/fine',
-        component: FineView,
-        name: 'fine',
-        meta: {
-          requiresAuth: true,
-          rolesAllowed: [UserRole.BAC_PM]
-        }
-      },
-      {
-        path: '/invoice',
-        component: InvoiceOverview,
-        name: 'invoice',
-        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: '/payouts',
-        component: PayoutsView,
-        name: 'payouts',
-        meta: {
-          requiresAuth: true,
-          rolesAllowed: [UserRole.BAC_PM]
+          path: '/fine',
+          component: FineView,
+          name: 'fine',
+          meta: {
+            requiresAuth: true,
+            rolesAllowed: [UserRole.BAC_PM]
+          }
+        },
+        {
+          path: '/invoice',
+          component: InvoiceOverview,
+          name: 'invoice',
+          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 => {
+            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: '/payouts',
+          component: PayoutsView,
+          name: 'payouts',
+          meta: {
+            requiresAuth: true,
+            rolesAllowed: [UserRole.BAC_PM]
+          }
         }
-      }
       ]
     }
   ];
diff --git a/apps/dashboard/src/modules/financial/views/invoice/InvoiceCreateView.vue b/apps/dashboard/src/modules/financial/views/invoice/InvoiceCreateView.vue
new file mode 100644
index 00000000..56422e1d
--- /dev/null
+++ b/apps/dashboard/src/modules/financial/views/invoice/InvoiceCreateView.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="page-container">
+    <div class="page-title">{{ t('modules.financial.invoice.create') }}</div>
+    <div class="content-wrapper flex flex-wrap gap-3">
+      <div class="flex flex-column gap-3">
+        <InvoiceCreateUserCard :form="form"/>
+        <InvoiceTransactionsCard :form="form"/>
+      </div>
+      <div class="flex flex-column gap-3">
+        <InvoiceCreateAddressingCard :form="form"/>
+        <InvoiceCreateSettingsCard :form="form"/>
+        <InvoiceCreate :form="form"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import InvoiceTransactionsCard from "@/modules/financial/components/invoice/create/InvoiceTransactionsCard.vue";
+import { schemaToForm } from "@/utils/formUtils";
+import { createInvoiceObject } from "@/utils/validation-schema";
+import InvoiceCreateUserCard from "@/modules/financial/components/invoice/create/InvoiceCreateUserCard.vue";
+import InvoiceCreateAddressingCard from "@/modules/financial/components/invoice/create/InvoiceCreateAddressingCard.vue";
+import InvoiceCreateSettingsCard from "@/modules/financial/components/invoice/create/InvoiceCreateSettingsCard.vue";
+import InvoiceCreate from "@/modules/financial/components/invoice/create/InvoiceCreate.vue";
+
+const { t } = useI18n();
+
+const form = schemaToForm(createInvoiceObject);
+
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/apps/dashboard/src/modules/financial/views/invoice/InvoiceOverview.vue b/apps/dashboard/src/modules/financial/views/invoice/InvoiceOverview.vue
index b2a02984..1c49da52 100644
--- a/apps/dashboard/src/modules/financial/views/invoice/InvoiceOverview.vue
+++ b/apps/dashboard/src/modules/financial/views/invoice/InvoiceOverview.vue
@@ -1,7 +1,17 @@
 <template>
   <div class="page-container flex flex-column">
     <div class="page-title">{{ t('modules.financial.invoice.title') }}</div>
-      <div class="content-wrapper">
+      <div class="content-wrapper flex flex-column">
+        <div class="flex flex-row justify-content-end w-full -mb-5">
+          <Button
+              type="button"
+              severity="primary"
+              class="z-5"
+              :label="t('modules.financial.invoice.create')"
+              icon="pi pi-plus"
+              @click="navigateToCreateInvoice"
+          />
+        </div>
           <TabView class="w-full">
             <TabPanel v-for="state in states" :key="state" :header="state">
               <InvoiceTable :state="state" />
@@ -17,12 +27,17 @@ import TabPanel from "primevue/tabpanel";
 import TabView from "primevue/tabview";
 import { InvoiceStatusResponseStateEnum } from "@sudosos/sudosos-client/src/api";
 import { useI18n } from "vue-i18n";
+import Button from "primevue/button";
+import router from "@/router";
 
 const { t } = useI18n();
 
 const states = [ InvoiceStatusResponseStateEnum.Created, InvoiceStatusResponseStateEnum.Sent,
   InvoiceStatusResponseStateEnum.Paid, InvoiceStatusResponseStateEnum.Deleted ];
 
+const navigateToCreateInvoice = () => {
+  router.push({ name: 'invoiceCreate' });
+};
 </script>
 
 <style scoped lang="scss">
diff --git a/apps/dashboard/src/utils/formUtils.ts b/apps/dashboard/src/utils/formUtils.ts
index 76850d87..1544b910 100644
--- a/apps/dashboard/src/utils/formUtils.ts
+++ b/apps/dashboard/src/utils/formUtils.ts
@@ -51,3 +51,10 @@ export function setSubmit(form: Form<any>, submit: () => Promise<any>) {
 export function setSuccess(form: Form<any>, success: boolean | null) {
   form.success.value = success;
 }
+
+export function getProperty<T extends yup.AnyObject, K extends keyof T>(
+    form: Form<T>,
+    key: K
+): T[K] | undefined {
+  return form.model[key]?.value.value ?? undefined;
+}
\ No newline at end of file
diff --git a/apps/dashboard/src/utils/validation-schema.ts b/apps/dashboard/src/utils/validation-schema.ts
index a7edbf62..db5046c7 100644
--- a/apps/dashboard/src/utils/validation-schema.ts
+++ b/apps/dashboard/src/utils/validation-schema.ts
@@ -3,11 +3,11 @@ import { ref } from "vue";
 import type { Ref } from "vue";
 import i18n from './i18nUtils';
 import type {
-    BaseUserResponse,
-    BaseVatGroupResponse,
-    ProductCategoryResponse
+  BaseUserResponse,
+  BaseVatGroupResponse, ProductCategoryResponse
 } from "@sudosos/sudosos-client";
 import type { ContainerInStore } from "@/stores/container.store";
+import type { DineroObject } from "dinero.js";
 
 const t = i18n.global.t;
 
@@ -140,3 +140,20 @@ export const createSellerPayoutObject =
     reference: yup.string().required(),
     user: yup.mixed<BaseUserResponse>().required(),
   });
+
+export const createInvoiceObject =
+  yup.object({
+    forId: yup.number().required(),
+    byId: yup.number().required(),
+    addressee: yup.string().required(),
+    description: yup.string().required(),
+    reference: yup.string().required(),
+    transactionIDs: yup.array().of(yup.number().required()).required(),
+    transactionTotal: yup.mixed<DineroObject>().default({ precision: 2, currency: 'EUR', amount: 0 }).required(),
+    street: yup.string().required(),
+    postalCode: yup.string().required(),
+    city: yup.string().required(),
+    country: yup.string().required(),
+    date: yup.string().required(),
+    attention: yup.string().required(),
+  });
diff --git a/package.json b/package.json
index 58551745..e737de0a 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
         "build-pos": "yarn workspaces foreach -Rpt --from 'sudosos-point-of-sale' run build"
     },
     "dependencies": {
-        "@sudosos/sudosos-client": "github:GEWIS/sudosos-client#e876cfa72b0e7d5ff7cd7cd6a1a3a1fcb3bbda9c",
+        "@sudosos/sudosos-client": "github:GEWIS/sudosos-client#efb893d75d6a34dce86331b8584773487292c7ad",
         "axios": "^1.7.7",
         "dinero.js": "^1.9.1",
         "fuse.js": "^7.0.0",
diff --git a/yarn.lock b/yarn.lock
index af938d96..f7459970 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -825,9 +825,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sudosos/sudosos-client@github:GEWIS/sudosos-client#e876cfa72b0e7d5ff7cd7cd6a1a3a1fcb3bbda9c":
+"@sudosos/sudosos-client@github:GEWIS/sudosos-client#efb893d75d6a34dce86331b8584773487292c7ad":
   version: 1.1.2
-  resolution: "@sudosos/sudosos-client@https://github.com/GEWIS/sudosos-client.git#commit=e876cfa72b0e7d5ff7cd7cd6a1a3a1fcb3bbda9c"
+  resolution: "@sudosos/sudosos-client@https://github.com/GEWIS/sudosos-client.git#commit=efb893d75d6a34dce86331b8584773487292c7ad"
   dependencies:
     axios: "npm:^1.6.3"
     swagger-axios-codegen: "npm:^0.16.4"
@@ -5272,7 +5272,7 @@ __metadata:
   dependencies:
     "@intlify/eslint-plugin-vue-i18n": "npm:^2.0.0"
     "@rushstack/eslint-patch": "npm:^1.2.0"
-    "@sudosos/sudosos-client": "github:GEWIS/sudosos-client#e876cfa72b0e7d5ff7cd7cd6a1a3a1fcb3bbda9c"
+    "@sudosos/sudosos-client": "github:GEWIS/sudosos-client#efb893d75d6a34dce86331b8584773487292c7ad"
     "@tsconfig/node-lts": "npm:^20.1.3"
     "@types/dinero.js": "npm:^1.9.4"
     "@types/lodash": "npm:^4.17.12"