feat: implemented organization profile

2025-03-28 15:48:25 +01:00 · 2025-03-28 15:48:25 +01:00 · 98ba95dc01
commit 98ba95dc01
parent 3e1cf17b2d
7 changed files with 241 additions and 148 deletions
--- a/src/app/admin/organizations/[id]/page.tsx
+++ b/src/app/admin/organizations/[id]/page.tsx
@ -16,134 +16,143 @@ export default function Profile() {
  const segments = pathname.split("/");
  const uid = segments[segments.length - 1];

+
  const { data: session, status } = useSession();

  const { data: companyInfos, isLoading } = useQuery({
    enabled: status === 'authenticated',
-    queryKey: ["stats", session?.user.access_token],
+    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
+          return response.data as CompanyById;
        }
      } catch (error: any) {
-        console.error(error)
+        console.error(error);
      }
    }
-  })
-  const adminId = companyInfos?.owner
+  });

+  /*
+  const adminId = companyInfos?.owner;
+  console.log('will run the admin request');

  const { data: adminInfos } = useQuery({
-    enabled: status === 'authenticated',
-    queryKey: ["stats", session?.user.access_token],
+    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/${companyInfos}`, {
+          `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.data as Owner
+          return response.data as Owner;
        }
-      } catch (error: any) {
-        console.error(error)
+      } catch (error) {
+        console.error(error);
      }
    }
-  })
-  console.log(`https://private-docs-api.intside.co/users/${companyInfos}`);

+  });
+*/

  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="r-flex-between  items-center bg-bluegray p-[24px] m-0 ">
            <div className=""></div>
-            <h2 className="admin-name text-[20px]" >{companyInfos?.name ||  "Pentatonic"}</h2>
-            <button type="button" className="update-profile-name cta">
+            <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
-            </button>
+            </Link>
          </div>
-          <div className="r-flex-column p-[32px] r-gap-24">
+          <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 gap-[60px]">
-              <div className="r-flex-between items-center rr-gap-12 w-max">
+            <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] r-gap-2">
+                <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">{adminInfos?.email || "email"}</p>
+                  <p className="email">{companyInfos?.owner?.email || "email"}</p>
                </div>
              </div>
-              <div className="r-flex-between items-center rr-gap-12 w-max">
+              <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-[60px]">
+                <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">{adminInfos?.first_name || "nom"}</p>
+                    <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">{adminInfos?.last_name || "nom"}</p>
+                    <p className="name">{companyInfos?.owner?.last_name || "nom"}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <hr />
-          <div className="r-flex-column p-[32px] r-gap-24">
-            <div className="r-flex-between gap-[84px]">
-              <div className="r-flex-between items-center rr-gap-12 w-max">
+          <div className="r-flex p-[32px] r-gap-24">
+            <div className="admin-infos r-flex flex-wrap justifyc-center lg:justifyc-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] r-gap-2">
+                <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">123</p>
+                  <p className="r-secondary users">{companyInfos?.total_documents || "0"}</p>
                </div>
              </div>
-              <div className="r-flex-between items-center rr-gap-12 w-max">
+              <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] r-gap-2">
+                <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">24</p>
+                  <p className="r-secondary users">{companyInfos?.total_users || "0"}</p>
                </div>
              </div>
-              <div className="r-flex-between items-center rr-gap-12 w-max">
+              <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] r-gap-2">
+                <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">3.41GB</p>
+                  <p className="r-secondary files-size">{companyInfos?.total_documents_sizes + " "}GB</p>
                </div>
              </div>
-              <div className="r-flex-between items-center rr-gap-12 w-max">
+              <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] r-gap-2">
+                <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">26 Jan 2024 - 14h15</p>
+                  <p className="r-secondary last-connexion">{companyInfos?.last_use || "-"}</p>
                </div>
              </div>
            </div>
