From ee31eb551110e884651aa866e941c836d01b2730 Mon Sep 17 00:00:00 2001
From: Ruben <rubensenpai11@gmail.com>
Date: Fri, 4 Apr 2025 18:15:58 +0100
Subject: [PATCH] style: organizations and stuffs

---
 src/app/admin/home/page.tsx           |   2 +-
 src/app/admin/organizations/page.tsx  | 161 +++++++++++++-------------
 src/app/globals.css                   |  17 ++-
 src/assets/css/admin.css              |  25 +++-
 src/components/admin/sidebar.tsx      |   2 +-
 src/components/admin/theme.tsx        |   6 +-
 src/components/floatingLabelInput.tsx |   4 +-
 src/components/table/table.tsx        |   6 +-
 8 files changed, 125 insertions(+), 98 deletions(-)

diff --git a/src/app/admin/home/page.tsx b/src/app/admin/home/page.tsx
index c5a9149..3a84f65 100644
--- a/src/app/admin/home/page.tsx
+++ b/src/app/admin/home/page.tsx
@@ -192,7 +192,7 @@ export default function HomePage() {
   ]
 
   return (
-    <div className="r-p-m-0">
+    <div className="home home-table r-p-m-0">
       <Statistics />
 
       <h3 className="fw-bold fs-5 pt-5 pb-4">Dernières organisations actives</h3>
diff --git a/src/app/admin/organizations/page.tsx b/src/app/admin/organizations/page.tsx
index 4f273d3..b359c0a 100644
--- a/src/app/admin/organizations/page.tsx
+++ b/src/app/admin/organizations/page.tsx
@@ -170,12 +170,12 @@ export default function Organizations() {
       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">
+        return (
+          <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>
         )
       }
@@ -191,22 +191,21 @@ export default function Organizations() {
         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" ? "font-medium w-[80px] h-[24px] bg-[#ECF9E8] text-[#49C91E]" :
-                status === "inactive" ? "font-medium w-[80px] h-[24px] bg-[#E7EBF3] text-[#9FA8BC]" : 
-                status === "pending" ? "font-medium w-[80px] h-[24px] bg-[#EAF7FC] text-[#30B2EA]" : 
-                status === "blocked" ? "font-medium w-[80px] h-[24px] 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" :
+                      ""
               }
             `}
           >
             {
-              status === "active" ? "Actif" : 
-              status === "inactive" ? "Inactif" : 
-              status === "pending" ? "En attente" : 
-              status === "blocked" ? "Bloquée" : 
-              ""
+              status === "active" ? "Actif" :
+                status === "inactive" ? "Inactif" :
+                  status === "pending" ? "En attente" :
+                    status === "blocked" ? "Bloquée" :
+                      ""
             }
           </p>
         )
@@ -216,64 +215,64 @@ export default function Organizations() {
       id: "delete",
       cell: ({ row }) => {
         const company = row.original;
-          return (
-            <div className="flex justify-end p-2 space-x-2"
-              // onClick={() => { mutate(id) }}
-            >
+        return (
+          <div className="flex justify-end p-2 space-x-2"
+          // onClick={() => { mutate(id) }}
+          >
 
-              {/* Modal de suppression */}
-                <Modal
-                  open={openDeleteModal && selectedAdminId === company.id}
-                  onOpenChange={(isOpen) => {
-                    if (!isOpen) {
-                      setSelectedAdminId(null);
-                      setOpenDeleteModal(false);
-                    }
+            {/* Modal de suppression */}
+            <Modal
+              open={openDeleteModal && selectedAdminId === company.id}
+              onOpenChange={(isOpen) => {
+                if (!isOpen) {
+                  setSelectedAdminId(null);
+                  setOpenDeleteModal(false);
+                }
+              }}
+              trigger={
+                <div
+                  onClick={() => {
+                    setSelectedAdminId(company.id);
+                    setOpenDeleteModal(true);
                   }}
-                  trigger={
-                    <div
+                >
+                  <Image
+                    alt="Supprimer"
+                    src={icons.trash}
+                    className="cursor-pointer responsive-icon"
+                  />
+                </div>
+              }
+              title="Supprimer une organisation"
+              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={() => {
-                        setSelectedAdminId(company.id);
-                        setOpenDeleteModal(true);
+                        setOpenDeleteModal(false);
                       }}
                     >
-                      <Image
-                        alt="Supprimer"
-                        src={icons.trash}
-                        className="cursor-pointer responsive-icon"
-                      />
-                    </div>
-                  }
-                  title="Supprimer une organisation"
-                  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={() => {
-                            setOpenDeleteModal(false);
-                          }}
-                        >
-                          Annuler
-                        </button>
-                        <button
-                    className="cta modal-cta danger"
-                    onClick={() => {
-                            deleteMutation.mutate(company.id);
-                          }}
-                        >
-                          Supprimer
-                        </button>
-                      </div>
-                    </div>
-                  }
-                />
-            </div>  
-          )
+                      Annuler
+                    </button>
+                    <button
+                      className="cta modal-cta danger"
+                      onClick={() => {
+                        deleteMutation.mutate(company.id);
+                      }}
+                    >
+                      Supprimer
+                    </button>
+                  </div>
+                </div>
+              }
+            />
+          </div>
+        )
       }
     }
   ]
@@ -291,8 +290,8 @@ export default function Organizations() {
           .map((row) => row.original.id);
 
         return (
-          <div className="grid grid-cols-1 lg:grid-cols-2 w-full space-y-3">
-            <div className="flex items-center space-x-3">
+          <div className="r-flex flex-wrap flex-lg-nowrap justify-content-between r-gap-16 w-100">
+            <div className="r-flex align-items-center items-center space-x-3 r-gap-16">
               <input
                 type="checkbox"
                 checked={
@@ -306,10 +305,10 @@ export default function Organizations() {
 
               <DropdownMenu.Root>
                 <DropdownMenu.Trigger asChild>
-                  <p className="cta cancel flex gap-2">
+                  <button className="cta cancel flex gap-2">
                     Sélectionner une action
                     <Image src={icons.arrowDown} alt="arrow down" />
-                  </p>
+                  </button >
                 </DropdownMenu.Trigger>
 
                 <DropdownMenu.Portal>
@@ -328,7 +327,7 @@ export default function Organizations() {
               </DropdownMenu.Root>
             </div>
 
-            <div className="flex justify-between lg:justify-end space-x-3">
+            <div className="r-flex-between w-100 justify-content-lg-end  r-gap-24">
               {/* Modal d'ajout */}
               <Modal
                 title="Ajouter une organisation"
@@ -386,13 +385,13 @@ export default function Organizations() {
                     schema={companySchema}
                     child={
                       <div className="flex justify-center">
-                      <button
-                        type="submit"
-                        disabled={createMutation.isPending}
-                        className={`${createMutation.isPending ? "btn-auth-loading" : "btn-auth"} cta modal-cta mt-4 cursor-pointer`}
-                      >
-                        {createMutation.isPending ? "En cours..." : "Ajouter une organisation"}
-                      </button>
+                        <button
+                          type="submit"
+                          disabled={createMutation.isPending}
+                          className={`${createMutation.isPending ? "btn-auth-loading" : "btn-auth"} cta modal-cta mt-4 cursor-pointer`}
+                        >
+                          {createMutation.isPending ? "En cours..." : "Ajouter une organisation"}
+                        </button>
                       </div>
                     }
                   />
diff --git a/src/app/globals.css b/src/app/globals.css
index e50f67b..e67c59e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -20,8 +20,9 @@
 [ data-theme="dark"] {
   --background: #11111a;
   --foreground: #eeeeff;
-  --cinder: #999; 
-  --bluegray: #eeeeff;
+  /* --secondary: #000; */
+  --cinder: #444; 
+  --bluegray: #246BFD55;
 }
 
 /* @media (prefers-color-scheme: dark) {
@@ -53,7 +54,8 @@ a{
   padding: 12px;
   border: 1px solid #d1d5dc;
   border-radius: 9999px;
-  color: black;
+  color: var(--foreground);
+  background-color: var(--background);
 
   &:focus {
     outline-color: none;
@@ -84,6 +86,12 @@ a{
   transform: translateY(-50%);
 }
 
+
+.btn-floating-right.select{
+  position: relative!important;
+  right: 0px!important;
+}
+
 .btn-floating-left {
   position: absolute;
   left: 8px;
@@ -221,7 +229,8 @@ input[type="checkbox"]:checked::before {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: var(--bluegray);
+  color: #04060F;
+  background-color: #E9F0FF;
   z-index: 99;
 }
 .splash-screen p{
diff --git a/src/assets/css/admin.css b/src/assets/css/admin.css
index 8f91ddb..2c72e31 100644
--- a/src/assets/css/admin.css
+++ b/src/assets/css/admin.css
@@ -181,11 +181,11 @@ th{
   padding: 8px;
   height: 40px!important;
 }
-th.bg-bluegray:first-of-type{
+th:first-of-type{
   border-top-left-radius: 8px!important;
 }
 
-th.bg-bluegray:last-of-type{
+th:last-of-type{
   border-top-right-radius: 8px!important;
 }
 
@@ -196,7 +196,7 @@ tbody tr {
   border-bottom: 1px solid var(--bluegray)!important;
 }
 tbody tr:hover{
-  background-color: var(--cinder);
+  background-color: var(--bluegray);
 }
 tbody tr td:first-child {
   padding-left: 16px;
@@ -249,6 +249,25 @@ a.disabled{
   opacity: 40%;
 }
 
+.home .pagination {
+  display: none!important;
+}
+
+
+.search-input{
+  padding: 10px 40px;
+  width: max-content;
+  width: 300px;
+  min-width: max-content;
+  border: 1px solid var(--secondary);
+  border-radius: 100px;
+}
+
+
+
+
+
+
 @media (max-width: 1070px) {
 
   .stats-container{
diff --git a/src/components/admin/sidebar.tsx b/src/components/admin/sidebar.tsx
index 92eaf75..102747c 100644
--- a/src/components/admin/sidebar.tsx
+++ b/src/components/admin/sidebar.tsx
@@ -39,7 +39,7 @@ export default function Sidebar() {
       <div onClick={() => handleMobileVisible()} className={`${mobileVisible ? "shifted" : ""} hamburger mobile`}>
         {/* <Image src={icons.logo} alt="Logo" className="scale-95" /> */}
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-list hamburger-icon" viewBox="0 0 16 16">
-          <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/>
+          <path fillRule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/>
         </svg>
       </div>
     </>
diff --git a/src/components/admin/theme.tsx b/src/components/admin/theme.tsx
index ea429c4..3438a95 100644
--- a/src/components/admin/theme.tsx
+++ b/src/components/admin/theme.tsx
@@ -8,7 +8,7 @@ export default function Theme() {
 
   useEffect(() => {
     if (typeof window !== "undefined") {
-      const savedTheme = localStorage.getItem("theme") || 
+      const savedTheme = localStorage.getItem("privateDocsTheme") || 
         (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
 
       setTheme(savedTheme);
@@ -19,7 +19,7 @@ export default function Theme() {
   const handleTheme = () => {
     const newTheme = theme === "light" ? "dark" : "light";
     setTheme(newTheme);
-    localStorage.setItem("theme", newTheme);
+    localStorage.setItem("privateDocsTheme", newTheme);
     document.body.setAttribute("data-theme", newTheme);
   };
 
@@ -30,7 +30,7 @@ export default function Theme() {
     const handleChange = (e: MediaQueryListEvent) => {
       const newTheme = e.matches ? "dark" : "light";
       setTheme(newTheme);
-      localStorage.setItem("theme", newTheme);
+      localStorage.setItem("privateDocsTheme", newTheme);
       document.body.setAttribute("data-theme", newTheme);
     };
 
diff --git a/src/components/floatingLabelInput.tsx b/src/components/floatingLabelInput.tsx
index 37499f8..7cf0603 100644
--- a/src/components/floatingLabelInput.tsx
+++ b/src/components/floatingLabelInput.tsx
@@ -40,7 +40,7 @@ export default function FloatingLabelInput({
                 <option key={index} value={option.value}>{option.label}</option>
               ))}
             </select>
-            {button && <div className="btn-floating-right">{button}</div>}
+            {button && <div className="btn-floating-right select">{button}</div>}
           </div>
         );
       
@@ -91,7 +91,7 @@ export default function FloatingLabelInput({
               <input
                 type="text"
                 placeholder={placeholder}
-                className="focus:ring-2 focus:ring-blue-500 outline-none px-10 py-2 w-full text-black border border-[#d1d5dc] rounded-full"
+                className="search-input focus:ring-2 focus:ring-blue-500 outline-none px-10 py-2 w-full ctext-black border border-[#d1d5dc] rounded-full"
                 name={name}
                 defaultValue={defaultValue}
                 onChange={handleChange}
diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
index 7c15b62..6448749 100644
--- a/src/components/table/table.tsx
+++ b/src/components/table/table.tsx
@@ -102,7 +102,7 @@ export default function Table<TData, TValue>({
     <div className="w-full">
       {render()}
 
-      <div className="home-table rounded-top">
+      <div className="rounded-top">
         <div className="overflow-x-auto">
           <table className="w-100 overflow-x-auto rounded-1c ">
             <thead className="table-head bg-bluegray">
@@ -170,7 +170,7 @@ export default function Table<TData, TValue>({
         </div>
       </div>
 
-      <div className="r-flex-center justify-content-end r-gap-2 py-4">
+      <div className="pagination 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()}
@@ -197,7 +197,7 @@ export default function Table<TData, TValue>({
         </div>
 
         <button
-          className="w-9 h-9 hover:bg-gray-300 cursor-pointer hover:text-black px-3 py-1 rounded"
+          className="w-9 h-9 px-3 py-1 rounded"
           onClick={() => table.nextPage()}
           disabled={!table.getCanNextPage()}
         >