refactor(i18n): Improve multilingual support

application/src/components/services/add-service/ServiceBasicFields.tsx

@@ -3,22 +3,24 @@ import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/comp
 import { Input } from "@/components/ui/input";
 import { UseFormReturn } from "react-hook-form";
 import { ServiceFormData } from "./types";
+import {useLanguage} from "@/contexts/LanguageContext.tsx";
 
 interface ServiceBasicFieldsProps {
   form: UseFormReturn<ServiceFormData>;
 }
 
 export function ServiceBasicFields({ form }: ServiceBasicFieldsProps) {
+  const { t } = useLanguage();
   return (
     <FormField
       control={form.control}
       name="name"
       render={({ field }) => (
         <FormItem>
-          <FormLabel>Service Name</FormLabel>
+          <FormLabel>{t('serviceName')}</FormLabel>
           <FormControl>
             <Input 
-              placeholder="Enter a descriptive name for your service" 
+              placeholder={t('serviceNameDesc')}
               {...field} 
             />
           </FormControl>

application/src/components/services/add-service/ServiceConfigFields.tsx

@@ -6,12 +6,14 @@ import { UseFormReturn } from "react-hook-form";
 import { ServiceFormData } from "./types";
 import { ServiceUrlField } from "./ServiceUrlField";
 import { useState } from "react";
+import {useLanguage} from "@/contexts/LanguageContext.tsx";
 
 interface ServiceConfigFieldsProps {
   form: UseFormReturn<ServiceFormData>;
 }
 
 export function ServiceConfigFields({ form }: ServiceConfigFieldsProps) {
+  const { t } = useLanguage();
   const [isCustomInterval, setIsCustomInterval] = useState(false);
   const intervalValue = form.watch("interval");
 

application/src/components/services/add-service/ServiceForm.tsx

@@ -14,6 +14,7 @@ import { Service } from "@/types/service.types";
 import { ServiceRegionalFields } from "./ServiceRegionalFields";
 import { getServiceFormDefaults, mapServiceToFormData, mapFormDataToServiceData } from "./serviceFormUtils";
 import { useQueryClient } from "@tanstack/react-query";
+import {useLanguage} from "@/contexts/LanguageContext.tsx";
 
 interface ServiceFormProps {
   onSuccess: () => void;
@@ -30,6 +31,7 @@ export function ServiceForm({
   isEdit = false,
   onSubmitStart
 }: ServiceFormProps) {
+  const { t } = useLanguage();
   const { toast } = useToast();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const queryClient = useQueryClient();
@@ -124,23 +126,23 @@ export function ServiceForm({
       <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6 pb-6">
         <div className="space-y-6">
           <div className="space-y-4">
-            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">Basic Information</h3>
+            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">{t('basicInformation')}</h3>
             <ServiceBasicFields form={form} />
             <ServiceTypeField form={form} />
           </div>
           
           <div className="space-y-4">
-            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">Configuration</h3>
+            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">{t('configuration')}</h3>
             <ServiceConfigFields form={form} />
           </div>
 
           <div className="space-y-4">
-            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">Regional Monitoring</h3>
+            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">{t('regionalMonitoring')}</h3>
             <ServiceRegionalFields form={form} />
           </div>
           
           <div className="space-y-4">
-            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">Notifications</h3>
+            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">{t('notifications')}</h3>
             <ServiceNotificationFields form={form} />
           </div>
         </div>

application/src/translations/de/services.ts

@@ -4,6 +4,7 @@ import { ServicesTranslations } from '../types/services';
 export const servicesTranslations: ServicesTranslations = {
 // Dienst-Tabelle
   serviceName: "Dienstname",
+  serviceNameDesc: "Geben Sie einen aussagekräftigen Namen für Ihren Service ein",
   serviceType: "Diensttyp",
   serviceStatus: "Dienststatus",
   responseTime: "Antwortzeit",

application/src/translations/en/services.ts

@@ -3,6 +3,7 @@ import { ServicesTranslations } from '../types/services';
 
 export const servicesTranslations: ServicesTranslations = {
   serviceName: "Service Name",
+  serviceNameDesc: "Enter a descriptive name for your service",
   serviceType: "Service Type",
   serviceStatus: "Service Status",
   responseTime: "Response Time",

application/src/translations/ja/services.ts

@@ -2,6 +2,7 @@ import { ServicesTranslations } from '../types/services';
 
 export const servicesTranslations: ServicesTranslations = {
   serviceName: "サービス名",
+  serviceNameDesc: "サービスのわかりやすい名前を入力してください",
   serviceType: "サービスタイプ",
   serviceStatus: "サービスステータス",
   responseTime: "応答時間",

application/src/translations/km/services.ts

@@ -3,6 +3,7 @@ import { ServicesTranslations } from '../types/services';
 
 export const servicesTranslations: ServicesTranslations = {
   serviceName: "ឈ្មោះសេវាកម្ម",
+  serviceNameDesc: "បញ្ចូលឈ្មោះពិពណ៌នាសម្រាប់សេវាកម្មរបស់អ្នក",
   serviceType: "ប្រភេទសេវាកម្ម",
   serviceStatus: "ស្ថានភាពសេវាកម្ម",
   responseTime: "ពេលវេលាឆ្លើយតប",

application/src/translations/types/services.ts

@@ -1,6 +1,7 @@
 
 export interface ServicesTranslations {
   serviceName: string;
+  serviceNameDesc: string;
   serviceType: string;
   serviceStatus: string;
   responseTime: string;

application/src/translations/zhcn/services.ts

@@ -3,6 +3,7 @@ import { ServicesTranslations } from '../types/services';
 
 export const servicesTranslations: ServicesTranslations = {
   serviceName: "服务名称",
+  serviceNameDesc: "为你的服务输入一个描述性名称",
   serviceType: "服务类型",
   serviceStatus: "服务状态",
   responseTime: "响应时间",