Fix jwt-token

client/src/pages/Alerts.jsx

@@ -796,6 +796,7 @@ const Alerts = () => {
 };
 
 const CreateAlertRuleModal = ({ onClose, onSave }) => {
+  const { t } = useTranslation();
   const [formData, setFormData] = useState({
     name: '',
     description: '',
@@ -820,17 +821,35 @@ const CreateAlertRuleModal = ({ onClose, onSave }) => {
     fetchDevicesAndDroneTypes();
   }, []);
 
+  // Debug effect to monitor state changes
+  useEffect(() => {
+    console.log('🔍 CreateAlertRuleModal state:', {
+      droneTypesCount: droneTypes.length,
+      devicesCount: devices.length,
+      loadingData,
+      droneTypesData: droneTypes
+    });
+  }, [droneTypes, devices, loadingData]);
+
   const fetchDevicesAndDroneTypes = async () => {
     try {
+      console.log('🔄 Fetching devices and drone types...');
+      
       const [devicesResponse, droneTypesResponse] = await Promise.all([
         api.get('/devices'),
         api.get('/drone-types')
       ]);
       
+      console.log('📊 Devices response:', devicesResponse.data);
+      console.log('📊 Drone types response:', droneTypesResponse.data);
+      
       setDevices(devicesResponse.data.data || []);
       setDroneTypes(droneTypesResponse.data.data || []);
+      
+      console.log('✅ Set devices:', devicesResponse.data.data?.length || 0);
+      console.log('✅ Set drone types:', droneTypesResponse.data.data?.length || 0);
     } catch (error) {
-      console.error('Error fetching devices and drone types:', error);
+      console.error('❌ Error fetching devices and drone types:', error);
     } finally {
       setLoadingData(false);
     }
@@ -1038,23 +1057,29 @@ const CreateAlertRuleModal = ({ onClose, onSave }) => {
                     <div className="text-xs text-gray-500 mb-2">
                       Leave empty to monitor all drone types
                     </div>
-                    {droneTypes.map(droneType => (
-                      <label key={droneType.id} className="flex items-center">
-                        <input
-                          type="checkbox"
-                          checked={formData.drone_types.includes(droneType.id)}
-                          onChange={(e) => handleDroneTypeChange(droneType.id, e.target.checked)}
-                          className="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
-                        />
-                        <span className="ml-2 text-sm text-gray-700">
-                          {droneType.name}
-                          <span className="text-xs text-gray-500 ml-1">({droneType.category})</span>
-                          {droneType.threat_level === 'critical' && (
-                            <span className="text-red-600 font-semibold ml-1">(⚠️ High Threat)</span>
-                          )}
-                        </span>
-                      </label>
-                    ))}
+                    {loadingData ? (
+                      <div className="text-sm text-gray-500">Loading drone types...</div>
+                    ) : droneTypes.length === 0 ? (
+                      <div className="text-sm text-red-500">No drone types available. Check API connection.</div>
+                    ) : (
+                      droneTypes.map(droneType => (
+                        <label key={droneType.id} className="flex items-center">
+                          <input
+                            type="checkbox"
+                            checked={formData.drone_types.includes(droneType.id)}
+                            onChange={(e) => handleDroneTypeChange(droneType.id, e.target.checked)}
+                            className="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
+                          />
+                          <span className="ml-2 text-sm text-gray-700">
+                            {droneType.name}
+                            <span className="text-xs text-gray-500 ml-1">({droneType.category})</span>
+                            {droneType.threat_level === 'critical' && (
+                              <span className="text-red-600 font-semibold ml-1">(⚠️ High Threat)</span>
+                            )}
+                          </span>
+                        </label>
+                      ))
+                    )}
                   </div>
                 </div>