Fix: Display new service immediately

- Ensure that newly created services are immediately visible in the services table list on the Uptime Monitoring dashboard, without requiring a manual refresh or a delay.

application/src/components/services/AddServiceDialog.tsx

@@ -8,6 +8,7 @@ import {
 } from "@/components/ui/dialog";
 import { ServiceForm } from "./ServiceForm";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { useQueryClient } from "@tanstack/react-query";
 
 interface AddServiceDialogProps {
   open: boolean;
@@ -15,7 +16,11 @@ interface AddServiceDialogProps {
 }
 
 export function AddServiceDialog({ open, onOpenChange }: AddServiceDialogProps) {
-  const handleSuccess = () => {
+  const queryClient = useQueryClient();
+  const handleSuccess = async () => {
+    // Immediately invalidate and refetch services data
+    await queryClient.invalidateQueries({ queryKey: ["services"] });
+    await queryClient.refetchQueries({ queryKey: ["services"] });
     onOpenChange(false);
   };
 

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

@@ -13,6 +13,7 @@ import { serviceService } from "@/services/serviceService";
 import { Service } from "@/types/service.types";
 import { ServiceRegionalFields } from "./ServiceRegionalFields";
 import { getServiceFormDefaults, mapServiceToFormData, mapFormDataToServiceData } from "./serviceFormUtils";
+import { useQueryClient } from "@tanstack/react-query";
 
 interface ServiceFormProps {
   onSuccess: () => void;
@@ -31,6 +32,7 @@ export function ServiceForm({
 }: ServiceFormProps) {
   const { toast } = useToast();
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const queryClient = useQueryClient();
 
   // Initialize form with default values
   const form = useForm<ServiceFormData>({
@@ -91,6 +93,16 @@ export function ServiceForm({
         });
       }
       
+      // Force immediate refresh of services data
+      queryClient.setQueryData(["services"], (oldData: any) => {
+        // Invalidate the cache to force a fresh fetch
+        return undefined;
+      });
+      
+      // Invalidate and refetch services query
+      await queryClient.invalidateQueries({ queryKey: ["services"] });
+      await queryClient.refetchQueries({ queryKey: ["services"] });
+
       onSuccess();
       if (!isEdit) {
         form.reset();