From 48cf9a32bcd5971950cccec6a7250e2975ea45a6 Mon Sep 17 00:00:00 2001
From: sigmaBoei <benzzbarquilla@gmail.com>
Date: Wed, 25 Feb 2026 16:32:43 +0800
Subject: [PATCH] continued profile dropdown

---
 .../header/components/HeaderDetails.jsx       | 25 ++++++++-----
 .../header/components/Profile.module.css      | 37 +++++++++++++++++++
 frontend/src/app/roles/page.jsx               | 10 ++---
 3 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app/components/header/components/HeaderDetails.jsx b/frontend/src/app/components/header/components/HeaderDetails.jsx
index 18f7347..154dbb1 100644
--- a/frontend/src/app/components/header/components/HeaderDetails.jsx
+++ b/frontend/src/app/components/header/components/HeaderDetails.jsx
@@ -13,7 +13,8 @@ const HeaderDetails = () => {
     { name: "Organization Y" },
     { name: "Organization Z" },
   ];
-  const [open, setOpen] = useState(false);
+  const [openOrgDropdown, setOpenOrgDropdown] = useState(false);
+  const [openProfileDropdown, setOpenProfileDropdown] = useState(false);
   const [selectedOrg, setSelectedOrg] = useState(null);
 
   const handleOrgSelect = (index) => {
@@ -31,7 +32,7 @@ const HeaderDetails = () => {
             <p>Organization</p>
             <div className={orgStyles.dropdownContainer}>
               {/* Dropdown Menu*/}
-              {open && (
+              {openOrgDropdown && (
                 <div className={orgStyles.dropdown}>
                   {/* Organization Header and Search  */}
                   <div className={orgStyles.orgSearchContainer}>
@@ -160,7 +161,7 @@ const HeaderDetails = () => {
               {/* Button */}
               <div
                 className={orgStyles.dropdownBtn}
-                onClick={() => setOpen(!open)}
+                onClick={() => setOpenOrgDropdown(!openOrgDropdown)}
               >
                 <p>Project Moonshot Inc.</p>
                 <div>
@@ -186,7 +187,10 @@ const HeaderDetails = () => {
       </div>
 
       {/* Profile Section */}
-      <div className={profileStyles.profileContainer}>
+      <div
+        className={profileStyles.profileContainer}
+        onClick={() => setOpenProfileDropdown(!openProfileDropdown)}
+      >
         {/* Profile */}
         <div className={profileStyles.profileBadge}>
           {/* Username and Role*/}
@@ -213,12 +217,15 @@ const HeaderDetails = () => {
           </div>
         </div>
 
-        {/* do later */}
         {/* Dropdown */}
-        <div className={profileStyles.dropdownContainer}>
-          <div></div>
-          <div></div>
-        </div>
+        {openProfileDropdown && (
+          <div className={profileStyles.dropdownContainer}>
+            {/* Settings */}
+            <div className={profileStyles.settingsBtn}></div>
+            {/* Logout */}
+            <div className={profileStyles}></div>
+          </div>
+        )}
       </div>
     </>
   );
diff --git a/frontend/src/app/components/header/components/Profile.module.css b/frontend/src/app/components/header/components/Profile.module.css
index ac83eb6..da28004 100644
--- a/frontend/src/app/components/header/components/Profile.module.css
+++ b/frontend/src/app/components/header/components/Profile.module.css
@@ -4,6 +4,8 @@
   height: 44px;
   flex-direction: column;
   align-items: flex-end;
+  cursor: pointer;
+  position: relative;
 }
 .profileBadge {
   display: flex;
@@ -68,3 +70,38 @@
   border-radius: 32px;
   background: url(/profile/PROFILE.svg) lightgray 50% / cover no-repeat;
 }
+
+.dropdownContainer {
+  display: flex;
+  padding: 6px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  align-self: stretch;
+  border-radius: 6px;
+  background: #2d3144;
+  background: color(display-p3 0.1787 0.1913 0.2605);
+  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
+  box-shadow: 0 2px 15px 0 color(display-p3 0 0 0 / 0.25);
+  cursor: pointer;
+  position: absolute;
+  top: 100%;
+  margin-top: 2px;
+}
+
+.settingsBtn {
+  display: flex;
+  padding: 8px 12px;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 4px;
+}
+.logoutBtn {
+  display: flex;
+  padding: 8px 12px;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 4px;
+}
diff --git a/frontend/src/app/roles/page.jsx b/frontend/src/app/roles/page.jsx
index 8a1e626..e93ac5c 100644
--- a/frontend/src/app/roles/page.jsx
+++ b/frontend/src/app/roles/page.jsx
@@ -6,27 +6,27 @@ import styles from "./styles.module.css";
 const RolesPage = () => {
   const sampleData = [
     {
-      name: "organizatio-owner",
+      name: "organization-owner",
       orgId: "67160a5ae69144ff19aafb86",
       permissions: "35 Permissions",
     },
     {
-      name: "organizatio-owner",
+      name: "organization-owner",
       orgId: "67160a5ae69144ff19aafb86",
       permissions: "35 Permissions",
     },
     {
-      name: "organizatio-owner",
+      name: "organization-owner",
       orgId: "67160a5ae69144ff19aafb86",
       permissions: "35 Permissions",
     },
     {
-      name: "organizatio-owner",
+      name: "organization-owner",
       orgId: "67160a5ae69144ff19aafb86",
       permissions: "35 Permissions",
     },
     {
-      name: "organizatio-owner",
+      name: "organization-owner",
       orgId: "67160a5ae69144ff19aafb86",
       permissions: "35 Permissions",
     },