fix: merge

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/themes": "^3.2.1",
     "@tanstack/react-query": "^5.69.0",
     "@tanstack/react-table": "^8.21.2",
     "axios": "^1.8.4",
@@ -24,6 +25,7 @@
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
     "sass": "^1.86.0",
+    "sonner": "^2.0.2",
     "zod": "^3.24.2"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@radix-ui/react-dialog':
         specifier: ^1.1.6
         version: 1.1.6(@types/react-dom@19.0.4(@types/react@19.0.12))(@types/react@19.0.12)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/themes':
+        specifier: ^3.2.1
+        version: 3.2.1(@types/react-dom@19.0.4(@types/react@19.0.12))(@types/react@19.0.12)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@tanstack/react-query':
         specifier: ^5.69.0
         version: 5.69.0(react@19.0.0)
@@ -53,6 +56,9 @@ importers:
       sass:
         specifier: ^1.86.0
         version: 1.86.0
+      sonner:
+        specifier: ^2.0.2
+        version: 2.0.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       zod:
         specifier: ^3.24.2
         version: 3.24.2
@@ -1012,6 +1018,9 @@ packages:
     resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==}
     engines: {node: '>= 10.0.0'}
 
+  '@radix-ui/colors@3.0.0':
+    resolution: {integrity: sha512-FUOsGBkHrYJwCSEtWRCIfQbZG7q1e6DgxCIOe1SUQzDe/7rXXeA47s8yCn6fuTNQAj1Zq4oTFi9Yjp3wzElcxg==}
+
   '@radix-ui/number@1.1.0':
     resolution: {integrity: sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==}
 
@@ -1658,6 +1667,19 @@ packages:
   '@radix-ui/rect@1.1.0':
     resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==}
 
+  '@radix-ui/themes@3.2.1':
+    resolution: {integrity: sha512-WJL2YKAGItkunwm3O4cLTFKCGJTfAfF6Hmq7f5bCo1ggqC9qJQ/wfg/25AAN72aoEM1yqXZQ+pslsw48AFR0Xg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: 16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: 16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@rtsao/scc@1.1.0':
     resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
 
@@ -2128,6 +2150,9 @@ packages:
     resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
     engines: {node: '>= 14.16.0'}
 
+  classnames@2.5.1:
+    resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
+
   client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
 
@@ -3446,6 +3471,12 @@ packages:
   snake-case@3.0.4:
     resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==}
 
