From 521ee5239868557d22c02fd68c93edf1d8e85b95 Mon Sep 17 00:00:00 2001
From: Alexander Borg <borg@servernet.se>
Date: Tue, 23 Sep 2025 12:42:34 +0200
Subject: [PATCH] Fix jwt-token

---
 client/src/components/AlertModals.jsx | 27 ++++++++++++++++++++++++---
 client/src/pages/Alerts.jsx           | 18 ++++++++++++++++++
 2 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/client/src/components/AlertModals.jsx b/client/src/components/AlertModals.jsx
index 4f77e92..ffdd246 100644
--- a/client/src/components/AlertModals.jsx
+++ b/client/src/components/AlertModals.jsx
@@ -173,6 +173,9 @@ export const EditAlertModal = ({ rule, onClose, onSuccess }) => {
               <label className="block text-sm font-medium text-gray-700 mb-1">
                 {t('alerts.priority')}
               </label>
+              <div className="text-xs text-gray-500 mb-1">
+                Determines alert urgency and notification routing
+              </div>
               <select
                 name="priority"
                 className="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-primary-500 focus:border-primary-500"
@@ -190,6 +193,9 @@ export const EditAlertModal = ({ rule, onClose, onSuccess }) => {
               <label className="block text-sm font-medium text-gray-700 mb-1">
                 {t('alerts.minThreatLevel')}
               </label>
+              <div className="text-xs text-gray-500 mb-1">
+                Only alert on drones at or above this threat level
+              </div>
               <select
                 name="min_threat_level"
                 className="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-primary-500 focus:border-primary-500"
@@ -210,10 +216,10 @@ export const EditAlertModal = ({ rule, onClose, onSuccess }) => {
             <label className="block text-sm font-medium text-gray-700 mb-2">
               {t('alerts.form.droneTypesFilter')}
             </label>
+            <div className="text-xs text-gray-500 mb-2">
+              {t('alerts.form.leaveEmptyAllTypes')} - Select specific drone types to monitor or leave empty to monitor all detected drones
+            </div>
             <div className="space-y-2">
-              <div className="text-xs text-gray-500 mb-2">
-                {t('alerts.form.leaveEmptyAllTypes')}
-              </div>
               {droneTypes.map(droneType => (
                 <label key={droneType.id} className="flex items-center">
                   <input
@@ -236,6 +242,9 @@ export const EditAlertModal = ({ rule, onClose, onSuccess }) => {
               <label className="block text-sm font-medium text-gray-700 mb-1">
                 Min Detections
               </label>
+              <div className="text-xs text-gray-500 mb-1">
+                Number of detections required within time window to trigger alert
+              </div>
               <input
                 type="number"
                 name="min_detections"
@@ -250,6 +259,9 @@ export const EditAlertModal = ({ rule, onClose, onSuccess }) => {
               <label className="block text-sm font-medium text-gray-700 mb-1">
                 Time Window (seconds)
               </label>
+              <div className="text-xs text-gray-500 mb-1">
+                Time period to count detections (e.g., 3 detections in 300 seconds)
+              </div>
               <input
                 type="number"
                 name="time_window"
@@ -265,6 +277,9 @@ export const EditAlertModal = ({ rule, onClose, onSuccess }) => {
             <label className="block text-sm font-medium text-gray-700 mb-1">
               Cooldown Period (seconds)
             </label>
+            <div className="text-xs text-gray-500 mb-1">
+              Minimum time between alerts to prevent spam (0 = no cooldown)
+            </div>
             <input
               type="number"
               name="cooldown_period"
@@ -279,6 +294,9 @@ export const EditAlertModal = ({ rule, onClose, onSuccess }) => {
             <label className="block text-sm font-medium text-gray-700 mb-2">
               Alert Channels
             </label>
+            <div className="text-xs text-gray-500 mb-2">
+              Choose how you want to receive alerts when this rule is triggered
+            </div>
             <div className="space-y-2">
               {['sms', 'email', 'webhook'].map(channel => (
                 <label key={channel} className="flex items-center">
@@ -290,6 +308,9 @@ export const EditAlertModal = ({ rule, onClose, onSuccess }) => {
                   />
                   <span className="ml-2 text-sm text-gray-700 capitalize">
                     {channel}
+                    {channel === 'sms' && <span className="text-xs text-gray-400 ml-1">(Text message)</span>}
+                    {channel === 'email' && <span className="text-xs text-gray-400 ml-1">(Email notification)</span>}
+                    {channel === 'webhook' && <span className="text-xs text-gray-400 ml-1">(HTTP POST to URL)</span>}
                   </span>
                 </label>
               ))}
diff --git a/client/src/pages/Alerts.jsx b/client/src/pages/Alerts.jsx
index a709841..df7a9df 100644
--- a/client/src/pages/Alerts.jsx
+++ b/client/src/pages/Alerts.jsx
@@ -970,6 +970,9 @@ const CreateAlertRuleModal = ({ onClose, onSave }) => {
                     <label className="block text-sm font-medium text-gray-700 mb-1">
                       Priority
                     </label>
+                    <div className="text-xs text-gray-500 mb-1">
+                      Determines alert urgency and notification routing
+                    </div>
                     <select
                       name="priority"
                       className="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-primary-500 focus:border-primary-500"
@@ -987,6 +990,9 @@ const CreateAlertRuleModal = ({ onClose, onSave }) => {
                     <label className="block text-sm font-medium text-gray-700 mb-1">
                       Min Detections
                     </label>
+                    <div className="text-xs text-gray-500 mb-1">
+                      Number of detections required within time window to trigger alert
+                    </div>
                     <input
                       type="number"
                       name="min_detections"
@@ -1003,6 +1009,9 @@ const CreateAlertRuleModal = ({ onClose, onSave }) => {
                     <label className="block text-sm font-medium text-gray-700 mb-1">
                       Time Window (seconds)
                     </label>
+                    <div className="text-xs text-gray-500 mb-1">
+                      Time period to count detections (e.g., 3 detections in 300 seconds)
+                    </div>
                     <input
                       type="number"
                       name="time_window"
@@ -1017,6 +1026,9 @@ const CreateAlertRuleModal = ({ onClose, onSave }) => {
                     <label className="block text-sm font-medium text-gray-700 mb-1">
                       Cooldown Period (seconds)
                     </label>
+                    <div className="text-xs text-gray-500 mb-1">
+                      Minimum time between alerts to prevent spam (0 = no cooldown)
+                    </div>
                     <input
                       type="number"
                       name="cooldown_period"
@@ -1032,6 +1044,9 @@ const CreateAlertRuleModal = ({ onClose, onSave }) => {
                   <label className="block text-sm font-medium text-gray-700 mb-2">
                     Alert Channels
                   </label>
+                  <div className="text-xs text-gray-500 mb-2">
+                    Choose how you want to receive alerts when this rule is triggered
+                  </div>
                   <div className="space-y-2">
                     {['sms', 'email', 'webhook'].map(channel => (
                       <label key={channel} className="flex items-center">
@@ -1043,6 +1058,9 @@ const CreateAlertRuleModal = ({ onClose, onSave }) => {
                         />
                         <span className="ml-2 text-sm text-gray-700 capitalize">
                           {channel}
+                          {channel === 'sms' && <span className="text-xs text-gray-400 ml-1">(Text message)</span>}
+                          {channel === 'email' && <span className="text-xs text-gray-400 ml-1">(Email notification)</span>}
+                          {channel === 'webhook' && <span className="text-xs text-gray-400 ml-1">(HTTP POST to URL)</span>}
                         </span>
                       </label>
                     ))}