Complete dashboard translations & small UI improvements (#69)

* fix dropdown action Estimate Dashboard and fix translating full Dasboard page

* Update app.php

* fix locale in app.php config

* Wizard install with translation, customer portal with translation, and fixing hardcoding strings to get translation

* fixes asked to review

* fixes pint

---------

Co-authored-by: Max <contact@agencetwogether.fr>
Co-authored-by: Darko Gjorgjijoski <5760249+gdarko@users.noreply.github.com>

resources/scripts/customer/layouts/partials/TheSiteHeader.vue

@@ -38,7 +38,7 @@
                 'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
               ]"
             >
-              {{ item.title }}
+              {{ $t(item.title) }}
             </router-link>
           </div>
         </div>
@@ -141,7 +141,7 @@
             'block pl-3 pr-4 py-2 border-l-4 text-base font-medium',
           ]"
           :aria-current="item.current ? 'page' : undefined"
-          >{{ item.title }}
+          >{{ $t(item.title) }}
         </router-link>
       </div>
       <div class="pt-4 pb-3 border-t border-gray-200">
@@ -185,7 +185,7 @@
                 : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800',
               'block pl-3 pr-4 py-2 border-l-4 text-base font-medium',
             ]"
-            >{{ item.title }}</router-link
+            >{{ $t(item.title) }}</router-link
           >
         </div>
       </div>

resources/scripts/customer/stores/global.js

@@ -2,6 +2,7 @@ import { handleError } from '@/scripts/customer/helpers/error-handling'
 import { useUserStore } from './user'
 const { defineStore } = window.pinia
 import axios from 'axios'
