Fix jwt-token

client/src/pages/Alerts.jsx

@@ -7,7 +7,9 @@ import {
   BellIcon,
   CheckCircleIcon,
   XCircleIcon,
-  ExclamationTriangleIcon
+  ExclamationTriangleIcon,
+  ChevronDownIcon,
+  ChevronRightIcon
 } from '@heroicons/react/24/outline';
 import { EditAlertModal, DetectionDetailsModal } from '../components/AlertModals';
 
@@ -22,6 +24,7 @@ const Alerts = () => {
   const [editingRule, setEditingRule] = useState(null);
   const [showDetectionModal, setShowDetectionModal] = useState(false);
   const [selectedDetection, setSelectedDetection] = useState(null);
+  const [expandedGroups, setExpandedGroups] = useState(new Set());
 
   useEffect(() => {
     fetchAlertData();
@@ -76,6 +79,16 @@ const Alerts = () => {
     return groupedArrays;
   };
 
+  const toggleGroupExpansion = (groupIndex) => {
+    const newExpanded = new Set(expandedGroups);
+    if (newExpanded.has(groupIndex)) {
+      newExpanded.delete(groupIndex);
+    } else {
+      newExpanded.add(groupIndex);
+    }
+    setExpandedGroups(newExpanded);
+  };
+
   const handleDeleteRule = async (ruleId) => {
     if (window.confirm('Are you sure you want to delete this alert rule?')) {
       try {
@@ -371,8 +384,15 @@ const Alerts = () => {
               </p>
             </div>
           ) : (
-            <div className="table-responsive">
-              <table className="table">
+            <div>
+              <div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-md">
+                <p className="text-sm text-blue-700">
+                  💡 <strong>Alert Grouping:</strong> Related alerts (SMS, email, webhook) for the same detection event are grouped together. 
+                  Click the expand button (▶) or "+X more" badge to see all alerts in a group.
+                </p>
+              </div>
+              <div className="table-responsive">
+                <table className="table">
                 <thead>
                   <tr>
                     <th>{t('alerts.status')}</th>
@@ -397,14 +417,30 @@ const Alerts = () => {
                         <tr className="hover:bg-gray-50 border-b-2 border-gray-200">
                           <td>
                             <div className="flex items-center space-x-2">
+                              {relatedAlerts.length > 0 && (
+                                <button
+                                  onClick={() => toggleGroupExpansion(groupIndex)}
+                                  className="p-1 rounded hover:bg-gray-200 transition-colors"
+                                  title={expandedGroups.has(groupIndex) ? 'Collapse group' : 'Expand group'}
+                                >
+                                  {expandedGroups.has(groupIndex) ? (
+                                    <ChevronDownIcon className="h-4 w-4 text-gray-500" />
+                                  ) : (
+                                    <ChevronRightIcon className="h-4 w-4 text-gray-500" />
+                                  )}
+                                </button>
+                              )}
                               {getStatusIcon(primaryAlert.status)}
                               <span className="text-sm text-gray-900 capitalize">
                                 {primaryAlert.status}
                               </span>
                               {relatedAlerts.length > 0 && (
-                                <span className="ml-2 px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">
+                                <button
+                                  onClick={() => toggleGroupExpansion(groupIndex)}
+                                  className="ml-2 px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs hover:bg-blue-200 transition-colors cursor-pointer"
+                                >
                                   +{relatedAlerts.length} more
-                                </span>
+                                </button>
                               )}
                             </div>
                           </td>
@@ -413,7 +449,7 @@ const Alerts = () => {
                               <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">
                                 {primaryAlert.alert_type}
                               </span>
-                              {relatedAlerts.map((alert, idx) => (
+                              {!expandedGroups.has(groupIndex) && relatedAlerts.map((alert, idx) => (
                                 <span key={idx} className="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">
                                   {alert.alert_type}
                                 </span>
@@ -423,7 +459,7 @@ const Alerts = () => {
                           <td>
                             <div className="text-sm text-gray-900">
                               {primaryAlert.recipient}
-                              {relatedAlerts.length > 0 && relatedAlerts.some(a => a.recipient !== primaryAlert.recipient) && (
+                              {!expandedGroups.has(groupIndex) && relatedAlerts.length > 0 && relatedAlerts.some(a => a.recipient !== primaryAlert.recipient) && (
                                 <div className="text-xs text-gray-500 mt-1">
                                   +{relatedAlerts.filter(a => a.recipient !== primaryAlert.recipient).length} others
                                 </div>
@@ -483,8 +519,8 @@ const Alerts = () => {
                           </td>
                         </tr>
                         
-                        {/* Show related alerts as sub-rows if any */}
-                        {relatedAlerts.map((alert, alertIndex) => (
+                        {/* Show related alerts as sub-rows if expanded */}
+                        {expandedGroups.has(groupIndex) && relatedAlerts.map((alert, alertIndex) => (
                           <tr key={`related-${groupIndex}-${alertIndex}`} className="bg-gray-50 border-l-4 border-blue-200">
                             <td className="pl-8">
                               <div className="flex items-center space-x-2">
@@ -563,6 +599,7 @@ const Alerts = () => {
                 </tbody>
               </table>
             </div>
+            </div>
           )}
         </div>
       )}