Enhance internationalization support and update user interface components

- Added new translations for survey permissions and alert messages in English, Portuguese, and Swahili.
- Updated the Reset Password and User Modals to utilize i18n for improved localization.
- Enhanced the Alert Distribution and Submission Trend charts with translated tooltips and labels for better user experience.
- Refactored various components to ensure consistent use of translation functions, improving maintainability and user accessibility.

Author: langbart

public/locales/en/admin.json

@@ -100,6 +100,9 @@
     "createUser": "Create New User",
     "editUser": "Edit User: ",
     "resetPasswordFor": "Reset Password for ",
-    "resetPasswordWarning": "Warning: This will immediately reset the password for {{username}}. Make sure to communicate the new password securely to the user."
+    "resetPasswordWarning": "Warning: This will immediately reset the password for {{username}}. Make sure to communicate the new password securely to the user.",
+    "surveyPermissionsTitle": "Survey Permissions:",
+    "surveyPermissionsAdminNote": "Administrators have access to all surveys.",
+    "surveyPermissionsUserNote": "Regular users are assigned surveys in Airtable."
   }
 }

public/locales/en/enumerators.json

@@ -34,26 +34,32 @@
     },
     "noData": "No data available for the selected period",
     "submissions": "Submissions",
-    "qualityScore": "Quality Score",
+    "qualityScore": "Quality Score (%)",
     "clickForDetails": "Click to view details",
     "cleanSubmissions": "Clean submissions",
     "withAlerts": "With alerts",
     "dragToZoom": "Drag to zoom into a specific period",
     "noSubmissionsDate": "No submissions on this date",
     "total": "Total:",
-    "submissionSuffix": "submission(s)",
+    "submission": "submission",
+    "submissionPlural": "submissions",
     "noAlerts": "No alerts in this period",
+    "noAlertsTitle": "No alerts",
     "noAlertsDescription": "All submissions in the selected date range passed validation without issues.",
     "noAlertsEnumerator": "This enumerator has no flagged submissions in the selected period.",
     "alertsDetected": "total alert(s) detected",
+    "alertCount": "{{count}} total alert",
+    "alertCountPlural": "{{count}} total alerts",
     "alertsTotal": "alert(s) total",
     "alert": "Alert: ",
     "alertType": "Alert Type: ",
     "count": "Count:",
     "share": "Share:",
+    "percentage": "Percentage",
     "outOfTotal": "Out of total",
     "dataLabel": "data label",
-    "submissionsOverDays": "submission(s) over X day(s)",
+    "submissionsOverDays": "{{count}} submission over {{days}} day",
+    "submissionsOverDaysPlural": "{{count}} submissions over {{days}} days",
     "peakDay": "🎯 Peak day",
     "dailyAverage": "Daily average"
   },

public/locales/pt/admin.json

@@ -100,6 +100,9 @@
     "createUser": "Criar Novo Utilizador",
     "editUser": "Editar Utilizador: ",
     "resetPasswordFor": "Repor Palavra-passe de ",
-    "resetPasswordWarning": "Aviso: Isto vai repor imediatamente a palavra-passe de {{username}}. Certifique-se de comunicar a nova palavra-passe ao utilizador de forma segura."
+    "resetPasswordWarning": "Aviso: Isto vai repor imediatamente a palavra-passe de {{username}}. Certifique-se de comunicar a nova palavra-passe ao utilizador de forma segura.",
+    "surveyPermissionsTitle": "Permissões de Inquéritos:",
+    "surveyPermissionsAdminNote": "Os administradores têm acesso a todos os inquéritos.",
+    "surveyPermissionsUserNote": "Utilizadores comuns recebem inquéritos atribuídos no Airtable."
   }
 }

public/locales/pt/enumerators.json

@@ -41,19 +41,25 @@
     "dragToZoom": "Arraste para aumentar um período específico",
     "noSubmissionsDate": "Sem submissões nesta data",
     "total": "Total:",
-    "submissionSuffix": "submissão(ões)",
+    "submission": "submissão",
+    "submissionPlural": "submissões",
     "noAlerts": "Sem alertas neste período",
+    "noAlertsTitle": "Sem alertas",
     "noAlertsDescription": "Todas as submissões no período selecionado passaram na validação sem problemas.",
     "noAlertsEnumerator": "Este enumerador não tem submissões sinalizadas no período selecionado.",
     "alertsDetected": "alerta(s) detetado(s) no total",
