Add working test

webui/src/pages/Machines/Machines.jsx

@@ -1,4 +1,5 @@
 import React, {useState, useEffect, useContext} from 'react';
+import {useNavigate} from 'react-router-dom';
 import {UserContext} from '@/common/contexts/UserContext.jsx';
 import {useToast} from '@/common/contexts/ToastContext.jsx';
 import {getRequest, postRequest, deleteRequest} from '@/common/utils/RequestUtil.js';
@@ -28,6 +29,7 @@ import './styles.sass';
 export const Machines = () => {
     const {user: currentUser} = useContext(UserContext);
     const toast = useToast();
+    const navigate = useNavigate();
     const [machines, setMachines] = useState([]);
     const [loading, setLoading] = useState(true);
     const [showCreateModal, setShowCreateModal] = useState(false);
@@ -179,6 +181,14 @@ export const Machines = () => {
         }
     };
 
+    const handleMachineClick = (machineId) => {
+        navigate(`/machines/${machineId}`);
+    };
+
+    const handleActionClick = (e) => {
+        e.stopPropagation(); // Prevent navigation when clicking action buttons
+    };
+
     const handleInputChange = (e) => {
         const {name, value} = e.target;
         setFormData(prev => ({
@@ -220,7 +230,13 @@ export const Machines = () => {
 
             <Grid minWidth="400px">
                 {machines.map(machine => (
-                    <Card key={machine.id} hover className="machine-card">
+                    <Card 
+                        key={machine.id} 
+                        hover 
+                        className="machine-card"
+                        onClick={() => handleMachineClick(machine.id)}
+                        style={{ cursor: 'pointer' }}
+                    >
                         <CardHeader>
                             <div className="machine-card-header">
                                 <div className="machine-icon">
@@ -233,7 +249,7 @@ export const Machines = () => {
                                         <span className="uuid-text">{formatUuid(machine.uuid)}</span>
                                     </div>
                                 </div>
-                                <div className="machine-actions">
+                                <div className="machine-actions" onClick={handleActionClick}>
                                     <Button
                                         variant="subtle"
                                         size="sm"