added localizations

src/api/fetch-wrapper.js

@@ -79,3 +79,8 @@ async function handleResponse(response) {
 
   return data;
 }
+
+// {
+
+
+// }

src/assets/css/components/_global.css

@@ -1,20 +1,20 @@
 html {
-    @apply bg-primary;
+  @apply bg-primary;
-    &.dark {
+  &.dark {
-        @apply bg-darkmode-800;
+    @apply bg-darkmode-800;
-        body {
-            @apply text-slate-300;
-            *,
-            ::before,
-            ::after {
-                @apply border-white/5;
-            }
-        }
-    }
     body {
-        @apply antialiased overflow-x-hidden pt-3 px-8 font-roboto text-sm text-slate-800;
+      @apply text-slate-300;
-        @include media-breakpoint-down(sm) {
+      *,
-            @apply px-3;
+      ::before,
-        }
+      ::after {
+        @apply border-white/5;
+      }
     }
+  }
+  body {
+    @apply antialiased overflow-x-hidden pt-3 px-8 font-roboto text-sm text-black;
+    @include media-breakpoint-down(sm) {
+      @apply px-3;
+    }
+  }
 }

src/i18n/en.js

@@ -9,8 +9,9 @@ export const locale = {
   SUPPORT: "Support",
   FILE_MAX_SIZE: "File max size is {size} Kb.",
   FILE_ALLOWED_TYPES: "File type must be {file_types}.",
-  APPLICATION_PROCESS_DESCRIPTION: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever. When an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. To download the questionnaire, please {0}.",
+  APPLICATION_PROCESS_DESCRIPTION:
-  QUESTIONNAIRE_LINK: 'download this file',
+    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever. When an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. To download the questionnaire, please {0}.",
+  QUESTIONNAIRE_LINK: "download this file",
   STATUS: "Status",
   TICKET_LIST: "Ticket list",
   NEW_TICKET_FORM: "New Ticket Form",
@@ -48,4 +49,48 @@ export const locale = {
   ACCOUNT_TYPE: "Account type",
   ACCOUNT_TYPE_BUSINESS: "Business",
   ACCOUNT_TYPE_COMPANY: "Company",
+
+  PROFILE: "Profile",
+
+  SURNAME: "Surname",
+  NAME: "Name",
+  SHORT_NAME: "Short Name",
+  DOB: "Date of Birth",
+  POB: "Place of Birth",
+  PNAME: "Patronymic name",
+  CITIZENSHIP: "Citizenship",
+  REG_ADDR: "Registration address",
+  REG_NUMBER: "Registration number",
+  REG_DATE: "Registration date",
+  REG_AGENCY: "State registration agency",
+  REG_PLACE: "Registration place",
+  ENT_FORM: "Entrepreneur Form",
+  COMP_FORM: "Company Form",
+  SELECT_CITIZENSHIP: "Select citizenship",
+
+  BANK: "Bank",
+  BANK_FORM: "Bank Form",
+  BANK_NAME: "Bank Name",
+  COUNTRY: "Country",
+  ACC_NUMBER: "Account number",
+  ACC_DATE: "Account date",
+  CURRENCY: "Currency",
+  IBAN: "IBAN",
+
+  CONTACTS: "Contacts",
+  CONTACTS_FORM: "Contacts Form",
+  ADDRESS: "Address",
+  PHONE: "Phone",
+  FAX: "Fax",
+
+  LEGALIZATION: "Legalization",
+  LEG_NUM: "Legalization number",
+  EXP_DATE: "Expiration date",
+  LEG_BTN_NULL: "Create New Application",
+  LEG_BTN_NEW: "Apply Form",
+  LEG_BTN_APPLIED: "Approve Form",
+  LEG_BTN_APPROVED: "Approved",
+
+  REGISTER: "Register",
+  EDIT: "Edit",
 };

src/i18n/ru.js

@@ -9,8 +9,9 @@ export const locale = {
   SUPPORT: "Поддержка",
   FILE_MAX_SIZE: "Максимальный размер файла {size} Kb.",
   FILE_ALLOWED_TYPES: "Тип файла должен быть {file_types}.",
-  APPLICATION_PROCESS_DESCRIPTION: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever. When an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. To download the questionnaire, please {0}.",
+  APPLICATION_PROCESS_DESCRIPTION:
-  QUESTIONNAIRE_LINK: 'download this file',
+    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever. When an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. To download the questionnaire, please {0}.",
+  QUESTIONNAIRE_LINK: "download this file",
   STATUS: "Статус",
   TICKET_LIST: "Ticket list",
   NEW_TICKET_FORM: "New Ticket Form",
@@ -48,4 +49,48 @@ export const locale = {
   ACCOUNT_TYPE: "Account type",
   ACCOUNT_TYPE_BUSINESS: "Business",
   ACCOUNT_TYPE_COMPANY: "Company",
+
+  PROFILE: "Profile",
+
+  SURNAME: "Surname",
+  NAME: "Name",
+  SHORT_NAME: "Short Name",
+  DOB: "Date of Birth",
+  POB: "Place of Birth",
+  PNAME: "Patronymic name",
+  CITIZENSHIP: "Citizenship",
+  REG_ADDR: "Registration address",
+  REG_NUMBER: "Registration number",
+  REG_DATE: "Registration date",
+  REG_AGENCY: "State registration agency",
+  REG_PLACE: "Registration place",
+  ENT_FORM: "Entrepreneur Form",
+  COMP_FORM: "Company Form",
+  SELECT_CITIZENSHIP: "Select citizenship",
+
+  BANK: "Bank",
+  BANK_FORM: "Bank Form",
+  BANK_NAME: "Bank Name",
+  COUNTRY: "Country",
+  ACC_NUMBER: "Account number",
+  ACC_DATE: "Account date",
+  CURRENCY: "Currency",
+  IBAN: "IBAN",
+
+  CONTACTS: "Contacts",
+  CONTACTS_FORM: "Contacts Form",
+  ADDRESS: "Address",
+  PHONE: "Phone",
+  FAX: "Fax",
+
+  LEGALIZATION: "Legalization",
+  LEG_NUM: "Legalization number",
+  EXP_DATE: "Expiration date",
+  LEG_BTN_NULL: "Create New Application",
+  LEG_BTN_NEW: "Apply Form",
+  LEG_BTN_APPLIED: "Approve Form",
+  LEG_BTN_APPROVED: "Approved",
+
+  REGISTER: "Register",
+  EDIT: "Edit",
 };

src/i18n/tm.js

@@ -9,8 +9,9 @@ export const locale = {
   SUPPORT: "Goldaw",
   FILE_MAX_SIZE: "Faýl {size} Kb-dan uly bolmaly däl.",
   FILE_ALLOWED_TYPES: "Faýlyň görnüşi {file_types} bolmaly.",
-  APPLICATION_PROCESS_DESCRIPTION: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever. When an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. To download the questionnaire, please {0}.",
+  APPLICATION_PROCESS_DESCRIPTION:
-  QUESTIONNAIRE_LINK: 'download this file',
+    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever. When an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. To download the questionnaire, please {0}.",
+  QUESTIONNAIRE_LINK: "download this file",
   STATUS: "Status",
   TICKET_LIST: "Ticket list",
   NEW_TICKET_FORM: "New Ticket Form",
@@ -48,4 +49,48 @@ export const locale = {
   ACCOUNT_TYPE: "Account type",
   ACCOUNT_TYPE_BUSINESS: "Business",
   ACCOUNT_TYPE_COMPANY: "Company",
+
+  PROFILE: "Profile",
+
+  SURNAME: "Surname",
+  NAME: "Name",
+  SHORT_NAME: "Short Name",
+  DOB: "Date of Birth",
+  POB: "Place of Birth",
+  PNAME: "Patronymic name",
+  CITIZENSHIP: "Citizenship",
+  REG_ADDR: "Registration address",
+  REG_NUMBER: "Registration number",
+  REG_DATE: "Registration date",
+  REG_AGENCY: "State registration agency",
+  REG_PLACE: "Registration place",
+  ENT_FORM: "Entrepreneur Form",
+  COMP_FORM: "Company Form",
+  SELECT_CITIZENSHIP: "Select citizenship",
+
+  BANK: "Bank",
+  BANK_FORM: "Bank Form",
+  BANK_NAME: "Bank Name",
+  COUNTRY: "Country",
+  ACC_NUMBER: "Account number",
+  ACC_DATE: "Account date",
+  CURRENCY: "Currency",
+  IBAN: "IBAN",
+
+  CONTACTS: "Contacts",
+  CONTACTS_FORM: "Contacts Form",
+  ADDRESS: "Address",
+  PHONE: "Phone",
+  FAX: "Fax",
+
+  LEGALIZATION: "Legalization",
+  LEG_NUM: "Legalization number",
+  EXP_DATE: "Expiration date",
+  LEG_BTN_NULL: "Create New Application",
+  LEG_BTN_NEW: "Apply Form",
+  LEG_BTN_APPLIED: "Approve Form",
+  LEG_BTN_APPROVED: "Approved",
+
+  REGISTER: "Register",
+  EDIT: "Edit",
 };

src/views/profile-forms/BankAccount.vue

@@ -1,45 +1,30 @@
 <template>
   <div class="intro-y flex items-center mt-8">
-    <h2 class="text-lg font-medium mr-auto">Bank</h2>
+    <h2 class="text-lg font-medium mr-auto">{{$t('BANK')}}</h2>
   </div>
   <div class="grid grid-cols-12 gap-6 mt-5">
     <div class="intro-y col-span-12 lg:col-span-6">
       <!-- BEGIN: Form Validation -->
       <PreviewComponent class="intro-y box">
-        <div
+        <div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
-          class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400"
+          <h2 class="font-medium text-base mr-auto">{{$t('BANK_FORM')}}</h2>
-        >
-          <h2 class="font-medium text-base mr-auto">Bank Form</h2>
         </div>
         <div class="p-5">
           <!-- BEGIN: Validation Form -->
           <form class="validate-form" @submit.prevent="onRegister">
             <!-- Begin Account number -->
             <div class="input-form">
-              <label
+              <label for="validation-form-6" class="form-label w-full flex flex-col sm:flex-row">
-                for="validation-form-6"
+                {{$t('ACC_NUMBER')}}
-                class="form-label w-full flex flex-col sm:flex-row"
+                  <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"><span class="text-red-600">*</span> {{
-              >
+                $t("REQUIRED") }}
-                Account Number
+                </span>
-                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"
-                  >Required, at least 10 characters</span
-                >
               </label>
-              <input
+              <input type="text" id="validation-form-6" v-model.trim="validate.account_number.$model"
-                type="text"
+                class="form-control" :class="{ 'border-danger': validate.account_number.$error }" name="account number"
-                id="validation-form-6"
+                placeholder="Type your account number" />
-                v-model.trim="validate.account_number.$model"
-                class="form-control"
-                :class="{ 'border-danger': validate.account_number.$error }"
-                name="account number"
-                placeholder="Type your account number"
-              />
               <template v-if="validate.account_number.$error">
-                <div
+                <div v-for="(error, index) in validate.account_number.$errors" :key="index" class="text-danger mt-2">
-                  v-for="(error, index) in validate.account_number.$errors"
-                  :key="index"
-                  class="text-danger mt-2"
-                >
                   {{ error.$message }}
                 </div>
               </template>
@@ -48,14 +33,11 @@
 
             <!-- Begin Account Date  -->
             <div class="input-form mt-3">
-              <label
+              <label for="validation-form-2" class="form-label w-full flex flex-col sm:flex-row">
-                for="validation-form-2"
+                {{$t('ACC_DATE')}}
-                class="form-label w-full flex flex-col sm:flex-row"
+                  <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"><span class="text-red-600">*</span> {{
-              >
+                $t("REQUIRED") }}
-                Account Date
+                </span>
-                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"
-                  >Required</span
-                >
               </label>
               <!-- <input
                 id="validation-form-2"