+  sonner@2.0.2:
+    resolution: {integrity: sha512-xOeXErZ4blqQd11ZnlDmoRmg+ctUJBkTU8H+HVh9rnWi9Ke28xiL39r4iCTeDX31ODTe/s1MaiaY333dUzLCtA==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -4685,6 +4716,8 @@ snapshots:
       '@parcel/watcher-win32-x64': 2.5.1
     optional: true
 
+  '@radix-ui/colors@3.0.0': {}
+
   '@radix-ui/number@1.1.0': {}
 
   '@radix-ui/primitive@1.1.1': {}
@@ -5380,6 +5413,18 @@ snapshots:
 
   '@radix-ui/rect@1.1.0': {}
 
+  '@radix-ui/themes@3.2.1(@types/react-dom@19.0.4(@types/react@19.0.12))(@types/react@19.0.12)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@radix-ui/colors': 3.0.0
+      classnames: 2.5.1
+      radix-ui: 1.1.3(@types/react-dom@19.0.4(@types/react@19.0.12))(@types/react@19.0.12)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+      react-remove-scroll-bar: 2.3.8(@types/react@19.0.12)(react@19.0.0)
+    optionalDependencies:
+      '@types/react': 19.0.12
+      '@types/react-dom': 19.0.4(@types/react@19.0.12)
+
   '@rtsao/scc@1.1.0': {}
 
   '@rushstack/eslint-patch@1.11.0': {}
@@ -5893,6 +5938,8 @@ snapshots:
     dependencies:
       readdirp: 4.1.2
 
+  classnames@2.5.1: {}
+
   client-only@0.0.1: {}
 
   clsx@2.1.1: {}
@@ -7354,6 +7401,11 @@ snapshots:
       dot-case: 3.0.4
       tslib: 2.8.1
 
+  sonner@2.0.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+    dependencies:
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
   source-map-js@1.2.1: {}
 
   stable-hash@0.0.5: {}

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

@@ -1,13 +1,14 @@
 "use client";
 
 import Form from "#/components/form/form"
-import { loginSchema } from "#/schema/loginSchema"
+import { loginSchema } from "#/schema"
 import { useMutation } from "@tanstack/react-query"
 import { signIn } from "next-auth/react"
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 
 export default function LoginPage() {
     const router = useRouter()
+    const params = useSearchParams().get("redirect_to");
 
     const mutation = useMutation({
         mutationKey: ['login'],
@@ -25,19 +26,22 @@ export default function LoginPage() {
                         : result.error;
                     console.error(errorMessage)
                     throw new Error(result.error)
+                } else {
+                    if (params) {
+                        router.push(params);
+                      } else {
+                        router.push('/admin/home')
+                      }
                 }
                 return result
-            } catch (error: any) {
-                if (error.message.includes("Network Error")) {
+            } catch (error: unknown) {
+                if (error instanceof Error && error.message.includes("Network Error")) {
                     console.error("Problème de connexion au serveur");
                 }
                 console.error("Autre = ", error);
             }
             
 
-        },
-        onSuccess: () => {
-            router.push('/admin/home')
         },
         onError: (error: Error) => {
             console.error(error.message)
@@ -48,7 +52,7 @@ export default function LoginPage() {
         <div>
             <Form
                 title="Connexion"
-                className="bg-white p-10 shadow-2xl w-3/4 lg:w-lg"
+                formClassName="bg-white p-10 shadow-2xl w-3/4 lg:w-lg"
                 fields={[
                     {
                         label: "Email",
@@ -66,7 +70,7 @@ export default function LoginPage() {
                 ]}
                 submit={mutation.mutate} 
                 schema={loginSchema}
-                child={<button type="submit" className="btn-auth">Connexion</button>}
+                child={<button disabled={mutation.isPending} type="submit" className={`${mutation.isPending ? "btn-auth-loading" : "btn-auth"} mt-4`}>{mutation.isPending ? "Chargement..." : "Connexion"}</button>}
              />
         </div>
     )

src/app/admin/admins/page.tsx

@@ -1,8 +1,432 @@
+"use client";
 
+import { useState } from "react";
+import Image from "next/image";
+import { useSession } from "next-auth/react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { ColumnDef } from "@tanstack/react-table";
+import axios from "axios";
+import { DropdownMenu } from "radix-ui";
+import FloatingLabelInput from "#/components/floatingLabelInput";
+import { Modal } from "#/components/modal";
+import Table from "#/components/table/table";
+import Form from "#/components/form/form";
+import { icons } from "#/assets/icons";
+import { adminSchema } from "#/schema";
+import { Admin } from "#/types";
+
+export default function Admins() {
+  const { data: session, status } = useSession();
+  const [openModal, setOpenModal] = useState(false);
+  const [openDeleteModal, setOpenDeleteModal] = useState(false);
+  const [openEditModal, setOpenEditModal] = useState(false);
+  const [selectedAdminId, setSelectedAdminId] = useState<string | null>(null);
+
+  const queryClient = useQueryClient();
+
+  const {
+    data: users,
+    refetch,
+    isLoading,
+  } = useQuery({
+    enabled: status === "authenticated",
+    queryKey: ["users"],
+    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 as Admin[];
+      } catch (error) {
+        console.error(error);
+        return [];
+      }
+    },
+  });
+
+  const createMutation = useMutation({
+    mutationFn: async (data: {
+      last_name: string;
+      first_name: string;
+      email: string;
+    }) => {
+      try {
+        const response = await axios.post(
+          "https://private-docs-api.intside.co/users/",
+          { ...data, user_type: "admin" },
+          { headers: { Authorization: `Bearer ${session?.user.access_token}` } }
+        );
+
+        if (response.status === 200 || response.status === 201) {
+          console.log("ajout réussie !");
+          setOpenModal(false);
+        }
+      } catch (error) {
+        console.error("Erreur lors de la création", error);
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["users"] });
+      refetch();
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: async (data: {
+      id: string;
+      last_name: string;
+      first_name: string;
+      email: string;
+    }) => {
+      try {
+        const response = await axios.put(
+          `https://private-docs-api.intside.co/users/${data.id}/`,
+          data,
+          { headers: { Authorization: `Bearer ${session?.user.access_token}` } }
+        );
+
+        if (response.status === 200 || response.status === 201) {
+          console.log("modification réussie !");
+          setOpenEditModal(false);
+        }
+      } catch (error) {
+        console.error("Erreur lors de la mise à jour", error);
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["users"] });
+      refetch();
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: async (id: string) => {
+      try {
+        const response = await axios.delete(
+          `https://private-docs-api.intside.co/users/${id}/`,
+          {
+            headers: { Authorization: `Bearer ${session?.user.access_token}` },
+          }
+        );
+
+        if (response.status === 200 || response.status === 201) {
+          console.log("Suppresion réussie !");
+          setOpenDeleteModal(false);
+        }
+      } catch (error) {
+        console.error("Erreur lors de la suppression", error);
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["users"] });
+      refetch();
+    },
+  });
+
+  const bulkDeleteMutation = useMutation({
+    mutationFn: async (ids: string[]) => {
+      try {
+        const deletePromises = ids.map((id) =>
+          axios.delete(`https://private-docs-api.intside.co/users/${id}/`, {
+            headers: { Authorization: `Bearer ${session?.user.access_token}` },
+          })
+        );
+        await Promise.all(deletePromises);
+      } catch (error) {
+        console.error("Erreur lors de la suppression groupée", error);
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["users"] });
+      refetch();
+    },
+  });
+
+  const columns: ColumnDef<Admin>[] = [
+    {
+      header: "Administrateurs",
+      cell: ({ row }) => {
+        const fullName = `${row.original.first_name} ${row.original.last_name}`;
+        const initials = `${row.original.first_name[0]}${row.original.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>{fullName}</p>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: "email",
+      header: "Adresse e-mail",
+    },
+    {
+      id: "actions",
+      cell: ({ row }) => {
+        const admin = row.original;
+        return (
+          <div className="flex justify-end p-2 space-x-2">
+            {/* Modal d'édition */}
+            <Modal
+              open={openEditModal && selectedAdminId === admin.id}
+              onOpenChange={(isOpen) => {
+                if (!isOpen) {
+                  setSelectedAdminId(null);
+                  setOpenEditModal(false);
+                }
+              }}
+              trigger={
+                <div
+                  onClick={() => {
+                    setSelectedAdminId(admin.id);
+                    setOpenEditModal(true);
+                  }}
+                >
+                  <Image
+                    alt="Éditer"
+                    width={24}
+                    height={24}
+                    src={icons.editIcon}
+                    className="cursor-pointer responsive-icon mr-1"
+                  />
+                </div>
+              }
+              title="Modifier un admin"
+              content={
+                <Form
+                  fields={[
+                    { name: "id", type: "hidden", defaultValue: admin.id },
+                    {
+                      name: "last_name",
+                      label: "Nom",
+                      type: "text",
+                      placeholder: "Entrer le nom de l'admin",
+                      defaultValue: admin.last_name,
+                    },
+                    {
+                      name: "first_name",
+                      label: "Prénom",
+                      type: "text",
+                      placeholder: "Entrer le prénom de l'admin",
+                      defaultValue: admin.first_name,
+                    },
+                    {
+                      name: "email",
+                      label: "Adresse e-mail",
+                      type: "text",
+                      placeholder: "Entrer l'email de l'admin",
+                      defaultValue: admin.email,
+                    },
+                  ]}
+                  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"
+                        } cta modal-cta mt-4 cursor-pointer`}
+                      >
+                        {updateMutation.isPending ? "En cours..." : "Modifier"}
+                      </button>
+                    </div>
+                  }
+                />
+              }
+            />
+
+            {/* Modal de suppression */}
+            <Modal
+              open={openDeleteModal && selectedAdminId === admin.id}
+              onOpenChange={(isOpen) => {
+                if (!isOpen) {
+                  setSelectedAdminId(null);
+                  setOpenDeleteModal(false);
+                }
+              }}
+              trigger={
+                <div
+                  onClick={() => {
+                    setSelectedAdminId(admin.id);
+                    setOpenDeleteModal(true);
+                  }}
+                >
+                  <Image
+                    alt="Supprimer"
+                    src={icons.trash}
+                    className="cursor-pointer responsive-icon"
+                  />
+                </div>
+              }
+              title="Supprimer un admin"
+              content={
+                <div>
+                  <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"
+                      onClick={() => {
+                        setOpenDeleteModal(false);
+                      }}
+                    >
+                      Annuler
+                    </button>
+                    <button
+                      className="bg-red-500 text-white py-2 px-4 rounded-full hover:bg-red-600 cursor-pointer"
+                      onClick={() => {
+                        deleteMutation.mutate(admin.id);
+                      }}
+                    >
+                      Supprimer
+                    </button>
+                  </div>
+                </div>
+              }
+            />
+          </div>
+        );
+      },
+    },
+  ];
 
