Fix jwt-token

client/src/pages/Alerts.jsx

@@ -89,6 +89,37 @@ const Alerts = () => {
     setExpandedGroups(newExpanded);
   };
 
+  // Get drone type information with visual styling
+  const getDroneTypeInfo = (detection) => {
+    if (!detection || detection.drone_type === undefined) {
+      return { name: 'Unknown', color: 'gray', bgColor: 'bg-gray-100', textColor: 'text-gray-600', icon: '🔍' };
+    }
+
+    // Map drone types based on the backend droneTypes utility
+    const droneTypeMap = {
+      0: { name: 'Unknown', color: 'gray', bgColor: 'bg-gray-100', textColor: 'text-gray-600', icon: '🔍' },
+      1: { name: 'Generic', color: 'blue', bgColor: 'bg-blue-100', textColor: 'text-blue-800', icon: '🚁' },
+      2: { name: 'Orlan', color: 'red', bgColor: 'bg-red-100', textColor: 'text-red-800', icon: '⚠️' },
+      3: { name: 'Zala', color: 'orange', bgColor: 'bg-orange-100', textColor: 'text-orange-800', icon: '🔶' },
+      4: { name: 'Forpost', color: 'purple', bgColor: 'bg-purple-100', textColor: 'text-purple-800', icon: '🟣' },
+      5: { name: 'Inokhodets', color: 'indigo', bgColor: 'bg-indigo-100', textColor: 'text-indigo-800', icon: '🔷' },
+      6: { name: 'Lancet', color: 'red', bgColor: 'bg-red-200', textColor: 'text-red-900', icon: '💥' },
+      7: { name: 'Shahed', color: 'yellow', bgColor: 'bg-yellow-100', textColor: 'text-yellow-800', icon: '⚡' },
+      8: { name: 'Geran', color: 'amber', bgColor: 'bg-amber-100', textColor: 'text-amber-800', icon: '🟨' },
+      9: { name: 'Kub', color: 'green', bgColor: 'bg-green-100', textColor: 'text-green-800', icon: '🟢' },
+      10: { name: 'X-UAV', color: 'teal', bgColor: 'bg-teal-100', textColor: 'text-teal-800', icon: '🔷' },
+      11: { name: 'SuperCam', color: 'cyan', bgColor: 'bg-cyan-100', textColor: 'text-cyan-800', icon: '📷' },
+      12: { name: 'Eleron', color: 'lime', bgColor: 'bg-lime-100', textColor: 'text-lime-800', icon: '🟩' },
+      13: { name: 'DJI', color: 'blue', bgColor: 'bg-blue-200', textColor: 'text-blue-900', icon: '📱' },
+      14: { name: 'Autel', color: 'violet', bgColor: 'bg-violet-100', textColor: 'text-violet-800', icon: '🟪' },
+      15: { name: 'Parrot', color: 'emerald', bgColor: 'bg-emerald-100', textColor: 'text-emerald-800', icon: '🦜' },
+      16: { name: 'Skydio', color: 'sky', bgColor: 'bg-sky-100', textColor: 'text-sky-800', icon: '☁️' },
+      17: { name: 'CryptoOrlan', color: 'red', bgColor: 'bg-red-300', textColor: 'text-red-900', icon: '🔴' }
+    };
+
+    return droneTypeMap[detection.drone_type] || droneTypeMap[0];
+  };
+
   const handleDeleteRule = async (ruleId) => {
     if (window.confirm('Are you sure you want to delete this alert rule?')) {
       try {
@@ -399,6 +430,7 @@ const Alerts = () => {
                     <th>{t('alerts.type')}</th>
                     <th>{t('alerts.recipient')}</th>
                     <th>{t('alerts.rule')}</th>
+                    <th>Drone Type</th>
                     <th>{t('alerts.droneId')}</th>
                     <th>{t('alerts.detection')}</th>
                     <th>{t('alerts.message')}</th>
@@ -471,6 +503,30 @@ const Alerts = () => {
                               {primaryAlert.rule?.name || t('alerts.unknownRule')}
                             </div>
                           </td>
+                          <td>
+                            {(() => {
+                              const droneTypeInfo = getDroneTypeInfo(primaryAlert.detection);
+                              return (
+                                <div className="flex items-center space-x-2">
+                                  <span className={`px-3 py-1 rounded-full text-sm font-semibold ${droneTypeInfo.bgColor} ${droneTypeInfo.textColor} border-2 border-${droneTypeInfo.color}-300`}>
+                                    {droneTypeInfo.icon} {droneTypeInfo.name}
+                                  </span>
+                                  {droneTypeInfo.name === 'Orlan' && (
+                                    <span className="text-red-600 font-bold text-xs">⚠️ MILITARY</span>
+                                  )}
+                                  {droneTypeInfo.name === 'Lancet' && (
+                                    <span className="text-red-600 font-bold text-xs">💥 KAMIKAZE</span>
+                                  )}
+                                  {droneTypeInfo.name === 'CryptoOrlan' && (
+                                    <span className="text-red-600 font-bold text-xs">🔴 ENCRYPTED</span>
+                                  )}
+                                  {droneTypeInfo.name === 'DJI' && (
+                                    <span className="text-blue-600 font-medium text-xs">📱 COMMERCIAL</span>
+                                  )}
+                                </div>
+                              );
+                            })()}
+                          </td>
                           <td>
                             <div className="text-sm text-gray-900">
                               {primaryAlert.detection?.drone_id ? (
@@ -545,6 +601,18 @@ const Alerts = () => {
                                 {alert.rule?.name || t('alerts.unknownRule')}
                               </div>
                             </td>
+                            <td>
+                              {(() => {
+                                const droneTypeInfo = getDroneTypeInfo(alert.detection);
+                                return (
+                                  <div className="flex items-center space-x-1">
+                                    <span className={`px-2 py-1 rounded text-xs font-medium ${droneTypeInfo.bgColor} ${droneTypeInfo.textColor} opacity-80`}>
+                                      {droneTypeInfo.icon} {droneTypeInfo.name}
+                                    </span>
+                                  </div>
+                                );
+                              })()}
+                            </td>
                             <td>
                               <div className="text-sm text-gray-700">
                                 {alert.detection?.drone_id ? (