@@ -69,32 +51,23 @@
               <!-- Begin Date picker -->
               <div class="relative mx-auto mt-3">
                 <div
-                  class="absolute rounded-l w-10 h-full flex items-center justify-center bg-slate-100 border text-slate-500 dark:bg-darkmode-700 dark:border-darkmode-800 dark:text-slate-400"
+                  class="absolute rounded-l w-10 h-full flex items-center justify-center bg-slate-100 border text-slate-500 dark:bg-darkmode-700 dark:border-darkmode-800 dark:text-slate-400">
-                >
                   <CalendarIcon class="w-4 h-4" />
                 </div>
-                <Litepicker
+                <Litepicker v-model="date" :options="{
-                  v-model="date"
+                  maxDate: maxDate,
-                  :options="{
+                  format: 'DD.MM.YYYY',
-                    maxDate: maxDate,
+                  dropdowns: {
-                    format: 'DD.MM.YYYY',
+                    minYear: 1990,
-                    dropdowns: {
+                    maxYear: null,
-                      minYear: 1990,
+                    months: true,
-                      maxYear: null,
+                    years: true,
-                      months: true,
+                  },
-                      years: true,
+                }" class="form-control pl-12" />
-                    },
-                  }"
-                  class="form-control pl-12"
-                />
               </div>
               <!-- End Date picker -->
               <template v-if="validate.account_date.$error">
-                <div
+                <div v-for="(error, index) in validate.account_date.$errors" :key="index" class="text-danger mt-2">
-                  v-for="(error, index) in validate.account_date.$errors"
-                  :key="index"
-                  class="text-danger mt-2"
-                >
                   {{ error.$message }}
                 </div>
               </template>
@@ -103,30 +76,16 @@
 
             <!-- Begin Currency -->
             <div class="input-form mt-3">
-              <label
+              <label for="validation-form-4" class="form-label w-full flex flex-col sm:flex-row">
-                for="validation-form-4"
-                class="form-label w-full flex flex-col sm:flex-row"
-              >
                 Currency
-                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"
+                  <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"><span class="text-red-600">*</span> {{
-                  >Required</span
+                $t("REQUIRED") }}
-                >
+                </span>
               </label>
