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/components/base/BaseDatePicker.vue

@@ -49,8 +49,39 @@
 <script type="text/babel" setup>
 import FlatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
+import { Arabic } from 'flatpickr/dist/l10n/ar.js'
+import { Czech } from 'flatpickr/dist/l10n/cs.js'
+import { German } from 'flatpickr/dist/l10n/de.js'
+import { Greek } from 'flatpickr/dist/l10n/gr.js'
+import { english } from 'flatpickr/dist/l10n/default.js'
+import { Spanish } from 'flatpickr/dist/l10n/es.js'
+import { Persian } from 'flatpickr/dist/l10n/fa.js'
+import { Finnish } from 'flatpickr/dist/l10n/fi.js'
+import { French } from 'flatpickr/dist/l10n/fr.js'
+import { Hindi } from 'flatpickr/dist/l10n/hi.js'
+import { Croatian } from 'flatpickr/dist/l10n/hr.js'
+import { Indonesian } from 'flatpickr/dist/l10n/id.js'
+import { Italian } from 'flatpickr/dist/l10n/it.js'
+import { Japanese } from 'flatpickr/dist/l10n/ja.js'
+import { Korean } from 'flatpickr/dist/l10n/ko.js'
+import { Lithuanian } from 'flatpickr/dist/l10n/lt.js'
+import { Latvian } from 'flatpickr/dist/l10n/lv.js'
+import { Dutch } from 'flatpickr/dist/l10n/nl.js'
+import { Polish } from 'flatpickr/dist/l10n/pl.js'
+import { Portuguese } from 'flatpickr/dist/l10n/pt.js'
+import { Romanian } from 'flatpickr/dist/l10n/ro.js'
+import { Russian } from 'flatpickr/dist/l10n/ru.js'
+import { Slovak } from 'flatpickr/dist/l10n/sk.js'
+import { Slovenian } from 'flatpickr/dist/l10n/sl.js'
+import { Serbian } from 'flatpickr/dist/l10n/sr.js'
+import { Swedish } from 'flatpickr/dist/l10n/sv.js'
+import { Thai } from 'flatpickr/dist/l10n/th.js'
+import { Turkish } from 'flatpickr/dist/l10n/tr.js'
+import { Vietnamese } from 'flatpickr/dist/l10n/vn.js'
+import { Mandarin } from 'flatpickr/dist/l10n/zh.js'
 import { computed, reactive, watch, ref, useSlots } from 'vue'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
+import { useUserStore } from '@/scripts/admin/stores/user'
 
 const dp = ref(null)
 
@@ -104,10 +135,112 @@ const slots = useSlots()
 
 const companyStore = useCompanyStore()
 