+const { global } = window.i18n
 export const useGlobalStore = defineStore({
   id: 'CustomerPortalGlobalStore',
   state: () => ({
@@ -29,7 +30,12 @@ export const useGlobalStore = defineStore({
             this.currency = response.data.data.currency
             this.enabledModules = response.data.meta.modules
             Object.assign(userStore.userForm, response.data.data)
-            window.i18n.locale = response.data.default_language
+
+            if(typeof global.locale !== 'string') {
+              global.locale.value =
+                response.data.meta.current_company_language || 'en'
+            }
+
             this.isAppLoaded = true
             resolve(response)
           })

resources/scripts/customer/views/dashboard/DashboardStats.vue

@@ -19,7 +19,7 @@
       :icon-component="InvoiceIcon"
       :loading="!globalStore.getDashboardDataLoaded"
       :route="{ name: 'invoices.dashboard' }"
-      :label="$t('dashboard.cards.invoices')"
+      :label="(dashboardStore.invoiceCount <= 1 ? $t('dashboard.cards.invoices', 1) : $t('dashboard.cards.invoices', 2))"
     >
       {{ dashboardStore.invoiceCount }}
     </DashboardStatsItem>
@@ -29,7 +29,7 @@
       :icon-component="EstimateIcon"
       :loading="!globalStore.getDashboardDataLoaded"
       :route="{ name: 'estimates.dashboard' }"
-      :label="$t('dashboard.cards.estimates')"
+      :label="(dashboardStore.estimateCount <= 1 ? $t('dashboard.cards.estimates', 1) : $t('dashboard.cards.estimates', 2))"
     >
       {{ dashboardStore.estimateCount }}
     </DashboardStatsItem>
@@ -40,7 +40,7 @@
       :icon-component="PaymentIcon"
       :loading="!globalStore.getDashboardDataLoaded"
       :route="{ name: 'payments.dashboard' }"
-      :label="$t('dashboard.cards.payments')"
+      :label="(dashboardStore.paymentCount <= 1 ? $t('dashboard.cards.payments', 1 ) : $t('dashboard.cards.payments', 2))"
     >
       {{ dashboardStore.paymentCount }}
     </DashboardStatsItem>

resources/scripts/customer/views/dashboard/DashboardTable.vue

@@ -34,7 +34,7 @@
 
         <template #cell-paid_status="{ row }">
           <BasePaidStatusBadge :status="row.data.paid_status">
-            {{ row.data.paid_status }}
+            <BaseInvoiceStatusLabel :status="row.data.paid_status" />
           </BasePaidStatusBadge>
         </template>
 
@@ -80,7 +80,7 @@
         </template>
         <template #cell-status="{ row }">
           <BaseEstimateStatusBadge :status="row.data.status" class="px-3 py-1">
-            {{ row.data.status }}
+            <BaseEstimateStatusLabel :status="row.data.status" />
           </BaseEstimateStatusBadge>
         </template>
         <template #cell-total="{ row }">

resources/scripts/customer/views/estimates/Index.vue

@@ -108,7 +108,7 @@
 
         <template #cell-status="{ row }">
           <BaseEstimateStatusBadge :status="row.data.status" class="px-3 py-1">
-            {{ row.data.status }}
+            <BaseEstimateStatusLabel :status="row.data.status" />
           </BaseEstimateStatusBadge>
         </template>
 
@@ -156,12 +156,12 @@ let showFilters = ref(false)
 let isFetchingInitialData = ref(true)
 
 const status = ref([
-  'DRAFT',
-  'SENT',
-  'VIEWED',
-  'EXPIRED',
-  'ACCEPTED',
-  'REJECTED',
+  {label: t('estimates.draft'), value: 'DRAFT'},
+  {label: t('estimates.sent'), value: 'SENT'},
+  {label: t('estimates.viewed'), value: 'VIEWED'},
+  {label: t('estimates.expired'), value: 'EXPIRED'},
+  {label: t('estimates.accepted'), value: 'ACCEPTED'},
+  {label: t('estimates.rejected'), value: 'REJECTED'},
 ])
 const filters = reactive({
   status: '',
@@ -240,7 +240,7 @@ function toggleFilter() {
 
 async function fetchData({ page, sort }) {
   let data = {
-    status: filters.status,
+    status: filters.status.value,
     estimate_number: filters.estimate_number,
     from_date: filters.from_date,
     to_date: filters.to_date,

resources/scripts/customer/views/estimates/View.vue

@@ -170,7 +170,7 @@
             </div>
 
             <BaseEstimateStatusBadge :status="estimate.status">
-              {{ estimate.status }}
+              <BaseEstimateStatusLabel :status="estimate.status" />
             </BaseEstimateStatusBadge>
           </div>
 

resources/scripts/customer/views/invoices/Index.vue

@@ -110,7 +110,7 @@
 
         <template #cell-status="{ row }">
           <BaseInvoiceStatusBadge :status="row.data.status" class="px-3 py-1">
-            {{ row.data.status }}
+            <BaseInvoiceStatusLabel :status="row.data.status" />
           </BaseInvoiceStatusBadge>
         </template>
 
@@ -119,7 +119,7 @@
             :status="row.data.paid_status"
             class="px-3 py-1"
           >
-            {{ row.data.paid_status }}
+            <BaseInvoiceStatusLabel :status="row.data.paid_status" />
           </BaseInvoiceStatusBadge>
         </template>
 
@@ -160,7 +160,13 @@ const route = useRoute()
 const table = ref(null)
 let isFetchingInitialData = ref(true)
 let showFilters = ref(false)
-const status = ref(['DRAFT', 'DUE', 'SENT', 'VIEWED', 'COMPLETED'])
+const status = ref([
+  {label: t('general.draft'), value: 'DRAFT'},
+  {label: t('general.due'), value: 'DUE'},
+  {label: t('general.sent'), value: 'SENT'},
+  {label: t('invoices.viewed'), value: 'VIEWED'},
+  {label: t('invoices.completed'), value: 'COMPLETED'}
+])
 const filters = reactive({
   status: '',
   from_date: '',
@@ -247,7 +253,7 @@ function toggleFilter() {
 
 async function fetchData({ page, sort }) {
   let data = {
-    status: filters.status,
+    status: filters.status.value,
     invoice_number: filters.invoice_number,
     from_date: filters.from_date,
     to_date: filters.to_date,

resources/scripts/customer/views/invoices/View.vue

@@ -175,7 +175,7 @@
               {{ invoice.invoice_number }}
             </div>
             <BaseInvoiceStatusBadge :status="invoice.status">
-              {{ invoice.status }}
+              <BaseInvoiceStatusLabel :status="invoice.status" />
             </BaseInvoiceStatusBadge>
           </div>