fix: merge

src/app/admin/admins/page.tsx

@@ -47,7 +47,6 @@ export default function Admins() {
     },
   });
 
-  
   const createMutation = useMutation({
     mutationFn: async (data: {
       last_name: string;
@@ -231,7 +230,11 @@ export default function Admins() {
                       <button
                         type="submit"
                         disabled={updateMutation.isPending}
-                      className={`${updateMutation.isPending ? "btn-auth-loading" : "btn-auth"} cta modal-cta mt-4 cursor-pointer`}
+                        className={`${
+                          updateMutation.isPending
+                            ? "btn-auth-loading"
+                            : "btn-auth"
+                        } cta modal-cta mt-4 cursor-pointer`}
                       >
                         {updateMutation.isPending ? "En cours..." : "Modifier"}
                       </button>
@@ -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
+                  <div onClick={() => setOpenModal(true)} className="cta">
-                    onClick={() => setOpenModal(true)}
-                    className="cta"
-                  >
                     Ajouter un admin
                   </div>
                 }
@@ -392,9 +394,15 @@ export default function Admins() {
                         <button
                           type="submit"
                           disabled={createMutation.isPending}
-                        className={`${createMutation.isPending ? "btn-auth-loading" : "btn-auth"} cta modal-cta mt-4 cursor-pointer`}
+                          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"}
+                          {createMutation.isPending
+                            ? "Création de l'admin..."
+                            : "Créer le compte"}
                         </button>
                       </div>
                     }

src/app/admin/home/page.tsx

@@ -1,75 +1,78 @@
-"use client"
+"use client";
 
-import { icons } from "#/assets/icons"
+import { icons } from "#/assets/icons";
-import Statistics from "#/components/stats"
+import Statistics from "#/components/stats";
-import Table from "#/components/table/table"
+import Table from "#/components/table/table";
-import { Company } from "#/types"
+import { Company } from "#/types";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { ColumnDef } from "@tanstack/react-table"
+import { ColumnDef } from "@tanstack/react-table";
-import axios from "axios"
+import axios from "axios";
-import { useSession } from "next-auth/react"
+import { useSession } from "next-auth/react";
-import Image from "next/image"
+import Image from "next/image";
-import { Modal } from "#/components/modal"
+import { Modal } from "#/components/modal";
-import { useState } from "react"
+import { useState } from "react";
 
-export default function HomePage () {
+export default function HomePage() {
-
+  const { data: session, status } = useSession();
-  const {data: session, status} = useSession()
+  const queryClient = useQueryClient();
-  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({
+  const {
-    enabled: status === 'authenticated',
+    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', {
+          "https://private-docs-api.intside.co/companies",
+          {
             headers: {
-                        'Authorization': `Bearer ${session?.user.access_token}`
+              Authorization: `Bearer ${session?.user.access_token}`,
+            },
           }
-                }
+        );
-            )
 
-            if(response.data) {
+        if (response.data) {
-                return response.data.data as Company[]
+          return response.data.data as Company[];
         }
       } catch (error) {
-            console.error(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) {
+        if (response.status === 200 || response.status === 201) {
-          console.log('Suppresion réussie !')
+          console.log("Suppresion réussie !");
-          setOpen(false)
+          setOpen(false);
         }
       } catch (error) {
-        console.error(error)
+        console.error(error);
       }
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["companies"] })
+      queryClient.invalidateQueries({ queryKey: ["companies"] });
-
-      refetch()
-    }
-  })
-  
 
+      refetch();
+    },
+  });
 
   const columns: ColumnDef<Company>[] = [
     {
@@ -83,49 +86,60 @@ export default function HomePage () {
     {
       header: "Administrateurs",
       cell: ({ row }) => {
-      const value = String(row.original.owner.first_name) + " " + String(row.original.owner.last_name)
+        const value =
-      const initials = String(row.original.owner.first_name[0]) + String(row.original.owner.last_name[0])
+          String(row.original.owner.first_name) +
-      return(
+          " " +
+          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" ? "bg-[#ECF9E8] text-[#49C91E]" :
+              status === "active"
-              status === "inactive" ? "bg-[#E7EBF3] text-[#9FA8BC]" : 
+                ? "bg-[#ECF9E8] text-[#49C91E]"
-              status === "pending" ? "bg-[#EAF7FC] text-[#30B2EA]" : 
+                : status === "inactive"
-              status === "blocked" ? "bg-[#FDEBE8] text-[#F33F19]" : 
+                ? "bg-[#E7EBF3] text-[#9FA8BC]"
-              ""
+                : status === "pending"
+                ? "bg-[#EAF7FC] text-[#30B2EA]"
+                : status === "blocked"
+                ? "bg-[#FDEBE8] text-[#F33F19]"
+                : ""
             }
           `}
           >
-          {
+            {status === "active"
-            status === "active" ? "Actif" : 
+              ? "Actif"
-            status === "inactive" ? "Inactif" : 
+              : status === "inactive"
-            status === "pending" ? "En attente" : 
+              ? "Inactif"
-            status === "blocked" ? "Bloquée" : 
+              : status === "pending"
-            ""
+              ? "En attente"
-          }
+              : status === "blocked"
+              ? "Bloquée"
+              : ""}
           </p>
-      )
+        );
-    }
+      },
     },
     {
       id: "delete",
@@ -161,7 +175,8 @@ export default function HomePage () {
               content={
                 <div>
                   <p className="text-center">
-                  Voulez-vous vraiment supprimer l'organisation <span className="font-bold">{row.original.name}</span> ?
+                    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">
@@ -190,9 +205,9 @@ export default function HomePage () {
         );
       },
     },
-]
+  ];
 
-  return(
+  return (
     <div className="space-y-10">
       <Statistics />
 
@@ -205,5 +220,5 @@ export default function HomePage () {
         pageSize={5}
       />
     </div>
-  )
+  );
 }

src/app/admin/layout.tsx

@@ -33,3 +33,26 @@ export default function Dashboard({ children }: { children: ReactNode }) {
     </div >
   )
 }
+
+/*
+
+      <div className="sidebar r-m-0 d-flex flex-column pt-[16px] max-w-[90px] h-[100vh] relative ">
+        <div className="logo r-flex-center pt-[13px] px-[20px] ">
+          <icons.Logo aria-label="Logo" className="scale-95" />
+        </div>
+        <div className="nav-menu r-column-center h-max pt-[160px] r-gap-40 ">
+          <Link href="#" className="nav-item r-flex-center ">
+            <icons.HomeIcon aria-label="Home" className="nav-home scale-100" />
+          </Link>
+          <Link href="#" className="nav-item border-none r-flex-center ">
+            <icons.CompaniesIcon aria-label="Companies" className="scale-100 " width={24} height={24} />
+          </Link>
+          <Link href="#" className="nav-item r-flex-center ">
+            <icons.UserGroup aria-label="Admins" className="scale-100" width={24} height={24} />
+          </Link>
+        </div>
+      </div>
+      <div className="logout absolute bottom-[60px] left-[22px]">
+        <icons.Logout aria-label="Logout" />
+      </div>
+*/

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

@@ -1,40 +1,46 @@
-"use client"
+"use client";
-import { icons } from "#/assets/icons"
+
-import Image from "next/image"
 import axios from "axios";
 import { useSession } from "next-auth/react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Company, CompanyById } from "#/types";
+import { Admin, Company, CompanyById } from "#/types";
-import FloatingLabelInput from "#/components/floatingLabelInput";
 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({
+  const {
-    enabled: status === 'authenticated',
+    data: companyInfos,
-    queryKey: ["companyStats", session?.user.access_token],
+    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}`, {
+          `https://private-docs-api.intside.co/companies/${uid}`,
+          {
             headers: {
-            'Authorization': `Bearer ${session?.user.access_token}`
+              Authorization: `Bearer ${session?.user.access_token}`,
             },
             params: {
-            details: true
+              details: true,
-          }
+            },
           }
         );
 
@@ -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(
+        const response = await axios.put(
-          `https://private-docs-api.intside.co/companies/${id}/`, {
+          `https://private-docs-api.intside.co/companies/${data.id}/`,
+          data,
+          {
             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 !')
+          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>
+            <h2 className="admin-name text-[20px]">
-            <Link href={`http://localhost:3000/admin/organizations/${uid}/`} type="Link" className="cta cancel">
+              {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 {
+  const { data: users } = useQuery({
-    data: users,
-  } = useQuery({
     enabled: status === "authenticated",
     queryKey: ["organizations"],
     queryFn: async () => {
@@ -168,59 +165,70 @@ export default function Organizations() {
     {
       header: "Administrateurs",
       cell: ({ row }) => {
-        const value = String(row.original.owner.first_name) + " " + String(row.original.owner.last_name)
+        const value =
-        const initials = String(row.original.owner.first_name[0]) + String(row.original.owner.last_name[0])
+          String(row.original.owner.first_name) +
-        return(
+          " " +
+          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 === "active"
-                status === "inactive" ? "font-medium w-[80px] h-[24px] bg-[#E7EBF3] text-[#9FA8BC]" : 
+                  ? "font-medium w-[80px] h-[24px] bg-[#ECF9E8] text-[#49C91E]"
-                status === "pending" ? "font-medium w-[80px] h-[24px] bg-[#EAF7FC] text-[#30B2EA]" : 
+                  : status === "inactive"
-                status === "blocked" ? "font-medium w-[80px] h-[24px] bg-[#FDEBE8] text-[#F33F19]" : 
+                  ? "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"
-              status === "active" ? "Actif" : 
+              ? "Actif"
-              status === "inactive" ? "Inactif" : 
+              : status === "inactive"
-              status === "pending" ? "En attente" : 
+              ? "Inactif"
-              status === "blocked" ? "Bloquée" : 
+              : 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"
+          <div
+            className="flex justify-end p-2 space-x-2"
             // onClick={() => { mutate(id) }}
           >
-
             {/* Modal de suppression */}
             <Modal
               open={openDeleteModal && selectedAdminId === company.id}
@@ -248,7 +256,8 @@ export default function Organizations() {
               content={
                 <div>
                   <p className="text-center">
-                  Voulez-vous vraiment supprimer l'organisation <span className="font-bold">{row.original.name}</span> ?
+                    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">
@@ -273,10 +282,10 @@ export default function Organizations() {
               }
             />
           </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
+                  <div onClick={() => setOpenModal(true)} className="cta">
-                    onClick={() => setOpenModal(true)}
-                    className="cta"
-                  >
                     Ajouter une organisation
                   </div>
                 }
@@ -376,7 +384,8 @@ export default function Organizations() {
                         name: "owner",
                         label: "Administrateur",
                         type: "select",
-                        options: users?.map((user: { id: string; name: string }) => ({
+                        options:
+                          users?.map((user: { id: string; name: string }) => ({
                             label: user.name,
                             value: user.id,
                           })) || [],
@@ -389,9 +398,15 @@ export default function Organizations() {
                         <button
                           type="submit"
                           disabled={createMutation.isPending}
-                        className={`${createMutation.isPending ? "btn-auth-loading" : "btn-auth"} cta modal-cta mt-4 cursor-pointer`}
+                          className={`${
+                            createMutation.isPending
+                              ? "btn-auth-loading"
+                              : "btn-auth"
+                          } cta modal-cta mt-4 cursor-pointer`}
                         >
-                        {createMutation.isPending ? "En cours..." : "Ajouter une organisation"}
+                          {createMutation.isPending
+                            ? "En cours..."
+                            : "Ajouter une organisation"}
                         </button>
                       </div>
                     }

src/app/globals.css

@@ -25,11 +25,9 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --foreground: #2a2a2a;
+    --foreground: #04060F;
     --background: #ffffff;
-    --cinder: #999;
+  }
-    --bluegray: --primary;
-}
 }
 
 body {

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/assets/css/admin.css

@@ -95,50 +95,14 @@
   width: 284px;
 }
 
-.header-desktop{
-  display: flex!important;
-}
-.mobile{
-  display: none!important;
-}
 
-@media (max-width: 640px) {
 
-  .header, .main{
+@media (max-width: 1024px) {
-    padding-left: 22px;
+  .admin-infos {
-    padding-right: 22px;
+    /* justify-content: space-between; */
+    /* gap: 30px; */
   }
-  .header-desktop{
+  .admin-card {
-    display: none!important;
+    /* max-width: 100%; */
-  }
-  .mobile{
-    display: flex!important;
-  }
-  .mobile-flex{
-    display: flex;
-  }
-  .mobile-none{
-    display: none;
-  }
-
-  .header .name{
-    padding-left: 44px;
-  }
-
-  .sidebar{
-    transition: all ease-in-out .4s;
-  }
-  .hamburger{
-    position: absolute;
-    top: 43px;
-    left: 22px;
-    transform: scale(2);
-  }
-  .hamburger.shifted{
-    left: 100px;
-  }
-  .hamburger-icon{
-    color: var(--primary);
-    border-radius: 4px;
   }
 }

src/components/admin/adminHeader.tsx

@@ -1,55 +1,64 @@
-"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);
 
   return (
     <>
-      <nav className="header r-flex-between items-center px-[44px] py-[20px] ">
+      <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 /> */}
 
-          <div className="header-desktop">
+          <button type="button" className="icon-border">
-            <Theme />
-          </div>
-          <button type="button" className="icon-border header-desktop">
             <Image src={icons.notificationsIcon} alt="Notifications" />
           </button>
           <div className="relative">
             <DropdownMenu.Root open={open} onOpenChange={setOpen}>
               <DropdownMenu.Trigger asChild>
-                <div className="r-flex-between justify-center items-center r-gap-12 cursor-pointer">
+                <div className="r-flex-between justify-center items-center r-gap-12 cursor-pointer ">
-                  <button type="button" className="icon-borderd mobile scale-120" >
-                    <Image src={icons.arrowLeft} alt="options" className={`transition-transform duration-300 ${open ? "scale-x-[-1]" : ""}`} />
-                  </button>
                   <Image src={icons.profilePicture} alt="ProfilePicture" />
-                  <button className="IconButton header-desktop" aria-label="Customise options">
+                  <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.Content
-                  <DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px]">
+                  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 flex items-center content-center text-[14px] mobile">
+                  <DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px] outline-none hover:bg-blue-100 rounded-md">
-                      <Theme />
+                    <Link
-                  </DropdownMenu.Item> */}
+                      href="#"
-                  <DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px]">
+                      onClick={() => signOutFunc()}
-                    <Link href="#" className="d-flex items-start r-danger ">
+                      className="d-flex items-start r-danger "
+                    >
                       <Image src={icons.logoutRed} alt="Deconnexion" />
                       Déconnexion
                     </Link>
@@ -61,5 +70,5 @@ export default function AdminHeader() {
         </div>
       </nav>
     </>
-  )
+  );
 }

src/components/admin/sidebar.tsx

@@ -4,22 +4,15 @@ import { icons } from "#/assets/icons"
 import NavItem from "./navItem";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
-import { useState } from "react";
 
 
 export default function Sidebar() {
 
   const pathname = usePathname();
 
-  const [mobileVisible, setmobileVisible] = useState(false)
-
-  const  handleMobileVisible = ()=> {
-    setmobileVisible(!mobileVisible)
-  }
-
   return (
     <>
-      <div className={` ${ mobileVisible? "mobile-flex" : "mobile-none" } sidebar-holder min-w-[78px] max-w-[90px] h-[100vh] relative `}>
+      <div className="sidebar-holder min-w-[78px] max-w-[90px] h-[100vh] ">
         <div className="sidebar r-m-0 d-flex flex-column pt-[25px] max-w-[90px] h-[100vh] ">
           <div className="logo r-flex-center px-[19px] ">
             <Image src={icons.logo} alt="Logo" className="scale-95" />
@@ -36,12 +29,6 @@ export default function Sidebar() {
           </div>
         </div>
       </div>
-      <div onClick={() => handleMobileVisible()} className={`${mobileVisible ? "shifted" : ""} hamburger mobile`}>
-        {/* <Image src={icons.logo} alt="Logo" className="scale-95" /> */}
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-list hamburger-icon" viewBox="0 0 16 16">
-          <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/>
-        </svg>
-      </div>
     </>
   )
 }

src/components/floatingLabelInput.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { FloatingLabelInputProps } from '#/types';
+import { FloatingLabelInputProps } from "#/types";
-import React, { useState } from 'react';
+import React, { useState } from "react";
-import Image from 'next/image';
+import Image from "next/image";
-import { icons } from '#/assets/icons';
+import { icons } from "#/assets/icons";
 
 export default function FloatingLabelInput({
   label,
@@ -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) {
+    switch (type) {
-      case 'select':
+      case "select":
         return (
           <div className="relative w-full">
             <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
@@ -66,27 +75,21 @@ export default function FloatingLabelInput({
                     src={icons.eyeSlashIcon}
                     width={20}
                     height={20}
-                    alt=''
+                    alt=""
                   />
                 ) : (
-                  <Image 
+                  <Image src={icons.eyeIcon} width={20} height={20} alt="" />
-                    src={icons.eyeIcon}
-                    width={20}
-                    height={20}
-                    alt=''
-                  />
                 )}
               </button>
             )}
           </div>
         );
 
-
+      case "search":
-        case 'search':
         return (
           <div className="relative w-full">
-              <div className='btn-floating-left'>
+            <div className="btn-floating-left">
-                <Image alt='' src={icons.searchIcon} />
+              <Image alt="" src={icons.searchIcon} />
             </div>
             <input
               type="text"
@@ -119,10 +122,7 @@ export default function FloatingLabelInput({
 
   return (
     <div className="relative">
-      <label 
+      <label htmlFor={name} className="input-label text-gray-400 text-sm">
-        htmlFor={name}
-        className="input-label text-gray-400 text-sm"
-      >
         {label}
       </label>
       {renderInput()}

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,26 +18,26 @@ export function Modal({
 }) {
   return (
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
-      <Dialog.Trigger asChild>
+      <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>
-        {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">
+          <div className="flex gap-5 justify-center">{content}</div>
-            {content}
-          </div>
 
-            <div className="absolute top-5 right-5 text-gray-500 hover:text-gray-700 cursor-pointer" 
+          <div
-              onClick={() => {onOpenChange?.(false)}}
+            className="absolute top-5 right-5 text-gray-500 hover:text-gray-700 cursor-pointer"
+            onClick={() => {
+              onOpenChange?.(false);
+            }}
           >
-              <Image src={icons.crossIcon} alt="fermer"/>
+            <Image src={icons.crossIcon} alt="fermer" />
           </div>
         </Dialog.Content>
       </Dialog.Portal>

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/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