+    "alertCount": "{{count}} alerta no total",
+    "alertCountPlural": "{{count}} alertas no total",
     "alertsTotal": "alerta(s) no total",
     "alert": "Alerta: ",
     "alertType": "Tipo de Alerta: ",
     "count": "Contagem:",
     "share": "Percentagem:",
+    "percentage": "Percentagem",
     "outOfTotal": "Do total",
     "dataLabel": "rótulo de dados",
-    "submissionsOverDays": "submissão(ões) ao longo de X dia(s)",
+    "submissionsOverDays": "{{count}} submissão ao longo de {{days}} dia",
+    "submissionsOverDaysPlural": "{{count}} submissões ao longo de {{days}} dias",
     "peakDay": "🎯 Dia de pico",
     "dailyAverage": "Média diária"
   },

public/locales/sw/admin.json

@@ -100,6 +100,9 @@
     "createUser": "Unda Mtumiaji Mpya",
     "editUser": "Hariri Mtumiaji: ",
     "resetPasswordFor": "Weka Upya Nenosiri kwa ",
-    "resetPasswordWarning": "Onyo: Hii itaweka upya nenosiri la {{username}} mara moja. Hakikisha unawasilisha nenosiri jipya kwa usalama kwa mtumiaji."
+    "resetPasswordWarning": "Onyo: Hii itaweka upya nenosiri la {{username}} mara moja. Hakikisha unawasilisha nenosiri jipya kwa usalama kwa mtumiaji.",
+    "surveyPermissionsTitle": "Ruhusa za Tafiti:",
+    "surveyPermissionsAdminNote": "Wasimamizi wana ufikiaji wa tafiti zote.",
+    "surveyPermissionsUserNote": "Watumiaji wa kawaida wanapangiwa tafiti kwenye Airtable."
   }
 }

public/locales/sw/enumerators.json

@@ -41,19 +41,25 @@
     "dragToZoom": "Buruta ili kukuza kipindi mahususi",
     "noSubmissionsDate": "Hakuna uwasilishaji katika tarehe hii",
     "total": "Jumla:",
-    "submissionSuffix": "uwasilishaji",
+    "submission": "uwasilishaji",
+    "submissionPlural": "uwasilishaji",
     "noAlerts": "Hakuna tahadhari katika kipindi hiki",
+    "noAlertsTitle": "Hakuna tahadhari",
     "noAlertsDescription": "Uwasilishaji wote katika kipindi kilichochaguliwa wamepitisha uthibitishaji bila matatizo.",
     "noAlertsEnumerator": "Mkusanyaji huyu hana uwasilishaji ulioainishwa katika kipindi kilichochaguliwa.",
     "alertsDetected": "jumla ya tahadhari zilizogunduliwa",
+    "alertCount": "{{count}} tahadhari jumla",
+    "alertCountPlural": "{{count}} tahadhari jumla",
     "alertsTotal": "jumla ya tahadhari",
     "alert": "Tahadhari: ",
     "alertType": "Aina ya Tahadhari: ",
     "count": "Idadi:",
     "share": "Sehemu:",
+    "percentage": "Asilimia",
     "outOfTotal": "Kati ya jumla",
     "dataLabel": "lebo ya data",
-    "submissionsOverDays": "uwasilishaji katika siku X",
+    "submissionsOverDays": "{{count}} uwasilishaji katika siku {{days}}",
+    "submissionsOverDaysPlural": "{{count}} uwasilishaji katika siku {{days}}",
     "peakDay": "🎯 Siku yenye kilele",
     "dailyAverage": "Wastani wa kila siku"
   },

src/components/Admin/ResetPasswordModal.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { IconAlertTriangle } from '@tabler/icons-react';
 import { User } from '../../api/admin';
 import { getApiBaseUrl } from '../../utils/apiConfig';
