feat: add ToastClient component and update schemas with description field

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

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

src/app/layout.tsx

@@ -4,6 +4,7 @@ import NextTopLoader from "nextjs-toploader";
 import "../assets/css/ruben-ui.css"
 import { AuthProvider } from "#/components/provider/authProvider";
 import { QueryClientProvide } from "#/components/provider/queryClient";
+import { ToastClient } from "#/components/provider/toastClient";
 
 export const metadata: Metadata = {
   title: "Private Docs",
@@ -27,6 +28,7 @@ export default function RootLayout({
           <QueryClientProvide>
             <NextTopLoader color="#246BFD" shadow="0" />
             {children}
+            <ToastClient richColors />
           </QueryClientProvide>
         </AuthProvider>
       </body>

src/components/floatingLabelInput.tsx

@@ -34,7 +34,7 @@ export default function FloatingLabelInput({
             <select 
               className="input-form focus:ring-2 focus:ring-blue-500 outline-none"
               name={name}
-              defaultValue={defaultValue}
+              value={defaultValue}
             >
               {options?.map((option, index) => (
                 <option key={index} value={option.value}>{option.label}</option>

src/components/provider/toastClient.tsx

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

src/schema/loginSchema.ts

@@ -1,3 +1,4 @@
+import { Description } from "@radix-ui/react-dialog";
 import { z } from "zod";
 
 export const loginSchema = z.object({
@@ -10,5 +11,12 @@ 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"),
-  organization: z.string().optional(),
+});
+
+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

@@ -71,6 +71,7 @@ export interface CompanyById {
   name: string
   is_premium: boolean
   status: string
+  description: string
   owner: Owner
   total_users: number
   total_documents: number