-              <input
+              <input id="validation-form-4" v-model.trim="validate.currency.$model" type="text" name="currency"
-                id="validation-form-4"
+                class="form-control" :class="{ 'border-danger': validate.currency.$error }" placeholder="TMT" />
-                v-model.trim="validate.currency.$model"
-                type="text"
-                name="currency"
-                class="form-control"
-                :class="{ 'border-danger': validate.currency.$error }"
-                placeholder="TMT"
-              />
               <template v-if="validate.currency.$error">
-                <div
+                <div v-for="(error, index) in validate.currency.$errors" :key="index" class="text-danger mt-2">
-                  v-for="(error, index) in validate.currency.$errors"
-                  :key="index"
-                  class="text-danger mt-2"
-                >
                   {{ error.$message }}
                 </div>
               </template>
@@ -135,30 +94,16 @@
 
             <!-- Begin IBAN -->
             <div class="input-form mt-3">
-              <label
+              <label for="validation-form-4" class="form-label w-full flex flex-col sm:flex-row">
-                for="validation-form-4"
+                {{$t('IBAN')}}
-                class="form-label w-full flex flex-col sm:flex-row"
+                  <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"><span class="text-red-600">*</span> {{
-              >
+                $t("REQUIRED") }}
-                IBAN
+                </span>
-                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"
-                  >Required</span
-                >
               </label>
-              <input
+              <input id="validation-form-4" v-model.trim="validate.iban.$model" type="text" name="iban"
-                id="validation-form-4"
+                class="form-control" :class="{ 'border-danger': validate.iban.$error }" placeholder="TTMK" />
-                v-model.trim="validate.iban.$model"
-                type="text"
-                name="iban"
-                class="form-control"
-                :class="{ 'border-danger': validate.iban.$error }"
-                placeholder="TTMK"
-              />
               <template v-if="validate.iban.$error">
-                <div
+                <div v-for="(error, index) in validate.iban.$errors" :key="index" class="text-danger mt-2">
-                  v-for="(error, index) in validate.iban.$errors"
-                  :key="index"
-                  class="text-danger mt-2"
-                >
                   {{ error.$message }}
                 </div>
               </template>
@@ -167,30 +112,17 @@
 
             <!-- Begin Bank Name -->
             <div class="input-form mt-3">
-              <label
+              <label for="validation-form-4" class="form-label w-full flex flex-col sm:flex-row">
-                for="validation-form-4"
+                {{$t('BANK_NAME')}}
-                class="form-label w-full flex flex-col sm:flex-row"
+                  <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"><span class="text-red-600">*</span> {{
-              >
+                $t("REQUIRED") }}
-                Bank Name
+                </span>
-                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"
-                  >Required</span
-                >
               </label>
-              <input
+              <input id="validation-form-4" v-model.trim="validate.bank_name.$model" type="text" name="bank_name"
-                id="validation-form-4"
+                class="form-control" :class="{ 'border-danger': validate.bank_name.$error }"
-                v-model.trim="validate.bank_name.$model"
+                placeholder="Type bank name" />
-                type="text"
-                name="bank_name"
-                class="form-control"
-                :class="{ 'border-danger': validate.bank_name.$error }"
-                placeholder="Type bank name"
-              />
               <template v-if="validate.bank_name.$error">
-                <div
+                <div v-for="(error, index) in validate.bank_name.$errors" :key="index" class="text-danger mt-2">
-                  v-for="(error, index) in validate.bank_name.$errors"
-                  :key="index"
-                  class="text-danger mt-2"
-                >
                   {{ error.$message }}
                 </div>
               </template>
@@ -199,30 +131,16 @@
 
             <!-- Begin Country -->
             <div class="input-form mt-3">
-              <label
+              <label for="validation-form-4" class="form-label w-full flex flex-col sm:flex-row">
-                for="validation-form-4"
+                {{$t('COUNTRY')}}
-                class="form-label w-full flex flex-col sm:flex-row"
+                  <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"><span class="text-red-600">*</span> {{
-              >
+                $t("REQUIRED") }}
-                Country
+                </span>
-                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"
-                  >Required</span
-                >
               </label>
-              <input
+              <input id="validation-form-4" v-model.trim="validate.country.$model" type="text" name="country"
-                id="validation-form-4"
+                class="form-control" :class="{ 'border-danger': validate.country.$error }" placeholder="Type country" />
-                v-model.trim="validate.country.$model"
-                type="text"
-                name="country"
-                class="form-control"
-                :class="{ 'border-danger': validate.country.$error }"
-                placeholder="Type country"
-              />
               <template v-if="validate.country.$error">
-                <div
+                <div v-for="(error, index) in validate.country.$errors" :key="index" class="text-danger mt-2">
-                  v-for="(error, index) in validate.country.$errors"
-                  :key="index"
-                  class="text-danger mt-2"
-                >
                   {{ error.$message }}
                 </div>
               </template>
@@ -230,13 +148,8 @@
             <!-- End Country -->
 
             <button type="submit" class="btn btn-primary mt-5">
-              Register
+              {{$t('REGISTER')}}
-              <LoadingIcon
+              <LoadingIcon icon="oval" color="white" class="w-4 h-4 ml-2" v-if="isLoading" />
-                icon="oval"
-                color="white"
-                class="w-4 h-4 ml-2"
-                v-if="isLoading"
-              />
             </button>
           </form>
           <!-- END: Validation Form -->

src/views/profile-forms/Business.vue

@@ -6,40 +6,24 @@
     <div class="intro-y col-span-12 lg:col-span-6">
       <!-- BEGIN: Form Validation -->
       <PreviewComponent class="intro-y box">
-        <div
+        <div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
-          class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400"
+          <h2 class="font-medium text-base mr-auto">{{$t('ENT_FORM')}}</h2>
-        >
-          <h2 class="font-medium text-base mr-auto">Entrepreneur Form</h2>
         </div>
         <div class="p-5">
           <!-- BEGIN: Validation Form -->
           <form class="validate-form" @submit.prevent="onRegister">
             <!-- Begin Surname -->
             <div class="input-form">
-              <label
+              <label for="validation-form-6" class="form-label w-full flex flex-col sm:flex-row">
-                for="validation-form-6"
+                {{$t('SURNAME')}}
-                class="form-label w-full flex flex-col sm:flex-row"
+                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"><span class="text-red-600">*</span> {{
-              >
+                $t("REQUIRED") }}
-                Surname
-                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"
-                  ><span class="text-red-600">*</span> {{ $t("REQUIRED") }}
                 </span>
               </label>
-              <input
+              <input type="text" id="validation-form-6" v-model.trim="validate.surname.$model" class="form-control"
-                type="text"
+                :class="{ 'border-danger': validate.surname.$error }" name="surname" placeholder="Type your surname" />
-                id="validation-form-6"
-                v-model.trim="validate.surname.$model"
-                class="form-control"
-                :class="{ 'border-danger': validate.surname.$error }"
-                name="surname"
-                placeholder="Type your surname"
-              />
               <template v-if="validate.surname.$error">
-                <div
+                <div v-for="(error, index) in validate.surname.$errors" :key="index" class="text-danger mt-2">
-                  v-for="(error, index) in validate.surname.$errors"
-                  :key="index"
-                  class="text-danger mt-2"
-                >
                   {{ error.$message }}
                 </div>
               </template>
