feat: gestion des no data dans les table [#33]

Front-End/src/components/Inscription/FilesToUpload.js

@@ -81,7 +81,7 @@ export default function FilesToUpload({
     },
     {
       name: 'Priorité',
-      transform: (row) => (
+      transform: (row) =>
         row.is_required ? (
           <span className="flex items-center justify-center">
             <span className="px-2 py-1 rounded-full bg-red-100 text-red-600 text-xs font-semibold">
@@ -94,8 +94,7 @@ export default function FilesToUpload({
               Optionnel
             </span>
           </span>
-        )
-      ),
+        ),
     },
     {
       name: 'Statut',

Front-End/src/components/Structure/Configuration/ClassesSection.js

@@ -16,6 +16,7 @@ import { FE_ADMIN_STRUCTURE_SCHOOLCLASS_MANAGEMENT_URL } from '@/utils/Url';
 import { usePlanning } from '@/context/PlanningContext';
 import { useClasses } from '@/context/ClassesContext';
 import { useRouter } from 'next/navigation';
+import AlertMessage from '@/components/AlertMessage';
 
 const ItemTypes = {
   TEACHER: 'teacher',
@@ -544,6 +545,13 @@ const ClassesSection = ({
           data={newClass ? [newClass, ...classes] : classes}
           columns={columns}
           renderCell={renderClassCell}
+          emptyMessage={
+            <AlertMessage
+              type="warning"
+              title="Aucune classe enregistrée"
+              message="Veuillez procéder à la création d'une nouvelle classe."
+            />
+          }
         />
         <Popup
           visible={popupVisible}

Front-End/src/components/Structure/Configuration/SpecialitiesSection.js

@@ -9,6 +9,7 @@ import SpecialityItem from '@/components/Structure/Configuration/SpecialityItem'
 import { useEstablishment } from '@/context/EstablishmentContext';
 import logger from '@/utils/logger';
 import SectionHeader from '@/components/SectionHeader';
+import AlertMessage from '@/components/AlertMessage';
 
 const SpecialitiesSection = ({
   specialities,
@@ -255,6 +256,13 @@ const SpecialitiesSection = ({
           data={newSpeciality ? [newSpeciality, ...specialities] : specialities}
           columns={columns}
           renderCell={renderSpecialityCell}
+          emptyMessage={
+            <AlertMessage
+              type="warning"
+              title="Aucune spécialité enregistrée"
+              message="Veuillez procéder à la création d'une nouvelle spécialité."
+            />
+          }
         />
         <Popup
           visible={popupVisible}

Front-End/src/components/Structure/Configuration/TeachersSection.js

@@ -12,6 +12,7 @@ import TeacherItem from './TeacherItem';
 import logger from '@/utils/logger';
 import { useEstablishment } from '@/context/EstablishmentContext';
 import SectionHeader from '@/components/SectionHeader';
+import AlertMessage from '@/components/AlertMessage';
 
 const ItemTypes = {
   SPECIALITY: 'speciality',
@@ -579,6 +580,13 @@ const TeachersSection = ({
           data={newTeacher ? [newTeacher, ...teachers] : teachers}
           columns={columns}
           renderCell={renderTeacherCell}
+          emptyMessage={
+            <AlertMessage
+              type="warning"
+              title="Aucun enseignant enregistré"
+              message="Veuillez procéder à la création d'un nouvel enseignant."
+            />
+          }
         />
         <Popup
           visible={popupVisible}

Front-End/src/components/Structure/Files/FilesGroupsManagement.js

@@ -30,6 +30,7 @@ import SectionHeader from '@/components/SectionHeader';
 import Popup from '@/components/Popup';
 import Loader from '@/components/Loader';
 import { useNotification } from '@/context/NotificationContext';
+import AlertMessage from '@/components/AlertMessage';
 
 export default function FilesGroupsManagement({
   csrfToken,
@@ -542,7 +543,17 @@ export default function FilesGroupsManagement({
           buttonOpeningModal={true}
           onClick={() => setIsGroupModalOpen(true)}
         />
-        <Table data={groups} columns={columnsGroups} />
+        <Table
+          data={groups}
+          columns={columnsGroups}
+          emptyMessage={
+            <AlertMessage
+              type="warning"
+              title="Aucun dossier d'inscription enregistré"
+              message="Veuillez procéder à la création d'un nouveau dossier d'inscription"
+            />
+          }
+        />
       </div>
 
       {/* Section Fichiers */}
@@ -558,7 +569,17 @@ export default function FilesGroupsManagement({
             setIsEditing(false);
           }}
         />
-        <Table data={filteredFiles} columns={columnsFiles} />
+        <Table
+          data={filteredFiles}
+          columns={columnsFiles}
+          emptyMessage={
+            <AlertMessage
+              type="warning"
+              title="Aucun formulaire enregistré"
+              message="Veuillez procéder à la création d'un nouveau formulaire à signer"
+            />
+          }
+        />
       </div>
 
       {/* Section Pièces à fournir */}

Front-End/src/components/Structure/Files/ParentFilesSection.js

@@ -10,6 +10,7 @@ import { useCsrfToken } from '@/context/CsrfContext';
 import SectionHeader from '@/components/SectionHeader';
 import ToggleSwitch from '@/components/ToggleSwitch';
 import { useNotification } from '@/context/NotificationContext';
+import AlertMessage from '@/components/AlertMessage';
 
 export default function ParentFilesSection({
   parentFiles,
@@ -49,7 +50,7 @@ export default function ParentFilesSection({
   const handleSaveDocument = () => {
     if (!formData.name) {
       showNotification(
-        'Veuillez saisir un nom de document pour valider l\'opération',
+        "Veuillez saisir un nom de document pour valider l'opération",
         'error',
         'Erreur'
       );
@@ -57,7 +58,7 @@ export default function ParentFilesSection({
     }
     if (selectedGroups.length === 0) {
       showNotification(
-        'Veuillez sélectionner au moins un dossier d\'inscription pour valider l\'opération',
+        "Veuillez sélectionner au moins un dossier d'inscription pour valider l'opération",
         'error',
         'Erreur'
       );
@@ -267,7 +268,11 @@ export default function ParentFilesSection({
                   setRemovePopupOnConfirm(() => () => {
                     handleRemoveDocument(document.id)
                       .then(() => {
-                        showNotification('Le document "${document.name}" a été correctement supprimé.', 'success', 'Succès');
+                        showNotification(
+                          'Le document "${document.name}" a été correctement supprimé.',
+                          'success',
+                          'Succès'
+                        );
                         setRemovePopupVisible(false);
                       })
                       .catch((error) => {
@@ -334,6 +339,13 @@ export default function ParentFilesSection({
           editingDocumentId === 'new' ? [formData, ...parentFiles] : parentFiles
         }
         columns={columnsRequiredDocuments}
+        emptyMessage={
+          <AlertMessage
+            type="warning"
+            title="Aucune pièce à fournir enregistrée"
+            message="Veuillez procéder à la création de nouvelles pièces à fournir par les parents"
+          />
+        }
       />
       <Popup
         visible={removePopupVisible}

Front-End/src/components/Structure/Tarification/DiscountsSection.js

@@ -7,6 +7,7 @@ import InputText from '@/components/InputText';
 import logger from '@/utils/logger';
 import SectionHeader from '@/components/SectionHeader';
 import { useEstablishment } from '@/context/EstablishmentContext';
+import AlertMessage from '@/components/AlertMessage';
 
 const DiscountsSection = ({
   discounts,
@@ -344,6 +345,25 @@ const DiscountsSection = ({
         { name: 'ACTIONS', label: 'Actions' },
       ];
 
+  let emptyMessage;
+  if (type === 0) {
+    emptyMessage = (
+      <AlertMessage
+        type="info"
+        title="Aucune réduction enregistrée"
+        message="Aucune réduction sur les frais d'inscription n'a été enregistrée"
+      />
+    );
+  } else {
+    emptyMessage = (
+      <AlertMessage
+        type="info"
+        title="Aucune réduction enregistrée"
+        message="Aucune réduction sur les frais de scolarité n'a été enregistrée"
+      />
+    );
+  }
+
   return (
     <div className="space-y-4">
       {!subscriptionMode && (
@@ -361,6 +381,7 @@ const DiscountsSection = ({
         columns={columns}
         renderCell={renderDiscountCell}
         defaultTheme="bg-yellow-50"
+        emptyMessage={emptyMessage}
       />
       <Popup
         visible={popupVisible}

Front-End/src/components/Structure/Tarification/FeesSection.js

@@ -7,11 +7,11 @@ import InputText from '@/components/InputText';
 import logger from '@/utils/logger';
 import SectionHeader from '@/components/SectionHeader';
 import { useEstablishment } from '@/context/EstablishmentContext';
+import AlertMessage from '@/components/AlertMessage';
 
 const FeesSection = ({
   fees,
   setFees,
-  discounts,
   handleCreate,
   handleEdit,
   handleDelete,
@@ -317,6 +317,25 @@ const FeesSection = ({
         { name: 'ACTIONS', label: 'Actions' },
       ];
 
+  let emptyMessage;
+  if (type === 0) {
+    emptyMessage = (
+      <AlertMessage
+        type="warning"
+        title="Aucun frais d'inscription enregistré"
+        message="Veuillez procéder à la création de nouveaux frais d'inscription"
+      />
+    );
+  } else {
+    emptyMessage = (
+      <AlertMessage
+        type="warning"
+        title="Aucun frais de scolarité enregistré"
+        message="Veuillez procéder à la création de nouveaux frais de scolarité"
+      />
+    );
+  }
+
   return (
     <div className="space-y-4">
       {!subscriptionMode && (
@@ -332,6 +351,7 @@ const FeesSection = ({
         data={newFee ? [newFee, ...fees] : fees}
         columns={columns}
         renderCell={renderFeeCell}
+        emptyMessage={emptyMessage}
       />
       <Popup
         isOpen={popupVisible}

Front-End/src/components/Table.js

@@ -14,6 +14,7 @@ const Table = ({
   selectedRows,
   isSelectable = false,
   defaultTheme = 'bg-emerald-50', // Blanc cassé pour les lignes paires
+  emptyMessage = null,
 }) => {
   const handlePageChange = (newPage) => {
     onPageChange(newPage);
@@ -35,49 +36,55 @@ const Table = ({
           </tr>
         </thead>
         <tbody>
-          {data?.map((row, rowIndex) => (
-            <tr
-              key={rowIndex}
-              className={`
-                ${isSelectable ? 'cursor-pointer' : ''}
-                ${
-                  selectedRows?.includes(row.id)
-                    ? 'bg-emerald-200 text-white'
-                    : rowIndex % 2 === 0
-                      ? `${defaultTheme}`
-                      : 'bg-stone-50' // Blanc cassé pour les lignes impaires
-                }
-                ${isSelectable ? 'hover:bg-emerald-100' : ''}
-              `}
-              onClick={() => {
-                if (isSelectable && onRowClick) {
-                  if (selectedRows?.includes(row.id)) {
-                    onRowClick({ deselected: true, row });
-                  } else {
-                    onRowClick(row);
-                  }
-                }
-              }}
-            >
-              {columns.map((column, colIndex) => (
-                <td
-                  key={colIndex}
-                  className={`py-2 px-4 border-b border-gray-300 text-center text-sm ${
+          {data && data.length > 0 ? (
+            data.map((row, rowIndex) => (
+              <tr
+                key={rowIndex}
+                className={`
+                  ${isSelectable ? 'cursor-pointer' : ''}
+                  ${
                     selectedRows?.includes(row.id)
-                      ? 'text-white'
-                      : 'text-gray-700'
-                  }`}
-                >
-                  {renderCell
-                    ? renderCell(row, column.name)
-                    : column.transform(row)}
-                </td>
-              ))}
+                      ? 'bg-emerald-200 text-white'
+                      : rowIndex % 2 === 0
+                        ? `${defaultTheme}`
+                        : 'bg-stone-50'
+                  }
+                  ${isSelectable ? 'hover:bg-emerald-100' : ''}
+                `}
+                onClick={() => {
+                  if (isSelectable && onRowClick) {
+                    if (selectedRows?.includes(row.id)) {
+                      onRowClick({ deselected: true, row });
+                    } else {
+                      onRowClick(row);
+                    }
+                  }
+                }}
+              >
+                {columns.map((column, colIndex) => (
+                  <td
+                    key={colIndex}
+                    className={`py-2 px-4 border-b border-gray-300 text-center text-sm ${
+                      selectedRows?.includes(row.id)
+                        ? 'text-white'
+                        : 'text-gray-700'
+                    }`}
+                  >
+                    {renderCell
+                      ? renderCell(row, column.name)
+                      : column.transform(row)}
+                  </td>
+                ))}
+              </tr>
+            ))
+          ) : (
+            <tr>
+              <td colSpan={columns.length}>{emptyMessage}</td>
             </tr>
-          ))}
+          )}
         </tbody>
       </table>
-      {itemsPerPage > 0 && (
+      {itemsPerPage > 0 && data && data.length > 0 && (
         <Pagination
           currentPage={currentPage}
           totalPages={totalPages}