-export default function Admins (){
   return (
-    <>
-    </>
-  )
-}
+    <Table
+      columns={columns}
+      data={users || []}
+      pageSize={5}
+      isDataLoading={isLoading}
+      header={(table) => {
+        const selectedIds = table
+          .getRowModel()
+          .rows.filter((row) => row.getIsSelected())
+          .map((row) => row.original.id);
+
+        return (
+          <div className="grid grid-cols-1 lg:grid-cols-2 w-full space-y-3">
+            <div className="flex items-center space-x-3">
+              <input
+                type="checkbox"
+                checked={
+                  table.getIsAllPageRowsSelected() ||
+                  (table.getIsSomePageRowsSelected() && undefined)
+                }
+                onChange={(e) =>
+                  table.toggleAllPageRowsSelected(e.target.checked)
+                }
+              />
+
+              <DropdownMenu.Root>
+                <DropdownMenu.Trigger asChild>
+                  <p className="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}
+                  >
+                    <DropdownMenu.Item
+                      onClick={() => bulkDeleteMutation.mutate(selectedIds)}
+                      className="p-2 text-[14px] cursor-pointer hover:bg-blue-100 hover:text-blue-500 rounded-md"
+                    >
+                      Supprimer
+                    </DropdownMenu.Item>
+                  </DropdownMenu.Content>
+                </DropdownMenu.Portal>
+              </DropdownMenu.Root>
+            </div>
+
+            <div className="flex justify-between lg:justify-end space-x-3">
+              {/* Modal d'ajout */}
+              <Modal
+                title="Ajouter un admin"
+                open={openModal}
+                onOpenChange={(isOpen) => {
+                  if (!isOpen) {
+                    setOpenModal(false);
+                  }
+                }}
+                trigger={
+                  <div onClick={() => setOpenModal(true)} className="cta">
+                    Ajouter un admin
+                  </div>
+                }
+                content={
+                  <Form
+                    fields={[
+                      {
+                        name: "last_name",
+                        label: "Nom",
+                        type: "text",
+                        placeholder: "Entrer le nom de l'admin",
+                      },
+                      {
+                        name: "first_name",
+                        label: "Prénom",
+                        type: "text",
+                        placeholder: "Entrer le prénom de l'admin",
+                      },
+                      {
+                        name: "email",
+                        label: "Adresse e-mail",
+                        type: "text",
+                        placeholder: "Entrer l'email de l'admin",
+                      },
+                    ]}
+                    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"
+                          } cta modal-cta mt-4 cursor-pointer`}
+                        >
+                          {createMutation.isPending
+                            ? "Création de l'admin..."
+                            : "Créer le compte"}
+                        </button>
+                      </div>
+                    }
+                  />
+                }
+              />
+
+              <FloatingLabelInput
+                name="search"
+                placeholder="Effectuer une recherche"
+                type="search"
+                onChange={(value) => table.setGlobalFilter(value)}
+                button={
+                  <Image
+                    alt="Filtrer"
+                    src={icons.filterIcon}
+                    className="cursor-pointer"
+                  />
+                }
+              />
+            </div>
+          </div>
+        );
+      }}
+    />
+  );
+}

src/app/admin/home/page.tsx

@@ -1,158 +1,198 @@
-"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, isPending } = useMutation({
+  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 !')
+        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: "Utilisateurs",
-  //   header: "Utilisateurs",
-  // },
-  {
-    header: "Administrateurs",
-    cell: ({ row }) => {
-      const value = String(row.original.owner.first_name) + " " + String(row.original.owner.last_name)
-      return(
-        <p>{value}</p>
-      )
-    }
-  },
-  {
-    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: "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>
+        );
+      },
+    },
+    {
+      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: ({ cell }) => {
-        const id = String(cell.row.original.id)
-        return (
-          <div className="relative p-2 cursor-pointer"
-            // onClick={() => { mutate(id) }}
           >
-            <Modal 
-              open={open}
+            {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={() => setOpen(true)}>
-                  <Image alt="" src={icons.trash} className="absolute right-2 top-[-50%] transform translate-middle-y hover:text-blue-500" />
+                <div
+                  onClick={() => {
+                    setSelectedId(id);
+                  }}
+                >
+                  <Image
+                    alt=""
+                    src={icons.trash}
+                    className="cursor-pointer responsive-icon"
+                  />
                 </div>
               }
               title={
-                <p className="font-bold text-3xl">Supprimer une organisation</p>
+                <p className="font-bold text-3xl">
+                  Supprimer cette organisation
+                </p>
               }
               content={
                 <div>
-                  <p>Voulez-vous vraiment supprimer cette organisation ?</p>
+                  <p className="text-center">
+                    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">
-                    <button 
-                      className="bg-blue-100 text-blue-600 py-2 px-4 text-lg rounded-full text-center hover:bg-blue-200"
-                      onClick={() => { setOpen(false) }}
-                      >
+                  <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="bg-red-500 text-white py-2 px-4 text-lg rounded-full text-center hover:bg-red-600"
-                      onClick={() => { 
-                        mutate(id)
-                        setOpen(false) 
+                    <button
+                      className="cta modal-cta danger"
+                      onClick={() => {
+                        mutate(id);
+                        setSelectedId(null);
                       }}
                     >
                       Supprimer
@@ -161,23 +201,24 @@ export default function HomePage () {
                 </div>
               }
             />
-          </div>  
-        )
-    }
-  }
-]
+          </div>
+        );
+      },
+    },
+  ];
 
-  return(
+  return (
     <div className="space-y-10">
       <Statistics />
 
       <p className="font-bold text-xl">Dernières organisations actives</p>
 
-      <Table 
-        columns={columns} 
-        data={companies || []} 
+      <Table
+        columns={columns}
+        isDataLoading={isLoading}
+        data={companies || []}
         pageSize={5}
       />
     </div>
-  )
-}
+  );
+}

src/app/admin/layout.tsx

@@ -1,9 +1,24 @@
-import { ReactNode } from "react";
+"use client"
+
+import { ReactNode, useEffect } from "react";
 import "../../assets/css/admin.css"
 import Sidebar from "../../components/admin/sidebar";
 import Header from "../../components/admin/adminHeader";
+import { signOutFunc } from "#/lib/function";
+import { usePathname } from "next/navigation";
+import { useSession } from "next-auth/react";
 
 export default function Dashboard({ children }: { children: ReactNode }) {
+  const { status, data } = useSession();
+  const path = usePathname();
+
+  useEffect(() => {
+    if (status !== "loading") {
+      if (status === "unauthenticated" || (data && !data.user.access_token)) {
+        signOutFunc();
+      }
+    }
+  }, [data, status, path]);
 
   return (
 
@@ -11,7 +26,7 @@ export default function Dashboard({ children }: { children: ReactNode }) {
       <Sidebar />
       <main className="flex-grow-1 min-w-0 pt-md-1 pt-sm-5">
         <Header/>
-        <div className="p-4">
+        <div className="main px-[44px] py-[64px] ">
           {children}
         </div>
       </main>

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

@@ -0,0 +1,164 @@
+"use client"
+import { icons } from "#/assets/icons"
+import Image from "next/image"
+import axios from "axios";
+import { useSession } from "next-auth/react";
+import { useQuery } from "@tanstack/react-query";
+import { Company, CompanyById, Owner } from "#/types";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+
+export default function Profile() {
+
+  const pathname = usePathname();
+
+  const segments = pathname.split("/");
+  const uid = segments[segments.length - 1];
+
+
+  const { data: session, status } = useSession();
+
+  const { data: companyInfos, isLoading } = useQuery({
+    enabled: status === 'authenticated',
+    queryKey: ["companyStats", session?.user.access_token],
+    queryFn: async () => {
+      try {
+        const response = await axios.get(
+          `https://private-docs-api.intside.co/companies/${uid}`, {
+          headers: {
+            'Authorization': `Bearer ${session?.user.access_token}`
+          },
+          params: {
+            details: true
+          }
+        }
+        );
+
+        if (response.data) {
+          return response.data as CompanyById;
+        }
+      } catch (error: any) {
+        console.error(error);
+      }
+    }
+  });
+
+  /*
+  const adminId = companyInfos?.owner;
+  console.log('will run the admin request');
+
+  const { data: adminInfos } = useQuery({
+    enabled: !!adminId && status === 'authenticated',  // Only run when adminId is available
+    queryKey: ["admin", adminId],  // Ensure adminId is used in the query key
+    queryFn: async () => {
+      console.log('running the admin request');
+      //console.log('url :', `https://private-docs-api.intside.co/users/${adminId}`);
+
+      try {
+        const response = await axios.get(
+          `https://private-docs-api.intside.co/users/${adminId}`, {   // Use adminId instead of companyInfos
+          headers: {
+            'Authorization': `Bearer ${session?.user.access_token}`
+          }
+        }
+        );
+
+        if (response.data) {
+          return response.data as Owner;
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    }
+
+  });
+*/
+
+  return (
+    <>
+      {/* {companyInfos[0]?.id} */}
+      <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}/update`} type="Link" className="update-profile-name cta">
+              Modifier
+            </Link>
+          </div>
+          <div className="r-flex-column p-[32px] r-gap-24 items-center lg:items-start ">
+            <h3 className="font-semibold">Détails de l'admin</h3>
+            <div className="r-flex flex-wrap r-r-gap-12 gap-[12px]">
+              <div className="r-flex-between items-center w-max">
+                <div className="icon-rounded">
+                  <Image src={icons.mailIcon} alt="E-mail" />
+                </div>
+                <div className="r-flex-column p-[14px] admin-card r-gap-2">
+                  <h4 className="email-label font-semibold">Adresse e-mail</h4>
+                  <p className="email">{companyInfos?.owner?.email || "email"}</p>
+                </div>
+              </div>
+              <div className="r-flex-between items-center w-max">
+                <div className="icon-rounded">
+                  <Image src={icons.personalCard} alt="E-mail" />
+                </div>
+                <div className="r-flex gap-[12px] admin-card">
+                  <div className="r-flex-column p-[14px] r-gap-2">
+                    <h4 className="surname-label font-semibold">Prénom</h4>
+                    <p className="surname">{companyInfos?.owner?.first_name || "nom"}</p>
+                  </div>
+                  <div className="r-flex-column p-[14px] r-gap-2">
+                    <h4 className="name-label font-semibold">Nom</h4>
+                    <p className="name">{companyInfos?.owner?.last_name || "nom"}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <hr />
+          <div className="r-flex p-[32px] r-gap-24">
+            <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" />
+                </div>
+                <div className="r-flex-column p-[14px] admin-card r-gap-2">
+                  <h4 className="users-label font-semibold">Documents</h4>
+                  <p className="r-secondary users">{companyInfos?.total_documents || "0"}</p>
+                </div>
+              </div>
+              <div className="r-flex-between items-center w-max">
+                <div className="icon-rounded">
+                  <Image src={icons.userGroupBlue} alt="Documents" />
+                </div>
+                <div className="r-flex-column p-[14px] admin-card r-gap-2">
+                  <h4 className="users-label font-semibold">Utilisateurs</h4>
+                  <p className="r-secondary users">{companyInfos?.total_users || "0"}</p>
+                </div>
+              </div>
+              <div className="r-flex-between items-center w-max">
+                <div className="icon-rounded">
+                  <Image src={icons.maximizeIcon} alt="Fichiers" />
+                </div>
+                <div className="r-flex-column p-[14px] admin-card r-gap-2">
+                  <h4 className="files-size-label font-semibold">Taille des fichiers</h4>
+                  <p className="r-secondary files-size">{companyInfos?.total_documents_sizes + " "}GB</p>
+                </div>
+              </div>
+              <div className="r-flex-between items-center w-max">
+                <div className="icon-rounded">
+                  <Image src={icons.timerIcon} alt="Horlorge" />
+                </div>
+                <div className="r-flex-column p-[14px] admin-card r-gap-2">
+                  <h4 className="last-connexion-label font-semibold">Dernière utilisation</h4>
+                  <p className="r-secondary last-connexion">{companyInfos?.last_use || "-"}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,371 @@
+"use client";
+
+import axios from "axios";
+import { useSession } from "next-auth/react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Admin, Company, CompanyById } from "#/types";
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import Form from "#/components/form/form";
+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 { data: session, status } = useSession();
+  const [openResetModal, setOpenResetModal] = useState(false);
+  const [openBlockModal, setOpenBlockModal] = useState(false);
+
+  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/companies/${uid}`,
+          {
+            headers: {
+              Authorization: `Bearer ${session?.user.access_token}`,
+            },
+            params: {
+              details: true,
+            },
+          }
+        );
+
+        if (response.data) {
+          return response.data as CompanyById;
+        }
+      } 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 (data: { id: 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("Modif réussie !");
+          toast.success("Modification réussie !");
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    },
+
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["company"] });
+      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 (
+    <>
+      <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={`/admin/organizations/${uid}/`}
+              type="Link"
+              className="cta cancel"
+            >
+              Annuler
+            </Link>
+          </div>
+
+          <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} />
+              </div>
+              <div className="label-container">
+                <FloatingLabelInput label="Adresse e-mail de l’admin" name="email" type="text" placeholder="contact@intside.com" defaultValue={companyInfos?.owner.email} />
+              </div>
+              <div className="label-container">
+                <FloatingLabelInput label="Nom de l’admin" name="admin-name" type="text" placeholder="Company" defaultValue={companyInfos?.owner.last_name} />
+              </div>
+              <div className="label-container">
+                <FloatingLabelInput label="Prénom de l’admin" name="admin-surname" type="text" placeholder="Intside" defaultValue={companyInfos?.owner.last_name} />
+              </div>
+            </div>
+            <div className="ctas flex gap-12 ">
+              <button type="button" className="cta">Modifier</button>
+              <button type="button" className="cta info">Mot de passe</button>
+              <button type="button" className="cta danger">Bloquer</button>
+            </div>
+          </div> */}
+        </div>
+      </div>
+    </>
+  );
+}

