feat translate general, business hours, sla.

translate user login , forgot password & set password.

frontend/src/features/admin/general/GeneralSettingForm.vue

@@ -2,22 +2,24 @@
   <form @submit="onSubmit" class="space-y-6 w-full">
     <FormField v-slot="{ field }" name="site_name">
       <FormItem>
-        <FormLabel>Site Name</FormLabel>
+        <FormLabel>{{ t('admin.general.site_name') }}</FormLabel>
         <FormControl>
-          <Input type="text" placeholder="Site Name" v-bind="field" />
+          <Input type="text" placeholder="" v-bind="field" />
         </FormControl>
-        <FormDescription>Enter the site name</FormDescription>
+        <FormDescription>
+          {{ t('admin.general.site_name.description') }}
+        </FormDescription>
         <FormMessage />
       </FormItem>
     </FormField>
 
     <FormField v-slot="{ componentField }" name="lang">
       <FormItem>
-        <FormLabel>Language</FormLabel>
+        <FormLabel>{{ t('admin.general.language') }}</FormLabel>
         <FormControl>
           <Select v-bind="componentField" :modelValue="componentField.modelValue">
             <SelectTrigger>
-              <SelectValue placeholder="Select a language" />
+              <SelectValue :placeholder="t('admin.general.language.placeholder')" />
             </SelectTrigger>
             <SelectContent>
               <SelectGroup>
@@ -27,18 +29,22 @@
             </SelectContent>
           </Select>
         </FormControl>
-        <FormDescription>Select language for the app.</FormDescription>
+        <FormDescription>
+          {{ t('admin.general.language.description') }}
+        </FormDescription>
         <FormMessage />
       </FormItem>
     </FormField>
 
     <FormField v-slot="{ componentField }" name="timezone">
       <FormItem>
-        <FormLabel>Timezone</FormLabel>
+        <FormLabel>
+          {{ t('admin.general.timezone') }}
+        </FormLabel>
         <FormControl>
           <Select v-bind="componentField">
             <SelectTrigger>
-              <SelectValue placeholder="Select a timezone" />
+              <SelectValue :placeholder="t('admin.general.timezone.placeholder')" />
             </SelectTrigger>
             <SelectContent>
               <SelectGroup>
@@ -49,18 +55,22 @@
             </SelectContent>
           </Select>
         </FormControl>
-        <FormDescription>Default timezone for your desk.</FormDescription>
+        <FormDescription>
+          {{ t('admin.general.timezone.description') }}
+        </FormDescription>
         <FormMessage />
       </FormItem>
     </FormField>
 
     <FormField v-slot="{ componentField }" name="business_hours_id">
       <FormItem>
-        <FormLabel>Business hours</FormLabel>
+        <FormLabel>
+          {{ t('admin.general.business_hours') }}
+        </FormLabel>
         <FormControl>
           <Select v-bind="componentField">
             <SelectTrigger>
-              <SelectValue placeholder="Select business hours" />
+              <SelectValue :placeholder="t('admin.general.business_hours.placeholder')" />
             </SelectTrigger>
             <SelectContent>
               <SelectGroup>
@@ -71,40 +81,46 @@
             </SelectContent>
           </Select>
         </FormControl>
-        <FormDescription>Default business hours for your desk.</FormDescription>
+        <FormDescription>
+          {{ t('admin.general.business_hours.description') }}
+        </FormDescription>
         <FormMessage />
       </FormItem>
     </FormField>
 
     <FormField v-slot="{ field }" name="root_url">
       <FormItem>
-        <FormLabel>Root URL</FormLabel>
+        <FormLabel>
+          {{ t('admin.general.root_url') }}
+        </FormLabel>
         <FormControl>
-          <Input type="text" placeholder="Root URL" v-bind="field" />
+          <Input type="text" placeholder="" v-bind="field" />
         </FormControl>
-        <FormDescription>Root URL of the app. (No trailing slash)</FormDescription>
+        <FormDescription>
+          {{ t('admin.general.root_url.description') }}
+        </FormDescription>
         <FormMessage />
       </FormItem>
     </FormField>
 
     <FormField v-slot="{ field }" name="favicon_url" :value="props.initialValues.favicon_url">
       <FormItem>
-        <FormLabel>Favicon URL</FormLabel>
+        <FormLabel>{{ t('admin.general.favicon_url') }}</FormLabel>
         <FormControl>
-          <Input type="text" placeholder="Favicon URL" v-bind="field" />
+          <Input type="text" placeholder="" v-bind="field" />
         </FormControl>