@@ -48,30 +32,16 @@
 
             <!-- Begin Name -->
             <div class="input-form mt-3">
-              <label
+              <label for="validation-form-6" class="form-label w-full flex flex-col sm:flex-row">
-                for="validation-form-6"
+                {{$t('NAME')}}
-                class="form-label w-full flex flex-col sm:flex-row"
+                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"><span class="text-red-600">*</span> {{
-              >
+                $t("REQUIRED") }}
-                Name
+                </span>
-                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"
-                  >Required, at least 10 characters</span
-                >
               </label>
-              <input
+              <input type="text" id="validation-form-6" v-model.trim="validate.name.$model" class="form-control"
-                type="text"
+                :class="{ 'border-danger': validate.name.$error }" name="name" placeholder="Type your name" />
-                id="validation-form-6"
-                v-model.trim="validate.name.$model"
-                class="form-control"
-                :class="{ 'border-danger': validate.name.$error }"
-                name="name"
-                placeholder="Type your name"
-              />
               <template v-if="validate.name.$error">
-                <div
+                <div v-for="(error, index) in validate.name.$errors" :key="index" class="text-danger mt-2">
-                  v-for="(error, index) in validate.name.$errors"
-                  :key="index"
-                  class="text-danger mt-2"
-                >
                   {{ error.$message }}
                 </div>
               </template>
@@ -80,30 +50,17 @@
 
             <!-- Begin Patronymic Name -->
             <div class="input-form mt-3">
-              <label
+              <label for="validation-form-6" class="form-label w-full flex flex-col sm:flex-row">
-                for="validation-form-6"
+                {{$t('PNAME')}}
-                class="form-label w-full flex flex-col sm:flex-row"
+                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"><span class="text-red-600">*</span> {{
-              >
+                $t("REQUIRED") }}
-                Patronomic Name
+                </span>
-                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"
-                  >Required, at least 10 characters</span
-                >
               </label>
-              <input
+              <input type="text" id="validation-form-6" v-model.trim="validate.patronomic_name.$model"
-                type="text"
+                class="form-control" :class="{ 'border-danger': validate.patronomic_name.$error }"
-                id="validation-form-6"
+                name="patronomic_name" placeholder="Type your patronimic name" />
-                v-model.trim="validate.patronomic_name.$model"
-                class="form-control"
-                :class="{ 'border-danger': validate.patronomic_name.$error }"
-                name="patronomic_name"
-                placeholder="Type your patronimic name"
-              />
               <template v-if="validate.patronomic_name.$error">
-                <div
+                <div v-for="(error, index) in validate.patronomic_name.$errors" :key="index" class="text-danger mt-2">
-                  v-for="(error, index) in validate.patronomic_name.$errors"
-                  :key="index"
-                  class="text-danger mt-2"
-                >
                   {{ error.$message }}
                 </div>
               </template>
@@ -112,14 +69,11 @@
 
             <!-- Begin Date of Birth  -->
             <div class="input-form mt-3">
-              <label
+              <label for="validation-form-2" class="form-label w-full flex flex-col sm:flex-row">
-                for="validation-form-2"
+                {{$t('DOB')}}
-                class="form-label w-full flex flex-col sm:flex-row"
+                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"><span class="text-red-600">*</span> {{
-              >
+                $t("REQUIRED") }}
-                Date of Birth
+                </span>
-                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"
-                  >Required</span
-                >
               </label>
               <!-- <input
                 id="validation-form-2"
@@ -133,32 +87,23 @@
               <!-- Begin Date picker -->
               <div class="relative mx-auto mt-3">
                 <div
-                  class="absolute rounded-l w-10 h-full flex items-center justify-center bg-slate-100 border text-slate-500 dark:bg-darkmode-700 dark:border-darkmode-800 dark:text-slate-400"
+                  class="absolute rounded-l w-10 h-full flex items-center justify-center bg-slate-100 border text-slate-500 dark:bg-darkmode-700 dark:border-darkmode-800 dark:text-slate-400">
-                >
                   <CalendarIcon class="w-4 h-4" />
                 </div>
-                <Litepicker
+                <Litepicker v-model="date" :options="{
-                  v-model="date"
+                  maxDate: maxDate,
-                  :options="{
+                  format: 'DD.MM.YYYY',
-                    maxDate: maxDate,
+                  dropdowns: {
-                    format: 'DD.MM.YYYY',
+                    minYear: 1900,
-                    dropdowns: {
+                    maxYear: null,
-                      minYear: 1900,
+                    months: true,
-                      maxYear: null,
+                    years: true,
-                      months: true,
+                  },
-                      years: true,
+                }" class="form-control pl-12" />
-                    },
-                  }"
-                  class="form-control pl-12"
-                />
               </div>
               <!-- End Date picker -->
               <template v-if="validate.date_of_birth.$error">
-                <div
+                <div v-for="(error, index) in validate.date_of_birth.$errors" :key="index" class="text-danger mt-2">
-                  v-for="(error, index) in validate.date_of_birth.$errors"
-                  :key="index"
-                  class="text-danger mt-2"
-                >
                   {{ error.$message }}
                 </div>
               </template>
@@ -167,30 +112,17 @@
 
             <!-- Begin Place of Birth -->
             <div class="input-form mt-3">
-              <label
+              <label for="validation-form-4" class="form-label w-full flex flex-col sm:flex-row">
-                for="validation-form-4"
+                {{$t('POB')}}
-                class="form-label w-full flex flex-col sm:flex-row"
+                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"><span class="text-red-600">*</span> {{
-              >
+                $t("REQUIRED") }}
-                Place of Birth
+                </span>
-                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"
-                  >Required</span
-                >
               </label>
-              <input
+              <input id="validation-form-4" v-model.trim="validate.birth_place.$model" type="text" name="birth_place"
-                id="validation-form-4"
+                class="form-control" :class="{ 'border-danger': validate.birth_place.$error }"
-                v-model.trim="validate.birth_place.$model"
+                placeholder="Type place of birth" />
-                type="text"
-                name="birth_place"
-                class="form-control"
-                :class="{ 'border-danger': validate.birth_place.$error }"
-                placeholder="Type place of birth"
-              />
               <template v-if="validate.birth_place.$error">
-                <div
+                <div v-for="(error, index) in validate.birth_place.$errors" :key="index" class="text-danger mt-2">
-                  v-for="(error, index) in validate.birth_place.$errors"
-                  :key="index"
-                  class="text-danger mt-2"
-                >
                   {{ error.$message }}
                 </div>
               </template>
@@ -199,24 +131,16 @@
 
             <!-- Begin Citizenship -->
             <div class="input-form mt-3">
-              <label
+              <label for="validation-form-4" class="form-label w-full flex flex-col sm:flex-row">
-                for="validation-form-4"
+                {{$t('SELECT_CITIZENSHIP')}}
-                class="form-label w-full flex flex-col sm:flex-row"
+                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"><span class="text-red-600">*</span> {{
-              >
+                $t("REQUIRED") }}
-                Citizenship
+                </span>
-                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"
-                  >Required</span
-                >
               </label>