src/app/admin/organizations/page.tsx

@@ -1,8 +1,436 @@
+"use client";
 
+import { useState } from "react";
+import Image from "next/image";
+import { useSession } from "next-auth/react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { ColumnDef } from "@tanstack/react-table";
+import axios from "axios";
+import { DropdownMenu } from "radix-ui";
+import FloatingLabelInput from "#/components/floatingLabelInput";
+import { Modal } from "#/components/modal";
+import Table from "#/components/table/table";
+import Form from "#/components/form/form";
+import { icons } from "#/assets/icons";
+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);
+  const [openDeleteModal, setOpenDeleteModal] = useState(false);
+  const [selectedAdminId, setSelectedAdminId] = useState<string | null>(null);
+
+  const queryClient = useQueryClient();
+
+  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}`,
+            },
+          }
+        );
+
+        if (response.data) {
+          return response.data.data as Company[];
+        }
+      } catch (error) {
+        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 createMutation = useMutation({
+    mutationFn: async (data: {
+      name: string;
+      description: string;
+      status: string;
+      is_premium: string;
+      owner: string;
+    }) => {
+      try {
+        const response = await axios.post(
+          "https://private-docs-api.intside.co/companies/",
+          data,
+          { headers: { Authorization: `Bearer ${session?.user.access_token}` } }
+        );
+
+        if (response.status === 200 || response.status === 201) {
+          console.log("ajout réussie !");
+          setOpenModal(false);
+        }
+      } catch (error) {
+        console.error("Erreur lors de la création", error);
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["organizations"] });
+      refetch();
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: async (id: string) => {
+      try {
+        const response = await axios.delete(
+          `https://private-docs-api.intside.co/companies/${id}/`,
+          {
+            headers: { Authorization: `Bearer ${session?.user.access_token}` },
+          }
+        );
+
+        if (response.status === 200 || response.status === 201) {
+          console.log("Suppresion réussie !");
+          setOpenDeleteModal(false);
+        }
+      } catch (error) {
+        console.error("Erreur lors de la suppression", error);
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["organizations"] });
+      refetch();
+    },
+  });
+
+  const bulkDeleteMutation = useMutation({
+    mutationFn: async (ids: string[]) => {
+      try {
+        const deletePromises = ids.map((id) =>
+          axios.delete(`https://private-docs-api.intside.co/companies/${id}/`, {
+            headers: { Authorization: `Bearer ${session?.user.access_token}` },
+          })
+        );
+        await Promise.all(deletePromises);
+      } catch (error) {
+        console.error("Erreur lors de la suppression groupée", error);
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["organizations"] });
+      refetch();
+    },
+  });
+
+  const columns: ColumnDef<Company>[] = [
+    {
+      accessorKey: "name",
+      header: "Organisations",
+      cell: ({ row }) => {
+        const company = row.original;
+        return (
+          <Link href={`/admin/organizations/${company.id}`}>
+            <p className="text-blue-600 hover:underline">{company.name}</p>
+          </Link>
+        );
+      },
+    },
+    {
+      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>
+        );
+      },
+    },
+    {
+      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"
+                  ? "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"
+              : ""}
+          </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);
+                }
+              }}
+              trigger={
+                <div
+                  onClick={() => {
+                    setSelectedAdminId(company.id);
+                    setOpenDeleteModal(true);
+                  }}
+                >
+                  <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>
+        );
+      },
+    },
+  ];
 
