feat: added admin Profile fix: not fixed sidebar

src/app/admin/layout.tsx

@@ -11,7 +11,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/page.tsx

@@ -1,8 +1,10 @@
+import Link from "next/link";
 
 
 export default function Organizations (){
   return (
     <>
+      <Link href="/admin/organizations/profile">Organization Profile</Link>
     </>
   )
 }

src/app/admin/organizations/profile/page.tsx

@@ -0,0 +1,144 @@
+"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 { adminProfile } from "#/types";
+
+export default function Profile() {
+  const { data: session, status } = useSession();
+
+  const { data: adminProfile, isLoading } = 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 adminProfile
+        }
+      } catch (error: any) {
+        console.error(error)
+      }
+    }
+  })
+
+  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 adminProfile
+        }
+      } catch (error: any) {
+        console.error(error)
+      }
+    }
+  })
+
+
+  return (
+    <>
+    {/* { adminProfile.map() } */}
+    
+      <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">
+              Modifier
+            </button>
+          </div>
+          <div className="r-flex-column p-[32px] r-gap-24">
+            <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="icon-rounded">
+                  <Image src={icons.mailIcon} alt="E-mail" />
+                </div>
+                <div className="r-flex-column p-[14px] r-gap-2">
+                  <h4 className="email-label font-semibold">Adresse e-mail</h4>
+                  <p className="email">{adminProfile?.email}</p>
+                </div>
+              </div>
+              <div className="r-flex-between items-center rr-gap-12 w-max">
+                <div className="icon-rounded">
+                  <Image src={icons.personalCard} alt="E-mail" />
+                </div>
+                <div className="r-flex gap-[60px]">
+                  <div className="r-flex-column p-[14px] r-gap-2">
+                    <h4 className="surname-label font-semibold">Prénom</h4>
+                    <p className="surname">{adminProfile?.first_name}</p>
+                  </div>
+                  <div className="r-flex-column p-[14px] r-gap-2">
+                    <h4 className="name-label font-semibold">Nom</h4>
+                    <p className="name">{adminProfile?.last_name}</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="icon-rounded">
+                  <Image src={icons.userGroupBlue} alt="Documents" />
+                </div>
+                <div className="r-flex-column p-[14px] r-gap-2">
+                  <h4 className="users-label font-semibold">Documents</h4>
+                  <p className="r-secondary users">123</p>
+                </div>
+              </div>
+              <div className="r-flex-between items-center rr-gap-12 w-max">
+                <div className="icon-rounded">
+                  <Image src={icons.userGroupBlue} alt="Documents" />
+                </div>
+                <div className="r-flex-column p-[14px] r-gap-2">
+                  <h4 className="users-label font-semibold">Utilisateurs</h4>
+                  <p className="r-secondary users">24</p>
+                </div>
+              </div>
+              <div className="r-flex-between items-center rr-gap-12 w-max">
+                <div className="icon-rounded">
+                  <Image src={icons.maximizeIcon} alt="Fichiers" />
+                </div>
+                <div className="r-flex-column p-[14px] r-gap-2">
+                  <h4 className="files-size-label font-semibold">Taille des fichiers</h4>
+                  <p className="r-secondary files-size">3.41GB</p>
+                </div>
+              </div>
+              <div className="r-flex-between items-center rr-gap-12 w-max">
+                <div className="icon-rounded">
+                  <Image src={icons.timerIcon} alt="Horlorge" />
+                </div>
+                <div className="r-flex-column p-[14px] 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>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/app/globals.css

@@ -14,6 +14,8 @@
   --secondary: #9FA8BC;
   --danger: #F33F19;
   --cinder: #E7E5E4;
+  --bluegray: #E9F0FF;
+  --gray: #E7EBF3;
 }
 
 [ data-theme="dark"] {
@@ -73,4 +75,51 @@ body {
   &:hover {
     background-color: rgb(22, 77, 185);
   }
-}
+}
+
+.cta{
+  padding: 10px 24px;
+  color: white;
+  background-color: var(--primary);
+  font-size: 14px;
+  font-weight: 600;
+  border-radius: 100px;
+}
+
+
+.bg-bluegray{
+  background-color: var(--bluegray);
+}
+.bg-gray{
+  background-color: var(--gray);
+}
+hr{
+  color: var(--gray);
+}
+
+
+
+/* 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);
+}

src/assets/css/admin.css

@@ -1,5 +1,6 @@
 .sidebar{
   border-right: 1px solid var(--cinder);
+  position: fixed;
 }
 
 .nav-item .nav-home{
@@ -40,9 +41,7 @@
   border-radius: 8px;
   box-shadow: 0 0 24px #0000001A;
 }
-.dropdown-item{
-  
-}
+
 .dropdown-item a{
   width: max-content;
   padding: 10px 20px;
@@ -50,4 +49,20 @@
   justify-content: space-between;
   align-items: center;
   gap: 10px;
+}
+
+.p-container {
+  height: 100vh;
+  border: 1px solid var(--gray);
+}
+
+.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;
 }

src/assets/icons/index.ts

@@ -40,6 +40,8 @@ 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"
 
 
 export const icons = {
@@ -83,8 +85,10 @@ export const icons = {
   starIcon,
   arrowUp,
   sunIcon,
-  moonIcon  ,
-  trash
+  moonIcon,
+  trash,
+  mailIcon,
+  personalCard
 }
 
 

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

@@ -15,7 +15,7 @@ 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>
+        <h1 className="name text-[26px]">Bienvenue, <span>Ken B.</span> </h1>
         <div className="r-flex-between justify-center items-center r-gap-12">
           <Theme />
           {/* <ProfilePicture /> */}
@@ -43,7 +43,7 @@ export default function AdminHeader() {
                     </Link>
                   </DropdownMenu.Item>
                   <DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px]">
-                    <Link href="#" className="d-flex items-start r-danger ">
+                    <Link href="/login" className="d-flex items-start r-danger ">
                       <Image src={icons.logoutRed} alt="Deconnexion" />
                       Déconnexion
                     </Link>

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/types/index.ts

@@ -49,4 +49,12 @@ export interface Owner {
     first_name: string
     email: string
     last_name: string
+}
+
+export interface adminProfile {
+  id: string
+  email: string
+  first_name: string
+  last_name: string
+  profile: string
 }