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;
@@ -193,7 +192,7 @@ export default function Admins() {
                     width={24}
                     height={24}
                     src={icons.editIcon}
-                    className="cursor-pointer responsive-icon"
+                    className="cursor-pointer responsive-icon mr-1"
                   />
                 </div>
               }
@@ -227,13 +226,19 @@ export default function Admins() {
                   submit={updateMutation.mutate}
                   schema={adminSchema}
                   child={
+                    <div className="flex justify-center">
                       <button
                         type="submit"
                         disabled={updateMutation.isPending}
-                      className={`${updateMutation.isPending ? "btn-auth-loading" : "btn-auth"} 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>
+                    </div>
                   }
                 />
               }
@@ -265,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"
@@ -321,8 +328,9 @@ export default function Admins() {
 
               <DropdownMenu.Root>
                 <DropdownMenu.Trigger asChild>
-                  <p className="cursor-pointer rounded-full bg-gray-300 text-gray-500 p-2">
+                  <p className="cta cancel flex gap-2">
                     Sélectionner une action
+                    <Image src={icons.arrowDown} alt="arrow down" />
                   </p>
                 </DropdownMenu.Trigger>
 
@@ -353,10 +361,7 @@ export default function Admins() {
                   }
                 }}
                 trigger={
-                  <div
-                    onClick={() => setOpenModal(true)}
-                    className="cursor-pointer p-3 bg-blue-600 text-white rounded-full"
-                  >
+                  <div onClick={() => setOpenModal(true)} className="cta">
                     Ajouter un admin
                   </div>
                 }
@@ -385,13 +390,21 @@ export default function Admins() {
                     submit={createMutation.mutate}
                     schema={adminSchema}
                     child={
+                      <div className="flex justify-center">
                         <button
                           type="submit"
                           disabled={createMutation.isPending}
-                        className={`${createMutation.isPending ? "btn-auth-loading" : "btn-auth"} 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 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', {
+          "https://private-docs-api.intside.co/companies",
+          {
             headers: {
-                        'Authorization': `Bearer ${session?.user.access_token}`
+              Authorization: `Bearer ${session?.user.access_token}`,
+            },
           }
-                }
-            )
+        );
 