-              <CountryDropdown
+              <CountryDropdown :id="formData.citizenship_id" @on-change="(country) => onCountryChange(country)" />
-                :id="formData.citizenship_id"
-                @on-change="(country) => onCountryChange(country)"
-              />
               <template v-if="!isCitizenshipValid">
-                <div
+                <div class="text-danger mt-2">
-                  class="text-danger mt-2"
+                  {{$t('REG_ADDR')}}
-                >
-                  Select citizenship
                 </div>
               </template>
             </div>
@@ -224,33 +148,19 @@
 
             <!-- Begin Registration Address -->
             <div class="input-form mt-3">
-              <label
+              <label for="validation-form-4" class="form-label w-full flex flex-col sm:flex-row">
-                for="validation-form-4"
+                {{$t('REG_ADDR')}}
-                class="form-label w-full flex flex-col sm:flex-row"
+                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"><span class="text-red-600">*</span> {{
-              >
+                $t("REQUIRED") }}
-                Registration Address
+                </span>
-                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"
-                  >Required</span
-                >
               </label>
-              <input
+              <input id="validation-form-4" v-model.trim="validate.registration_address.$model" type="text"
-                id="validation-form-4"
+                name="registration_address" class="form-control" :class="{
-                v-model.trim="validate.registration_address.$model"
-                type="text"
-                name="registration_address"
-                class="form-control"
-                :class="{
                   'border-danger': validate.registration_address.$error,
-                }"
+                }" placeholder="Type registration address" />
-                placeholder="Type registration address"
-              />
               <template v-if="validate.registration_address.$error">
-                <div
+                <div v-for="(error, index) in validate.registration_address
-                  v-for="(error, index) in validate.registration_address
+                .$errors" :key="index" class="text-danger mt-2">
-                    .$errors"
-                  :key="index"
-                  class="text-danger mt-2"
-                >
                   {{ error.$message }}
                 </div>
               </template>
@@ -258,13 +168,8 @@
             <!-- End Registration Address -->
 
             <button type="submit" class="btn btn-primary mt-5">
-              Register
+              {{$t('REGISTER')}}
-              <LoadingIcon
+              <LoadingIcon icon="oval" color="white" class="w-4 h-4 ml-2" v-if="isLoading" />
-                icon="oval"
-                color="white"
-                class="w-4 h-4 ml-2"
-                v-if="isLoading"
-              />
             </button>
           </form>
           <!-- END: Validation Form -->
@@ -306,8 +211,8 @@ const formData = reactive({
   birth_place: "",
   citizenship_id: "",
   citizenship: {
-    id : 0,
+    id: 0,
-    code:"",
+    code: "",
     name: "",
   },
   registration_address: "",
@@ -352,7 +257,7 @@ watch(date, (currentValue, oldValue) => {
 
 const onCountryChange = (value) => {
   formData.citizenship_id = value.id;
-  
+
   isCitizenshipValid.value = true;
 
   formData.citizenship = value;

src/views/profile-forms/Company.vue

@@ -7,7 +7,7 @@
       <!-- BEGIN: Form Validation -->
       <PreviewComponent class="intro-y box">
         <div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
-          <h2 class="font-medium text-base mr-auto">Company Form</h2>
+          <h2 class="font-medium text-base mr-auto">{{$t('COMP_FORM')}}</h2>
         </div>
         <div class="p-5">
           <!-- BEGIN: Validation Form -->
@@ -15,8 +15,10 @@
             <!-- Begin name -->
             <div class="input-form">
               <label for="validation-form-6" class="form-label w-full flex flex-col sm:flex-row">
-                Name
+                {{$t('NAME')}}
-                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500">Required, at least 10 characters</span>
+                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"><span class="text-red-600">*</span> {{
+                $t("REQUIRED") }}
+                </span>
               </label>
               <input type="text" id="validation-form-6" v-model.trim="validate.name.$model" class="form-control"
                 :class="{ 'border-danger': validate.name.$error }" name="name" placeholder="Type company name" />
@@ -31,8 +33,10 @@
             <!-- Begin Short name -->
             <div class="input-form mt-3">
               <label for="validation-form-6" class="form-label w-full flex flex-col sm:flex-row">
-                Short name
+                {{$t('SHORT_NAME')}}
-                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500">Required</span>
+                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"><span class="text-red-600">*</span> {{
+                $t("REQUIRED") }}
+                </span>
               </label>
               <input type="text" id="validation-form-6" v-model.trim="validate.short_name.$model" class="form-control"
                 :class="{ 'border-danger': validate.short_name.$error }" name="short_name"
@@ -48,8 +52,10 @@
             <!-- Begin Registration number -->
             <div class="input-form mt-3">
               <label for="validation-form-6" class="form-label w-full flex flex-col sm:flex-row">
-                Registration number
+                {{$t('REG_NUMBER')}}
-                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500">Required</span>
+                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"><span class="text-red-600">*</span> {{
+                $t("REQUIRED") }}
+                </span>
               </label>
               <input type="text" id="validation-form-6" v-model.trim="validate.registration_number.$model"
                 class="form-control" :class="{
@@ -67,8 +73,10 @@
             <!-- Begin Registration Date -->
             <div class="input-form mt-3">
               <label for="validation-form-2" class="form-label w-full flex flex-col sm:flex-row">
-                Registration Date
+                {{$t('REG_DATE')}}
-                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500">Required</span>
+                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"><span class="text-red-600">*</span> {{
+                $t("REQUIRED") }}
+                </span>
               </label>
               <!-- <input
                   id="validation-form-2"
@@ -108,8 +116,10 @@
             <!-- Begin State Registration Agency -->
             <div class="input-form mt-3">
               <label for="validation-form-4" class="form-label w-full flex flex-col sm:flex-row">
-                State Registration Agency
+                {{$t('REG_AGENCY')}}
-                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500">Required</span>
+                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"><span class="text-red-600">*</span> {{
+                $t("REQUIRED") }}
+                </span>
               </label>
               <input id="validation-form-4" v-model.trim="validate.state_registration_agency.$model" type="text"
                 name="state_registration_agency" class="form-control" :class="{
@@ -127,8 +137,10 @@
             <!-- Begin Registration Place -->
             <div class="input-form mt-3">
               <label for="validation-form-4" class="form-label w-full flex flex-col sm:flex-row">
-                Registration Place
+                {{$t('REG_PLACE')}}
-                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500">Required</span>
+                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"><span class="text-red-600">*</span> {{
+                $t("REQUIRED") }}
+                </span>
               </label>
               <input id="validation-form-4" v-model.trim="validate.registration_place.$model" type="text"
                 name="registration_place" class="form-control"
@@ -146,8 +158,10 @@
             <!-- Begin Registration Address -->
             <div class="input-form mt-3">
               <label for="validation-form-4" class="form-label w-full flex flex-col sm:flex-row">
-                Registration Address
+                {{$t('REG_ADDR')}}
-                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500">Required</span>
+                <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"><span class="text-red-600">*</span> {{
+                $t("REQUIRED") }}
+                </span>
               </label>
               <input id="validation-form-4" v-model.trim="validate.registration_address.$model" type="text"
                 name="registration_address" class="form-control" :class="{
