From 205e1d7078ff542b16ad92f06580e02eb2276b8f Mon Sep 17 00:00:00 2001
From: Laux Dev <2201104208@student.buksu.edu.ph>
Date: Wed, 25 Feb 2026 08:12:05 +0800
Subject: [PATCH] Added conditioned button

---
 .../app/components/topHeader/TopHeader.jsx    | 48 +++++++++++++++++++
 .../components/topHeader/styles.module.css    | 29 +++++++++++
 frontend/src/app/organization/page.jsx        |  4 +-
 3 files changed, 78 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/topHeader/TopHeader.jsx b/frontend/src/app/components/topHeader/TopHeader.jsx
index 7c0b01d..df32d71 100644
--- a/frontend/src/app/components/topHeader/TopHeader.jsx
+++ b/frontend/src/app/components/topHeader/TopHeader.jsx
@@ -1,6 +1,11 @@
+"use client";
 import React from "react";
 import styles from "./styles.module.css";
+import { usePathname } from "next/navigation";
+
 const TopHeader = (props) => {
+  const pathName = usePathname();
+  console.log(pathName);
   return (
     <div className={styles.container}>
       <div className={styles.title}>
@@ -24,6 +29,49 @@ const TopHeader = (props) => {
             />
           </svg>
         </div>
+        {pathName === "/credentials" ? (
+          <div className={styles.mngEnvKeyButton}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width={20}
+              height={20}
+              viewBox="0 0 20 20"
+              fill="none"
+            >
+              <path
+                d="M10.3723 16.8874C9.70785 17.0716 8.90927 16.7502 8.70885 15.9223C8.65958 15.719 8.563 15.5301 8.42695 15.3712C8.29091 15.2122 8.11925 15.0876 7.92596 15.0075C7.73266 14.9274 7.52319 14.8941 7.31458 14.9103C7.10598 14.9265 6.90414 14.9917 6.7255 15.1006C5.5361 15.8252 4.17404 14.4639 4.89862 13.2737C5.00739 13.0952 5.07249 12.8934 5.08862 12.685C5.10476 12.4765 5.07148 12.2672 4.99149 12.074C4.9115 11.8808 4.78705 11.7093 4.62827 11.5732C4.46949 11.4372 4.28085 11.3406 4.07769 11.2911C2.7241 10.9628 2.7241 9.03723 4.07769 8.70885C4.28103 8.65958 4.46987 8.563 4.62883 8.42695C4.78779 8.29091 4.91239 8.11925 4.99247 7.92596C5.07255 7.73266 5.10586 7.52319 5.08969 7.31458C5.07352 7.10598 5.00832 6.90414 4.8994 6.7255C4.17481 5.5361 5.5361 4.17404 6.72627 4.89862C7.4971 5.36729 8.4961 4.95258 8.70885 4.07769C9.03723 2.7241 10.9628 2.7241 11.2911 4.07769C11.3404 4.28103 11.437 4.46987 11.573 4.62883C11.7091 4.78779 11.8807 4.91239 12.074 4.99247C12.2673 5.07255 12.4768 5.10586 12.6854 5.08969C12.894 5.07352 13.0959 5.00832 13.2745 4.8994C14.4639 4.17481 15.826 5.5361 15.1014 6.72627C14.9926 6.90484 14.9275 7.10655 14.9114 7.31501C14.8952 7.52347 14.9285 7.7328 15.0085 7.92598C15.0885 8.11916 15.2129 8.29074 15.3717 8.42677C15.5305 8.5628 15.7191 8.65945 15.9223 8.70885C16.7548 8.91081 17.0755 9.7171 16.8835 10.3839"
+                stroke="#8287FF"
+                strokeWidth={1.5}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M13.084 15.3955H17.709"
+                stroke="#8287FF"
+                strokeWidth={1.5}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M15.3965 13.083V17.708"
+                stroke="#8287FF"
+                strokeWidth={1.5}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M7.6875 10C7.6875 10.6133 7.93114 11.2015 8.36482 11.6352C8.79849 12.0689 9.38669 12.3125 10 12.3125C10.6133 12.3125 11.2015 12.0689 11.6352 11.6352C12.0689 11.2015 12.3125 10.6133 12.3125 10C12.3125 9.38669 12.0689 8.79849 11.6352 8.36482C11.2015 7.93114 10.6133 7.6875 10 7.6875C9.38669 7.6875 8.79849 7.93114 8.36482 8.36482C7.93114 8.79849 7.6875 9.38669 7.6875 10Z"
+                stroke="#8287FF"
+                strokeWidth={1.5}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+            <p>Manage Env. Key</p>
+          </div>
+        ) : (
+          ""
+        )}
         <div className={styles.button}>
           <svg
             xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/src/app/components/topHeader/styles.module.css b/frontend/src/app/components/topHeader/styles.module.css
index eb85992..e36243d 100644
--- a/frontend/src/app/components/topHeader/styles.module.css
+++ b/frontend/src/app/components/topHeader/styles.module.css
@@ -46,3 +46,32 @@
 .button:hover {
   background: linear-gradient(180deg, #5359f2 0%, #2e3288 100%);
 }
+.mngEnvKeyButton {
+  display: inline-flex;
+  padding: 8px 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 6px;
+  border-radius: 6px;
+  border: 1px solid #5358f200;
+}
+.mngEnvKeyButton > p {
+  color: #8187ff;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  cursor: pointer;
+}
+.mngEnvKeyButton:hover p {
+  color: white;
+}
+.mngEnvKeyButton:hover {
+  border: 1px solid #5359f2;
+  background: linear-gradient(180deg, #5359f2 0%, #2e3288 100%);
+}
+.mngEnvKeyButton:hover path {
+  stroke: white;
+}
diff --git a/frontend/src/app/organization/page.jsx b/frontend/src/app/organization/page.jsx
index 6a4bb1e..798935d 100644
--- a/frontend/src/app/organization/page.jsx
+++ b/frontend/src/app/organization/page.jsx
@@ -59,9 +59,7 @@ const OrganizationPage = () => {
       dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
     },
   ];
-  const handleRowClick = (org) => {
-    console.log("Row clicked:", org);
-  };
+
   return (
     <div className={globalStyle.section}>
       <div className={globalStyle.mainContainer}>