feat: add organizations data-table page

src/app/admin/admins/page.tsx

@@ -348,7 +348,7 @@ export default function Admins() {
                 open={openModal}
                 onOpenChange={(isOpen) => {
                   if (!isOpen) {
-                    setOpen(false);
+                    setOpenModal(false);
                   }
                 }}
                 trigger={

src/app/admin/organizations/page.tsx

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

src/components/floatingLabelInput.tsx

@@ -37,7 +37,7 @@ export default function FloatingLabelInput({
               defaultValue={defaultValue}
             >
               {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-right">{button}</div>}

src/schema/index.ts

@@ -10,4 +10,11 @@ export const adminSchema = z.object({
   last_name: z.string(),
   first_name: z.string(),
   email: z.string().min(1, "L'email est requis").email("Email invalide"),
-});
+});
+
+export const companySchema = z.object({
+  name: z.string().min(1, "Le nom est requis"),
+  description: z.string(),
+  status: z.string(),
+  owner: z.string()
+})

src/types/index.ts

@@ -1,11 +1,15 @@
 import { FormEventHandler, ReactNode } from "react";
 import { ZodSchema } from "zod";
+export interface Option {
+  label: string
+  value: string
+}
 
 export interface FloatingLabelInputProps {
     label?: string;
     placeholder?: string;
-    type: 'text' | 'password' | 'select' | 'email' | 'number' | 'hidden' | 'search';
+    type: 'text' | 'password' | 'select' | 'email' | 'number' | 'hidden' | 'search' | 'textarea';
-    options?: string[];
+    options?: Option[];
     button?: React.ReactNode;
     showPasswordToggle?: boolean;
     name: string;