style: sidebar & header okay, started home

src/app/admin/home/page.tsx

@@ -12,34 +12,34 @@ import Image from "next/image"
 import { Modal } from "#/components/modal"
 import { useState } from "react"
 
-export default function HomePage () {
+export default function HomePage() {
 
-  const {data: session, status} = useSession()
+  const { data: session, status } = useSession()
   const queryClient = useQueryClient()
   const [open, setOpen] = useState(false);
   const [selectedId, setSelectedId] = useState<string | null>(null);
 
   console.log("Session = ", session)
 
-  const { data: companies, refetch, isLoading} = useQuery({
+  const { data: companies, refetch, isLoading } = useQuery({
     enabled: status === 'authenticated',
     queryKey: ["companies"],
     queryFn: async () => {
-        try {
+      try {
-            const response = await axios.get(
+        const response = await axios.get(
-                'https://private-docs-api.intside.co/companies', {
+          'https://private-docs-api.intside.co/companies', {
-                    headers: {
+          headers: {
-                        'Authorization': `Bearer ${session?.user.access_token}`
+            'Authorization': `Bearer ${session?.user.access_token}`
-                    }
+          }
-                }
-            )
-
-            if(response.data) {
-                return response.data.data as Company[]
-            }  
-        } catch (error) {
-            console.error(error)
         }
+        )
+
+        if (response.data) {
+          return response.data.data as Company[]
+        }
+      } catch (error) {
+        console.error(error)
+      }
     }
   })
 
@@ -48,13 +48,13 @@ export default function HomePage () {
       try {
         const response = await axios.delete(
           `https://private-docs-api.intside.co/companies/${id}/`, {
-            headers: {
+          headers: {
-                'Authorization': `Bearer ${session?.user.access_token}`
+            'Authorization': `Bearer ${session?.user.access_token}`
-            }
+          }
         }
         )
 
-        if(response.status === 200 || response.status === 201) {
+        if (response.status === 200 || response.status === 201) {
           console.log('Suppresion réussie !')
           setOpen(false)
         }
@@ -68,140 +68,139 @@ export default function HomePage () {
       refetch()
     }
   })
-  
+
 
 
   const columns: ColumnDef<Company>[] = [
-  {
+    {
-    accessorKey: "name",
+      accessorKey: "name",
-    header: "Organisations",
+      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 id = String(row.original.id);
-      return (
-        <div className="relative p-2 cursor-pointer">
-          <Modal
-            open={selectedId === id}
-            onOpenChange={(isOpen) => {
-              if (!isOpen) {
-                setSelectedId(null);
-              }
-            }}
-            trigger={
-              <div
-                onClick={() => {
-                  setSelectedId(id);
-                }}
-              >
-                <Image
-                  alt=""
-                  src={icons.trash}
-                  className="cursor-pointer responsive-icon"
-                />
-              </div>
-            }
-            title={
-              <p className="font-bold text-3xl">
-                Supprimer cette organisation
-              </p>
-            }
-            content={
-              <div>
-                <p className="text-center">
-                  Voulez-vous vraiment supprimer l'organisation <span className="font-bold">{row.original.name}</span> ?
-                </p>
-
-                <div className="flex justify-between w-full pt-6 r-gap-24">
-                  <button
-                    className="cta modal-cta cancel"
-                    onClick={() => {
-                      setSelectedId(null);
-                    }}
-                  >
-                    Annuler
-                  </button>
-                  <button
-                    className="cta modal-cta danger"
-                    onClick={() => {
-                      mutate(id);
-                      setSelectedId(null);
-                    }}
-                  >
-                    Supprimer
-                  </button>
-                </div>
-              </div>
-            }
-          />
-        </div>
-      );
     },
-  },
+    {
-]
+      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 id = String(row.original.id);
+        return (
+          <div className="relative p-2 cursor-pointer">
+            <Modal
+              open={selectedId === id}
+              onOpenChange={(isOpen) => {
+                if (!isOpen) {
+                  setSelectedId(null);
+                }
+              }}
+              trigger={
+                <div
+                  onClick={() => {
+                    setSelectedId(id);
+                  }}
+                >
+                  <Image
+                    alt=""
+                    src={icons.trash}
+                    className="cursor-pointer responsive-icon"
+                  />
+                </div>
+              }
+              title={
+                <p className="font-bold text-3xl">
+                  Supprimer cette organisation
+                </p>
+              }
+              content={
+                <div>
+                  <p className="text-center">
+                    Voulez-vous vraiment supprimer l'organisation <span className="font-bold">{row.original.name}</span> ?
+                  </p>
 
-  return(
+                  <div className="flex justify-between w-full pt-6 r-gap-24">
-    <div className="space-y-10">
+                    <button
+                      className="cta modal-cta cancel"
+                      onClick={() => {
+                        setSelectedId(null);
+                      }}
+                    >
+                      Annuler
+                    </button>
+                    <button
+                      className="cta modal-cta danger"
+                      onClick={() => {
+                        mutate(id);
+                        setSelectedId(null);
+                      }}
+                    >
+                      Supprimer
+                    </button>
+                  </div>
+                </div>
+              }
+            />
+          </div>
+        );
+      },
+    },
+  ]
+
+  return (
+    <div className="r-p-m-0">
       <Statistics />
 
-      <p className="font-bold text-xl">Dernières organisations actives</p>
+      <p className="fw-bold fs-5">Dernières organisations actives</p>
 
-      <Table 
+      <Table
-        columns={columns} 
+        columns={columns}
         isDataLoading={isLoading}
-        data={companies || []} 
+        data={companies || []}
         pageSize={5}
       />
     </div>

src/app/admin/layout.tsx

@@ -24,12 +24,12 @@ export default function Dashboard({ children }: { children: ReactNode }) {
 
     <div className="r-flex-between">
       <Sidebar />
-      <main className="flex-grow-1 min-w-0 pt-md-1 pt-sm-5">
+      <div className="flex-grow-1">
         <Header/>
         <div className="main px-[44px] py-[64px] ">
           {children}
         </div>
-      </main>
+      </div>
     </div >
   )
 }

src/app/globals.css

@@ -31,14 +31,24 @@
 }
 
 body {
-  background: var(--background);
+  background: var(--background)!important;
-  color: var(--foreground);
+  color: var(--foreground)!important;
   font-family: Urbanist, sans-serif !important;
 }
 *{
   margin: 0;
   padding: 0;
 }
+
+a{
+  text-decoration: none!important;
+  color: inherit!important;
+}
+
+ul, li{
+  /* margin: 0!important; */
+}
+
 .input-form {
   width: 100%;
   padding: 12px;

src/assets/css/admin.css

@@ -1,10 +1,28 @@
+/* Header */
+.sidebar-holder, .sidebar{
+  min-width: 78px;
+  max-width: 90px;
+  height: 100vh;
+}
+.header{
+  padding: 20px 44px;
+  height: max-content;
+  align-items: center;
+  /* border: solid; */
+}
+
+
 /* Sidebar */
 
 .sidebar {
+  padding-top: 25px;
   border-right: 1px solid var(--cinder);
   position: fixed;
 }
 
+.nav-menu{
+  padding-top: 160px;
+}
 .nav-item .nav-home {
   margin-bottom: -10px;
 }
@@ -29,33 +47,60 @@
   margin-top: -11px;
   margin-bottom: -11px;
 }
+.logout{
+  bottom: 40px;
+  left: 28px;
+}
 
 /* Border */
 .icon-border {
-  border: 1px solid var(--cinder);
+  height: max-content;
+  border: 1px solid var(--bluegray);
   padding: 8px;
   border-radius: 12px;
   cursor: pointer;
 }
 
+.dropdown-toggle{
+  align-items: center!important;
+}
+
 .dropdown-menu {
   width: max-content;
   background-color: var(--background);
+  border: none!important;
   border-radius: 8px;
-  box-shadow: 0 0 24px #0000001A;
+  box-shadow: 0 0 24px #0000001A!important;
 }
 
-.dropdown-item a {
+.dropdown-menu{
-  width: max-content;
+  right: 0px!important;
+}
+
+.r-dropdown-item a {
+  width: 100%;
   padding: 10px 20px;
+  margin: 0!important;
   display: flex;
-  justify-content: space-between;
+  justify-content: start;
   align-items: center;
   gap: 10px;
 }
+.r-dropdown-item a:hover {
+  background-color: var(--cinder);
+}
+.dropdown-toggle::after{
+  content: unset!important;
+}
+
+.transition-300{
+  transition: transform .3s ;
+}
 
 /* Main */
-
+.main{
+  padding: 64px 44px;
+}
 .p-container {
   height: 100vh;
   border: 1px solid var(--gray);
@@ -102,6 +147,30 @@
   display: none!important;
 }
 
+
+/* Home Page */
+.stats{
+  padding: 24px 27px;
+  display: flex;
+  flex-wrap: nowrap;
+  border: 1px!important;
+  border: 1px solid var(--primary)!important;
+  border-radius: 14px;
+}
+.sqaurre-bg{
+  width: 54px;
+  height: 54px;
+  padding: 10px;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  background: var(--bluegray);
+}
+
+
+
 @media (max-width: 640px) {
 
   .header, .main{

src/components/admin/adminHeader.tsx

@@ -12,38 +12,49 @@ export default function AdminHeader() {
 
   return (
     <>
-      <nav className="header r-flex-between items-center px-[44px] py-[20px] ">
+      <nav className="header r-flex-between align-items-center ">
-        <p className="name text-[26px]">Bienvenue, <span>Ken B.</span> </p>
+        <p className="r-m-0 name fs-4 fw-medium">Bienvenue, <span>Ken B.</span> </p>
-        <div className="r-flex-between justify-center items-center r-gap-12">
+        <div className="r-flex-between justify-content-center align-items-center r-gap-12">
-          {/* <ProfilePicture /> */}
-
           <div className="header-desktop">
             <Theme />
           </div>
           <button type="button" className="icon-border header-desktop">
             <Image src={icons.notificationsIcon} alt="Notifications" />
           </button>
-          <div className="relative">
+
+          <div className="dropdown">
+            <div className="r-flex-between dropdown-toggle justify-center items-center r-gap-12 cursor-pointer"  data-bs-toggle="dropdown" aria-expanded="false">
+              <button type="button" className="icon-borderd mobile scale-120" >
+                <Image src={icons.arrowLeft} alt="options" className={`transition-300 transition-transform duration-300 ${open ? " " : ""}`} />
+              </button>
+              <Image src={icons.profilePicture} alt="ProfilePicture" />
+              <button className="IconButton header-desktop" aria-label="Customise options">
+                <Image src={icons.arrowUp} alt="arrowUp" className={`transition-300 transition-transform duration-300 ${open ? "" : ""}`} />
+              </button>
+            </div>
+            <ul className="dropdown-menu">
+              <li className="r-dropdown-item text-[14px]">
+                <Link href="#" className="d-flex align-items-center ">
+                  <Image src={icons.userIcon} alt="Profil" />
+                  Profil
+                </Link>
+              </li>
+              <li className="r-dropdown-item text-[14px]">
+                <Link href="#" className="d-flex align-items-center r-danger ">
+                  <Image src={icons.logoutRed} alt="Deconnexion" />
+                  Déconnexion
+                </Link>
+              </li>
+            </ul>
+          </div>
+          <div className="position-relative">
             <DropdownMenu.Root open={open} onOpenChange={setOpen}>
               <DropdownMenu.Trigger asChild>
-                <div className="r-flex-between justify-center items-center r-gap-12 cursor-pointer">
-                  <button type="button" className="icon-borderd mobile scale-120" >
-                    <Image src={icons.arrowLeft} alt="options" className={`transition-transform duration-300 ${open ? "scale-x-[-1]" : ""}`} />
-                  </button>
-                  <Image src={icons.profilePicture} alt="ProfilePicture" />
-                  <button className="IconButton header-desktop" aria-label="Customise options">
-                    <Image src={icons.arrowUp} alt="arrowUp" className={`transition-transform duration-300 ${open ? "scale-y-[-1]" : ""}`} />
-                  </button>
-                </div>
               </DropdownMenu.Trigger>
 
               <DropdownMenu.Portal>
                 <DropdownMenu.Content className="DropdownMenuContent dropdown-menu r-flex-column r-secondary" sideOffset={0} side="bottom" align="end" >
                   <DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px]">
-                    <Link href="#" className="d-flex items-start ">
-                      <Image src={icons.userIcon} alt="Profil" />
-                      Profil
-                    </Link>
                   </DropdownMenu.Item>
                   {/* <DropdownMenu.Item className="DropdownMenuItem dropdown-item flex items-center content-center text-[14px] mobile">
                       <Theme />

src/components/admin/sidebar.tsx

@@ -19,8 +19,8 @@ export default function Sidebar() {
 
   return (
     <>
-      <div className={` ${ mobileVisible? "mobile-flex" : "mobile-none" } sidebar-holder min-w-[78px] max-w-[90px] h-[100vh] relative `}>
+      <div className={` ${ mobileVisible? "mobile-flex" : "mobile-none" } sidebar-holder position-relative `}>
-        <div className="sidebar r-m-0 d-flex flex-column pt-[25px] max-w-[90px] h-[100vh] ">
+        <div className="sidebar r-m-0 d-flex flex-column ">
           <div className="logo r-flex-center px-[19px] ">
             <Image src={icons.logo} alt="Logo" className="scale-95" />
           </div>
@@ -29,7 +29,7 @@ export default function Sidebar() {
             <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]">
+          <div className="logout position-absolute bottom-[40px] left-[28px]">
             <Link href="/login" className="cursor-pointer">
               <Image src={icons.logout} alt="Logout" />
             </Link>

src/components/stats.tsx

@@ -7,64 +7,64 @@ import { Stats, StatsType, } from "#/types";
 
 export default function Statistics() {
 
-    const { data: session, status } = useSession();
+  const { data: session, status } = useSession();
 
-    const { data: stats, isLoading} = useQuery({
+  const { data: stats, isLoading } = useQuery({
-        enabled: status === 'authenticated',
+    enabled: status === 'authenticated',
-        queryKey: ["stats", session?.user.access_token],
+    queryKey: ["stats", session?.user.access_token],
-        queryFn: async () => {
+    queryFn: async () => {
-            try {
+      try {
-                const response = await axios.get(
+        const response = await axios.get(
-                    'https://private-docs-api.intside.co/statistics', {
+          'https://private-docs-api.intside.co/statistics', {
-                        headers: {
+          headers: {
-                            'Authorization': `Bearer ${session?.user.access_token}`
+            'Authorization': `Bearer ${session?.user.access_token}`
-                        }
+          }
-                    }
-                )
-
-                if(response.data) {
-                    return response.data as Stats
-                }  
-            } catch (error) {
-                console.error(error)
-            }
         }
-    })
+        )
 
-    const statsData: StatsType[] = [
+        if (response.data) {
-        { id: 1, title: 'Organisations', value: stats?.companies, icon: icons.companiesIcon, color: 'blue' },
+          return response.data as Stats
-        { id: 2, title: 'Utilisateurs', value: stats?.users, icon: icons.userIcon, color: 'blue' },
+        }
-        { id: 3, title: 'Documents', value: stats?.documents, icon: icons.docummentTextIcon, color: 'blue' },
+      } catch (error) {
-        { id: 4, title: 'Stockage', value: stats?.documents_size, icon: icons.archivesIcon, color: 'blue' }
+        console.error(error)
-      ];
+      }
+    }
+  })
+
+  const statsData: StatsType[] = [
+    { id: 1, title: 'Organisations', value: stats?.companies, icon: icons.companiesIcon, color: 'blue' },
+    { id: 2, title: 'Utilisateurs', value: stats?.users, icon: icons.userIcon, color: 'blue' },
+    { id: 3, title: 'Documents', value: stats?.documents, icon: icons.docummentTextIcon, color: 'blue' },
+    { id: 4, title: 'Stockage', value: stats?.documents_size, icon: icons.archivesIcon, color: 'blue' }
+  ];
 
 
 
 
-    return(
+  return (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+    <div className="r-flex-between r-gap-24">
-            {statsData.map(({ id, title, value, icon }) => (
+      {statsData.map(({ id, title, value, icon }) => (
-                <div key={id} className="w-full">
+        <div key={id} className="w-25">
-                    <div className="flex items-center rounded-xl border-2 border-blue-500 p-4 space-x-3">
+          <div className="stats flex items-center rounded-xl border-2 border-blue-500 r-gap-12">
-                        <div 
+            <div
-                            className="flex items-center justify-center rounded-lg bg-[#E9F0FF] bg-opacity-25 p-2"
+              className="sqaurre-bg d-flex items-center justify-center rounded-lg bg-[#E9F0FF] bg-opacity-25 p-2"
-                            style={{ width: '54px', height: '54px' }}
+              style={{ width: '54px', height: '54px' }}
-                        >
+            >
-                            <Image 
+              <Image
-                                alt={title} 
+                alt={title}
-                                src={icon} 
+                src={icon}
-                                width={32} 
+                width={32}
-                                height={32} 
+                height={32}
-                                className="text-blue-500" 
+                className="text-blue-500"
-                            />
+              />
-                        </div>
+            </div>
-                        <div className="ml-3">
+            <div className="ml-3">
-                            <p className="text-sm text-gray-500 mb-0">{title}</p>
+              <p className="text-sm text-secondary mb-0">{title}</p>
-                            <p className="font-bold text-2xl mb-0">{ status === "loading" && isLoading ? "Chargement..." : value}</p>
+              <p className="fw-bold fs-5 mb-0">{status === "loading" && isLoading ? "Chargement..." : value}</p>
-                        </div>
+            </div>
-                    </div>
+          </div>
-                </div>
-            ))}
         </div>
-    )
+      ))}
+    </div>
+  )
 }