-export default function Organizations (){
   return (
-    <>
-    </>
-  )
-}
+    <Table
+      columns={columns}
+      data={companies || []}
+      pageSize={5}
+      isDataLoading={isLoading}
+      header={(table) => {
+        const selectedIds = table
+          .getRowModel()
+          .rows.filter((row) => row.getIsSelected())
+          .map((row) => row.original.id);
+
+        return (
+          <div className="grid grid-cols-1 lg:grid-cols-2 w-full space-y-3">
+            <div className="flex items-center space-x-3">
+              <input
+                type="checkbox"
+                checked={
+                  table.getIsAllPageRowsSelected() ||
+                  (table.getIsSomePageRowsSelected() && undefined)
+                }
+                onChange={(e) =>
+                  table.toggleAllPageRowsSelected(e.target.checked)
+                }
+              />
+
+              <DropdownMenu.Root>
+                <DropdownMenu.Trigger asChild>
+                  <p className="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 w-full"
+                    sideOffset={0}
+                    side="bottom"
+                    align="end"
+                  >
+                    <DropdownMenu.Item
+                      onClick={() => bulkDeleteMutation.mutate(selectedIds)}
+                      className="p-2 text-[14px] cursor-pointer hover:bg-blue-100 hover:text-blue-500 rounded-md"
+                    >
+                      Supprimer
+                    </DropdownMenu.Item>
+                  </DropdownMenu.Content>
+                </DropdownMenu.Portal>
+              </DropdownMenu.Root>
+            </div>
+
+            <div className="flex justify-between lg:justify-end space-x-3">
+              {/* Modal d'ajout */}
+              <Modal
+                title="Ajouter une organisation"
+                open={openModal}
+                onOpenChange={(isOpen) => {
+                  if (!isOpen) {
+                    setOpenModal(false);
+                  }
+                }}
+                trigger={
+                  <div onClick={() => setOpenModal(true)} className="cta">
+                    Ajouter une organisation
+                  </div>
+                }
+                content={
+                  <Form
+                    fields={[
+                      {
+                        name: "name",
+                        label: "Nom de l'organisation",
+                        type: "text",
+                        placeholder: "Entrer le nom de l'organisation",
+                      },
+                      {
+                        name: "description",
+                        label: "Description",
+                        type: "textarea",
+                        placeholder: "Entrer la description de l'organisation",
+                      },
+                      {
+                        name: "status",
+                        label: "Statut",
+                        type: "select",
+                        options: [
+                          { label: "Actif", value: "active" },
+                          { label: "Inactif", value: "inactive" },
+                          { label: "En attente", value: "pending" },
+                          { label: "Bloqué", value: "blocked" },
+                        ],
+                      },
+                      {
+                        name: "owner",
+                        label: "Administrateur",
+                        type: "select",
+                        options:
+                          users?.map((user: { id: string; name: string }) => ({
+                            label: user.name,
+                            value: user.id,
+                          })) || [],
+                      },
+                    ]}
+                    submit={createMutation.mutate} // Le type est maintenant compatible
+                    schema={companySchema}
+                    child={
+                      <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>
+                      </div>
+                    }
+                  />
+                }
+              />
+
+              <FloatingLabelInput
+                name="search"
+                placeholder="Effectuer une recherche"
+                type="search"
+                onChange={(value) => table.setGlobalFilter(value)}
+                button={
+                  <Image
+                    alt="Filtrer"
+                    src={icons.filterIcon}
+                    className="cursor-pointer"
+                  />
+                }
+              />
+            </div>
+          </div>
+        );
+      }}
+    />
+  );
+}

src/app/globals.css

@@ -14,6 +14,8 @@
   --secondary: #9FA8BC;
   --danger: #F33F19;
   --cinder: #E7E5E4;
