Fix jwt-token

client/src/pages/Alerts.jsx

@@ -16,6 +16,10 @@ const Alerts = () => {
   const [loading, setLoading] = useState(true);
   const [activeTab, setActiveTab] = useState('rules');
   const [showCreateModal, setShowCreateModal] = useState(false);
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [editingRule, setEditingRule] = useState(null);
+  const [showDetectionModal, setShowDetectionModal] = useState(false);
+  const [selectedDetection, setSelectedDetection] = useState(null);
 
   useEffect(() => {
     fetchAlertData();
@@ -50,6 +54,21 @@ const Alerts = () => {
     }
   };
 
+  const handleEditRule = (rule) => {
+    setEditingRule(rule);
+    setShowEditModal(true);
+  };
+
+  const handleViewDetection = async (detectionId) => {
+    try {
+      const response = await api.get(`/detections/${detectionId}`);
+      setSelectedDetection(response.data.data);
+      setShowDetectionModal(true);
+    } catch (error) {
+      console.error('Error fetching detection details:', error);
+    }
+  };
+
   const getStatusIcon = (status) => {
     switch (status) {
       case 'sent':
@@ -252,10 +271,7 @@ const Alerts = () => {
                       <td>
                         <div className="flex space-x-2">
                           <button
-                            onClick={() => {
-                              // TODO: Edit rule
-                              console.log('Edit rule:', rule);
-                            }}
+                            onClick={() => handleEditRule(rule)}
                             className="text-primary-600 hover:text-primary-900 text-sm"
                           >
                             Edit
@@ -297,6 +313,7 @@ const Alerts = () => {
                     <th>Type</th>
                     <th>Recipient</th>
                     <th>Rule</th>
+                    <th>Detection</th>
                     <th>Message</th>
                     <th>Sent At</th>
                   </tr>
@@ -327,6 +344,18 @@ const Alerts = () => {
                           {log.rule?.name || 'Unknown Rule'}
                         </div>
                       </td>
+                      <td>
+                        {log.detection_id ? (
+                          <button
+                            onClick={() => handleViewDetection(log.detection_id)}
+                            className="text-primary-600 hover:text-primary-900 text-sm font-medium"
+                          >
+                            View Details
+                          </button>
+                        ) : (
+                          <span className="text-gray-400 text-sm">N/A</span>
+                        )}
+                      </td>
                       <td>
                         <div className="text-sm text-gray-900 max-w-xs truncate">
                           {log.message}