From b926019ab64469334978af818a5bca375aec8832 Mon Sep 17 00:00:00 2001
From: Ruben <rubensenpai11@gmail.com>
Date: Thu, 3 Apr 2025 17:10:50 +0100
Subject: [PATCH] style: bootstrap version of homepage

---
 src/app/admin/home/page.tsx        |  20 +-
 src/app/globals.css                |  18 +-
 src/assets/css/admin.css           | 106 +++++++-
 src/assets/icons/archive.svg       |   8 +
 src/assets/icons/buildingsBlue.svg |   9 +
 src/assets/icons/index.ts          |  96 +-------
 src/assets/icons/people.svg        |   8 +
 src/components/admin/navItem.tsx   |   7 +-
 src/components/admin/sidebar.tsx   |   4 +-
 src/components/stats.tsx           |  20 +-
 src/components/table/table.tsx     | 381 ++++++++++++++---------------
 src/types/index.ts                 |   2 +-
 12 files changed, 358 insertions(+), 321 deletions(-)
 create mode 100644 src/assets/icons/archive.svg
 create mode 100644 src/assets/icons/buildingsBlue.svg
 create mode 100644 src/assets/icons/people.svg

diff --git a/src/app/admin/home/page.tsx b/src/app/admin/home/page.tsx
index d7ab0a4..c5a9149 100644
--- a/src/app/admin/home/page.tsx
+++ b/src/app/admin/home/page.tsx
@@ -86,11 +86,11 @@ export default function HomePage() {
         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">
+          <div className="r-flex align-items-center r-gap-16">
+            <div className="circled-badge">
               {initials}
             </div>
-            <p>{value}</p>
+            <p className="r-p-m-0" >{value}</p>
           </div>
         )
       }
@@ -106,11 +106,11 @@ export default function HomePage() {
         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]" :
+            className={`custom-badge r-p-m-0 r-flex-center rounded-5
+            ${status === "active" ? "badge-active" :
+                status === "inactive" ? "badge-inactive" :
+                  status === "pending" ? "badge-pending" :
+                    status === "blocked" ? "badge-blocked" :
                       ""
               }
           `}
