From bc1b639e26fdb46581c0b52a6f5ff78f25b7dde2 Mon Sep 17 00:00:00 2001 From: benzbarquilla Date: Mon, 2 Mar 2026 15:42:19 +0800 Subject: [PATCH] done agents page --- frontend/src/app/agents/[agentsId]/page.jsx | 105 ++++++++++ .../app/agents/[agentsId]/styles.module.css | 181 ++++++++++++++++++ frontend/src/app/agents/add/page.jsx | 85 ++++++-- frontend/src/app/agents/add/styles.module.css | 167 +++++++++++++++- frontend/src/app/agents/page.jsx | 11 +- .../app/components/fields/styles.module.css | 2 +- frontend/src/app/users/[usersId]/page.jsx | 2 +- 7 files changed, 538 insertions(+), 15 deletions(-) create mode 100644 frontend/src/app/agents/[agentsId]/page.jsx create mode 100644 frontend/src/app/agents/[agentsId]/styles.module.css diff --git a/frontend/src/app/agents/[agentsId]/page.jsx b/frontend/src/app/agents/[agentsId]/page.jsx new file mode 100644 index 0000000..072c370 --- /dev/null +++ b/frontend/src/app/agents/[agentsId]/page.jsx @@ -0,0 +1,105 @@ +"use client"; +import React, { useState } from "react"; +import TextField from "@/app/components/fields/textfield"; +import TopHeader from "@/app/components/topHeader/TopHeader"; +import TopToolTip from "@/app/components/topToolTip/TopToolTip"; +import globalStyle from "../../globalStyle.module.css"; +import createAgentStyle from "./styles.module.css"; +import Prompts from "@/app/components/prompts/Prompts"; + +const Page = () => { + const [isChecked, setIsChecked] = useState(false); + + const handleCheckboxChange = (e) => { + setIsChecked(e.target.checked); + }; + + return ( +
+
+
+ + {/* Create agent Container */} +
+ +
+ {/* Header */} +
+
+

Agent Details

+
+
+ {/* Agent name input */} +
+ {/* Label */} +
+

Agent Name

+ {/*

*

*/} +
+ {/* Input Field */} + + +
+ {/* Kubernetes API input */} +
+ {/* Label */} +
+

Kubernetes API Proxy Name

+ {/*

*

*/} +
+ {/* Input Field */} + + +
+ {/* Checkbox */} +
+
+
+ {/* Checkbox */} +
+ +
+ {/* List */} +
+

+ Use Tailscale VPN +

+

+ Enable Tailscale for secure private networking. When + enabled,
the endpoint will be automatically + resolved from Tailscale. +

+
+
+
+
+ {/* Agent endpoint */} +
+ {/* Label */} +
+

Agent Endpoint

+ {/*

*

*/} +
+ {/* Input Field */} + + +
+
+
+
+
+
+ ); +}; + +export default Page; diff --git a/frontend/src/app/agents/[agentsId]/styles.module.css b/frontend/src/app/agents/[agentsId]/styles.module.css new file mode 100644 index 0000000..61b9327 --- /dev/null +++ b/frontend/src/app/agents/[agentsId]/styles.module.css @@ -0,0 +1,181 @@ +.createAgentContainer { + display: flex; + flex-direction: column; + align-items: center; + gap: 48px; + flex: 1 0 0; + align-self: stretch; +} + +.inputMainContainer { + display: flex; + padding: 24px; + flex-direction: column; + align-items: flex-start; + gap: 24px; + border-radius: 8px; + height: calc(100vh - 260px); + position: relative; + overflow: auto; + scrollbar-width: none; +} +.headerContainer { + display: flex; + align-items: flex-start; + gap: 17px; + align-self: stretch; +} +.headerContainer > div { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + gap: 5px; + flex: 1 0 0; +} +.headerTxt > p { + width: 163px; + color: #d2d3e1; + color: color(display-p3 0.8235 0.8275 0.8784); + font-family: Inter; + font-size: 20px; + font-style: normal; + font-weight: 500; + line-height: normal; +} +.inputContainer { + display: flex; + width: 500px; + flex-direction: column; + align-items: flex-start; + gap: 12px; +} +.labelContainer { + display: flex; + align-items: flex-start; + gap: 2px; + align-self: stretch; +} +.labelContainer > p { + color: #d2d3e1; + color: color(display-p3 0.8235 0.8275 0.8784); + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; +} +.labelContainer > .required { + color: #cfb000; + font-weight: 600; +} + +.checkboxMainContainer { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 10px; + align-self: stretch; +} +.checkboxContainer { + display: flex; + align-items: flex-start; + align-self: stretch; +} +.checkbox { + display: flex; + padding: var(--Basic-Forms-Checkbox-Input-Sizing-Y-SM, 10px) + var(--Basic-Forms-Checkbox-Input-Sizing-X-SM, 12px); + align-items: flex-start; + gap: var(--Basic-Forms-Checkbox-Gap-Between, 16px); + flex: 1 0 0; + border-radius: var(--Basic-Forms-Checkbox-Border-Radius, 8px); + background: #1d1e2a; + background: color(display-p3 0.1137 0.1176 0.1608); +} +.check { + display: flex; + padding-top: var(--Basic-Forms-Checkbox-Inline-Y, 4px); + align-items: flex-start; + gap: var(--Basic-Forms-Checkbox-Inline-Gap-Between, 10px); +} +.hiddenCheckbox { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + width: 16px; + height: 16px; + display: flex; + justify-content: center; + align-items: center; + border-radius: var(--Basic-Forms-Checkbox-Check-Icon-Border-Radius, 4px); + border: 1px solid + var(--Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color, #0067fd); + border: 1px solid + var( + --Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color, + color(display-p3 0.1451 0.3882 0.9216) + ); + cursor: pointer; + position: relative; +} +.hiddenCheckbox:checked { + border-radius: var(--Basic-Forms-Checkbox-Check-Icon-Border-Radius, 4px); + border: 1px solid + var(--Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color, #0067fd); + border: 1px solid + var( + --Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color, + color(display-p3 0.1451 0.3882 0.9216) + ); + background: var( + --Basic-Forms-Checkbox-Check-Icon-Background-Bg-Active-Color, + #0067fd + ); + background: var( + --Basic-Forms-Checkbox-Check-Icon-Background-Bg-Active-Color, + color(display-p3 0.1451 0.3882 0.9216) + ); +} +.hiddenCheckbox::after { + content: ""; + position: absolute; + inset: 0; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8' fill='none'%3E%3Cpath d='M9.83333 0.5L3.41667 6.91667L0.5 4' stroke='white' style='stroke:white;stroke-opacity:1;' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: center; + opacity: 0; +} +.hiddenCheckbox:checked::after { + opacity: 1; +} + +.list { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 4px; + flex: 1 0 0; +} +.placeholderTxt { + align-self: stretch; + color: #d2d3e1; + color: color(display-p3 0.8235 0.8275 0.8784); + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 24px; /* 150% */ + letter-spacing: 0.08px; +} +.secondaryTxt { + align-self: stretch; + color: #697281; + color: color(display-p3 0.4196 0.4471 0.502); + font-family: Inter; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 20px; /* 142.857% */ + letter-spacing: 0.07px; +} diff --git a/frontend/src/app/agents/add/page.jsx b/frontend/src/app/agents/add/page.jsx index ad14ad6..55c0a0a 100644 --- a/frontend/src/app/agents/add/page.jsx +++ b/frontend/src/app/agents/add/page.jsx @@ -1,12 +1,19 @@ -import React from "react"; +"use client"; +import React, { useState } from "react"; import TextField from "@/app/components/fields/textfield"; -// import Prompts from "@/app/components/prompts/Prompts"; import TopHeader from "@/app/components/topHeader/TopHeader"; import TopToolTip from "@/app/components/topToolTip/TopToolTip"; import globalStyle from "../../globalStyle.module.css"; import createAgentStyle from "./styles.module.css"; +import Prompts from "@/app/components/prompts/Prompts"; + +const Page = () => { + const [isChecked, setIsChecked] = useState(false); + + const handleCheckboxChange = (e) => { + setIsChecked(e.target.checked); + }; -const page = () => { return (
@@ -17,20 +24,76 @@ const page = () => { topbarTitle="Create New Agent" state="add" /> - {/* Create Crediantial Container */} + {/* Create agent Container */}
-
+
{/* Header */} -
+
+
+

Agent Details

+
+
{/* Agent name input */} -
+
+ {/* Label */} +
+

Agent Name

+ {/*

*

*/} +
+ {/* Input Field */} + + +
{/* Kubernetes API input */} -
+
+ {/* Label */} +
+

Kubernetes API Proxy Name

+ {/*

*

*/} +
+ {/* Input Field */} + + +
{/* Checkbox */} -
+
+
+
+ {/* Checkbox */} +
+ +
+ {/* List */} +
+

+ Use Tailscale VPN +

+

+ Enable Tailscale for secure private networking. When + enabled,
the endpoint will be automatically + resolved from Tailscale. +

+
+
+
+
{/* Agent endpoint */} -
+
+ {/* Label */} +
+

Agent Endpoint

+ {/*

*

*/} +
+ {/* Input Field */} + + +
@@ -39,4 +102,4 @@ const page = () => { ); }; -export default page; +export default Page; diff --git a/frontend/src/app/agents/add/styles.module.css b/frontend/src/app/agents/add/styles.module.css index 5ad0f62..b110389 100644 --- a/frontend/src/app/agents/add/styles.module.css +++ b/frontend/src/app/agents/add/styles.module.css @@ -7,11 +7,176 @@ align-self: stretch; } -.inputContainer { +.inputMainContainer { display: flex; padding: 24px; flex-direction: column; align-items: flex-start; gap: 24px; border-radius: 8px; + /* Remove ni kung mo ingon si sir grills */ + height: calc(100vh - 260px); + position: relative; + overflow: auto; + scrollbar-width: none; +} +.headerContainer { + display: flex; + align-items: flex-start; + gap: 17px; + align-self: stretch; +} +.headerContainer > div { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + gap: 5px; + flex: 1 0 0; +} +.headerTxt > p { + width: 163px; + color: #d2d3e1; + color: color(display-p3 0.8235 0.8275 0.8784); + font-family: Inter; + font-size: 20px; + font-style: normal; + font-weight: 500; + line-height: normal; +} +.inputContainer { + display: flex; + width: 500px; + flex-direction: column; + align-items: flex-start; + gap: 12px; +} +.labelContainer { + display: flex; + align-items: flex-start; + gap: 2px; + align-self: stretch; +} +.labelContainer > p { + color: #d2d3e1; + color: color(display-p3 0.8235 0.8275 0.8784); + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; +} +.labelContainer > .required { + color: #cfb000; + font-weight: 600; +} + +.checkboxMainContainer { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 10px; + align-self: stretch; +} +.checkboxContainer { + display: flex; + align-items: flex-start; + align-self: stretch; +} +.checkbox { + display: flex; + padding: var(--Basic-Forms-Checkbox-Input-Sizing-Y-SM, 10px) + var(--Basic-Forms-Checkbox-Input-Sizing-X-SM, 12px); + align-items: flex-start; + gap: var(--Basic-Forms-Checkbox-Gap-Between, 16px); + flex: 1 0 0; + border-radius: var(--Basic-Forms-Checkbox-Border-Radius, 8px); + background: #1d1e2a; + background: color(display-p3 0.1137 0.1176 0.1608); +} +.check { + display: flex; + padding-top: var(--Basic-Forms-Checkbox-Inline-Y, 4px); + align-items: flex-start; + gap: var(--Basic-Forms-Checkbox-Inline-Gap-Between, 10px); +} +.hiddenCheckbox { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + width: 16px; + height: 16px; + display: flex; + justify-content: center; + align-items: center; + border-radius: var(--Basic-Forms-Checkbox-Check-Icon-Border-Radius, 4px); + border: 1px solid + var(--Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color, #0067fd); + border: 1px solid + var( + --Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color, + color(display-p3 0.1451 0.3882 0.9216) + ); + cursor: pointer; + position: relative; +} +.hiddenCheckbox:checked { + border-radius: var(--Basic-Forms-Checkbox-Check-Icon-Border-Radius, 4px); + border: 1px solid + var(--Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color, #0067fd); + border: 1px solid + var( + --Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color, + color(display-p3 0.1451 0.3882 0.9216) + ); + background: var( + --Basic-Forms-Checkbox-Check-Icon-Background-Bg-Active-Color, + #0067fd + ); + background: var( + --Basic-Forms-Checkbox-Check-Icon-Background-Bg-Active-Color, + color(display-p3 0.1451 0.3882 0.9216) + ); +} +.hiddenCheckbox::after { + content: ""; + position: absolute; + inset: 0; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8' fill='none'%3E%3Cpath d='M9.83333 0.5L3.41667 6.91667L0.5 4' stroke='white' style='stroke:white;stroke-opacity:1;' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: center; + opacity: 0; +} +.hiddenCheckbox:checked::after { + opacity: 1; +} + +.list { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 4px; + flex: 1 0 0; +} +.placeholderTxt { + align-self: stretch; + color: #d2d3e1; + color: color(display-p3 0.8235 0.8275 0.8784); + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 24px; /* 150% */ + letter-spacing: 0.08px; +} +.secondaryTxt { + align-self: stretch; + color: #697281; + color: color(display-p3 0.4196 0.4471 0.502); + font-family: Inter; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 20px; /* 142.857% */ + letter-spacing: 0.07px; } diff --git a/frontend/src/app/agents/page.jsx b/frontend/src/app/agents/page.jsx index 8b5097c..7ff6eb7 100644 --- a/frontend/src/app/agents/page.jsx +++ b/frontend/src/app/agents/page.jsx @@ -1,8 +1,14 @@ +"use client"; + import React from "react"; import styles from "./styles.module.css"; import TopHeader from "../components/topHeader/TopHeader"; import globalStyle from "../globalStyle.module.css"; +import { useRouter } from "next/navigation"; + const AgentsPage = () => { + const router = useRouter(); + const sampleData = [ { name: "DOKS OneCB Dev", @@ -111,7 +117,10 @@ const AgentsPage = () => { {sampleData.map((org, index) => { return ( - + router.push(`/agents/${org.name}`)} + > {org.name} {org.endPoint} diff --git a/frontend/src/app/components/fields/styles.module.css b/frontend/src/app/components/fields/styles.module.css index 1fd8258..3286a49 100644 --- a/frontend/src/app/components/fields/styles.module.css +++ b/frontend/src/app/components/fields/styles.module.css @@ -1,6 +1,6 @@ .input { display: flex; - padding: 12px; + padding: 12px 16px; flex-direction: column; justify-content: center; align-items: flex-start; diff --git a/frontend/src/app/users/[usersId]/page.jsx b/frontend/src/app/users/[usersId]/page.jsx index 08e7a7f..e02e17c 100644 --- a/frontend/src/app/users/[usersId]/page.jsx +++ b/frontend/src/app/users/[usersId]/page.jsx @@ -47,7 +47,7 @@ const Page = () => {

Role

-

*

+ {/*

*

*/}