From 2d178d348129400a6f8e213cb0befe6772ad0152 Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Fri, 23 Aug 2024 22:02:48 +0200
Subject: [PATCH 01/14] feat(dashboard/admin/single-user-view): Added new user
 details form card

---
 apps/dashboard/src/components/InputSpan.vue   |   3 -
 apps/dashboard/src/main.ts                    |   1 +
 .../components/users/AdminUserInfoCard.vue    |  67 ++++++++++
 .../components/users/forms/UserEditForm.vue   | 120 ++++++++++++++++++
 .../admin/views/AdminSingleUserView.vue       |   2 +
 apps/dashboard/src/utils/validation-schema.ts |  11 ++
 6 files changed, 201 insertions(+), 3 deletions(-)
 create mode 100644 apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
 create mode 100644 apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue

diff --git a/apps/dashboard/src/components/InputSpan.vue b/apps/dashboard/src/components/InputSpan.vue
index 5ff9abea..f43b0210 100644
--- a/apps/dashboard/src/components/InputSpan.vue
+++ b/apps/dashboard/src/components/InputSpan.vue
@@ -28,7 +28,6 @@
                 :placeholder="placeholder"
                 v-model="internalValue as number"
                 :disabled="disabled"/>
-
       <InputNumber v-if="type === 'percentage'"
                    mode="decimal"
                    :min="0.0"
@@ -37,11 +36,9 @@
                    v-model="internalValue as number"
                    :disabled="disabled"
                    suffix="%"/>
-
       <InputSwitch v-if="type === 'boolean'"
                    v-model="internalValue as boolean"
                    :disabled="disabled"/>
-
     </span>
     <div class="flex justify-content-end">
       <ErrorSpan :error="errors"/>
diff --git a/apps/dashboard/src/main.ts b/apps/dashboard/src/main.ts
index 8dcb4687..71c4c433 100644
--- a/apps/dashboard/src/main.ts
+++ b/apps/dashboard/src/main.ts
@@ -81,6 +81,7 @@ app.component('ToggleButton', ToggleButton);
 app.component('Steps', Steps);
 app.component('Calendar', Calendar);
 app.component('ConfirmDialog', ConfirmDialog);