@@ -10,6 +11,7 @@ interface ResetPasswordModalProps {
 }
 
 const ResetPasswordModal: React.FC<ResetPasswordModalProps> = ({ user, onClose, onSuccess }) => {
+  const { t } = useTranslation('admin');
   const [newPassword, setNewPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -21,12 +23,12 @@ const ResetPasswordModal: React.FC<ResetPasswordModalProps> = ({ user, onClose,
 
     // Validation
     if (!newPassword.trim() || newPassword.length < 8) {
-      setError('Password must be at least 8 characters');
+      setError(t('form.passwordMinLength'));
       return;
     }
 
     if (newPassword !== confirmPassword) {
-      setError('Passwords do not match');
+      setError(t('form.passwordsNoMatch'));
       return;
     }
 
@@ -37,7 +39,7 @@ const ResetPasswordModal: React.FC<ResetPasswordModalProps> = ({ user, onClose,
       const token = localStorage.getItem('authToken');
 
       if (!token) {
-        setError('Authentication token not found. Please log in again.');
+        setError(t('messages.tokenNotFound'));
         setIsSubmitting(false);
         return;
       }
@@ -53,29 +55,29 @@ const ResetPasswordModal: React.FC<ResetPasswordModalProps> = ({ user, onClose,
       });
 
       if (!response.ok) {
-        const errorData = await response.json().catch(() => ({ message: 'Failed to reset password' }));
+        const errorData = await response.json().catch(() => ({ message: t('form.resetPasswordFailed') }));
         if (response.status === 401) {
-          setError('Authentication failed. Please log in again.');
+          setError(t('form.authFailed'));
         } else if (response.status === 403) {
-          setError('You do not have permission to reset passwords.');
+          setError(t('form.permissionDenied'));
         } else {
-          setError(errorData.message || errorData.error || 'Failed to reset password');
+          setError(errorData.message || errorData.error || t('form.resetPasswordFailed'));
         }
         return;
       }
 
       const result = await response.json();
 
       if (result.success) {
-        alert(`Password reset successfully for ${user.username}`);
+        alert(`${t('form.passwordResetSuccess')}${user.username}`);
         onSuccess();
         onClose();
       } else {
-        setError(result.message || 'Failed to reset password');
+        setError(result.message || t('form.resetPasswordFailed'));
       }
     } catch (err) {
       console.error('Reset password error:', err);
-      setError('An unexpected error occurred. Please try again.');
+      setError(t('form.unexpectedError'));
     } finally {
       setIsSubmitting(false);
     }
@@ -91,7 +93,7 @@ const ResetPasswordModal: React.FC<ResetPasswordModalProps> = ({ user, onClose,
         <div className="modal-dialog modal-dialog-centered">
           <div className="modal-content">
             <div className="modal-header">
-              <h5 className="modal-title">Reset Password for {user.username}</h5>
+              <h5 className="modal-title">{t('modal.resetPasswordFor')}{user.username}</h5>
               <button type="button" className="btn-close" onClick={onClose}></button>
             </div>
             <form onSubmit={handleSubmit}>
@@ -106,37 +108,36 @@ const ResetPasswordModal: React.FC<ResetPasswordModalProps> = ({ user, onClose,
                 )}
 
                 <div className="mb-3">
-                  <label className="form-label required">New Password</label>
+                  <label className="form-label required">{t('form.newPassword')}</label>
                   <input
                     type="password"
                     className="form-control"
                     value={newPassword}
                     onChange={(e) => setNewPassword(e.target.value)}
                     disabled={isSubmitting}
-                    placeholder="Enter new password"
+                    placeholder={t('form.newPasswordPlaceholder')}
                     required
                   />
-                  <small className="form-hint">Minimum 8 characters</small>
+                  <small className="form-hint">{t('form.minCharacters')}</small>
                 </div>
 
                 <div className="mb-3">
-                  <label className="form-label required">Confirm Password</label>
+                  <label className="form-label required">{t('form.confirmPassword')}</label>
                   <input
                     type="password"
                     className="form-control"
                     value={confirmPassword}
                     onChange={(e) => setConfirmPassword(e.target.value)}
                     disabled={isSubmitting}
-                    placeholder="Confirm new password"
+                    placeholder={t('form.confirmPasswordPlaceholder')}
                     required
                   />
                 </div>
 
                 <div className="alert alert-warning">
                   <IconAlertTriangle className="icon alert-icon" size={24} stroke={2} />
                   <div>
-                    <strong>Warning:</strong> This will immediately reset the password for {user.username}.
-                    Make sure to communicate the new password securely to the user.
+                    {t('modal.resetPasswordWarning', { username: user.username })}
                   </div>
                 </div>
               </div>
@@ -148,7 +149,7 @@ const ResetPasswordModal: React.FC<ResetPasswordModalProps> = ({ user, onClose,
                   onClick={onClose}
                   disabled={isSubmitting}
                 >
-                  Cancel
+                  {t('form.cancel')}
                 </button>
                 <button
                   type="submit"
@@ -158,10 +159,10 @@ const ResetPasswordModal: React.FC<ResetPasswordModalProps> = ({ user, onClose,
                   {isSubmitting ? (
                     <>
                       <span className="spinner-border spinner-border-sm me-2"></span>
-                      Resetting...
+                      {t('form.resetting')}
                     </>
                   ) : (
-                    'Reset Password'
+                    t('form.resetPassword')
                   )}
                 </button>
               </div>