-            if(response.data) {
-                return response.data.data as Company[]
+        if (response.data) {
+          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) {
-          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>[] = [
     {
@@ -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 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" ? "bg-[#ECF9E8] text-[#49C91E]" :
-              status === "inactive" ? "bg-[#E7EBF3] text-[#9FA8BC]" : 
-              status === "pending" ? "bg-[#EAF7FC] text-[#30B2EA]" : 
-              status === "blocked" ? "bg-[#FDEBE8] text-[#F33F19]" : 
-              ""
+              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" : 
-            ""
-          }
+            {status === "active"
+              ? "Actif"
+              : status === "inactive"
+              ? "Inactif"
+              : status === "pending"
+              ? "En attente"
+              : status === "blocked"
+              ? "Bloquée"
+              : ""}
           </p>
-      )
-    }
+        );
+      },
     },
     {
       id: "delete",
@@ -161,12 +175,13 @@ export default function HomePage () {
               content={
                 <div>
                   <p className="text-center">
-                  Voulez-vous vraiment supprimer cette organisation ?
+                    Voulez-vous vraiment supprimer l'organisation{" "}
+                    <span className="font-bold">{row.original.name}</span> ?
                   </p>
 
-                <div className="grid grid-cols-2 gap-3 mt-3">
+                  <div className="flex justify-between w-full pt-6 r-gap-24">
                     <button
-                    className="bg-blue-100 text-blue-600 py-2 px-4 text-lg rounded-full text-center hover:bg-blue-200"
+                      className="cta modal-cta cancel"
                       onClick={() => {
                         setSelectedId(null);
                       }}
@@ -174,7 +189,7 @@ export default function HomePage () {
                       Annuler
                     </button>
                     <button
-                    className="bg-red-500 text-white py-2 px-4 text-lg rounded-full text-center hover:bg-red-600"
+                      className="cta modal-cta danger"
                       onClick={() => {
                         mutate(id);
                         setSelectedId(null);
@@ -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/organizations/[id]/page.tsx

@@ -118,7 +118,7 @@ export default function Profile() {
           </div>
           <hr />
           <div className="r-flex p-[32px] r-gap-24">
-            <div className="admin-infos r-flex flex-wrap justifyc-center lg:justifyc-start ">
+            <div className="admin-infos r-flex flex-wrap justifyy-center lg:justifyy-start ">
               <div className="r-flex-between items-center w-max">
                 <div className="icon-rounded">
                   <Image src={icons.userGroupBlue} alt="Documents" />

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

@@ -290,7 +290,11 @@ export default function Update() {
                     onOpenChange={setOpenBlockModal}
                     trigger={
                       <button type="button" className="cta danger">
-                        Bloquer
+                        {blockMutation.isPending
+                              ? "En cours..."
+                              : companyInfos?.status === "blocked"
+                              ? "Supprimer"
+                              : "Bloquer"}
                       </button>
                     }
                     content={

src/app/admin/organizations/page.tsx

@@ -51,9 +51,7 @@ export default function Organizations() {
     },
   });
 
-  const {
-    data: users,
-  } = useQuery({
+  const { data: users } = useQuery({
     enabled: status === "authenticated",
     queryKey: ["organizations"],
     queryFn: async () => {
@@ -167,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 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" ? "bg-[#ECF9E8] text-[#49C91E]" :
-                status === "inactive" ? "bg-[#E7EBF3] text-[#9FA8BC]" : 
-                status === "pending" ? "bg-[#EAF7FC] text-[#30B2EA]" : 
-                status === "blocked" ? "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"
+          <div
+            className="flex justify-end p-2 space-x-2"
             // onClick={() => { mutate(id) }}
           >
-
             {/* Modal de suppression */}
             <Modal
               open={openDeleteModal && selectedAdminId === company.id}
@@ -246,10 +255,14 @@ export default function Organizations() {
               title="Supprimer une organisation"
               content={
                 <div>
-                      <p className="text-center">Voulez-vous vraiment supprimer cette organisation ?</p>
-                      <div className="grid grid-cols-2 gap-3 mt-3">
+                  <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="bg-blue-100 text-blue-600 py-2 px-4 rounded-full cursor-pointer"
+                      className="cta modal-cta cancel"
                       onClick={() => {
                         setOpenDeleteModal(false);
                       }}
@@ -257,7 +270,7 @@ export default function Organizations() {
                       Annuler
                     </button>
                     <button
-                          className="bg-red-500 text-white py-2 px-4 rounded-full hover:bg-red-600 cursor-pointer"
+                      className="cta modal-cta danger"
                       onClick={() => {
                         deleteMutation.mutate(company.id);
                       }}
@@ -269,10 +282,10 @@ export default function Organizations() {
               }
             />
           </div>
-          )
-      }
-    }
-  ]
+        );
+      },
+    },
+  ];
 
   return (
     <Table
@@ -302,15 +315,18 @@ export default function Organizations() {
 
               <DropdownMenu.Root>
                 <DropdownMenu.Trigger asChild>
-                  <p className="cursor-pointer rounded-full bg-gray-300 text-gray-500 p-2">
+                  <p className="cta cancel flex gap-2">
                     Sélectionner une action
+                    <Image src={icons.arrowDown} alt="arrow down" />
                   </p>
                 </DropdownMenu.Trigger>
 
                 <DropdownMenu.Portal>
                   <DropdownMenu.Content
-                    className="min-w-[150px] shadow-sm bg-white rounded-md p-1"
-                    sideOffset={5}
+                    className="min-w-[150px] shadow-sm bg-white rounded-md p-1 w-full"
+                    sideOffset={0}
+                    side="bottom"
+                    align="end"
                   >
                     <DropdownMenu.Item
                       onClick={() => bulkDeleteMutation.mutate(selectedIds)}
@@ -334,10 +350,7 @@ export default function Organizations() {
                   }
                 }}
                 trigger={
-                  <div
-                    onClick={() => setOpenModal(true)}
-                    className="cursor-pointer p-3 bg-blue-600 text-white rounded-full"
-                  >
+                  <div onClick={() => setOpenModal(true)} className="cta">
                     Ajouter une organisation
                   </div>
                 }
@@ -371,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,
                           })) || [],
@@ -380,13 +394,21 @@ export default function Organizations() {
                     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"} mt-4 cursor-pointer`}
+                          className={`${
+                            createMutation.isPending
+                              ? "btn-auth-loading"
+                              : "btn-auth"
+                          } cta modal-cta mt-4 cursor-pointer`}
                         >
-                        {createMutation.isPending ? "En cours..." : "Créer l'organisation"}
+                          {createMutation.isPending
+                            ? "En cours..."
+                            : "Ajouter une organisation"}
                         </button>
+                      </div>
                     }
                   />
                 }

src/app/globals.css

@@ -102,6 +102,8 @@ body {
 
 .cta{
   padding: 10px 24px;
+  width: max-content;
+  height: max-content;
   color: white;
   background-color: var(--primary);
   font-size: 14px;
@@ -109,6 +111,12 @@ body {
   border: 1px solid var(--primary);
   border-radius: 100px;
   cursor: pointer;
+  text-wrap: nowrap;
+}
+
+.cta.modal-cta{
+  width: 240px;
+  height: 40px;
 }
 
 .cta.cancel{
@@ -138,6 +146,42 @@ hr{
   color: var(--gray);
 }
 
+input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  width: 24px;
+  height: 24px;
+  border: 1px solid var(--secondary) !important; 
+  border-radius: 6px !important; 
+  background-color: transparent; 
+  cursor: pointer; 
+  position: relative;
+}
+
+
+input[type="checkbox"]:checked {
+  background-color: var(--primary);
+  border-color: var(--primary);
+}
+
+
+input[type="checkbox"]:checked::before {
+  content: "✔"; 
+  font-size: 18px;
+  color: white;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.modal-input{
+  width: 490px;
+  margin-left: auto;
+  margin-right: auto;
+}
 
 
 /* Scroll Bar  */

src/app/layout.tsx

@@ -1,7 +1,7 @@
 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";
@@ -16,7 +16,6 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  
   return (
     <html lang="en">
       <head>

src/assets/icons/chevron-down.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1L5 5L9 1" stroke="#9FA8BC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/icons/index.ts

@@ -42,6 +42,7 @@ import moonIcon from "./moon.svg"
 import trash from "./trash.svg"
 import mailIcon from "./sms.svg"
 import personalCard from "./personalcard.svg"
+import arrowDown from "#/assets/icons/chevron-down.svg"
 
 
 export const icons = {
@@ -88,7 +89,9 @@ export const icons = {
   moonIcon,
   trash,
   mailIcon,
-  personalCard
+  personalCard,
+  arrowDown
+
 }
 
 

src/components/admin/adminHeader.tsx

@@ -1,6 +1,6 @@
-"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";
@@ -10,11 +10,12 @@ import { signOutFunc } from "#/lib/function";
 export default function AdminHeader() {
   const [open, setOpen] = React.useState(false);
 
-
   return (
     <>
       <nav className="header r-flex-between px-[44px] py-[20px] ">
-        <h1 className="name text-[26px]">Bienvenue, <span>Ken B.</span> </h1>
+        <p className="name text-[26px]">
+          Bienvenue, <span>Ken B.</span>{" "}
+        </p>
         <div className="r-flex-between justify-center items-center r-gap-12">
           <Theme />
           {/* <ProfilePicture /> */}
@@ -28,13 +29,24 @@ export default function AdminHeader() {
                 <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 p-2" sideOffset={0} side="bottom" align="end" >
+                <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" />
@@ -42,7 +54,11 @@ export default function AdminHeader() {
                     </Link>
                   </DropdownMenu.Item>
                   <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 ">
+                    <Link
+                      href="#"
+                      onClick={() => signOutFunc()}
+                      className="d-flex items-start r-danger "
+                    >
                       <Image src={icons.logoutRed} alt="Deconnexion" />
                       Déconnexion
                     </Link>
@@ -54,5 +70,5 @@ export default function AdminHeader() {
         </div>
       </nav>
     </>
-  )
+  );
 }

src/components/floatingLabelInput.tsx

@@ -1,9 +1,9 @@
 "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,
@@ -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
-              className="input-form focus:ring-2 focus:ring-blue-500 outline-none"
+              className="input-form modal-input focus:ring-2 focus:ring-blue-500 outline-none"
               name={name}
-              value={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,37 +75,31 @@ export default function FloatingLabelInput({
                     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':
+      case "search":
         return (
           <div className="relative w-full">
-              <div className='btn-floating-left'>
-                <Image alt='' src={icons.searchIcon} />
+            <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-3 w-full text-black border border-[#d1d5dc] rounded-full"
+              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">{button}</div>}
+            {button && <div className="btn-floating-right mr-1 ">{button}</div>}
           </div>
         );
 
@@ -106,7 +109,7 @@ export default function FloatingLabelInput({
             <input
               type={type}
               placeholder={placeholder}
-              className="input-form focus:ring-2 focus:ring-blue-500 outline-none"
+              className="input-form modal-input focus:ring-2 focus:ring-blue-500 outline-none"
               name={name}
               defaultValue={defaultValue}
               onChange={handleChange}
@@ -119,10 +122,7 @@ 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()}

src/components/modal.tsx

@@ -1,12 +1,14 @@
 import * as Dialog from "@radix-ui/react-dialog";
 import { ReactNode } from "react";
+import { icons } from "#/assets/icons";
+import Image from "next/image";
 
 export function Modal({
   trigger,
   title,
   content,
   open,
-  onOpenChange
+  onOpenChange,
 }: {
   trigger: ReactNode;
   title?: string | ReactNode;
@@ -16,26 +18,26 @@ 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-full max-w-md bg-white rounded-lg shadow-xl z-50 p-6"
+        <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 my-4">
+          <Dialog.Title className="text-xl font-bold text-center text-[30px] ">
             {title}
           </Dialog.Title>
 
-          <div className=" justify-center">
-            {content}
-          </div>
+          <div className="flex gap-5 justify-center">{content}</div>
 
-            <div className="absolute top-4 right-4 text-gray-500 hover:text-gray-700 cursor-pointer" 
-              onClick={() => {onOpenChange?.(false)}}
+          <div
+            className="absolute top-5 right-5 text-gray-500 hover:text-gray-700 cursor-pointer"
+            onClick={() => {
+              onOpenChange?.(false);
+            }}
           >
-              X
+            <Image src={icons.crossIcon} alt="fermer" />
           </div>
         </Dialog.Content>
       </Dialog.Portal>

src/components/table/table.tsx

@@ -177,7 +177,7 @@ export default function Table<TData, TValue>({
 
             <div className="flex items-center justify-end space-x-2 py-4">
             <button
-                className="bg-gray-100 shadow-xs hover:bg-gray-300 px-3 py-1 rounded w-9 h-9"
+                className="hover:bg-gray-300 cursor-pointer px-3 py-1 rounded w-9 h-9"
                 onClick={() => table.previousPage()}
                 disabled={!table.getCanPreviousPage()}
             >
@@ -192,7 +192,7 @@ export default function Table<TData, TValue>({
                             "px-3 py-1 rounded w-9 h-9",
                             pageNumber === currentPage 
                                 ? "bg-[#E9F0FF] text-blue-400"
-                                : "bg-gray-100 hover:bg-gray-300"
+                                : "hover:bg-gray-300 cursor-pointer"
                         )}
                         onClick={() => table.setPageIndex(pageNumber - 1)}
                     >
@@ -202,7 +202,7 @@ export default function Table<TData, TValue>({
             </div>
 
             <button
-                className="w-9 h-9 bg-gray-100 shadow-xs hover:bg-gray-300 hover:text-black px-3 py-1 rounded"
+                className="w-9 h-9 hover:bg-gray-300 cursor-pointer hover:text-black px-3 py-1 rounded"
                 onClick={() => table.nextPage()}
                 disabled={!table.getCanNextPage()}
             >