Fix jwt-token

client/src/components/AlertModals.jsx

@@ -311,7 +311,12 @@ export const DetectionDetailsModal = ({ detection, onClose }) => {
                 </div>
                 <div className="flex justify-between">
                   <span className="text-gray-500">Detected At:</span>
-                  <span>{format(new Date(detection.detected_at), 'MMM dd, yyyy HH:mm:ss')}</span>
+                  <span>
+                    {detection.detected_at 
+                      ? format(new Date(detection.detected_at), 'MMM dd, yyyy HH:mm:ss')
+                      : 'Unknown'
+                    }
+                  </span>
                 </div>
                 <div className="flex justify-between">
                   <span className="text-gray-500">Device:</span>

client/src/pages/Alerts.jsx

@@ -34,11 +34,15 @@ const Alerts = () => {
         api.get('/alerts/stats?hours=24')
       ]);
 
-      setAlertRules(rulesRes.data.data);
-      setAlertLogs(logsRes.data.data);
-      setAlertStats(statsRes.data.data);
+      setAlertRules(rulesRes.data?.data || []);
+      setAlertLogs(logsRes.data?.data || []);
+      setAlertStats(statsRes.data?.data || null);
     } catch (error) {
       console.error('Error fetching alert data:', error);
+      // Set default values on error
+      setAlertRules([]);
+      setAlertLogs([]);
+      setAlertStats(null);
     } finally {
       setLoading(false);
     }
@@ -169,7 +173,7 @@ const Alerts = () => {
                 : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
             }`}
           >
-            Alert Logs ({alertLogs.length})
+            Alert Logs ({alertLogs?.length || 0})
           </button>
         </nav>
       </div>
@@ -177,7 +181,7 @@ const Alerts = () => {
       {/* Alert Rules Tab */}
       {activeTab === 'rules' && (
         <div className="bg-white rounded-lg shadow overflow-hidden">
-          {alertRules.length === 0 ? (
+          {(alertRules?.length || 0) === 0 ? (
             <div className="text-center py-12">
               <BellIcon className="mx-auto h-12 w-12 text-gray-400" />
               <h3 className="mt-2 text-sm font-medium text-gray-900">No alert rules</h3>
@@ -209,7 +213,7 @@ const Alerts = () => {
                   </tr>
                 </thead>
                 <tbody>
-                  {alertRules.map((rule) => (
+                  {(alertRules || []).map((rule) => (
                     <tr key={rule.id} className="hover:bg-gray-50">
                       <td>
                         <div>
@@ -232,7 +236,7 @@ const Alerts = () => {
                       </td>
                       <td>
                         <div className="flex space-x-1">
-                          {rule.alert_channels.map((channel, index) => (
+                          {(rule.alert_channels || []).map((channel, index) => (
                             <span
                               key={index}
                               className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs"
@@ -297,7 +301,7 @@ const Alerts = () => {
       {/* Alert Logs Tab */}
       {activeTab === 'logs' && (
         <div className="bg-white rounded-lg shadow overflow-hidden">
-          {alertLogs.length === 0 ? (
+          {(alertLogs?.length || 0) === 0 ? (
             <div className="text-center py-12">
               <BellIcon className="mx-auto h-12 w-12 text-gray-400" />
               <h3 className="mt-2 text-sm font-medium text-gray-900">No alert logs</h3>
@@ -320,7 +324,7 @@ const Alerts = () => {
                   </tr>
                 </thead>
                 <tbody>
-                  {alertLogs.map((log) => (
+                  {(alertLogs || []).map((log) => (
                     <tr key={log.id} className="hover:bg-gray-50">
                       <td>
                         <div className="flex items-center space-x-2">