+const userStore = useUserStore()
+
+//Localize Flatpicker stuff
+const lang = userStore.currentUserSettings.language
+let fpLocale = null
+switch(lang){
+  case 'ar':
+    fpLocale = Arabic;
+    break;
+  case 'cs':
+    fpLocale = Czech;
+    break;
+  case 'de':
+    fpLocale = German;
+    break;
+  case 'el':
+    fpLocale = Greek;
+    break;
+  case 'en':
+    fpLocale = english;
+    break;
+  case 'es':
+    fpLocale = Spanish;
+    break;
+  case 'fa':
+    fpLocale = Persian;
+    break;
+  case 'fi':
+    fpLocale = Finnish;
+    break;
+  case 'fr':
+    fpLocale = French;
+    break;
+  case 'hi':
+    fpLocale = Hindi;
+    break;
+  case 'hr':
+    fpLocale = Croatian;
+    break;
+  case 'id':
+    fpLocale = Indonesian;
+    break;
+  case 'it':
+    fpLocale = Italian;
+    break;
+  case 'ja':
+    fpLocale = Japanese;
+    break;
+  case 'ko':
+    fpLocale = Korean;
+    break;
+  case 'lt':
+    fpLocale = Lithuanian;
+    break;
+  case 'lv':
+    fpLocale = Latvian;
+    break;
+  case 'nl':
+    fpLocale = Dutch;
+    break;
+  case 'pl':
+    fpLocale = Polish;
+    break;
+  case 'pt':
+  case 'pt_BR':
+    fpLocale = Portuguese;
+    break;
+  case 'ro':
+    fpLocale = Romanian;
+    break;
+  case 'ru':
+    fpLocale = Russian;
+    break;
+  case 'sk':
+    fpLocale = Slovak;
+    break;
+  case 'sl':
+    fpLocale = Slovenian;
+    break;
+  case 'sr':
+    fpLocale = Serbian;
+    break;
+  case 'sv':
+    fpLocale = Swedish;
+    break;
+  case 'th':
+    fpLocale = Thai;
+    break;
+  case 'tr':
+    fpLocale = Turkish;
+    break;
+  case 'vi':
+    fpLocale = Vietnamese;
+    break;
+  case 'zh':
+    fpLocale = Mandarin;
+    break;
+  default:
+    fpLocale = english;
+}
+
 let config = reactive({
   altInput: true,
   enableTime: props.enableTime,
   time_24hr: props.time24hr,
+  locale: fpLocale
 })
 
 const date = computed({

resources/scripts/components/base/BaseEstimateStatusLabel.vue

@@ -0,0 +1,39 @@
+<template>
+  {{ labelStatus }}
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const props = defineProps({
+  status: {
+    type: String,
+    required: false,
+    default: '',
+  },
+})
+
+const labelStatus = computed(() => {
+  switch (props.status) {
+    case 'DRAFT':
+      return t('estimates.draft')
+    case 'SENT':
+      return t('estimates.sent')
+    case 'VIEWED':
+      return t('estimates.viewed')
+    case 'EXPIRED':
+      return t('estimates.expired')
+    case 'ACCEPTED':
+      return t('estimates.accepted')
+    case 'REJECTED':
+      return t('estimates.rejected')
+    case 'DECLINED':
+      return t('estimates.declined')
+    default:
+      return props.status
+  }
+})
+</script>

resources/scripts/components/base/BaseFileUploader.vue

@@ -71,7 +71,7 @@
         class="h-6 mb-2 text-xl leading-6 text-gray-400"
       />
       <p class="text-xs leading-4 text-center text-gray-400">
-        Drag a file here or
+        {{ $t('general.file_upload.drag_a_file') }}
         <a
           class="
             cursor-pointer
@@ -83,9 +83,9 @@
           href="#"
           @click.prevent.stop="onBrowse"
         >
-          browse
+          {{ $t('general.file_upload.browse') }}
         </a>
-        to choose a file
+        {{ $t('general.file_upload.to_choose') }}
       </p>
       <p class="text-xs leading-4 text-center text-gray-400 mt-2">
         {{ recommendedText }}

resources/scripts/components/base/BaseInvoiceStatusLabel.vue

@@ -0,0 +1,43 @@
+<template>
+  {{ labelStatus }}
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const props = defineProps({
+  status: {
+    type: String,
+    required: false,
+    default: '',
+  },
+})
+
+const labelStatus = computed(() => {
+  switch (props.status) {
+    case 'DRAFT':
+      return t('general.draft')
+    case 'SENT':
+      return t('general.sent')
+    case 'VIEWED':
+      return t('invoices.viewed')
+    case 'COMPLETED':
+      return t('invoices.completed')
+    case 'DUE':
+      return t('general.due')
+    case 'OVERDUE':
+      return t('invoices.overdue')
+    case 'UNPAID':
+      return t('invoices.unpaid')
+    case 'PARTIALLY_PAID':
+      return t('invoices.partially_paid')
+    case 'PAID':
+      return t('invoices.paid')
+    default:
+      return props.status
+  }
+})
+</script>

resources/scripts/components/base/BaseRecurringInvoiceStatusLabel.vue

@@ -0,0 +1,31 @@
+<template>
+  {{ labelStatus }}
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const props = defineProps({
+  status: {
+    type: String,
+    required: false,
+    default: '',
+  },
+})
+
+const labelStatus = computed(() => {
+  switch (props.status) {
+    case 'COMPLETED':
+      return t('recurring_invoices.complete')
+    case 'ON_HOLD':
+      return t('recurring_invoices.on_hold')
+    case 'ACTIVE':
+      return t('recurring_invoices.active')
+    default:
+      return props.status
+  }
+})
+</script>

resources/scripts/components/base/base-table/BaseTable.vue

@@ -128,7 +128,7 @@
               class="w-6 h-6 text-gray-400"
             />
 
-            <span class="block mt-1">{{ noResultsMessage }}</span>
+            <span class="block mt-1">{{ $t('general.no_data_found') }}</span>
           </div>
 
           <BaseTablePagination

resources/scripts/components/base/base-table/BaseTablePagination.vue

@@ -35,7 +35,7 @@
         "
         @click="pageClicked(pagination.currentPage - 1)"
       >
-        Previous
+        {{ $t('general.pagination.previous') }}
       </a>
       <a
         href="#"
@@ -60,13 +60,13 @@
         "
         @click="pageClicked(pagination.currentPage + 1)"
       >
-        Next
+        {{ $t('general.pagination.next') }}
       </a>
     </div>
     <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
       <div>
         <p class="text-sm text-gray-700">
-          Showing
+          {{ $t('general.pagination.showing') }}
           {{ ' ' }}
           <span
             v-if="pagination.limit && pagination.currentPage"
@@ -77,7 +77,7 @@
             }}
           </span>
           {{ ' ' }}
-          to
+          {{ $t('general.pagination.to') }}
           {{ ' ' }}
           <span
             v-if="pagination.limit && pagination.currentPage"
@@ -96,13 +96,13 @@
             </span>
           </span>
           {{ ' ' }}
-          of
+          {{ $t('general.pagination.of') }}
           {{ ' ' }}
           <span v-if="pagination.totalCount" class="font-medium">
             {{ pagination.totalCount }}
           </span>
           {{ ' ' }}
-          results
+          {{ $t('general.pagination.results') }}
         </p>
       </div>
       <div>