@@ -163,7 +177,7 @@
             <!-- End Registration Address -->
 
             <button type="submit" class="btn btn-primary mt-5">
-              Register
+              {{$t('REGISTER')}}
               <LoadingIcon icon="oval" color="white" class="w-4 h-4 ml-2" v-if="isLoading" />
             </button>
           </form>

src/views/profile-forms/Contacts.vue

@@ -1,45 +1,31 @@
 <template>
   <div>
     <div class="intro-y flex items-center mt-8">
-      <h2 class="text-lg font-medium mr-auto">Contacts</h2>
+      <h2 class="text-lg font-medium mr-auto">{{$t('CONTACTS')}}</h2>
     </div>
     <div class="grid grid-cols-12 gap-6 mt-5">
       <div class="intro-y col-span-12 lg:col-span-6">
         <!-- BEGIN: Form Validation -->
         <PreviewComponent class="intro-y box">
-          <div
+          <div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400"
+            <h2 class="font-medium text-base mr-auto">{{$t('CONTACTS_FORM')}}</h2>
-          >
-            <h2 class="font-medium text-base mr-auto">Contacts Form</h2>
           </div>
           <div class="p-5">
             <!-- BEGIN: Validation Form -->
             <form class="validate-form" @submit.prevent="onRegister">
               <!-- Begin Address -->
               <div class="input-form">
-                <label
+                <label for="validation-form-6" class="form-label w-full flex flex-col sm:flex-row">
-                  for="validation-form-6"
+                  {{$t('ADDRESS')}}
-                  class="form-label w-full flex flex-col sm:flex-row"
+                  <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"><span class="text-red-600">*</span> {{
-                >
+                  $t("REQUIRED") }}
-                  Address
+                  </span>
-                  <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"
-                    >Required, at least 10 characters</span
-                  >
                 </label>
-                <textarea
+                <textarea id="validation-form-6" v-model.trim="validate.address.$model" class="form-control"
-                  id="validation-form-6"
+                  :class="{ 'border-danger': validate.address.$error }" name="address"
-                  v-model.trim="validate.address.$model"
+                  placeholder="Type your address"></textarea>
-                  class="form-control"
-                  :class="{ 'border-danger': validate.address.$error }"
-                  name="address"
-                  placeholder="Type your address"
-                ></textarea>
                 <template v-if="validate.address.$error">
-                  <div
+                  <div v-for="(error, index) in validate.address.$errors" :key="index" class="text-danger mt-2">
-                    v-for="(error, index) in validate.address.$errors"
-                    :key="index"
-                    class="text-danger mt-2"
-                  >
                     {{ error.$message }}
                   </div>
                 </template>
@@ -48,30 +34,17 @@
 
               <!-- Begin Email -->
               <div class="input-form mt-3">
-                <label
+                <label for="validation-form-2" class="form-label w-full flex flex-col sm:flex-row">
-                  for="validation-form-2"
+                  {{$t('EMAIL')}}
-                  class="form-label w-full flex flex-col sm:flex-row"
+                  <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"><span class="text-red-600">*</span> {{
-                >
+                  $t("REQUIRED") }}
-                  Email
+                  </span>
-                  <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"
-                    >Required, email address format</span
-                  >
                 </label>
-                <input
+                <input id="validation-form-2" v-model.trim="validate.email.$model" type="email" name="email"
-                  id="validation-form-2"
+                  class="form-control" :class="{ 'border-danger': validate.email.$error }"
-                  v-model.trim="validate.email.$model"
+                  placeholder="example@gmail.com" />
-                  type="email"
-                  name="email"
-                  class="form-control"
-                  :class="{ 'border-danger': validate.email.$error }"
-                  placeholder="example@gmail.com"
-                />
                 <template v-if="validate.email.$error">
-                  <div
+                  <div v-for="(error, index) in validate.email.$errors" :key="index" class="text-danger mt-2">
-                    v-for="(error, index) in validate.email.$errors"
-                    :key="index"
-                    class="text-danger mt-2"
-                  >
                     {{ error.$message }}
                   </div>
                 </template>
@@ -80,30 +53,16 @@
 
               <!-- Begin Phone -->
               <div class="input-form mt-3">
-                <label
+                <label for="validation-form-4" class="form-label w-full flex flex-col sm:flex-row">
-                  for="validation-form-4"
+                  {{$t('PHONE')}}
-                  class="form-label w-full flex flex-col sm:flex-row"
+                  <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"><span class="text-red-600">*</span> {{
-                >
+                  $t("REQUIRED") }}
-                  Phone
+                  </span>
-                  <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"
-                    >Required, integer only & maximum 3 characters</span
-                  >
                 </label>
-                <input
+                <input id="validation-form-4" v-model.trim="validate.phone.$model" type="number" name="phone"
-                  id="validation-form-4"
+                  class="form-control" :class="{ 'border-danger': validate.phone.$error }" placeholder="99365111111" />
-                  v-model.trim="validate.phone.$model"
-                  type="number"
-                  name="phone"
-                  class="form-control"
-                  :class="{ 'border-danger': validate.phone.$error }"
-                  placeholder="99365111111"
-                />
                 <template v-if="validate.phone.$error">
-                  <div
+                  <div v-for="(error, index) in validate.phone.$errors" :key="index" class="text-danger mt-2">
-                    v-for="(error, index) in validate.phone.$errors"
-                    :key="index"
-                    class="text-danger mt-2"
-                  >
                     {{ error.$message }}
                   </div>
                 </template>
@@ -112,30 +71,16 @@
 
               <!-- Begin Fax -->
               <div class="input-form mt-3">
-                <label
+                <label for="validation-form-4" class="form-label w-full flex flex-col sm:flex-row">
-                  for="validation-form-4"
+                  {{$t('FAX')}}
-                  class="form-label w-full flex flex-col sm:flex-row"
+                  <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"><span class="text-red-600">*</span> {{
-                >
+                  $t("REQUIRED") }}
-                  Fax
+                  </span>
-                  <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"
-                    >Required, integer only & maximum 3 characters</span
-                  >
                 </label>
-                <input
+                <input id="validation-form-4" v-model.trim="validate.fax.$model" type="number" name="fax"
-                  id="validation-form-4"
+                  class="form-control" :class="{ 'border-danger': validate.fax.$error }" placeholder="99312111111" />
-                  v-model.trim="validate.fax.$model"
-                  type="number"
-                  name="fax"
-                  class="form-control"
-                  :class="{ 'border-danger': validate.fax.$error }"
-                  placeholder="99312111111"
-                />
                 <template v-if="validate.fax.$error">
-                  <div
+                  <div v-for="(error, index) in validate.fax.$errors" :key="index" class="text-danger mt-2">
-                    v-for="(error, index) in validate.fax.$errors"
-                    :key="index"
-                    class="text-danger mt-2"
-                  >
                     {{ error.$message }}
                   </div>
                 </template>
@@ -143,13 +88,8 @@
               <!-- End Fax -->
 
               <button type="submit" class="btn btn-primary mt-5">
-                Register
+                {{$t('REGISTER')}}
-                <LoadingIcon
+                <LoadingIcon icon="oval" color="white" class="w-4 h-4 ml-2" v-if="isLoading" />
-                  icon="oval"
-                  color="white"
-                  class="w-4 h-4 ml-2"
-                  v-if="isLoading"
-                />
               </button>
             </form>
             <!-- END: Validation Form -->

