From 62c438eed015d78684cff5cb4ecb3e31e9836d03 Mon Sep 17 00:00:00 2001
From: Laux Dev <2201104208@student.buksu.edu.ph>
Date: Tue, 3 Mar 2026 14:07:22 +0800
Subject: [PATCH] new component

---
 frontend/src/app/agents/page.jsx              | 67 ++-----------------
 .../components/actionButton/ActionButton.jsx  |  8 +++
 .../components/actionButton/styles.module.css | 21 ++++++
 frontend/src/app/credentials/page.jsx         |  5 +-
 .../src/app/credentials/styles.module.css     | 21 ------
 frontend/src/app/organization/page.jsx        |  5 +-
 frontend/src/app/projects/page.jsx            |  9 +--
 frontend/src/app/roles/page.jsx               |  9 +--
 frontend/src/app/users/page.jsx               |  9 +--
 9 files changed, 47 insertions(+), 107 deletions(-)
 create mode 100644 frontend/src/app/components/actionButton/ActionButton.jsx
 create mode 100644 frontend/src/app/components/actionButton/styles.module.css

diff --git a/frontend/src/app/agents/page.jsx b/frontend/src/app/agents/page.jsx
index f27f0bd..25891e7 100644
--- a/frontend/src/app/agents/page.jsx
+++ b/frontend/src/app/agents/page.jsx
@@ -5,6 +5,9 @@ import styles from "./styles.module.css";
 import TopHeader from "../components/topHeader/TopHeader";
 import globalStyle from "../globalStyle.module.css";
 import { useRouter } from "next/navigation";
