feat(dashboard/invoice): added localisation to invoiceusertable and invoicecreatemodal

Author: CodeNamedRobin

apps/dashboard/src/locales/en.json

@@ -263,7 +263,8 @@
     "payoutCreated": "Successfully created payout.",
     "payoutDeleted": "Successfully deleted payout.",
     "payoutApproved": "Successfully approved payout.",
-    "payoutDenied": "Successfully denied payout."
+    "payoutDenied": "Successfully denied payout.",
+    "invoiceCreated": "Successfully created invoice."
   },
   "termsOfService": {
     "acceptFirst": "Accept the Terms of Service",
@@ -377,7 +378,12 @@
     "AreYouSure": "Are you sure you want to delete this invoice?",
     "CreditNoteWarning": "This will not create a credit note.",
     "Unrecoverable": "This deletes the invoice and cannot be undone.",
-    "Credit": "Credit Invoice"
+    "Credit": "Credit Invoice",
+    "InvoiceUsers": "Invoice Users",
+    "Name": "Name",
+    "Balance": "Balance",
+    "CreateInvoice": "Create Invoice",
+    "isCreditInvoice": "Is credit invoice"
   },
   "pdf": {
     "Table": "Table",

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

@@ -1,15 +1,15 @@
 <template>
-  <CardComponent header="Invoice Users" class="w-5">
+  <CardComponent :header="$t('c_invoiceInfo.InvoiceUsers')" class="w-5">
     <DataTable
         :value="invoiceableUsersWithBalance"
     >
-      <Column field="user.id" header="ID"/>
-      <Column header="Name" field="user.firstName">
+      <Column field="user.id" :header="$t('c_invoiceInfo.id')"/>
+      <Column :header="$t('c_invoiceInfo.Name')" field="user.firstName">
         <template #body="slotProps">
           {{ `${slotProps.data.user.firstName} ${slotProps.data.user.lastName}` }}
         </template>
       </Column>
-      <Column field="balance.amount" header="Balance">
+      <Column field="balance.amount" :header="$t('c_invoiceInfo.Balance')">
         <template #body="slotProps">
           {{ formatPrice(slotProps.data.balance.amount) }}
         </template>
@@ -35,7 +35,7 @@
 
     </DataTable>
   </CardComponent>
-  <FormDialog v-model="showDialog" :form="form" :header="$t('invoice.Create invoice')">
+  <FormDialog v-model="showDialog" :form="form" :header="$t('invoice.CreateInvoice')">
     <template #form="slotProps">
       <InvoiceCreateForm :form="slotProps.form" @submit:success="showDialog = false"/>
     </template>
@@ -61,7 +61,6 @@ interface InvoiceableUserWithBalance {
   balance: BalanceResponse;
 }
 
-const authStore = useAuthStore();
 const userStore = useUserStore();
 const invoiceableUsers: Ref<UserResponse[]> = ref([]);
 const balances: Ref<BalanceResponse[]> = ref([]);

apps/dashboard/src/modules/financial/components/invoice/forms/InvoiceCreateForm.vue

@@ -2,61 +2,61 @@
   <span class="text-gray-700">{{ `Creating invoice for ${form.model.for.value.value.firstName} ${form.model.for.value.value.lastName} as ` }}</span>
   <UserLink :user="form.model.by.value.value"/>
   <div class="flex flex-column justify-content-between gap-2">
-    <InputSpan :label="$t('invoice.Description')"
+    <InputSpan :label="$t('c_invoiceInfo.Description')"
                :value="form.model.description.value.value"
                :attributes="form.model.description.attr.value"
                @update:value="form.context.setFieldValue('description', $event)"
                :errors="form.context.errors.value.description"
                id="description" placeholder="Invoice Description" type="textarea"/>
-    <InputSpan :label="$t('invoice.Reference')"
+    <InputSpan :label="$t('c_invoiceInfo.Reference')"
                :value="form.model.reference.value.value"
                :attributes="form.model.reference.attr.value"
                @update:value="form.context.setFieldValue('reference', $event)"
                :errors="form.context.errors.value.reference"
                id="reference" placeholder="Invoice Reference" type="text"/>
-    <InputSpan :label="$t('invoice.Date')"
+    <InputSpan :label="$t('c_invoiceInfo.Date')"
                :value="form.model.date.value.value"
                :attributes="form.model.date.attr.value"
                @update:value="form.context.setFieldValue('date', $event)"
                :errors="form.context.errors.value.date"
                id="date" placeholder="Invoice Date" type="date"/>
-    <InputSpan :label="$t('invoice.Addressee')"
+    <InputSpan :label="$t('c_invoiceInfo.Addressee')"
                :value="form.model.addressee.value.value"
                :attributes="form.model.addressee.attr.value"
                @update:value="form.context.setFieldValue('addressee', $event)"
                :errors="form.context.errors.value.addressee"
                id="addressee" placeholder="Addressee" type="text"/>
-    <InputSpan :label="$t('invoice.Attention')"
+    <InputSpan :label="$t('c_invoiceInfo.Attention')"
                :value="form.model.attention.value.value"
                :attributes="form.model.attention.attr.value"
                @update:value="form.context.setFieldValue('attention', $event)"
                :errors="form.context.errors.value.attention"
                id="attention" placeholder="Attention" type="text"/>
-    <InputSpan :label="$t('invoice.Street')"
+    <InputSpan :label="$t('c_invoiceInfo.Street')"
                :value="form.model.street.value.value"
                :attributes="form.model.street.attr.value"
                @update:value="form.context.setFieldValue('street', $event)"
                :errors="form.context.errors.value.street"
                id="street" placeholder="Street" type="text"/>
-    <InputSpan :label="$t('invoice.Postal code')"
+    <InputSpan :label="$t('c_invoiceInfo.Postal code')"
                :value="form.model.postalCode.value.value"
                :attributes="form.model.postalCode.attr.value"
                @update:value="form.context.setFieldValue('postalCode', $event)"
                :errors="form.context.errors.value.postalCode"
                id="postalCode" placeholder="Postal code" type="text"/>
-    <InputSpan :label="$t('invoice.City')"
+    <InputSpan :label="$t('c_invoiceInfo.City')"
                :value="form.model.city.value.value"
                :attributes="form.model.city.attr.value"
                @update:value="form.context.setFieldValue('city', $event)"
                :errors="form.context.errors.value.city"
                id="city" placeholder="City" type="text"/>
-    <InputSpan :label="$t('invoice.Country')"
+    <InputSpan :label="$t('c_invoiceInfo.Country')"
                :value="form.model.country.value.value"
                :attributes="form.model.country.attr.value"
                @update:value="form.context.setFieldValue('country', $event)"
                :errors="form.context.errors.value.country"
                id="country" placeholder="Country" type="text"/>
-    <InputSpan :label="$t('invoice.Is credit invoice')"
+    <InputSpan :label="$t('c_invoiceInfo.IsCreditInvoice')"
                :value="form.model.isCreditInvoice.value.value"
                :attributes="form.model.isCreditInvoice.attr.value"
                @update:value="form.context.setFieldValue('isCreditInvoice', $event)"