src/views/profile/Main.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="intro-y flex items-center mt-8">
-    <h2 class="text-lg font-medium mr-auto">Account</h2>
+    <h2 class="text-lg text-black font-medium mr-auto">{{ $t("ACCOUNT") }}</h2>
   </div>
   <div class="intro-y grid grid-cols-1 lg:grid-cols-2 gap-6 mt-5">
     <!-- BEGIN: Company -->
     <PreviewComponent v-if="accountType == 'company'" class="intro-y box flex flex-col">
       <div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
-        <h2 class="font-medium text-base mr-auto">Profile</h2>
+        <h2 class="font-medium text-base mr-auto">{{$t("PROFILE")}}</h2>
         <div class="form-check form-switch w-full sm:w-auto sm:ml-auto mt-3 sm:mt-0 text-center">
           <a href="javascript:;" @click.prevent="onEdit(accountType, profile)" class="btn btn-primary">
-            <EditIcon class="w-4 h-4" />
+            <EditIcon class="w-4 h-4 mr-3" /> {{ $t('EDIT') }}
           </a>
         </div>
       </div>
@@ -18,40 +18,40 @@
           <div class="flex-1">
             <!-- Begin first column -->
             <div class="flex m-2">
-              <div class="flex font-medium">Name:</div>
+              <div class="flex font-medium">{{$t("NAME")}}:</div>
-              <div class="flex pl-2">{{ profile.name }}</div>
+              <div class="flex pl-3">{{ profile.name }}</div>
             </div>
             <div class="flex m-2">
-              <div class="flex font-medium">Short Name:</div>
+              <div class="flex font-medium">{{$t("SHORT_NAME")}}:</div>
-              <div class="flex pl-2">{{ profile.short_name }}</div>
+              <div class="flex pl-3">{{ profile.short_name }}</div>
             </div>
             <div class="flex m-2">
-              <div class="flex font-medium">Registration number:</div>
+              <div class="flex font-medium">{{$t("REG_NUMBER")}}:</div>
-              <div class="flex pl-2">{{ profile.registration_number }}</div>
+              <div class="flex pl-3">{{ profile.registration_number }}</div>
             </div>
             <div class="flex m-2">
-              <div class="flex font-medium">Registration date:</div>
+              <div class="flex font-medium">{{$t("REG_DATE")}}:</div>
-              <div class="flex pl-2">{{ formattedDate }}</div>
+              <div class="flex pl-3">{{ formattedDate }}</div>
             </div>
-          </div>
-          <!-- End first column -->
-          <!-- Begin second column -->
-          <div class="flex-1">
             <div class="flex m-2">
-              <div class="flex font-medium">State registration agency:</div>
+              <div class="flex font-medium">{{$t("REG_AGENCY")}}:</div>
-              <div class="flex pl-2">
+              <div class="flex pl-3">
                 {{ profile.state_registration_agency }}
               </div>
             </div>
             <div class="flex m-2">
-              <div class="flex font-medium">Registration place:</div>
+              <div class="flex font-medium">{{$t("REG_PLACE")}}:</div>
-              <div class="flex pl-2">{{ profile.registration_place }}</div>
+              <div class="flex pl-3">{{ profile.registration_place }}</div>
             </div>
             <div class="flex m-2">
-              <div class="flex font-medium">Registration address:</div>
+              <div class="flex font-medium">{{$t("REG_ADDR")}}:</div>
-              <div class="flex pl-2">{{ profile.registration_address }}</div>
+              <div class="flex pl-3">{{ profile.registration_address }}</div>
             </div>
+
           </div>
+          <!-- End first column -->
+          <!-- Begin second column -->
+
           <!-- End second column -->
         </div>
       </div>
@@ -64,7 +64,7 @@
         <h2 class="font-medium text-base mr-auto">Profile</h2>
         <div class="form-check form-switch w-full sm:w-auto sm:ml-auto mt-3 sm:mt-0 text-center">
           <a href="javascript:;" @click.prevent="onEdit(accountType, profile)" class="btn btn-primary">
-            <EditIcon class="w-4 h-4" />
+            <EditIcon class="w-4 h-4 mr-3" /> {{ $t('EDIT') }}
           </a>
         </div>
       </div>
@@ -74,38 +74,37 @@
           <div class="flex-1">
             <!-- Begin first column -->
             <div class="flex m-2">
-              <div class="flex font-medium">Surname:</div>
+              <div class="flex font-medium">{{ $t('SURNAME')}}:</div>
-              <div class="flex pl-2">{{ profile.surname }}</div>
+              <div class="flex pl-3">{{ profile.surname }}</div>
             </div>
             <div class="flex m-2">
-              <div class="flex font-medium">Name:</div>
+              <div class="flex font-medium">{{ $t('NAME')}}:</div>
-              <div class="flex pl-2">{{ profile.name }}</div>
+              <div class="flex pl-3">{{ profile.name }}</div>
             </div>
             <div class="flex m-2">
-              <div class="flex font-medium">Date of birth:</div>
+              <div class="flex font-medium">{{ $t('DOB')}}:</div>
-              <div class="flex pl-2">{{ formattedDate }}</div>
+              <div class="flex pl-3">{{ formattedDate }}</div>
             </div>
             <div class="flex m-2">
-              <div class="flex font-medium">Place of birth:</div>
+              <div class="flex font-medium">{{ $t('POB')}}:</div>
-              <div class="flex pl-2">{{ profile.birth_place }}</div>
+              <div class="flex pl-3">{{ profile.birth_place }}</div>
+            </div>
+            <div class="flex m-2 mt-0 md:m-2">
+              <div class="flex font-medium">{{ $t('PNAME')}}:</div>
+              <div class="flex pl-3">{{ profile.patronomic_name }}</div>
+            </div>
+            <div class="flex m-2">
+              <div class="flex font-medium">{{ $t('CITIZENSHIP')}}:</div>
+              <div v-if="profile && profile.citizenship" class="flex pl-3">{{ profile.citizenship.name }}</div>
+            </div>
+            <div class="flex m-2">
+              <div class="flex font-medium">{{ $t('REG_ADDR')}}:</div>
+              <div class="flex pl-3">{{ profile.registration_address }}</div>
             </div>
           </div>
           <!-- End first column -->
           <!-- Begin second column -->
-          <div class="flex-1">
+
-            <div class="flex m-2 mt-0 md:m-2">
-              <div class="flex font-medium">Patronomic name:</div>
-              <div class="flex pl-2">{{ profile.patronomic_name }}</div>
-            </div>
-            <div class="flex m-2">
-              <div class="flex font-medium">Citizenship:</div>
-              <div v-if="profile && profile.citizenship" class="flex pl-2">{{ profile.citizenship.name }}</div>
-            </div>
-            <div class="flex m-2">
-              <div class="flex font-medium">Registration address:</div>
-              <div class="flex pl-2">{{ profile.registration_address }}</div>
-            </div>
-          </div>
           <!-- End second column -->
         </div>
       </div>
