Fix: Make service table row clickable

application/src/components/services/ServiceRow.tsx

@@ -43,22 +43,22 @@ export const ServiceRow = ({
       className={`border-b ${theme === 'dark' ? 'border-gray-800 hover:bg-gray-900/60' : 'border-gray-200 hover:bg-gray-50'} cursor-pointer`}
       onClick={handleRowClick}
     >
-      <TableCell className="font-medium py-4" onClick={(e) => e.stopPropagation()}>
+      <TableCell className="font-medium py-4">
         <ServiceRowHeader service={service} />
       </TableCell>
-      <TableCell onClick={(e) => e.stopPropagation()} className={`text-base py-4 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+      <TableCell className={`text-base py-4 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
         {service.type}
       </TableCell>
-      <TableCell onClick={(e) => e.stopPropagation()} className="py-4">
+      <TableCell className="py-4">
         <StatusBadge status={service.status} size="md" />
       </TableCell>
-      <TableCell onClick={(e) => e.stopPropagation()} className="py-4">
+      <TableCell className="py-4">
         <ServiceRowResponseTime responseTime={service.responseTime} />
       </TableCell>
-      <TableCell className="w-52 py-4" onClick={(e) => e.stopPropagation()}>
+      <TableCell className="w-52 py-4">
         <UptimeBar uptime={service.uptime} status={service.status} serviceId={service.id} />
       </TableCell>
-      <TableCell onClick={(e) => e.stopPropagation()} className="py-4">
+      <TableCell className="py-4">
         <LastCheckedTime 
           lastCheckedTime={displayTimestamp} 
           status={service.status} 
@@ -77,4 +77,4 @@ export const ServiceRow = ({
       </TableCell>
     </TableRow>
   );
-};
+};

application/src/components/services/hooks/useServiceActions.ts

@@ -1,4 +1,3 @@
-
 import { useState } from "react";
 import { useToast } from "@/hooks/use-toast";
 import { useNavigate } from "react-router-dom";
@@ -24,6 +23,7 @@ export function useServiceActions(initialServices: Service[]) {
   };
 
   const handleViewDetail = (service: Service) => {
+    console.log(`Navigating to service detail for service ID: ${service.id}`);
     navigate(`/service/${service.id}`);
   };
   
@@ -202,4 +202,4 @@ export function useServiceActions(initialServices: Service[]) {
     confirmDelete,
     handleMuteAlerts
   };
-}
+}