+  --bluegray: #E9F0FF;
+  --gray: #E7EBF3;
 }
 
 [ data-theme="dark"] {
@@ -55,9 +57,16 @@ body {
   z-index: 1;
 }
 
-.btn-floating {
+.btn-floating-right {
   position: absolute;
-  right: 12px;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.btn-floating-left {
+  position: absolute;
+  left: 8px;
   top: 50%;
   transform: translateY(-50%);
 }
@@ -73,4 +82,144 @@ body {
   &:hover {
     background-color: rgb(22, 77, 185);
   }
+}
+
+.btn-auth-loading {
+  border-radius: 9999px;
+  background-color: #93b4f8;
+  color: white;
+  width: 100%;
+  padding: 8px;
+}
+
+.responsive-icon {
+  min-width: 16px;
+  min-height: 16px;
+  width: 24px;
+  height: 24px;
+  transition: width 0.2s, height 0.2s;
+}
+
+.cta{
+  padding: 10px 24px;
+  width: max-content;
+  height: max-content;
+  color: white;
+  background-color: var(--primary);
+  font-size: 14px;
+  font-weight: 600;
+  border: 1px solid var(--primary);
+  border-radius: 100px;
+  cursor: pointer;
+  text-wrap: nowrap;
+}
+
+.cta.modal-cta{
+  width: 240px;
+  height: 40px;
+}
+
+.cta.cancel{
+  color: var(--secondary);
+  border: 1px solid var(--gray);
+  background-color: var(--gray);
+}
+
+.cta.info{
+  color: var(--primary);
+  background-color: var(--background);
+}
+
+.cta.danger{
+  border: 1px solid var(--danger);
+  background-color: var(--danger);
+}
+
+
+.bg-bluegray{
+  background-color: var(--bluegray);
+}
+.bg-gray{
+  background-color: var(--gray);
+}
+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  */
+
+::-webkit-scrollbar {
+  width: 4px;
+  padding: 0;
+  margin: 0;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--background);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--primary);
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-track:hover {
+  background: var(--background);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--primary);
+}
+
+
+@media (max-width: 768px) {
+  .responsive-icon {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+@media (max-width: 480px) {
+  .responsive-icon {
+    width: 16px;
+    height: 16px;
+  }
 }

src/app/layout.tsx

@@ -1,12 +1,10 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
 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";
-
-const inter = Inter({ subsets: ["latin"] });
+import { ToastClient } from "#/components/provider/toastClient";
 
 export const metadata: Metadata = {
   title: "Private Docs",
@@ -18,7 +16,6 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  
   return (
     <html lang="en">
       <head>
@@ -30,6 +27,7 @@ export default function RootLayout({
           <QueryClientProvide>
             <NextTopLoader color="#246BFD" shadow="0" />
             {children}
+            <ToastClient richColors />
           </QueryClientProvide>
         </AuthProvider>
       </body>

src/assets/css/admin.css

@@ -1,53 +1,108 @@
-.sidebar{
+/* Sidebar */
+
+.sidebar {
   border-right: 1px solid var(--cinder);
+  position: fixed;
 }
 
-.nav-item .nav-home{
+.nav-item .nav-home {
   margin-bottom: -10px;
 }
 
-.nav-item{
+.nav-item {
   width: 100%;
   height: max-content;
 }
 
-.nav-item.active{
+.nav-item.active {
   border-right: 2px solid var(--primary);
 }
 
-.nav-item svg{
-  color: var(--primary)!important;
-  background-color: var(--primary)!important;
-  fill: var(--primary)!important;
-  stroke: var(--primary)!important
+.nav-item svg {
+  color: var(--primary) !important;
+  background-color: var(--primary) !important;
+  fill: var(--primary) !important;
+  stroke: var(--primary) !important
 }
 
-.nav-home{
+.nav-home {
   margin-top: -11px;
   margin-bottom: -11px;
 }
 
-.icon-border{
+/* Border */
+.icon-border {
   border: 1px solid var(--cinder);
   padding: 8px;
   border-radius: 12px;
   cursor: pointer;
 }
 
-.dropdown-menu{
+.dropdown-menu {
   width: max-content;
   background-color: var(--background);
   border-radius: 8px;
   box-shadow: 0 0 24px #0000001A;
 }
-.dropdown-item{
-  
-}
-.dropdown-item a{
+
+.dropdown-item a {
   width: max-content;
   padding: 10px 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 10px;
+}
+
+/* Main */
+
+.p-container {
+  height: 100vh;
+  border: 1px solid var(--gray);
+  overflow: hidden;
+}
+
+.icon-rounded {
+  width: max-content;
+  height: max-content;
+  padding: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--bluegray);
+  border-radius: 100px;
+}
+
+.labels-container {
+  min-width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+}
+
+.labels-container .label-container {
+  width: 40%;
+}
+
+.labels-container .floating-label div.relative {
+  width: 100%;
+}
+
+.admin-infos {
+  gap: 12px;
+}
+.admin-card {
+  width: 284px;
+}
+
+
+
+@media (max-width: 1024px) {
+  .admin-infos {
+    /* justify-content: space-between; */
+    /* gap: 30px; */
+  }
+  .admin-card {
+    /* max-width: 100%; */
+  }
 }

src/assets/css/ruben-ui.css

@@ -119,6 +119,9 @@
 .r-gap-70{
   gap: 70px;
 }
+.r-r-gap-12{
+  row-gap: 12px;
+}
 /* Small (SM) */
 @media (min-width: 640px) {
   /* Styles for small devices and up */

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

@@ -40,6 +40,9 @@ import arrowUp from "./Vector.svg"
 import sunIcon from "./sun.svg"
 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 = {
@@ -83,8 +86,12 @@ export const icons = {
   starIcon,
   arrowUp,
   sunIcon,
-  moonIcon  ,
-  trash
+  moonIcon,
+  trash,
+  mailIcon,
+  personalCard,
+  arrowDown
+
 }
 
 

src/assets/icons/personalcard.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 21H7C3 21 2 20 2 16V8C2 4 3 3 7 3H17C21 3 22 4 22 8V16C22 20 21 21 17 21Z" stroke="#246BFD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 8H19" stroke="#246BFD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 12H19" stroke="#246BFD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17 16H19" stroke="#246BFD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.49994 11.2899C9.49958 11.2899 10.3099 10.4796 10.3099 9.47992C10.3099 8.48029 9.49958 7.66992 8.49994 7.66992C7.50031 7.66992 6.68994 8.48029 6.68994 9.47992C6.68994 10.4796 7.50031 11.2899 8.49994 11.2899Z" stroke="#246BFD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 16.33C11.86 14.88 10.71 13.74 9.26 13.61C8.76 13.56 8.25 13.56 7.74 13.61C6.29 13.75 5.14 14.88 5 16.33" stroke="#246BFD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/icons/sms.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 20.5H7C4 20.5 2 19 2 15.5V8.5C2 5 4 3.5 7 3.5H17C20 3.5 22 5 22 8.5V15.5C22 19 20 20.5 17 20.5Z" stroke="#246BFD" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17 9L13.87 11.5C12.84 12.32 11.15 12.32 10.12 11.5L7 9" stroke="#246BFD" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/admin/adminHeader.tsx

@@ -1,13 +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 ProfilePicture from "../../assets/icons/profile.svg"
+import { signOutFunc } from "#/lib/function";
 
 export default function AdminHeader() {
   const [open, setOpen] = React.useState(false);
@@ -15,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 /> */}
@@ -24,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>
@@ -55,5 +70,5 @@ export default function AdminHeader() {
         </div>
       </nav>
     </>
-  )
-}
+  );
+}

src/components/admin/sidebar.tsx

@@ -8,23 +8,25 @@ import Link from "next/link";
 
 export default function Sidebar() {
 
-  const pathname = usePathname(); 
+  const pathname = usePathname();
 
   return (
     <>
-      <div className="sidebar r-m-0 d-flex flex-column pt-[25px] max-w-[90px] h-[100vh] relative ">
-        <div className="logo r-flex-center px-[20px] ">
-          <Image src={icons.logo} alt="Logo" className="scale-95" />
-        </div>
-        <div className="nav-menu r-column-center h-max pt-[160px] r-gap-40 ">
-        <NavItem link="/admin/home" iconSrc={icons.homeIcon} label="Home" isNavHome={true} isActive={(pathname === "/admin/") || (pathname === "/admin/home")} />
-        <NavItem link="/admin/organizations" iconSrc={icons.companiesIcon} label="Organizations" isActive={pathname.startsWith("/admin/organizations")} />
-        <NavItem link="/admin/admins" iconSrc={icons.userGroup} label="Admins" isActive={pathname.startsWith("/admin/admins")} />
-        </div>
-        <div className="logout absolute bottom-[40px] left-[28px]">
-          <Link href="#" className="cursor-pointer">
-            <Image src={icons.logout} alt="Logout" />
-          </Link>
+      <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" />
+          </div>
+          <div className="nav-menu r-column-center h-max pt-[160px] r-gap-40 ">
+            <NavItem link="/admin/home" iconSrc={icons.homeIcon} label="Home" isNavHome={true} isActive={(pathname === "/admin/") || (pathname === "/admin/home")} />
+            <NavItem link="/admin/organizations" iconSrc={icons.companiesIcon} label="Organizations" isActive={pathname.startsWith("/admin/organizations")} />
+            <NavItem link="/admin/admins" iconSrc={icons.userGroup} label="Admins" isActive={pathname.startsWith("/admin/admins")} />
+          </div>
+          <div className="logout absolute bottom-[40px] left-[28px]">
+            <Link href="/login" className="cursor-pointer">
+              <Image src={icons.logout} alt="Logout" />
+            </Link>
+          </div>
         </div>
       </div>
     </>

src/components/floatingLabelInput.tsx

@@ -1,90 +1,120 @@
 "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,
   name,
-  defaultValue
+  defaultValue,
+  onChange,
 }: FloatingLabelInputProps) {
   const [showPassword, setShowPassword] = useState(false);
+  const [selectedValue, setSelectedValue] = useState(defaultValue || "");
+
+  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"
-              required
+            <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}>{option}</option>
+                <option key={index} value={option.value}>
+                  {option.label}
+                </option>
               ))}
             </select>
-            {button && <div className="btn-floating">{button}</div>}
+            {button && <div className="btn-floating-right">{button}</div>}
           </div>
         );
-      
-      case 'password':
+
+      case "password":
         return (
           <div className="relative w-full">
             <input
               name={name}
               type={showPassword ? "text" : "password"}
               placeholder={placeholder}
-              className="input-form focus:ring-2 focus:ring-blue-500 pr-10"
+              className="input-form focus:ring-2 focus:ring-blue-500 pr-10 outline-none"
               defaultValue={defaultValue}
-              required
             />
             {showPasswordToggle && (
               <button
                 type="button"
                 onClick={() => setShowPassword(!showPassword)}
-                className="btn-floating text-gray-500 hover:text-gray-700 focus:outline-none"
+                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>}
+          </div>
+        );
+
       default:
         return (
           <div className="relative w-full">
             <input
               type={type}
               placeholder={placeholder}
-              className="input-form focus:ring-2 focus:ring-blue-500"
-              required
+              className="input-form modal-input focus:ring-2 focus:ring-blue-500 outline-none"
               name={name}
               defaultValue={defaultValue}
+              onChange={handleChange}
             />
-            {button && <div className="absolute right-0 top-1/2 transform -translate-y-1/2">{button}</div>}
+            {button && <div className="btn-floating-right">{button}</div>}
           </div>
         );
     }
@@ -92,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/form/form.tsx

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

src/components/modal.tsx

@@ -1,39 +1,46 @@
 import * as Dialog from "@radix-ui/react-dialog";
-import { ReactNode, useState } from "react";
+import { ReactNode } from "react";
+import { icons } from "#/assets/icons";
+import Image from "next/image";
 
 export function Modal({
   trigger,
   title,
   content,
-  open
+  open,
+  onOpenChange,
 }: {
   trigger: ReactNode;
-  title: string | ReactNode;
+  title?: string | ReactNode;
   content: ReactNode;
   open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }) {
-  const [toggle, setToggle] = useState(open);
-
   return (
-    <Dialog.Root open={toggle}>
-      <Dialog.Trigger asChild>
-        {trigger}
-      </Dialog.Trigger>
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <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.Title className="text-xl font-bold text-center my-4">
+        <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>
-          {content}
 
-            {/* <div className="absolute top-4 right-4 text-gray-500 hover:text-gray-700 cursor-pointer" 
-              onClick={() => {setToggle(false)}}
-            >
-              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/components/stats.tsx

@@ -25,7 +25,7 @@ export default function Statistics() {
                 if(response.data) {
                     return response.data as Stats
                 }  
-            } catch (error: any) {
+            } catch (error) {
                 console.error(error)
             }
         }

src/components/table/table.tsx

@@ -5,25 +5,29 @@ import {
     getCoreRowModel,
     useReactTable,
     getPaginationRowModel,
-    SortingState,
     ColumnFiltersState,
     getFilteredRowModel,
+    Table as TableType,
   } from "@tanstack/react-table"
-import { useState } from "react";
-import { clsx, type ClassValue } from "clsx"
+import { ReactNode, useEffect, useRef, useState } from "react";
 import Image from "next/image";
 import { icons } from "#/assets/icons";
+import clsx from "clsx";
 
   interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[]
     data: TData[],
-    pageSize?: number
+    pageSize?: number,
+    header?: ReactNode | ((table: TableType<TData>) => ReactNode),
+    isDataLoading?: boolean
   }
 
 export default function Table<TData, TValue>({
     columns,
     data,
-    pageSize = 10
+    pageSize = 10,
+    header,
+    isDataLoading = true
   }: DataTableProps<TData, TValue>) {
     const [rowSelection, setRowSelection] = useState({})
     const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(
@@ -51,6 +55,26 @@ export default function Table<TData, TValue>({
         onColumnFiltersChange: setColumnFilters,
       })
 
+    const headerCheckboxRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        if (headerCheckboxRef.current) {
+          headerCheckboxRef.current.indeterminate =
+            table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected();
+        }
+
+        const selectedRows = table.getSelectedRowModel().rows;
+        const filteredSelectedRows = table
+          .getRowModel()
+          .rows.filter((row) => row.getIsSelected())
+          .map((row) => row.original);
+
+        console.log("SELECTED ALL = ", selectedRows);
+        console.log("SELECTED = ", filteredSelectedRows);
+      }, [
+        table
+      ]);
+      
     const totalPages = table.getPageCount()
     const currentPage = table.getState().pagination.pageIndex + 1
 
@@ -62,68 +86,98 @@ export default function Table<TData, TValue>({
         return pages
     }
 
+    const render = () => {
+        if(!header) return null
+
+        return(
+            <div className="mb-4">
+                {typeof header === 'function'
+                ? header(table)
+                : header}
+            </div>
+        )
+    }
+
     return(
-        <div>
+        <div className="w-full">
+            {render()}
+
             <div className="rounded-lg border border-gray-200 w-auto">
-                <table className="w-full overflow-x-auto rounded-lg">
-                    <thead className="h-10">
-                        {table.getHeaderGroups().map((headerGroup) => (
-                            <tr key={headerGroup.id} className="rounded-lg">
-                                <th className="bg-blue-300 p-3 text-start first:rounded-tl-lg">
-                                    <input checked={
-                                        table.getIsAllPageRowsSelected() ||
-                                            (table.getIsSomePageRowsSelected() && undefined)
-                                        } 
-                                        onChange={(e) => table.toggleAllPageRowsSelected(e.target.checked)} 
-                                        type="checkbox" name="" id="" 
-                                    />
-                                </th>
-                                {headerGroup.headers.map((header) => {
-                                    return(
-                                        <th key={header.id} className="bg-blue-300 p-3 text-start last:rounded-tr-lg">
-                                            {flexRender(
-                                                header.column.columnDef.header,
-                                                header.getContext()
-                                            )}
-                                        </th>
-                                    )
-                                })}
-                            </tr>
-                        ))}
-                    </thead>
-                    <tbody>
-                        {table.getRowModel().rows.length ? (
-                            table.getRowModel().rows.map((row) => (
-                                <tr key={row.id} className={clsx('hover:bg-gray-100 border-t border-gray-200', { 'bg-gray-300': row.getIsSelected()})}>
-                                    <td className="p-3 text-start">
+                <div className="overflow-x-auto">
+                    <table className="w-full overflow-x-auto rounded-lg">
+                        <thead className="h-10">
+                            {table.getHeaderGroups().map((headerGroup) => (
+                                <tr key={headerGroup.id} className="rounded-lg">
+                                    {header
+                                    ?
+                                    <th className="bg-[#E9F0FF] p-3 text-start first:rounded-tl-lg">
+                                        
+                                    </th>
+                                    :
+                                    <th className="bg-[#E9F0FF] p-3 text-start first:rounded-tl-lg">
                                         <input 
-                                            checked={row.getIsSelected()} 
-                                            onChange={(e) => row.toggleSelected(e.target.checked)} 
+                                            ref={headerCheckboxRef}
+                                            checked={!!table.getIsAllPageRowsSelected()} 
+                                            onChange={(e) => table.toggleAllPageRowsSelected(e.target.checked)} 
                                             type="checkbox" name="" id="" 
                                         />
-                                    </td>
-                                    {row.getVisibleCells().map((cell) => (
-                                        <td key={cell.id} className="p-3 text-start">
-                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                        </td>
-                                    ))}
+                                    </th>
+                                    }
+                                    {headerGroup.headers.map((header) => {
+                                        return(
+                                            <th key={header.id} className="bg-[#E9F0FF] p-3 text-start last:rounded-tr-lg">
+                                                {flexRender(
+                                                    header.column.columnDef.header,
+                                                    header.getContext()
+                                                )}
+                                            </th>
+                                        )
+                                    })}
                                 </tr>
-                            ))
-                        )
-                        : (
-                            <tr>
-                                <td colSpan={columns.length}>
-                                    Aucun résultats
-                                </td>
-                            </tr>
-                        )}
-                    </tbody>
-                </table>
+                            ))}
+                        </thead>
+                        <tbody>
+                            {table.getRowModel().rows.length ? (
+                                table.getRowModel().rows.map((row) => (
+                                    <tr key={row.id} className={clsx('hover:bg-gray-100 border-t border-gray-200', { 'bg-gray-300': row.getIsSelected()})}>
+                                        <td className="p-3 text-start">
+                                            <input 
+                                                checked={row.getIsSelected()} 
+                                                onChange={(e) => row.toggleSelected(e.target.checked)} 
+                                                type="checkbox" name="" id="" 
+                                            />
+                                        </td>
+                                        {row.getVisibleCells().map((cell) => (
+                                            <td key={cell.id} className="p-3 text-start">
+                                                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                            </td>
+                                        ))}
+                                    </tr>
+                                ))
+                            )
+                            : isDataLoading ?
+                            (
+                                <tr>
+                                    <td colSpan={columns.length} className="h-20 text-center">
+                                        Chargement...
+                                    </td>
+                                </tr>
+                            ) 
+                            : (
+                                <tr>
+                                    <td colSpan={columns.length} className="h-20 text-center">
+                                        Aucun résultats
+                                    </td>
+                                </tr>
+                            )}
+                        </tbody>
+                    </table>
+                </div>
             </div>
 
             <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()}
             >
@@ -138,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)}
                     >
@@ -148,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()}
             >

src/lib/function.ts

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

src/schema/index.ts

@@ -0,0 +1,21 @@
+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"),
+  organization: z.string().optional(),
+});
+
+export const companySchema = z.object({
+  name: z.string().min(1, "Le nom est requis"),
+  description: z.string(),
+  status: z.string(),
+  owner: z.string()
+})

src/schema/loginSchema.ts

@@ -1,6 +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

@@ -1,24 +1,30 @@
-import { FormEventHandler, ReactNode } from "react";
+import { ReactNode } from "react";
 import { ZodSchema } from "zod";
+export interface Option {
+  label: string
+  value: string
+}
 
 export interface FloatingLabelInputProps {
-    label: string;
+    label?: string;
     placeholder?: string;
-    type: 'text' | 'password' | 'select' | 'email' | 'number';
-    options?: string[];
+    type: 'text' | 'password' | 'select' | 'email' | 'number' | 'hidden' | 'search' | 'textarea';
+    options?: Option[];
     button?: React.ReactNode;
     showPasswordToggle?: boolean;
     name: string;
     defaultValue?: string;
+    onChange?: (value: string) => void;
 }
 
-export interface FormProps {
+export interface FormProps{
     title?: string,
     fields: FloatingLabelInputProps[],
     submit: (param: any) => unknown,
-    className: string,
+    className?: string,
     child: ReactNode,
-    schema: ZodSchema
+    schema: ZodSchema,
+    formClassName?: string
 }
 
 export interface StatsType {
@@ -39,9 +45,11 @@ export interface Stats {
 export interface Company {
     id: string
     name: string
+    description?: string;
     is_premium: boolean
     status: string
     owner: Owner
+    total_users?: number
 }
   
 export interface Owner {
@@ -49,4 +57,24 @@ export interface Owner {
     first_name: string
     email: string
     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
+  total_documents_sizes: number
+  last_use: any
 }