feat: Messagerie WIP [#17]

Front-End/src/app/[locale]/admin/layout.js

@@ -151,7 +151,7 @@ export default function Layout({ children }) {
   return (
     <ProtectedRoute requiredRight={[RIGHTS.ADMIN, RIGHTS.TEACHER]}>
       {/* Topbar */}
-      <header className="absolute top-0 left-0 right-0 h-16 bg-white border-b border-gray-200 px-4 md:px-8 flex items-center justify-between z-10 box-border">
+      <header className="absolute top-0 left-64 right-0 h-16 bg-white border-b border-gray-200 px-4 md:px-8 flex items-center justify-between z-10 box-border">
         <div className="flex items-center">
           <button
             className="mr-4 md:hidden text-gray-600 hover:text-gray-900"
@@ -180,7 +180,7 @@ export default function Layout({ children }) {
 
       {/* Sidebar */}
       <div
-        className={`absolute top-16 bottom-16 left-0 z-30 w-64 bg-white border-r border-gray-200 box-border ${
+        className={`absolute top-0 bottom-0 left-0 z-30 w-64 bg-white border-r border-gray-200 box-border ${
           isSidebarOpen ? 'block' : 'hidden md:block'
         }`}
       >

Front-End/src/app/[locale]/admin/messagerie/page.js

@@ -1,10 +1,35 @@
+'use client';
 import React from 'react';
+import SidebarTabs from '@/components/SidebarTabs';
 import EmailSender from '@/components/Admin/EmailSender';
+import InstantMessaging from '@/components/Admin/InstantMessaging';
+import AnnouncementScheduler from '@/components/Admin/AnnouncementScheduler';
+
 export default function MessageriePage({ csrfToken }) {
+  const tabs = [
+    {
+      id: 'email',
+      label: 'Envoyer un Mail',
+      content: <EmailSender csrfToken={csrfToken} />,
+    },
+    {
+      id: 'instant',
+      label: 'Messagerie Instantanée',
+      content: <InstantMessaging csrfToken={csrfToken} />,
+    },
+    {
+      id: 'announcement',
+      label: 'Planifier une Annonce',
+      content: <AnnouncementScheduler csrfToken={csrfToken} />,
+    },
+  ];
+
   return (
-    <div className="p-6">
-      <h1 className="text-2xl font-bold mb-6">Messagerie Admin</h1>
-      <EmailSender csrfToken={csrfToken} />
+    <div className="flex h-full w-full">
+      <SidebarTabs
+        tabs={tabs}
+        onTabChange={(tabId) => console.log(`Onglet actif : ${tabId}`)}
+      />
     </div>
   );
 }

Front-End/src/app/[locale]/admin/settings/page.js

@@ -4,6 +4,7 @@ import Tab from '@/components/Tab';
 import TabContent from '@/components/TabContent';
 import Button from '@/components/Button';
 import InputText from '@/components/InputText';
+import CheckBox from '@/components/CheckBox'; // Import du composant CheckBox
 import logger from '@/utils/logger';
 import {
   fetchSmtpSettings,
@@ -24,7 +25,6 @@ export default function SettingsPage() {
   const [smtpPassword, setSmtpPassword] = useState('');
   const [useTls, setUseTls] = useState(true);
   const [useSsl, setUseSsl] = useState(false);
-  const [statusMessage, setStatusMessage] = useState('');
   const { selectedEstablishmentId } = useEstablishment();
   const csrfToken = useCsrfToken(); // Récupération du csrfToken
   const { showNotification } = useNotification();
@@ -35,7 +35,7 @@ export default function SettingsPage() {
   // Charger les paramètres SMTP existants
   useEffect(() => {
     if (activeTab === 'smtp') {
-      fetchSmtpSettings(csrfToken) // Passer le csrfToken ici
+      fetchSmtpSettings(csrfToken, selectedEstablishmentId) // Passer le csrfToken ici
         .then((data) => {
           setSmtpServer(data.smtp_server || '');
           setSmtpPort(data.smtp_port || '');
@@ -46,7 +46,11 @@ export default function SettingsPage() {
         })
         .catch((error) => {
           logger.error('Erreur lors du chargement des paramètres SMTP:', error);
-          setStatusMessage('Erreur lors du chargement des paramètres SMTP.');
+          showNotification(
+            'Erreur lors du chargement des paramètres SMTP.',
+            'error',
+            'Erreur'
+          );
         });
     }
   }, [activeTab, csrfToken]); // Ajouter csrfToken comme dépendance
@@ -113,7 +117,11 @@ export default function SettingsPage() {
 
     editSmtpSettings(smtpData, csrfToken) // Passer le csrfToken ici
       .then(() => {
-        setStatusMessage('Paramètres SMTP mis à jour avec succès.');
+        showNotification(
+          'Paramètres SMTP mis à jour avec succès.',
+          'success',
+          'Succès'
+        );
         logger.debug('SMTP Settings Updated:', smtpData);
       })
       .catch((error) => {
@@ -121,7 +129,11 @@ export default function SettingsPage() {
           'Erreur lors de la mise à jour des paramètres SMTP:',
           error
         );
-        setStatusMessage('Erreur lors de la mise à jour des paramètres SMTP.');
+        showNotification(
+          'Erreur lors de la mise à jour des paramètres SMTP.',
+          'error',
+          'Erreur'
+        );
       });
   };
 
@@ -164,48 +176,54 @@ export default function SettingsPage() {
         </TabContent>
         <TabContent isActive={activeTab === 'smtp'}>
           <form onSubmit={handleSmtpSubmit}>
-            <InputText
-              label="Serveur SMTP"
-              value={smtpServer}
-              onChange={handleSmtpServerChange}
-            />
-            <InputText
-              label="Port SMTP"
-              value={smtpPort}
-              onChange={handleSmtpPortChange}
-            />
-            <InputText
-              label="Utilisateur SMTP"
-              value={smtpUser}
-              onChange={handleSmtpUserChange}
-            />
-            <InputText
-              label="Mot de passe SMTP"
-              type="password"
-              value={smtpPassword}
-              onChange={handleSmtpPasswordChange}
-            />
-            <div className="flex items-center space-x-4">
-              <label>
-                <input
-                  type="checkbox"
-                  checked={useTls}
-                  onChange={handleUseTlsChange}
-                />
-                Utiliser TLS
-              </label>
-              <label>
-                <input
-                  type="checkbox"
-                  checked={useSsl}
-                  onChange={handleUseSslChange}
-                />
-                Utiliser SSL
-              </label>
+            <div className="grid grid-cols-2 gap-4">
+              <InputText
+                label="Serveur SMTP"
+                value={smtpServer}
+                onChange={handleSmtpServerChange}
+              />
+              <InputText
+                label="Port SMTP"
+                value={smtpPort}
+                onChange={handleSmtpPortChange}
+              />
+              <InputText
+                label="Utilisateur SMTP"
+                value={smtpUser}
+                onChange={handleSmtpUserChange}
+              />
+              <InputText
+                label="Mot de passe SMTP"
+                type="password"
+                value={smtpPassword}
+                onChange={handleSmtpPasswordChange}
+              />
             </div>
-            <Button type="submit" primary text="Mettre à jour"></Button>
+            <div className="mt-6 border-t pt-4">
+              <div className="flex items-center space-x-4">
+                <CheckBox
+                  item={{ id: 'useTls' }}
+                  formData={{ useTls }}
+                  handleChange={() => setUseTls((prev) => !prev)} // Inverser la valeur booléenne
+                  fieldName="useTls"
+                  itemLabelFunc={() => 'Utiliser TLS'}
+                />
+                <CheckBox
+                  item={{ id: 'useSsl' }}
+                  formData={{ useSsl }}
+                  handleChange={() => setUseSsl((prev) => !prev)} // Inverser la valeur booléenne
+                  fieldName="useSsl"
+                  itemLabelFunc={() => 'Utiliser SSL'}
+                />
+              </div>
+            </div>
+            <Button
+              type="submit"
+              primary
+              text="Mettre à jour"
+              className="mt-6"
+            ></Button>
           </form>
-          {statusMessage && <p className="mt-4 text-sm">{statusMessage}</p>}
         </TabContent>
       </div>
     </div>