@@ -115,10 +114,11 @@
     <!-- BEGIN: Contacts -->
     <PreviewComponent class="intro-y box flex flex-col">
       <div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
-        <h2 class="font-medium text-base mr-auto">Contacts</h2>
+        <h2 class="font-medium text-base mr-auto">{{ $t('CONTACTS')}}</h2>
         <div class="form-check form-switch w-full sm:w-auto sm:ml-auto mt-3 sm:mt-0 text-center">
           <a href="javascript:;" @click.prevent="onEdit(`contacts`, contacts)" class="btn btn-primary">
-            <EditIcon class="w-4 h-4" />
+            <EditIcon class="w-4 h-4 mr-3" />
+            {{ $t('EDIT') }}
           </a>
         </div>
       </div>
@@ -127,20 +127,20 @@
           <div class="flex-1">
             <!-- Begin  column -->
             <div class="flex m-2">
-              <div class="flex font-medium">Address:</div>
+              <div class="flex font-medium">{{ $t('ADDRESS')}}:</div>
-              <div class="flex pl-2">{{ contacts.address }}</div>
+              <div class="flex pl-3">{{ contacts.address }}</div>
             </div>
             <div class="flex m-2">
-              <div class="flex font-medium">Phone:</div>
+              <div class="flex font-medium">{{ $t('PHONE')}}:</div>
-              <div class="flex pl-2">{{ contacts.phone }}</div>
+              <div class="flex pl-3">{{ contacts.phone }}</div>
             </div>
             <div class="flex m-2">
-              <div class="flex font-medium">Fax:</div>
+              <div class="flex font-medium">{{ $t('FAX')}}:</div>
-              <div class="flex pl-2">{{ contacts.fax }}</div>
+              <div class="flex pl-3">{{ contacts.fax }}</div>
             </div>
             <div class="flex m-2">
-              <div class="flex font-medium">Email:</div>
+              <div class="flex font-medium">{{ $t('EMAIL')}}:</div>
-              <div class="flex pl-2">{{ contacts.email }}</div>
+              <div class="flex pl-3">{{ contacts.email }}</div>
             </div>
           </div>
           <!-- End  column -->
@@ -152,10 +152,10 @@
     <!-- BEGIN: Bank -->
     <PreviewComponent class="intro-y box flex flex-col">
       <div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
-        <h2 class="font-medium text-base mr-auto">Bank info</h2>
+        <h2 class="font-medium text-base mr-auto">{{ $t('BANK')}}</h2>
         <div class="form-check form-switch w-full sm:w-auto sm:ml-auto mt-3 sm:mt-0 text-center">
           <a href="javascript:;" @click.prevent="onEdit(`bank-account`, bankAccount)" class="btn btn-primary">
-            <EditIcon class="w-4 h-4" />
+            <EditIcon class="w-4 h-4 mr-3" /> {{ $t('EDIT') }}
           </a>
         </div>
       </div>
@@ -164,24 +164,24 @@
           <div class="flex-1">
             <!-- Begin  column -->
             <div class="flex m-2">
-              <div class="flex font-medium">Bank name:</div>
+              <div class="flex font-medium">{{ $t('BANK_NAME')}}:</div>
-              <div class="flex pl-2">{{ bankAccount.bank_name }}</div>
+              <div class="flex pl-3">{{ bankAccount.bank_name }}</div>
             </div>
             <div class="flex m-2">
-              <div class="flex font-medium">Country:</div>
+              <div class="flex font-medium">{{ $t('COUNTRY')}}:</div>
-              <div class="flex pl-2">{{ bankAccount.country }}</div>
+              <div class="flex pl-3">{{ bankAccount.country }}</div>
             </div>
             <div class="flex m-2">
-              <div class="flex font-medium">Account number:</div>
+              <div class="flex font-medium">{{ $t('ACC_NUMBER')}}:</div>
-              <div class="flex pl-2">{{ bankAccount.account_number }}</div>
+              <div class="flex pl-3">{{ bankAccount.account_number }}</div>
             </div>
             <div class="flex m-2">
-              <div class="flex font-medium">Account Date:</div>
+              <div class="flex font-medium">{{ $t('ACC_DATE')}}:</div>
-              <div class="flex pl-2">{{ bankAccount.account_date }}</div>
+              <div class="flex pl-3">{{ bankAccount.account_date }}</div>
             </div>
             <div class="flex m-2">
-              <div class="flex font-medium">Currency:</div>
+              <div class="flex font-medium">{{ $t('CURRENCY')}}:</div>
-              <div class="flex pl-2">{{ bankAccount.currency }}</div>
+              <div class="flex pl-3">{{ bankAccount.currency }}</div>
             </div>
           </div>
           <!-- End column -->
@@ -193,10 +193,10 @@
     <!-- BEGIN: Legalization -->
     <PreviewComponent class="intro-y box flex flex-col">
       <div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
-        <h2 class="font-medium text-base mr-auto">Legalization info</h2>
+        <h2 class="font-medium text-base mr-auto">{{$t('LEGALIZATION')}}</h2>
         <div class="form-check form-switch w-full sm:w-auto sm:ml-auto mt-3 sm:mt-0 text-center">
           <a href="javascript:;" @click.prevent="onLegalBtnTapped" class="btn btn-primary">
-            <EditIcon class="w-4 h-4 mr-3" /> {{ legalBtnTitle }}
+            <EditIcon class="w-4 h-4 mr-3" /> {{$t(legalBtnTitle) }}
             <LoadingIcon icon="oval" color="white" class="w-4 h-4 ml-2" v-if="isLegalBtnLoading" />
           </a>
         </div>
@@ -206,12 +206,12 @@
           <div class="flex-1">
             <!-- Begin  column -->
             <div class="flex m-2">
-              <div class="flex font-medium">Legalization number:</div>
+              <div class="flex font-medium">{{$t('LEG_NUM')}}:</div>
-              <div class="flex pl-2">{{ legalNumber }}</div>
+              <div class="flex pl-3">{{ legalNumber }}</div>
             </div>
             <div class="flex m-2">
-              <div class="flex font-medium">Expiration date:</div>
+              <div class="flex font-medium">{{$t('EXP_DATE')}}:</div>
-              <div class="flex pl-2">{{ legalExpiresAt }}</div>
+              <div class="flex pl-3">{{ legalExpiresAt }}</div>
             </div>
           </div>
           <!-- End  column -->
@@ -292,13 +292,13 @@ const prepareLegalBtnTitle = () => {
   }
 
   if (legalAppStatus.value == "" || legalAppStatus.value == null) {
-    legalBtnTitle.value = "Create New Application";
+    legalBtnTitle.value = "LEG_BTN_NULL";
   } else if (legalAppStatus.value == "new") {
-    legalBtnTitle.value = "Apply Form";
+    legalBtnTitle.value = "LEG_BTN_NEW";
   } else if (legalAppStatus.value == "applied") {
-    legalBtnTitle.value = "Approve Form";
+    legalBtnTitle.value = "LEG_BTN_APPLIED";
   } else if (legalAppStatus.value == "approved") {
-    legalBtnTitle.value = "Approved";
+    legalBtnTitle.value = "LEG_BTN_APPROVED";
   }
 };