refactor: adaptation mobile

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

@@ -2,8 +2,8 @@
 import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import Table from '@/components/Table';
-import { Edit } from 'lucide-react';
-import  StatusLabel  from '@/components/StatusLabel';
+import { Edit, Users } from 'lucide-react';
+import StatusLabel from '@/components/StatusLabel';
 import { FE_PARENTS_EDIT_INSCRIPTION_URL } from '@/utils/Url';
 import { fetchChildren } from '@/app/actions/subscriptionAction';
 import logger from '@/utils/logger';
@@ -11,10 +11,11 @@ import { useSession } from 'next-auth/react';
 import { FE_USERS_LOGIN_URL } from '@/utils/Url';
 
 export default function ParentHomePage() {
-  const [actions, setActions] = useState([]);
+
   const [children, setChildren] = useState([]);
   const { data: session, status } = useSession();
   const [userId, setUserId] = useState(null);
+  const [currentPage, setCurrentPage] = useState(1);
 
   const router = useRouter();
 
@@ -61,29 +62,62 @@ export default function ParentHomePage() {
     }
   };
 
-  return (
-    <div>
-      <div>
-        <h2 className="text-xl font-semibold mb-4">Dernières actions à effectuer</h2>
-        <Table data={actions} columns={actionColumns} itemsPerPage={5} />
-      </div>
+  // Définir les colonnes du tableau
+  const childrenColumns = [
+    { name: 'Nom', transform: (row) => `${row.student.last_name} ${row.student.first_name}` },
+    {
+      name: 'Statut',
+      transform: (row) => (
+        <div className="flex justify-center items-center">
+          <StatusLabel status={row.status} showDropdown={false}/>
+        </div>
+      )
+    },
+    {
+      name: 'Actions',
+      transform: (row) => (
+        <div className="flex justify-center">
+          <button
+            className="p-2 hover:bg-gray-100 rounded-full transition-colors"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleEdit(row.student.id);
+            }}
+            aria-label="Modifier"
+          >
+            <Edit className="h-5 w-5" />
+          </button>
+        </div>
+      )
+    }
+  ];
 
+  const itemsPerPage = 5;
+  const totalPages = Math.ceil(children.length / itemsPerPage) || 1;
+
+  const handlePageChange = (newPage) => {
+    setCurrentPage(newPage);
+  };
+
+  return (
+    <div className="px-2 py-4 md:px-4 max-w-full">
       <div>
-        <h2 className="text-xl font-semibold mb-4">Enfants</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {children.map((child) => (
-            <div key={child.student.id} className={`border p-4 rounded shadow ${getShadowColor(child.status)}`}>
-              <div className="flex justify-between items-center">
-                <h3 className="text-lg font-semibold">{child.student.last_name} {child.student.first_name}</h3>
-                <Edit className="cursor-pointer" onClick={() => handleEdit(child.student.id)} />
-              </div>
-                <StatusLabel status={child.status } showDropdown={false}/>
-            </div>
-          ))}
+        <h2 className="text-xl font-semibold mb-3 px-1 flex items-center gap-2">
+          <Users className="h-6 w-6 text-emerald-600" />
+          Enfants
+        </h2>
+        <div className="overflow-x-auto">
+          <Table
+            data={children}
+            columns={childrenColumns}
+            itemsPerPage={itemsPerPage}
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={handlePageChange}
+            defaultTheme="bg-gray-50"
+          />
         </div>
       </div>
     </div>
   );
-
-
 }