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,7 +1057,12 @@ const CreateAlertRuleModal = ({ onClose, onSave }) => {
                     <div className="text-xs text-gray-500 mb-2">
                       Leave empty to monitor all drone types
                     </div>
-                    {droneTypes.map(droneType => (
+                    {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"
@@ -1054,7 +1078,8 @@ const CreateAlertRuleModal = ({ onClose, onSave }) => {
                             )}
                           </span>
                         </label>
-                    ))}
+                      ))
+                    )}
                   </div>
                 </div>