From 3eb0ee06fbd945bc801a9fd53b686baccdfb075f Mon Sep 17 00:00:00 2001 From: Laux Dev <2201104208@student.buksu.edu.ph> Date: Tue, 3 Mar 2026 09:53:57 +0800 Subject: [PATCH 1/2] Fixed top header to more dynamic --- frontend/src/app/agents/[agentsId]/page.jsx | 1 + frontend/src/app/agents/add/page.jsx | 1 + frontend/src/app/agents/page.jsx | 6 +- .../buttons/primarybutton/PrimaryButton.jsx | 4 +- .../buttons/primarybutton/styles.module.css | 8 +- frontend/src/app/components/icons/edit.jsx | 33 ++++++ .../app/components/icons/outlineDownload.jsx | 26 +++++ frontend/src/app/components/icons/restart.jsx | 26 +++++ frontend/src/app/components/icons/update.jsx | 35 ++++++ .../app/components/topHeader/TopHeader.jsx | 100 +++++++++++++----- .../components/topHeader/styles.module.css | 4 +- frontend/src/app/credentials/add/page.jsx | 1 + frontend/src/app/credentials/page.jsx | 6 +- frontend/src/app/organization/page.jsx | 6 +- frontend/src/app/projects/page.jsx | 6 +- .../app/projects/view/[servicesId]/page.jsx | 1 + .../projects/view/add-from-scratch/page.jsx | 1 + frontend/src/app/projects/view/page.jsx | 7 ++ frontend/src/app/roles/[rolesId]/page.jsx | 7 +- frontend/src/app/roles/add/page.jsx | 1 + frontend/src/app/roles/page.jsx | 6 +- frontend/src/app/users/[usersId]/page.jsx | 7 +- frontend/src/app/users/add/page.jsx | 1 + frontend/src/app/users/page.jsx | 7 +- 24 files changed, 260 insertions(+), 41 deletions(-) create mode 100644 frontend/src/app/components/icons/edit.jsx create mode 100644 frontend/src/app/components/icons/outlineDownload.jsx create mode 100644 frontend/src/app/components/icons/restart.jsx create mode 100644 frontend/src/app/components/icons/update.jsx diff --git a/frontend/src/app/agents/[agentsId]/page.jsx b/frontend/src/app/agents/[agentsId]/page.jsx index 072c370..f930854 100644 --- a/frontend/src/app/agents/[agentsId]/page.jsx +++ b/frontend/src/app/agents/[agentsId]/page.jsx @@ -23,6 +23,7 @@ const Page = () => { cancelButtonText="Cancel" topbarTitle="Update Agent" state="add" + requiredButtons={["update", "title"]} /> {/* Create agent Container */}
diff --git a/frontend/src/app/agents/add/page.jsx b/frontend/src/app/agents/add/page.jsx index 55c0a0a..2e181be 100644 --- a/frontend/src/app/agents/add/page.jsx +++ b/frontend/src/app/agents/add/page.jsx @@ -23,6 +23,7 @@ const Page = () => { cancelButtonText="Cancel" topbarTitle="Create New Agent" state="add" + requiredButtons={["title", "save"]} /> {/* Create agent Container */}
diff --git a/frontend/src/app/agents/page.jsx b/frontend/src/app/agents/page.jsx index 7ff6eb7..f27f0bd 100644 --- a/frontend/src/app/agents/page.jsx +++ b/frontend/src/app/agents/page.jsx @@ -99,7 +99,11 @@ const AgentsPage = () => {
- +
diff --git a/frontend/src/app/components/buttons/primarybutton/PrimaryButton.jsx b/frontend/src/app/components/buttons/primarybutton/PrimaryButton.jsx index 25e077b..4aa1e3e 100644 --- a/frontend/src/app/components/buttons/primarybutton/PrimaryButton.jsx +++ b/frontend/src/app/components/buttons/primarybutton/PrimaryButton.jsx @@ -4,8 +4,8 @@ import AddIcon from "../../icons/add"; const PrimaryButton = (props) => { return ( ); }; diff --git a/frontend/src/app/components/buttons/primarybutton/styles.module.css b/frontend/src/app/components/buttons/primarybutton/styles.module.css index 6285de4..6f004fc 100644 --- a/frontend/src/app/components/buttons/primarybutton/styles.module.css +++ b/frontend/src/app/components/buttons/primarybutton/styles.module.css @@ -1,14 +1,14 @@ .button { display: flex; - padding: 8px 24px; + padding: 7px 15px; justify-content: center; align-items: center; - gap: 8px; - font-family: inter; + gap: 10px; + border-radius: 6px; border-radius: 6px; border: 0.5px solid #8187ff; background: rgba(83, 89, 242, 0.25); - color: #fff; + color: white; font-size: 16px; font-style: normal; font-weight: 500; diff --git a/frontend/src/app/components/icons/edit.jsx b/frontend/src/app/components/icons/edit.jsx new file mode 100644 index 0000000..80b7d78 --- /dev/null +++ b/frontend/src/app/components/icons/edit.jsx @@ -0,0 +1,33 @@ +const EditIcon = ({ width = 20, height = 20, color = "white", ...props }) => { + return ( + + + + + + ); +}; + +export default EditIcon; diff --git a/frontend/src/app/components/icons/outlineDownload.jsx b/frontend/src/app/components/icons/outlineDownload.jsx new file mode 100644 index 0000000..e94d17b --- /dev/null +++ b/frontend/src/app/components/icons/outlineDownload.jsx @@ -0,0 +1,26 @@ +const OutlineDownloadIcon = ({ + width = 24, + height = 24, + color = "#D2D3E0", + ...props +}) => { + return ( + + + + ); +}; + +export default OutlineDownloadIcon; diff --git a/frontend/src/app/components/icons/restart.jsx b/frontend/src/app/components/icons/restart.jsx new file mode 100644 index 0000000..4972a4e --- /dev/null +++ b/frontend/src/app/components/icons/restart.jsx @@ -0,0 +1,26 @@ +const RestartIcon = ({ + width = 24, + height = 24, + color = "#D2D3E0", + ...props +}) => { + return ( + + + + ); +}; + +export default RestartIcon; diff --git a/frontend/src/app/components/icons/update.jsx b/frontend/src/app/components/icons/update.jsx new file mode 100644 index 0000000..a52821c --- /dev/null +++ b/frontend/src/app/components/icons/update.jsx @@ -0,0 +1,35 @@ +const UpdateIcon = ({ + width = 20, + height = 20, + color = "white", + strokeWidth = 1.5, + ...props +}) => { + return ( + + + + + ); +}; + +export default UpdateIcon; diff --git a/frontend/src/app/components/topHeader/TopHeader.jsx b/frontend/src/app/components/topHeader/TopHeader.jsx index 1db9e0b..e098566 100644 --- a/frontend/src/app/components/topHeader/TopHeader.jsx +++ b/frontend/src/app/components/topHeader/TopHeader.jsx @@ -13,6 +13,12 @@ import RobotIcon from "../icons/robot"; import KeyIcon from "../icons/key"; import ManageEnvIcon from "../icons/manageEnv"; import Alert from "../alerts/Alert"; +import DownloadIcon from "../icons/download"; +import OutlineDownloadIcon from "../icons/outlineDownload"; +import RestartIcon from "../icons/restart"; +import PrimaryButton from "../buttons/primarybutton/PrimaryButton"; +import EditIcon from "../icons/edit"; +import UpdateIcon from "../icons/update"; const TopHeader = (props) => { const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false); @@ -28,9 +34,7 @@ const TopHeader = (props) => { {triggerAlert && }
- {((pathName.includes("/view") && props.state === "view") || - params.usersId || - params.rolesId) && ( + {props.requiredButtons.includes("back") && (
router.back()}>
@@ -38,35 +42,39 @@ const TopHeader = (props) => {

{props.topbarTitle}

- {(pathName === "/projects/view" || !props.state) && ( + {props.requiredButtons.includes("search") && (
)} - {pathName === "/credentials" ? ( + {props.requiredButtons.includes("env") && (

Manage Env. Key

- ) : ( - "" )} - {pathName === "/projects/view" && ( -
} + text={props.buttonText} onClick={() => props.trigger(!props.triggerState)} - > - -

{props.buttonText}

-
+ /> )} - {!props.state && ( -
- -

{props.buttonText}

-
+ {props.requiredButtons.includes("edit") && ( + } + text="Edit" + onClick={() => props.trigger(!props.triggerState)} + /> )} - {props.state === "add" ? ( + {props.requiredButtons.includes("add") && ( + } + text={props.buttonText} + onClick={handleNavigateToAdd} + /> + )} + {props.requiredButtons.includes("save") && ( <>
{

{props.cancelButtonText}

- ) : ( - "" )} - {/* Projects 3 dots menu */} - {pathName === "/projects/view" && ( + {props.requiredButtons.includes("update") && ( + <> + } + text="Update" + /> +
router.back()} + > +

{props.cancelButtonText}

+
+ + )} + {props?.requiredButtons?.includes("services-drop-down") && (
setTriggerDropDownMenu(!triggerDropDownMenu)} @@ -124,6 +143,39 @@ const TopHeader = (props) => { )}
)} + + {props.requiredButtons.includes("download") && ( +
setTriggerDropDownMenu(!triggerDropDownMenu)} + > +
+ +
+ {triggerDropDownMenu && ( +
+
+
+ +

Download Compose

+
+
+
+
+ +

Download Config

+
+
+
+
+ +

Restart

+
+
+
+ )} +
+ )}
diff --git a/frontend/src/app/components/topHeader/styles.module.css b/frontend/src/app/components/topHeader/styles.module.css index ffdcd7b..07d0f2b 100644 --- a/frontend/src/app/components/topHeader/styles.module.css +++ b/frontend/src/app/components/topHeader/styles.module.css @@ -63,6 +63,7 @@ border-radius: 6px; border: 0.5px solid #8187ff; background: rgba(83, 89, 242, 0.25); + color: white; cursor: pointer; } .button:hover { @@ -126,7 +127,7 @@ } .dotMenu { display: flex; - padding: 8px; + padding: 7px; align-items: center; gap: 12px; border-radius: 6px; @@ -167,7 +168,6 @@ .dropDown > div:hover { border-radius: 4px; background: #3c4159; - background: color(display-p3 0.2392 0.2549 0.3412); color: white; } .dropDown > div:hover p { diff --git a/frontend/src/app/credentials/add/page.jsx b/frontend/src/app/credentials/add/page.jsx index 4d76d97..1ac4d3b 100644 --- a/frontend/src/app/credentials/add/page.jsx +++ b/frontend/src/app/credentials/add/page.jsx @@ -38,6 +38,7 @@ const Page = () => { cancelButtonText="Cancel" topbarTitle="Create Credential" state="add" + requiredButtons={["title", "save"]} /> {/* Create Crediantial Container */}
diff --git a/frontend/src/app/credentials/page.jsx b/frontend/src/app/credentials/page.jsx index 15558e5..ab7bc33 100644 --- a/frontend/src/app/credentials/page.jsx +++ b/frontend/src/app/credentials/page.jsx @@ -60,7 +60,11 @@ const CredentialsPage = () => {
- +
diff --git a/frontend/src/app/organization/page.jsx b/frontend/src/app/organization/page.jsx index b5e3367..2affdad 100644 --- a/frontend/src/app/organization/page.jsx +++ b/frontend/src/app/organization/page.jsx @@ -58,7 +58,11 @@ const OrganizationPage = () => {
- +
diff --git a/frontend/src/app/projects/page.jsx b/frontend/src/app/projects/page.jsx index 79484d3..f6fd662 100644 --- a/frontend/src/app/projects/page.jsx +++ b/frontend/src/app/projects/page.jsx @@ -171,7 +171,11 @@ const ProjectsPage = () => {
- +
diff --git a/frontend/src/app/projects/view/[servicesId]/page.jsx b/frontend/src/app/projects/view/[servicesId]/page.jsx index 809b5ab..07f46d2 100644 --- a/frontend/src/app/projects/view/[servicesId]/page.jsx +++ b/frontend/src/app/projects/view/[servicesId]/page.jsx @@ -42,6 +42,7 @@ const AddServices = () => { cancelButtonText="Cancel" state="view" topbarTitle="View Services" + requiredButtons={["back", "title", "edit", "download"]} />
diff --git a/frontend/src/app/projects/view/add-from-scratch/page.jsx b/frontend/src/app/projects/view/add-from-scratch/page.jsx index 83355f2..ad9d51e 100644 --- a/frontend/src/app/projects/view/add-from-scratch/page.jsx +++ b/frontend/src/app/projects/view/add-from-scratch/page.jsx @@ -34,6 +34,7 @@ const AddServices = () => { cancelButtonText="Cancel" state="add" topbarTitle="Create New Services" + requiredButtons={["title", "save"]} />
diff --git a/frontend/src/app/projects/view/page.jsx b/frontend/src/app/projects/view/page.jsx index 871e0d8..2587121 100644 --- a/frontend/src/app/projects/view/page.jsx +++ b/frontend/src/app/projects/view/page.jsx @@ -99,6 +99,13 @@ const AddProject = () => { topbarTitle="Services" trigger={setTriggerAddServicesModal} triggerState={triggerAddServicesModal} + requiredButtons={[ + "title", + "back", + "add-services", + "search", + "services-drop-down", + ]} />
diff --git a/frontend/src/app/roles/[rolesId]/page.jsx b/frontend/src/app/roles/[rolesId]/page.jsx index 2ee9a55..892ef68 100644 --- a/frontend/src/app/roles/[rolesId]/page.jsx +++ b/frontend/src/app/roles/[rolesId]/page.jsx @@ -25,7 +25,12 @@ const page = () => {
- +
{/* Input fields Container */}
diff --git a/frontend/src/app/roles/add/page.jsx b/frontend/src/app/roles/add/page.jsx index b6aaf95..27e5530 100644 --- a/frontend/src/app/roles/add/page.jsx +++ b/frontend/src/app/roles/add/page.jsx @@ -14,6 +14,7 @@ const page = () => { cancelButtonText="Cancel" topbarTitle="Add Role" state="add" + requiredButtons={["title", "save"]} />
{/* Input fields Container */} diff --git a/frontend/src/app/roles/page.jsx b/frontend/src/app/roles/page.jsx index 3a40686..6f40df1 100644 --- a/frontend/src/app/roles/page.jsx +++ b/frontend/src/app/roles/page.jsx @@ -49,7 +49,11 @@ const RolesPage = () => {
- + {/* Users Table */}
diff --git a/frontend/src/app/users/[usersId]/page.jsx b/frontend/src/app/users/[usersId]/page.jsx index e02e17c..72f1a51 100644 --- a/frontend/src/app/users/[usersId]/page.jsx +++ b/frontend/src/app/users/[usersId]/page.jsx @@ -28,7 +28,12 @@ const Page = () => {
- +
{/* Input fields Container */}
diff --git a/frontend/src/app/users/add/page.jsx b/frontend/src/app/users/add/page.jsx index e3b27b6..9549814 100644 --- a/frontend/src/app/users/add/page.jsx +++ b/frontend/src/app/users/add/page.jsx @@ -14,6 +14,7 @@ const page = () => { cancelButtonText="Cancel" topbarTitle="Add User" state="add" + requiredButtons={["title", "save"]} />
{/* Input fields Container */} diff --git a/frontend/src/app/users/page.jsx b/frontend/src/app/users/page.jsx index 1aa6756..a1ac40f 100644 --- a/frontend/src/app/users/page.jsx +++ b/frontend/src/app/users/page.jsx @@ -36,8 +36,11 @@ const UsersPage = () => {
- - {/* Users Table */} +
From c16c6f87279886e3ce3576ca05051ea30624bd15 Mon Sep 17 00:00:00 2001 From: Laux Dev <2201104208@student.buksu.edu.ph> Date: Tue, 3 Mar 2026 09:57:46 +0800 Subject: [PATCH 2/2] fixed --- frontend/src/app/projects/add/page.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/app/projects/add/page.jsx b/frontend/src/app/projects/add/page.jsx index d691efc..0d3e2e8 100644 --- a/frontend/src/app/projects/add/page.jsx +++ b/frontend/src/app/projects/add/page.jsx @@ -16,6 +16,7 @@ const AddProject = () => { cancelButtonText="Cancel" state="add" topbarTitle="Create New Project" + requiredButtons={["title", "save"]} />