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

apps/dashboard/src/components/FindUser.vue

@@ -23,6 +23,7 @@ import type { Ref } from "vue";
 import apiService from "@/services/ApiService";
 import { debounce } from "lodash";
 import { type BaseUserResponse, GetAllUsersTypeEnum, type UserResponse } from "@sudosos/sudosos-client";
+import { useUserStore } from "@sudosos/sudosos-frontend-common";
 
 const emits = defineEmits(['update:value']);
 
@@ -44,17 +45,27 @@ const props = defineProps({
     type: Number,
     required: false,
     default: 10,
+  },
+  showPositive: {
+    type: Boolean,
+    required: false,
+    default: true
   }
 });
 
 const lastQuery = ref("");
 const selectedUser = ref(null);
+const userStore = useUserStore();
 
 const loading = ref(false);
 const users: Ref<(BaseUserResponse & { fullName: string })[]> = ref([]);
 
 const transformUsers = (userData: BaseUserResponse[]) => {
-  return userData.map((user: BaseUserResponse) => ({
+  let usersData = userData;
+  if (!props.showPositive){
+    usersData = userData.filter(isNegative);
+  }
+  return usersData.map((user: BaseUserResponse) => ({
     ...user,
     fullName: `${user.firstName} ${user.lastName}`
   }));
@@ -77,9 +88,16 @@ const filterUsers = (e: any) => {
   }
 };
 
+function isNegative(user: BaseUserResponse) {
+  return userStore.getBalanceById(user.id).amount.amount < 0;
+}
+
 onMounted(async () => {
   apiService.user.getAllUsers(props.take, 0, undefined, undefined, undefined, undefined, props.type).then((res) => {
-    users.value = transformUsers(res.data.records);
+    userStore.addUsers(res.data.records);
+    userStore.fetchUserBalances(res.data.records, apiService).then(() => {
+      users.value = transformUsers(res.data.records);
+    });
   });
 });
 

apps/dashboard/src/components/InputUserSpan.vue

@@ -6,7 +6,9 @@
       <FindUser  :placeholder="placeholder"
                  v-model="internalValue"
                  :disabled="disabled"
-                 :type="type"/>
+                 :type="type"
+                 :showPositive="props.showPositive"
+      />
     </span>
     <div class="flex justify-content-end">
       <ErrorSpan :error="errors"/>
@@ -53,6 +55,11 @@ const props = defineProps({
     type: String as PropType<GetAllUsersTypeEnum>,
     required: false,
     default: undefined
+  },
+  showPositive: {
+    type: Boolean,
+    required: false,
+    default: true
   }
 });
 

apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue

@@ -6,8 +6,25 @@
   >
       <div class="flex flex-column justify-content-between gap-2">
         <UserEditForm :user="props.user" :form="form" :edit="edit" @update:edit="edit = $event"/>
+        <Divider />
+        <h4 class="mt-0">{{ t('modules.user.settings.apiKeys') }}</h4>
+        <div class="flex flex-row align-items-center w-11">
+          <p class="flex-grow-1 my-1">{{ t('modules.user.settings.changeApiKey') }}</p>
+          <i
+              class="pi pi-arrow-up-right text-gray-500 flex align-items-center cursor-pointer"
+              @click="confirmChangeApiKey()"
+          />
+        </div>
+        <div class="flex flex-row align-items-center w-11">
+          <p class="flex-grow-1 my-1">{{ t('modules.user.settings.deleteApiKey') }}</p>
+          <i
+              class="pi pi-arrow-up-right text-gray-500 flex align-items-center cursor-pointer"
+              @click="confirmDeleteApiKey()"
+          />
+        </div>
       </div>
   </FormCard>
+  <ConfirmDialog />
 </template>
 
 <script setup lang="ts">
@@ -18,8 +35,16 @@ import { schemaToForm } from "@/utils/formUtils";
 import { updateUserDetailsObject } from "@/utils/validation-schema";
 import UserEditForm from "@/modules/admin/components/users/forms/UserEditForm.vue";
 import { useI18n } from "vue-i18n";
+import apiService from "@/services/ApiService";
+import { handleError } from "@/utils/errorUtils";
+import { useConfirm } from "primevue/useconfirm";
+import { useUserStore } from "@sudosos/sudosos-frontend-common";
+import { useToast } from "primevue/usetoast";
 
 const { t } = useI18n();
+const confirm = useConfirm();
+const userStore = useUserStore();
+const toast = useToast();
 
 const props = defineProps({
   user: {
@@ -55,6 +80,50 @@ onMounted(() => {
     updateFieldValues(props.user);
   }
 });
+
+const confirmChangeApiKey = () => {
+  confirm.require({
+    message: t('modules.user.settings.confirmChangeApiKey'),
+    header: t('modules.user.settings.changeApiKey'),
+    icon: 'pi pi-exclamation-triangle',
+    accept: () => {
+      userStore.fetchUserApi(apiService, props.user.id)
+          .then((res) => {
+            toast.add({
+              severity: "success",
+              summary: t('common.toast.success.success'),
+              detail: `${t('common.toast.success.apiKeyChanged')} \n ${res.data.key}`,
+              life: 5000,
+            });
+          })
+          .catch((err) => {
+            handleError(err, toast);
+          });
+    },
+  });
+};
+
+const confirmDeleteApiKey = () => {
+  confirm.require({
+    message: t('modules.user.settings.confirmDeleteApiKey'),
+    header: t('modules.user.settings.deleteApiKey'),
+    icon: 'pi pi-exclamation-triangle',
+    accept: () => {
+      apiService.user.deleteUserKey(props.user.id)
+          .then(() => {
+            toast.add({
+              severity: "success",
+              summary: t('common.toast.success.success'),
+              detail: t('common.toast.success.apiKeyDeleted'),
+              life: 5000,
+            });
+          })
+          .catch((err) => {
+            handleError(err, toast);
+          });
+    },
+  });
+};
 </script>
 
 <style scoped lang="scss">

apps/dashboard/src/modules/admin/views/AdminUserOverView.vue

@@ -123,6 +123,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, type Ref, watch } from "vue";
 import apiService from '@/services/ApiService';
+import { DEFAULT_PAGINATION_MAX } from '@/services/ApiService';
 import type { GewisUserResponse, UserResponse } from "@sudosos/sudosos-client";
 import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
@@ -191,19 +192,19 @@ function debounce(func: (skip: number) => Promise<void>, delay: number): (skip:
 
 const apiCall: (skip: number) => Promise<void> = async (skip: number) => {
   await apiService.user
-    .getAllUsers(
-      Number.MAX_SAFE_INTEGER,
-      skip,
-      searchQuery.value.split(' ')[0] || '',
-      isActiveFilter.value,
-      ofAgeFilter.value,
-      undefined,
-      filters.value.type.value || undefined
-    )
-    .then((response) => {
-      totalRecords.value = response.data._pagination.count || 0;
-      allUsers.value = response.data.records;
-    });
+      .getAllUsers(
+          DEFAULT_PAGINATION_MAX,
+          skip,
+          searchQuery.value.split(' ')[0] || '',
+          isActiveFilter.value ? isActiveFilter.value : undefined,
+          ofAgeFilter.value,
+          undefined,
+          filters.value.type.value || undefined
+      )
+      .then((response) => {
+        totalRecords.value = response.data._pagination.count || 0;
+        allUsers.value = response.data.records;
+      });
 };
 
 const delayedAPICall = debounce(apiCall, 250);

apps/dashboard/src/modules/financial/components/invoice/create/InvoiceCreateUserCard.vue

@@ -6,6 +6,7 @@
                    @update:value="updateUser($event)"
                    v-model:value="selectedUser"
                    class="mb-3"
+                   :showPositive="false"
     />
 
     <div class="flex flex-row justify-content-between">

apps/dashboard/src/modules/user/components/UserSettingsComponent.vue

@@ -87,6 +87,7 @@ import { useConfirm } from "primevue/useconfirm";
 import { useToast } from "primevue/usetoast";
 import apiService from "@/services/ApiService";
 import { handleError } from "@/utils/errorUtils";
+import { useUserStore } from "@sudosos/sudosos-frontend-common";
 
 async function startScan() {
   if (!('NDEFReader' in window)) {
@@ -151,6 +152,7 @@ const editPin = ref(true);
 const confirm = useConfirm();
 const toast = useToast();
 const dataAnalysis = ref(props.user.extensiveDataProcessing);
+const userStore = useUserStore();
 
 const handleChangeDataAnalysis = (value: boolean) => {
   apiService.user.updateUser(props.user.id, { extensiveDataProcessing: value })
@@ -174,7 +176,7 @@ const confirmChangeApiKey = () => {
     header: t('modules.user.settings.changeApiKey'),
     icon: 'pi pi-exclamation-triangle',
     accept: () => {
-      apiService.user.updateUserKey(props.user.id)
+      userStore.fetchUserApi(apiService, props.user.id)
           .then((res) => {
             toast.add({
               severity: "success",

apps/dashboard/src/services/ApiService.ts

@@ -1,3 +1,5 @@
 import { ApiService } from "@sudosos/sudosos-frontend-common";
 const apiService = new ApiService(window.location.origin + "/api/v1");
 export default apiService;
+
+export const DEFAULT_PAGINATION_MAX = 500;

lib/common/src/stores/user.store.ts

@@ -130,6 +130,9 @@ export const useUserStore = defineStore('user', {
         return res.data as GewisUserResponse;
       });
     },
+    async fetchUserApi(service: ApiService, id: number){
+      return (await service.user.updateUserKey(id));
+    },
     async waiveUserFine(id: number, amount: DineroObjectRequest, service: ApiService) {
       return service.user.waiveUserFines(id, {
         amount