fix: merge

src/app/admin/admins/page.tsx

@@ -23,7 +23,7 @@ export default function Admins() {
   const [selectedAdminId, setSelectedAdminId] = useState<string | null>(null);
 
   const queryClient = useQueryClient();
-  
+
   const {
     data: users,
     refetch,
@@ -47,7 +47,6 @@ export default function Admins() {
     },
   });
 
-  
   const createMutation = useMutation({
     mutationFn: async (data: {
       last_name: string;
@@ -227,14 +226,18 @@ export default function Admins() {
                   submit={updateMutation.mutate}
                   schema={adminSchema}
                   child={
-                      <div className="flex justify-center">
+                    <div className="flex justify-center">
                       <button
-                      type="submit"
-                      disabled={updateMutation.isPending}
-                      className={`${updateMutation.isPending ? "btn-auth-loading" : "btn-auth"} cta modal-cta mt-4 cursor-pointer`}
-                    >
-                      {updateMutation.isPending ? "En cours..." : "Modifier"}
-                    </button>
+                        type="submit"
+                        disabled={updateMutation.isPending}
+                        className={`${
+                          updateMutation.isPending
+                            ? "btn-auth-loading"
+                            : "btn-auth"
+                        } cta modal-cta mt-4 cursor-pointer`}
+                      >
+                        {updateMutation.isPending ? "En cours..." : "Modifier"}
+                      </button>
                     </div>
                   }
                 />
@@ -267,7 +270,9 @@ export default function Admins() {
               title="Supprimer un admin"
               content={
                 <div>
-                  <p className="text-center">Voulez-vous vraiment supprimer cet admin ?</p>
+                  <p className="text-center">
+                    Voulez-vous vraiment supprimer cet admin ?
+                  </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"
@@ -356,10 +361,7 @@ export default function Admins() {
                   }
                 }}
                 trigger={
-                  <div
-                    onClick={() => setOpenModal(true)}
-                    className="cta"
-                  >
+                  <div onClick={() => setOpenModal(true)} className="cta">
                     Ajouter un admin
                   </div>
                 }
@@ -389,13 +391,19 @@ export default function Admins() {
                     schema={adminSchema}
                     child={
                       <div className="flex justify-center">
-                      <button
-                        type="submit"
-                        disabled={createMutation.isPending}
-                        className={`${createMutation.isPending ? "btn-auth-loading" : "btn-auth"} cta modal-cta mt-4 cursor-pointer`}
-                      >
-                        {createMutation.isPending ? "Création de l'admin..." : "Créer le compte"}
-                      </button>
+                        <button
+                          type="submit"
+                          disabled={createMutation.isPending}
+                          className={`${
+                            createMutation.isPending
+                              ? "btn-auth-loading"
+                              : "btn-auth"
+                          } cta modal-cta mt-4 cursor-pointer`}
+                        >
+                          {createMutation.isPending
+                            ? "Création de l'admin..."
+                            : "Créer le compte"}
+                        </button>
                       </div>
                     }
                   />

src/app/admin/home/page.tsx

@@ -1,209 +1,224 @@
-"use client"
+"use client";
 
-import { icons } from "#/assets/icons"
-import Statistics from "#/components/stats"
-import Table from "#/components/table/table"
-import { Company } from "#/types"
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
-import { ColumnDef } from "@tanstack/react-table"
-import axios from "axios"
-import { useSession } from "next-auth/react"
-import Image from "next/image"
-import { Modal } from "#/components/modal"
-import { useState } from "react"
+import { icons } from "#/assets/icons";
+import Statistics from "#/components/stats";
+import Table from "#/components/table/table";
+import { Company } from "#/types";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { ColumnDef } from "@tanstack/react-table";
+import axios from "axios";
+import { useSession } from "next-auth/react";
+import Image from "next/image";
+import { Modal } from "#/components/modal";
+import { useState } from "react";
 
-export default function HomePage () {
-
-  const {data: session, status} = useSession()
-  const queryClient = useQueryClient()
+export default function HomePage() {
+  const { data: session, status } = useSession();
+  const queryClient = useQueryClient();
   const [open, setOpen] = useState(false);
   const [selectedId, setSelectedId] = useState<string | null>(null);
 
-  console.log("Session = ", session)
+  console.log("Session = ", session);
 
-  const { data: companies, refetch, isLoading} = useQuery({
-    enabled: status === 'authenticated',
+  const {
+    data: companies,
+    refetch,
+    isLoading,
+  } = useQuery({
+    enabled: status === "authenticated",
     queryKey: ["companies"],
     queryFn: async () => {
-        try {
-            const response = await axios.get(
-                'https://private-docs-api.intside.co/companies', {
-                    headers: {
-                        'Authorization': `Bearer ${session?.user.access_token}`
-                    }
-                }
-            )
+      try {
+        const response = await axios.get(
+          "https://private-docs-api.intside.co/companies",
+          {
+            headers: {
+              Authorization: `Bearer ${session?.user.access_token}`,
+            },
+          }
+        );
 
-            if(response.data) {
-                return response.data.data as Company[]
-            }  
-        } catch (error) {
-            console.error(error)
+        if (response.data) {
+          return response.data.data as Company[];
         }
-    }
-  })
+      } catch (error) {
+        console.error(error);
+      }
+    },
+  });
 
   const { mutate } = useMutation({
     mutationFn: async (id: string) => {
       try {
         const response = await axios.delete(
-          `https://private-docs-api.intside.co/companies/${id}/`, {
+          `https://private-docs-api.intside.co/companies/${id}/`,
+          {
             headers: {
-                'Authorization': `Bearer ${session?.user.access_token}`
-            }
-        }
-        )
+              Authorization: `Bearer ${session?.user.access_token}`,
+            },
+          }
+        );
 
-        if(response.status === 200 || response.status === 201) {
-          console.log('Suppresion réussie !')
-          setOpen(false)
+        if (response.status === 200 || response.status === 201) {
+          console.log("Suppresion réussie !");
+          setOpen(false);
         }
       } catch (error) {
-        console.error(error)
+        console.error(error);
       }
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["companies"] })
-
-      refetch()
-    }
-  })
-  
+      queryClient.invalidateQueries({ queryKey: ["companies"] });
 
+      refetch();
+    },
+  });
 
   const columns: ColumnDef<Company>[] = [
-  {
-    accessorKey: "name",
-    header: "Organisations",
-  },
-  {
-    accessorKey: "total_users",
-    header: "Utilisateurs",
-  },
-  {
-    header: "Administrateurs",
-    cell: ({ row }) => {
-      const value = String(row.original.owner.first_name) + " " + String(row.original.owner.last_name)
-      const initials = String(row.original.owner.first_name[0]) + String(row.original.owner.last_name[0])
-      return(
-        <div className="flex space-x-2 items-center">
-          <div className="flex items-center justify-center bg-[#DCDCFE] text-[#246BFD] w-10 h-10 rounded-full">
-            {initials}
+    {
+      accessorKey: "name",
+      header: "Organisations",
+    },
+    {
+      accessorKey: "total_users",
+      header: "Utilisateurs",
+    },
+    {
+      header: "Administrateurs",
+      cell: ({ row }) => {
+        const value =
+          String(row.original.owner.first_name) +
+          " " +
+          String(row.original.owner.last_name);
+        const initials =
+          String(row.original.owner.first_name[0]) +
+          String(row.original.owner.last_name[0]);
+        return (
+          <div className="flex space-x-2 items-center">
+            <div className="flex items-center justify-center bg-[#DCDCFE] text-[#246BFD] w-10 h-10 rounded-full">
+              {initials}
+            </div>
+            <p>{value}</p>
           </div>
-          <p>{value}</p>
-        </div>
-      )
-    }
-  },
-  {
-    accessorKey: "owner.email",
-    header: "Adresse e-mail"
-  },
-  {
-    accessorKey: "status",
-    header: "Statut",
-    cell: ({ cell }) => {
-      const status = String(cell.getValue())
-      return (
-        <p
-          className={`rounded-full px-2 py-1 font-medium text-sm w-20 h-6 text-center
-            ${ 
-              status === "active" ? "bg-[#ECF9E8] text-[#49C91E]" :
-              status === "inactive" ? "bg-[#E7EBF3] text-[#9FA8BC]" : 
-              status === "pending" ? "bg-[#EAF7FC] text-[#30B2EA]" : 
-              status === "blocked" ? "bg-[#FDEBE8] text-[#F33F19]" : 
-              ""
+        );
+      },
+    },
+    {
+      accessorKey: "owner.email",
+      header: "Adresse e-mail",
+    },
+    {
+      accessorKey: "status",
+      header: "Statut",
+      cell: ({ cell }) => {
+        const status = String(cell.getValue());
+        return (
+          <p
+            className={`rounded-full px-2 py-1 font-medium text-sm w-20 h-6 text-center
+            ${
+              status === "active"
+                ? "bg-[#ECF9E8] text-[#49C91E]"
+                : status === "inactive"
+                ? "bg-[#E7EBF3] text-[#9FA8BC]"
+                : status === "pending"
+                ? "bg-[#EAF7FC] text-[#30B2EA]"
+                : status === "blocked"
+                ? "bg-[#FDEBE8] text-[#F33F19]"
+                : ""
             }
           `}
-        >
-          {
-            status === "active" ? "Actif" : 
-            status === "inactive" ? "Inactif" : 
-            status === "pending" ? "En attente" : 
-            status === "blocked" ? "Bloquée" : 
-            ""
-          }
-        </p>
-      )
-    }
-  },
-  {
-    id: "delete",
-    cell: ({ row }) => {
-      const id = String(row.original.id);
-      return (
-        <div className="relative p-2 cursor-pointer">
-          <Modal
-            open={selectedId === id}
-            onOpenChange={(isOpen) => {
-              if (!isOpen) {
-                setSelectedId(null);
-              }
-            }}
-            trigger={
-              <div
-                onClick={() => {
-                  setSelectedId(id);
-                }}
-              >
-                <Image
-                  alt=""
-                  src={icons.trash}
-                  className="cursor-pointer responsive-icon"
-                />
-              </div>
-            }
-            title={
-              <p className="font-bold text-3xl">
-                Supprimer cette organisation
-              </p>
-            }
-            content={
-              <div>
-                <p className="text-center">
-                  Voulez-vous vraiment supprimer l'organisation <span className="font-bold">{row.original.name}</span> ?
-                </p>
-
-                <div className="flex justify-between w-full pt-6 r-gap-24">
-                  <button
-                    className="cta modal-cta cancel"
-                    onClick={() => {
-                      setSelectedId(null);
-                    }}
-                  >
-                    Annuler
-                  </button>
-                  <button
-                    className="cta modal-cta danger"
-                    onClick={() => {
-                      mutate(id);
-                      setSelectedId(null);
-                    }}
-                  >
-                    Supprimer
-                  </button>
-                </div>
-              </div>
-            }
-          />
-        </div>
-      );
+          >
+            {status === "active"
+              ? "Actif"
+              : status === "inactive"
+              ? "Inactif"
+              : status === "pending"
+              ? "En attente"
+              : status === "blocked"
+              ? "Bloquée"
+              : ""}
+          </p>
+        );
+      },
     },
-  },
-]
+    {
+      id: "delete",
+      cell: ({ row }) => {
+        const id = String(row.original.id);
+        return (
+          <div className="relative p-2 cursor-pointer">
+            <Modal
+              open={selectedId === id}
+              onOpenChange={(isOpen) => {
+                if (!isOpen) {
+                  setSelectedId(null);
+                }
+              }}
+              trigger={
+                <div
+                  onClick={() => {
+                    setSelectedId(id);
+                  }}
+                >
+                  <Image
+                    alt=""
+                    src={icons.trash}
+                    className="cursor-pointer responsive-icon"
+                  />
+                </div>
+              }
+              title={
+                <p className="font-bold text-3xl">
+                  Supprimer cette organisation
+                </p>
+              }
+              content={
+                <div>
+                  <p className="text-center">
+                    Voulez-vous vraiment supprimer l'organisation{" "}
+                    <span className="font-bold">{row.original.name}</span> ?
+                  </p>
 
-  return(
+                  <div className="flex justify-between w-full pt-6 r-gap-24">
+                    <button
+                      className="cta modal-cta cancel"
+                      onClick={() => {
+                        setSelectedId(null);
+                      }}
+                    >
+                      Annuler
+                    </button>
+                    <button
+                      className="cta modal-cta danger"
+                      onClick={() => {
+                        mutate(id);
+                        setSelectedId(null);
+                      }}
+                    >
+                      Supprimer
+                    </button>
+                  </div>
+                </div>
+              }
+            />
+          </div>
+        );
+      },
+    },
+  ];
+
+  return (
     <div className="space-y-10">
       <Statistics />
 
       <p className="font-bold text-xl">Dernières organisations actives</p>
 
-      <Table 
-        columns={columns} 
+      <Table
+        columns={columns}
         isDataLoading={isLoading}
-        data={companies || []} 
+        data={companies || []}
         pageSize={5}
       />
     </div>
-  )
-}
+  );
+}

src/app/admin/organizations/[id]/update/page.tsx

@@ -1,41 +1,47 @@
-"use client"
-import { icons } from "#/assets/icons"
-import Image from "next/image"
+"use client";
+
 import axios from "axios";
 import { useSession } from "next-auth/react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Company, CompanyById } from "#/types";
-import FloatingLabelInput from "#/components/floatingLabelInput";
+import { Admin, Company, CompanyById } from "#/types";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
 import Form from "#/components/form/form";
-import { adminSchema } from "#/schema/loginSchema";
+import { adminUpdateSchema } from "#/schema/loginSchema";
+import { Modal } from "#/components/modal";
+import { useState } from "react";
+import { toast } from "sonner";
 
 export default function Update() {
-
   const pathname = usePathname();
+  const queryClient = useQueryClient();
 
   const segments = pathname.split("/");
   const uid = segments[segments.length - 2];
-  const queryClient = useQueryClient()
-
 
   const { data: session, status } = useSession();
+  const [openResetModal, setOpenResetModal] = useState(false);
+  const [openBlockModal, setOpenBlockModal] = useState(false);
 
-  const { data: companyInfos, refetch, isLoading } = useQuery({
-    enabled: status === 'authenticated',
-    queryKey: ["companyStats", session?.user.access_token],
+  const {
+    data: companyInfos,
+    isLoading: companyLoading,
+    refetch,
+  } = useQuery({
+    enabled: status === "authenticated",
+    queryKey: ["company"],
     queryFn: async () => {
       try {
         const response = await axios.get(
-          `https://private-docs-api.intside.co/users/${uid}`, {
-          headers: {
-            'Authorization': `Bearer ${session?.user.access_token}`
-          },
-          params: {
-            details: true
+          `https://private-docs-api.intside.co/companies/${uid}`,
+          {
+            headers: {
+              Authorization: `Bearer ${session?.user.access_token}`,
+            },
+            params: {
+              details: true,
+            },
           }
-        }
         );
 
         if (response.data) {
@@ -44,82 +50,300 @@ export default function Update() {
       } catch (error: any) {
         console.error(error);
       }
-    }
+    },
+  });
+
+  const { data: users } = useQuery({
+    enabled: status === "authenticated",
+    queryKey: ["organizations"],
+    queryFn: async () => {
+      try {
+        const response = await axios.get(
+          "https://private-docs-api.intside.co/users",
+          {
+            headers: { Authorization: `Bearer ${session?.user.access_token}` },
+          }
+        );
+        return response.data.data.map((user: Admin) => ({
+          id: user.id,
+          name: `${user.first_name} ${user.last_name}`,
+        }));
+      } catch (error) {
+        console.error(error);
+        return [];
+      }
+    },
   });
 
   const { mutate, isPending } = useMutation({
-    mutationFn: async (id: string) => {
+    mutationFn: async (data: { id: string }) => {
       try {
-        const response = await axios.delete(
-          `https://private-docs-api.intside.co/companies/${id}/`, {
-          headers: {
-            'Authorization': `Bearer ${session?.user.access_token}`
+        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('Suppresion réussie !')
+          console.log("Modif réussie !");
+          toast.success("Modification réussie !");
         }
       } catch (error) {
-        console.error(error)
+        console.error(error);
       }
     },
+
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["companies"] })
+      queryClient.invalidateQueries({ queryKey: ["company"] });
+      refetch();
+    },
+  });
 
-      refetch()
-    }
-  })
+  const blockMutation = useMutation({
+    mutationFn: async (data: { id: string; name: string; status: 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("Statut modifié !");
+          setOpenBlockModal(false);
+          toast.success("Organisation bloquée !");
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    },
+
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["company"] });
+      refetch();
+    },
+  });
+
+  const resetMutation = useMutation({
+    mutationFn: async (email: string) => {
+      try {
+        const response = await axios.post(
+          `https://private-docs-api.intside.co/users/reset_password/`,
+          {
+            email: email,
+          },
+          {
+            headers: {
+              Authorization: `Bearer ${session?.user.access_token}`,
+            },
+          }
+        );
+
+        if (response.status === 200 || response.status === 201) {
+          console.log("Reset réussie !");
+          setOpenResetModal(false);
+          toast.success("Email de réinitialisation envoyé !");
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    },
+  });
+
+  if (status === "loading" && companyLoading) {
+    return <div>Chargement...</div>;
+  }
 
   return (
     <>
-      {/* { company.map() } */}
-
-
-      {/* <Form
-        title="Connexion"
-        className="grid grid-cols-2"
-        fields={[
-          {
-            label: "Nom de l’organisation",
-            name: "company",
-            type: "text",
-            placeholder: "Nom de l'organisation",
-            defaultValue: companyInfos?.name
-          },
-          {
-            label: "Nom de l’admin",
-            name: "last_name",
-            type: "text",
-            placeholder: "Nom de l'admin",
-            defaultValue: companyInfos?.owner.last_name
-          },
-          {
-            label: "Prénom de l’admin",
-            name: "first_name",
-            type: "text",
-            placeholder: "Prénom de l'admin",
-            defaultValue: companyInfos?.owner.first_name
-          }
-        ]}
-        submit={mutate}
-        schema={adminSchema}
-        child={<button type="submit" className="btn-auth">Connexion</button>}
-      /> */}
-
-
       <div className="p-container ">
         <div className="r-flex-column">
           <div className="r-flex-between items-center bg-bluegray p-[24px] m-0 ">
             <div className=""></div>
-            <h2 className="admin-name text-[20px]" >{companyInfos?.name || "Pentatonic"}</h2>
-            <Link href={`http://localhost:3000/admin/organizations/${uid}/`} type="Link" className="cta cancel">
+            <h2 className="admin-name text-[20px]">
+              {companyInfos?.name || "Pentatonic"}
+            </h2>
+            <Link
+              href={`/admin/organizations/${uid}/`}
+              type="Link"
+              className="cta cancel"
+            >
               Annuler
             </Link>
           </div>
-          <div className="r-flex-column p-[32px] r-gap-24">
+
+          <div className="p-4">
+            <Form
+              className="grid grid-cols-2 gap-x-10"
+              fields={[
+                {
+                  label: "Nom de l'organisation",
+                  name: "name",
+                  type: "text",
+                  placeholder: "Nom de l'admin",
+                  defaultValue: companyInfos?.name,
+                },
+                {
+                  label: "Description",
+                  name: "description",
+                  type: "text",
+                  placeholder: "Description de l'organisation",
+                  defaultValue: companyInfos?.description,
+                },
+                {
+                  name: "status",
+                  label: "Statut",
+                  type: "select",
+                  defaultValue: companyInfos?.status,
+                  options: [
+                    { label: "Actif", value: "active" },
+                    { label: "Inactif", value: "inactive" },
+                    { label: "En attente", value: "pending" },
+                    { label: "Bloqué", value: "blocked" },
+                  ],
+                },
+                {
+                  name: "owner",
+                  label: "Administrateur",
+                  type: "select",
+                  defaultValue: companyInfos?.owner.id,
+                  options:
+                    users?.map((user: { id: string; name: string }) => ({
+                      label: user.name,
+                      value: user.id,
+                    })) || [],
+                },
+                {
+                  name: "id",
+                  type: "hidden",
+                  defaultValue: companyInfos?.id,
+                },
+              ]}
+              submit={mutate}
+              schema={adminUpdateSchema}
+              child={
+                <div className="ctas flex gap-4 mt-5">
+                  <button type="submit" className="cta" disabled={isPending}>
+                    {isPending ? "Modifications en cours..." : "Modifier"}
+                  </button>
+
+                  <Modal
+                    title="Réinitialiser le mot de passe"
+                    open={openResetModal}
+                    onOpenChange={setOpenResetModal}
+                    trigger={
+                      <button type="button" className="cta info">
+                        Mot de passe
+                      </button>
+                    }
+                    content={
+                      <div>
+                        <p className="text-center">
+                          Voulez-vous envoyer à{" "}
+                          <span className="font-bold">
+                            {companyInfos?.owner.last_name +
+                              " " +
+                              companyInfos?.owner.first_name +
+                              " "}
+                          </span>
+                          un lien de réinitialisation de mot de passe à son
+                          adresse email ?
+                        </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"
+                            onClick={() => {
+                              setOpenResetModal(false);
+                            }}
+                          >
+                            Annuler
+                          </button>
+                          <button
+                            className="bg-red-500 text-white py-2 px-4 rounded-full hover:bg-red-600 cursor-pointer"
+                            onClick={() => {
+                              if (companyInfos?.owner.email) {
+                                resetMutation.mutate(companyInfos.owner.email);
+                              }
+                            }}
+                            disabled={resetMutation.isPending}
+                          >
+                            {resetMutation.isPending
+                              ? "Envoi en cours..."
+                              : "Envoyer"}
+                          </button>
+                        </div>
+                      </div>
+                    }
+                  />
+
+                  <Modal
+                    title="Bloquer une organisation"
+                    open={openBlockModal}
+                    onOpenChange={setOpenBlockModal}
+                    trigger={
+                      <button type="button" className="cta danger">
+                        {blockMutation.isPending
+                              ? "En cours..."
+                              : companyInfos?.status === "blocked"
+                              ? "Supprimer"
+                              : "Bloquer"}
+                      </button>
+                    }
+                    content={
+                      <div>
+                        <p className="text-center">
+                          Voulez-vous bloquer l'organisation{" "}
+                          <span className="font-bold">
+                            {companyInfos?.name + " "}
+                          </span>{" "}
+                          ?
+                        </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"
+                            onClick={() => {
+                              setOpenBlockModal(false);
+                            }}
+                          >
+                            Annuler
+                          </button>
+                          <button
+                            className="bg-red-500 text-white py-2 px-4 rounded-full hover:bg-red-600 cursor-pointer"
+                            onClick={() => {
+                              if (companyInfos) {
+                                blockMutation.mutate({
+                                  id: companyInfos.id,
+                                  name: companyInfos.name,
+                                  status: "blocked",
+                                });
+                              }
+                            }}
+                            disabled={blockMutation.isPending}
+                          >
+                            {blockMutation.isPending
+                              ? "En cours..."
+                              : companyInfos?.status === "blocked"
+                              ? "Supprimer"
+                              : "Bloquer"}
+                          </button>
+                        </div>
+                      </div>
+                    }
+                  />
+                </div>
+              }
+            />
+          </div>
+
+          {/* <div className="r-flex-column p-[32px] r-gap-24">
             <div className="labels-container ">
               <div className="label-container">
                 <FloatingLabelInput label="Nom de l’organisation" name="org-name" type="text" placeholder="Intside" defaultValue={companyInfos?.name} />
@@ -139,9 +363,9 @@ export default function Update() {
               <button type="button" className="cta info">Mot de passe</button>
               <button type="button" className="cta danger">Bloquer</button>
             </div>
-          </div>
+          </div> */}
         </div>
       </div>
     </>
-  )
-}
+  );
+}

