From 8b2d41073861d2451ae931e216502246b8b910a5 Mon Sep 17 00:00:00 2001
From: sigmaBoei <benzzbarquilla@gmail.com>
Date: Tue, 24 Feb 2026 20:31:19 +0800
Subject: [PATCH] added comments

---
 frontend/src/app/components/header/Header.jsx | 25 +++++++++----------
 .../app/components/header/styles.module.css   |  8 +++---
 2 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/frontend/src/app/components/header/Header.jsx b/frontend/src/app/components/header/Header.jsx
index 203bbd4..4bc327e 100644
--- a/frontend/src/app/components/header/Header.jsx
+++ b/frontend/src/app/components/header/Header.jsx
@@ -12,28 +12,27 @@ const Header = () => {
     { name: "Organization Z" },
   ];
   const [open, setOpen] = useState(false);
-  const [orgId, setorgId] = useState(null);
+  const [selectedOrg, setSelectedOrg] = useState(null);
 
-  const activeHandler = (index) => {
-    setorgId(index);
+  const handleOrgSelect = (index) => {
+    setSelectedOrg(index);
   };
 
   return (
-    // Main Container
     <div className={styles.mainContainer}>
-      {/* Organization */}
+      {/* Organization and Dropdown Section*/}
       <div className={styles.organizationContainer}>
         <div className={styles.orgContainer}>
           {/* Logo */}
-          <div className={styles.logo}></div>
+          <div className={styles.orgLogo}></div>
           <div className={styles.orgName}>
             <p>Organization</p>
             <div className={styles.dropdownContainer}>
-              {/* Dropdown */}
+              {/* Dropdown Menu*/}
               {open && (
                 <div className={styles.dropdown}>
                   {/* Organization Header and Search  */}
-                  <div className={styles.ohsContainer}>
+                  <div className={styles.orgSearchContainer}>
                     {/* Header */}
                     <div className={styles.createBtnContainer}>
                       <p>Organization</p>
@@ -78,8 +77,8 @@ const Header = () => {
                       </div>
                     </div>
                     {/* Search */}
-                    <div className={styles.searchBtnContainer}>
-                      <div className={styles.searchInputGroup}>
+                    <div className={styles.srchInputContainer}>
+                      <div className={styles.srchInputGroup}>
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
                           width="18"
@@ -127,10 +126,10 @@ const Header = () => {
                         <div
                           className={styles.orgList}
                           key={index}
-                          onClick={() => activeHandler(index)}
+                          onClick={() => handleOrgSelect(index)}
                         >
                           <div
-                            className={`${styles.iconTxt} ${index === orgId ? styles.active : ""}`}
+                            className={`${styles.iconTxt} ${index === selectedOrg ? styles.active : ""}`}
                           >
                             <svg
                               xmlns="http://www.w3.org/2000/svg"
@@ -184,7 +183,7 @@ const Header = () => {
         </div>
       </div>
 
-      {/* Profile */}
+      {/* Profile Section */}
       <div className={styles.profileContainer}></div>
     </div>
   );
diff --git a/frontend/src/app/components/header/styles.module.css b/frontend/src/app/components/header/styles.module.css
index ddb0de7..b120d3b 100644
--- a/frontend/src/app/components/header/styles.module.css
+++ b/frontend/src/app/components/header/styles.module.css
@@ -19,7 +19,7 @@
   gap: 16px;
   border-radius: 4px;
 }
-.logo {
+.orgLogo {
   width: 38px;
   height: 38px;
   aspect-ratio: 1/1;
@@ -103,7 +103,7 @@
   left: 0;
 }
 
-.ohsContainer {
+.orgSearchContainer {
   display: flex;
   width: 318px;
   flex-direction: column;
@@ -163,13 +163,13 @@
   stroke: color(display-p3 0.6127 0.6282 1);
 }
 
-.searchBtnContainer {
+.srchInputContainer {
   display: flex;
   align-items: center;
   gap: 10px;
   align-self: stretch;
 }
-.searchInputGroup {
+.srchInputGroup {
   display: flex;
   padding: 8px 12px;
   align-items: center;