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,55 +16,64 @@ 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 (
    <>
@ -74,76 +83,76 @@ export default function Profile() {
          <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">
+            <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 as CompanyById;
+        }
+      } catch (error: any) {
+        console.error(error);
+      }
+    }
+  });
+
+  const { mutate, isPending } = 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.data) {
-          return response.data.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"] })

-  const { data: adminOrganization } = useQuery({
-    enabled: status === 'authenticated',
-    queryKey: ["stats", session?.user.access_token],
-    queryFn: async () => {
-      try {
-        const response = await axios.get(
-          'https://private-docs-api.intside.co/users/me', {
-          headers: {
-            'Authorization': `Bearer ${session?.user.access_token}`
-          }
-        }
-        )
-
-        if (response.data) {
-          return response.data as Company
-        }
-      } catch (error: any) {
-        console.error(error)
-      }
+      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
@ -72,15 +72,37 @@
  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%; */
+  }
+}
--- 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/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
 }