-        <FormDescription>Favicon URL for the app.</FormDescription>
+        <FormDescription>{{ t('admin.general.favicon_url.description') }}</FormDescription>
         <FormMessage />
       </FormItem>
     </FormField>
 
     <FormField v-slot="{ field }" name="logo_url" :value="props.initialValues.logo_url">
       <FormItem>
-        <FormLabel>Logo URL</FormLabel>
+        <FormLabel>{{ t('admin.general.logo_url') }}</FormLabel>
         <FormControl>
-          <Input type="text" placeholder="Logo URL" v-bind="field" />
+          <Input type="text" placeholder="" v-bind="field" />
         </FormControl>
-        <FormDescription>Logo URL for the app.</FormDescription>
+        <FormDescription>{{ t('admin.general.logo_url.description') }}</FormDescription>
         <FormMessage />
       </FormItem>
     </FormField>
@@ -115,18 +131,24 @@
       :value="props.initialValues.max_file_upload_size"
     >
       <FormItem>
-        <FormLabel>Max allowed file upload size</FormLabel>
+        <FormLabel>
+          {{ t('admin.general.max_allowed_file_upload_size') }}
+        </FormLabel>
         <FormControl>
           <Input type="number" placeholder="10" v-bind="field" />
         </FormControl>
-        <FormDescription>In megabytes.</FormDescription>
+        <FormDescription>
+          {{ t('admin.general.max_allowed_file_upload_size.description') }}
+        </FormDescription>
         <FormMessage />
       </FormItem>
     </FormField>
 
     <FormField name="allowed_file_upload_extensions" v-slot="{ componentField, handleChange }">
       <FormItem>
-        <FormLabel>Allowed file upload extensions</FormLabel>
+        <FormLabel>
+          {{ t('admin.general.allowed_file_upload_extensions') }}
+        </FormLabel>
         <FormControl>
           <TagsInput :modelValue="componentField.modelValue" @update:modelValue="handleChange">
             <TagsInputItem v-for="item in componentField.modelValue" :key="item" :value="item">
@@ -136,7 +158,9 @@
             <TagsInputInput placeholder="jpg" />
           </TagsInput>
         </FormControl>
-        <FormDescription>Use `*` to allow any file.</FormDescription>
+        <FormDescription>
+          {{ t('admin.general.allowed_file_upload_extensions.description') }}
+        </FormDescription>
         <FormMessage />
       </FormItem>
     </FormField>
@@ -150,7 +174,7 @@ import { watch, ref, onMounted } from 'vue'
 import { Button } from '@/components/ui/button'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
-import { formSchema } from './formSchema.js'
+import { createFormSchema } from './formSchema.js'
 import {
   FormControl,
   FormField,
@@ -179,9 +203,11 @@ import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
 import { useEmitter } from '@/composables/useEmitter'
 import { handleHTTPError } from '@/utils/http'
 import { timeZones } from '@/constants/timezones.js'
+import { useI18n } from 'vue-i18n'
 import api from '@/api'
 
 const emitter = useEmitter()
+const { t } = useI18n()
 const businessHours = ref({})
 const formLoading = ref(false)
 const props = defineProps({
@@ -196,7 +222,7 @@ const props = defineProps({
   submitLabel: {
     type: String,
     required: false,
-    default: () => 'Submit'
+    default: ''
   },
   isLoading: {
     type: Boolean,
@@ -204,8 +230,9 @@ const props = defineProps({
   }
 })
 
+const submitLabel = props.submitLabel || t('globals.buttons.save')
 const form = useForm({
-  validationSchema: toTypedSchema(formSchema)
+  validationSchema: toTypedSchema(createFormSchema(t)),
 })
 
 onMounted(() => {
@@ -224,13 +251,11 @@ const fetchBusinessHours = async () => {
     // If unauthorized (no permission), show a toast message.
     if (error.response.status === 403) {
       emitter.emit(EMITTER_EVENTS.SHOW_TOAST, {
-        title: 'Unauthorized',
         variant: 'destructive',
-        description: 'You do not have permission to view business hours.'
+        description: t('admin.business_hours.unauthorized')
       })
     } else {
       emitter.emit(EMITTER_EVENTS.SHOW_TOAST, {
-        title: 'Could not fetch business hours',
         variant: 'destructive',
         description: handleHTTPError(error).message
       })
@@ -243,12 +268,10 @@ const onSubmit = form.handleSubmit(async (values) => {
     formLoading.value = true
     await props.submitForm(values)
     emitter.emit(EMITTER_EVENTS.SHOW_TOAST, {
-      title: 'Success',
-      description: 'Settings updated successfully'
+      description: t('admin.general.updated')
     })
   } catch (error) {
     emitter.emit(EMITTER_EVENTS.SHOW_TOAST, {
-      title: 'Error',
       variant: 'destructive',
       description: handleHTTPError(error).message
     })