@@ -163,7 +163,7 @@ export default function HomePage() {
                     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">
+                  <div className="r-flex-between w-full pt-6 r-gap-24">
                     <button
                       className="cta modal-cta cancel"
                       onClick={() => {
@@ -195,7 +195,7 @@ export default function HomePage() {
     <div className="r-p-m-0">
       <Statistics />
 
-      <p className="fw-bold fs-5">Dernières organisations actives</p>
+      <h3 className="fw-bold fs-5 pt-5 pb-4">Dernières organisations actives</h3>
 
       <Table
         columns={columns}
diff --git a/src/app/globals.css b/src/app/globals.css
index 323f4b1..e50f67b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -12,23 +12,26 @@
   --secondary: #9FA8BC;
   --danger: #F33F19;
   --cinder: #E7E5E4;
+  --lightblue: #DCDCFE;
   --bluegray: #E9F0FF;
   --gray: #E7EBF3;
 }
 
 [ data-theme="dark"] {
-  --background: #04060F;
-  --foreground: #ffffff;
+  --background: #11111a;
+  --foreground: #eeeeff;
+  --cinder: #999; 
+  --bluegray: #eeeeff;
 }
 
-@media (prefers-color-scheme: dark) {
+/* @media (prefers-color-scheme: dark) {
   :root {
     --foreground: #2a2a2a;
     --background: #ffffff;
     --cinder: #999;
     --bluegray: --primary;
   }
-}
+} */
 
 body {
   background: var(--background)!important;
@@ -45,10 +48,6 @@ a{
   color: inherit!important;
 }
 
-ul, li{
-  /* margin: 0!important; */
-}
-
 .input-form {
   width: 100%;
   padding: 12px;
@@ -288,12 +287,13 @@ input[type="checkbox"]:checked::before {
 .login-header {
   padding: 20px 0;
   box-shadow: 0 0 24px #0000001A;
+  /* background-color: white; */
 }
 
 .word {
   font-size: 24px;
   font-weight: bold;
-  color: black;
+  /* color: black; */
   position: relative;
   line-height: normal;
 }
diff --git a/src/assets/css/admin.css b/src/assets/css/admin.css
index 74c938a..8f91ddb 100644
--- a/src/assets/css/admin.css
+++ b/src/assets/css/admin.css
@@ -54,6 +54,8 @@
 
 /* Border */
 .icon-border {
+  width: 42px;
+  height: 42px;
   height: max-content;
   border: 1px solid var(--bluegray);
   padding: 8px;
@@ -150,14 +152,19 @@
 
 /* Home Page */
 .stats{
+  width: 22%;
+  max-width: 400px;
+  height: 108px;
+  max-height: 108px;
   padding: 24px 27px;
   display: flex;
-  flex-wrap: nowrap;
-  border: 1px!important;
-  border: 1px solid var(--primary)!important;
+  flex-grow: 1;
+  flex-wrap: nowrap!important;
+  border: 1px solid!important;
+  border-color: var(--primary)!important;
   border-radius: 14px;
 }
-.sqaurre-bg{
+.sqarre-bg{
   width: 54px;
   height: 54px;
   padding: 10px;
@@ -169,6 +176,90 @@
   background: var(--bluegray);
 }
 
+th{
+  font-size: 14px;
+  padding: 8px;
+  height: 40px!important;
+}
+th.bg-bluegray:first-of-type{
+  border-top-left-radius: 8px!important;
+}
+
+th.bg-bluegray:last-of-type{
+  border-top-right-radius: 8px!important;
+}
+
+tbody tr {
+  height: 56px!important;
+  max-height: 56px!important;
+  overflow: hidden;
+  border-bottom: 1px solid var(--bluegray)!important;
+}
+tbody tr:hover{
+  background-color: var(--cinder);
+}
+tbody tr td:first-child {
+  padding-left: 16px;
+  width: 56px;
+}
+
+tbody tr td:last-child {
+  width: 56px;
+  padding-right: 16px;
+}
+
+.circled-badge{
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-transform: uppercase;
+  font-weight: 500!important;
+  border-radius: 40px;
+  color: var(--primary);
+  background-color: var(--lightblue);
+}
+
+.custom-badge{
+  width: 80px;
+  height: 24px;
+}
+.badge-active{
+  color: #49C91E;
+  background-color: #ECF9E8;
+}
+
+.badge-inactive{
+  color: #9FA8BC;
+  background-color: #E7EBF3;
+}
+
+.badge-pending{
+  color: #30B2EA;
+  background-color: #EAF7FC;
+}
+
+.badge-blocked{
+  color: #F33F19;
+  background-color: #FDEBE8;
+}
+
+a.disabled{
+  opacity: 40%;
+}
+
+@media (max-width: 1070px) {
+
+  .stats-container{
+    justify-content: space-evenly;
+  }
+
+  .stats{
+    width: 300px;
+  }
+
+}
 
 
 @media (max-width: 640px) {
@@ -210,4 +301,11 @@
     color: var(--primary);
     border-radius: 4px;
   }
+  .stats-container{
+    /* flex-direction: column; */
+    align-items: center;
+  }
+  .stats{
+    width: 300px;
+  }
 }
\ No newline at end of file
diff --git a/src/assets/icons/archive.svg b/src/assets/icons/archive.svg
new file mode 100644
index 0000000..dd710fa
--- /dev/null
+++ b/src/assets/icons/archive.svg
@@ -0,0 +1,8 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0001 29.3333H20.0001C26.6667 29.3333 29.3334 26.6667 29.3334 20V12C29.3334 5.33334 26.6667 2.66667 20.0001 2.66667H12.0001C5.33341 2.66667 2.66675 5.33334 2.66675 12V20C2.66675 26.6667 5.33341 29.3333 12.0001 29.3333Z" stroke="#246BFD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24 10.3333V19.3333C24 17.8667 22.8 16.6667 21.3333 16.6667H10.6667C9.2 16.6667 8 17.8667 8 19.3333V10.3333C8 8.86667 9.2 7.66667 10.6667 7.66667H21.3333C22.8 7.66667 24 8.86667 24 10.3333Z" stroke="#246BFD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M25.3333 21H24" stroke="#246BFD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.00008 21H6.66675" stroke="#246BFD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24 18.6667V14.6667C24 13.2 22.8 12 21.3333 12H10.6667C9.2 12 8 13.2 8 14.6667V18.6667" stroke="#246BFD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24 19.3333V21H19.3333C19.3333 22.84 17.84 24.3333 16 24.3333C14.16 24.3333 12.6667 22.84 12.6667 21H8V19.3333C8 17.8667 9.2 16.6667 10.6667 16.6667H21.3333C22.8 16.6667 24 17.8667 24 19.3333Z" stroke="#246BFD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/buildingsBlue.svg b/src/assets/icons/buildingsBlue.svg
new file mode 100644
index 0000000..434d482
--- /dev/null
+++ b/src/assets/icons/buildingsBlue.svg
@@ -0,0 +1,9 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.3333 29.3333H6.66663C3.99996 29.3333 2.66663 28 2.66663 25.3333V14.6667C2.66663 12 3.99996 10.6667 6.66663 10.6667H13.3333V25.3333C13.3333 28 14.6666 29.3333 17.3333 29.3333Z" stroke="#246BFD" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.4799 5.33333C13.3733 5.73333 13.3333 6.17333 13.3333 6.66666V10.6667H6.66663V7.99999C6.66663 6.53333 7.86663 5.33333 9.33329 5.33333H13.4799Z" stroke="#246BFD" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.6666 10.6667V17.3333" stroke="#246BFD" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24 10.6667V17.3333" stroke="#246BFD" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.6666 22.6667H20C19.2666 22.6667 18.6666 23.2667 18.6666 24V29.3333H24V24C24 23.2667 23.4 22.6667 22.6666 22.6667Z" stroke="#246BFD" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 17.3333V22.6667" stroke="#246BFD" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.3334 25.3333V6.66667C13.3334 4.00001 14.6667 2.66667 17.3334 2.66667H25.3334C28 2.66667 29.3334 4.00001 29.3334 6.66667V25.3333C29.3334 28 28 29.3333 25.3334 29.3333H17.3334C14.6667 29.3333 13.3334 28 13.3334 25.3333Z" stroke="#246BFD" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
index fed2f25..fbee4cc 100644
--- a/src/assets/icons/index.ts
+++ b/src/assets/icons/index.ts
@@ -22,6 +22,7 @@ import menuIcon from "./Menu Dots.svg"
 import messagesIcon from "./message.svg"
 import homeIcon from "./NavItem.svg"
 import companiesIcon from "./buildings.svg"
+import companiesIconBlue from "./buildingsBlue.svg"
 import arrowLeft from "./arrowLeft.svg"
 import arrowRight from "./arrowRight.svg"
 import filesIcon from "./ph_files.svg"
@@ -43,6 +44,8 @@ import trash from "./trash.svg"
 import mailIcon from "./sms.svg"
 import personalCard from "./personalcard.svg"
 import arrowDown from "#/assets/icons/chevron-down.svg"
+import peopleIcon from "#/assets/icons/people.svg"
+import docsArchive from "#/assets/icons/archive.svg"
 
 
 export const icons = {
@@ -57,13 +60,16 @@ export const icons = {
   eyeIcon,
   eyeSlashIcon,
   checkboxchedIcon,
+  peopleIcon,
   crossIcon,
   addBlueIcon,
+  docsArchive,
   archivesIcon,
   notificationsIcon,
   timerIcon,
   logo,
   companiesIcon,
+  companiesIconBlue,
   logout,
   logoutRed,
   maximizeIcon,
@@ -92,92 +98,4 @@ export const icons = {
   personalCard,
   arrowDown
 
-}
-
-
-
-/*  
-
-import AddIcon from "./add.svg";
-import CalendarIcon from "./Calendar Mark.svg";
-import DocummentTextIcon from "./document-text.svg";
-import FolderIcon from "./Document.svg";
-import EditIcon from "./edit-2.svg";
-import GridIcon from "./element-3-white.svg";
-import GridBlueIcon from "./element-3.svg";
-import ProfilePicture from "./Ellipse 2.svg";
-import EyeIcon from "./eye.svg";
-import EyeSlashIcon from "./eye-slash.svg";
-import CheckboxchedIcon from "./checked.svg";
-import CrossIcon from "./cross.svg";
-import AddBlueIcon from "./icon-add.svg";
-import ArchivesIcon from "./archives.svg";
-import NotificationsIcon from "./notifications.svg";
-import TimerIcon from "./Line Duotone.svg";
-import Logo from "./logo.svg";
-import LogoutRed from "./logout-red.svg";
-import Logout from "./logout.svg";
-import MaximizeIcon from "./maximize-3.svg";
-import MenuIcon from "./Menu Dots.svg";
-import MessagesIcon from "./message.svg";
-import HomeIcon from "./NavItem.svg";
-import CompaniesIcon from "./buildings.svg";
-import ArrowLeft from "./arrowLeft.svg";
-import ArrowRight from "./arrowLeft.svg";
-import FilesIcon from "./ph_files.svg";
-import PdfIcon from "./prime_file-pdf.svg";
-import WordIcon from "./prime_file-word.svg";
-import UserIcon from "./profile.svg";
-import UserGroup from "./profile-2user.svg";
-import UserGroupBlue from "./profile-2user-blue.svg";
-import Rectanagle from "./Rectangle.svg";
-import SearchIcon from "./Search.svg";
-import SettingsIcon from "./setting-2.svg";
-import FilterIcon from "./setting-3.svg";
-import ShareIcon from "./share.svg";
-import StarIcon from "./star.svg";
-import ArrowUp from "./Vector.svg";
-
-export const icons = {
-  AddIcon,
-  CalendarIcon,
-  DocummentTextIcon,
-  FolderIcon,
-  EditIcon,
-  GridIcon,
-  GridBlueIcon,
-  ProfilePicture,
-  EyeIcon,
-  EyeSlashIcon,
-  CheckboxchedIcon,
-  CrossIcon,
-  AddBlueIcon,
-  ArchivesIcon,<svg width="16" height="16" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:var(--theme-toggle-moon-icon-display)"><path d="M2.89998 0.499976C2.89998 0.279062 2.72089 0.0999756 2.49998 0.0999756C2.27906 0.0999756 2.09998 0.279062 2.09998 0.499976V1.09998H1.49998C1.27906 1.09998 1.09998 1.27906 1.09998 1.49998C1.09998 1.72089 1.27906 1.89998 1.49998 1.89998H2.09998V2.49998C2.09998 2.72089 2.27906 2.89998 2.49998 2.89998C2.72089 2.89998 2.89998 2.72089 2.89998 2.49998V1.89998H3.49998C3.72089 1.89998 3.89998 1.72089 3.89998 1.49998C3.89998 1.27906 3.72089 1.09998 3.49998 1.09998H2.89998V0.499976ZM5.89998 3.49998C5.89998 3.27906 5.72089 3.09998 5.49998 3.09998C5.27906 3.09998 5.09998 3.27906 5.09998 3.49998V4.09998H4.49998C4.27906 4.09998 4.09998 4.27906 4.09998 4.49998C4.09998 4.72089 4.27906 4.89998 4.49998 4.89998H5.09998V5.49998C5.09998 5.72089 5.27906 5.89998 5.49998 5.89998C5.72089 5.89998 5.89998 5.72089 5.89998 5.49998V4.89998H6.49998C6.72089 4.89998 6.89998 4.72089 6.89998 4.49998C6.89998 4.27906 6.72089 4.09998 6.49998 4.09998H5.89998V3.49998ZM1.89998 6.49998C1.89998 6.27906 1.72089 6.09998 1.49998 6.09998C1.27906 6.09998 1.09998 6.27906 1.09998 6.49998V7.09998H0.499976C0.279062 7.09998 0.0999756 7.27906 0.0999756 7.49998C0.0999756 7.72089 0.279062 7.89998 0.499976 7.89998H1.09998V8.49998C1.09998 8.72089 1.27906 8.89997 1.49998 8.89997C1.72089 8.89997 1.89998 8.72089 1.89998 8.49998V7.89998H2.49998C2.72089 7.89998 2.89998 7.72089 2.89998 7.49998C2.89998 7.27906 2.72089 7.09998 2.49998 7.09998H1.89998V6.49998ZM8.54406 0.98184L8.24618 0.941586C8.03275 0.917676 7.90692 1.1655 8.02936 1.34194C8.17013 1.54479 8.29981 1.75592 8.41754 1.97445C8.91878 2.90485 9.20322 3.96932 9.20322 5.10022C9.20322 8.37201 6.82247 11.0878 3.69887 11.6097C3.45736 11.65 3.20988 11.6772 2.96008 11.6906C2.74563 11.702 2.62729 11.9535 2.77721 12.1072C2.84551 12.1773 2.91535 12.2458 2.98667 12.3128L3.05883 12.3795L3.31883 12.6045L3.50684 12.7532L3.62796 12.8433L3.81491 12.9742L3.99079 13.089C4.11175 13.1651 4.23536 13.2375 4.36157 13.3059L4.62496 13.4412L4.88553 13.5607L5.18837 13.6828L5.43169 13.7686C5.56564 13.8128 5.70149 13.8529 5.83857 13.8885C5.94262 13.9155 6.04767 13.9401 6.15405 13.9622C6.27993 13.9883 6.40713 14.0109 6.53544 14.0298L6.85241 14.0685L7.11934 14.0892C7.24637 14.0965 7.37436 14.1002 7.50322 14.1002C11.1483 14.1002 14.1032 11.1453 14.1032 7.50023C14.1032 7.25044 14.0893 7.00389 14.0623 6.76131L14.0255 6.48407C13.991 6.26083 13.9453 6.04129 13.8891 5.82642C13.8213 5.56709 13.7382 5.31398 13.6409 5.06881L13.5279 4.80132L13.4507 4.63542L13.3766 4.48666C13.2178 4.17773 13.0353 3.88295 12.8312 3.60423L12.6782 3.40352L12.4793 3.16432L12.3157 2.98361L12.1961 2.85951L12.0355 2.70246L11.8134 2.50184L11.4925 2.24191L11.2483 2.06498L10.9562 1.87446L10.6346 1.68894L10.3073 1.52378L10.1938 1.47176L9.95488 1.3706L9.67791 1.2669L9.42566 1.1846L9.10075 1.09489L8.83599 1.03486L8.54406 0.98184ZM10.4032 5.30023C10.4032 4.27588 10.2002 3.29829 9.83244 2.40604C11.7623 3.28995 13.1032 5.23862 13.1032 7.50023C13.1032 10.593 10.596 13.1002 7.50322 13.1002C6.63646 13.1002 5.81597 12.9036 5.08355 12.5522C6.5419 12.0941 7.81081 11.2082 8.74322 10.0416C8.87963 10.2284 9.10028 10.3497 9.34928 10.3497C9.76349 10.3497 10.0993 10.0139 10.0993 9.59971C10.0993 9.24256 9.84965 8.94373 9.51535 8.86816C9.57741 8.75165 9.63653 8.63334 9.6926 8.51332C9.88358 8.63163 10.1088 8.69993 10.35 8.69993C11.0403 8.69993 11.6 8.14028 11.6 7.44993C11.6 6.75976 11.0406 6.20024 10.3505 6.19993C10.3853 5.90487 10.4032 5.60464 10.4032 5.30023Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
-  NotificationsIcon,
-  TimerIcon,
-  Logo,
-  CompaniesIcon,
-  Logout,
-  LogoutRed,
-  MaximizeIcon,
-  MenuIcon,
-  MessagesIcon,
-  HomeIcon,
-  ArrowLeft,
-  ArrowRight,
-  FilesIcon,
-  PdfIcon,
-  WordIcon,
-  UserIcon,
-  UserGroup,
-  UserGroupBlue,
-  Rectanagle,
-  SearchIcon,
-  SettingsIcon,
-  FilterIcon,
-  ShareIcon,
-  StarIcon,
-  ArrowUp
-};
-
-*/
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/assets/icons/people.svg b/src/assets/icons/people.svg
new file mode 100644
index 0000000..3c6ce44
--- /dev/null
+++ b/src/assets/icons/people.svg
@@ -0,0 +1,8 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.9999 9.54668C23.9199 9.53334 23.8266 9.53334 23.7466 9.54668C21.9066 9.48001 20.4399 7.97334 20.4399 6.10667C20.4399 4.20001 21.9733 2.66667 23.8799 2.66667C25.7866 2.66667 27.3199 4.21334 27.3199 6.10667C27.3066 7.97334 25.8399 9.48001 23.9999 9.54668Z" stroke="#246BFD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.6266 19.2534C24.4532 19.56 26.4666 19.24 27.8799 18.2934C29.7599 17.04 29.7599 14.9867 27.8799 13.7334C26.4532 12.7867 24.4132 12.4667 22.5865 12.7867" stroke="#246BFD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.96002 9.54668C8.04002 9.53334 8.13335 9.53334 8.21335 9.54668C10.0533 9.48001 11.52 7.97334 11.52 6.10667C11.52 4.20001 9.98668 2.66667 8.08002 2.66667C6.17335 2.66667 4.64001 4.21334 4.64001 6.10667C4.65335 7.97334 6.12002 9.48001 7.96002 9.54668Z" stroke="#246BFD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.33337 19.2534C7.50671 19.56 5.49338 19.24 4.08004 18.2934C2.20004 17.04 2.20004 14.9867 4.08004 13.7334C5.50671 12.7867 7.54671 12.4667 9.37337 12.7867" stroke="#246BFD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.9999 19.5067C15.9199 19.4933 15.8266 19.4933 15.7466 19.5067C13.9066 19.44 12.4399 17.9333 12.4399 16.0667C12.4399 14.16 13.9733 12.6267 15.8799 12.6267C17.7866 12.6267 19.3199 14.1733 19.3199 16.0667C19.3066 17.9333 17.8399 19.4533 15.9999 19.5067Z" stroke="#246BFD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.12 23.7067C10.24 24.96 10.24 27.0133 12.12 28.2667C14.2533 29.6933 17.7466 29.6933 19.88 28.2667C21.76 27.0133 21.76 24.96 19.88 23.7067C17.76 22.2933 14.2533 22.2933 12.12 23.7067Z" stroke="#246BFD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/admin/navItem.tsx b/src/components/admin/navItem.tsx
index a14b287..1b0e515 100644
--- a/src/components/admin/navItem.tsx
+++ b/src/components/admin/navItem.tsx
@@ -7,14 +7,15 @@ interface ItemProps {
   label: string;
   isActive: boolean;
   isNavHome?: boolean;
+  classname?: string
 }
 
-export default function NavItem({ link, iconSrc, label, isActive, isNavHome }: ItemProps) {
+export default function NavItem({ link, iconSrc, label, isActive, isNavHome, classname }: ItemProps) {
   return (
     <>
-      <Link href={link} className={`nav-item r-flex-center ${isActive ? "active" : ""}`} >
+      <Link href={link} className={`nav-item r-flex-center ${isActive ? "active" : ""} ${classname}`} >
         <Image src={iconSrc} alt={label} className={`scale-100 ${isNavHome ? "nav-home" : ""}`} />
       </Link>
     </>
   );
-} 
\ No newline at end of file
+}  
\ No newline at end of file
diff --git a/src/components/admin/sidebar.tsx b/src/components/admin/sidebar.tsx
index 5bbf4c0..92eaf75 100644
--- a/src/components/admin/sidebar.tsx
+++ b/src/components/admin/sidebar.tsx
@@ -26,8 +26,8 @@ export default function Sidebar() {
           </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")} />
+            <NavItem link="/admin/organizations" iconSrc={icons.companiesIcon} label="Organizations" isActive={pathname.startsWith("/admin/organizations")} classname="disabled" />
+            <NavItem link="/admin/admins" iconSrc={icons.userGroup} label="Admins" isActive={pathname.startsWith("/admin/admins")} classname="disabled" />
           </div>
           <div className="logout position-absolute bottom-[40px] left-[28px]">
             <Link href="/login" className="cursor-pointer">
diff --git a/src/components/stats.tsx b/src/components/stats.tsx
index 6691ccb..9a6f574 100644
--- a/src/components/stats.tsx
+++ b/src/components/stats.tsx
@@ -32,22 +32,22 @@ export default function Statistics() {
   })
 
   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' }
+    { id: 1, title: 'Organisations', value: stats?.companies, icon: icons.companiesIconBlue, color: 'blue' },
+    { id: 2, title: 'Utilisateurs', value: stats?.users, icon: icons.peopleIcon, color: 'blue' },
+    { id: 3, title: 'Documents', value: stats?.documents, icon: icons.docsArchive, color: 'blue' },
+    { id: 4, title: 'Stockage', value: (stats?.documents_size + " GB"), icon: icons.maximizeIcon, color: 'blue' }
   ];
 
 
 
 
   return (
-    <div className="r-flex-between r-gap-24">
+    <div className="stats-container r-flex-between r-gap-24 flex-wrap overflow-hidden ">
       {statsData.map(({ id, title, value, icon }) => (
-        <div key={id} className="w-25">
-          <div className="stats flex items-center rounded-xl border-2 border-blue-500 r-gap-12">
+        <div key={id} className="stats flex items-center rounded-xl r-gap-12">
+          {/* <div className=""> */}
             <div
-              className="sqaurre-bg d-flex items-center justify-center rounded-lg bg-[#E9F0FF] bg-opacity-25 p-2"
+              className="sqarre-bg d-flex items-center justify-center rounded-lg bg-[#E9F0FF] bg-opacity-25 p-2"
               style={{ width: '54px', height: '54px' }}
             >
               <Image
@@ -59,10 +59,10 @@ export default function Statistics() {
               />
             </div>
             <div className="ml-3">
-              <p className="text-sm text-secondary mb-0">{title}</p>
+              <p className="text-sm fw-semibold text-secondary mb-0">{title}</p>
               <p className="fw-bold fs-5 mb-0">{status === "loading" && isLoading ? "Chargement..." : value}</p>
             </div>
-          </div>
+          {/* </div> */}
         </div>
       ))}
     </div>
diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
index 948ca8c..7c15b62 100644
--- a/src/components/table/table.tsx
+++ b/src/components/table/table.tsx
@@ -1,214 +1,209 @@
 "use client";
 import {
-    ColumnDef,
-    flexRender,
-    getCoreRowModel,
-    useReactTable,
-    getPaginationRowModel,
-    ColumnFiltersState,
-    getFilteredRowModel,
-    Table as TableType,
-  } from "@tanstack/react-table"
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+  getPaginationRowModel,
+  ColumnFiltersState,
+  getFilteredRowModel,
+  Table as TableType,
+} from "@tanstack/react-table"
 import { ReactNode, useEffect, useRef, useState } from "react";
 import Image from "next/image";
 import { icons } from "#/assets/icons";
 import clsx from "clsx";
 
-  interface DataTableProps<TData, TValue> {
-    columns: ColumnDef<TData, TValue>[]
-    data: TData[],
-    pageSize?: number,
-    header?: ReactNode | ((table: TableType<TData>) => ReactNode),
-    isDataLoading?: boolean
-  }
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[]
+  data: TData[],
+  pageSize?: number,
+  header?: ReactNode | ((table: TableType<TData>) => ReactNode),
+  isDataLoading?: boolean
+}
 
 export default function Table<TData, TValue>({
-    columns,
+  columns,
+  data,
+  pageSize = 10,
+  header,
+  isDataLoading = true
+}: DataTableProps<TData, TValue>) {
+  const [rowSelection, setRowSelection] = useState({})
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(
+    []
+  )
+
+  const table = useReactTable({
     data,
-    pageSize = 10,
-    header,
-    isDataLoading = true
-  }: DataTableProps<TData, TValue>) {
-    const [rowSelection, setRowSelection] = useState({})
-    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(
-        []
-      )
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
 
-    const table = useReactTable({
-        data,
-        columns,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-    
-        state: {
-          rowSelection,
-          columnFilters,
-        },
-        initialState: {
-            pagination: {
-                pageSize: pageSize,
-            }
-        },
-        enableRowSelection: true,
-        getFilteredRowModel: getFilteredRowModel(),
-        onRowSelectionChange: setRowSelection,
-        onColumnFiltersChange: setColumnFilters,
-      })
+    state: {
+      rowSelection,
+      columnFilters,
+    },
+    initialState: {
+      pagination: {
+        pageSize: pageSize,
+      }
+    },
+    enableRowSelection: true,
+    getFilteredRowModel: getFilteredRowModel(),
+    onRowSelectionChange: setRowSelection,
+    onColumnFiltersChange: setColumnFilters,
+  })
 
-    const headerCheckboxRef = useRef<HTMLInputElement>(null);
+  const headerCheckboxRef = useRef<HTMLInputElement>(null);
 
-    useEffect(() => {
-        if (headerCheckboxRef.current) {
-          headerCheckboxRef.current.indeterminate =
-            table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected();
-        }
-
-        const selectedRows = table.getSelectedRowModel().rows;
-        const filteredSelectedRows = table
-          .getRowModel()
-          .rows.filter((row) => row.getIsSelected())
-          .map((row) => row.original);
-
-        console.log("SELECTED ALL = ", selectedRows);
-        console.log("SELECTED = ", filteredSelectedRows);
-      }, [
-        table
-      ]);
-      
-    const totalPages = table.getPageCount()
-    const currentPage = table.getState().pagination.pageIndex + 1
-
-    const getPageNumbers = () => {
-        const pages = []
-        for (let i = 1; i <= totalPages; i++) {
-            pages.push(i)
-        }
-        return pages
+  useEffect(() => {
+    if (headerCheckboxRef.current) {
+      headerCheckboxRef.current.indeterminate =
+        table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected();
     }
 
-    const render = () => {
-        if(!header) return null
+    const selectedRows = table.getSelectedRowModel().rows;
+    const filteredSelectedRows = table
+      .getRowModel()
+      .rows.filter((row) => row.getIsSelected())
+      .map((row) => row.original);
 
-        return(
-            <div className="mb-4">
-                {typeof header === 'function'
-                ? header(table)
-                : header}
-            </div>
-        )
+    console.log("SELECTED ALL = ", selectedRows);
+    console.log("SELECTED = ", filteredSelectedRows);
+  }, [
+    table
+  ]);
+
+  const totalPages = table.getPageCount()
+  const currentPage = table.getState().pagination.pageIndex + 1
+
+  const getPageNumbers = () => {
+    const pages = []
+    for (let i = 1; i <= totalPages; i++) {
+      pages.push(i)
     }
+    return pages
+  }
 
-    return(
-        <div className="w-full">
-            {render()}
+  const render = () => {
+    if (!header) return null
 
-            <div className="rounded-lg border border-gray-200 w-auto">
-                <div className="overflow-x-auto">
-                    <table className="w-full overflow-x-auto rounded-lg">
-                        <thead className="h-10">
-                            {table.getHeaderGroups().map((headerGroup) => (
-                                <tr key={headerGroup.id} className="rounded-lg">
-                                    {header
-                                    ?
-                                    <th className="bg-[#E9F0FF] p-3 text-start first:rounded-tl-lg">
-                                        
-                                    </th>
-                                    :
-                                    <th className="bg-[#E9F0FF] p-3 text-start first:rounded-tl-lg">
-                                        <input 
-                                            ref={headerCheckboxRef}
-                                            checked={!!table.getIsAllPageRowsSelected()} 
-                                            onChange={(e) => table.toggleAllPageRowsSelected(e.target.checked)} 
-                                            type="checkbox" name="" id="" 
-                                        />
-                                    </th>
-                                    }
-                                    {headerGroup.headers.map((header) => {
-                                        return(
-                                            <th key={header.id} className="bg-[#E9F0FF] p-3 text-start last:rounded-tr-lg">
-                                                {flexRender(
-                                                    header.column.columnDef.header,
-                                                    header.getContext()
-                                                )}
-                                            </th>
-                                        )
-                                    })}
-                                </tr>
-                            ))}
-                        </thead>
-                        <tbody>
-                            {table.getRowModel().rows.length ? (
-                                table.getRowModel().rows.map((row) => (
-                                    <tr key={row.id} className={clsx('hover:bg-gray-100 border-t border-gray-200', { 'bg-gray-300': row.getIsSelected()})}>
-                                        <td className="p-3 text-start">
-                                            <input 
-                                                checked={row.getIsSelected()} 
-                                                onChange={(e) => row.toggleSelected(e.target.checked)} 
-                                                type="checkbox" name="" id="" 
-                                            />
-                                        </td>
-                                        {row.getVisibleCells().map((cell) => (
-                                            <td key={cell.id} className="p-3 text-start">
-                                                {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                            </td>
-                                        ))}
-                                    </tr>
-                                ))
-                            )
-                            : isDataLoading ?
-                            (
-                                <tr>
-                                    <td colSpan={columns.length} className="h-20 text-center">
-                                        Chargement...
-                                    </td>
-                                </tr>
-                            ) 
-                            : (
-                                <tr>
-                                    <td colSpan={columns.length} className="h-20 text-center">
-                                        Aucun résultats
-                                    </td>
-                                </tr>
-                            )}
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-
-            <div className="flex items-center justify-end space-x-2 py-4">
-            <button
-                className="hover:bg-gray-300 cursor-pointer px-3 py-1 rounded w-9 h-9"
-                onClick={() => table.previousPage()}
-                disabled={!table.getCanPreviousPage()}
-            >
-                <Image alt="" src={icons.arrowLeft} className="hover:text-blue-400"/>
-            </button>
-
-            <div className="flex space-x-1">
-                {getPageNumbers().map((pageNumber) => (
-                    <button
-                        key={pageNumber}
-                        className={clsx(
-                            "px-3 py-1 rounded w-9 h-9",
-                            pageNumber === currentPage 
-                                ? "bg-[#E9F0FF] text-blue-400"
-                                : "hover:bg-gray-300 cursor-pointer"
-                        )}
-                        onClick={() => table.setPageIndex(pageNumber - 1)}
-                    >
-                        {pageNumber}
-                    </button>
-                ))}
-            </div>
-
-            <button
-                className="w-9 h-9 hover:bg-gray-300 cursor-pointer hover:text-black px-3 py-1 rounded"
-                onClick={() => table.nextPage()}
-                disabled={!table.getCanNextPage()}
-            >
-                <Image alt="" src={icons.arrowRight} />
-            </button>
-        </div>
-        </div>
+    return (
+      <div className="mb-4">
+        {typeof header === 'function'
+          ? header(table)
+          : header}
+      </div>
     )
+  }
+
+  return (
+    <div className="w-full">
+      {render()}
+
+      <div className="home-table rounded-top">
+        <div className="overflow-x-auto">
+          <table className="w-100 overflow-x-auto rounded-1c ">
+            <thead className="table-head bg-bluegray">
+              {table.getHeaderGroups().map((headerGroup) => (
+                <tr key={headerGroup.id} className="rounded-lg">
+                  {header
+                    ?
+                    <th className=" r-p-m-0 text-start ">
+
+                    </th>
+                    :
+                    <th className=" r-p-m-0 text-start  ">
+                      
+                    </th>
+                  }
+                  {headerGroup.headers.map((header) => {
+                    return (
+                      <th key={header.id} className="r-p-m-0 text-start">
+                        {flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                      </th>
+                    )
+                  })}
+                </tr>
+              ))}
+            </thead>
+            <tbody>
+              {table.getRowModel().rows.length ? (
+                table.getRowModel().rows.map((row) => (
+                  <tr key={row.id} className={clsx('hover:bg-gray-100 border-t border-gray-200', { 'bg-gray-300': row.getIsSelected() })}>
+                    <td className="r-p-m-0 text-start">
+                      <input
+                        checked={row.getIsSelected()}
+                        onChange={(e) => row.toggleSelected(e.target.checked)}
+                        type="checkbox" name="" id=""
+                      />
+                    </td>
+                    {row.getVisibleCells().map((cell) => (
+                      <td key={cell.id} className="r-p-m-0 text-start">
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </td>
+                    ))}
+                  </tr>
+                ))
+              )
+                : isDataLoading ?
+                  (
+                    <tr>
+                      <td colSpan={columns.length} className="h-20 text-center">
+                        Chargement...
+                      </td>
+                    </tr>
+                  )
+                  : (
+                    <tr>
+                      <td colSpan={columns.length} className="h-20 text-center">
+                        Aucun résultats
+                      </td>
+                    </tr>
+                  )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div className="r-flex-center justify-content-end r-gap-2 py-4">
+        <button
+          className="hover:bg-gray-300 cursor-pointer px-3 py-1 rounded w-9 h-9"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          <Image alt="" src={icons.arrowLeft} className="hover:text-blue-400" />
+        </button>
+
+        <div className="r-flex r-gap-1">
+          {getPageNumbers().map((pageNumber) => (
+            <button
+              key={pageNumber}
+              className={clsx(
+                "px-3 py-1 rounded w-9 h-9",
+                pageNumber === currentPage
+                  ? "bg-bluegray text-blue-400"
+                  : "hover:bg-gray-300 cursor-pointer"
+              )}
+              onClick={() => table.setPageIndex(pageNumber - 1)}
+            >
+              {pageNumber}
+            </button>
+          ))}
+        </div>
+
+        <button
+          className="w-9 h-9 hover:bg-gray-300 cursor-pointer hover:text-black px-3 py-1 rounded"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          <Image alt="" src={icons.arrowRight} />
+        </button>
+      </div>
+    </div>
+  )
 }
\ No newline at end of file
diff --git a/src/types/index.ts b/src/types/index.ts
index 6d2aab8..4dacfc0 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -30,7 +30,7 @@ export interface FormProps{
 export interface StatsType {
     id: number;
     title: string;
-    value: number | undefined;
+    value: number | string | undefined;
     icon: string;
     color: string;
 }