From cf54a4a2e84d848ed9ceeff02adfad682e57a321 Mon Sep 17 00:00:00 2001
From: Laux Dev <2201104208@student.buksu.edu.ph>
Date: Wed, 25 Feb 2026 14:29:13 +0800
Subject: [PATCH] Add table for agents and credentials

---
 frontend/src/app/agents/page.jsx              | 185 ++++++++++++++++++
 frontend/src/app/agents/styles.module.css     |  95 +++++++++
 frontend/src/app/credentials/page.jsx         | 117 +++++++++++
 .../src/app/credentials/styles.module.css     |  69 +++++++
 .../app/organization/add/styles.module.css    |  12 +-
 frontend/src/app/organization/page.jsx        |   2 +-
 frontend/src/app/projects/page.jsx            |   3 +-
 frontend/src/app/projects/styles.module.css   |   2 +-
 8 files changed, 480 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/agents/page.jsx b/frontend/src/app/agents/page.jsx
index efc4c78..8ec2b62 100644
--- a/frontend/src/app/agents/page.jsx
+++ b/frontend/src/app/agents/page.jsx
@@ -3,11 +3,196 @@ import styles from "./styles.module.css";
 import TopHeader from "../components/topHeader/TopHeader";
 import globalStyle from "../globalStyle.module.css";
 const AgentsPage = () => {
+  const sampleData = [
+    {
+      name: "DOKS OneCB Dev",
+      endPoint: "http://100.64.1.9:6969",
+      type: "Tailscale",
+      proxyName: "doks-onecbdev-kube-apiserver-proxy",
+      dateCreated: "2/11/2026",
+    },
+    {
+      name: "DOKS OneCB Dev",
+      endPoint: "http://100.64.1.9:6969",
+      type: "Tailscale",
+      proxyName: "doks-onecbdev-kube-apiserver-proxy",
+      dateCreated: "2/11/2026",
+    },
+    {
+      name: "DOKS OneCB Dev",
+      endPoint: "http://100.64.1.9:6969",
+      type: "Tailscale",
+      proxyName: "doks-onecbdev-kube-apiserver-proxy",
+      dateCreated: "2/11/2026",
+    },
+    {
+      name: "DOKS OneCB Dev",
+      endPoint: "http://100.64.1.9:6969",
+      type: "Tailscale",
+      proxyName: "doks-onecbdev-kube-apiserver-proxy",
+      dateCreated: "2/11/2026",
+    },
+    {
+      name: "DOKS OneCB Dev",
+      endPoint: "http://100.64.1.9:6969",
+      type: "Tailscale",
+      proxyName: "doks-onecbdev-kube-apiserver-proxy",
+      dateCreated: "2/11/2026",
+    },
+    {
+      name: "DOKS OneCB Dev",
+      endPoint: "http://100.64.1.9:6969",
+      type: "Tailscale",
+      proxyName: "doks-onecbdev-kube-apiserver-proxy",
+      dateCreated: "2/11/2026",
+    },
+    {
+      name: "DOKS OneCB Dev",
+      endPoint: "http://100.64.1.9:6969",
+      type: "Tailscale",
+      proxyName: "doks-onecbdev-kube-apiserver-proxy",
+      dateCreated: "2/11/2026",
+    },
+    {
+      name: "DOKS OneCB Dev",
+      endPoint: "http://100.64.1.9:6969",
+      type: "Tailscale",
+      proxyName: "doks-onecbdev-kube-apiserver-proxy",
+      dateCreated: "2/11/2026",
+    },
+    {
+      name: "DOKS OneCB Dev",
+      endPoint: "http://100.64.1.9:6969",
+      type: "Tailscale",
+      proxyName: "doks-onecbdev-kube-apiserver-proxy",
+      dateCreated: "2/11/2026",
+    },
+    {
+      name: "DOKS OneCB Dev",
+      endPoint: "http://100.64.1.9:6969",
+      type: "Tailscale",
+      proxyName: "doks-onecbdev-kube-apiserver-proxy",
+      dateCreated: "2/11/2026",
+    },
+    {
+      name: "DOKS OneCB Dev",
+      endPoint: "http://100.64.1.9:6969",
+      type: "Tailscale",
+      proxyName: "doks-onecbdev-kube-apiserver-proxy",
+      dateCreated: "2/11/2026",
+    },
+    {
+      name: "DOKS OneCB Dev",
+      endPoint: "http://100.64.1.9:6969",
+      type: "Tailscale",
+      proxyName: "doks-onecbdev-kube-apiserver-proxy",
+      dateCreated: "2/11/2026",
+    },
+  ];
   return (
     <div className={globalStyle.section}>
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
           <TopHeader buttonText="Add Agents" topbarTitle="Agents" />
+          <div className={styles.tableContainer}>
+            <table className={styles.table}>
+              <thead>
+                <tr>
+                  <th width="25%">Name</th>
+                  <th>Endpoint</th>
+                  <th>Type</th>
+                  <th>Proxy Name</th>
+                  <th>Date Created</th>
+
+                  <th width="10%"></th>
+                </tr>
+              </thead>
+
+              <tbody>
+                {sampleData.map((org, index) => {
+                  return (
+                    <tr key={index}>
+                      <td>{org.name}</td>
+                      <td>{org.endPoint}</td>
+                      <td>
+                        <div className={styles.type}>{org.type}</div>
+                      </td>
+                      <td>{org.proxyName}</td>
+                      <td>{org.dateCreated}</td>
+                      <td 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>
+                        </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>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>
diff --git a/frontend/src/app/agents/styles.module.css b/frontend/src/app/agents/styles.module.css
index e69de29..bbad366 100644
--- a/frontend/src/app/agents/styles.module.css
+++ b/frontend/src/app/agents/styles.module.css
@@ -0,0 +1,95 @@
+.tableContainer {
+  width: 100%;
+}
+.tableContainer > table,
+.tableContainer > table > thead {
+  border-collapse: collapse;
+  border: none;
+  width: 100%;
+}
+.tableContainer {
+  height: calc(100vh - 170px);
+  overflow-y: auto;
+}
+
+.tableContainer > table > thead > tr > th,
+.tableContainer > table > tbody > tr > td {
+  padding: 12px 24px;
+  gap: 17px;
+  text-align: start;
+}
+
+.tableContainer > table > thead > tr {
+  border-bottom: 1px solid #212235;
+  background: #1c1d2b;
+}
+.tableContainer > table > tbody > tr > td {
+  color: #eeeffd;
+  font-family: Inter;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.type {
+  display: flex;
+  padding: 4px 0px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 6px;
+  border: 0.5px solid #5359f2;
+  background: rgba(83, 89, 242, 0.25);
+}
+.type > p {
+  color: #eeeffd;
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.tableContainer > table > tbody > tr {
+  border-bottom: 1px solid rgba(129, 135, 255, 0);
+  cursor: pointer;
+}
+.tableContainer > table > tbody > tr:hover {
+  border-bottom: 1px solid rgba(129, 135, 255, 0.25);
+  background: rgba(129, 135, 255, 0.05);
+}
+.tableContainer > table > thead > tr > th {
+  color: #85869b;
+  font-family: Inter;
+  font-size: 13px;
+  font-style: normal;
+  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;
+}
+.actions {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  gap: 12px;
+  align-self: stretch;
+}
diff --git a/frontend/src/app/credentials/page.jsx b/frontend/src/app/credentials/page.jsx
index 3880ad8..05954be 100644
--- a/frontend/src/app/credentials/page.jsx
+++ b/frontend/src/app/credentials/page.jsx
@@ -1,12 +1,129 @@
 import React from "react";
 import TopHeader from "../components/topHeader/TopHeader";
 import globalStyle from "../globalStyle.module.css";
+import styles from "./styles.module.css";
 const CredentialsPage = () => {
+  const sampleData = [
+    {
+      name: "mongo tls ca crt",
+      organizationID: "67160a5ae69144ff19aafb86",
+    },
+    {
+      name: "mongo tls ca crt",
+      organizationID: "67160a5ae69144ff19aafb86",
+    },
+    {
+      name: "mongo tls ca crt",
+      organizationID: "67160a5ae69144ff19aafb86",
+    },
+    {
+      name: "mongo tls ca crt",
+      organizationID: "67160a5ae69144ff19aafb86",
+    },
+    {
+      name: "mongo tls ca crt",
+      organizationID: "67160a5ae69144ff19aafb86",
+    },
+    {
+      name: "mongo tls ca crt",
+      organizationID: "67160a5ae69144ff19aafb86",
+    },
+    {
+      name: "mongo tls ca crt",
+      organizationID: "67160a5ae69144ff19aafb86",
+    },
+    {
+      name: "mongo tls ca crt",
+      organizationID: "67160a5ae69144ff19aafb86",
+    },
+    {
+      name: "mongo tls ca crt",
+      organizationID: "67160a5ae69144ff19aafb86",
+    },
+    {
+      name: "mongo tls ca crt",
+      organizationID: "67160a5ae69144ff19aafb86",
+    },
+    {
+      name: "mongo tls ca crt",
+      organizationID: "67160a5ae69144ff19aafb86",
+    },
+    {
+      name: "mongo tls ca crt",
+      organizationID: "67160a5ae69144ff19aafb86",
+    },
+  ];
   return (
     <div className={globalStyle.section}>
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
           <TopHeader buttonText="Add Credentials" topbarTitle="Credentials" />
+          <div className={styles.tableContainer}>
+            <table className={styles.table}>
+              <thead>
+                <tr>
+                  <th width="45%">Name</th>
+                  <th width="45%">Organization ID</th>
+                  <th width="10%"></th>
+                </tr>
+              </thead>
+
+              <tbody>
+                {sampleData.map((org, index) => {
+                  return (
+                    <tr key={index}>
+                      <td>{org.name}</td>
+                      <td>{org.organizationID}</td>
+                      <td 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="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>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>
diff --git a/frontend/src/app/credentials/styles.module.css b/frontend/src/app/credentials/styles.module.css
index e69de29..349bf30 100644
--- a/frontend/src/app/credentials/styles.module.css
+++ b/frontend/src/app/credentials/styles.module.css
@@ -0,0 +1,69 @@
+.tableContainer {
+  width: 100%;
+}
+.tableContainer > table,
+.tableContainer > table > thead {
+  border-collapse: collapse;
+  border: none;
+  width: 100%;
+}
+.tableContainer {
+  height: calc(100vh - 170px);
+  overflow-y: auto;
+}
+
+.tableContainer > table > thead > tr > th,
+.tableContainer > table > tbody > tr > td {
+  padding: 12px 24px;
+  gap: 17px;
+  text-align: start;
+}
+.tableContainer > table > thead > tr {
+  border-bottom: 1px solid #212235;
+  background: #1c1d2b;
+}
+.tableContainer > table > tbody > tr > td {
+  color: #eeeffd;
+  font-family: Inter;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.tableContainer > table > tbody > tr {
+  border-bottom: 1px solid rgba(129, 135, 255, 0);
+  cursor: pointer;
+}
+.tableContainer > table > tbody > tr:hover {
+  border-bottom: 1px solid rgba(129, 135, 255, 0.25);
+  background: rgba(129, 135, 255, 0.05);
+}
+.tableContainer > table > thead > tr > th {
+  color: #85869b;
+  font-family: Inter;
+  font-size: 13px;
+  font-style: normal;
+  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/add/styles.module.css b/frontend/src/app/organization/add/styles.module.css
index 082363a..a5968ff 100644
--- a/frontend/src/app/organization/add/styles.module.css
+++ b/frontend/src/app/organization/add/styles.module.css
@@ -159,12 +159,22 @@
   border-radius: 6px;
   border: 1px solid #616583;
   background-color: transparent;
-  color: #85869b;
+  color: white;
   font-family: Inter;
   font-size: 16px;
+  outline: none;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+  caret-color: #575bc7;
+}
+.inputField > input:focus {
+  border-radius: 6px;
+  border: 1px solid #a8aac1;
+  background: rgba(75, 79, 109, 0.25);
+}
+.inputField > input:hover {
+  background: rgba(75, 79, 109, 0.25);
 }
 .inputField > input::placeholder {
   color: #85869b;
diff --git a/frontend/src/app/organization/page.jsx b/frontend/src/app/organization/page.jsx
index a3ad9e0..0f3f9d9 100644
--- a/frontend/src/app/organization/page.jsx
+++ b/frontend/src/app/organization/page.jsx
@@ -71,7 +71,7 @@ const OrganizationPage = () => {
                 <tr>
                   <th width="45%">Organization Name</th>
                   <th width="45%">Date Created</th>
-                  <th width="10%">Actions</th>
+                  <th width="10%"></th>
                 </tr>
               </thead>
 
diff --git a/frontend/src/app/projects/page.jsx b/frontend/src/app/projects/page.jsx
index 2b5b60c..15d2e22 100644
--- a/frontend/src/app/projects/page.jsx
+++ b/frontend/src/app/projects/page.jsx
@@ -169,7 +169,7 @@ const ProjectsPage = () => {
             <table className={styles.table}>
               <thead>
                 <tr>
-                  <th>Name</th>
+                  <th width="25%">Name</th>
                   <th>Version</th>
                   <th>CPU Used/Limit</th>
                   <th>Memory Used/Limit</th>
@@ -178,7 +178,6 @@ const ProjectsPage = () => {
                   <th></th>
                 </tr>
               </thead>
-
               <tbody>
                 {sampleData.map((project, index) => {
                   return (
diff --git a/frontend/src/app/projects/styles.module.css b/frontend/src/app/projects/styles.module.css
index 87b683d..2a23484 100644
--- a/frontend/src/app/projects/styles.module.css
+++ b/frontend/src/app/projects/styles.module.css
@@ -19,7 +19,7 @@
 .tableContainer > table > thead > tr > th,
 .tableContainer > table > tbody > tr > td {
   padding: 12px 24px;
-  gap: 16px;
+
   text-align: start;
   align-self: stretch;
 }