+app.component('InputSwitch', InputSwitch);
 
 populateStoresFromToken(apiService).then(() => {
     app.mount('#app');
diff --git a/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue b/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
new file mode 100644
index 00000000..f6a798c9
--- /dev/null
+++ b/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
@@ -0,0 +1,67 @@
+<template>
+  <FormCard :header="$t('userDetails.User Information')" v-if="user"
+            @update:modelValue="edit = $event" @save="formSubmit" :enableEdit="true">
+      <div class="flex flex-column justify-content-between gap-2">
+        <UserEditForm :user="user" :form="form" :edit="edit" @update:edit="edit = $event"/>
+      </div>
+  </FormCard>
+</template>
+
+<script setup lang="ts">
+import FormCard from "@/components/FormCard.vue";
+import {computed, onBeforeMount, onMounted, type PropType, type Ref, ref, watch} from "vue";
+import { useUserStore } from "@sudosos/sudosos-frontend-common";
+import type { UserResponse } from "@sudosos/sudosos-client";
+import { schemaToForm } from "@/utils/formUtils";
+import { updateUserDetailsObject } from "@/utils/validation-schema";
+import UserEditForm from "@/modules/admin/components/users/forms/UserEditForm.vue";
+import apiService from "@/services/ApiService";
+
+const props = defineProps({
+  user: {
+    type: Object as PropType<UserResponse>,
+    required: true
+  }
+});
+
+const edit = ref(false);
+const userStore = useUserStore();
+const user: Ref<UserResponse> = ref(props.user);
+
+
+
+const form = schemaToForm(updateUserDetailsObject);
+
+const formSubmit = () => {
+  form.submit();
+};
+
+const updateFieldValues = (p: UserResponse) => {
+  console.error("updating user");
+  if (!p) return;
+  const values = {
+    firstName: p.firstName,
+    lastName: p.lastName,
+    email: p.email,
+    nickname: p.nickname,
+    isActive: p.active,
+    ofAge: p.ofAge,
+    canGoIntoDebt: p.canGoIntoDebt,
+  };
+  form.context.resetForm({ values });
+};
+
+watch(() => user.value, (newValue: UserResponse) => {
+  updateFieldValues(newValue);
+});
+
+onBeforeMount(() => {
+  if (user.value) {
+    updateFieldValues(user.value);
+  }
+});
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue b/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue
new file mode 100644
index 00000000..8ef95c55
--- /dev/null
+++ b/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="flex flex-column gap-2">
+    <InputSpan :label="$t('userDetails.First name')"
+               :value="form.model.firstName.value.value"
+               :attributes="form.model.firstName.attr.value"
+               @update:value="form.context.setFieldValue('firstName', $event)"
+               :errors="form.context.errors.value.firstName"
+               :disabled="!edit"
+               id="name" placeholder="John" type="text" />
+    <InputSpan :label="$t('userDetails.Last name')"
+               :value="form.model.lastName?.value.value"
+               :attributes="form.model.lastName?.attr.value"
+               @update:value="form.context.setFieldValue('lastName', $event)"
+               :errors="form.context.errors.value.lastName"
+               :disabled="!edit"
+               id="name" placeholder="Doe" type="text" />
+    <InputSpan :label="$t('userDetails.Nickname')"
+               :value="form.model.nickname?.value.value"
+               :attributes="form.model.nickname?.attr.value"
+               @update:value="form.context.setFieldValue('nickname', $event)"
+               :errors="form.context.errors.value.nickname"
+               :disabled="!edit"
+               id="name" placeholder="Nick" type="text" />
+    <InputSpan :label="$t('userDetails.Email address')"
+               :value="form.model.email?.value.value"
+               :attributes="form.model.email?.attr.value"
+               @update:value="form.context.setFieldValue('email', $event)"
+               :errors="form.context.errors.value.email"
+               :disabled="!edit"
+               id="name" placeholder="john.doe@example.com" type="text" />
+    <InputSpan :label="$t('userDetails.Usertype')"
+               :value="form.model.userType?.value.value"
+               :attributes="form.model.userType?.attr.value"
+               @update:value="form.context.setFieldValue('userType', $event)"
+               :errors="form.context.errors.value.userType"
+               id="name" placeholder="Typey McTypeface" type="text" disabled/>
+    <InputSpan :label="$t('userDetails.Active')"
+               :value="form.model.isActive?.value.value"
+               :attributes="form.model.isActive?.attr.value"
+               @update:value="form.context.setFieldValue('isActive', $event)"
+               :errors="form.context.errors.value.isActive"
+               :disabled="!edit"
+               id="name" placeholder="Typey McTypeface" type="boolean"/>
+    <InputSpan :label="$t('profile.ofAge')"
+               :value="form.model.ofAge?.value.value"
+               :attributes="form.model.ofAge?.attr.value"
+               @update:value="form.context.setFieldValue('ofAge', $event)"
+               :errors="form.context.errors.value.ofAge"
+               :disabled="!edit"
+               id="name" placeholder="Typey McTypeface" type="boolean"/>
+    <InputSpan :label="$t('profile.canGoIntoDebt')"
+               :value="form.model.canGoIntoDebt?.value.value"
+               :attributes="form.model.canGoIntoDebt?.attr.value"
+               @update:value="form.context.setFieldValue('canGoIntoDebt', $event)"
+               :errors="form.context.errors.value.canGoIntoDebt"
+               :disabled="!edit"
+               id="name" placeholder="Typey McTypeface" type="boolean"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import InputSpan from "@/components/InputSpan.vue";
+import { useI18n } from "vue-i18n";
+import { useToast } from "primevue/usetoast";
+import { type Form, setSubmit } from "@/utils/formUtils";
+import apiService from "@/services/ApiService";
+import type {UpdateUserRequest, UserResponse} from "@sudosos/sudosos-client";
+import { type PropType } from "vue";
+import * as yup from "yup";
+import { updateUserDetailsObject } from "@/utils/validation-schema";
+import { handleError } from "@/utils/errorUtils";
+
+const { t } = useI18n();
+const toast = useToast();
+
+const emit = defineEmits(['update:edit']);
+
+const props = defineProps({
+  user: {
+    type: Object as PropType<UserResponse>,
+    required: true
+  },
+  form: {
+    type: Object as PropType<Form<yup.InferType<typeof updateUserDetailsObject>>>,
+    required: true,
+  },
+  edit: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+});
+
+setSubmit(props.form, props.form.context.handleSubmit(async (values) => {
+  const updateUserRequest: UpdateUserRequest = {
+    firstName: values.firstName,
+    lastName: values.lastName,
+    email: values.email,
+    nickname: values.nickname,
+    active: values.isActive,
+    ofAge: values.ofAge,
+    canGoIntoDebt: values.canGoIntoDebt,
+  };
+  await apiService.user.updateUser(props.user.id, updateUserRequest).then(() => {
+    toast.add({
+      severity: 'success',
+      summary: t('successMessages.success'),
+      detail: t('successMessages.userUpdated'),
+      life: 3000,
+    });
+    emit('update:edit', false);
+  }).catch((error) => {
+    handleError(error, toast);
+  });
+}));
+</script>
+
+<style scoped>
+
+</style>
diff --git a/apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue b/apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue
index 1cf9b5d7..7c76c693 100644
--- a/apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue
+++ b/apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue
@@ -66,6 +66,7 @@
         </CardComponent>
     </div>
   </div>
+  <AdminUserInfoCard :user="currentUser" />
 </template>
 
 <script setup lang="ts">
@@ -87,6 +88,7 @@ import type { AxiosError } from "axios";
 import Button from "primevue/button";
 import { useI18n } from "vue-i18n";
 import MutationsBalanceCard from "@/components/mutations/MutationsBalance.vue";
+import AdminUserInfoCard from "@/modules/admin/components/users/AdminUserInfoCard.vue";
 
 const { defineField, handleSubmit, errors, setValues } = useForm({
   validationSchema: userDetailsSchema,
diff --git a/apps/dashboard/src/utils/validation-schema.ts b/apps/dashboard/src/utils/validation-schema.ts
index 68ac3239..2504c0b5 100644
--- a/apps/dashboard/src/utils/validation-schema.ts
+++ b/apps/dashboard/src/utils/validation-schema.ts
@@ -55,6 +55,17 @@ export const updateInvoiceAddressingObject = yup.object({
   country: yup.string().required(),
 });
 
+export const updateUserDetailsObject = yup.object({
+  firstName: yup.string().required(),
+  lastName: yup.string(),
+  email: yup.string().email(),
+  nickname: yup.string(),
+  userType: yup.mixed().required(),
+  isActive: yup.boolean().required().default(true),
+  ofAge: yup.boolean().required().default(false),
+  canGoIntoDebt: yup.boolean().required().default(false),
+});
+
 export const editPinSchema = toTypedSchema(
   yup.object({
     pin: yup.string().required()

From 4719f6f0710da4b69e53279b92f703c75c2a3273 Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Mon, 26 Aug 2024 18:21:15 +0200
Subject: [PATCH 02/14] feat: I don't know what I added, but I need to work on
 other things

---
 apps/dashboard/src/components/InputSpan.vue         |  9 +++++++++
 .../admin/components/users/AdminUserInfoCard.vue    | 13 ++++---------
 .../admin/components/users/forms/UserEditForm.vue   |  7 ++++---
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/apps/dashboard/src/components/InputSpan.vue b/apps/dashboard/src/components/InputSpan.vue
index f43b0210..4705693b 100644
--- a/apps/dashboard/src/components/InputSpan.vue
+++ b/apps/dashboard/src/components/InputSpan.vue
@@ -39,6 +39,13 @@
       <InputSwitch v-if="type === 'boolean'"
                    v-model="internalValue as boolean"
                    :disabled="disabled"/>
+      <Dropdown v-if="type === 'usertype'"
+                :options="userTypes"
+                optionLabel="name"
+                optionValue="value"
+                v-model="internalValue as number"
+                :placeholder="placeholder"
+                :disabled="disabled"/>
     </span>
     <div class="flex justify-content-end">
       <ErrorSpan :error="errors"/>
@@ -55,6 +62,8 @@ import ErrorSpan from "@/components/ErrorSpan.vue";
 import CalendarString from "@/components/CalendarString.vue";
 
 import type { HintedString } from "primevue/ts-helpers";
+import InputNumber from "primevue/inputnumber";
+import { userTypes } from "@/utils/validation-schema";
 
 const props = defineProps({
   label: {
diff --git a/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue b/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
index f6a798c9..17b55d5d 100644
--- a/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
+++ b/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <FormCard :header="$t('userDetails.User Information')" v-if="user"
+  <FormCard :header="$t('userDetails.User Information')"
             @update:modelValue="edit = $event" @save="formSubmit" :enableEdit="true">
       <div class="flex flex-column justify-content-between gap-2">
         <UserEditForm :user="user" :form="form" :edit="edit" @update:edit="edit = $event"/>
@@ -9,13 +9,11 @@
 
 <script setup lang="ts">
 import FormCard from "@/components/FormCard.vue";
-import {computed, onBeforeMount, onMounted, type PropType, type Ref, ref, watch} from "vue";
-import { useUserStore } from "@sudosos/sudosos-frontend-common";
+import { onBeforeMount, type PropType, type Ref, ref, watch } from "vue";
 import type { UserResponse } from "@sudosos/sudosos-client";
 import { schemaToForm } from "@/utils/formUtils";
-import { updateUserDetailsObject } from "@/utils/validation-schema";
+import { updateUserDetailsObject, userTypes } from "@/utils/validation-schema";
 import UserEditForm from "@/modules/admin/components/users/forms/UserEditForm.vue";
-import apiService from "@/services/ApiService";
 
 const props = defineProps({
   user: {
@@ -25,11 +23,8 @@ const props = defineProps({
 });
 
 const edit = ref(false);
-const userStore = useUserStore();
 const user: Ref<UserResponse> = ref(props.user);
 
-
-
 const form = schemaToForm(updateUserDetailsObject);
 
 const formSubmit = () => {
@@ -37,7 +32,6 @@ const formSubmit = () => {
 };
 
 const updateFieldValues = (p: UserResponse) => {
-  console.error("updating user");
   if (!p) return;
   const values = {
     firstName: p.firstName,
@@ -45,6 +39,7 @@ const updateFieldValues = (p: UserResponse) => {
     email: p.email,
     nickname: p.nickname,
     isActive: p.active,
+    userType: userTypes.value.find(ut => ut.name === p.type)?.value || undefined,
     ofAge: p.ofAge,
     canGoIntoDebt: p.canGoIntoDebt,
   };
diff --git a/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue b/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue
index 8ef95c55..42b8cabc 100644
--- a/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue
+++ b/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue
@@ -21,7 +21,8 @@
                :errors="form.context.errors.value.nickname"
                :disabled="!edit"
                id="name" placeholder="Nick" type="text" />
-    <InputSpan :label="$t('userDetails.Email address')"
+    <InputSpan  v-if="!(user.type === 'MEMBER')"
+        :label="$t('userDetails.Email address')"
                :value="form.model.email?.value.value"
                :attributes="form.model.email?.attr.value"
                @update:value="form.context.setFieldValue('email', $event)"
@@ -33,7 +34,7 @@
                :attributes="form.model.userType?.attr.value"
                @update:value="form.context.setFieldValue('userType', $event)"
                :errors="form.context.errors.value.userType"
-               id="name" placeholder="Typey McTypeface" type="text" disabled/>
+               id="name" placeholder="Typey McTypeface" type="usertype" disabled/>
     <InputSpan :label="$t('userDetails.Active')"
                :value="form.model.isActive?.value.value"
                :attributes="form.model.isActive?.attr.value"
@@ -64,7 +65,7 @@ import { useI18n } from "vue-i18n";
 import { useToast } from "primevue/usetoast";
 import { type Form, setSubmit } from "@/utils/formUtils";
 import apiService from "@/services/ApiService";
-import type {UpdateUserRequest, UserResponse} from "@sudosos/sudosos-client";
+import type { UpdateUserRequest, UserResponse } from "@sudosos/sudosos-client";
 import { type PropType } from "vue";
 import * as yup from "yup";
 import { updateUserDetailsObject } from "@/utils/validation-schema";

From 2109a57d51caeb590148734dd3ecb48194c645da Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Mon, 26 Aug 2024 20:24:43 +0200
Subject: [PATCH 03/14] refactor(dashboard/admin-single-user-view): remove old
 user edit card and dependencies

---
 .../components/users/AdminUserInfoCard.vue    |  13 +-
 .../admin/views/AdminSingleUserView.vue       | 137 ++----------------
 2 files changed, 22 insertions(+), 128 deletions(-)

diff --git a/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue b/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
index 17b55d5d..96837d95 100644
--- a/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
+++ b/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
@@ -2,7 +2,7 @@
   <FormCard :header="$t('userDetails.User Information')"
             @update:modelValue="edit = $event" @save="formSubmit" :enableEdit="true">
       <div class="flex flex-column justify-content-between gap-2">
-        <UserEditForm :user="user" :form="form" :edit="edit" @update:edit="edit = $event"/>
+        <UserEditForm :user="props.user" :form="form" :edit="edit" @update:edit="edit = $event"/>
       </div>
   </FormCard>
 </template>
@@ -23,7 +23,7 @@ const props = defineProps({
 });
 
 const edit = ref(false);
-const user: Ref<UserResponse> = ref(props.user);
+// const user: Ref<UserResponse> = ref(props.user);
 
 const form = schemaToForm(updateUserDetailsObject);
 
@@ -47,13 +47,14 @@ const updateFieldValues = (p: UserResponse) => {
 };
 
 watch(() => user.value, (newValue: UserResponse) => {
-  updateFieldValues(newValue);
+  // updateFieldValues(newValue);
 });
 
 onBeforeMount(() => {
-  if (user.value) {
-    updateFieldValues(user.value);
-  }
+  console.log(props.user);
+  // if (user.value) {
+  //   updateFieldValues(user.value);
+  // }
 });
 </script>
 
diff --git a/apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue b/apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue
index 7c76c693..591292a9 100644
--- a/apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue
+++ b/apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue
@@ -6,109 +6,47 @@
     <div class="flex flex-column md:flex-row flex-wrap justify-content-between gap-5">
       <!--      TODO: Refactor to extract this component-->
       <!--      See: https://github.com/GEWIS/sudosos-frontend-vue3/issues/21-->
-      <CardComponent :header="t('userDetails.Personal Info')">
-        <form @submit="handleEditUser">
-          <small v-if="!isLocal">{{ t('profile.notManagedThroughSudoSOS') }}</small>
-          <div class="field">
-            <label for="firstName">{{ t("userDetails.First name") }}</label>
-            <InputText :disabled="!isLocal" id="firstName" v-model="firstName" v-bind="firstNameAttrs" class="w-full" />
-            <span class="error-text">{{ errors.firstName }}</span>
-          </div>
-          <div class="field">
-            <label for="lastName">{{ t("userDetails.Last name") }}</label>
-            <InputText :disabled="!isLocal" id="lastName" v-model="lastName" v-bind="lastNameAttrs" class="w-full" />
-            <span class="error-text">{{ errors.lastName }}</span>
-          </div>
-          <div class="field">
-            <label for="nickname">{{ t("userDetails.Nickname") }}</label>
-            <InputText id="nickname" v-model="nickname" v-bind="nicknameAttrs" class="w-full" />
-          </div>
-          <div class="field">
-            <label for="email">{{ t("userDetails.Email address") }}</label>
-            <InputText :disabled="!isLocal" id="email" v-model="email" v-bind="emailAttrs" class="w-full" />
-          </div>
-          <div class="field">
-            <label for="type">{{ t("userDetails.Usertype") }}</label>
-            <InputText id="userType" disabled :placeholder="userTypeDisplay"
-                       v-bind="userTypeAttrs" class="w-full" />
-            <span class="error-text">{{ errors.userType }}</span>
-          </div>
-          <div class="field">
-            <label for="active">{{ t("userDetails.Active") }}</label>
-            <Checkbox :binary="true" id="active" v-model="isActive" v-bind="isActiveAttrs" class="w-full" />
-          </div>
-          <div class="field">
-            <label for="ofAge">{{ t('profile.ofAge') }}</label>
-            <Checkbox :binary="true" v-model="ofAge" v-bind="ofAgeAttrs" id="ofAge" class="w-full" />
-            <span class="error-text">{{ errors.ofAge }}</span>
-          </div>
-          <div class="field">
-            <label for="canGoIntoDebt">{{ t('profile.canGoIntoDebt') }}</label>
-            <Checkbox :binary="true" v-model="canGoIntoDebt" v-bind="canGoIntoDebtAttrs" id="canGoIntoDebt"
-              class="w-full" />
-            <span class="error-text">{{ errors.canGoIntoDebt }}</span>
-          </div>
-          <div class="flex justify-content-end">
-            <Button type="submit" class="update-button">{{ t('userDetails.Update information') }}</Button>
-          </div>
-        </form>
-      </CardComponent>
+
       <AdminUserBalance :user="currentUser" />
-        <CardComponent
-            :header="t('transactions.recentTransactions')"
-            class="w-full">
-          <MutationsBalanceCard
-              class="w-full"
-              :header="t('userDetails.User Transactions')"
-              paginator
-              modal
-              :get-mutations="getUserMutations" />
-        </CardComponent>
+      <CardComponent
+          :header="t('transactions.recentTransactions')"
+          class="w-full">
+        <MutationsBalanceCard
+            class="w-full"
+            :header="t('userDetails.User Transactions')"
+            paginator
+            modal
+            :get-mutations="getUserMutations" />
+      </CardComponent>
     </div>
   </div>
   <AdminUserInfoCard :user="currentUser" />
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeMount, ref } from "vue";
+import { onBeforeMount, ref } from "vue";
 import type { Ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useUserStore } from "@sudosos/sudosos-frontend-common";
-import type { PaginatedFinancialMutationResponse, UpdateUserRequest, UserResponse } from "@sudosos/sudosos-client";
+import type { PaginatedFinancialMutationResponse, UserResponse } from "@sudosos/sudosos-client";
 import CardComponent from "@/components/CardComponent.vue";
-import Checkbox from "primevue/checkbox";
 import AdminUserBalance from "@/modules/admin/components/AdminUserBalance.vue";
-import { useForm } from "vee-validate";
 import apiService from "@/services/ApiService";
 import router from "@/router";
-import { userDetailsSchema, userTypes } from "@/utils/validation-schema";
 import { handleError } from "@/utils/errorUtils";
 import { useToast } from "primevue/usetoast";
 import type { AxiosError } from "axios";
-import Button from "primevue/button";
-import { useI18n } from "vue-i18n";
 import MutationsBalanceCard from "@/components/mutations/MutationsBalance.vue";
 import AdminUserInfoCard from "@/modules/admin/components/users/AdminUserInfoCard.vue";
+import { useI18n } from "vue-i18n";
 
-const { defineField, handleSubmit, errors, setValues } = useForm({
-  validationSchema: userDetailsSchema,
-});
+const { t } = useI18n();
 
 const userId = ref();
 const route = useRoute();
 const userStore = useUserStore();
 const toast = useToast();
-const { t } = useI18n();
 const currentUser: Ref<UserResponse | undefined> = ref();
-const [firstName, firstNameAttrs] = defineField('firstName', {});
-const [lastName, lastNameAttrs] = defineField('lastName', {});
-const [email, emailAttrs] = defineField('email', {});
-const [nickname, nicknameAttrs] = defineField('nickname', {});
-const [isActive, isActiveAttrs] = defineField('isActive', {});
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const [userType, userTypeAttrs] = defineField('userType', {});
-const [canGoIntoDebt, canGoIntoDebtAttrs] = defineField('canGoIntoDebt', {});
-const [ofAge, ofAgeAttrs] = defineField('ofAge', {});
 
 const isLocal: Ref<Boolean> = ref(false);
 
@@ -124,44 +62,6 @@ onBeforeMount(async () => {
     return;
   }
   isLocal.value = currentUser.value.type == "LOCAL_USER";
-  setValues({
-    firstName: currentUser.value?.firstName,
-    lastName: currentUser.value?.lastName,
-    email: currentUser.value.email ? currentUser.value.email : '',
-    nickname: currentUser.value.nickname ? currentUser.value.nickname : '',
-    userType: currentUser.value ? currentUser.value.type : '',
-    isActive: currentUser.value.active,
-    ofAge: currentUser.value.ofAge,
-    canGoIntoDebt: currentUser.value?.canGoIntoDebt,
-  });
-});
-
-const handleEditUser = handleSubmit(async (values) => {
-  if (currentUser.value) {
-    const userId = currentUser.value.id;
-    const updateUserRequest: UpdateUserRequest = {
-      firstName: values.firstName,
-      lastName: values.lastName,
-      nickname: values.nickname || '',
-      active: values.isActive,
-      email: values.email || '',
-      canGoIntoDebt: values.canGoIntoDebt,
-      ofAge: values.ofAge
-    };
-    const response = await apiService.user.updateUser(userId, updateUserRequest);
-    if (response.status === 200) {
-      await router.push({ name: 'user', params: { userId } }).then(() => {
-        toast.add({
-          severity: 'success',
-          summary: t('successMessages.success'),
-          detail: t('userDetails.updatedUserInfo'),
-          life: 3000
-        });
-      });
-    } else {
-      console.error(response.status + ": " + response.statusText);
-    }
-  }
 });
 
 const getUserMutations = async (take: number, skip: number):
@@ -170,13 +70,6 @@ const getUserMutations = async (take: number, skip: number):
       .catch((err: AxiosError) => handleError(err, toast));
   return userStore.getCurrentUser.financialMutations;
 };
-
-const userTypeDisplay = computed(() => {
-  const type = currentUser.value ? currentUser.value.type : '';
-  // Assuming type is a numeric ID; find the corresponding name
-  const userTypeObj = userTypes.value.find(ut => ut.name === type);
-  return userTypeObj ? userTypeObj.name : 'Unknown';
-});
 </script>
 
 <style scoped lang="scss">

From 7cc91f5e6dead3836f87aa7ff41cbce7b979dbe1 Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Mon, 26 Aug 2024 20:57:59 +0200
Subject: [PATCH 04/14] bug-introduce(dashboard/admin-single-user-view): bug
 where v-if in inputspan breaks the page

---
 .../components/users/AdminUserInfoCard.vue    |  8 ++++----
 .../components/users/forms/UserEditForm.vue   | 19 +++++++++++--------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue b/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
index 96837d95..b70f35f5 100644
--- a/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
+++ b/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
@@ -2,7 +2,7 @@
   <FormCard :header="$t('userDetails.User Information')"
             @update:modelValue="edit = $event" @save="formSubmit" :enableEdit="true">
       <div class="flex flex-column justify-content-between gap-2">
-        <UserEditForm :user="props.user" :form="form" :edit="edit" @update:edit="edit = $event"/>
+        <UserEditForm :user="props.user" :form="form" :edit="edit" @update:edit="edit = $event" test="test"/>
       </div>
   </FormCard>
 </template>
@@ -46,9 +46,9 @@ const updateFieldValues = (p: UserResponse) => {
   form.context.resetForm({ values });
 };
 
-watch(() => user.value, (newValue: UserResponse) => {
-  // updateFieldValues(newValue);
-});
+// watch(() => user.value, (newValue: UserResponse) => {
+//   updateFieldValues(newValue);
+// });
 
 onBeforeMount(() => {
   console.log(props.user);
diff --git a/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue b/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue
index 42b8cabc..915ba1fe 100644
--- a/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue
+++ b/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue
@@ -21,8 +21,9 @@
                :errors="form.context.errors.value.nickname"
                :disabled="!edit"
                id="name" placeholder="Nick" type="text" />
-    <InputSpan  v-if="!(user.type === 'MEMBER')"
-        :label="$t('userDetails.Email address')"
+    <!-- Use user.value.type instead of user.type -->
+    <InputSpan v-if="!(user.type === 'MEMBER')"
+               :label="$t('userDetails.Email address')"
                :value="form.model.email?.value.value"
                :attributes="form.model.email?.attr.value"
                @update:value="form.context.setFieldValue('email', $event)"
@@ -66,7 +67,7 @@ import { useToast } from "primevue/usetoast";
 import { type Form, setSubmit } from "@/utils/formUtils";
 import apiService from "@/services/ApiService";
 import type { UpdateUserRequest, UserResponse } from "@sudosos/sudosos-client";
-import { type PropType } from "vue";
+import { type PropType, type Ref, ref } from "vue";
 import * as yup from "yup";
 import { updateUserDetailsObject } from "@/utils/validation-schema";
 import { handleError } from "@/utils/errorUtils";
@@ -79,7 +80,7 @@ const emit = defineEmits(['update:edit']);
 const props = defineProps({
   user: {
     type: Object as PropType<UserResponse>,
-    required: true
+    required: true,
   },
   form: {
     type: Object as PropType<Form<yup.InferType<typeof updateUserDetailsObject>>>,
@@ -90,8 +91,14 @@ const props = defineProps({
     required: false,
     default: false,
   },
+  test: {
+    type: String,
+    required: true,
+  }
 });
 
+const user: Ref<UserResponse> = ref(props.user);
+
 setSubmit(props.form, props.form.context.handleSubmit(async (values) => {
   const updateUserRequest: UpdateUserRequest = {
     firstName: values.firstName,
@@ -115,7 +122,3 @@ setSubmit(props.form, props.form.context.handleSubmit(async (values) => {
   });
 }));
 </script>
-
-<style scoped>
-
-</style>

From ffc79bf934f2433d85f7d0f3b2ebb23282e2f4cc Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Mon, 26 Aug 2024 21:27:58 +0200
Subject: [PATCH 05/14] fix(dashboard/admin-single-user-view): fixed a v-if
 breaking the entire page

---
 .../modules/admin/components/users/forms/UserEditForm.vue    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue b/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue
index 915ba1fe..f9da789c 100644
--- a/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue
+++ b/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue
@@ -22,7 +22,8 @@
                :disabled="!edit"
                id="name" placeholder="Nick" type="text" />
     <!-- Use user.value.type instead of user.type -->
-    <InputSpan v-if="!(user.type === 'MEMBER')"
+    <InputSpan
+        v-if="!(props.user?.type === 'MEMBER')"
                :label="$t('userDetails.Email address')"
                :value="form.model.email?.value.value"
                :attributes="form.model.email?.attr.value"
@@ -67,7 +68,7 @@ import { useToast } from "primevue/usetoast";
 import { type Form, setSubmit } from "@/utils/formUtils";
 import apiService from "@/services/ApiService";
 import type { UpdateUserRequest, UserResponse } from "@sudosos/sudosos-client";
-import { type PropType, type Ref, ref } from "vue";
+import {onBeforeMount, onMounted, type PropType, type Ref, ref} from "vue";
 import * as yup from "yup";
 import { updateUserDetailsObject } from "@/utils/validation-schema";
 import { handleError } from "@/utils/errorUtils";

From 8667114dc6ad7467cc1fb2ad7b445adb3eb6f901 Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Mon, 26 Aug 2024 21:57:12 +0200
Subject: [PATCH 06/14] feat(dashboard/admin-single-user-view): form now auto
 fills user info

---
 apps/dashboard/src/components/FormCard.vue    |  2 +-
 .../components/users/AdminUserInfoCard.vue    | 26 ++++++++++---------
 .../components/users/forms/UserEditForm.vue   |  6 -----
 .../admin/views/AdminSingleUserView.vue       |  2 --
 4 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/apps/dashboard/src/components/FormCard.vue b/apps/dashboard/src/components/FormCard.vue
index cbdabce1..b5fde183 100644
--- a/apps/dashboard/src/components/FormCard.vue
+++ b/apps/dashboard/src/components/FormCard.vue
@@ -1,7 +1,7 @@
 <template>
   <CardComponent :header="header">
     <template #topAction>
-      <div v-if="showEdit">
+      <div v-if="showEdit" class="mx-2">
         <div v-if="!edit">
           <Button
               severity="primary"
diff --git a/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue b/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
index b70f35f5..f58a2cfb 100644
--- a/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
+++ b/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
@@ -1,15 +1,18 @@
 <template>
   <FormCard :header="$t('userDetails.User Information')"
-            @update:modelValue="edit = $event" @save="formSubmit" :enableEdit="true">
+            @update:modelValue="edit = $event"
+            @save="formSubmit"
+            :enableEdit="true"
+  >
       <div class="flex flex-column justify-content-between gap-2">
-        <UserEditForm :user="props.user" :form="form" :edit="edit" @update:edit="edit = $event" test="test"/>
+        <UserEditForm :user="props.user" :form="form" :edit="edit" @update:edit="edit = $event"/>
       </div>
   </FormCard>
 </template>
 
 <script setup lang="ts">
 import FormCard from "@/components/FormCard.vue";
-import { onBeforeMount, type PropType, type Ref, ref, watch } from "vue";
+import {onBeforeMount, onMounted, type PropType, type Ref, ref, watch} from "vue";
 import type { UserResponse } from "@sudosos/sudosos-client";
 import { schemaToForm } from "@/utils/formUtils";
 import { updateUserDetailsObject, userTypes } from "@/utils/validation-schema";
@@ -23,7 +26,7 @@ const props = defineProps({
 });
 
 const edit = ref(false);
-// const user: Ref<UserResponse> = ref(props.user);
+const user: Ref<UserResponse> = ref(props.user);
 
 const form = schemaToForm(updateUserDetailsObject);
 
@@ -46,15 +49,14 @@ const updateFieldValues = (p: UserResponse) => {
   form.context.resetForm({ values });
 };
 
-// watch(() => user.value, (newValue: UserResponse) => {
-//   updateFieldValues(newValue);
-// });
+watch(() => props.user, (newValue: UserResponse) => {
+  updateFieldValues(newValue);
+});
 
-onBeforeMount(() => {
-  console.log(props.user);
-  // if (user.value) {
-  //   updateFieldValues(user.value);
-  // }
+onMounted(() => {
+  if (props.user) {
+    updateFieldValues(props.user);
+  }
 });
 </script>
 
diff --git a/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue b/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue
index f9da789c..aaab969a 100644
--- a/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue
+++ b/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue
@@ -92,14 +92,8 @@ const props = defineProps({
     required: false,
     default: false,
   },
-  test: {
-    type: String,
-    required: true,
-  }
 });
 
-const user: Ref<UserResponse> = ref(props.user);
-
 setSubmit(props.form, props.form.context.handleSubmit(async (values) => {
   const updateUserRequest: UpdateUserRequest = {
     firstName: values.firstName,
diff --git a/apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue b/apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue
index 591292a9..9e9e59a3 100644
--- a/apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue
+++ b/apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue
@@ -1,5 +1,3 @@
-<!--TODO: Extract input validation styling-->
-<!--See: https://github.com/GEWIS/sudosos-frontend-vue3/issues/52-->
 <template>
   <div class="page-container">
     <div class="page-title">{{ `${currentUser ? currentUser.firstName : ''}'s profile` }}</div>

From 14beff7b8fd5ff4f355ac08420aa54c0e2d7368f Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Mon, 26 Aug 2024 22:09:56 +0200
Subject: [PATCH 07/14] feat(dashboard/admin-single-user-view): fixed up
 styling of single user view

---
 .../admin/views/AdminSingleUserView.vue       | 23 ++++++++-----------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue b/apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue
index 9e9e59a3..b762cb80 100644
--- a/apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue
+++ b/apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue
@@ -1,11 +1,12 @@
 <template>
   <div class="page-container">
     <div class="page-title">{{ `${currentUser ? currentUser.firstName : ''}'s profile` }}</div>
-    <div class="flex flex-column md:flex-row flex-wrap justify-content-between gap-5">
-      <!--      TODO: Refactor to extract this component-->
-      <!--      See: https://github.com/GEWIS/sudosos-frontend-vue3/issues/21-->
 
-      <AdminUserBalance :user="currentUser" />
+    <div class="flex flex-column gap-5">
+      <div class="flex flex-column  md:flex-row flex-wrap justify-content-between gap-5">
+        <AdminUserInfoCard :user="currentUser"/>
+        <AdminUserBalance :user="currentUser"/>
+      </div>
       <CardComponent
           :header="t('transactions.recentTransactions')"
           class="w-full">
@@ -14,12 +15,11 @@
             :header="t('userDetails.User Transactions')"
             paginator
             modal
-            :get-mutations="getUserMutations" />
+            :get-mutations="getUserMutations"/>
       </CardComponent>
     </div>
   </div>
-  <AdminUserInfoCard :user="currentUser" />
-</template>
+</template>s
 
 <script setup lang="ts">
 import { onBeforeMount, ref } from "vue";
@@ -40,17 +40,13 @@ import { useI18n } from "vue-i18n";
 
 const { t } = useI18n();
 
-const userId = ref();
 const route = useRoute();
 const userStore = useUserStore();
 const toast = useToast();
 const currentUser: Ref<UserResponse | undefined> = ref();
 
-const isLocal: Ref<Boolean> = ref(false);
-
 onBeforeMount(async () => {
-  userId.value = route.params.userId;
-  await apiService.user.getIndividualUser(userId.value).then((res) => {
+  await apiService.user.getIndividualUser(Number(route.params.userId)).then((res) => {
     currentUser.value = res.data;
   }).catch((error: AxiosError) => {
     handleError(error, toast);
@@ -59,12 +55,11 @@ onBeforeMount(async () => {
     await router.replace({ path: '/error' });
     return;
   }
-  isLocal.value = currentUser.value.type == "LOCAL_USER";
 });
 
 const getUserMutations = async (take: number, skip: number):
     Promise<PaginatedFinancialMutationResponse | undefined> => {
-  await userStore.fetchUsersFinancialMutations(userId.value, apiService, take, skip)
+  await userStore.fetchUsersFinancialMutations(Number(route.params.userId), apiService, take, skip)
       .catch((err: AxiosError) => handleError(err, toast));
   return userStore.getCurrentUser.financialMutations;
 };

From ba0b14f4436e8103b64bd1cafc0c6b058ad4168a Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Mon, 26 Aug 2024 22:16:05 +0200
Subject: [PATCH 08/14] refactor(dashboard/components): removed change info
 component

---
 .../src/components/ChangeInfoComponent.vue    | 92 -------------------
 1 file changed, 92 deletions(-)
 delete mode 100644 apps/dashboard/src/components/ChangeInfoComponent.vue

diff --git a/apps/dashboard/src/components/ChangeInfoComponent.vue b/apps/dashboard/src/components/ChangeInfoComponent.vue
deleted file mode 100644
index 3582b6ce..00000000
--- a/apps/dashboard/src/components/ChangeInfoComponent.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<!-- TODO unused? -->
-<!-- https://github.com/GEWIS/sudosos-frontend/issues/228 -->
-<template>
-  <CardComponent :header="t('profile.changeUserInfo')" :class="{ 'opacity-30': !isLocal}">
-    <form @submit="changeUserInfo">
-      <small v-if="!isLocal">{{ t('profile.notManagedThroughSudoSOS') }}</small>
-      <div class="field">
-        <p>{{ t('profile.firstName')}}</p>
-        <InputText :disabled="!isLocal" v-bind="firstName" />
-        <small class="warning">{{errors.firstName || '&nbsp;'}}</small>
-      </div>
-      <div class="field">
-        <p>{{ t('profile.lastName')}}</p>
-        <InputText :disabled="!isLocal" v-bind="lastName" />
-        <small class="warning">{{errors.lastName || '&nbsp;'}}</small>
-      </div>
-      <div class="field">
-        <p>{{ t('profile.emailAddress')}}</p>
-        <InputText :disabled="!isLocal" v-bind="email" />
-        <small class="warning">{{errors.email || '&nbsp;'}}</small>
-      </div>
-      <div style="margin-top: 1rem" class="flex justify-content-end">
-        <Button :disabled="!isLocal" :label="t('profile.updateInfo')" type="submit" />
-      </div>
-    </form>
-  </CardComponent>
-</template>
-
-<script setup lang="ts">
-import CardComponent from "@/components/CardComponent.vue";
-import { useForm } from "vee-validate";
-import { useUserStore } from "@sudosos/sudosos-frontend-common";
-import { useToast } from "primevue/usetoast";
-import { useI18n } from "vue-i18n";
-import { simpleUserDetailsSchema } from "@/utils/validation-schema";
-import { onBeforeMount } from "vue";
-import apiService from "@/services/ApiService";
-import { handleError } from "@/utils/errorUtils";
-
-const toast = useToast();
-const userStore = useUserStore();
-const { t } = useI18n();
-
-let isLocal = false;
-if(userStore.getCurrentUser.user) {
-  isLocal = (userStore.getCurrentUser.user.type == "LOCAL_USER");
-}
-
-const { defineComponentBinds, handleSubmit, errors, setValues } = useForm({
-  validationSchema: simpleUserDetailsSchema,
-});
-
-const firstName = defineComponentBinds('firstName', {});
-const lastName = defineComponentBinds('lastName', {});
-const email = defineComponentBinds('email', {});
-
-onBeforeMount(() => {
-  setValues({
-      firstName: userStore.getCurrentUser.user?.firstName,
-      lastName: userStore.getCurrentUser.user?.lastName,
-      email: userStore.getCurrentUser.user?.email,
-    }
-  );
-});
-const changeUserInfo = handleSubmit(async (values) => {
-  if (userStore.getCurrentUser.user) {
-    apiService.user.updateUser(userStore.getCurrentUser.user.id, {
-      firstName: values.firstName,
-      lastName: values.lastName,
-      email: values.email,
-    }).then(() => {
-      toast.add({
-        severity: "success",
-        summary: "Success",
-        detail: `${t('userDetails.userInfoUpdated')}`,
-        life: 3000,
-      });
-    }).catch((err) => {
-      handleError(err, toast);
-    });
-  }
-});
-
-
-</script>
-
-<style scoped>
-.warning {
-  color: red; /* Set the error text color to red */
-  margin-top: 4px; /* Add some space between the input and the error text */
-}
-</style>

From 7c797f16c4b12d9f6d53798780148750b7dfc4b9 Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Mon, 26 Aug 2024 22:46:18 +0200
Subject: [PATCH 09/14] feat(dashboard/admin-single-user-view): redid a little
 styling of the User info card and the balance card

---
 .../dashboard/src/modules/admin/views/AdminSingleUserView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue b/apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue
index b762cb80..983b9995 100644
--- a/apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue
+++ b/apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue
@@ -3,8 +3,8 @@
     <div class="page-title">{{ `${currentUser ? currentUser.firstName : ''}'s profile` }}</div>
 
     <div class="flex flex-column gap-5">
-      <div class="flex flex-column  md:flex-row flex-wrap justify-content-between gap-5">
-        <AdminUserInfoCard :user="currentUser"/>
+      <div class="flex flex-column  md:flex-row justify-content-between gap-8">
+        <AdminUserInfoCard :user="currentUser" class="flex-grow-1"/>
         <AdminUserBalance :user="currentUser"/>
       </div>
       <CardComponent

From 80c1acce6bd8b26dda8fd3b5cfc40feca04a2f65 Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Wed, 28 Aug 2024 15:02:52 +0200
Subject: [PATCH 10/14] fix(dashboard/admin-single-user-view): type check
 errors

---
 apps/dashboard/src/components/InputSpan.vue                    | 3 ++-
 .../src/modules/admin/components/users/AdminUserInfoCard.vue   | 3 +--
 apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue | 2 +-
 apps/dashboard/src/utils/validation-schema.ts                  | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/dashboard/src/components/InputSpan.vue b/apps/dashboard/src/components/InputSpan.vue
index 4705693b..b08e1e1d 100644
--- a/apps/dashboard/src/components/InputSpan.vue
+++ b/apps/dashboard/src/components/InputSpan.vue
@@ -106,7 +106,8 @@ const props = defineProps({
 const emit = defineEmits(['update:value']);
 
 const stringInputs = ['text', 'textarea'];
-const numberInputs = ['currency', 'percentage', 'number'];
+
+const numberInputs = ['currency', 'number', 'usertype', 'percentage'];
 const booleanInputs = ['boolean'];
 
 const initialValue = () => {
diff --git a/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue b/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
index f58a2cfb..187b65b7 100644
--- a/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
+++ b/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import FormCard from "@/components/FormCard.vue";
-import {onBeforeMount, onMounted, type PropType, type Ref, ref, watch} from "vue";
+import { onMounted, type PropType, ref, watch} from "vue";
 import type { UserResponse } from "@sudosos/sudosos-client";
 import { schemaToForm } from "@/utils/formUtils";
 import { updateUserDetailsObject, userTypes } from "@/utils/validation-schema";
@@ -26,7 +26,6 @@ const props = defineProps({
 });
 
 const edit = ref(false);
-const user: Ref<UserResponse> = ref(props.user);
 
 const form = schemaToForm(updateUserDetailsObject);
 
diff --git a/apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue b/apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue
index 983b9995..4a466fa2 100644
--- a/apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue
+++ b/apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue
@@ -43,7 +43,7 @@ const { t } = useI18n();
 const route = useRoute();
 const userStore = useUserStore();
 const toast = useToast();
-const currentUser: Ref<UserResponse | undefined> = ref();
+const currentUser: Ref<UserResponse> = ref<UserResponse>(null!);
 
 onBeforeMount(async () => {
   await apiService.user.getIndividualUser(Number(route.params.userId)).then((res) => {
diff --git a/apps/dashboard/src/utils/validation-schema.ts b/apps/dashboard/src/utils/validation-schema.ts
index 2504c0b5..74f73253 100644
--- a/apps/dashboard/src/utils/validation-schema.ts
+++ b/apps/dashboard/src/utils/validation-schema.ts
@@ -60,7 +60,7 @@ export const updateUserDetailsObject = yup.object({
   lastName: yup.string(),
   email: yup.string().email(),
   nickname: yup.string(),
-  userType: yup.mixed().required(),
+  userType: yup.number().required(),
   isActive: yup.boolean().required().default(true),
   ofAge: yup.boolean().required().default(false),
   canGoIntoDebt: yup.boolean().required().default(false),

From dee4a39352815389444a2374ccc43ad4be4e3efa Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Wed, 28 Aug 2024 15:10:05 +0200
Subject: [PATCH 11/14] feat(dashboard/admin-single-user-view): added proper
 placeholders to forms

---
 apps/dashboard/package.json                      |  4 ++--
 apps/dashboard/src/components/FormInput.vue      |  1 -
 apps/dashboard/src/locales/en.json               |  3 ++-
 apps/dashboard/src/locales/nl.json               |  3 ++-
 apps/dashboard/src/mixins/pendingPayoutsMixin.ts |  2 +-
 .../admin/components/users/AdminUserInfoCard.vue |  4 ++--
 .../components/users/forms/UserEditForm.vue      | 16 ++++++++--------
 .../seller/components/POSAddContainerModal.vue   |  2 +-
 .../ProductActionExistingProductForm.vue         |  2 +-
 .../seller/components/ProductActionImageForm.vue |  4 ++--
 apps/dashboard/src/router/index.ts               |  3 ++-
 apps/point-of-sale/package.json                  |  4 ++--
 yarn.lock                                        |  2 ++
 13 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
index a8955a45..67574b27 100644
--- a/apps/dashboard/package.json
+++ b/apps/dashboard/package.json
@@ -49,6 +49,7 @@
     "@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",
@@ -58,7 +59,6 @@
     "prettier": "^3.1.1",
     "typescript": "^5.3.3",
     "vite": "^5.0.12",
-    "vue-tsc": "^2.0.29",
-    "axios": "^1.6.8"
+    "vue-tsc": "^2.0.29"
   }
 }
diff --git a/apps/dashboard/src/components/FormInput.vue b/apps/dashboard/src/components/FormInput.vue
index 28ab4320..7d16f58c 100644
--- a/apps/dashboard/src/components/FormInput.vue
+++ b/apps/dashboard/src/components/FormInput.vue
@@ -19,7 +19,6 @@ import { ref, watch, onMounted, type PropType } from 'vue';
 import InputText from 'primevue/inputtext';
 import Textarea from 'primevue/textarea';
 import Calendar from 'primevue/calendar';
-import type { Ref } from "vue";
 import ErrorSpan from "@/components/ErrorSpan.vue";
 
 const props = defineProps({
diff --git a/apps/dashboard/src/locales/en.json b/apps/dashboard/src/locales/en.json
index 403504a4..36d75350 100644
--- a/apps/dashboard/src/locales/en.json
+++ b/apps/dashboard/src/locales/en.json
@@ -324,7 +324,8 @@
     "Usertype": "Usertype",
     "passwordUpdated": "Password successfully updated",
     "updatedUserInfo": "Succesfully updated user info.",
-    "userInfoUpdated": "User information successfully updated"
+    "userInfoUpdated": "User information successfully updated",
+    "userInformation": "User information"
   },
   "contact": {
     "Contact": "Contact",
diff --git a/apps/dashboard/src/locales/nl.json b/apps/dashboard/src/locales/nl.json
index 810108ba..bf385f20 100644
--- a/apps/dashboard/src/locales/nl.json
+++ b/apps/dashboard/src/locales/nl.json
@@ -325,7 +325,8 @@
     "Usertype": "Gebruikerstype",
     "passwordUpdated": "Wachtwoord is succesvol geüpdatet",
     "updatedUserInfo": "Profiel is succesvol geüpdatet.",
-    "userInfoUpdated": "Profiel is succesvol aangepast"
+    "userInfoUpdated": "Profiel is succesvol aangepast",
+    "userInformation": "Gebruikersinformatie"
   },
   "validation": {
     "number": {
diff --git a/apps/dashboard/src/mixins/pendingPayoutsMixin.ts b/apps/dashboard/src/mixins/pendingPayoutsMixin.ts
index d8acaf5e..bbb3f2ca 100644
--- a/apps/dashboard/src/mixins/pendingPayoutsMixin.ts
+++ b/apps/dashboard/src/mixins/pendingPayoutsMixin.ts
@@ -1,5 +1,5 @@
 // src/mixins/pendingPayoutsMixin.ts
-import { computed, type ComputedRef, watch } from 'vue';
+import { computed, watch } from 'vue';
 import { usePayoutStore } from '@/stores/payout.store';
 import { useUserStore } from '@sudosos/sudosos-frontend-common';
 import { UserRole } from '@/utils/rbacUtils';
diff --git a/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue b/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
index 187b65b7..ba26ff4d 100644
--- a/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
+++ b/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <FormCard :header="$t('userDetails.User Information')"
+  <FormCard :header="$t('userDetails.userInformation')"
             @update:modelValue="edit = $event"
             @save="formSubmit"
             :enableEdit="true"
@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import FormCard from "@/components/FormCard.vue";
-import { onMounted, type PropType, ref, watch} from "vue";
+import { onMounted, type PropType, ref, watch } from "vue";
 import type { UserResponse } from "@sudosos/sudosos-client";
 import { schemaToForm } from "@/utils/formUtils";
 import { updateUserDetailsObject, userTypes } from "@/utils/validation-schema";
diff --git a/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue b/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue
index aaab969a..2b7389f3 100644
--- a/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue
+++ b/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue
@@ -6,7 +6,7 @@
                @update:value="form.context.setFieldValue('firstName', $event)"
                :errors="form.context.errors.value.firstName"
                :disabled="!edit"
-               id="name" placeholder="John" type="text" />
+               id="name" :placeholder="$t('userDetails.First name')" type="text" />
     <InputSpan :label="$t('userDetails.Last name')"
                :value="form.model.lastName?.value.value"
                :attributes="form.model.lastName?.attr.value"
@@ -20,7 +20,7 @@
                @update:value="form.context.setFieldValue('nickname', $event)"
                :errors="form.context.errors.value.nickname"
                :disabled="!edit"
-               id="name" placeholder="Nick" type="text" />
+               id="name" :placeholder="$t('userDetails.Nickname')" type="text" />
     <!-- Use user.value.type instead of user.type -->
     <InputSpan
         v-if="!(props.user?.type === 'MEMBER')"
@@ -30,34 +30,34 @@
                @update:value="form.context.setFieldValue('email', $event)"
                :errors="form.context.errors.value.email"
                :disabled="!edit"
-               id="name" placeholder="john.doe@example.com" type="text" />
+               id="name" placeholder="first.last@example.com" type="text" />
     <InputSpan :label="$t('userDetails.Usertype')"
                :value="form.model.userType?.value.value"
                :attributes="form.model.userType?.attr.value"
                @update:value="form.context.setFieldValue('userType', $event)"
                :errors="form.context.errors.value.userType"
-               id="name" placeholder="Typey McTypeface" type="usertype" disabled/>
+               id="name" :placeholder="$t('userDetails.Usertype')" type="usertype" disabled/>
     <InputSpan :label="$t('userDetails.Active')"
                :value="form.model.isActive?.value.value"
                :attributes="form.model.isActive?.attr.value"
                @update:value="form.context.setFieldValue('isActive', $event)"
                :errors="form.context.errors.value.isActive"
                :disabled="!edit"
-               id="name" placeholder="Typey McTypeface" type="boolean"/>
+               id="name" :placeholder="$t('userDetails.Active')" type="boolean"/>
     <InputSpan :label="$t('profile.ofAge')"
                :value="form.model.ofAge?.value.value"
                :attributes="form.model.ofAge?.attr.value"
                @update:value="form.context.setFieldValue('ofAge', $event)"
                :errors="form.context.errors.value.ofAge"
                :disabled="!edit"
-               id="name" placeholder="Typey McTypeface" type="boolean"/>
+               id="name" :placeholder="$t('profile.ofAge')" type="boolean"/>
     <InputSpan :label="$t('profile.canGoIntoDebt')"
                :value="form.model.canGoIntoDebt?.value.value"
                :attributes="form.model.canGoIntoDebt?.attr.value"
                @update:value="form.context.setFieldValue('canGoIntoDebt', $event)"
                :errors="form.context.errors.value.canGoIntoDebt"
                :disabled="!edit"
-               id="name" placeholder="Typey McTypeface" type="boolean"/>
+               id="name" :placeholder="$t('profile.canGoIntoDebt')" type="boolean"/>
   </div>
 </template>
 
@@ -68,7 +68,7 @@ import { useToast } from "primevue/usetoast";
 import { type Form, setSubmit } from "@/utils/formUtils";
 import apiService from "@/services/ApiService";
 import type { UpdateUserRequest, UserResponse } from "@sudosos/sudosos-client";
-import {onBeforeMount, onMounted, type PropType, type Ref, ref} from "vue";
+import { type PropType } from "vue";
 import * as yup from "yup";
 import { updateUserDetailsObject } from "@/utils/validation-schema";
 import { handleError } from "@/utils/errorUtils";
diff --git a/apps/dashboard/src/modules/seller/components/POSAddContainerModal.vue b/apps/dashboard/src/modules/seller/components/POSAddContainerModal.vue
index a3dd7d5e..44109878 100644
--- a/apps/dashboard/src/modules/seller/components/POSAddContainerModal.vue
+++ b/apps/dashboard/src/modules/seller/components/POSAddContainerModal.vue
@@ -22,7 +22,7 @@ const isVisible = defineModel<boolean>('isVisible', { required: true });
 
 const form = schemaToForm(addContainerObject);
 
-const props = defineProps<{
+defineProps<{
   associatedPos: PointOfSaleWithContainersResponse
 }>();
 </script>
diff --git a/apps/dashboard/src/modules/seller/components/ProductActionExistingProductForm.vue b/apps/dashboard/src/modules/seller/components/ProductActionExistingProductForm.vue
index cc5a5e56..bf91aa5b 100644
--- a/apps/dashboard/src/modules/seller/components/ProductActionExistingProductForm.vue
+++ b/apps/dashboard/src/modules/seller/components/ProductActionExistingProductForm.vue
@@ -21,7 +21,7 @@ const { t } = useI18n();
 
 const selectProduct = defineModel('selectProduct');
 
-const props = defineProps<{
+defineProps<{
   products: BaseProductResponse[]
 }>();
 
diff --git a/apps/dashboard/src/modules/seller/components/ProductActionImageForm.vue b/apps/dashboard/src/modules/seller/components/ProductActionImageForm.vue
index 438f4d2f..e5e6ed56 100644
--- a/apps/dashboard/src/modules/seller/components/ProductActionImageForm.vue
+++ b/apps/dashboard/src/modules/seller/components/ProductActionImageForm.vue
@@ -15,7 +15,7 @@
 
 import FileUpload from "primevue/fileupload";
 
-const props = defineProps<{
+defineProps<{
   isEditable?: boolean,
   imageSrc?: string,
 }>();
@@ -48,4 +48,4 @@ const emit = defineEmits<{
   height: 100%;
   object-fit: cover;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/dashboard/src/router/index.ts b/apps/dashboard/src/router/index.ts
index 55712667..ea0de77c 100644
--- a/apps/dashboard/src/router/index.ts
+++ b/apps/dashboard/src/router/index.ts
@@ -75,7 +75,8 @@ router.beforeEach((to, from, next) => {
   } 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)])];
+      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' });
diff --git a/apps/point-of-sale/package.json b/apps/point-of-sale/package.json
index 3316ee7a..87e2ec62 100644
--- a/apps/point-of-sale/package.json
+++ b/apps/point-of-sale/package.json
@@ -44,6 +44,7 @@
     "@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-import": "^2.27.5",
     "eslint-plugin-vue": "^9.15.1",
@@ -55,7 +56,6 @@
     "sass": "^1.69.7",
     "typescript": "^5.3.3",
     "vite": "^5.0.11",
-    "vue-tsc": "^2.0.29",
-    "axios": "^1.6.8"
+    "vue-tsc": "^2.0.29"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 9e952bd2..71874320 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5583,6 +5583,7 @@ __metadata:
     "@vue/eslint-config-prettier": "npm:^9.0.0"
     "@vue/eslint-config-typescript": "npm:^12.0.0"
     "@vue/tsconfig": "npm:^0.5.1"
+    axios: "npm:^1.6.8"
     dinero.js: "npm:^1.9.1"
     eslint: "npm:^8.50.0"
     eslint-plugin-github-commit-hash: "npm:^1.0.3"
@@ -5632,6 +5633,7 @@ __metadata:
     "@vue/eslint-config-prettier": "npm:^9.0.0"
     "@vue/eslint-config-typescript": "npm:^12.0.0"
     "@vue/tsconfig": "npm:^0.5.1"
+    axios: "npm:^1.6.8"
     bootstrap: "npm:^5.3.0"
     dinero: "npm:^1.0.1"
     dinero.js: "npm:^1.9.1"

From 77e7893d197aca67eb4d0775c519938847d23e5f Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Fri, 30 Aug 2024 14:20:20 +0200
Subject: [PATCH 12/14] refactor(dashboard/user-edit-form): small code
 improvements

---
 .../modules/admin/components/users/AdminUserInfoCard.vue | 9 ++-------
 .../admin/components/users/forms/UserEditForm.vue        | 1 -
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue b/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
index ba26ff4d..c65b5d54 100644
--- a/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
+++ b/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
@@ -36,14 +36,9 @@ const formSubmit = () => {
 const updateFieldValues = (p: UserResponse) => {
   if (!p) return;
   const values = {
-    firstName: p.firstName,
-    lastName: p.lastName,
-    email: p.email,
-    nickname: p.nickname,
-    isActive: p.active,
+    ...p,
     userType: userTypes.value.find(ut => ut.name === p.type)?.value || undefined,
-    ofAge: p.ofAge,
-    canGoIntoDebt: p.canGoIntoDebt,
+    isActive: p.active,
   };
   form.context.resetForm({ values });
 };
diff --git a/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue b/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue
index 2b7389f3..4baaef3e 100644
--- a/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue
+++ b/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue
@@ -21,7 +21,6 @@
                :errors="form.context.errors.value.nickname"
                :disabled="!edit"
                id="name" :placeholder="$t('userDetails.Nickname')" type="text" />
-    <!-- Use user.value.type instead of user.type -->
     <InputSpan
         v-if="!(props.user?.type === 'MEMBER')"
                :label="$t('userDetails.Email address')"

From 3d07f641c0f8694af07f49be53ce7175006a73c8 Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Fri, 30 Aug 2024 14:25:26 +0200
Subject: [PATCH 13/14] fix(dashboard/user-edit-form): nickname cannot be null
 error, even though it is allowed

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

diff --git a/apps/dashboard/src/utils/validation-schema.ts b/apps/dashboard/src/utils/validation-schema.ts
index 74f73253..a41f8684 100644
--- a/apps/dashboard/src/utils/validation-schema.ts
+++ b/apps/dashboard/src/utils/validation-schema.ts
@@ -59,7 +59,7 @@ export const updateUserDetailsObject = yup.object({
   firstName: yup.string().required(),
   lastName: yup.string(),
   email: yup.string().email(),
-  nickname: yup.string(),
+  nickname: yup.string().nullable(),
   userType: yup.number().required(),
   isActive: yup.boolean().required().default(true),
   ofAge: yup.boolean().required().default(false),

From ad6e7a4e01c5757e02a3abb08940bbf569e93cbf Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Fri, 30 Aug 2024 15:46:21 +0200
Subject: [PATCH 14/14] fix(dashboard/admin-single-user-view): fixed some
 type-check issues

---
 apps/dashboard/src/locales/en.json            |  3 +-
 apps/dashboard/src/locales/nl.json            |  3 +-
 .../components/users/AdminUserInfoCard.vue    |  5 ++-
 .../components/users/forms/UserEditForm.vue   | 32 +++++++++----------
 4 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/apps/dashboard/src/locales/en.json b/apps/dashboard/src/locales/en.json
index 36d75350..43575ef2 100644
--- a/apps/dashboard/src/locales/en.json
+++ b/apps/dashboard/src/locales/en.json
@@ -275,7 +275,8 @@
     "pointOfSaleCreated": "Successfully created point of sale.",
     "waiveFinesSuccess": "Successfully waived fines.",
     "waiveFinesRejected": "Canceled waiving fines.",
-    "canceled": "Canceled"
+    "canceled": "Canceled",
+    "userUpdated": "Successfully updated user."
   },
   "termsOfService": {
     "acceptFirst": "Accept the Terms of Service",
diff --git a/apps/dashboard/src/locales/nl.json b/apps/dashboard/src/locales/nl.json
index bf385f20..f6d8e0df 100644
--- a/apps/dashboard/src/locales/nl.json
+++ b/apps/dashboard/src/locales/nl.json
@@ -276,7 +276,8 @@
     "pointOfSaleCreated": "Point of sale is successvol aangemaakt.",
     "waiveFinesSuccess": "Boetes zijn succesvol kwijtgescholden.",
     "waiveFinesRejected": "Boetes zijn succesvol afgewezen.",
-    "canceled": "Geannuleerd"
+    "canceled": "Geannuleerd",
+    "userUpdated": "Gebruiker is succesvol geüpdatet."
   },
   "termsOfService": {
     "acceptFirst": "Accepteer de Voorwaarden",
diff --git a/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue b/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
index c65b5d54..cd33f350 100644
--- a/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
+++ b/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <FormCard :header="$t('userDetails.userInformation')"
+  <FormCard :header="t('userDetails.userInformation')"
             @update:modelValue="edit = $event"
             @save="formSubmit"
             :enableEdit="true"
@@ -17,6 +17,9 @@ import type { UserResponse } from "@sudosos/sudosos-client";
 import { schemaToForm } from "@/utils/formUtils";
 import { updateUserDetailsObject, userTypes } from "@/utils/validation-schema";
 import UserEditForm from "@/modules/admin/components/users/forms/UserEditForm.vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 const props = defineProps({
   user: {
diff --git a/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue b/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue
index 4baaef3e..1cdac105 100644
--- a/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue
+++ b/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue
@@ -1,62 +1,62 @@
 <template>
   <div class="flex flex-column gap-2">
-    <InputSpan :label="$t('userDetails.First name')"
+    <InputSpan :label="t('userDetails.First name')"
                :value="form.model.firstName.value.value"
                :attributes="form.model.firstName.attr.value"
                @update:value="form.context.setFieldValue('firstName', $event)"
                :errors="form.context.errors.value.firstName"
                :disabled="!edit"
-               id="name" :placeholder="$t('userDetails.First name')" type="text" />
-    <InputSpan :label="$t('userDetails.Last name')"
+               id="name" :placeholder="t('userDetails.First name')" type="text" />
+    <InputSpan :label="t('userDetails.Last name')"
                :value="form.model.lastName?.value.value"
                :attributes="form.model.lastName?.attr.value"
                @update:value="form.context.setFieldValue('lastName', $event)"
                :errors="form.context.errors.value.lastName"
                :disabled="!edit"
                id="name" placeholder="Doe" type="text" />
-    <InputSpan :label="$t('userDetails.Nickname')"
-               :value="form.model.nickname?.value.value"
+    <InputSpan :label="t('userDetails.Nickname')"
+               :value="form.model.nickname?.value.value || undefined"
                :attributes="form.model.nickname?.attr.value"
                @update:value="form.context.setFieldValue('nickname', $event)"
                :errors="form.context.errors.value.nickname"
                :disabled="!edit"
-               id="name" :placeholder="$t('userDetails.Nickname')" type="text" />
+               id="name" :placeholder="t('userDetails.Nickname')" type="text" />
     <InputSpan
         v-if="!(props.user?.type === 'MEMBER')"
-               :label="$t('userDetails.Email address')"
+               :label="t('userDetails.Email address')"
                :value="form.model.email?.value.value"
                :attributes="form.model.email?.attr.value"
                @update:value="form.context.setFieldValue('email', $event)"
                :errors="form.context.errors.value.email"
                :disabled="!edit"
                id="name" placeholder="first.last@example.com" type="text" />
-    <InputSpan :label="$t('userDetails.Usertype')"
+    <InputSpan :label="t('userDetails.Usertype')"
                :value="form.model.userType?.value.value"
                :attributes="form.model.userType?.attr.value"
                @update:value="form.context.setFieldValue('userType', $event)"
                :errors="form.context.errors.value.userType"
-               id="name" :placeholder="$t('userDetails.Usertype')" type="usertype" disabled/>
-    <InputSpan :label="$t('userDetails.Active')"
+               id="name" :placeholder="t('userDetails.Usertype')" type="usertype" disabled/>
+    <InputSpan :label="t('userDetails.Active')"
                :value="form.model.isActive?.value.value"
                :attributes="form.model.isActive?.attr.value"
                @update:value="form.context.setFieldValue('isActive', $event)"
                :errors="form.context.errors.value.isActive"
                :disabled="!edit"
-               id="name" :placeholder="$t('userDetails.Active')" type="boolean"/>
-    <InputSpan :label="$t('profile.ofAge')"
+               id="name" :placeholder="t('userDetails.Active')" type="boolean"/>
+    <InputSpan :label="t('profile.ofAge')"
                :value="form.model.ofAge?.value.value"
                :attributes="form.model.ofAge?.attr.value"
                @update:value="form.context.setFieldValue('ofAge', $event)"
                :errors="form.context.errors.value.ofAge"
                :disabled="!edit"
-               id="name" :placeholder="$t('profile.ofAge')" type="boolean"/>
-    <InputSpan :label="$t('profile.canGoIntoDebt')"
+               id="name" :placeholder="t('profile.ofAge')" type="boolean"/>
+    <InputSpan :label="t('profile.canGoIntoDebt')"
                :value="form.model.canGoIntoDebt?.value.value"
                :attributes="form.model.canGoIntoDebt?.attr.value"
                @update:value="form.context.setFieldValue('canGoIntoDebt', $event)"
                :errors="form.context.errors.value.canGoIntoDebt"
                :disabled="!edit"
-               id="name" :placeholder="$t('profile.canGoIntoDebt')" type="boolean"/>
+               id="name" :placeholder="t('profile.canGoIntoDebt')" type="boolean"/>
   </div>
 </template>
 
@@ -98,7 +98,7 @@ setSubmit(props.form, props.form.context.handleSubmit(async (values) => {
     firstName: values.firstName,
     lastName: values.lastName,
     email: values.email,
-    nickname: values.nickname,
+    nickname: values.nickname || "",
     active: values.isActive,
     ofAge: values.ofAge,
     canGoIntoDebt: values.canGoIntoDebt,