+import ActionButton from "../components/actionButton/ActionButton";
+import DeleteIcon from "../components/icons/delete";
+import ViewIcon from "../components/icons/view";
 
 const AgentsPage = () => {
   const router = useRouter();
@@ -135,70 +138,10 @@ const AgentsPage = () => {
                       <td>
                         <div className={styles.actions}>
                           <div>
-                            <button className={styles.iconButton}>
-                              <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width={20}
-                                height={20}
-                                viewBox="0 0 20 20"
-                                fill="none"
-                              >
-                                <path
-                                  d="M8.40234 9.99957C8.40234 10.4232 8.57062 10.8294 8.87016 11.129C9.1697 11.4285 9.57596 11.5968 9.99957 11.5968C10.4232 11.5968 10.8294 11.4285 11.129 11.129C11.4285 10.8294 11.5968 10.4232 11.5968 9.99957C11.5968 9.57596 11.4285 9.1697 11.129 8.87016C10.8294 8.57062 10.4232 8.40234 9.99957 8.40234C9.57596 8.40234 9.1697 8.57062 8.87016 8.87016C8.57062 9.1697 8.40234 9.57596 8.40234 9.99957Z"
-                                  stroke="#969AF9"
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                />
-                                <path
-                                  d="M17.1875 9.99967C15.2708 13.1941 12.875 14.7913 10 14.7913C7.125 14.7913 4.72917 13.1941 2.8125 9.99967C4.72917 6.80523 7.125 5.20801 10 5.20801C12.875 5.20801 15.2708 6.80523 17.1875 9.99967Z"
-                                  stroke="#969AF9"
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                />
-                              </svg>
-                            </button>
+                            <ActionButton icon={<ViewIcon />} />
                           </div>
                           <div>
-                            <button className={styles.iconButton}>
-                              <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width={20}
-                                height={20}
-                                viewBox="0 0 20 20"
-                                fill="none"
-                              >
-                                <path
-                                  d="M3.61133 6.00684H16.3891"
-                                  stroke="#969AF9"
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                />
-                                <path
-                                  d="M8.40234 9.20117V13.9928"
-                                  stroke="#969AF9"
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                />
-                                <path
-                                  d="M11.5977 9.20117V13.9928"
-                                  stroke="#969AF9"
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                />
-                                <path
-                                  d="M4.41016 6.00684L5.20877 15.5902C5.20877 16.0138 5.37705 16.42 5.67658 16.7196C5.97612 17.0191 6.38238 17.1874 6.80599 17.1874H13.1949C13.6185 17.1874 14.0247 17.0191 14.3243 16.7196C14.6238 16.42 14.7921 16.0138 14.7921 15.5902L15.5907 6.00684"
-                                  stroke="#969AF9"
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                />
-                                <path
-                                  d="M7.60352 6.00694V3.61111C7.60352 3.39931 7.68765 3.19618 7.83742 3.04641C7.98719 2.89664 8.19032 2.8125 8.40213 2.8125H11.5966C11.8084 2.8125 12.0115 2.89664 12.1613 3.04641C12.311 3.19618 12.3952 3.39931 12.3952 3.61111V6.00694"
-                                  stroke="#969AF9"
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                />
-                              </svg>
-                            </button>
+                            <ActionButton icon={<DeleteIcon />} />
                           </div>
                         </div>
                       </td>
diff --git a/frontend/src/app/components/actionButton/ActionButton.jsx b/frontend/src/app/components/actionButton/ActionButton.jsx
new file mode 100644
index 0000000..15ce3ba
--- /dev/null
+++ b/frontend/src/app/components/actionButton/ActionButton.jsx
@@ -0,0 +1,8 @@
+import React from "react";
+import styles from "./styles.module.css";
+
+const ActionButton = ({ icon }) => {
+  return <button className={styles.iconButton}>{icon}</button>;
+};
+
+export default ActionButton;
diff --git a/frontend/src/app/components/actionButton/styles.module.css b/frontend/src/app/components/actionButton/styles.module.css
new file mode 100644
index 0000000..b5cdff5
--- /dev/null
+++ b/frontend/src/app/components/actionButton/styles.module.css
@@ -0,0 +1,21 @@
+.iconButton {
+  display: flex;
+  padding: 6px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  aspect-ratio: 1/1;
+  background-color: rgba(255, 255, 255, 0);
+  outline: none;
+  border: 1px solid #959aff00;
+  cursor: pointer;
+  border-radius: 50%;
+}
+.iconButton:hover {
+  border: 1px solid #959aff;
+  background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
+}
+.iconButton:hover path {
+  stroke: white;
+}
diff --git a/frontend/src/app/credentials/page.jsx b/frontend/src/app/credentials/page.jsx
index ab7bc33..e1b5fe5 100644
--- a/frontend/src/app/credentials/page.jsx
+++ b/frontend/src/app/credentials/page.jsx
@@ -4,6 +4,7 @@ import globalStyle from "../globalStyle.module.css";
 import styles from "./styles.module.css";
 import DeleteIcon from "../components/icons/delete";
 import SuccessToast from "../components/toast/success/successToast";
+import ActionButton from "../components/actionButton/ActionButton";
 const CredentialsPage = () => {
   const sampleData = [
     {
@@ -83,9 +84,7 @@ const CredentialsPage = () => {
                       <td>{org.organizationID}</td>
                       <td className={styles.actions}>
                         <div>
-                          <button className={styles.iconButton}>
-                            <DeleteIcon />
-                          </button>
+                          <ActionButton icon={<DeleteIcon />} />
                         </div>
                       </td>
                     </tr>
diff --git a/frontend/src/app/credentials/styles.module.css b/frontend/src/app/credentials/styles.module.css
index effa132..3e8b3ec 100644
--- a/frontend/src/app/credentials/styles.module.css
+++ b/frontend/src/app/credentials/styles.module.css
@@ -52,24 +52,3 @@
   font-weight: 500;
   line-height: normal;
 }
-.iconButton {
-  display: flex;
-  padding: 6px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-  aspect-ratio: 1/1;
-  background-color: rgba(255, 255, 255, 0);
-  outline: none;
-  border: 1px solid #959aff00;
-  cursor: pointer;
-  border-radius: 50%;
-}
-.iconButton:hover {
-  border: 1px solid #959aff;
-  background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
-}
-.iconButton:hover path {
-  stroke: white;
-}
diff --git a/frontend/src/app/organization/page.jsx b/frontend/src/app/organization/page.jsx
index 2affdad..a02a7bd 100644
--- a/frontend/src/app/organization/page.jsx
+++ b/frontend/src/app/organization/page.jsx
@@ -5,6 +5,7 @@ import TopHeader from "../components/topHeader/TopHeader";
 import globalStyle from "../globalStyle.module.css";
 import SuccessToast from "../components/toast/success/successToast";
 import DeleteIcon from "../components/icons/delete";
+import ActionButton from "../components/actionButton/ActionButton";
 
 const OrganizationPage = () => {
   const sampleData = [
@@ -81,9 +82,7 @@ const OrganizationPage = () => {
                       <td>{org.dateCreated}</td>
                       <td className={styles.actions}>
                         <div>
-                          <button className={styles.iconButton}>
-                            <DeleteIcon />
-                          </button>
+                          <ActionButton icon={<DeleteIcon />} />
                         </div>
                       </td>
                     </tr>
diff --git a/frontend/src/app/projects/page.jsx b/frontend/src/app/projects/page.jsx
index f6fd662..2929933 100644
--- a/frontend/src/app/projects/page.jsx
+++ b/frontend/src/app/projects/page.jsx
@@ -7,6 +7,7 @@ import { useRouter } from "next/navigation";
 import SuccessToast from "../components/toast/success/successToast";
 import DeleteIcon from "../components/icons/delete";
 import ViewIcon from "../components/icons/view";
+import ActionButton from "../components/actionButton/ActionButton";
 const ProjectsPage = () => {
   const router = useRouter();
   const sampleData = [
@@ -224,14 +225,10 @@ const ProjectsPage = () => {
                       <td>
                         <div className={styles.actions}>
                           <div>
-                            <button className={styles.iconButton}>
-                              <ViewIcon />
-                            </button>
+                            <ActionButton icon={<ViewIcon />} />
                           </div>
                           <div>
-                            <button className={styles.iconButton}>
-                              <DeleteIcon />
-                            </button>
+                            <ActionButton icon={<DeleteIcon />} />
                           </div>
                         </div>
                       </td>
diff --git a/frontend/src/app/roles/page.jsx b/frontend/src/app/roles/page.jsx
index 6f40df1..45d219e 100644
--- a/frontend/src/app/roles/page.jsx
+++ b/frontend/src/app/roles/page.jsx
@@ -8,6 +8,7 @@ import { useRouter } from "next/navigation";
 import ViewIcon from "../components/icons/view";
 import DeleteIcon from "../components/icons/delete";
 import SuccessToast from "../components/toast/success/successToast";
+import ActionButton from "../components/actionButton/ActionButton";
 
 const RolesPage = () => {
   const router = useRouter();
@@ -78,12 +79,8 @@ const RolesPage = () => {
                       <td>{role.permissions}</td>
                       <td>
                         <div className={styles.tableActions}>
-                          <button className={styles.viewBtn}>
-                            <ViewIcon />
-                          </button>
-                          <button className={styles.deleteBtn}>
-                            <DeleteIcon />
-                          </button>
+                          <ActionButton icon={<ViewIcon />} />
+                          <ActionButton icon={<DeleteIcon />} />
                         </div>
                       </td>
                     </tr>
diff --git a/frontend/src/app/users/page.jsx b/frontend/src/app/users/page.jsx
index a1ac40f..7df43a7 100644
--- a/frontend/src/app/users/page.jsx
+++ b/frontend/src/app/users/page.jsx
@@ -7,6 +7,7 @@ import { useRouter } from "next/navigation";
 import ViewIcon from "../components/icons/view";
 import DeleteIcon from "../components/icons/delete";
 import SuccessToast from "../components/toast/success/successToast";
+import ActionButton from "../components/actionButton/ActionButton";
 
 const UsersPage = () => {
   const router = useRouter();
@@ -63,12 +64,8 @@ const UsersPage = () => {
                       <td>{user.createdAt}</td>
                       <td>
                         <div className={styles.tableActions}>
-                          <button className={styles.viewBtn}>
-                            <ViewIcon />
-                          </button>
-                          <button className={styles.deleteBtn}>
-                            <DeleteIcon />
-                          </button>
+                          <ActionButton icon={<ViewIcon />} />
+                          <ActionButton icon={<DeleteIcon />} />
                         </div>
                       </td>
                     </tr>