refactor(add-service): Refactor ServiceForm.tsx to support internationalization

- Extract ServiceForm.tsx validation logic into the custom hook useServiceSchema
- Add internationalization support and move error messages to translation files

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

@@ -3,7 +3,7 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useState, useEffect } from "react";
 import { useToast } from "@/hooks/use-toast";
-import { serviceSchema, ServiceFormData } from "./types";
+import { useServiceSchema, ServiceFormData } from "./types";
 import { ServiceBasicFields } from "./ServiceBasicFields";
 import { ServiceTypeField } from "./ServiceTypeField";
 import { ServiceConfigFields } from "./ServiceConfigFields";
@@ -36,6 +36,8 @@ export function ServiceForm({
   const [isSubmitting, setIsSubmitting] = useState(false);
   const queryClient = useQueryClient();
 
+	const serviceSchema = useServiceSchema();
+
   // Initialize form with default values
   const form = useForm<ServiceFormData>({
     resolver: zodResolver(serviceSchema),

application/src/components/services/add-service/types.ts

@@ -1,22 +1,42 @@
-
 import { z } from "zod";
+import type { ZodSchema } from "zod";
+import { useLanguage } from "@/contexts/LanguageContext";
 
-export const serviceSchema = z.object({
-  name: z.string().min(1, "Service name is required"),
-  type: z.enum(["http", "ping", "tcp", "dns"]),
-  url: z.string().min(1, "URL/Domain/Host is required").refine((value) => {
-    // Basic validation - more specific validation can be added per type
-    return value.trim().length > 0;
-  }, "Please enter a valid URL, hostname, or domain"),
-  port: z.string().optional(),
-  interval: z.string(),
-  retries: z.string(),
-  notificationStatus: z.enum(["enabled", "disabled"]).optional(),
-  notificationChannels: z.array(z.string()).optional(),
-  alertTemplate: z.string().optional(),
-  // Regional monitoring fields - now supports multiple agents
-  regionalMonitoringEnabled: z.boolean().optional(),
-  regionalAgents: z.array(z.string()).optional(),
-});
 
-export type ServiceFormData = z.infer<typeof serviceSchema>;
+export type ServiceFormData = {
+  name: string;
+  type: "http" | "ping" | "tcp" | "dns";
+  url: string;
+  port?: string;
+  interval: string;
+  retries: string;
+  notificationStatus?: "enabled" | "disabled";
+  notificationChannels?: string[];
+  alertTemplate?: string;
+  regionalMonitoringEnabled?: boolean;
+  regionalAgents?: string[];
+};
+
+// Hook to use the schema with translations
+export const useServiceSchema = () => {
+  const { t } = useLanguage();
+  return z.object({
+      name: z.string().min(1, t("serviceNameRequired")),
+      type: z.enum(["http", "ping", "tcp", "dns"]),
+      url: z.string()
+        .min(1, t("urlDomainHostRequired"))
+        .refine(
+          (value) => value.trim().length > 0,
+          t("enterValidUrlHostnameDomain")
+        ),
+      port: z.string().optional(),
+      interval: z.string(),
+      retries: z.string(),
+      notificationStatus: z.enum(["enabled", "disabled"]).optional(),
+      notificationChannels: z.array(z.string()).optional(),
+      alertTemplate: z.string().optional(),
+      // Regional monitoring fields - now supports multiple agents
+      regionalMonitoringEnabled: z.boolean().optional(),
+      regionalAgents: z.array(z.string()).optional(),
+    });
+};