Update main from develop

apps/dashboard/src/components/FindUser.vue

@@ -12,7 +12,7 @@
       @filter="filterUsers"
   >
   <template #option="slotProps" >
-    <span :class="{'text-gray-500': !isNegative(slotProps.option)}">
+    <span :class="{'text-gray-500': isNegative(slotProps.option) === true}">
       {{ slotProps.option.fullName }} {{ slotProps.option.gewisId ? `(${slotProps.option.gewisId})` : '' }}
     </span>
   </template>
@@ -66,6 +66,19 @@ const userStore = useUserStore();
 const loading = ref(false);
 const users: Ref<(BaseUserResponse & { fullName: string })[]> = ref([]);
 
+const compareBalance = (a: BaseUserResponse, b: BaseUserResponse) => {
+  const isANegative = isNegative(a);
+  const isBNegative = isNegative(b);
+
+  if (isANegative && !isBNegative) {
+    return -1;
+  }
+  if (!isANegative && isBNegative) {
+    return 1;
+  }
+  return 0;
+};
+
 const transformUsers = (userData: BaseUserResponse[]) => {
   const usersData: (BaseUserResponse & { fullName: string})[]
       = userData.map((user) => ({
@@ -74,18 +87,12 @@ const transformUsers = (userData: BaseUserResponse[]) => {
   }));
 
   usersData.sort((a, b) => {
-    const isANegative = isNegative(a);
-    const isBNegative = isNegative(b);
-
-    if (isANegative && !isBNegative) {
-      return -1;
-    }
-    if (!isANegative && isBNegative) {
-      return 1;
+    if (!props.showPositive) {
+      const res = compareBalance(a, b);
+      if (res !== 0) return res;
     }
     return a.fullName.localeCompare(b.fullName);
   });
-
   return usersData;
 };
 
@@ -107,18 +114,27 @@ const filterUsers = (e: any) => {
 };
 
 function isNegative(user: BaseUserResponse) {
-  return userStore.getBalanceById(user.id).amount.amount < 0;
+  const balance = userStore.getBalanceById(user.id);
+  if (!balance) return undefined;
+  else return balance.amount.amount < 0;
 }
 
 onMounted(async () => {
   apiService.user.getAllUsers(props.take, 0, undefined, undefined, undefined, undefined, props.type).then((res) => {
     userStore.addUsers(res.data.records);
-    userStore.fetchUserBalances(res.data.records, apiService).then(() => {
-      users.value = transformUsers(res.data.records);
-    });
+    let selected = undefined;
     if (props.default) {
-      selectedUser.value = transformUsers([props.default])[0];
+      selected = transformUsers([props.default])[0];
     }
+    userStore.fetchUserBalances(res.data.records, apiService).then(() => {
+      const transformed = transformUsers(res.data.records);
+      if (selected) {
+        users.value = [...transformed, selected];
+        selectedUser.value = selected;
+      } else {
+        users.value = transformed;
+      }
+    });
   });
 });
 

apps/dashboard/src/locales/en/modules/financial.json

@@ -63,8 +63,8 @@
         "title": "Payout overview",
         "create": "Create payout",
         "requestedBy": "Requested by",
-        "details": "Payout details",
-        "approvedBy": "Approved by",
+        "details": "Payout details #{payoutId}",
+        "approvedBy": "Approved by {approvedBy}",
         "approve": "Approve",
         "deny": "Deny"
       },

apps/dashboard/src/locales/nl/modules/financial.json

@@ -63,8 +63,8 @@
         "title": "Uitbetalingsoverzicht",
         "create": "Uitbetaling aanmaken",
         "requestedBy": "Aangevraagd door",
-        "details": "Uitbetalingsdetails",
-        "approvedBy": "Goedgekeurd door",
+        "details": "Uitbetalingsdetails #{payoutId}",
+        "approvedBy": "Goedgekeurd door {approvedBy}",
         "approve": "Goedkeuren",
         "deny": "Afwijzen"
       },

apps/dashboard/src/modules/financial/components/payout/PayoutInfo.vue

@@ -44,7 +44,6 @@
       <div class="flex flex-column">
         <span>{{ t('common.createdAt') + ': ' }}{{ formatDateFromString(payout.createdAt) }}</span>
         <span>{{ t('common.updatedAt') + ': ' }}{{ formatDateFromString(payout.updatedAt) }}</span>
-        <span>{{ t('common.id') + ': ' }}{{ payout.id }}</span>
       </div>
     </div>
     <div v-if="isApproved && payout.approvedBy" class="mt-1">

apps/dashboard/src/modules/financial/components/payout/PayoutTable.vue

@@ -66,7 +66,7 @@
         v-model:visible="showModal"
         :draggable="false"
         class="w-auto flex w-9 md:w-4"
-        :header="t('modules.financial.payout.details')">
+        :header="t('modules.financial.payout.details', { payoutId })">
       <PayoutInfo :payoutId="payoutId" @close="showModal = false"/>
     </Dialog>
   </div>

apps/dashboard/src/modules/financial/components/payout/forms/PayoutCreateForm.vue

@@ -4,6 +4,7 @@
                    :value="form.model.user.value.value"
                    @update:value="form.context.setFieldValue('user', $event)"
                    :errors="form.context.errors.value.user"
+                   :show-positive="true"
                    id="name" placeholder="John Doe"/>
 
 <!-- TODO think about turning this into a component? -->

apps/dashboard/src/styles/primevue-base/_colors.scss

@@ -1,9 +1,9 @@
-@use "sass:meta";
+@use "sass:list";
 @use "../themes/sudosos-light/variables_light";
 @use "mixins";
 
 :root {
-    @if meta.variable-exists(colors) {
+    @if list.length(variables_light.$colors) > 0 {
         @each $name, $color in variables_light.$colors {
             @for $i from 0 through 5 {
                 @if ($i == 0) {