src/app/admin/organizations/page.tsx

@@ -16,7 +16,6 @@ import { companySchema } from "#/schema";
 import { Admin, Company } from "#/types";
 import Link from "next/link";
 
-
 export default function Organizations() {
   const { data: session, status } = useSession();
   const [openModal, setOpenModal] = useState(false);
@@ -52,9 +51,7 @@ export default function Organizations() {
     },
   });
 
-  const {
-    data: users,
-  } = useQuery({
+  const { data: users } = useQuery({
     enabled: status === "authenticated",
     queryKey: ["organizations"],
     queryFn: async () => {
@@ -168,115 +165,127 @@ export default function Organizations() {
     {
       header: "Administrateurs",
       cell: ({ row }) => {
-        const value = String(row.original.owner.first_name) + " " + String(row.original.owner.last_name)
-        const initials = String(row.original.owner.first_name[0]) + String(row.original.owner.last_name[0])
-        return(
+        const value =
+          String(row.original.owner.first_name) +
+          " " +
+          String(row.original.owner.last_name);
+        const initials =
+          String(row.original.owner.first_name[0]) +
+          String(row.original.owner.last_name[0]);
+        return (
           <div className="flex space-x-2 items-center">
             <div className="flex items-center justify-center bg-[#DCDCFE] text-[#246BFD] w-10 h-10 rounded-full">
               {initials}
             </div>
             <p>{value}</p>
           </div>
-        )
-      }
+        );
+      },
     },
     {
       accessorKey: "owner.email",
-      header: "Adresse e-mail"
+      header: "Adresse e-mail",
     },
     {
       accessorKey: "status",
       header: "Statut",
       cell: ({ cell }) => {
-        const status = String(cell.getValue())
+        const status = String(cell.getValue());
         return (
           <p
             className={`rounded-full px-2 py-1 font-medium text-sm w-20 h-6 text-center
-              ${ 
-                status === "active" ? "font-medium w-[80px] h-[24px] bg-[#ECF9E8] text-[#49C91E]" :
-                status === "inactive" ? "font-medium w-[80px] h-[24px] bg-[#E7EBF3] text-[#9FA8BC]" : 
-                status === "pending" ? "font-medium w-[80px] h-[24px] bg-[#EAF7FC] text-[#30B2EA]" : 
-                status === "blocked" ? "font-medium w-[80px] h-[24px] bg-[#FDEBE8] text-[#F33F19]" : 
-                ""
+              ${
+                status === "active"
+                  ? "font-medium w-[80px] h-[24px] bg-[#ECF9E8] text-[#49C91E]"
+                  : status === "inactive"
+                  ? "font-medium w-[80px] h-[24px] bg-[#E7EBF3] text-[#9FA8BC]"
+                  : status === "pending"
+                  ? "font-medium w-[80px] h-[24px] bg-[#EAF7FC] text-[#30B2EA]"
+                  : status === "blocked"
+                  ? "font-medium w-[80px] h-[24px] bg-[#FDEBE8] text-[#F33F19]"
+                  : ""
               }
             `}
           >
-            {
-              status === "active" ? "Actif" : 
-              status === "inactive" ? "Inactif" : 
-              status === "pending" ? "En attente" : 
-              status === "blocked" ? "Bloquée" : 
-              ""
-            }
+            {status === "active"
+              ? "Actif"
+              : status === "inactive"
+              ? "Inactif"
+              : status === "pending"
+              ? "En attente"
+              : status === "blocked"
+              ? "Bloquée"
+              : ""}
           </p>
-        )
-      }
+        );
+      },
     },
     {
       id: "delete",
       cell: ({ row }) => {
         const company = row.original;
-          return (
-            <div className="flex justify-end p-2 space-x-2"
-              // onClick={() => { mutate(id) }}
-            >
-
-              {/* Modal de suppression */}
-                <Modal
-                  open={openDeleteModal && selectedAdminId === company.id}
-                  onOpenChange={(isOpen) => {
-                    if (!isOpen) {
-                      setSelectedAdminId(null);
-                      setOpenDeleteModal(false);
-                    }
+        return (
+          <div
+            className="flex justify-end p-2 space-x-2"
+            // onClick={() => { mutate(id) }}
+          >
+            {/* Modal de suppression */}
+            <Modal
+              open={openDeleteModal && selectedAdminId === company.id}
+              onOpenChange={(isOpen) => {
+                if (!isOpen) {
+                  setSelectedAdminId(null);
+                  setOpenDeleteModal(false);
+                }
+              }}
+              trigger={
+                <div
+                  onClick={() => {
+                    setSelectedAdminId(company.id);
+                    setOpenDeleteModal(true);
                   }}
-                  trigger={
-                    <div
+                >
+                  <Image
+                    alt="Supprimer"
+                    src={icons.trash}
+                    className="cursor-pointer responsive-icon"
+                  />
+                </div>
+              }
+              title="Supprimer une organisation"
+              content={
+                <div>
+                  <p className="text-center">
+                    Voulez-vous vraiment supprimer l'organisation{" "}
+                    <span className="font-bold">{row.original.name}</span> ?
+                  </p>
+
+                  <div className="flex justify-between w-full pt-6 r-gap-24">
+                    <button
+                      className="cta modal-cta cancel"
                       onClick={() => {
-                        setSelectedAdminId(company.id);
-                        setOpenDeleteModal(true);
+                        setOpenDeleteModal(false);
                       }}
                     >
-                      <Image
-                        alt="Supprimer"
-                        src={icons.trash}
-                        className="cursor-pointer responsive-icon"
-                      />
-                    </div>
-                  }
-                  title="Supprimer une organisation"
-                  content={
-                    <div>
-                      <p className="text-center">
-                  Voulez-vous vraiment supprimer l'organisation <span className="font-bold">{row.original.name}</span> ?
-                </p>
-
-                <div className="flex justify-between w-full pt-6 r-gap-24">
-                  <button
-                    className="cta modal-cta cancel"
-                    onClick={() => {
-                            setOpenDeleteModal(false);
-                          }}
-                        >
-                          Annuler
-                        </button>
-                        <button
-                    className="cta modal-cta danger"
-                    onClick={() => {
-                            deleteMutation.mutate(company.id);
-                          }}
-                        >
-                          Supprimer
-                        </button>
-                      </div>
-                    </div>
-                  }
-                />
-            </div>  
-          )
-      }
-    }
-  ]
+                      Annuler
+                    </button>
+                    <button
+                      className="cta modal-cta danger"
+                      onClick={() => {
+                        deleteMutation.mutate(company.id);
+                      }}
+                    >
+                      Supprimer
+                    </button>
+                  </div>
+                </div>
+              }
+            />
+          </div>
+        );
+      },
+    },
+  ];
 
   return (
     <Table
@@ -315,7 +324,9 @@ export default function Organizations() {
                 <DropdownMenu.Portal>
                   <DropdownMenu.Content
                     className="min-w-[150px] shadow-sm bg-white rounded-md p-1 w-full"
-                    sideOffset={0} side="bottom" align="end"
+                    sideOffset={0}
+                    side="bottom"
+                    align="end"
                   >
                     <DropdownMenu.Item
                       onClick={() => bulkDeleteMutation.mutate(selectedIds)}
@@ -339,10 +350,7 @@ export default function Organizations() {
                   }
                 }}
                 trigger={
-                  <div
-                    onClick={() => setOpenModal(true)}
-                    className="cta"
-                  >
+                  <div onClick={() => setOpenModal(true)} className="cta">
                     Ajouter une organisation
                   </div>
                 }
@@ -376,23 +384,30 @@ export default function Organizations() {
                         name: "owner",
                         label: "Administrateur",
                         type: "select",
-                        options: users?.map((user: { id: string; name: string }) => ({
-                          label: user.name,
-                          value: user.id,
-                        })) || [],
+                        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={
                       <div className="flex justify-center">
-                      <button
-                        type="submit"
-                        disabled={createMutation.isPending}
-                        className={`${createMutation.isPending ? "btn-auth-loading" : "btn-auth"} cta modal-cta mt-4 cursor-pointer`}
-                      >
-                        {createMutation.isPending ? "En cours..." : "Ajouter une organisation"}
-                      </button>
+                        <button
+                          type="submit"
+                          disabled={createMutation.isPending}
+                          className={`${
+                            createMutation.isPending
+                              ? "btn-auth-loading"
+                              : "btn-auth"
+                          } cta modal-cta mt-4 cursor-pointer`}
+                        >
+                          {createMutation.isPending
+                            ? "En cours..."
+                            : "Ajouter une organisation"}
+                        </button>
                       </div>
                     }
                   />

src/app/layout.tsx

@@ -1,9 +1,10 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import NextTopLoader from "nextjs-toploader";
-import "../assets/css/ruben-ui.css"
+import "../assets/css/ruben-ui.css";
 import { AuthProvider } from "#/components/provider/authProvider";
 import { QueryClientProvide } from "#/components/provider/queryClient";
+import { ToastClient } from "#/components/provider/toastClient";
 
 export const metadata: Metadata = {
   title: "Private Docs",
@@ -15,7 +16,6 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  
   return (
     <html lang="en">
       <head>
@@ -27,6 +27,7 @@ export default function RootLayout({
           <QueryClientProvide>
             <NextTopLoader color="#246BFD" shadow="0" />
             {children}
+            <ToastClient richColors />
           </QueryClientProvide>
         </AuthProvider>
       </body>

src/components/admin/adminHeader.tsx

@@ -1,11 +1,11 @@
-"use client"
+"use client";
 import Image from "next/image";
-import { icons } from "#/assets/icons"
-
+import { icons } from "#/assets/icons";
 import * as React from "react";
 import { DropdownMenu } from "radix-ui";
 import Link from "next/link";
 import Theme from "./theme";
+import { signOutFunc } from "#/lib/function";
 
 export default function AdminHeader() {
   const [open, setOpen] = React.useState(false);
@@ -13,7 +13,9 @@ export default function AdminHeader() {
   return (
     <>
       <nav className="header r-flex-between px-[44px] py-[20px] ">
-        <p className="name text-[26px]">Bienvenue, <span>Ken B.</span> </p>
+        <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 /> */}
@@ -22,26 +24,41 @@ export default function AdminHeader() {
             <Image src={icons.notificationsIcon} alt="Notifications" />
           </button>
           <div className="relative">
-            <DropdownMenu.Root  open={open} onOpenChange={setOpen}>
+            <DropdownMenu.Root open={open} onOpenChange={setOpen}>
               <DropdownMenu.Trigger asChild>
                 <div className="r-flex-between justify-center items-center r-gap-12 cursor-pointer ">
                   <Image src={icons.profilePicture} alt="ProfilePicture" />
                   <button className="IconButton" aria-label="Customise options">
-                    <Image src={icons.arrowUp} alt="arrowUp" className={`transition-transform duration-300 ${open ? "scale-y-[-1]" : ""}`}/>
+                    <Image
+                      src={icons.arrowUp}
+                      alt="arrowUp"
+                      className={`transition-transform duration-300 ${
+                        open ? "scale-y-[-1]" : ""
+                      }`}
+                    />
                   </button>
                 </div>
               </DropdownMenu.Trigger>
 
               <DropdownMenu.Portal>
-                <DropdownMenu.Content className="DropdownMenuContent dropdown-menu r-flex-column r-secondary" sideOffset={0} side="bottom" align="end" >
-                  <DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px]">
+                <DropdownMenu.Content
+                  className="DropdownMenuContent dropdown-menu r-flex-column r-secondary p-2"
+                  sideOffset={0}
+                  side="bottom"
+                  align="end"
+                >
+                  <DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px] outline-none hover:bg-blue-100 rounded-md">
                     <Link href="#" className="d-flex items-start ">
                       <Image src={icons.userIcon} alt="Profil" />
                       Profil
                     </Link>
                   </DropdownMenu.Item>
-                  <DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px]">
-                    <Link href="#" className="d-flex items-start r-danger ">
+                  <DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px] outline-none hover:bg-blue-100 rounded-md">
+                    <Link
+                      href="#"
+                      onClick={() => signOutFunc()}
+                      className="d-flex items-start r-danger "
+                    >
                       <Image src={icons.logoutRed} alt="Deconnexion" />
                       Déconnexion
                     </Link>
@@ -53,5 +70,5 @@ export default function AdminHeader() {
         </div>
       </nav>
     </>
-  )
-}
+  );
+}

src/components/floatingLabelInput.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import { FloatingLabelInputProps } from '#/types';
-import React, { useState } from 'react';
-import Image from 'next/image';
-import { icons } from '#/assets/icons';
+import { FloatingLabelInputProps } from "#/types";
+import React, { useState } from "react";
+import Image from "next/image";
+import { icons } from "#/assets/icons";
 
-export default function FloatingLabelInput({ 
-  label, 
-  placeholder, 
-  type, 
+export default function FloatingLabelInput({
+  label,
+  placeholder,
+  type,
   options,
   button,
   showPasswordToggle = false,
@@ -17,34 +17,44 @@ export default function FloatingLabelInput({
   onChange,
 }: FloatingLabelInputProps) {
   const [showPassword, setShowPassword] = useState(false);
+  const [selectedValue, setSelectedValue] = useState(defaultValue || "");
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
+  ) => {
     const value = e.target.value;
+
+    if (type === "select") {
+      setSelectedValue(value);
+    }
+
     if (onChange) {
       onChange(value);
     }
   };
-  
 
   const renderInput = () => {
-    switch(type) {
-      case 'select':
+    switch (type) {
+      case "select":
         return (
           <div className="relative w-full">
-            <select 
+            <select
               className="input-form modal-input focus:ring-2 focus:ring-blue-500 outline-none"
               name={name}
-              defaultValue={defaultValue}
+              value={selectedValue}
+              onChange={handleChange}
             >
               {options?.map((option, index) => (
-                <option key={index} value={option.value}>{option.label}</option>
+                <option key={index} value={option.value}>
+                  {option.label}
+                </option>
               ))}
             </select>
             {button && <div className="btn-floating-right">{button}</div>}
           </div>
         );
-      
-      case 'password':
+
+      case "password":
         return (
           <div className="relative w-full">
             <input
@@ -53,7 +63,6 @@ export default function FloatingLabelInput({
               placeholder={placeholder}
               className="input-form focus:ring-2 focus:ring-blue-500 pr-10 outline-none"
               defaultValue={defaultValue}
-              
             />
             {showPasswordToggle && (
               <button
@@ -62,44 +71,38 @@ export default function FloatingLabelInput({
                 className="btn-floating-right text-gray-500 hover:text-gray-700 focus:outline-none"
               >
                 {showPassword ? (
-                  <Image 
+                  <Image
                     src={icons.eyeSlashIcon}
                     width={20}
                     height={20}
-                    alt=''
+                    alt=""
                   />
                 ) : (
-                  <Image 
-                    src={icons.eyeIcon}
-                    width={20}
-                    height={20}
-                    alt=''
-                  />
+                  <Image src={icons.eyeIcon} width={20} height={20} alt="" />
                 )}
               </button>
             )}
           </div>
         );
 
-
-        case 'search':
-          return (
-            <div className="relative w-full">
-              <div className='btn-floating-left'>
-                <Image alt='' src={icons.searchIcon} />
-              </div>
-              <input
-                type="text"
-                placeholder={placeholder}
-                className="focus:ring-2 focus:ring-blue-500 outline-none px-10 py-2 w-full text-black border border-[#d1d5dc] rounded-full"
-                name={name}
-                defaultValue={defaultValue}
-                onChange={handleChange}
-              />
-              {button && <div className="btn-floating-right mr-1 ">{button}</div>}
+      case "search":
+        return (
+          <div className="relative w-full">
+            <div className="btn-floating-left">
+              <Image alt="" src={icons.searchIcon} />
             </div>
-          );
-        
+            <input
+              type="text"
+              placeholder={placeholder}
+              className="focus:ring-2 focus:ring-blue-500 outline-none px-10 py-2 w-full text-black border border-[#d1d5dc] rounded-full"
+              name={name}
+              defaultValue={defaultValue}
+              onChange={handleChange}
+            />
+            {button && <div className="btn-floating-right mr-1 ">{button}</div>}
+          </div>
+        );
+
       default:
         return (
           <div className="relative w-full">
@@ -119,13 +122,10 @@ export default function FloatingLabelInput({
 
   return (
     <div className="relative">
-      <label 
-        htmlFor={name}
-        className="input-label text-gray-400 text-sm"
-      >
+      <label htmlFor={name} className="input-label text-gray-400 text-sm">
         {label}
       </label>
       {renderInput()}
     </div>
   );
-}
+}

src/components/modal.tsx

@@ -1,6 +1,6 @@
 import * as Dialog from "@radix-ui/react-dialog";
 import { ReactNode } from "react";
-import { icons } from "#/assets/icons"
+import { icons } from "#/assets/icons";
 import Image from "next/image";
 
 export function Modal({
@@ -8,7 +8,7 @@ export function Modal({
   title,
   content,
   open,
-  onOpenChange
+  onOpenChange,
 }: {
   trigger: ReactNode;
   title?: string | ReactNode;
@@ -18,29 +18,29 @@ export function Modal({
 }) {
   return (
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
-      <Dialog.Trigger asChild>
-        {trigger}
-      </Dialog.Trigger>
+      <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Overlay className="fixed inset-0 bg-black/25 z-40" />
-        <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-max flex flex-col gap-10 bg-white rounded-lg shadow-xl z-50 px-16 py-12"
+        <Dialog.Content
+          className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-max flex flex-col gap-10 bg-white rounded-lg shadow-xl z-50 px-16 py-12"
           // onPointerDownOutside={(e) => e.preventDefault()}
         >
           <Dialog.Title className="text-xl font-bold text-center text-[30px] ">
             {title}
           </Dialog.Title>
-          
-          <div className="flex gap-5 justify-center">
-            {content}
-          </div>
 
-            <div className="absolute top-5 right-5 text-gray-500 hover:text-gray-700 cursor-pointer" 
-              onClick={() => {onOpenChange?.(false)}}
-            >
-              <Image src={icons.crossIcon} alt="fermer"/>
-            </div>
+          <div className="flex gap-5 justify-center">{content}</div>
+
+          <div
+            className="absolute top-5 right-5 text-gray-500 hover:text-gray-700 cursor-pointer"
+            onClick={() => {
+              onOpenChange?.(false);
+            }}
+          >
+            <Image src={icons.crossIcon} alt="fermer" />
+          </div>
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>
   );
-}
+}

src/components/provider/toastClient.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { ComponentProps } from "react";
+import { Toaster as Sonner } from "sonner";
+
+type ToasterProps = ComponentProps<typeof Sonner>;
+
+const ToastClient = ({ ...props }: ToasterProps) => {
+
+  return (
+    <Sonner
+      style={{
+        right: "50px",
+      }}
+      {...props}
+    />
+  );
+};
+
+export { ToastClient };

src/schema/index.ts

@@ -18,4 +18,4 @@ export const companySchema = z.object({
   description: z.string(),
   status: z.string(),
   owner: z.string()
-})
+})

src/schema/loginSchema.ts

@@ -0,0 +1,22 @@
+import { Description } from "@radix-ui/react-dialog";
+import { z } from "zod";
+
+export const loginSchema = z.object({
+  email: z.string().email("Email invalide"),
+  password: z.string().min(8, "Le mot de passe doit contenir au moins 8 caractères")
+});
+
+export const adminSchema = z.object({
+  id: z.string().optional(),
+  last_name: z.string(),
+  first_name: z.string(),
+  email: z.string().min(1, "L'email est requis").email("Email invalide"),
+});
+
+export const adminUpdateSchema = z.object({
+  id: z.string().optional(),
+  name: z.string(),
+  description: z.string(),
+  status: z.string(),
+  owner: z.string(),
+});

src/types/index.ts

@@ -59,11 +59,19 @@ export interface Owner {
     last_name: string
 }
 
+export interface Admin {
+  id: string
+  email: string
+  first_name: string
+  last_name: string
+  profile: string
+}
 export interface CompanyById {  
   id: string
   name: string
   is_premium: boolean
   status: string
+  description: string
   owner: Owner
   total_users: number
   total_documents: number