--- a/src/app/admin/organizations/[id]/update/page.tsx
+++ b/src/app/admin/organizations/[id]/update/page.tsx
@ -3,57 +3,72 @@ 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 } from "#/types";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { 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";

 export default function Update() {

+  const pathname = usePathname();
+
+  const segments = pathname.split("/");
+  const uid = segments[segments.length - 2];
+  const queryClient = useQueryClient()


  const { data: session, status } = useSession();

-  const { data: company, isLoading } = useQuery({
+  const { data: companyInfos, refetch, isLoading } = useQuery({
    enabled: status === 'authenticated',
-    queryKey: ["stats", session?.user.access_token],
+    queryKey: ["companyStats", session?.user.access_token],
    queryFn: async () => {
      try {
        const response = await axios.get(
-          'https://private-docs-api.intside.co/companies', {
+          `https://private-docs-api.intside.co/users/${uid}`, {
          headers: {
            'Authorization': `Bearer ${session?.user.access_token}`
+          },
+          params: {
+            details: true
          }
        }
-        )
+        );

        if (response.data) {
-          return response.data.data as Company
+          return response.data as CompanyById;
        }
      } catch (error: any) {
-        console.error(error)
+        console.error(error);
      }
    }
-  })
+  });

-  const { data: adminOrganization } = useQuery({
-    enabled: status === 'authenticated',
-    queryKey: ["stats", session?.user.access_token],
-    queryFn: async () => {
+  const { mutate, isPending } = useMutation({
+    mutationFn: async (id: string) => {
      try {
-        const response = await axios.get(
-          'https://private-docs-api.intside.co/users/me', {
+        const response = await axios.delete(
+          `https://private-docs-api.intside.co/companies/${id}/`, {
          headers: {
            'Authorization': `Bearer ${session?.user.access_token}`
          }
        }
        )

-        if (response.data) {
-          return response.data as Company
+        if (response.status === 200 || response.status === 201) {
+          console.log('Suppresion réussie !')
        }
-      } catch (error: any) {
+      } catch (error) {
        console.error(error)
      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["companies"] })
+
+      refetch()
    }
  })

@ -62,28 +77,61 @@ export default function Update() {
    <>
      {/* { 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]" >Pentatonic</h2>
-            <button type="button" className="update-profile-name cta cancel">
+            <h2 className="admin-name text-[20px]" >{companyInfos?.name || "Pentatonic"}</h2>
+            <Link href={`http://localhost:3000/admin/organizations/${uid}/`} type="Link" className="cta cancel">
              Annuler
-            </button>
+            </Link>
          </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="" />
+                <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={company?.owner.email} />
+                <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={company?.owner.last_name} />
+                <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={company?.owner.last_name} />
+                <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 ">
--- a/src/assets/css/admin.css
+++ b/src/assets/css/admin.css
@ -1,51 +1,51 @@
 /* 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;
 }

 /* Border */
-.icon-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 a{
+.dropdown-item a {
  width: max-content;
  padding: 10px 20px;
  display: flex;
@ -62,7 +62,7 @@
  overflow: hidden;
 }

-.icon-rounded{
+.icon-rounded {
  width: max-content;
  height: max-content;
  padding: 8px;
@ -72,15 +72,37 @@
  background-color: var(--bluegray);
  border-radius: 100px;
 }
-.labels-container{
+
+.labels-container {
  min-width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
 }
-.labels-container .label-container{
+
+.labels-container .label-container {
  width: 40%;
 }
-.labels-container .floating-label div.relative{
+
+.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%; */
+  }
+}
--- a/src/assets/css/ruben-ui.css
+++ b/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 */
--- a/src/components/form/form.tsx
+++ b/src/components/form/form.tsx
@ -5,71 +5,71 @@ import { FormProps } from "#/types"
 import { FormEvent, useState } from "react"

 export default function Form({
-    fields,
-    submit,
-    className,
-    child,
-    title,
-    schema
-} : FormProps) {
-    const [errors, setErrors] = useState<Record<string, string>>({});
+  fields,
+  submit,
+  className,
+  child,
+  title,
+  schema
+}: FormProps) {
+  const [errors, setErrors] = useState<Record<string, string>>({});

-    const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
-        e.preventDefault()
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault()

-        const formData = new FormData(e.currentTarget)
-        const data = Object.fromEntries(formData)
+    const formData = new FormData(e.currentTarget)
+    const data = Object.fromEntries(formData)

-        console.log("FORM DATA = ", data)
-        const result = schema.safeParse(data);
-        console.log("ZOD = ", result.error?.format())
+    console.log("FORM DATA = ", data)
+    const result = schema.safeParse(data);
+    console.log("ZOD = ", result.error?.format())

-        if(!result.success) {
-            const formatedErrors = result.error.format() as Record<string, { _errors?: string[] }>;
+    if (!result.success) {
+      const formatedErrors = result.error.format() as Record<string, { _errors?: string[] }>;

-            const newErrors: Record<string, string> = {};
-            Object.keys(formatedErrors).forEach((field) => {
-                if (field !== "_errors" && formatedErrors[field]._errors?.length) {
-                  newErrors[field] = formatedErrors[field]._errors[0]; 
-                }
-            });
-
-            setErrors(newErrors)
-        } else {
-            setErrors({})
-            submit(result.data)
+      const newErrors: Record<string, string> = {};
+      Object.keys(formatedErrors).forEach((field) => {
+        if (field !== "_errors" && formatedErrors[field]._errors?.length) {
+          newErrors[field] = formatedErrors[field]._errors[0];
        }
+      });
+
+      setErrors(newErrors)
+    } else {
+      setErrors({})
+      submit(result.data)
    }
+  }

-    return (
-        <form className={className} onSubmit={handleSubmit}>
-            <div className="flex justify-center text-black">
-                <p className="text-3xl font-bold">{title}</p>
+  return (
+    <form className={className} onSubmit={handleSubmit}>
+      <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">
+
+        {
+          fields.map((item, index) => (
+            <div key={index}>
+              <FloatingLabelInput
+                label={item.label}
+                name={item.name}
+                type={item.type}
+                button={item.button}
+                defaultValue={item.defaultValue}
+                options={item.options}
+                placeholder={item.placeholder}
+                showPasswordToggle={item.showPasswordToggle}
+              />
+
+              <span className="text-red-500 text-xs mt-1">{errors[item.name]}</span>
            </div>
+          ))
+        }
+        {child}
+      </div>
+    </form>

-            <div className="flex flex-col gap-8 mt-2">
-
-                {
-                    fields.map((item, index) => (
-                        <div key={index}>
-                            <FloatingLabelInput 
-                                label={item.label} 
-                                name={item.name} 
-                                type={item.type} 
-                                button={item.button}
-                                defaultValue={item.defaultValue}
-                                options={item.options}
-                                placeholder={item.placeholder}
-                                showPasswordToggle={item.showPasswordToggle}
-                            />
-
-                            <span className="text-red-500 text-xs mt-1">{errors[item.name]}</span>
-                        </div>
-                    ))
-                }
-            {child}
-            </div>
-        </form>
-
-    )
+  )
 }
--- a/src/schema/loginSchema.ts
+++ b/src/schema/loginSchema.ts
@ -4,3 +4,11 @@ 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(),
+});
--- a/src/types/index.ts
+++ b/src/types/index.ts
@ -56,6 +56,9 @@ export interface CompanyById {
  name: string
  is_premium: boolean
  status: string
-  owner: string
-  description: string
+  owner: Owner
+  total_users: number
+  total_documents: number
+  total_documents_sizes: number
+  last_use: any
 }