feat: post refactoring invoice ui

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({
@@ -27,7 +27,7 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(['click']);
+defineEmits(['click']);
 
 const buttonIcon = ref('pi pi-check');
 const buttonSeverity = ref('primary');

apps/dashboard/src/components/FindUser.vue

@@ -22,16 +22,11 @@ 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);
-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,8 +35,24 @@ defineProps({
     required: false,
     default: ''
   },
+  type: {
+    type: String as PropType<GetAllUsersTypeEnum>,
+    required: false,
+    default: undefined
+  },
+  take: {
+    type: Number,
+    required: false,
+    default: 10,
+  }
 });
 
+const lastQuery = ref("");
+const selectedUser = ref(null);
+
+const loading = ref(false);
+const users: Ref<(BaseUserResponse & { fullName: string })[]> = ref([]);
+
 const transformUsers = (userData: BaseUserResponse[]) => {
   return userData.map((user: BaseUserResponse) => ({
     ...user,
@@ -51,8 +62,8 @@ const transformUsers = (userData: BaseUserResponse[]) => {
 
 const debouncedSearch = debounce((e: any) => {
   loading.value = true;
-  apiService.user.getAllUsers(50, 0, e.value).then((res) => {
-    users.value = transformUsers(res.data.records); // Transform users
+  apiService.user.getAllUsers(props.take, 0, e.value, undefined, undefined, undefined, props.type).then((res) => {
+    users.value = transformUsers(res.data.records);
   }).finally(() => {
     loading.value = false;
   });
@@ -67,15 +78,14 @@ const filterUsers = (e: any) => {
 };
 
 onMounted(async () => {
-  apiService.user.getAllUsers(10, 0).then((res) => {
-    users.value = transformUsers(res.data.records); // Transform users
+  apiService.user.getAllUsers(props.take, 0, undefined, undefined, undefined, undefined, props.type).then((res) => {
+    users.value = transformUsers(res.data.records);
   });
 });
 
 watch(selectedUser, () => {
   emits('update:value', selectedUser.value);
 });
-
 </script>
 
 <style scoped lang="scss">

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();

apps/dashboard/src/components/TopNavbar.vue

@@ -136,7 +136,8 @@ const getOrgans = async () => {
 const getAllOrgans = async () => {
   organs.value = [];
   const promises: Promise<any>[] = [];
-  await apiService.user.getAllUsers(100, undefined, undefined, undefined, undefined, undefined, GetAllUsersTypeEnum.Organ).then((res) => {
+  await apiService.user.getAllUsers(100, undefined, undefined, undefined, undefined,
+      undefined, GetAllUsersTypeEnum.Organ).then((res) => {
     const orgs = res.data.records;
     orgs.forEach((organ) => {
       promises.push(apiService.balance.getBalanceId(organ.id).then((res) => {

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) }}

apps/dashboard/src/locales/en/common/common.json

@@ -38,6 +38,7 @@
         "delete": "Delete",
         "owner": "Owner",
         "back": "Back",
+        "na": "N/A",
         "signOut": "Sign out",
         "createdAt": "Created at",
         "updatedAt": "Updated at",
@@ -81,7 +82,9 @@
                 "finesHandedOut": "Successfully handed out fines.",
                 "payoutCreated": "Successfully created payout.",
                 "invoiceDeleted": "Successfully deleted invoice.",
+                "invoiceCreated": "Successfully created invoice.",
                 "invoiceUpdated": "Successfully updated invoice.",
+                "invoiceAmountUpdated": "Successfully updated invoice amount.",
                 "pointOfSaleDeleted": "Successfully deleted POS.",
                 "pointOfSaleUpdated": "Successfully updated POS.",
                 "pointOfSaleCreated": "Successfully created POS.",

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

@@ -26,6 +26,7 @@
       "invoice": {
         "title": "Invoice overview",
         "invoice": "Invoice",
+        "transfer": "Transfer amount",
         "credit": "Credit invoice",
         "delete": "Delete invoice",
         "confirmDelete": "Are you sure you want to delete this invoice?",
@@ -35,7 +36,18 @@
         "recompile": "Recompile",
         "reload": "Reload",
         "missingPdf": "PDF is missing or generation failed",
-        "deleted": "Invoice has been deleted."
+        "deleted": "Invoice has been deleted.",
+        "dirty": "Invoice amount does not match transfer amount.",
+        "total": "The current total on the invoice is {total}",
+        "for": "Invoice for",
+        "create": {
+          "create": "Create Invoice",
+          "userBalance": "Selected users' balance",
+          "invocieAmount": "Proposed invoice amount",
+          "balanceAfter": "Balance after invoice",
+          "pos": "Points of sale included in the invoice:",
+          "warning": "Make sure to check the invoice before creating it."
+        }
       },
       "payout": {
         "title": "Payout overview",

apps/dashboard/src/locales/nl/common/common.json

@@ -37,6 +37,7 @@
         "cancel": "Annuleren",
         "delete": "Verwijderen",
         "owner": "Eigenaar",
+        "na": "N/A",
         "back": "Terug",
         "signOut": "Uitloggen",
         "createdAt": "Aangemaakt op",
@@ -81,7 +82,9 @@
                 "finesHandedOut": "Boetes succesvol uitgedeeld.",
                 "payoutCreated": "Uitbetaling succesvol aangemaakt.",
                 "invoiceDeleted": "Factuur succesvol verwijderd.",
+                "invoiceCreated": "Factuur succesvol aangemaakt.",
                 "invoiceUpdated": "Factuur succesvol bijgewerkt.",
+                "invoiceAmountUpdated": "Factuurbedrag succesvol bijgewerkt.",
                 "pointOfSaleDeleted": "POS succesvol verwijderd.",
                 "pointOfSaleUpdated": "POS succesvol bijgewerkt.",
                 "pointOfSaleCreated": "POS succesvol aangemaakt.",

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

@@ -26,6 +26,7 @@
       "invoice": {
         "title": "Factuuroverzicht",
         "invoice": "Factuur",
+        "transfer": "Overboeking",
         "credit": "Creditfactuur",
         "delete": "Factuur verwijderen",
         "confirmDelete": "Weet je zeker dat je deze factuur wilt verwijderen?",
@@ -35,7 +36,18 @@
         "recompile": "Opnieuw samenstellen",
         "reload": "Opnieuw laden",
         "missingPdf": "PDF ontbreekt of genereren is mislukt",
-        "deleted": "Factuur is verwijderd."
+        "deleted": "Factuur is verwijderd.",
+        "dirty": "De factuurbedrag komt niet overeen met de overboeking.",
+        "total": "Het huidige totaal op de factuur is {total}",
+        "for": "Invoice for",
+        "create": {
+          "create": "Factuur aanmaken",
+          "userBalance": "Geselecteerde gebruikers saldo",
+          "invocieAmount": "Voorgestelde factuurbedrag",
+          "balanceAfter": "Saldo na factuur",
+          "pos": "POS's die in de factuur zijn opgenomen:",
+          "warning": "Controleer de factuur voordat je deze aanmaakt."
+        }
       },
       "payout": {
         "title": "Uitbetalingsoverzicht",

apps/dashboard/src/main.ts

@@ -25,14 +25,11 @@ import FileUpload from "primevue/fileupload";
 import Tooltip from 'primevue/tooltip';
 import SelectButton from "primevue/selectbutton";
 import 'primeflex/primeflex.css';
-import { clearTokenInStorage, populateStoresFromToken, useAuthStore } from "@sudosos/sudosos-frontend-common";
 import ToastService from "primevue/toastservice";
 import Toast from "primevue/toast";
 import 'primeflex/primeflex.css';
-import 'primeicons/primeicons.css'; // Import PrimeIcons
-
+import 'primeicons/primeicons.css';
 import 'primeflex/primeflex.css';
-import apiService from './services/ApiService';
 import Accordion from "primevue/accordion";
 import Skeleton from "primevue/skeleton";
 import IconField from "primevue/iconfield";
@@ -68,7 +65,6 @@ app.component('DataTable', DataTable);
 app.component('DataView', DataView);
 app.component('InputNumber', InputNumber);
 app.component('Dialog', Dialog);
-app.component('Divider', Divider);
 app.component('Dropdown', Dropdown);
 app.component('Checkbox', Checkbox);
 app.component('TabView', TabView);
@@ -86,6 +82,7 @@ app.component('ToggleButton', ToggleButton);
 app.component('Steps', Steps);
 app.component('Calendar', Calendar);
 app.component('ConfirmDialog', ConfirmDialog);
+app.component('Divider', Divider);
 
 beforeLoad().then(() => {
   app.mount('#app');

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";

apps/dashboard/src/modules/financial/components/invoice/InvoiceAmountCard.vue

@@ -0,0 +1,62 @@
+<template>
+  <FormCard :header="t('modules.financial.invoice.transfer')" v-if="invoice" @cancel="form.context.resetForm"
+            @update:modelValue="edit = $event" @save="formSubmit" :enableEdit="!deleted">
+    <div class="flex flex-column justify-content-between gap-2">
+      <InvoiceAmountForm :invoice="invoice" :form="form" :edit="edit" @update:edit="edit = $event"/>
+    </div>
+  </FormCard>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeMount, ref, watch } from "vue";
+import type { InvoiceResponse } from "@sudosos/sudosos-client";
+import { updateInvoiceAmountObject } from "@/utils/validation-schema";
+import { schemaToForm } from "@/utils/formUtils";
+import { InvoiceStatusResponseStateEnum } from "@sudosos/sudosos-client/src/api";
+import { useInvoiceStore } from "@/stores/invoice.store";
+import { useI18n } from "vue-i18n";
+import InvoiceAmountForm from "@/modules/financial/components/invoice/forms/InvoiceAmountForm.vue";
+import FormCard from "@/components/FormCard.vue";
+
+const { t } = useI18n();
+
+const edit = ref(false);
+const invoiceStore = useInvoiceStore();
+const deleted = computed(() => invoice.value.currentState.state === InvoiceStatusResponseStateEnum.Deleted);
+const invoice = computed(() => invoiceStore.getInvoice(props.invoiceId) as InvoiceResponse);
+
+const props = defineProps({
+  invoiceId: {
+    type: Number,
+    required: true
+  }
+});
+
+const form = schemaToForm(updateInvoiceAmountObject);
+
+const formSubmit = () => {
+  form.submit();
+};
+
+const updateFieldValues = (p: InvoiceResponse) => {
+  if (!p || !p.transfer) return;
+  const values = {
+    amount: p.transfer.amountInclVat.amount / 100,
+  };
+  form.context.resetForm({ values });
+};
+
+watch(() => invoice.value, (newValue) => {
+  updateFieldValues(newValue);
+});
+
+onBeforeMount(() => {
+  if (invoice.value) {
+    updateFieldValues(invoice.value);
+  }
+});
+</script>
+
+<style scoped lang="scss">
+
+</style>