feat: enhance login redirection and add loading state to tables

src/app/(auth)/login/page.tsx

@@ -4,10 +4,11 @@ import Form from "#/components/form/form"
 import { loginSchema } from "#/schema"
 import { useMutation } from "@tanstack/react-query"
 import { signIn } from "next-auth/react"
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 
 export default function LoginPage() {
     const router = useRouter()
+    const params = useSearchParams().get("redirect_to");
 
     const mutation = useMutation({
         mutationKey: ['login'],
@@ -26,7 +27,11 @@ export default function LoginPage() {
                     console.error(errorMessage)
                     throw new Error(result.error)
                 } else {
-                    router.push('/admin/home')
+                    if (params) {
+                        router.push(params);
+                      } else {
+                        router.push('/admin/home')
+                      }
                 }
                 return result
             } catch (error: any) {
@@ -47,7 +52,7 @@ export default function LoginPage() {
         <div>
             <Form
                 title="Connexion"
-                className="bg-white p-10 shadow-2xl w-3/4 lg:w-lg"
+                formClassName="bg-white p-10 shadow-2xl w-3/4 lg:w-lg"
                 fields={[
                     {
                         label: "Email",
@@ -65,7 +70,7 @@ export default function LoginPage() {
                 ]}
                 submit={mutation.mutate} 
                 schema={loginSchema}
-                child={<button type="submit" className="btn-auth">Connexion</button>}
+                child={<button type="submit" className="btn-auth mt-4">Connexion</button>}
              />
         </div>
     )

src/app/admin/admins/page.tsx

@@ -298,6 +298,7 @@ export default function Admins() {
       columns={columns}
       data={users || []}
       pageSize={5}
+      isDataLoading={isLoading}
       header={(table) => {
         const selectedIds = table
           .getRowModel()

src/app/admin/home/page.tsx

@@ -187,6 +187,7 @@ export default function HomePage () {
 
       <Table 
         columns={columns} 
+        isDataLoading={isLoading}
         data={companies || []} 
         pageSize={5}
       />

src/app/admin/layout.tsx

@@ -1,9 +1,24 @@
-import { ReactNode } from "react";
+"use client"
+
+import { ReactNode, useEffect } from "react";
 import "../../assets/css/admin.css"
 import Sidebar from "../../components/admin/sidebar";
 import Header from "../../components/admin/adminHeader";
+import { signOutFunc } from "#/lib/function";
+import { usePathname } from "next/navigation";
+import { useSession } from "next-auth/react";
 
 export default function Dashboard({ children }: { children: ReactNode }) {
+  const { status, data } = useSession();
+  const path = usePathname();
+
+  useEffect(() => {
+    if (status !== "loading") {
+      if (status === "unauthenticated" || (data && !data.user.access_token)) {
+        signOutFunc();
+      }
+    }
+  }, [data, status, path]);
 
   return (
 

src/app/admin/organizations/page.tsx

@@ -1,3 +1,4 @@
+"use client";
 
 import { useState } from "react";
 import Image from "next/image";
@@ -11,16 +12,14 @@ import { Modal } from "#/components/modal";
 import Table from "#/components/table/table";
 import Form from "#/components/form/form";
 import { icons } from "#/assets/icons";
-import { adminSchema, companySchema } from "#/schema";
+import { companySchema } from "#/schema";
 import { Admin, Company } from "#/types";
 import Link from "next/link";
 
 export default function Organizations() {
   const { data: session, status } = useSession();
-  const [open, setOpen] = useState(false);
   const [openModal, setOpenModal] = useState(false);
   const [openDeleteModal, setOpenDeleteModal] = useState(false);
-  const [openEditModal, setOpenEditModal] = useState(false);
   const [selectedAdminId, setSelectedAdminId] = useState<string | null>(null);
 
   const queryClient = useQueryClient();
@@ -105,34 +104,6 @@ export default function Organizations() {
     },
   });
 
-  const updateMutation = useMutation({
-    mutationFn: async (data: {
-      id: string;
-      last_name: string;
-      first_name: string;
-      email: string;
-    }) => {
-      try {
-        const response = await axios.put(
-          `https://private-docs-api.intside.co/companies/${data.id}/`,
-          data,
-          { headers: { Authorization: `Bearer ${session?.user.access_token}` } }
-        );
-
-        if (response.status === 200 || response.status === 201) {
-          console.log("modification réussie !");
-          setOpenEditModal(false);
-        }
-      } catch (error) {
-        console.error("Erreur lors de la mise à jour", error);
-      }
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["organizations"] });
-      refetch();
-    },
-  });
-
   const deleteMutation = useMutation({
     mutationFn: async (id: string) => {
       try {
@@ -268,14 +239,14 @@ export default function Organizations() {
                       <Image
                         alt="Supprimer"
                         src={icons.trash}
-                        className="cursor-pointer"
+                        className="cursor-pointer responsive-icon"
                       />
                     </div>
                   }
                   title="Supprimer une organisation"
                   content={
                     <div>
-                      <p>Voulez-vous vraiment supprimer cette organisation ?</p>
+                      <p className="text-center">Voulez-vous vraiment supprimer cette organisation ?</p>
                       <div className="grid grid-cols-2 gap-3 mt-3">
                         <button
                           className="bg-blue-100 text-blue-600 py-2 px-4 rounded-full cursor-pointer"
@@ -303,9 +274,141 @@ export default function Organizations() {
     }
   ]
 
-export default function Organizations (){
   return (
-    <>
+    <Table
-    </>
+      columns={columns}
-  )
+      data={companies || []}
+      pageSize={5}
+      isDataLoading={isLoading}
+      header={(table) => {
+        const selectedIds = table
+          .getRowModel()
+          .rows.filter((row) => row.getIsSelected())
+          .map((row) => row.original.id);
+
+        return (
+          <div className="grid grid-cols-1 lg:grid-cols-2 w-full space-y-3">
+            <div className="flex items-center space-x-3">
+              <input
+                type="checkbox"
+                checked={
+                  table.getIsAllPageRowsSelected() ||
+                  (table.getIsSomePageRowsSelected() && undefined)
+                }
+                onChange={(e) =>
+                  table.toggleAllPageRowsSelected(e.target.checked)
+                }
+              />
+
+              <DropdownMenu.Root>
+                <DropdownMenu.Trigger asChild>
+                  <p className="cursor-pointer rounded-full bg-gray-300 text-gray-500 p-2">
+                    Sélectionner une action
+                  </p>
+                </DropdownMenu.Trigger>
+
+                <DropdownMenu.Portal>
+                  <DropdownMenu.Content
+                    className="min-w-[150px] shadow-sm bg-white rounded-md p-1"
+                    sideOffset={5}
+                  >
+                    <DropdownMenu.Item
+                      onClick={() => bulkDeleteMutation.mutate(selectedIds)}
+                      className="p-2 text-[14px] cursor-pointer hover:bg-blue-100 hover:text-blue-500 rounded-md"
+                    >
+                      Supprimer
+                    </DropdownMenu.Item>
+                  </DropdownMenu.Content>
+                </DropdownMenu.Portal>
+              </DropdownMenu.Root>
+            </div>
+
+            <div className="flex justify-between lg:justify-end space-x-3">
+              {/* Modal d'ajout */}
+              <Modal
+                title="Ajouter une organisation"
+                open={openModal}
+                onOpenChange={(isOpen) => {
+                  if (!isOpen) {
+                    setOpenModal(false);
+                  }
+                }}
+                trigger={
+                  <div
+                    onClick={() => setOpenModal(true)}
+                    className="cursor-pointer p-3 bg-blue-600 text-white rounded-full"
+                  >
+                    Ajouter une organisation
+                  </div>
+                }
+                content={
+                  <Form
+                    fields={[
+                      {
+                        name: "name",
+                        label: "Nom de l'organisation",
+                        type: "text",
+                        placeholder: "Entrer le nom de l'organisation",
+                      },
+                      {
+                        name: "description",
+                        label: "Description",
+                        type: "textarea",
+                        placeholder: "Entrer la description de l'organisation",
+                      },
+                      {
+                        name: "status",
+                        label: "Statut",
+                        type: "select",
+                        options: [
+                          { label: "Actif", value: "active" },
+                          { label: "Inactif", value: "inactive" },
+                          { label: "En attente", value: "pending" },
+                          { label: "Bloqué", value: "blocked" },
+                        ],
+                      },
+                      {
+                        name: "owner",
+                        label: "Administrateur",
+                        type: "select",
+                        options: users?.map((user: { id: string; name: string }) => ({
+                          label: user.name,
+                          value: user.id,
+                        })) || [],
+                      },
+                    ]}
+                    submit={createMutation.mutate} // Le type est maintenant compatible
+                    schema={companySchema}
+                    child={
+                      <button
+                        type="submit"
+                        disabled={createMutation.isPending}
+                        className={`${createMutation.isPending ? "btn-auth-loading" : "btn-auth"} mt-4 cursor-pointer`}
+                      >
+                        {createMutation.isPending ? "En cours..." : "Créer l'organisation"}
+                      </button>
+                    }
+                  />
+                }
+              />
+
+              <FloatingLabelInput
+                name="search"
+                placeholder="Effectuer une recherche"
+                type="search"
+                onChange={(value) => table.setGlobalFilter(value)}
+                button={
+                  <Image
+                    alt="Filtrer"
+                    src={icons.filterIcon}
+                    className="cursor-pointer"
+                  />
+                }
+              />
+            </div>
+          </div>
+        );
+      }}
+    />
+  );
 }

src/components/admin/adminHeader.tsx

@@ -15,7 +15,7 @@ export default function AdminHeader() {
   return (
     <>
       <nav className="header r-flex-between px-[44px] py-[20px] ">
-        <h1 className="name text-[26px]">Bienvenue, <span>Ken B.</span> </h1>
+        <p className="name text-[26px]">Bienvenue, <span>Ken B.</span> </p>
         <div className="r-flex-between justify-center items-center r-gap-12">
           <Theme />
           {/* <ProfilePicture /> */}
@@ -43,7 +43,7 @@ export default function AdminHeader() {
                     </Link>
                   </DropdownMenu.Item>
                   <DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px]">
-                    <Link href="/login" className="d-flex items-start r-danger ">
+                    <Link href="#" className="d-flex items-start r-danger ">
                       <Image src={icons.logoutRed} alt="Deconnexion" />
                       Déconnexion
                     </Link>

src/components/form/form.tsx

@@ -10,7 +10,8 @@ export default function Form({
     className,
     child,
     title,
-    schema
+    schema,
+    formClassName
 } : FormProps) {
     const [errors, setErrors] = useState<Record<string, string>>({});
 
@@ -42,12 +43,12 @@ export default function Form({
     }
 
     return (
-        <form className={className} onSubmit={handleSubmit}>
+        <form onSubmit={handleSubmit} className={formClassName}>
             <div className="flex justify-center text-black">
                 <p className="text-3xl font-bold">{title}</p>
             </div>
 
-            <div className="flex flex-col gap-8 mt-2">
+            <div className={`space-y-8 my-2 ${className}`}>
 
                 {
                     fields.map((item, index) => (
@@ -67,8 +68,8 @@ export default function Form({
                         </div>
                     ))
                 }
-            {child}
             </div>
+            {child}
         </form>
 
     )

src/components/table/table.tsx

@@ -9,7 +9,7 @@ import {
     getFilteredRowModel,
     Table as TableType,
   } from "@tanstack/react-table"
-import { cloneElement, isValidElement, ReactNode, useEffect, useRef, useState } from "react";
+import { ReactNode, useEffect, useRef, useState } from "react";
 import { clsx, type ClassValue } from "clsx"
 import Image from "next/image";
 import { icons } from "#/assets/icons";
@@ -18,14 +18,16 @@ import { icons } from "#/assets/icons";
     columns: ColumnDef<TData, TValue>[]
     data: TData[],
     pageSize?: number,
-    header?: ReactNode | ((table: TableType<TData>) => ReactNode)
+    header?: ReactNode | ((table: TableType<TData>) => ReactNode),
+    isDataLoading?: boolean
   }
 
 export default function Table<TData, TValue>({
     columns,
     data,
     pageSize = 10,
-    header
+    header,
+    isDataLoading = true
   }: DataTableProps<TData, TValue>) {
     const [rowSelection, setRowSelection] = useState({})
     const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(
@@ -101,6 +103,12 @@ export default function Table<TData, TValue>({
                     <thead className="h-10">
                         {table.getHeaderGroups().map((headerGroup) => (
                             <tr key={headerGroup.id} className="rounded-lg">
+                                {header
+                                ?
+                                <th className="bg-[#E9F0FF] p-3 text-start first:rounded-tl-lg">
+                                    
+                                </th>
+                                :
                                 <th className="bg-[#E9F0FF] p-3 text-start first:rounded-tl-lg">
                                     <input 
                                         ref={headerCheckboxRef}
@@ -109,6 +117,7 @@ export default function Table<TData, TValue>({
                                         type="checkbox" name="" id="" 
                                     />
                                 </th>
+                                }
                                 {headerGroup.headers.map((header) => {
                                     return(
                                         <th key={header.id} className="bg-[#E9F0FF] p-3 text-start last:rounded-tr-lg">
@@ -141,9 +150,17 @@ export default function Table<TData, TValue>({
                                 </tr>
                             ))
                         )
+                        : isDataLoading ?
+                        (
+                            <tr>
+                                <td colSpan={columns.length} className="h-20 text-center">
+                                    Chargement...
+                                </td>
+                            </tr>
+                        ) 
                         : (
                             <tr>
-                                <td colSpan={columns.length}>
+                                <td colSpan={columns.length} className="h-20 text-center">
                                     Aucun résultats
                                 </td>
                             </tr>

src/lib/function.ts

@@ -0,0 +1,11 @@
+import { signOut } from "next-auth/react";
+
+export const signOutFunc = () => {
+    signOut({
+      callbackUrl: `/login?redirect_to=${
+        window.location.pathname === "/logout"
+          ? "/home"
+          : window.location.pathname
+      }`,
+    });
+  };

src/types/index.ts

@@ -23,7 +23,8 @@ export interface FormProps {
     submit: (param: any) => unknown,
     className?: string,
     child: ReactNode,
-    schema: ZodSchema
+    schema: ZodSchema,
+    formClassName?: string
 }
 
 export interface StatsType {