Laux/Frontend-Internal-Developer-Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Laux:fcaa3105029ff0a3d2d835b33120bbc657489e72
Branches Tags
Laux:main Laux:DEVELOPMENT
...
compare: Laux:DEVELOPMENT
Branches Tags
Laux:DEVELOPMENT Laux:main

38 Commits
fcaa310502 ... DEVELOPMEN

Author SHA1 Message Date
benzbarquilla
a4675c843d done searchbar but not final 2026-03-31 14:49:20 +08:00
benzbarquilla
02d53f69ad few changes, mobile searchbar not done 2026-03-30 17:21:09 +08:00
Laux Dev
992d01ba9b Final 2026-03-26 17:22:32 +08:00
benzbarquilla
9f0392c9c2 fixed 2026-03-26 15:17:54 +08:00
benzbarquilla
6e54a9468b fixed padding 2026-03-25 10:48:32 +08:00
Laux Dev
18524971f8 fixed 2026-03-25 10:17:10 +08:00
Laux Dev
395de5ef88 Merge branch 'DEVELOPMENT' of https://gitea.internship.project-moonshot.com/Laux/Frontend-Internal-Developer-Platform into DEVELOPMENT 2026-03-25 10:16:40 +08:00
benzbarquilla
cc2a18c4d7 done credentials and agents mobile/responsive need review 2026-03-24 17:04:16 +08:00
Laux Dev
2c9f2d612b Refactor 2026-03-19 18:57:20 +08:00
benzbarquilla
c9d5faebb0 done users and roles page responsive view review nalang ang polish 2026-03-19 16:27:37 +08:00
benzbarquilla
8c776a5491 fixed agents add and view desktop 2026-03-19 09:29:25 +08:00
benzbarquilla
14884f6b3a done user and role table, and add user 2026-03-18 17:24:15 +08:00
Laux Dev
f84894b6d7 Merge branch 'DEVELOPMENT' of https://gitea.internship.project-moonshot.com/Laux/Frontend-Internal-Developer-Platform into DEVELOPMENT 2026-03-18 16:19:01 +08:00
Laux Dev
6fd78aa92f Add feature 2026-03-18 16:18:55 +08:00
benzbarquilla
7c0d7011ae Merge branch 'DEVELOPMENT' of https://gitea.internship.project-moonshot.com/Laux/Frontend-Internal-Developer-Platform into DEVELOPMENT 2026-03-18 08:59:57 +08:00
benzbarquilla
3487a71153 added loki form to agents 2026-03-18 08:59:54 +08:00
Laux Dev
d7f65cb1a7 fixed 2026-03-17 20:13:43 +08:00
Laux Dev
a220230d0b add 2026-03-17 17:02:41 +08:00
benzbarquilla
7745c83bbd added active state 2026-03-16 17:33:05 +08:00
benzbarquilla
cbaff15d72 few adjustments 2026-03-16 17:08:10 +08:00
benzbarquilla
dfad22a03f thats all for today!! 2026-03-16 16:45:39 +08:00
benzbarquilla
925804021a done mobile navbar and users 2026-03-16 16:29:16 +08:00
Laux Dev
62bb558706 progress 2026-03-16 15:25:01 +08:00
Laux Dev
fbeb3a509a progress 2026-03-16 14:42:04 +08:00
benzbarquilla
dcddc14d7e done home mobile 2026-03-16 10:21:18 +08:00
Laux Dev
e1ec8a90c1 Fixed 2026-03-16 10:19:36 +08:00
benzbarquilla
30534eb169 thats all for today!! 2026-03-13 16:54:36 +08:00
benzbarquilla
cb850b4cd0 changed navbar 2026-03-13 14:40:00 +08:00
Laux Dev
f44258d134 add responsiveness 2026-03-13 14:38:46 +08:00
benzbarquilla
4478a74ece Added label for forms 2026-03-13 09:21:27 +08:00
benzbarquilla
bd20f5a5cf Merge branch 'DEVELOPMENT' of https://gitea.internship.project-moonshot.com/Laux/Frontend-Internal-Developer-Platform into DEVELOPMENT 2026-03-06 09:28:26 +08:00
benzbarquilla
deea4905b0 changes on hover 2026-03-06 09:28:23 +08:00
Laux Dev
8f3595cf5d fixed 2026-03-06 09:24:41 +08:00
Laux Dev
c1e11d7f1c fixed 2026-03-06 09:21:17 +08:00
Laux Dev
9b23841876 fixed 2026-03-06 09:10:10 +08:00
Laux Dev
278c256805 fixed 2026-03-06 09:06:26 +08:00
Laux Dev
4ecb6f8167 Merge branch 'DEVELOPMENT' of https://gitea.internship.project-moonshot.com/Laux/Frontend-Internal-Developer-Platform into DEVELOPMENT 2026-03-06 09:03:01 +08:00
Laux Dev
7b7b15738b Fixed 2026-03-06 09:02:55 +08:00
115 changed files with 5988 additions and 2461 deletions
Expand all files Collapse all files

244
frontend/src/app/agents/[agentsId]/page.jsx
View File

@@ -6,97 +6,193 @@ 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";
import useAgentForm from "@/app/hooks/useAgentForm";
import Alert from "@/app/components/alerts/Alert";
import Checkbox from "@/app/components/customCheckbox/Checkbox";
import useIsMobile from "@/app/hooks/useIsMobile";
const ViewAgentPage = () => {
const [isChecked, setIsChecked] = useState(false);
const [useVpn, setUseVpn] = useState(false);
const [enableLoki, setEnableLoki] = useState(false);
const isMobile = useIsMobile();
const handleCheckboxChange = (e) => {
setIsChecked(e.target.checked);
};
const {
register,
handleSubmit,
errors,
onSubmit,
triggerAlert,
setTriggerAlert,
} = useAgentForm();
return (
<div className={globalStyle.section}>
{triggerAlert && (
<Alert
setTriggerAlert={setTriggerAlert}
onClick={() => setEditState(true)}
title="Create New Agent"
/>
)}
<div className={globalStyle.mainContainer}>
<div className={globalStyle.container}>
<TopHeader
buttonText="Save"
cancelButtonText="Cancel"
topbarTitle="Update Agent"
topbarTitle="View Agent"
state="add"
requiredButtons={["update", "title"]}
requiredButtons={["edit", "back"]}
/>
{/* Create agent Container */}
<div className={createAgentStyle.createAgentContainer}>
<TopToolTip />
<div className={createAgentStyle.inputMainContainer}>
{/* Header */}
<div className={createAgentStyle.headerContainer}>
<div className={createAgentStyle.headerTxt}>
<p>Agent Details</p>
</div>
</div>
{/* Agent name input */}
<div className={createAgentStyle.inputContainer}>
{/* Label */}
<div className={createAgentStyle.labelContainer}>
<p>Agent Name</p>
{/* <p className={createAgentStyle.required}>*</p> */}
</div>
{/* Input Field */}
<TextField placeHolder="Enter agent name" />
<Prompts show={false} />
</div>
{/* Kubernetes API input */}
<div className={createAgentStyle.inputContainer}>
{/* Label */}
<div className={createAgentStyle.labelContainer}>
<p>Kubernetes API Proxy Name</p>
{/* <p className={createAgentStyle.required}>*</p> */}
</div>
{/* Input Field */}
<TextField placeHolder="Enter proxy name" />
<Prompts show={false} />
</div>
{/* Checkbox */}
<div className={createAgentStyle.checkboxMainContainer}>
<div className={createAgentStyle.checkboxContainer}>
<div className={createAgentStyle.checkbox}>
{/* Checkbox */}
<div className={createAgentStyle.check}>
<input
type="checkbox"
checked={isChecked}
onChange={handleCheckboxChange}
className={createAgentStyle.hiddenCheckbox}
/>
</div>
{/* List */}
<div className={createAgentStyle.list}>
<p className={createAgentStyle.placeholderTxt}>
Use Tailscale VPN
</p>
<p className={createAgentStyle.secondaryTxt}>
Enable Tailscale for secure private networking. When
enabled, <br /> the endpoint will be automatically
resolved from Tailscale.
</p>
</div>
<form
className={createAgentStyle.formContainer}
id="form"
onSubmit={handleSubmit(onSubmit)}
>
<div className={createAgentStyle.createAgentContainer}>
<div className={createAgentStyle.div}></div>
<div className={createAgentStyle.inputMainContainer}>
{/* AGENT FORM */}
<div className={createAgentStyle.headerContainer}>
<div className={createAgentStyle.headerTxt}>
{isMobile ? "" : <p>Agent Details</p>}
</div>
</div>
</div>
{/* Agent endpoint */}
<div className={createAgentStyle.inputContainer}>
{/* Label */}
<div className={createAgentStyle.labelContainer}>
<p>Agent Endpoint</p>
{/* <p className={createAgentStyle.required}>*</p> */}
<div className={createAgentStyle.inputContainer}>
<div className={createAgentStyle.labelContainer}>
<p>Agent Name</p>
{/* <p className={createAgentStyle.required}>*</p> */}
</div>
<TextField
placeHolder="Enter agent name"
{...register("agentName", { required: true })}
hasError={!!errors.agentName}
/>
<Prompts show={false} />
</div>
{/* Input Field */}
<TextField placeHolder="e.g., http://agent-01.example.com:8080" />
<Prompts show={false} />
<div className={createAgentStyle.inputContainer}>
<div className={createAgentStyle.labelContainer}>
<p>Kubernetes API Proxy Name</p>
{/* <p className={createAgentStyle.required}>*</p> */}
</div>
<TextField
placeHolder="Enter proxy name"
{...register("proxyName", { required: true })}
hasError={!!errors.proxyName}
/>
<Prompts show={false} />
</div>
<Checkbox
checked={useVpn}
onChange={(e) => setUseVpn(e.target.checked)}
label="Use Tailscale VPN"
description={
<>
Enable Tailscale for secure private networking. When
enabled, <br />
the endpoint will be automatically resolved from
Tailscale.
</>
}
/>
{useVpn ? (
<>
<div className={createAgentStyle.inputContainer}>
<div className={createAgentStyle.labelContainer}>
<p>Tailscale Device Prefix</p>
<p className={createAgentStyle.required}>*</p>
</div>
<TextField
placeHolder="doks-onecbdev-agent"
{...register("agentEndpoint", { required: true })}
hasError={!!errors.agentEndpoint}
/>
<Prompts show={false} />
</div>
<div className={createAgentStyle.inputContainer}>
<div className={createAgentStyle.labelContainer}>
<p>Tailscale Port</p>
<p className={createAgentStyle.required}>*</p>
</div>
<TextField
placeHolder="6969"
{...register("agentEndpoint", { required: true })}
hasError={!!errors.agentEndpoint}
/>
<Prompts show={false} />
</div>
</>
) : (
<div className={createAgentStyle.agentInputContainer}>
<div className={createAgentStyle.labelContainer}>
<p>Agent Endpoint</p>
<p className={createAgentStyle.required}>*</p>
</div>
<TextField
placeHolder="e.g., http://agent-01.example.com:8080"
{...register("agentEndpoint", { required: true })}
hasError={!!errors.agentEndpoint}
/>
<Prompts show={false} />
</div>
)}
</div>
<div className={createAgentStyle.lokiContainer}>
<div className={createAgentStyle.headerContainer}>
<div className={createAgentStyle.headerTxt}>
<p>Loki Integration (Optional)</p>
</div>
</div>
<Checkbox
checked={enableLoki}
onChange={(e) => setEnableLoki(e.target.checked)}
label="Enable Loki Logging"
description="Configure Loki for centralized logging and log streaming."
/>
{enableLoki && (
<>
<div className={createAgentStyle.inputContainer}>
<div className={createAgentStyle.labelContainer}>
<p>Loki Endpoint</p>
{/* <p className={createAgentStyle.required}>*</p> */}
</div>
<TextField
placeHolder="https://loki.project-moonshot.com/"
{...register("endpoint", { required: true })}
hasError={!!errors.endpoint}
/>
<Prompts show={false} />
</div>
<div className={createAgentStyle.inputContainer}>
<div className={createAgentStyle.labelContainer}>
<p>Tenant Name</p>
{/* <p className={createAgentStyle.required}>*</p> */}
</div>
<TextField
placeHolder="doks-dev"
{...register("tenantName", { required: true })}
hasError={!!errors.tenantName}
/>
<Prompts show={false} />
</div>
<div className={createAgentStyle.inputContainer}>
<div className={createAgentStyle.labelContainer}>
<p>Password</p>
{/* <p className={createAgentStyle.required}>*</p> */}
</div>
<TextField
placeHolder="Enter Password"
{...register("password", { required: true })}
hasError={!!errors.password}
/>
<Prompts show={false} />
</div>
</>
)}
</div>
</div>
</div>
</form>
</div>
</div>
</div>

190
frontend/src/app/agents/[agentsId]/styles.module.css
View File

@@ -1,11 +1,23 @@
.createAgentContainer {
.formContainer {
display: flex;
flex-direction: column;
align-items: center;
gap: 48px;
align-items: flex-start;
gap: 10px;
flex: 1 0 0;
align-self: stretch;
}
.createAgentContainer {
display: flex;
justify-content: center;
align-items: flex-start;
align-self: stretch;
gap: 16px;
flex: 1 1 auto;
padding-top: 48px;
height: calc(100vh - 100px - 70px);
overflow-y: auto;
scrollbar-width: none;
}
.inputMainContainer {
display: flex;
@@ -13,16 +25,11 @@
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;
gap: 50px;
align-self: stretch;
}
.headerContainer > div {
@@ -34,16 +41,17 @@
flex: 1 0 0;
}
.headerTxt > p {
width: 163px;
/* width: 163px; */
align-self: stretch;
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 {
.inputContainer,
.agentInputContainer {
display: flex;
width: 500px;
flex-direction: column;
@@ -58,7 +66,6 @@
}
.labelContainer > p {
color: #d2d3e1;
color: color(display-p3 0.8235 0.8275 0.8784);
font-family: Inter;
font-size: 16px;
font-style: normal;
@@ -70,112 +77,65 @@
font-weight: 600;
}
.checkboxMainContainer {
.lokiContainer {
display: flex;
width: 100%;
width: 548px;
padding: 24px;
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;
gap: 24px;
}
.list {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
flex: 1 0 0;
@media (max-width: 1024px) {
.createAgentContainer {
display: flex;
padding: 16px 16px; /*did some math 32 ang orig top*/
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 24px;
height: calc(100vh - 100px - 60px);
align-self: stretch;
}
.div {
display: none;
}
.inputMainContainer {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 0px;
/* align-self: stretch; */
}
.lokiContainer {
display: flex;
gap: 16px;
align-self: stretch;
border-radius: 8px;
width: 500px;
padding: 24px 0 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;
@media (max-width: 768px) {
.inputMainContainer {
align-self: stretch;
width: 100%;
}
.lokiContainer {
width: 100%;
}
.inputContainer,
.agentInputContainer {
width: 100%;
}
.agentInputContainer {
padding-top: 8px;
}
.headerTxt > p {
font-size: 16px;
font-weight: 400;
}
}

239
frontend/src/app/agents/add/page.jsx
View File

@@ -8,13 +8,13 @@ import createAgentStyle from "./styles.module.css";
import Prompts from "@/app/components/prompts/Prompts";
import useAgentForm from "@/app/hooks/useAgentForm";
import Alert from "@/app/components/alerts/Alert";
import Checkbox from "@/app/components/customCheckbox/Checkbox";
import useIsMobile from "@/app/hooks/useIsMobile";
const AddAgentPage = () => {
const [isChecked, setIsChecked] = useState(false);
const handleCheckboxChange = (e) => {
setIsChecked(e.target.checked);
};
const [useVpn, setUseVpn] = useState(false);
const [enableLoki, setEnableLoki] = useState(false);
const isMobile = useIsMobile();
const {
register,
handleSubmit,
@@ -42,94 +42,159 @@ const AddAgentPage = () => {
state="add"
requiredButtons={["title", "save"]}
/>
{isMobile ? "" : <TopToolTip />}
{/* Create agent Container */}
<div className={createAgentStyle.createAgentContainer}>
<TopToolTip />
<form
className={createAgentStyle.inputMainContainer}
id="form"
onSubmit={handleSubmit(onSubmit)}
>
{/* Header */}
<div className={createAgentStyle.headerContainer}>
<div className={createAgentStyle.headerTxt}>
<p>Agent Details</p>
</div>
</div>
{/* Agent name input */}
<div className={createAgentStyle.inputContainer}>
{/* Label */}
<div className={createAgentStyle.labelContainer}>
<p>Agent Name</p>
<p className={createAgentStyle.required}>*</p>
</div>
{/* Input Field */}
<TextField
placeHolder="Enter agent name"
{...register("agentName", { required: true })}
hasError={!!errors.agentName}
/>
<Prompts show={false} />
</div>
{/* Kubernetes API input */}
<div className={createAgentStyle.inputContainer}>
{/* Label */}
<div className={createAgentStyle.labelContainer}>
<p>Kubernetes API Proxy Name</p>
<p className={createAgentStyle.required}>*</p>
</div>
{/* Input Field */}
<TextField
placeHolder="Enter proxy name"
{...register("proxyName", { required: true })}
hasError={!!errors.proxyName}
/>
<Prompts show={false} />
</div>
{/* Checkbox */}
<div className={createAgentStyle.checkboxMainContainer}>
<div className={createAgentStyle.checkboxContainer}>
<div className={createAgentStyle.checkbox}>
{/* Checkbox */}
<div className={createAgentStyle.check}>
<input
type="checkbox"
checked={isChecked}
onChange={handleCheckboxChange}
className={createAgentStyle.hiddenCheckbox}
/>
</div>
{/* List */}
<div className={createAgentStyle.list}>
<p className={createAgentStyle.placeholderTxt}>
Use Tailscale VPN
</p>
<p className={createAgentStyle.secondaryTxt}>
Enable Tailscale for secure private networking. When
enabled, <br /> the endpoint will be automatically
resolved from Tailscale.
</p>
</div>
<form
className={createAgentStyle.formContainer}
id="form"
onSubmit={handleSubmit(onSubmit)}
>
<div className={createAgentStyle.createAgentContainer}>
<div className={createAgentStyle.inputMainContainer}>
{/* AGENT FORM */}
<div className={createAgentStyle.headerContainer}>
<div className={createAgentStyle.headerTxt}>
{isMobile ? "" : <p>Agent Details</p>}
</div>
</div>
</div>
{/* Agent endpoint */}
<div className={createAgentStyle.inputContainer}>
{/* Label */}
<div className={createAgentStyle.labelContainer}>
<p>Agent Endpoint</p>
<p className={createAgentStyle.required}>*</p>
<div className={createAgentStyle.inputContainer}>
<div className={createAgentStyle.labelContainer}>
<p>Agent Name</p>
<p className={createAgentStyle.required}>*</p>
</div>
<TextField
placeHolder="Enter agent name"
{...register("agentName", { required: true })}
hasError={!!errors.agentName}
/>
<Prompts show={false} />
</div>
{/* Input Field */}
<TextField
placeHolder="e.g., http://agent-01.example.com:8080"
{...register("agentEndpoint", { required: true })}
hasError={!!errors.agentEndpoint}
<div className={createAgentStyle.inputContainer}>
<div className={createAgentStyle.labelContainer}>
<p>Kubernetes API Proxy Name</p>
<p className={createAgentStyle.required}>*</p>
</div>
<TextField
placeHolder="Enter proxy name"
{...register("proxyName", { required: true })}
hasError={!!errors.proxyName}
/>
<Prompts show={false} />
</div>
<Checkbox
checked={useVpn}
onChange={(e) => setUseVpn(e.target.checked)}
label="Use Tailscale VPN"
description={
<>
Enable Tailscale for secure private networking. When
enabled, <br />
the endpoint will be automatically resolved from
Tailscale.
</>
}
/>
<Prompts show={false} />
{useVpn ? (
<>
<div className={createAgentStyle.inputContainer}>
<div className={createAgentStyle.labelContainer}>
<p>Tailscale Device Prefix</p>
<p className={createAgentStyle.required}>*</p>
</div>
<TextField
placeHolder="doks-onecbdev-agent"
{...register("agentEndpoint", { required: true })}
hasError={!!errors.agentEndpoint}
/>
<Prompts show={false} />
</div>
<div className={createAgentStyle.inputContainer}>
<div className={createAgentStyle.labelContainer}>
<p>Tailscale Port</p>
<p className={createAgentStyle.required}>*</p>
</div>
<TextField
placeHolder="6969"
{...register("agentEndpoint", { required: true })}
hasError={!!errors.agentEndpoint}
/>
<Prompts show={false} />
</div>
</>
) : (
<div className={createAgentStyle.agentInputContainer}>
<div className={createAgentStyle.labelContainer}>
<p>Agent Endpoint</p>
<p className={createAgentStyle.required}>*</p>
</div>
<TextField
placeHolder="e.g., http://agent-01.example.com:8080"
{...register("agentEndpoint", { required: true })}
hasError={!!errors.agentEndpoint}
/>
<Prompts show={false} />
</div>
)}
</div>
</form>
</div>
<div className={createAgentStyle.lokiContainer}>
{/* Header */}
<div className={createAgentStyle.headerContainer}>
<div className={createAgentStyle.headerTxt}>
<p>Loki Integration (Optional)</p>
</div>
</div>
<Checkbox
checked={enableLoki}
onChange={(e) => setEnableLoki(e.target.checked)}
label="Enable Loki Logging"
description="Configure Loki for centralized logging and log streaming."
/>
{enableLoki && (
<>
<div className={createAgentStyle.inputContainer}>
<div className={createAgentStyle.labelContainer}>
<p>Loki Endpoint</p>
{/* <p className={createAgentStyle.required}>*</p> */}
</div>
<TextField
placeHolder="https://loki.project-moonshot.com/"
{...register("endpoint", { required: true })}
hasError={!!errors.endpoint}
/>
<Prompts show={false} />
</div>
<div className={createAgentStyle.inputContainer}>
<div className={createAgentStyle.labelContainer}>
<p>Tenant Name</p>
{/* <p className={createAgentStyle.required}>*</p> */}
</div>
<TextField
placeHolder="doks-dev"
{...register("tenantName", { required: true })}
hasError={!!errors.tenantName}
/>
<Prompts show={false} />
</div>
<div className={createAgentStyle.inputContainer}>
<div className={createAgentStyle.labelContainer}>
<p>Password</p>
{/* <p className={createAgentStyle.required}>*</p> */}
</div>
<TextField
placeHolder="Enter Password"
{...register("password", { required: true })}
hasError={!!errors.password}
/>
<Prompts show={false} />
</div>
</>
)}
</div>
</div>
</form>
</div>
</div>
</div>

200
frontend/src/app/agents/add/styles.module.css
View File

@@ -1,50 +1,51 @@
.createAgentContainer {
.formContainer {
display: flex;
flex-direction: column;
align-items: center;
gap: 48px;
align-items: flex-start;
gap: 10px;
flex: 1 0 0;
align-self: stretch;
}
.createAgentContainer {
display: flex;
justify-content: center;
align-items: flex-start;
align-self: stretch;
/* Ibalhin ni ang padding sa formcontainer maoang nasa figma */
padding-top: 48px;
gap: 16px;
flex: 1 1 auto;
height: calc(100vh - 100px - 5px - 110px);
overflow-y: auto;
scrollbar-width: none;
}
.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;
/* width: 163px; */
align-self: stretch;
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 {
.inputContainer,
.agentInputContainer {
display: flex;
width: 500px;
flex-direction: column;
@@ -59,7 +60,6 @@
}
.labelContainer > p {
color: #d2d3e1;
color: color(display-p3 0.8235 0.8275 0.8784);
font-family: Inter;
font-size: 16px;
font-style: normal;
@@ -71,112 +71,64 @@
font-weight: 600;
}
.checkboxMainContainer {
.lokiContainer {
display: flex;
width: 548px;
padding: 24px;
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;
gap: 24px;
}
.list {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
flex: 1 0 0;
@media (max-width: 1024px) {
.createAgentContainer {
display: flex;
padding: 16px 16px; /*did some math 32 ang orig top*/
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
height: calc(100vh - 100px - 5px - 50px);
gap: 24px;
align-self: stretch;
}
.div {
display: none;
}
.inputMainContainer {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 0px;
/* align-self: stretch; */
}
.lokiContainer {
display: flex;
gap: 16px;
align-self: stretch;
border-radius: 8px;
width: 500px;
padding: 24px 0 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;
@media (max-width: 768px) {
.inputMainContainer {
align-self: stretch;
width: 100%;
}
.lokiContainer {
width: 100%;
}
.inputContainer,
.agentInputContainer {
width: 100%;
}
.agentInputContainer {
padding-top: 8px;
}
.headerTxt > p {
font-size: 16px;
font-weight: 400;
}
}

37
frontend/src/app/agents/card/Card.jsx Normal file
View File

@@ -0,0 +1,37 @@
import DeleteIcon from "@/app/components/icons/delete";
import React from "react";
import styles from "./styles.module.css";
const Card = (props) => {
return (
<div className={styles.cardContainer} {...props}>
<div className={styles.cardDetails}>
<div className={styles.list}>
<p>Name</p>
<p>{props?.data?.name}</p>
</div>
<div className={styles.list}>
<p>Endpoint</p>
<p>{props?.data?.endPoint}</p>
</div>
<div className={styles.list}>
<p>Type</p>
<p>{props?.data?.type}</p>
</div>
<div className={styles.list}>
<p>Proxy Name</p>
<p>{props?.data?.proxyName}</p>
</div>
<div className={styles.list}>
<p>Date Created</p>
<p>{props?.data?.dateCreated}</p>
</div>
</div>
<div className={styles.cardAction}>
<DeleteIcon />
</div>
</div>
);
};
export default Card;

42
frontend/src/app/agents/card/styles.module.css Normal file
View File

@@ -0,0 +1,42 @@
.cardContainer {
display: flex;
padding: 16px 0;
align-items: flex-start;
gap: 16px;
align-self: stretch;
border-bottom: 1px solid #2c2d3d;
}
.cardDetails {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
flex: 1 0 0;
}
.list {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
align-self: stretch;
}
.list p {
color: #85869b;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.list p:nth-child(2) {
color: #eeeffd;
font-family: Inter;
font-size: 16px;
font-weight: 500;
}
.cardAction {
display: flex;
align-items: center;
gap: 17px;
}

71
frontend/src/app/agents/page.jsx
View File

@@ -8,6 +8,10 @@ import { useRouter } from "next/navigation";
import ActionButton from "../components/actionButton/ActionButton";
import DeleteIcon from "../components/icons/delete";
import ViewIcon from "../components/icons/view";
import useIsMobile from "../hooks/useIsMobile";
import Card from "./card/Card";
import SearchIcon from "../components/icons/search";
import MobileSearchBar from "../components/mobileSearchBar/MobileSearchBar";
const AgentsPage = () => {
const router = useRouter();
@@ -98,6 +102,7 @@ const AgentsPage = () => {
dateCreated: "2/11/2026",
},
];
const isMobile = useIsMobile();
return (
<div className={globalStyle.section}>
<div className={globalStyle.mainContainer}>
@@ -107,6 +112,21 @@ const AgentsPage = () => {
topbarTitle="Agents"
requiredButtons={["title", "add", "search"]}
/>
<div className={styles.cardContainer}>
<MobileSearchBar />
{isMobile &&
sampleData.map((data, key) => {
return (
<Card
data={data}
key={key}
onClick={() => router.push(`/agents/${key}`)}
/>
);
})}
</div>
<div className={styles.tableContainer}>
<table className={styles.table}>
<thead>
@@ -122,32 +142,33 @@ const AgentsPage = () => {
</thead>
<tbody>
{sampleData.map((org, index) => {
return (
<tr
key={index}
onClick={() => router.push(`/agents/${org.name}`)}
>
<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>
<div className={styles.actions}>
<div>
<ActionButton icon={<ViewIcon />} />
{!isMobile &&
sampleData.map((org, index) => {
return (
<tr
key={index}
onClick={() => router.push(`/agents/${org.name}`)}
>
<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>
<div className={styles.actions}>
<div>
<ActionButton icon={<ViewIcon />} />
</div>
<div>
<ActionButton icon={<DeleteIcon />} />
</div>
</div>
<div>
<ActionButton icon={<DeleteIcon />} />
</div>
</div>
</td>
</tr>
);
})}
</td>
</tr>
);
})}
</tbody>
</table>
</div>

50
frontend/src/app/agents/styles.module.css
View File

@@ -31,7 +31,7 @@
.tableContainer > table > tbody > tr > td {
color: #eeeffd;
font-family: Inter;
font-size: 13px;
font-size: 0.8rem;
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -65,7 +65,7 @@
.tableContainer > table > thead > tr > th {
color: #85869b;
font-family: Inter;
font-size: 13px;
font-size: 0.8rem;
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -77,3 +77,49 @@
gap: 12px;
align-self: stretch;
}
.cardContainer {
display: flex;
padding: 0 16px;
padding-bottom: 50px;
height: calc(100vh - 170px);
flex-direction: column;
align-items: flex-start;
gap: 12px;
align-self: stretch;
display: none;
}
@media (max-width: 768px) {
.cardContainer {
display: flex;
}
.tableContainer {
display: none;
}
}
.searchBarContainer {
display: flex;
align-items: center;
gap: 10px;
align-self: stretch;
position: relative;
}
.searchBarContainer > input {
width: 100%;
padding: 11px 12px;
padding-left: 30px;
background-color: transparent;
border: none;
outline: none;
color: white;
font-family: Inter;
font-size: 1rem;
outline: none;
font-style: normal;
font-weight: 400;
line-height: normal;
caret-color: #575bc7;
}
.searchIcon {
position: absolute;
}

15
frontend/src/app/components/alerts/Alert.jsx
View File

@@ -5,12 +5,21 @@ import SecondaryButton from "../buttons/secondaryButton/SecondaryButton";
import PrimaryButton from "../buttons/primarybutton/PrimaryButton";
const Alert = (props) => {
const [hide, setHide] = useState(false);
const body = props?.body;
const handleHide = () => {
setHide(true);
setTimeout(() => {
props.setTriggerAlert(false);
}, 250);
};
const handleConfirm = () => {
setHide(true);
setTimeout(() => {
props.setTriggerAlert(false);
props?.setEditState?.(false);
}, 250);
};
return (
<div className={styles.container}>
<div
@@ -24,12 +33,12 @@ const Alert = (props) => {
</div>
<div className={styles.alertBody}>
<p>
You are about to add a new record. Please review the details before
continuing. Do you want to proceed?
{body ||
" You are about to add a new record. Please review the details before continuing. Do you want to proceed?"}
</p>
</div>
<div className={styles.actionButtons}>
<PrimaryButton text="Confirm" onClick={handleHide} />
<PrimaryButton text="Confirm" onClick={handleConfirm} />
<SecondaryButton text="Cancel" onClick={handleHide} />
</div>
</div>

4
frontend/src/app/components/alerts/styles.module.css
View File

@@ -75,7 +75,7 @@
.headers > p {
color: #fff;
font-family: Inter;
font-size: 20px;
font-size: 1.25rem;
font-style: normal;
font-weight: 700;
line-height: normal;
@@ -91,7 +91,7 @@
.body > p {
color: #fff;
font-family: Inter;
font-size: 14px;
font-size: 0.75rem;
font-style: normal;
font-weight: 500;
line-height: 20px;

4
frontend/src/app/components/buttons/primarybutton/styles.module.css
View File

@@ -1,6 +1,6 @@
.button {
display: flex;
padding: 7px 15px;
padding: 8px 10px;
justify-content: center;
align-items: center;
gap: 10px;
@@ -8,7 +8,7 @@
border: 0.5px solid #8187ff;
background: rgba(83, 89, 242, 0.25);
color: white;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: normal;

2
frontend/src/app/components/buttons/secondaryButton/styles.module.css
View File

@@ -9,7 +9,7 @@
border: 0.5px solid #4e537e;
cursor: pointer;
color: #d2d3e1;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 500;

10
frontend/src/app/components/checkbox/styles.module.css
View File

@@ -1,7 +1,7 @@
.switch {
display: flex;
width: 53px;
height: 33px;
width: 50px;
height: 30px;
align-items: center;
background-color: white;
cursor: pointer;
@@ -16,8 +16,8 @@
display: none;
}
.knob {
width: 25px;
height: 25px;
width: 22px;
height: 22px;
background-color: #6d6d6d;
border-radius: 50%;
display: flex;
@@ -32,7 +32,7 @@
}
.check:checked + .switch .knob {
transform: translateX(78%);
transform: translateX(90%);
background-color: white;
}

32
frontend/src/app/components/customCheckbox/Checkbox.jsx Normal file
View File

@@ -0,0 +1,32 @@
import React from "react";
import styles from "./styles.module.css";
const Checkbox = ({ checked, onChange, label, description }) => {
return (
<>
{/* Checkbox */}
<div className={styles.checkboxMainContainer}>
<div className={styles.checkboxContainer}>
<div className={styles.checkbox}>
{/* Checkbox */}
<div className={styles.check}>
<input
type="checkbox"
checked={checked}
onChange={onChange}
className={styles.hiddenCheckbox}
/>
</div>
{/* List */}
<div className={styles.list}>
<p className={styles.placeholderTxt}>{label}</p>
<p className={styles.secondaryTxt}>{description}</p>
</div>
</div>
</div>
</div>
</>
);
};
export default Checkbox;

88
frontend/src/app/components/customCheckbox/styles.module.css Normal file
View File

@@ -0,0 +1,88 @@
.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: 10px 12px;
align-items: flex-start;
gap: 16px;
flex: 1 0 0;
border-radius: 8px;
background: #1d1e2a;
}
.check {
display: flex;
padding-top: 4px;
align-items: flex-start;
gap: 10px;
}
.hiddenCheckbox {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 16px;
height: 16px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
position: relative;
border-radius: 4px;
border: 1px solid #e5e7eb;
background: #fff;
}
.hiddenCheckbox:checked {
border-radius: 4px;
border: 1px solid #0067fd;
background: #0067fd;
}
.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;
font-family: Inter;
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: 24px;
letter-spacing: 0.08px;
}
.secondaryTxt {
align-self: stretch;
color: #697281;
font-family: Inter;
font-size: 0.75rem;
font-style: normal;
font-weight: 500;
line-height: 20px;
letter-spacing: 0.07px;
}

6
frontend/src/app/components/fields/styles.module.css
View File

@@ -12,7 +12,7 @@
background-color: transparent;
color: white;
font-family: Inter;
font-size: 16px;
font-size: 1rem;
outline: none;
font-style: normal;
font-weight: 400;
@@ -27,7 +27,7 @@
.input:focus::placeholder {
color: #4b4f6d;
font-family: Inter;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -38,7 +38,7 @@
.input::placeholder {
color: #85869b;
font-family: Inter;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;

15
frontend/src/app/components/header/Header.jsx
View File

@@ -1,15 +0,0 @@
"use client";
import React from "react";
import styles from "./styles.module.css";
import HeaderDetails from "./components/HeaderDetails";
const Header = () => {
return (
<div className={styles.mainContainer}>
<HeaderDetails />
</div>
);
};
export default Header;

281
frontend/src/app/components/header/components/HeaderDetails.jsx
View File

@@ -1,281 +0,0 @@
"use client";
import React from "react";
import orgStyle from "./Organization.module.css";
import profileStyle from "./Profile.module.css";
import { useState } from "react";
const HeaderDetails = () => {
const orgList = [
{ name: "Project Moonshot Inc." },
{ name: "Organization X" },
{ name: "Organization Y" },
{ name: "Organization Z" },
];
const [openOrgDropdown, setOpenOrgDropdown] = useState(false);
const [openProfileDropdown, setOpenProfileDropdown] = useState(false);
const [selectedOrg, setSelectedOrg] = useState(null);
const handleOrgSelect = (index) => {
setSelectedOrg(index);
};
return (
<>
{/* Organization and Dropdown Section*/}
<div className={orgStyle.organizationContainer}>
<div className={orgStyle.orgContainer}>
{/* Logo */}
<div className={orgStyle.orgLogo}></div>
<div className={orgStyle.orgName}>
<p>Organization</p>
<div className={orgStyle.dropdownContainer}>
{/* Dropdown Menu*/}
{openOrgDropdown && (
<div className={orgStyle.dropdown}>
{/* Organization Header and Search */}
<div className={orgStyle.orgSearchContainer}>
{/* Header */}
<div className={orgStyle.createBtnContainer}>
<p>Organization</p>
<div className={orgStyle.createBtn}>
<p>Create</p>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
>
<g clipPath="url(#clip0_548_2226)">
<path
d="M8.00034 14.8718C11.7954 14.8718 14.8718 11.7954 14.8718 8.00034C14.8718 4.20535 11.7954 1.12891 8.00034 1.12891C4.20535 1.12891 1.12891 4.20535 1.12891 8.00034C1.12891 11.7954 4.20535 14.8718 8.00034 14.8718Z"
stroke="#8287FF"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M8 4.8291V11.172"
stroke="#8287FF"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.82812 8H11.171"
stroke="#8287FF"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_548_2226">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
</div>
</div>
{/* Search */}
<div className={orgStyle.srchInputContainer}>
<div className={orgStyle.srchInputGroup}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
>
<g clipPath="url(#clip0_23_1333)">
<path
d="M7.79548 14.424C11.4568 14.424 14.4249 11.4559 14.4249 7.7945C14.4249 4.13315 11.4568 1.16504 7.79548 1.16504C4.13412 1.16504 1.16602 4.13315 1.16602 7.7945C1.16602 11.4559 4.13412 14.424 7.79548 14.424Z"
stroke="#858699"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M16.8359 16.835L12.6172 12.6162"
stroke="#858699"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_23_1333">
<rect width="18" height="18" fill="white" />
</clipPath>
</defs>
</svg>
<input
className={orgStyle.placeholderTxt}
type="text"
name="search"
id=""
placeholder="Search"
/>
</div>
</div>
</div>
{/* Select Options */}
<div className={orgStyle.optionsContainer}>
{orgList.map((org, index) => {
return (
<div
className={orgStyle.orgList}
key={index}
onClick={() => handleOrgSelect(index)}
>
<div
className={`${orgStyle.iconTxt} ${index === selectedOrg ? orgStyle.active : ""}`}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
>
<path
d="M7.87565 14.8747L3.20898 10.208L4.10482 9.31217L7.87565 13.083L15.8757 5.08301L16.7715 5.97884L7.87565 14.8747Z"
fill="#8287FF"
style={{
fill: "#8287FF",
fillOpacity: 1,
}}
/>
</svg>
<p>{org.name}</p>
</div>
</div>
);
})}
</div>
</div>
)}
{/* Button */}
<div
className={orgStyle.dropdownBtn}
onClick={() => setOpenOrgDropdown(!openOrgDropdown)}
>
<p>Project Moonshot Inc.</p>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
>
<path
d="M1.03906 3.51953L6.00031 8.48083L10.9616 3.51953"
stroke="#969AF9"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
{/* Profile Section */}
<div
className={profileStyle.profileContainer}
onClick={() => setOpenProfileDropdown(!openProfileDropdown)}
>
{/* Profile */}
<div className={profileStyle.profileBadge}>
{/* Username and Role*/}
<div className={profileStyle.nameRole}>
<p className={profileStyle.userName}>JM Grills</p>
<p className={profileStyle.userRole}>Super Admin</p>
</div>
{/* User profile*/}
<div className={profileStyle.userImgContainer}>
<div className={profileStyle.userPic}></div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18C10 16.8954 10.8954 16 12 16ZM12 10C13.1046 10 14 10.8954 14 12C14 13.1046 14 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10ZM12 4C13.1046 4 14 4.89543 14 6C14 7.10457 13.1046 8 12 8C10.8954 8 10 7.10457 10 6C10 4.89543 10.8954 4 12 4Z"
fill="#858699"
/>
</svg>
</div>
</div>
{/* Dropdown */}
{openProfileDropdown && (
<div className={profileStyle.dropdownContainer}>
{/* Settings */}
<div className={profileStyle.settingsBtn}>
{/* Icon */}
<div className={profileStyle.btn}>
<svg
xmlns="http://www.w3.org/2000/svg"
width={20}
height={20}
viewBox="0 0 20 20"
fill="none"
>
<path
d="M8.60417 3.5975C8.95917 2.13417 11.0408 2.13417 11.3958 3.5975C11.4491 3.81733 11.5535 4.02148 11.7006 4.19333C11.8477 4.36518 12.0332 4.49988 12.2422 4.58645C12.4512 4.67303 12.6776 4.70904 12.9032 4.69156C13.1287 4.67407 13.3469 4.60359 13.54 4.48583C14.8258 3.7025 16.2983 5.17417 15.515 6.46083C15.3974 6.65388 15.327 6.87195 15.3096 7.09731C15.2922 7.32267 15.3281 7.54897 15.4146 7.75782C15.5011 7.96666 15.6356 8.15215 15.8073 8.29921C15.9789 8.44627 16.1829 8.55075 16.4025 8.60417C17.8658 8.95917 17.8658 11.0408 16.4025 11.3958C16.1827 11.4491 15.9785 11.5535 15.8067 11.7006C15.6348 11.8477 15.5001 12.0332 15.4135 12.2422C15.327 12.4512 15.291 12.6776 15.3084 12.9032C15.3259 13.1287 15.3964 13.3469 15.5142 13.54C16.2975 14.8258 14.8258 16.2983 13.5392 15.515C13.3461 15.3974 13.1281 15.327 12.9027 15.3096C12.6773 15.2922 12.451 15.3281 12.2422 15.4146C12.0333 15.5011 11.8479 15.6356 11.7008 15.8073C11.5537 15.9789 11.4492 16.1829 11.3958 16.4025C11.0408 17.8658 8.95917 17.8658 8.60417 16.4025C8.5509 16.1827 8.44648 15.9785 8.29941 15.8067C8.15233 15.6348 7.96676 15.5001 7.75779 15.4135C7.54882 15.327 7.32236 15.291 7.09685 15.3084C6.87133 15.3259 6.65313 15.3964 6.46 15.5142C5.17417 16.2975 3.70167 14.8258 4.485 13.5392C4.60258 13.3461 4.67296 13.1281 4.6904 12.9027C4.70785 12.6773 4.67187 12.451 4.58539 12.2422C4.49892 12.0333 4.36438 11.8479 4.19273 11.7008C4.02107 11.5537 3.81714 11.4492 3.5975 11.3958C2.13417 11.0408 2.13417 8.95917 3.5975 8.60417C3.81733 8.5509 4.02148 8.44648 4.19333 8.29941C4.36518 8.15233 4.49988 7.96676 4.58645 7.75779C4.67303 7.54882 4.70904 7.32236 4.69156 7.09685C4.67407 6.87133 4.60359 6.65313 4.48583 6.46C3.7025 5.17417 5.17417 3.70167 6.46083 4.485C7.29417 4.99167 8.37417 4.54333 8.60417 3.5975Z"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M7.5 10C7.5 10.663 7.76339 11.2989 8.23223 11.7678C8.70107 12.2366 9.33696 12.5 10 12.5C10.663 12.5 11.2989 12.2366 11.7678 11.7678C12.2366 11.2989 12.5 10.663 12.5 10C12.5 9.33696 12.2366 8.70107 11.7678 8.23223C11.2989 7.76339 10.663 7.5 10 7.5C9.33696 7.5 8.70107 7.76339 8.23223 8.23223C7.76339 8.70107 7.5 9.33696 7.5 10Z"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
<p>Settings</p>
</div>
{/* Logout */}
<div className={profileStyle.logoutBtn}>
{/* Icon */}
<div className={profileStyle.btn}>
<svg
xmlns="http://www.w3.org/2000/svg"
width={20}
height={20}
viewBox="0 0 20 20"
fill="none"
>
<path
d="M11.5625 6.875V5.3125C11.5625 4.8981 11.3979 4.50067 11.1049 4.20765C10.8118 3.91462 10.4144 3.75 10 3.75H4.53125C4.11685 3.75 3.71942 3.91462 3.4264 4.20765C3.13337 4.50067 2.96875 4.8981 2.96875 5.3125V14.6875C2.96875 15.1019 3.13337 15.4993 3.4264 15.7924C3.71942 16.0854 4.11685 16.25 4.53125 16.25H10C10.4144 16.25 10.8118 16.0854 11.1049 15.7924C11.3979 15.4993 11.5625 15.1019 11.5625 14.6875V13.125M7.65625 10H17.0312M17.0312 10L14.6875 7.65625M17.0312 10L14.6875 12.3437"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
<p>Logout</p>
</div>
</div>
)}
</div>
</>
);
};
export default HeaderDetails;

10
frontend/src/app/components/header/styles.module.css
View File

@@ -1,10 +0,0 @@
.mainContainer {
display: flex;
height: 84px;
padding: 12px 24px;
justify-content: space-between;
align-items: center;
align-self: stretch;
border-bottom: 1px solid #2c2d3d;
border-bottom: 1px solid color(display-p3 0.1725 0.1765 0.2353);
}

3
frontend/src/app/components/icons/check.jsx
View File

@@ -11,8 +11,9 @@ const CheckIcon = (props) => {
{...props}
>
<path
d="M4.53125 10L8.4375 13.9062L16.25 6.09375"
d="M14.625 6.14583V16.9375L10 13.8542L5.375 16.9375V6.14583C5.375 5.32808 5.69985 4.54382 6.27809 3.96559C6.85632 3.38735 7.64058 3.0625 8.45833 3.0625H11.5417C12.3594 3.0625 13.1437 3.38735 13.7219 3.96559C14.3001 4.54382 14.625 5.32808 14.625 6.14583Z"
stroke="white"
strokeOpacity={1}
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"

44
frontend/src/app/components/icons/create.jsx Normal file
View File

@@ -0,0 +1,44 @@
import React from "react";
const create = ({ width = "16", height = "16" }) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={width}
height={height}
viewBox="0 0 16 16"
fill="none"
>
<g clipPath="url(#clip0_548_2226)">
<path
d="M8.00034 14.8718C11.7954 14.8718 14.8718 11.7954 14.8718 8.00034C14.8718 4.20535 11.7954 1.12891 8.00034 1.12891C4.20535 1.12891 1.12891 4.20535 1.12891 8.00034C1.12891 11.7954 4.20535 14.8718 8.00034 14.8718Z"
stroke="#8287FF"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M8 4.8291V11.172"
stroke="#8287FF"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.82812 8H11.171"
stroke="#8287FF"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_548_2226">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
);
};
export default create;

21
frontend/src/app/components/icons/ellipsis.jsx Normal file
View File

@@ -0,0 +1,21 @@
import React from "react";
const ellipsis = ({ width = "24", height = "24", style }) => {
return (
<svg
className={style}
xmlns="http://www.w3.org/2000/svg"
width={width}
height={height}
viewBox="0 0 24 24"
fill="none"
>
<path
d="M12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18C10 16.8954 10.8954 16 12 16ZM12 10C13.1046 10 14 10.8954 14 12C14 13.1046 14 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10ZM12 4C13.1046 4 14 4.89543 14 6C14 7.10457 13.1046 8 12 8C10.8954 8 10 7.10457 10 6C10 4.89543 10.8954 4 12 4Z"
fill="currentColor"
/>
</svg>
);
};
export default ellipsis;

22
frontend/src/app/components/icons/hamburger.jsx Normal file
View File

@@ -0,0 +1,22 @@
import React from "react";
const hamburger = (props) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
{...props}
>
<path
d="M3 4H21V6H3V4ZM3 11H15V13H3V11ZM3 18H21V20H3V18Z"
fill="currentColor"
style={{ fillOpacity: 1 }}
/>
</svg>
);
};
export default hamburger;

37
frontend/src/app/components/icons/link.jsx Normal file
View File

@@ -0,0 +1,37 @@
import React from "react";
const Link = ({ color = "#969AF9", width = "24", height = "24" }) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={height}
height={width}
viewBox="0 0 24 24"
fill="none"
>
<path
d="M9 15L15 9"
stroke={color}
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M11 6.00031L11.463 5.46431C12.4008 4.52663 13.6727 3.99991 14.9989 4C16.325 4.00009 17.5968 4.527 18.5345 5.46481C19.4722 6.40261 19.9989 7.6745 19.9988 9.00066C19.9987 10.3268 19.4718 11.5986 18.534 12.5363L18 13.0003"
stroke={color}
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M13.0001 18L12.6031 18.534C11.6544 19.4722 10.3739 19.9984 9.03964 19.9984C7.70535 19.9984 6.42489 19.4722 5.47614 18.534C5.0085 18.0716 4.63724 17.521 4.38385 16.9141C4.13047 16.3073 4 15.6561 4 14.9985C4 14.3408 4.13047 13.6897 4.38385 13.0829C4.63724 12.476 5.0085 11.9254 5.47614 11.463L6.00014 11"
stroke={color}
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default Link;

23
frontend/src/app/components/icons/logout.jsx Normal file
View File

@@ -0,0 +1,23 @@
import React from "react";
const logout = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={20}
height={20}
viewBox="0 0 20 20"
fill="none"
>
<path
d="M11.5625 6.875V5.3125C11.5625 4.8981 11.3979 4.50067 11.1049 4.20765C10.8118 3.91462 10.4144 3.75 10 3.75H4.53125C4.11685 3.75 3.71942 3.91462 3.4264 4.20765C3.13337 4.50067 2.96875 4.8981 2.96875 5.3125V14.6875C2.96875 15.1019 3.13337 15.4993 3.4264 15.7924C3.71942 16.0854 4.11685 16.25 4.53125 16.25H10C10.4144 16.25 10.8118 16.0854 11.1049 15.7924C11.3979 15.4993 11.5625 15.1019 11.5625 14.6875V13.125M7.65625 10H17.0312M17.0312 10L14.6875 7.65625M17.0312 10L14.6875 12.3437"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default logout;

32
frontend/src/app/components/icons/plus.jsx Normal file
View File

@@ -0,0 +1,32 @@
import React from "react";
const plus = () => {
return (
<>
<svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
>
<path
d="M12 5.29199V18.7087"
stroke="#333649"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5.29102 12H18.7077"
stroke="#333649"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</>
);
};
export default plus;

22
frontend/src/app/components/icons/publish.jsx Normal file
View File

@@ -0,0 +1,22 @@
import React from "react";
const PublishIcon = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M20 8L20 6C20 5.46957 19.7893 4.96086 19.4142 4.58579C19.0391 4.21071 18.5304 4 18 4L6 4C5.46957 4 4.96086 4.21072 4.58579 4.58579C4.21071 4.96086 4 5.46957 4 6L4 8M17 14L12 9M12 9L7 14M12 9L12 21"
stroke="#D2D3E0"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default PublishIcon;

2
frontend/src/app/components/icons/search.jsx
View File

@@ -12,7 +12,7 @@ const SearchIcon = (props) => {
>
<path
d="M19.5527 19.5536L14.7064 14.7074M9.16822 16.7847C13.3741 16.7847 16.7837 13.3751 16.7837 9.1692C16.7837 4.96328 13.3741 1.55371 9.16822 1.55371C4.9623 1.55371 1.55273 4.96328 1.55273 9.1692C1.55273 13.3751 4.9623 16.7847 9.16822 16.7847Z"
stroke="#858699"
stroke="currentColor" //858699
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"

30
frontend/src/app/components/icons/settings.jsx Normal file
View File

@@ -0,0 +1,30 @@
import React from "react";
const settings = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={20}
height={20}
viewBox="0 0 20 20"
fill="none"
>
<path
d="M8.60417 3.5975C8.95917 2.13417 11.0408 2.13417 11.3958 3.5975C11.4491 3.81733 11.5535 4.02148 11.7006 4.19333C11.8477 4.36518 12.0332 4.49988 12.2422 4.58645C12.4512 4.67303 12.6776 4.70904 12.9032 4.69156C13.1287 4.67407 13.3469 4.60359 13.54 4.48583C14.8258 3.7025 16.2983 5.17417 15.515 6.46083C15.3974 6.65388 15.327 6.87195 15.3096 7.09731C15.2922 7.32267 15.3281 7.54897 15.4146 7.75782C15.5011 7.96666 15.6356 8.15215 15.8073 8.29921C15.9789 8.44627 16.1829 8.55075 16.4025 8.60417C17.8658 8.95917 17.8658 11.0408 16.4025 11.3958C16.1827 11.4491 15.9785 11.5535 15.8067 11.7006C15.6348 11.8477 15.5001 12.0332 15.4135 12.2422C15.327 12.4512 15.291 12.6776 15.3084 12.9032C15.3259 13.1287 15.3964 13.3469 15.5142 13.54C16.2975 14.8258 14.8258 16.2983 13.5392 15.515C13.3461 15.3974 13.1281 15.327 12.9027 15.3096C12.6773 15.2922 12.451 15.3281 12.2422 15.4146C12.0333 15.5011 11.8479 15.6356 11.7008 15.8073C11.5537 15.9789 11.4492 16.1829 11.3958 16.4025C11.0408 17.8658 8.95917 17.8658 8.60417 16.4025C8.5509 16.1827 8.44648 15.9785 8.29941 15.8067C8.15233 15.6348 7.96676 15.5001 7.75779 15.4135C7.54882 15.327 7.32236 15.291 7.09685 15.3084C6.87133 15.3259 6.65313 15.3964 6.46 15.5142C5.17417 16.2975 3.70167 14.8258 4.485 13.5392C4.60258 13.3461 4.67296 13.1281 4.6904 12.9027C4.70785 12.6773 4.67187 12.451 4.58539 12.2422C4.49892 12.0333 4.36438 11.8479 4.19273 11.7008C4.02107 11.5537 3.81714 11.4492 3.5975 11.3958C2.13417 11.0408 2.13417 8.95917 3.5975 8.60417C3.81733 8.5509 4.02148 8.44648 4.19333 8.29941C4.36518 8.15233 4.49988 7.96676 4.58645 7.75779C4.67303 7.54882 4.70904 7.32236 4.69156 7.09685C4.67407 6.87133 4.60359 6.65313 4.48583 6.46C3.7025 5.17417 5.17417 3.70167 6.46083 4.485C7.29417 4.99167 8.37417 4.54333 8.60417 3.5975Z"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M7.5 10C7.5 10.663 7.76339 11.2989 8.23223 11.7678C8.70107 12.2366 9.33696 12.5 10 12.5C10.663 12.5 11.2989 12.2366 11.7678 11.7678C12.2366 11.2989 12.5 10.663 12.5 10C12.5 9.33696 12.2366 8.70107 11.7678 8.23223C11.2989 7.76339 10.663 7.5 10 7.5C9.33696 7.5 8.70107 7.76339 8.23223 8.23223C7.76339 8.70107 7.5 9.33696 7.5 10Z"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default settings;

30
frontend/src/app/components/icons/sun.jsx Normal file
View File

@@ -0,0 +1,30 @@
import React from "react";
const sun = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
>
<path
d="M8 12C8 13.0609 8.42143 14.0783 9.17157 14.8284C9.92172 15.5786 10.9391 16 12 16C13.0609 16 14.0783 15.5786 14.8284 14.8284C15.5786 14.0783 16 13.0609 16 12C16 10.9391 15.5786 9.92172 14.8284 9.17157C14.0783 8.42143 13.0609 8 12 8C10.9391 8 9.92172 8.42143 9.17157 9.17157C8.42143 9.92172 8 10.9391 8 12Z"
stroke="white"
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M3 12H4M12 3V4M20 12H21M12 20V21M5.6 5.6L6.3 6.3M18.4 5.6L17.7 6.3M17.7 17.7L18.4 18.4M6.3 17.7L5.6 18.4"
stroke="white"
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default sun;

23
frontend/src/app/components/icons/viewLogs.jsx Normal file
View File

@@ -0,0 +1,23 @@
import React from "react";
const ViewLogsIcon = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M14.5 4H17C17.7956 4 18.5587 4.31607 19.1213 4.87868C19.6839 5.44129 20 6.20435 20 7V17C20 17.7956 19.6839 18.5587 19.1213 19.1213C18.5587 19.6839 17.7956 20 17 20H7C6.20435 20 5.44129 19.6839 4.87868 19.1213C4.31607 18.5587 4 17.7956 4 17V12M6 5L4 7L6 9M10 9L12 7L10 5"
stroke="#D2D3E0"
style={{ stroke: "#D2D3E0", strokeOpacity: 1 }}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default ViewLogsIcon;

20
frontend/src/app/components/mobileSearchBar/MobileSearchBar.jsx Normal file
View File

@@ -0,0 +1,20 @@
import React, { useState } from "react";
import styles from "./styles.module.css";
import SearchIcon from "../icons/search";
const MobileSearchBar = (props) => {
const [open, setOpen] = useState(false);
return (
<form className={`${styles.searchBarContainer} ${open ? styles.open : ""}`}>
<input type="text" placeholder="Search" className={styles.searchBar} />
<div
className={styles.searchBtn}
onClick={() => setOpen((open) => !open)}
>
<SearchIcon />
</div>
</form>
);
};
export default MobileSearchBar;

68
frontend/src/app/components/mobileSearchBar/styles.module.css Normal file
View File

@@ -0,0 +1,68 @@
.searchBarContainer {
display: flex;
align-items: center;
gap: 10px;
align-self: stretch;
position: relative;
width: 100%;
border: 1px solid #31324a00;
transition: width 0.35s ease;
}
.searchBar:focus-within {
background: #292a36;
border-radius: 6px;
}
.open {
display: flex;
align-items: center;
gap: 8px;
border-radius: 6px;
border: 1px solid #31324a;
}
.searchBar {
width: 100%;
padding: 11px 12px;
padding-left: 40px;
background-color: transparent;
border: none;
opacity: 0;
transition: opacity 0.35s ease;
outline: none;
color: #85869b;
text-align: start;
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.09px;
caret-color: #575bc7;
}
.searchBar::placeholder {
color: #85869b;
text-align: start;
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.09px;
}
.open > .searchBar {
opacity: 1;
transition-delay: 0.1s;
}
.searchBtn {
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-40%);
cursor: pointer;
color: #858699;
}
.searchBtn:hover {
color: #959aff;
}

39
frontend/src/app/components/mobileToggleTab/Toggle.jsx Normal file
View File

@@ -0,0 +1,39 @@
import React from "react";
import styles from "./styles.module.css";
import MobileSearchBar from "@/app/components/mobileSearchBar/MobileSearchBar";
import useIsMobile from "@/app/hooks/useIsMobile";
import PlusIcon from "../icons/plus";
const Toggle = ({ tabs = [], activeTab, onChange }) => {
const isMobile = useIsMobile();
return (
<div className={styles.toggleContainer}>
<div className={styles.buttonToggles}>
{tabs.map((tab) => (
<button
key={tab.value}
className={`${styles.buttonStyle} ${activeTab === tab.value ? styles.active : ""}`}
onClick={() => onChange(tab.value)}
>
{tab.label}
</button>
))}
</div>
{isMobile && activeTab === "permissions" && (
<div className={styles.container}>
<div className={styles.searchBar}>
<MobileSearchBar />
</div>
<button>
<PlusIcon />
</button>
</div>
)}
</div>
);
};
export default Toggle;

61
frontend/src/app/components/mobileToggleTab/styles.module.css Normal file
View File

@@ -0,0 +1,61 @@
.toggleContainer {
display: none;
}
@media (max-width: 950px) {
.toggleContainer {
display: flex;
flex-direction: column;
align-self: stretch;
gap: 16px;
}
.buttonToggles {
display: flex;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.container {
display: flex;
align-items: center;
gap: 16px;
flex: 1 0 0;
padding: 8px 0;
}
.searchBar {
width: 100%;
}
.container > button {
display: flex;
padding: 8px;
border: none;
justify-content: center;
align-items: end;
gap: 12px;
border-radius: 6px;
background: #27293b;
}
.buttonStyle {
display: flex;
background: none;
border: none;
padding: 24px 4px 16px 4px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 5px;
color: #85869b;
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.18px;
}
.active {
border-bottom: 1px solid #959aff;
color: #959aff;
}
}

110
frontend/src/app/components/navbar/Navbar.jsx Normal file
View File

@@ -0,0 +1,110 @@
"use client";
import React, { useState } from "react";
import styles from "./styles.module.css";
import NavLeft from "./navleft/Header";
import NavRight from "./navright/Profile";
import HamburgerIcon from "../../components/icons/hamburger";
import useIsMobile from "@/app/hooks/useIsMobile";
import LogoIcon from "../icons/logo";
import HomeIcon from "../icons/home";
import OrganizationIcon from "../icons/organization";
import ProjectIcon from "../icons/project";
import UserIcon from "../icons/user";
import RolesIcon from "../icons/roles";
import CredentialsIcon from "../icons/credentials";
import AgentIcon from "../icons/agent";
import DownloadIcon from "../icons/download";
import useNavigations from "@/app/hooks/useNagivation";
import { usePathname } from "next/navigation";
const Navbar = () => {
const [triggerDropDown, setTriggerDropDown] = useState(false);
const {
navToAgents,
navToCredentials,
navToProject,
navToRoles,
navToHome,
navToOrganization,
navToUsers,
} = useNavigations(setTriggerDropDown);
const pathname = usePathname();
const isMobile = useIsMobile();
return (
<div
className={`${styles.mainContainer} ${pathname.includes("/add") ? styles.onAdd : ""}`}
>
{/* Mobile Hamburger Button */}
<div className={styles.mobileHamburger}>
<div className={styles.hamburgerMenu}>
<HamburgerIcon
onClick={() => setTriggerDropDown(!triggerDropDown)}
className={triggerDropDown ? styles.active : ""}
/>
{triggerDropDown && (
<div className={styles.dropDownMenu}>
<div className={styles.headings}>
<div>
<div className={styles.logoContainer}>
<LogoIcon />
</div>
<div className={styles.info}>
<p>Internal Developer Platform</p>
<p>By Project Moonshot Inc.</p>
</div>
</div>
</div>
<div className={styles.navs}>
<div className={styles.nav} onClick={navToHome}>
<HomeIcon />
<p>Home</p>
</div>
<div className={styles.nav} onClick={navToOrganization}>
<OrganizationIcon />
<p>Organization</p>
</div>
<div className={styles.nav} onClick={navToProject}>
<ProjectIcon />
<p>Project</p>
</div>
<div className={styles.nav} onClick={navToUsers}>
<UserIcon />
<p>Users</p>
</div>
<div className={styles.nav} onClick={navToRoles}>
<RolesIcon />
<p>Roles</p>
</div>
<div className={styles.nav} onClick={navToCredentials}>
<CredentialsIcon />
<p>Credentials</p>
</div>
<div className={styles.nav} onClick={navToAgents}>
<AgentIcon />
<p>Agents</p>
</div>
</div>
<div className={styles.footer}>
<div>
<div>
<p>Download ICTL v3</p>
<DownloadIcon />
</div>
</div>
</div>
</div>
)}
</div>
<NavLeft />
</div>
{/* Mobile Menu Button */}
<NavRight />
</div>
);
};
export default Navbar;

70
frontend/src/app/components/navbar/navleft/Header.jsx Normal file
View File

@@ -0,0 +1,70 @@
import React, { useState } from "react";
import HeaderDropdown from "./HeaderDropdown";
import styles from "./styles.module.css";
import ArrowDownIcon from "../../icons/arrowDown";
import useIsMobile from "@/app/hooks/useIsMobile";
const Header = () => {
const [open, setOpen] = useState(false);
const [selectedOrg, setSelectedOrg] = useState(0);
const sampleData = [
{ name: "Project Moonshot Inc." },
{ name: "Organization X" },
{ name: "Organization Y" },
{ name: "Organization Z" },
];
const isMobile = useIsMobile();
return (
<>
{/* Organization Header */}
<div className={styles.organizationContainer}>
<div
className={styles.orgContainer}
onClick={isMobile ? () => setOpen(!open) : null} //toggler entire header
>
{/* Logo */}
<div className={styles.orgLogo}></div>
<div className={styles.orgName}>
<p
className={`${styles.orgNameText} ${isMobile && open ? styles.orgNameActive : ""}`}
>
Organization
</p>
<div className={styles.dropdownContainer}>
{/* Dropdown Menu*/}
{open && (
<HeaderDropdown
setOpen={setOpen}
sampleData={sampleData}
selectedOrg={selectedOrg}
setSelectedOrg={setSelectedOrg}
/>
)}
{/* Toggle Button */}
<div
className={styles.dropdownBtn}
onClick={() => {
if (!isMobile) setOpen(!open); //toggle only org
}}
>
<p
className={`${styles.projectName} ${isMobile && open ? styles.projectNameActive : ""}`}
>
{sampleData[selectedOrg].name}
</p>
<div
className={`${styles.arrowIcon} ${isMobile && open ? styles.arrowRotate : ""}`}
>
<ArrowDownIcon width={12} height={12} color="#969AF9" />
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
};
export default Header;

116
frontend/src/app/components/navbar/navleft/HeaderDropdown.jsx Normal file
View File

@@ -0,0 +1,116 @@
import React, { useState } from "react";
import CreateIcon from "../../icons/create";
import styles from "./styles.module.css";
import useIsMobile from "@/app/hooks/useIsMobile";
import SearchIcon from "../../icons/search";
const HeaderDropdown = ({
setOpen,
sampleData,
selectedOrg,
setSelectedOrg,
}) => {
const isMobile = useIsMobile();
const handleOrgSelect = (index) => {
setSelectedOrg(index);
setOpen(false);
};
return (
<div className={styles.dropdown}>
{/* Organization Header and Search */}
<div className={styles.orgSearchContainer}>
{/* Header */}
<div className={styles.createBtnContainer}>
<p>Organization</p>
<div className={styles.createBtn}>
<p>Create</p>
{isMobile ? <CreateIcon width="24" height="24" /> : <CreateIcon />}
</div>
</div>
{/* Search */}
<div className={styles.srchInputContainer}>
<form className={styles.srchInputGroup}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
>
<g clipPath="url(#clip0_23_1333)">
<path
d="M7.79548 14.424C11.4568 14.424 14.4249 11.4559 14.4249 7.7945C14.4249 4.13315 11.4568 1.16504 7.79548 1.16504C4.13412 1.16504 1.16602 4.13315 1.16602 7.7945C1.16602 11.4559 4.13412 14.424 7.79548 14.424Z"
stroke="#858699"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M16.8359 16.835L12.6172 12.6162"
stroke="#858699"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_23_1333">
<rect width="18" height="18" fill="white" />
</clipPath>
</defs>
</svg>
<input
className={styles.placeholderTxt}
type="text"
name="search"
id=""
placeholder="Search"
/>
</form>
</div>
</div>
{/* Select Options */}
<div className={styles.optionsContainer}>
{sampleData.map((org, index) => {
return (
<div
className={styles.orgList}
key={index}
onClick={(e) => {
e.stopPropagation();
handleOrgSelect(index);
}}
>
<div
className={`${styles.iconTxt} ${index === selectedOrg ? styles.active : ""}`}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
>
<path
d="M7.87565 14.8747L3.20898 10.208L4.10482 9.31217L7.87565 13.083L15.8757 5.08301L16.7715 5.97884L7.87565 14.8747Z"
fill="#8287FF"
style={{
fill: "#8287FF",
fillOpacity: 1,
}}
/>
</svg>
<p>{org.name}</p>
</div>
</div>
);
})}
</div>
</div>
);
};
export default HeaderDropdown;

89
frontend/src/app/components/header/components/Organization.module.css → frontend/src/app/components/navbar/navleft/styles.module.css
View File

@@ -9,7 +9,9 @@
align-items: center;
gap: 16px;
border-radius: 4px;
align-self: stretch;
}
.orgLogo {
width: 38px;
height: 38px;
@@ -29,9 +31,8 @@
align-items: flex-start;
gap: 4px;
}
.orgName > p {
.orgNameText {
color: #eeeffd;
color: color(display-p3 0.9333 0.9373 0.9882);
font-family: Inter;
font-size: 14px;
font-style: normal;
@@ -51,16 +52,15 @@
align-items: center;
gap: 16px;
}
.dropdownBtn > p {
.projectName {
color: #85869b;
color: color(display-p3 0.5216 0.5255 0.6);
font-family: Inter;
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.dropdownBtn > div {
.arrowIcon {
display: inline-flex;
padding: 8px;
justify-content: center;
@@ -68,8 +68,12 @@
gap: 10px;
border-radius: 100px;
border: 1px solid #b8badc00;
transition: transform 0.3s ease;
}
.dropdownBtn > div:hover {
.arrowRotate {
transform: rotate(180deg);
}
.arrowIcon:hover {
border: 1px solid #b8badc;
background: linear-gradient(
180deg,
@@ -85,11 +89,9 @@
gap: 12px;
border-radius: 6px;
background: #2d3143;
background: color(display-p3 0.1804 0.1922 0.2588);
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 2px 15px 0 color(display-p3 0 0 0 / 0.25);
position: absolute;
z-index: 1;
z-index: 30;
top: 100%;
margin-top: 8px;
left: 0;
@@ -109,7 +111,8 @@
.orgSearchContainer {
display: flex;
width: 318px;
width: 100%;
min-width: 318px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
@@ -181,7 +184,6 @@
flex: 1 0 0;
border-radius: 4px;
background: #282c3c;
background: color(display-p3 0.1593 0.1702 0.2316);
}
.placeholderTxt {
@@ -194,7 +196,6 @@
}
.placeholderTxt::placeholder {
color: #85869b;
color: color(display-p3 0.5216 0.5255 0.6);
font-family: Inter;
font-size: 16px;
font-style: normal;
@@ -205,18 +206,15 @@
.optionsContainer {
display: flex;
width: 318px;
flex-direction: column;
align-items: flex-start;
width: 100%;
}
.orgList:hover {
border-radius: 4px;
background: #3c4159;
color: #acb0ff;
background: color(display-p3 0.2398 0.2548 0.3399);
}
.orgList {
display: flex;
padding: 6px;
@@ -243,10 +241,67 @@
.iconTxt > p {
color: #d2d3e1;
color: color(display-p3 0.8235 0.8275 0.8784);
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
/* Mobile */
@media (max-width: 768px) {
.dropdown {
display: flex;
background: linear-gradient(0deg, #2d3143 0%, #191a24 100%);
border-radius: 0;
position: fixed;
top: 80px;
left: 0;
width: 100%;
margin-top: 0;
box-shadow: none;
}
.orgSearchContainer {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
align-self: stretch;
}
.createBtnContainer {
padding: 8px 0;
}
.createBtnContainer > p {
font-size: 16px;
}
.createBtn {
gap: 8px;
}
.createBtn > p {
font-size: 16px;
}
.srchInputGroup {
display: flex;
width: 358px;
height: 38px;
padding: 10px 12px;
border-radius: 6px;
}
.optionsContainer {
align-self: stretch;
}
.iconTxt > p {
font-size: 16px;
font-weight: 400;
}
.orgNameText {
color: #85869b;
}
.orgNameActive {
color: #eeeffd;
}
.projectNameActive {
color: #959aff;
}
}

59
frontend/src/app/components/navbar/navright/Profile.jsx Normal file
View File

@@ -0,0 +1,59 @@
import React, { useState } from "react";
import EllipsisIcon from "../../icons/ellipsis";
import ProfileDropdown from "./ProfileDropdown";
import styles from "./styles.module.css";
import useIsMobile from "@/app/hooks/useIsMobile";
const Profile = () => {
const isMobile = useIsMobile();
const [open, setOpen] = useState(false);
const sampleData = [
{
name: "JM Grills",
role: "Super Admin",
},
];
return (
<>
{/* Profile Section */}
<div className={styles.profileContainer}>
{/* Profile */}
<div
className={styles.profileBadgeButton}
onClick={() => setOpen(!open)}
>
{/* Username and Role*/}
{sampleData.map((data, index) => {
return (
<div className={styles.nameRole} key={index}>
<p className={styles.userName}>{data.name}</p>
<p className={styles.userRole}>{data.role}</p>
</div>
);
})}
{/* User profile*/}
<div className={styles.userImgContainer}>
<div className={styles.userPic}></div>
<EllipsisIcon />
</div>
</div>
{/* Mobile Ellipsis */}
<div
className={`${styles.mobileEllipsis} ${open ? styles.active : ""}`}
onClick={() => setOpen(!open)}
>
<EllipsisIcon style={isMobile ? styles.rotated : ""} />
</div>
{/* Dropdown */}
{open && <ProfileDropdown isMobile={isMobile} user={sampleData[0]} />}
</div>
</>
);
};
export default Profile;

51
frontend/src/app/components/navbar/navright/ProfileDropdown.jsx Normal file
View File

@@ -0,0 +1,51 @@
import React from "react";
import styles from "./styles.module.css";
import SettingsIcon from "../../icons/settings";
import LogoutIcon from "../../icons/logout";
const ProfileDropdown = ({ isMobile, user }) => {
return (
<div className={styles.dropdownContainer}>
{/* Settings */}
{/* Mobile View */}
{isMobile && (
<>
<div className={styles.profileBadge}>
{/* User profile*/}
<div className={styles.userImgContainer}>
<div className={styles.userPic}></div>
</div>
{/* Username and Role*/}
<div className={styles.nameRole}>
<p className={styles.userName}>{user.name}</p>
<p className={styles.userRole}>{user.role}</p>
</div>
</div>
<div className={styles.divider}></div>
</>
)}
<div className={styles.actionButtons}>
<div className={styles.settingsBtn}>
{/* Icon */}
<div className={styles.btn}>
<SettingsIcon />
</div>
<p>Settings</p>
</div>
{/* Logout */}
<div className={styles.logoutBtn}>
{/* Icon */}
<div className={styles.btn}>
<LogoutIcon />
</div>
<p>Logout</p>
</div>
</div>
</div>
);
};
export default ProfileDropdown;

126
frontend/src/app/components/header/components/Profile.module.css → frontend/src/app/components/navbar/navright/styles.module.css
View File

@@ -7,7 +7,8 @@
cursor: pointer;
position: relative;
}
.profileBadge {
.profileBadge,
.profileBadgeButton {
display: flex;
padding: 6px 0 6px 8px;
justify-content: flex-end;
@@ -15,12 +16,10 @@
gap: 10px;
border-radius: 6px;
}
.profileBadge:hover {
.profileBadgeButton:hover {
border-radius: 6px;
background: #21232f;
background: color(display-p3 0.1294 0.1373 0.1804);
}
.nameRole {
display: flex;
flex-direction: column;
@@ -31,7 +30,6 @@
.userName {
align-self: stretch;
color: #d2d3e1;
color: color(display-p3 0.8235 0.8275 0.8784);
text-align: right;
leading-trim: both;
text-edge: cap;
@@ -46,7 +44,6 @@
.userRole {
align-self: stretch;
color: #85869b;
color: color(display-p3 0.5216 0.5255 0.6);
text-align: right;
leading-trim: both;
text-edge: cap;
@@ -81,12 +78,10 @@
left: 0;
border-radius: 6px;
background: #2d3144;
background: color(display-p3 0.1787 0.1913 0.2605);
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 2px 15px 0 color(display-p3 0 0 0 / 0.25);
cursor: pointer;
position: absolute;
z-index: 10;
z-index: 30;
top: 100%;
margin-top: 3px;
animation-name: dropDownAnimation;
@@ -103,6 +98,13 @@
}
}
.actionButtons {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
}
.settingsBtn,
.logoutBtn {
display: flex;
@@ -113,13 +115,14 @@
color: #acb0ff;
border-radius: 4px;
}
.settingsBtn:hover,
.settingsBtn:hover {
background: #3c4159;
color: #d2d3e1;
}
.logoutBtn:hover {
background: #3c4159;
background: color(display-p3 0.2392 0.2549 0.3412);
color: #d2d3e1;
color: color(display-p3 0.8235 0.8275 0.8784);
}
.btn {
display: flex;
@@ -128,13 +131,102 @@
gap: 12px;
}
.settingsBtn,
.logoutBtn > p {
color: #acb0ff;
color: color(display-p3 0.678 0.6895 1);
.settingsBtn > p {
color: inherit;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.logoutBtn > p {
color: inherit;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.rotated {
transform: rotate(90deg);
}
.mobileEllipsis {
display: none;
}
.mobileEllipsis.active {
color: #959aff;
}
/* Mobile */
@media (max-width: 768px) {
.dropdownContainer {
display: flex;
width: 390px;
padding: 16px;
border-radius: 0;
flex-direction: column;
align-items: flex-start;
gap: 16px;
background: linear-gradient(0deg, #2d3143 0%, #191a24 100%);
position: fixed;
top: 80px;
left: 0;
width: 100%;
margin-top: 0;
box-shadow: none;
}
.mobileEllipsis {
display: flex;
height: 61px;
align-items: center;
gap: 10px;
padding-right: 10px;
cursor: pointer;
color: #85869b;
}
.profileBadgeButton {
display: none;
}
.profileBadge {
display: flex;
padding: 12px 16px;
align-items: center;
gap: 24px;
}
.userImgContainer {
width: 50px;
height: 50px;
aspect-ratio: 1/1;
}
.userPic {
width: 100%;
height: 100%;
border-radius: 50%;
}
.nameRole {
align-items: flex-start;
gap: 10px;
}
.userName {
text-align: start;
font-size: 18px;
letter-spacing: -0.18px;
}
.userRole {
font-size: 14px;
}
.divider {
height: 1px;
align-self: stretch;
background: #393d53;
}
.actionButtons {
border-radius: 6px;
padding: 6px;
align-items: center;
gap: 6px;
align-self: stretch;
}
}

174
frontend/src/app/components/navbar/styles.module.css Normal file
View File

@@ -0,0 +1,174 @@
.mainContainer {
display: flex;
height: 84px;
padding: 12px 24px;
justify-content: space-between;
align-items: center;
align-self: stretch;
border-bottom: 1px solid #2c2d3d;
}
/* Mobile */
.hamburgerMenu {
display: none;
height: 61px;
padding-left: 16px;
align-items: center;
gap: 10px;
flex-shrink: 0;
cursor: pointer;
}
.active path {
color: #8187ff;
}
.dropDownMenu {
display: flex;
width: 100vw;
flex-direction: column;
align-items: center;
position: absolute;
background: linear-gradient(0deg, #2d3143 0%, #191a24 100%);
left: 0;
z-index: 2;
top: 60px;
animation-name: dropDownAnimation;
animation-duration: 200ms;
}
.headings {
display: flex;
padding: 32px 16px 16px 16px;
flex-direction: column;
align-items: center;
gap: 24px;
align-self: stretch;
}
.headings > div {
display: flex;
padding-right: 6px;
align-items: center;
gap: 8px;
align-self: stretch;
}
.logoContainer {
display: flex;
width: 50px;
height: 50px;
justify-content: center;
align-items: center;
gap: 9px;
aspect-ratio: 1/1;
}
.info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 4px;
flex: 1 0 0;
}
.info p {
color: #85869b;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.07px;
}
.info > p:nth-child(1) {
color: #fff;
font-size: 18px;
font-weight: 500;
line-height: 18px; /* 100% */
}
.navs {
display: flex;
padding: 16px 0;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
}
.nav {
display: flex;
padding: 8px 16px;
align-items: center;
gap: 16px;
align-self: stretch;
}
.nav:hover {
background: rgba(149, 154, 255, 0.05);
}
.nav path {
stroke: #858699;
}
.nav:hover path {
stroke: #d2d3e0;
}
.nav p {
color: #d2d3e1;
font-size: 18px;
font-weight: 400;
line-height: normal;
}
.footer {
display: flex;
padding: 16px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
align-self: stretch;
}
.footer > div {
display: flex;
padding: 12px 16px;
flex-direction: column;
align-items: flex-start;
gap: 24px;
align-self: stretch;
border-radius: 8px;
background: #1d1e2c;
}
.footer > div > div {
display: flex;
height: 24px;
justify-content: space-between;
align-items: center;
align-self: stretch;
}
@keyframes dropDownAnimation {
0% {
opacity: 0;
transform: translateY(-5%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
.mobileHamburger {
display: flex;
height: 61px;
align-items: center;
gap: 10px;
flex-shrink: 0;
position: relative;
}
.mainContainer {
display: flex;
padding: 12px 0px;
align-items: center;
border-bottom: none;
}
.hamburgerMenu {
display: flex;
}
.onAdd {
display: none;
}
}

64
frontend/src/app/components/permissions/Permissions.jsx
View File

@@ -3,54 +3,30 @@ import DeleteIcon from "../icons/delete";
import FileIcon from "../icons/file";
import editUserStyle from "./styles.module.css";
import React from "react";
import PlusIcon from "../icons/plus";
const Permissions = ({ sampleData = [] }) => {
return (
<>
{/* Permissions */}
<div className={editUserStyle.userPermissions}>
{/* Add permissions */}
<div className={editUserStyle.imanginaryDiv}></div>
<div className={editUserStyle.permissionsContainer}>
{/* Header */}
<div className={editUserStyle.permissionsHeader}>
<p>Permissions</p>
<div className={editUserStyle.svgContainer}>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
>
<path
d="M12 5.29199V18.7087"
stroke="#333649"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5.29102 12H18.7077"
stroke="#333649"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
</div>
<div className={editUserStyle.permissionsContainer}>
<div className={editUserStyle.permissionsHeader}>
<p>Permissions</p>
<div className={editUserStyle.svgContainer}>
{/* Button ni */}
<button>
<PlusIcon />
</button>
</div>
</div>
{sampleData.length === 0 ? (
// Default Message
<div className={editUserStyle.permissionDefaultState}>
<p>No permission added yet</p>
</div>
) : (
// Sampple Data(static)
sampleData.map((perm, index) => {
{sampleData.length === 0 ? (
<div className={editUserStyle.permissionDefaultState}>
<p>No permission added yet</p>
</div>
) : (
<div className={editUserStyle.permissionsList}>
{sampleData.map((perm, index) => {
return (
<div className={editUserStyle.permissions} key={index}>
<div className={editUserStyle.permissionsItem}>
@@ -62,9 +38,9 @@ const Permissions = ({ sampleData = [] }) => {
</div>
</div>
);
})
)}
</div>
})}
</div>
)}
</div>
</>
);

105
frontend/src/app/components/permissions/styles.module.css
View File

@@ -1,19 +1,3 @@
.imanginaryDiv {
padding: 18px;
}
.userPermissions {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
border-radius: 6px;
height: calc(100vh - 175px);
position: relative;
overflow: auto;
scrollbar-width: none;
}
.permissionsContainer {
display: flex;
padding: 24px;
@@ -22,7 +6,6 @@
align-self: stretch;
border-radius: 6px;
background: #1d1e2a;
background: color(display-p3 0.1138 0.1191 0.1616);
}
.permissionsHeader {
display: flex;
@@ -39,9 +22,7 @@
align-items: flex-start;
gap: 5px;
flex: 1 0 0;
color: #d2d3e1;
color: color(display-p3 0.8235 0.8275 0.8784);
font-family: Inter;
font-size: 20px;
font-style: normal;
@@ -58,27 +39,26 @@
gap: 5px;
border-radius: 6px;
background: #27293b;
background: color(display-p3 0.1529 0.1608 0.2275);
}
.svgContainer > div {
.svgContainer > button {
display: flex;
padding: 8px;
border: none;
justify-content: center;
align-items: center;
gap: 12px;
border-radius: 6px;
background: #27293b;
background: color(display-p3 0.1529 0.1608 0.2275);
}
.permissionDefaultState {
display: flex;
align-items: center;
gap: 12px;
flex: 1 0 0;
align-self: stretch;
height: 43.813px;
padding: 8px 16px;
justify-content: center;
align-items: center;
align-self: stretch;
}
.permissionDefaultState p {
display: flex;
@@ -88,29 +68,28 @@
flex: 1 0 0;
align-self: stretch;
color: #85869b;
color: color(display-p3 0.5216 0.5255 0.6);
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.permissionsList {
width: 100%;
}
.permissions {
display: flex;
height: 43.813px;
padding: 8px 16px;
padding: 8px 8px 8px 16px;
justify-content: space-between;
align-items: center;
align-self: stretch;
border-bottom: 0.5px solid #2e3042;
border-bottom: 0.5px solid color(display-p3 0.1831 0.189 0.2535);
}
.permissions:hover {
border-bottom: 1px solid rgba(129, 135, 255, 0.25);
border-bottom: 1px solid color(display-p3 0.5098 0.5294 1 / 0.25);
background: rgba(129, 135, 255, 0.05);
background: color(display-p3 0.5098 0.5294 1 / 0.05);
}
.permissionsItem {
display: flex;
@@ -121,7 +100,6 @@
}
.permissionsItem > p {
color: #d2d3e1;
color: color(display-p3 0.8235 0.8275 0.8784);
font-family: Inter;
font-size: 16px;
font-style: normal;
@@ -151,35 +129,40 @@
stroke: color(display-p3 1 1 1);
border-radius: 100px;
border: 1px solid #959aff;
border: 1px solid color(display-p3 0.5892 0.6031 0.9766);
background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
background: linear-gradient(
180deg,
color(display-p3 0.4118 0.4196 0.5725) 0%,
color(display-p3 0.1241 0.1265 0.1725) 100%
);
}
.permissionDefaultState {
display: flex;
height: 43.813px;
padding: 8px 16px;
justify-content: center;
align-items: center;
align-self: stretch;
}
.permissionDefaultState p {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
flex: 1 0 0;
align-self: stretch;
color: #85869b;
color: color(display-p3 0.5216 0.5255 0.6);
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
@media (max-width: 768px) {
.permissionsContainer {
border-radius: 4px;
padding: 0 0 24px 0;
}
.permissionsHeader {
padding: 12px 16px;
}
.permissionsHeader > p {
color: #fff;
font-size: 18px;
align-self: stretch;
}
.svgContainer {
display: none;
}
.permissionDefaultState {
gap: 12px;
align-self: stretch;
padding: 24px 16px 0 16px;
}
.permissionsList {
padding-top: 16px;
}
.permissions {
padding: 8px 16px;
}
.permissionDefaultState > p {
font-weight: 500;
text-align: center;
}
}

15
frontend/src/app/components/radio-button/RadioButton.jsx Normal file
View File

@@ -0,0 +1,15 @@
import React from "react";
import styles from "./styles.module.css";
const RadioButton = (props) => {
return (
<div className={styles.container}>
<label className={styles.radio}>
<input type="radio" {...props} />
<span className={styles.custom}></span>
<span className={styles.labelText}>{props?.label}</span>
</label>
</div>
);
};
export default RadioButton;

44
frontend/src/app/components/radio-button/styles.module.css Normal file
View File

@@ -0,0 +1,44 @@
.radioButtonsContainer > div > div > div {
display: flex;
padding: 12px 4px;
align-items: center;
gap: 12px;
}
.radio {
display: flex;
align-items: center;
cursor: pointer;
gap: 8px;
}
.radio input {
display: none;
}
.radio .custom {
width: 20px;
height: 20px;
border: 2px solid #4b4f6d;
border-radius: 50%;
position: relative;
background-color: #fff;
}
.radio .custom::after {
content: "";
width: 10px;
height: 10px;
background: #5980f1;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
}
.radio input:checked + .custom::after {
transform: translate(-50%, -50%) scale(1);
}
.radio input:not(:checked) + .custom + span,
.radio input:not(:checked) + .custom + * {
color: #85869b;
}

17
frontend/src/app/components/searchbar/SearchBar.jsx
View File

@@ -1,5 +1,6 @@
import React, { useState } from "react";
import searchBarStyle from "./styles.module.css";
import SearchIcon from "../icons/search";
const SearchBar = () => {
const [open, setOpen] = useState(false);
@@ -19,21 +20,7 @@ const SearchBar = () => {
className={searchBarStyle.searchBtn}
onClick={() => setOpen((open) => !open)}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
>
<path
d="M19.5527 19.5536L14.7064 14.7074M9.16822 16.7847C13.3741 16.7847 16.7837 13.3751 16.7837 9.1692C16.7837 4.96328 13.3741 1.55371 9.16822 1.55371C4.9623 1.55371 1.55273 4.96328 1.55273 9.1692C1.55273 13.3751 4.9623 16.7847 9.16822 16.7847Z"
stroke="currentColor"
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<SearchIcon />
</div>
</form>
);

12
frontend/src/app/components/searchbar/styles.module.css
View File

@@ -2,7 +2,7 @@
display: flex;
align-items: center;
justify-content: space-between;
width: 40px; /*collapse width*/
width: 40px;
border-radius: 6px;
padding: 6px;
height: auto;
@@ -10,18 +10,14 @@
transition: width 0.35s ease;
position: absolute;
}
.searchBarContainer:focus-within {
background: #292a36;
background: color(display-p3 0.1608 0.1647 0.2078);
}
/* When the searchbar is opened */
.open {
width: 260px;
padding: 6px 6px 6px 12px;
justify-content: space-between;
border: 1px solid #31324a;
border: 1px solid color(display-p3 0.1922 0.1961 0.2824);
border-radius: 6px;
}
.input {
@@ -32,9 +28,8 @@
opacity: 0; /*hide input kung collapse*/
transition: opacity 0.35s ease;
color: #85869b;
color: color(display-p3 0.5216 0.5255 0.6);
font-family: Inter;
font-size: 18px;
font-size: 1.18rem;
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -49,10 +44,9 @@
.input::placeholder {
color: #85869b;
color: color(display-p3 0.5216 0.5255 0.6);
text-align: start;
font-family: Inter;
font-size: 18px;
font-size: 1.18rem;
font-style: normal;
font-weight: 400;
line-height: normal;

101
frontend/src/app/components/sidebar/Sidebar.jsx
View File

@@ -1,5 +1,5 @@
"use client";
import React from "react";
import React, { useState } from "react";
import styles from "./styles.module.css";
import { usePathname, useRouter } from "next/navigation";
@@ -12,43 +12,44 @@ import CredentialsIcon from "../icons/credentials";
import AgentIcon from "../icons/agent";
import DownloadIcon from "../icons/download";
import LogoIcon from "../icons/logo";
import ArrowDownIcon from "../icons/arrowDown";
import useNavigations from "@/app/hooks/useNagivation";
const Sidebar = () => {
const router = useRouter();
const navToHome = () => {
router.push("/home");
};
const navToOrganization = () => {
router.push("/organization");
};
const navToProject = () => {
router.push("/projects");
};
const navToUsers = () => {
router.push("/users");
};
const navToRoles = () => {
router.push("/roles");
};
const navToCredentials = () => {
router.push("/credentials");
};
const navToAgents = () => {
router.push("/agents");
};
const [isCollapsed, setIsCollapsed] = useState(false);
const {
navToAgents,
navToCredentials,
navToProject,
navToRoles,
navToHome,
navToOrganization,
navToUsers,
} = useNavigations();
const pathname = usePathname();
console.log(pathname);
return (
<div className={styles.mainContainer}>
<div
className={`${styles.mainContainer} ${isCollapsed ? styles.collapsed : ""}`}
>
<div className={styles.topContainer}>
{/* Logo Container */}
<div className={styles.logoContainer}>
<div
className={styles.toggleContainer}
onClick={() => setIsCollapsed(!isCollapsed)}
>
<ArrowDownIcon
className={`${styles.arrowIcon} ${isCollapsed ? styles.notToggle : styles.toggle}`}
/>
</div>
<div>
<div className={styles.logoIconContainer}>
<LogoIcon />
</div>
<div className={styles.logoDescription}>
<div
className={`${styles.logoDescription} ${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
>
<p>Internal Developer Platform</p>
<p>By Project Moonshot Inc.</p>
</div>
@@ -61,49 +62,77 @@ const Sidebar = () => {
onClick={navToHome}
>
<HomeIcon />
<p>Home</p>
<p
className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
>
Home
</p>
</div>
<div
className={`${styles.nav} ${pathname.includes("/organization") ? styles.active : ""}`}
onClick={navToOrganization}
>
<OrganizationIcon />
<p>Organization</p>
<p
className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
>
Organization
</p>
</div>
<div
onClick={navToProject}
className={`${styles.nav} ${pathname.includes("/projects") ? styles.active : ""}`}
>
<ProjectIcon />
<p>Project</p>
<p
className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
>
Project
</p>
</div>
<div
onClick={navToUsers}
className={`${styles.nav} ${pathname.includes("/users") ? styles.active : ""}`}
>
<UserIcon />
<p>Users</p>
<p
className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
>
Users
</p>
</div>
<div
onClick={navToRoles}
className={`${styles.nav} ${pathname.includes("/roles") ? styles.active : ""}`}
>
<RolesIcon />
<p>Roles</p>
<p
className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
>
Roles
</p>
</div>
<div
onClick={navToCredentials}
className={`${styles.nav} ${pathname.includes("/credentials") ? styles.active : ""}`}
>
<CredentialsIcon />
<p>Credentials</p>
<p
className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
>
Credentials
</p>
</div>
<div
onClick={navToAgents}
className={`${styles.nav} ${pathname.includes("/agents") ? styles.active : ""}`}
>
<AgentIcon />
<p>Agents</p>
<p
className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
>
Agents
</p>
</div>
</div>
</div>
@@ -111,7 +140,11 @@ const Sidebar = () => {
<div className={styles.navFooterContainer}>
<div>
<div>
<p>Download ICTL v3</p>
<p
className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
>
Download ICTL v3
</p>
<DownloadIcon />
</div>
</div>

91
frontend/src/app/components/sidebar/styles.module.css
View File

@@ -11,12 +11,14 @@
user-select: none;
border-right: 1px solid #2c2d3d;
background: #191a24;
transition: all 150ms;
}
.topContainer {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.logoContainer {
@@ -26,8 +28,10 @@
flex-direction: column;
justify-content: center;
align-items: flex-start;
position: relative;
gap: 12px;
align-self: stretch;
border-bottom: 1px solid #2c2d3d;
border-bottom: 1px solid color(display-p3 0.1725 0.1765 0.2353);
}
@@ -60,18 +64,14 @@
.logoDescription > p:nth-child(1) {
color: #fff;
color: color(display-p3 1 1 1);
font-size: 15px;
font-style: normal;
font-size: 0.94rem;
font-weight: 500;
line-height: 18px;
}
.logoDescription > p:nth-child(2) {
color: #85869b;
color: color(display-p3 0.5216 0.5255 0.6);
font-size: 10px;
font-style: normal;
font-weight: 400;
line-height: normal;
font-size: 0.63rem;
letter-spacing: 0.05px;
align-self: stretch;
}
@@ -87,11 +87,7 @@
align-items: center;
cursor: pointer;
gap: 16px;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
font-size: 1rem;
border-left: 2px solid #959aff00;
align-self: stretch;
}
@@ -108,11 +104,7 @@
border-left: 2px solid #959aff;
background: rgba(149, 154, 255, 0.05);
color: #959aff;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
font-size: 1rem;
}
.active:hover path {
stroke: #969af9;
@@ -142,16 +134,73 @@
}
.navFooterContainer > div > div {
display: flex;
width: 186px;
width: 100%;
justify-content: space-between;
align-items: center;
flex: 1 0 0;
}
.navFooterContainer > div > div > p {
color: #d2d3e1;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-size: 1rem;
font-weight: 500;
line-height: normal;
}
.collapsed {
width: 80px;
}
.noDisplay {
display: none;
}
.blockDisplay {
display: block;
}
.logoContainer .toggleContainer {
position: absolute;
right: -15px;
bottom: 50%;
transform: translateY(50%);
background-color: #191a24;
padding: 5px;
border-radius: 50%;
border: 1px solid #292b43;
transition: all 150ms;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.arrowIcon {
transition: all 400ms;
}
.arrowIcon path {
stroke: rgba(255, 255, 255, 0.858);
}
.toggle {
transform: rotate(90deg) scale(0.8);
}
.notToggle {
transform: rotate(-90deg) scale(0.8);
}
.toggleContainer:hover {
background-color: #333652;
}
@media (max-width: 1050px) {
.mainContainer {
width: 80px;
}
.label {
display: none;
}
.logoContainer .toggleContainer {
display: none;
}
}
@media (max-width: 768px) {
.mainContainer {
display: none;
}
.label {
display: none;
}
}

4
frontend/src/app/components/toast/success/styles.module.css
View File

@@ -9,7 +9,7 @@
position: absolute;
bottom: 25px;
z-index: 11;
right: 20px;
right: 10px;
animation-name: showToast;
animation-duration: 0.15s;
animation-timing-function: ease-in-out;
@@ -41,7 +41,7 @@
.messageContainer p {
color: #006929;
font-family: Inter;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: normal;

46
frontend/src/app/components/topHeader/TopHeader.jsx
View File

@@ -21,6 +21,9 @@ import EditIcon from "../icons/edit";
import UpdateIcon from "../icons/update";
import SecondaryButton from "../buttons/secondaryButton/SecondaryButton";
import SearchBar from "../searchbar/SearchBar";
import ViewLogsIcon from "../icons/viewLogs";
import PublishIcon from "../icons/publish";
import useIsMobile from "@/app/hooks/useIsMobile";
const TopHeader = (props) => {
const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false);
@@ -32,17 +35,24 @@ const TopHeader = (props) => {
const handleNavigateToAdd = () => {
router.push(`${pathName}/add`);
};
const isMobile = useIsMobile();
return (
<>
{triggerAlert && (
<Alert
setTriggerAlert={setTriggerAlert}
onClick={() => setEditState(true)}
title={props.topbarTitle}
setEditState={setEditState}
title={!editState ? props.topbarTitle : "Save Changes"}
body="You are about to save the changes. Do you want to continue?"
editState={editState}
/>
)}
<div className={styles.container}>
<div className={styles.title}>
<div
className={`${styles.container} ${pathName.includes("/add") ? styles.column : ""}`}
>
<div
className={`${styles.title} ${pathName.includes("/add") ? styles.fullWidth : ""}`}
>
{props.requiredButtons.includes("back") && (
<div onClick={() => router.back()}>
<BackIcon />
@@ -50,22 +60,24 @@ const TopHeader = (props) => {
)}
<p>{props.topbarTitle}</p>
</div>
<div className={styles.actionBar}>
<div
className={`${styles.actionBar} ${pathName.includes("/add") ? styles.fullWidth : ""}`}
>
{props?.requiredButtons.includes("search") && (
<div className={styles.searchBarContainer}>
<SearchBar />
{!isMobile && <SearchBar />}
</div>
)}
{props?.requiredButtons.includes("env") && (
<div className={styles.mngEnvKeyButton}>
<EnviromentIcon />
<p>Manage Env. Key</p>
{!isMobile && <p>Manage Env. Key</p>}
</div>
)}
{props?.requiredButtons.includes("add-services") && (
<PrimaryButton
icon={<AddIcon />}
text={props.buttonText}
text={isMobile ? "" : props.buttonText}
onClick={() => props?.trigger(!props?.triggerState)}
/>
)}
@@ -81,7 +93,7 @@ const TopHeader = (props) => {
{props?.requiredButtons.includes("add") && (
<PrimaryButton
icon={<AddIcon />}
text={props?.buttonText}
text={isMobile ? "" : props?.buttonText}
onClick={handleNavigateToAdd}
/>
)}
@@ -91,7 +103,9 @@ const TopHeader = (props) => {
text="Save"
form="form"
type="submit"
/* onClick={() => setTriggerAlert(!triggerAlert)} */
onClick={() =>
editState ? setTriggerAlert(!triggerAlert) : ""
}
icon={<CheckIcon width={20} height={20} />}
/>
@@ -163,6 +177,18 @@ const TopHeader = (props) => {
</div>
{triggerDropDownMenu && (
<div className={styles.dropDown}>
<div onClick={() => props?.setTriggerLogsModal?.(true)}>
<div>
<ViewLogsIcon />
<p>View Logs</p>
</div>
</div>
<div>
<div>
<PublishIcon />
<p>Publish Service</p>
</div>
</div>
<div>
<div>
<OutlineDownloadIcon />

27
frontend/src/app/components/topHeader/styles.module.css
View File

@@ -3,6 +3,7 @@
padding: 24px;
justify-content: space-between;
align-items: center;
align-self: stretch;
background: #21232f;
transition: all 0.15s;
@@ -35,9 +36,9 @@
.title > div:hover path {
stroke: white;
}
.title > p {
.title p {
color: #d2d3e1;
font-size: 24px;
font-size: var(--title-font-size);
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -46,6 +47,7 @@
display: flex;
justify-content: flex-end;
align-items: center;
gap: 5px;
}
.searchBarContainer {
@@ -120,7 +122,7 @@
flex-direction: column;
align-items: flex-start;
gap: 6px;
z-index: 2;
z-index: 11;
border-radius: 6px;
background: #2d3144;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
@@ -167,4 +169,23 @@
font-style: normal;
font-weight: 500;
line-height: normal;
z-index: 13;
}
@media (max-width: 768px) {
.container {
background: linear-gradient(180deg, #1c1d2b 0%, #191a24 100%);
padding: 16px;
}
.column {
flex-direction: column;
gap: 10px;
}
.fullWidth {
width: 100%;
justify-content: flex-start;
}
.fullWidth > button {
width: 100%;
}
}

14
frontend/src/app/credentials/add/page.jsx
View File

@@ -8,6 +8,7 @@ import TextField from "@/app/components/fields/textfield";
import Prompts from "@/app/components/prompts/Prompts";
import useRoleForm from "@/app/hooks/useRolesForm";
import Alert from "@/app/components/alerts/Alert";
import useIsMobile from "@/app/hooks/useIsMobile";
const AddCredentialPage = () => {
const {
@@ -18,7 +19,10 @@ const AddCredentialPage = () => {
triggerAlert,
setTriggerAlert,
} = useRoleForm();
const [selectedFile, setSelectedFile] = useState(null);
const isMobile = useIsMobile();
// Click
const handleFileChange = (e) => {
const file = e.target.files[0];
@@ -27,6 +31,7 @@ const AddCredentialPage = () => {
console.log(file); //send this to backend later
}
};
// Drag/Drop
const handleDrop = (e) => {
e.preventDefault();
@@ -39,6 +44,7 @@ const AddCredentialPage = () => {
const handleDragOver = (e) => {
e.preventDefault();
};
return (
<div className={globalStyle.section}>
{triggerAlert && (
@@ -59,7 +65,7 @@ const AddCredentialPage = () => {
/>
{/* Create Crediantial Container */}
<div className={createCredStyle.createCredContainer}>
<TopToolTip />
{isMobile ? "" : <TopToolTip />}
<form
className={createCredStyle.inputFieldContainer}
id="form"
@@ -81,13 +87,11 @@ const AddCredentialPage = () => {
<Prompts show={false} />
</div>
</div>
{/* Upload File */}
<div className={createCredStyle.uploadFile}>
{/* Label */}
<div className={createCredStyle.label}>
<p>Upload File</p>
<p className={createCredStyle.labelTxt}>Upload File</p>
{/* Optional or Required */}
<p className={createCredStyle.optionalTxt}>(Optional)</p>{" "}
{/* <p className={createCredStyle.optionalTxt}>(Optional)</p>{" "} */}
</div>
{/* Upload File */}
<label

37
frontend/src/app/credentials/add/styles.module.css
View File

@@ -22,6 +22,7 @@
flex-direction: column;
align-items: flex-start;
gap: 12px;
align-self: stretch;
}
.label {
display: flex;
@@ -31,7 +32,6 @@
}
.labelTxt {
color: #d2d3e1;
color: color(display-p3 0.8235 0.8275 0.8784);
font-family: Inter;
font-size: 16px;
font-style: normal;
@@ -60,9 +60,8 @@
}
.label > .optionalTxt {
color: #85869b;
color: color(display-p3 0.5216 0.5255 0.6);
font-family: Inter;
font-size: 16 px;
font-size: 16px;
font-style: normal;
font-weight: 300;
line-height: normal;
@@ -77,22 +76,18 @@
gap: 10px;
align-self: stretch;
border-radius: 4px;
border: 1px dashed #5980f1;
border: 2px dashed color(display-p3 0.3804 0.4959 0.9137);
border: 2px dashed #5980f1;
cursor: pointer;
}
.upload:hover {
background: rgba(129, 135, 255, 0.25);
background: color(display-p3 0.5098 0.5294 1 / 0.25);
}
.upload:hover .chooseTxt {
color: #fff;
color: color(display-p3 1 1 1);
}
.chooseTxt {
color: #5980f1;
color: color(display-p3 0.3804 0.4959 0.9137);
text-align: center;
font-family: Inter;
font-size: 16px;
@@ -104,7 +99,6 @@
.dragTxt {
color: #85869b;
color: color(display-p3 0.5216 0.5255 0.6);
text-align: center;
font-family: Inter;
font-size: 14px;
@@ -113,3 +107,28 @@
line-height: normal;
align-self: stretch;
}
/* Mobile */
@media (max-width: 768px) {
.createCredContainer {
padding: 32px 16px 0 16px;
align-items: flex-start;
gap: 16px;
}
.inputFieldContainer {
display: flex;
align-items: flex-start;
padding: 0px;
gap: 24px;
align-self: stretch;
}
.projectName {
width: 100%;
}
.upload {
height: 100px;
}
}

25
frontend/src/app/credentials/card/Card.jsx Normal file
View File

@@ -0,0 +1,25 @@
import DeleteIcon from "@/app/components/icons/delete";
import React from "react";
import styles from "./styles.module.css";
const Card = (props) => {
return (
<div className={styles.cardContainer}>
<div className={styles.cardDetails}>
<div className={styles.list}>
<p>Name</p>
<p>{props?.data?.name}</p>
</div>
<div className={styles.list}>
<p>Organization ID</p>
<p>{props?.data?.organizationID}</p>
</div>
</div>
<div className={styles.cardAction}>
<DeleteIcon />
</div>
</div>
);
};
export default Card;

42
frontend/src/app/credentials/card/styles.module.css Normal file
View File

@@ -0,0 +1,42 @@
.cardContainer {
display: flex;
padding: 16px 0;
align-items: flex-start;
gap: 16px;
align-self: stretch;
border-bottom: 1px solid #2c2d3d;
}
.cardDetails {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
flex: 1 0 0;
}
.list {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
align-self: stretch;
}
.list p {
color: #85869b;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.list p:nth-child(2) {
color: #eeeffd;
font-family: Inter;
font-size: 16px;
font-weight: 500;
}
.cardAction {
display: flex;
align-items: center;
gap: 17px;
}

66
frontend/src/app/credentials/page.jsx
View File

@@ -1,3 +1,4 @@
"use client";
import React from "react";
import TopHeader from "../components/topHeader/TopHeader";
import globalStyle from "../globalStyle.module.css";
@@ -5,7 +6,11 @@ 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";
import useIsMobile from "../hooks/useIsMobile";
import Card from "./card/Card";
import MobileSearchBar from "../components/mobileSearchBar/MobileSearchBar";
const CredentialsPage = () => {
const isMobile = useIsMobile();
const sampleData = [
{
name: "mongo tls ca crt",
@@ -66,33 +71,42 @@ const CredentialsPage = () => {
topbarTitle="Credentials"
requiredButtons={["title", "add", "search", "env"]}
/>
<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>
{isMobile ? (
<div className={styles.cardContainer}>
<MobileSearchBar />
{sampleData.map((data, key) => (
<Card data={data} key={key} />
))}
</div>
) : (
<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>
<ActionButton icon={<DeleteIcon />} />
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
<tbody>
{sampleData.map((org, index) => {
return (
<tr key={index}>
<td>{org.name}</td>
<td>{org.organizationID}</td>
<td className={styles.actions}>
<div>
<ActionButton icon={<DeleteIcon />} />
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
)}
</div>
</div>
</div>

15
frontend/src/app/credentials/styles.module.css
View File

@@ -31,7 +31,7 @@
.tableContainer > table > tbody > tr > td {
color: #eeeffd;
font-family: Inter;
font-size: 13px;
font-size: 0.8rem;
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -47,8 +47,19 @@
.tableContainer > table > thead > tr > th {
color: #85869b;
font-family: Inter;
font-size: 13px;
font-size: 0.8rem;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.cardContainer {
display: flex;
padding: 0 16px;
padding-bottom: 50px;
height: calc(100vh - 170px);
flex-direction: column;
align-items: flex-start;
gap: 12px;
align-self: stretch;
overflow: auto;
}

12
frontend/src/app/globals.css
View File

@@ -1,6 +1,8 @@
:root {
--background: #d2d3e0;
--foreground: #191a24;
--table-font-size: 13px;
--title-font-size: 24px;
}
@media (prefers-color-scheme: dark) {
@@ -51,3 +53,13 @@ a {
border-radius: 2px;
background: #34384c;
}
@media (max-width: 900px) {
:root {
--table-font-size: 10px;
}
}
@media (max-width: 500px) {
:root {
--title-font-size: 18px;
}
}

76
frontend/src/app/home/page.jsx
View File

@@ -1,7 +1,13 @@
"use client";
import React from "react";
import userDashboardStyle from "./styles.module.css";
import LinkIcon from "../components/icons/link";
import SunIcon from "../components/icons/sun";
import Link from "next/link";
import useIsMobile from "../hooks/useIsMobile";
const HomePage = () => {
const isMobile = useIsMobile();
return (
// Main
<div className={userDashboardStyle.mainWrapper}>
@@ -9,32 +15,11 @@ const HomePage = () => {
<div className={userDashboardStyle.userDashContainer}>
{/* User Name */}
<div className={userDashboardStyle.userNameContainer}>
{/* Name and Welcome Msg */}
{/* Name and Welcome Msg Section */}
<div className={userDashboardStyle.nameSection}>
{/* Weather */}
<div className={userDashboardStyle.weather}>
<svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
>
<path
d="M8 12C8 13.0609 8.42143 14.0783 9.17157 14.8284C9.92172 15.5786 10.9391 16 12 16C13.0609 16 14.0783 15.5786 14.8284 14.8284C15.5786 14.0783 16 13.0609 16 12C16 10.9391 15.5786 9.92172 14.8284 9.17157C14.0783 8.42143 13.0609 8 12 8C10.9391 8 9.92172 8.42143 9.17157 9.17157C8.42143 9.92172 8 10.9391 8 12Z"
stroke="white"
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M3 12H4M12 3V4M20 12H21M12 20V21M5.6 5.6L6.3 6.3M18.4 5.6L17.7 6.3M17.7 17.7L18.4 18.4M6.3 17.7L5.6 18.4"
stroke="white"
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<SunIcon />
<p>
Friday, Feb 23
<span className={userDashboardStyle.ordinal}>rd</span>
@@ -48,7 +33,7 @@ const HomePage = () => {
</p>
</div>
</div>
{/* Logo */}
{/* Image Section*/}
<div className={userDashboardStyle.logoSection}>
<div className={userDashboardStyle.gradientGlass}></div>
</div>
@@ -57,38 +42,15 @@ const HomePage = () => {
<div className={userDashboardStyle.linkMainContainer}>
<div className={userDashboardStyle.linkContainer}>
<div className={userDashboardStyle.link}>
<svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
>
<path
d="M9 15L15 9"
stroke="#969AF9"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M11 6.00031L11.463 5.46431C12.4008 4.52663 13.6727 3.99991 14.9989 4C16.325 4.00009 17.5968 4.527 18.5345 5.46481C19.4722 6.40261 19.9989 7.6745 19.9988 9.00066C19.9987 10.3268 19.4718 11.5986 18.534 12.5363L18 13.0003"
stroke="#969AF9"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M13.0001 18L12.6031 18.534C11.6544 19.4722 10.3739 19.9984 9.03964 19.9984C7.70535 19.9984 6.42489 19.4722 5.47614 18.534C5.0085 18.0716 4.63724 17.521 4.38385 16.9141C4.13047 16.3073 4 15.6561 4 14.9985C4 14.3408 4.13047 13.6897 4.38385 13.0829C4.63724 12.476 5.0085 11.9254 5.47614 11.463L6.00014 11"
stroke="#969AF9"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<p>
Connected to <a href="#">https://isaac.dev.onecoopbank.com</a>
</p>
<div className={userDashboardStyle.linkIcon}>
{isMobile ? (
<LinkIcon color="#D2D3E1" width="18" height="18" />
) : (
<LinkIcon />
)}
<p>Connected to</p>
</div>
<Link href="#">https://isaac.dev.onecoopbank.com</Link>
</div>
</div>
</div>

103
frontend/src/app/home/styles.module.css
View File

@@ -11,7 +11,6 @@
flex: 1 0 0;
align-self: stretch;
background: #191a24;
background: color(display-p3 0.098 0.102 0.1373);
}
.userDashContainer {
display: flex;
@@ -20,7 +19,6 @@
flex: 1 0 0;
align-self: stretch;
background: #191a24;
background: color(display-p3 0.098 0.102 0.1373);
}
.userNameContainer {
display: flex;
@@ -29,9 +27,7 @@
align-items: center;
align-self: stretch;
border-radius: 8px;
background: #21232f;
background: color(display-p3 0.1294 0.1373 0.1804);
position: relative;
background: linear-gradient(180deg, #21232f 0%, #34366f 100%);
overflow: hidden;
}
.nameSection {
@@ -43,20 +39,24 @@
}
.logoSection {
display: flex;
padding-right: 16px;
padding-right: 0.157px;
flex-direction: column;
justify-content: flex-end;
align-items: center;
align-self: stretch;
position: relative;
}
.gradientGlass {
max-width: 345.503px;
height: 345.503px;
transform: rotate(3.836deg);
aspect-ratio: 1/1;
background: url(/images/idp.png) 50% / cover no-repeat;
pointer-events: none;
position: absolute;
right: 0;
}
.gradientGlass {
width: 350px;
height: 350px;
/* aspect-ratio: 75/75; */
background: url(/images/idp.png) 50% / cover no-repeat;
transform: translate(-5px, -30px) scale(0.9) rotate(5deg);
top: 0;
}
.weather {
display: flex;
@@ -126,19 +126,90 @@
align-self: stretch;
}
.link {
display: flex;
gap: 5px;
align-items: center;
}
.linkIcon {
display: flex;
align-items: center;
gap: 10px;
align-self: stretch;
}
.link > p {
.link,
.linkIcon > p {
color: #959aff;
color: color(display-p3 0.5892 0.6031 0.9766);
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.18px;
width: 463px;
/* width: 463px; */
}
/* Mobile */
@media (max-width: 768px) {
.mainContainer {
padding: 16px;
}
.userDashContainer {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
flex: 1 0 0;
}
.userNameContainer {
border-radius: 12px;
flex-direction: column;
gap: 24px;
}
.linkMainContainer {
padding: 10px;
border-radius: 12px;
background: #1e202e;
}
.welcomeMsg {
align-self: stretch;
font-size: 36px;
line-height: normal;
letter-spacing: 0.36px;
}
.logoSection {
display: flex;
height: 144px;
justify-content: flex-end;
align-items: flex-end;
gap: 10px;
align-self: stretch;
}
.gradientGlass {
left: -29.114px;
}
.link {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 10px;
align-self: stretch;
}
.linkIcon > p {
color: #d2d3e1;
font-size: 14px;
}
}
/* Tablet */
@media (max-width: 1199px) {
.userNameContainer {
align-items: flex-start;
}
/* Pwede butngan ani pero modako lagi ang card */
/* .logoSection {
padding-right: 369px;
} */
}

19
frontend/src/app/hooks/useIsMobile.jsx Normal file
View File

@@ -0,0 +1,19 @@
import { useState, useEffect } from "react";
export default function useIsMobile(breakpoint = 768) {
const [isMobile, setIsMobile] = useState(true);
useEffect(() => {
const checkScreen = () => {
setIsMobile(window.innerWidth <= breakpoint);
};
checkScreen(); // run once on mount
window.addEventListener("resize", checkScreen);
return () => window.removeEventListener("resize", checkScreen);
}, [breakpoint]);
return isMobile;
}

22
frontend/src/app/hooks/useNagivation.jsx Normal file
View File

@@ -0,0 +1,22 @@
import { useRouter } from "next/navigation";
export default function useNavigations(setTriggerDropDown) {
const router = useRouter();
const handleNav = (path) => {
if (setTriggerDropDown) {
setTriggerDropDown(false);
}
router.push(path);
};
return {
navToHome: () => handleNav("/home"),
navToAgents: () => handleNav("/agents"),
navToCredentials: () => handleNav("/credentials"),
navToProject: () => handleNav("/projects"),
navToRoles: () => handleNav("/roles"),
navToOrganization: () => handleNav("/organization"),
navToUsers: () => handleNav("/users"),
};
}

4
frontend/src/app/layout.js
View File

@@ -1,8 +1,8 @@
import { Inter } from "next/font/google";
import Sidebar from "./components/sidebar/Sidebar";
import Header from "./components/header/Header";
import "./globals.css";
import styles from "./page.module.css";
import Navbar from "./components/navbar/Navbar";
const inter = Inter({
variable: "--font-inter",
@@ -22,7 +22,7 @@ export default function RootLayout({ children }) {
<Sidebar />
<div className={styles.mainContainer}>
<Header />
<Navbar />
{children}
</div>
</div>

17
frontend/src/app/organization/add/styles.module.css
View File

@@ -3,7 +3,8 @@
flex-direction: column;
align-items: center;
gap: 48px;
flex: 1 0 0;
height: calc(100vh - 170px);
align-self: stretch;
}
.upperToolTips {
@@ -24,7 +25,7 @@
color: #191a24;
text-align: center;
font-family: Inter;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -36,6 +37,7 @@
justify-content: center;
align-items: center;
gap: 32px;
width: min(100%, 500px);
}
.organizationBadgeContainer {
display: flex;
@@ -105,9 +107,8 @@
}
.labels > p {
color: #d2d3e1;
color: color(display-p3 0.8235 0.8275 0.8784);
font-family: Inter;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -115,17 +116,17 @@
.labels > p span {
color: #85869b;
font-family: Inter;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 300;
line-height: normal;
}
.inputGroup {
display: flex;
width: 500px;
flex-direction: column;
align-items: flex-start;
gap: 12px;
width: 100%;
}
.inputLabel {
display: flex;
@@ -136,7 +137,7 @@
.inputLabel > p {
color: #d2d3e1;
font-family: Inter;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -164,7 +165,7 @@
.prompts > p {
color: #d49e3d;
font-family: Inter;
font-size: 14px;
font-size: 0.85rem;
font-style: normal;
font-weight: 400;
line-height: normal;

25
frontend/src/app/organization/card/Card.jsx Normal file
View File

@@ -0,0 +1,25 @@
import DeleteIcon from "@/app/components/icons/delete";
import React from "react";
import styles from "./styles.module.css";
const Card = (props) => {
return (
<div className={styles.cardContainer}>
<div className={styles.cardDetails}>
<div className={styles.list}>
<p>Organization Name</p>
<p>{props?.data?.organizationName}</p>
</div>
<div className={styles.list}>
<p>Date Created</p>
<p>{props?.data?.dateCreated}</p>
</div>
</div>
<div className={styles.cardAction}>
<DeleteIcon />
</div>
</div>
);
};
export default Card;

42
frontend/src/app/organization/card/styles.module.css Normal file
View File

@@ -0,0 +1,42 @@
.cardContainer {
display: flex;
padding: 16px 0;
align-items: flex-start;
gap: 16px;
align-self: stretch;
border-bottom: 1px solid #2c2d3d;
}
.cardDetails {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
flex: 1 0 0;
}
.list {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
align-self: stretch;
}
.list p {
color: #85869b;
font-family: Inter;
font-size: 0.85rem;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.list p:nth-child(2) {
color: #eeeffd;
font-family: Inter;
font-size: 1rem;
font-weight: 500;
}
.cardAction {
display: flex;
align-items: center;
gap: 17px;
}

42
frontend/src/app/organization/page.jsx
View File

@@ -1,13 +1,17 @@
"use-client";
import React from "react";
"use client";
import React, { useEffect, useState } from "react";
import styles from "./styles.module.css";
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";
import Card from "./card/Card";
import useIsMobile from "../hooks/useIsMobile";
import MobileSearchBar from "../components/mobileSearchBar/MobileSearchBar";
const OrganizationPage = () => {
const isMobile = useIsMobile();
const sampleData = [
{
organizationName: "Project Moonshot Inc.",
@@ -64,6 +68,13 @@ const OrganizationPage = () => {
topbarTitle="Organization"
requiredButtons={["title", "add", "search"]}
/>
<div className={styles.cardContainer}>
<MobileSearchBar />
{isMobile &&
sampleData.map((data, key) => <Card data={data} key={key} />)}
</div>
<div className={styles.tableContainer}>
<table className={styles.table}>
<thead>
@@ -75,19 +86,20 @@ const OrganizationPage = () => {
</thead>
<tbody>
{sampleData.map((org, index) => {
return (
<tr key={index}>
<td>{org.organizationName}</td>
<td>{org.dateCreated}</td>
<td className={styles.actions}>
<div>
<ActionButton icon={<DeleteIcon />} />
</div>
</td>
</tr>
);
})}
{!isMobile &&
sampleData.map((org, index) => {
return (
<tr key={index}>
<td>{org.organizationName}</td>
<td>{org.dateCreated}</td>
<td className={styles.actions}>
<div>
<ActionButton icon={<DeleteIcon />} />
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>

24
frontend/src/app/organization/styles.module.css
View File

@@ -30,7 +30,7 @@
.tableContainer > table > tbody > tr > td {
color: #eeeffd;
font-family: Inter;
font-size: 13px;
font-size: 0.8rem;
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -46,8 +46,28 @@
.tableContainer > table > thead > tr > th {
color: #85869b;
font-family: Inter;
font-size: 13px;
font-size: 0.8rem;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.cardContainer {
display: flex;
padding: 0 16px;
padding-bottom: 50px;
height: calc(100vh - 170px);
flex-direction: column;
align-items: flex-start;
gap: 12px;
align-self: stretch;
overflow: auto;
display: none;
}
@media (max-width: 768px) {
.cardContainer {
display: flex;
}
.tableContainer {
display: none;
}
}

10
frontend/src/app/projects/add/styles.module.css
View File

@@ -14,10 +14,12 @@
align-items: center;
gap: 24px;
border-radius: 8px;
width: min(100%, 500px);
}
.inputGroup {
display: flex;
width: 500px;
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 12px;
@@ -32,7 +34,7 @@
color: #d2d3e1;
color: color(display-p3 0.8235 0.8275 0.8784);
font-family: Inter;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -40,7 +42,7 @@
.label > p span {
color: #cfb000;
font-family: Inter;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 600;
line-height: normal;
@@ -62,7 +64,7 @@
.prompts > p {
color: #d49e3d;
font-family: Inter;
font-size: 14px;
font-size: 0.85rem;
font-style: normal;
font-weight: 400;
line-height: normal;

109
frontend/src/app/projects/page.jsx
View File

@@ -8,8 +8,12 @@ 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";
import useIsMobile from "../hooks/useIsMobile";
import Card from "./project-card/Card";
import MobileSearchBar from "../components/mobileSearchBar/MobileSearchBar";
const ProjectsPage = () => {
const router = useRouter();
const isMobile = useIsMobile();
const sampleData = [
{
name: "DOKS One Cooperative Bank Backend Develop",
@@ -177,6 +181,19 @@ const ProjectsPage = () => {
topbarTitle="Project"
requiredButtons={["title", "add", "search"]}
/>
<div className={styles.cardContainer}>
<MobileSearchBar />
{isMobile &&
sampleData.map((data, key) => (
<Card
data={data}
key={key}
onClick={() => router.push("/projects/view")}
/>
))}
</div>
<div className={styles.tableContainer}>
<table className={styles.table}>
<thead>
@@ -191,50 +208,56 @@ const ProjectsPage = () => {
</tr>
</thead>
<tbody>
{sampleData.map((project, index) => {
return (
<tr
key={index}
onClick={() => router.push("/projects/view")}
>
<td>{project.name}</td>
<td style={{ textAlign: "center" }}>{project.version}</td>
<td>
<span className={styles.used}>{project.cpuUsed}</span> /{" "}
<span className={styles.limit}>{project.cpuLimit}</span>
</td>
<td>
<span className={styles.used}>
{project.memoryUsed}
</span>{" "}
/{" "}
<span className={styles.limit}>
{project.memoryLimit}
</span>
</td>
<td>
<span className={styles.used}>
{project.storageUsed}
</span>{" "}
/{" "}
<span className={styles.limit}>
{project.storageLimit}
</span>
</td>
<td>{project.dateCreated}</td>
<td>
<div className={styles.actions}>
<div>
<ActionButton icon={<ViewIcon />} />
{!isMobile &&
sampleData.map((project, index) => {
return (
<tr
key={index}
onClick={() => router.push("/projects/view")}
>
<td>{project.name}</td>
<td style={{ textAlign: "center" }}>
{project.version}
</td>
<td>
<span className={styles.used}>{project.cpuUsed}</span>{" "}
/{" "}
<span className={styles.limit}>
{project.cpuLimit}
</span>
</td>
<td>
<span className={styles.used}>
{project.memoryUsed}
</span>{" "}
/{" "}
<span className={styles.limit}>
{project.memoryLimit}
</span>
</td>
<td>
<span className={styles.used}>
{project.storageUsed}
</span>{" "}
/{" "}
<span className={styles.limit}>
{project.storageLimit}
</span>
</td>
<td>{project.dateCreated}</td>
<td>
<div className={styles.actions}>
<div>
<ActionButton icon={<ViewIcon />} />
</div>
<div>
<ActionButton icon={<DeleteIcon />} />
</div>
</div>
<div>
<ActionButton icon={<DeleteIcon />} />
</div>
</div>
</td>
</tr>
);
})}
</td>
</tr>
);
})}
</tbody>
</table>
</div>

46
frontend/src/app/projects/project-card/Card.jsx Normal file
View File

@@ -0,0 +1,46 @@
import DeleteIcon from "@/app/components/icons/delete";
import React from "react";
import styles from "./styles.module.css";
const Card = (props) => {
return (
<div className={styles.cardContainer} {...props}>
<div className={styles.cardDetails}>
<div className={styles.list}>
<p>Name</p>
<p>{props?.data?.name}</p>
</div>
<div className={styles.list}>
<p>CPU Used/Limit</p>
<p>
<span className={styles.used}>{props?.data?.cpuUsed}</span> /{" "}
<span className={styles.limit}>{props?.data?.cpuLimit}</span>
</p>
</div>
<div className={styles.list}>
<p>Memory Used/Limit</p>
<p>
<span className={styles.used}>{props?.data?.memoryUsed}</span> /{" "}
<span className={styles.limit}>{props?.data?.memoryLimit}</span>
</p>
</div>
<div className={styles.list}>
<p>Storage Used/Limit</p>
<p>
<span className={styles.used}>{props?.data?.storageUsed}</span> /{" "}
<span className={styles.limit}>{props?.data?.storageLimit}</span>
</p>
</div>
<div className={styles.list}>
<p>Date Created</p>
<p>{props?.data?.dateCreated}</p>
</div>
</div>
<div className={styles.cardAction}>
<DeleteIcon />
</div>
</div>
);
};
export default Card;

49
frontend/src/app/projects/project-card/styles.module.css Normal file
View File

@@ -0,0 +1,49 @@
.cardContainer {
display: flex;
padding: 16px 0;
align-items: flex-start;
gap: 16px;
align-self: stretch;
border-bottom: 1px solid #2c2d3d;
cursor: pointer;
}
.cardDetails {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
flex: 1 0 0;
}
.list {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
align-self: stretch;
}
.list p {
color: #85869b;
font-family: Inter;
font-size: 0.85rem;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.list p:nth-child(2) {
color: #eeeffd;
font-family: Inter;
font-size: 1rem;
font-weight: 500;
}
.cardAction {
display: flex;
align-items: center;
gap: 17px;
}
.used {
color: #50d85f;
}
.limit {
color: #85869b;
}

32
frontend/src/app/projects/styles.module.css
View File

@@ -19,7 +19,7 @@
}
.tableContainer > table > thead > tr > th {
text-wrap: nowrap;
text-wrap: wrap;
}
.tableContainer > table > thead > tr > th,
@@ -36,7 +36,7 @@
.tableContainer > table > tbody > tr > td {
color: #eeeffd;
font-family: Inter;
font-size: 13px;
font-size: 0.8rem;
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -52,7 +52,7 @@
.tableContainer > table > thead > tr > th {
color: #85869b;
font-family: Inter;
font-size: 13px;
font-size: 0.8rem;
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -67,7 +67,8 @@
.used {
color: #50d85f;
font-family: Inter;
font-size: 13px;
font-size: 0.8rem;
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -75,8 +76,29 @@
.limit {
color: #85869b;
font-family: Inter;
font-size: 13px;
font-size: 0.8rem;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.cardContainer {
display: flex;
padding: 0 16px;
padding-bottom: 50px;
height: calc(100vh - 170px);
flex-direction: column;
align-items: flex-start;
gap: 12px;
align-self: stretch;
overflow: auto;
display: none;
}
@media (max-width: 768px) {
.cardContainer {
display: flex;
}
.tableContainer {
display: none;
}
}

14
frontend/src/app/projects/view/AddServicesModal/styles.module.css
View File

@@ -8,11 +8,13 @@
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
background-color: #00000037;
}
.modal {
display: inline-flex;
padding: 24px 24px 32px 24px;
flex-direction: column;
align-items: flex-start;
gap: 48px;
@@ -50,7 +52,7 @@
}
.header > div > p {
color: #d2d3e1;
font-size: 24px;
font-size: 1.5rem;
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -62,7 +64,7 @@
gap: 4px;
align-self: stretch;
color: #85869b;
font-size: 14px;
font-size: 0.9rem;
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -70,7 +72,7 @@
}
.content {
display: flex;
width: 545px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
@@ -120,7 +122,7 @@
}
.listDetails > p {
color: #85869b;
font-size: 13px;
font-size: 0.83rem;
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -133,7 +135,7 @@
}
.listDetails > div > p {
color: #d2d3e1;
font-size: 18px;
font-size: 1.2rem;
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -151,7 +153,7 @@
}
.listDetails > div > div > p {
color: #d2d3e1;
font-size: 14px;
font-size: 0.85rem;
font-style: normal;
font-weight: 400;
line-height: normal;

74
frontend/src/app/projects/view/[servicesId]/LogsModal/logsModas.jsx Normal file
View File

@@ -0,0 +1,74 @@
import CloseIcon from "@/app/components/icons/close";
import React from "react";
import styles from "./styles.module.css";
const LogsModal = (props) => {
return (
<div className={styles.modalContainer}>
<div className={styles.container}>
<div className={styles.header}>
<div className={styles.statusContainer}>
<div>
<p>Server Logs: gateway-api</p>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width={6}
height={6}
viewBox="0 0 6 6"
fill="none"
>
<circle
cx={3}
cy={3}
r={3}
fill="#98FA8D"
style={{
fill: "#98FA8D",
fillColor: "color(display-p3 0.5952 0.9819 0.5537)",
fillOpacity: 1,
}}
/>
</svg>
<p>Connected</p>
</div>
</div>
</div>
<CloseIcon
className={styles.close}
onClick={() => props?.setTriggerLogsModal?.(false)}
/>
</div>
<div className={styles.logContentContainer}></div>
<div className={styles.footer}>
<div>
<div className={styles.autoScroll}>
<input type="checkbox" />
<p>Auto Scroll</p>
</div>
<div className={styles.linesCount}>
<svg
xmlns="http://www.w3.org/2000/svg"
width={18}
height={18}
viewBox="0 0 18 18"
fill="none"
>
<path
d="M5.25 6L2.25 9L5.25 12M12.75 6L15.75 9L12.75 12M10.5 3L7.5 15"
stroke="white"
style={{ stroke: "white", strokeOpacity: 1 }}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<p>124 Lines</p>
</div>
</div>
</div>
</div>
</div>
);
};
export default LogsModal;

152
frontend/src/app/projects/view/[servicesId]/LogsModal/styles.module.css Normal file
View File

@@ -0,0 +1,152 @@
.modalContainer {
width: 100vw;
height: 100vh;
position: absolute;
z-index: 50;
left: 0;
top: 0;
display: flex;
align-items: center;
padding: 10px;
justify-content: center;
background-color: #0000004d;
}
.container {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
max-width: 1200px;
border-radius: 6px;
background: #21232f;
height: 100%;
animation-name: dropDownAnimation;
animation-duration: 200ms;
}
@keyframes dropDownAnimation {
0% {
opacity: 0;
transform: translateY(-5%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.header {
display: flex;
padding: 12px 12px 12px 16px;
justify-content: space-between;
align-items: flex-start;
align-self: stretch;
}
.close {
cursor: pointer;
}
.statusContainer {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
flex: 1 0 0;
}
.statusContainer > div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.statusContainer > div > p {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
color: #d2d3e1;
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.statusContainer > div > div {
display: flex;
padding: 1px 6px;
justify-content: center;
align-items: center;
gap: 6px;
border-radius: 100px;
background: rgba(66, 180, 78, 0.1);
}
.statusContainer > div > div > p {
color: #72fd7f;
text-align: center;
font-feature-settings:
"liga" off,
"clig" off;
font-family: Inter;
font-size: 0.7rem;
font-style: normal;
font-weight: 500;
line-height: 22px; /* 183.333% */
}
.logContentContainer {
width: 100%;
background-color: rebeccapurple;
flex: 1;
overflow-y: auto;
}
.footer {
display: flex;
padding: 12px 16px;
align-items: center;
gap: 48px;
align-self: stretch;
}
.footer > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex: 1 0 0;
}
.autoScroll {
display: flex;
align-items: center;
gap: 12px;
}
.autoScroll input[type="checkbox"] {
accent-color: #4271ff;
height: 16px;
width: 16px;
background-color: transparent;
}
.autoScroll p {
color: #fff;
/* Base/Medium */
font-family: Inter;
font-size: 0.9rem;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
letter-spacing: 0.08px;
}
.linesCount {
display: flex;
padding: 4px 8px;
justify-content: center;
align-items: center;
gap: 6px;
border-radius: 6px;
background: rgba(0, 101, 244, 0.1);
}
.linesCount p {
color: #fff;
font-family: Inter;
font-size: 0.9rem;
font-style: normal;
font-weight: 500;
line-height: 24px;
letter-spacing: 0.07px;
}

430
frontend/src/app/projects/view/[servicesId]/page.jsx
View File

@@ -4,19 +4,44 @@ import globalStyle from "@/app/globalStyle.module.css";
import TopHeader from "@/app/components/topHeader/TopHeader";
import styles from "./styles.module.css";
import variableStyles from "./variableStyles.module.css";
import TextField from "@/app/components/fields/textfield";
import AddVariableModal from "../variableModals/AddVariableModal/AddVariableModal";
import AddVolumeModal from "../variableModals/AddVolumes/AddVolumeModal";
import AddConfigMapModal from "../variableModals/AddConfigMap/AddConfigMapModal";
import CustomCheckbox from "@/app/components/checkbox/CheckBox";
import DeleteIcon from "@/app/components/icons/delete";
import SelectField from "@/app/components/select/SelectField";
import ActionButton from "@/app/components/actionButton/ActionButton";
import LogsModal from "./LogsModal/logsModas";
import ProjectDetails from "./projectDetails";
import Settings from "./settings";
import useServicesForm from "@/app/hooks/useServicesForm";
import useIsMobile from "@/app/hooks/useIsMobile";
const AddServices = () => {
const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
const [triggerAddVariable, setTriggerAddVariable] = useState(false);
const [triggerAddVolume, setTriggerAddVolume] = useState(false);
const [triggeAddConfigMap, setTriggerAddConfigMap] = useState(false);
const [triggerAddConfigMap, setTriggerAddConfigMap] = useState(false);
const [isProjectDetails, setIsProjectDetails] = useState(true);
const [triggerLogsModal, setTriggerLogsModal] = useState(false);
const [isEnableIngress, setIsEnableIngress] = useState(false);
const isMobile = useIsMobile();
const {
register,
handleSubmit,
errors,
onSubmit,
triggerAlert,
disableScaling,
disableReadiness,
disableLiveness,
setDisableScaling,
setDisableReadiness,
setDisableLiveness,
setTriggerAlert,
minPods,
maxPods,
readinessPath,
readinessPort,
livenessPort,
livenessPath,
} = useServicesForm();
const sampleData = [
{ id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
{ id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
@@ -27,13 +52,16 @@ const AddServices = () => {
];
return (
<div className={globalStyle.section}>
{triggerLogsModal && (
<LogsModal setTriggerLogsModal={setTriggerLogsModal} />
)}
{triggerAddVariable && (
<AddVariableModal setTriggerAddVariable={setTriggerAddVariable} />
)}
{triggerAddVolume && (
<AddVolumeModal setTriggerAddVolume={setTriggerAddVolume} />
)}
{triggeAddConfigMap && (
{triggerAddConfigMap && (
<AddConfigMapModal setTriggerAddConfigMap={setTriggerAddConfigMap} />
)}
<div className={globalStyle.mainContainer}>
@@ -44,349 +72,55 @@ const AddServices = () => {
state="view"
topbarTitle="View Services"
requiredButtons={["back", "title", "edit", "download"]}
setTriggerLogsModal={setTriggerLogsModal}
/>
<div className={styles.contentContainer}>
<div className={styles.fieldsContainerCreateNew}>
<div className={styles.projectDetails}>
<div className={styles.projectDetailsHeader}>
<p>Project Details</p>
</div>
<div className={styles.fieldsCreateNew}>
<div>
<div>
<p>Name</p>
<TextField placeHolder="Enter service name" />
</div>
<div>
<p>Version</p>
<TextField placeHolder="Service version" />
</div>
</div>
<div>
<div>
<p>
Image <span>(Optional)</span>
</p>
<TextField placeHolder="Enter image name" />
</div>
</div>
<div>
<div>
<p>Port</p>
<TextField placeHolder="Enter port" />
</div>
</div>
<div>
<div>
<p>Ingress</p>
<SelectField
label="Select"
options={[
{ label: "Option", value: "option" },
{ label: "Option 1", value: "option 1" },
{ label: "Option 2", value: "option 2" },
]}
/>
</div>
<div>
<p>Ingress</p>
<SelectField
label="Select"
options={[
{ label: "Option", value: "option" },
{ label: "Option 1", value: "option 1" },
{ label: "Option 2", value: "option 2" },
]}
/>
</div>
</div>
</div>
</div>
<div className={styles.resource}>
<div className={styles.projectDetailsHeader}>
<p>Resource</p>
</div>
<div className={styles.resourceFields}>
<div>
<div>
<p>CPU Request (MB)</p>
<TextField placeHolder="250" />
</div>
<div>
<p>CPU Limit (MB)</p>
<TextField placeHolder="250" />
</div>
</div>
<div>
<div>
<p>Memory Request (MB)</p>
<TextField placeHolder="250" />
</div>
<div>
<p>Memory Limit (MB)</p>
<TextField placeHolder="500" />
</div>
</div>
</div>
</div>
<div className={styles.additionalDetails}>
<div>
<div>
<div className={styles.additionalDetailsHeader}>
<div>
<p>Auto Scaling</p>
<CustomCheckbox id="scalingCheckBox" />
</div>
</div>
<div className={styles.additionalDetailsFields}>
<div>
<div>
<div>
<p>Minimum pods</p>
<TextField placeHolder="1" />
</div>
<div>
<p>Maximum pods</p>
<TextField placeHolder="1" />
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div className={styles.additionalDetailsHeader}>
<div>
<p>Readiness</p>
<CustomCheckbox id="readiNessCheckBox" />
</div>
</div>
<div className={styles.additionalDetailsFields}>
<div>
<div>
<div>
<p>Readiness Path</p>
<TextField placeHolder="Enter Readiness path" />
</div>
<div>
<p>Readiness Port</p>
<TextField placeHolder="Enter Readiness port" />
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div className={styles.additionalDetailsHeader}>
<div>
<p>Liveness</p>
<CustomCheckbox id="liveNessCheckBox" />
</div>
</div>
<div className={styles.additionalDetailsFields}>
<div>
<div>
<div>
<p>Liveness Path</p>
<TextField placeHolder="Enter liveness path" />
</div>
<div>
<p>Liveness Port</p>
<TextField placeHolder="Enter liveness port" />
</div>
</div>
</div>
</div>
</div>
</div>
<div className={styles.content}>
<div className={styles.heading}>
<div>
<p
className={`${isProjectDetails ? styles.active : null}`}
onClick={() => setIsProjectDetails(true)}
>
Project Details
</p>
<p
className={`${!isProjectDetails ? styles.active : null}`}
onClick={() => setIsProjectDetails(false)}
>
Settings
</p>
</div>
</div>
<div className={variableStyles.variables}>
<div className={variableStyles.variablesHeader}>
<div>
<div className={variableStyles.searchContainer}>
<div className={variableStyles.searchInputGroup}>
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
>
<g clipPath="url(#clip0)">
<path
d="M8.66099 16.0271C12.7292 16.0271 16.0271 12.7292 16.0271 8.66099C16.0271 4.59282 12.7292 1.29492 8.66099 1.29492C4.59282 1.29492 1.29492 4.59282 1.29492 8.66099C1.29492 12.7292 4.59282 16.0271 8.66099 16.0271Z"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M18.7051 18.7061L14.0176 14.0186"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
</svg>
<input type="text" placeholder="Search" />
</div>
</div>
<div className={variableStyles.variablesHeaderDropDown}>
<div
className={variableStyles.variableHeaderDropdownButton}
onClick={() =>
setTriggerVariableDropDown(!triggerVariableDropDown)
}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M12 5.29199V18.7087"
stroke="white"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5.29102 12H18.7077"
stroke="white"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
{triggerVariableDropDown && (
<div className={variableStyles.dropDownContainer}>
<div
onClick={() => {
setTriggerAddVariable(true);
setTriggerVariableDropDown(
!triggerVariableDropDown,
);
}}
>
<p>Environment Variables</p>
</div>
<div
onClick={() => {
setTriggerAddVolume(true);
setTriggerVariableDropDown(
!triggerVariableDropDown,
);
}}
>
<p>Volumes</p>
</div>
<div
onClick={() => {
setTriggerAddConfigMap(true);
setTriggerVariableDropDown(
!triggerVariableDropDown,
);
}}
>
<p>Config Maps</p>
</div>
</div>
)}
</div>
</div>
</div>
<div className={variableStyles.variablesContentContainer}>
<div>
<div className={variableStyles.variablesContent}>
<div
className={variableStyles.environmentVariablesContainer}
>
<div
className={variableStyles.environmentVariablesHeader}
>
<p>Environment Variables</p>
</div>
<div className={variableStyles.envVariablesHeader}>
<div>
<p>Key</p>
<p>Value</p>
</div>
</div>
<div className={variableStyles.variableList}>
{/* <div className={variableStyles.emptyVariableList}>
<div>
<p>No Environment Variables added</p>
</div>
</div> */}
{sampleData.map((data, key) => {
return (
<div className={variableStyles.variable} key={key}>
<p>{data.key}</p>
<p>{data.value}</p>
<ActionButton icon={<DeleteIcon />} />
</div>
);
})}
</div>
</div>
</div>
<div className={variableStyles.variablesContent}>
<div
className={variableStyles.environmentVariablesContainer}
>
<div
className={variableStyles.environmentVariablesHeader}
>
<p>Volumes</p>
</div>
<div className={variableStyles.envVariablesHeader}>
<div>
<p>Name</p>
<p>Path</p>
<p>Size/Type</p>
<p>Access Mode</p>
<p>Storage Class</p>
</div>
</div>
<div className={variableStyles.variableList}>
<div className={variableStyles.emptyVariableList}>
<div>
<p>No volume added</p>
</div>
</div>
</div>
</div>
</div>
<div className={variableStyles.variablesContent}>
<div
className={variableStyles.environmentVariablesContainer}
>
<div
className={variableStyles.environmentVariablesHeader}
>
<p>Config maps</p>
</div>
<div className={variableStyles.variableList}>
<div className={variableStyles.emptyVariableList}>
<div>
<p>No config map added</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className={styles.contentContainer}>
<ProjectDetails
className={`${styles.fieldsContainerCreateNew} ${!isMobile || (isProjectDetails && isMobile) ? styles.hasDisplay : styles.noDisplay}`}
register={register}
handleSubmit={handleSubmit}
errors={errors}
onSubmit={onSubmit}
triggerAlert={triggerAlert}
disableScaling={disableScaling}
disableReadiness={disableReadiness}
disableLiveness={disableLiveness}
setDisableScaling={setDisableScaling}
setDisableReadiness={setDisableReadiness}
setDisableLiveness={setDisableLiveness}
setTriggerAlert={setTriggerAlert}
minPods={minPods}
maxPods={maxPods}
readinessPath={readinessPath}
readinessPort={readinessPort}
livenessPort={livenessPort}
livenessPath={livenessPath}
setIsEnableIngress={setIsEnableIngress}
isEnableIngress={isEnableIngress}
/>
<Settings
className={`${variableStyles.variables} ${!isMobile || (!isProjectDetails && isMobile) ? variableStyles.hasDisplay : variableStyles.noDisplay}`}
setTriggerAddConfigMap={setTriggerAddConfigMap}
setTriggerAddVariable={setTriggerAddVariable}
setTriggerAddVolume={setTriggerAddVolume}
/>
</div>
</div>
</div>

323
frontend/src/app/projects/view/[servicesId]/projectDetails.jsx Normal file
View File

@@ -0,0 +1,323 @@
"use client";
import React, { useState } from "react";
import styles from "./styles.module.css";
import TextField from "@/app/components/fields/textfield";
import CustomCheckbox from "@/app/components/checkbox/CheckBox";
import SelectField from "@/app/components/select/SelectField";
import RadioButton from "@/app/components/radio-button/RadioButton";
const ProjectDetails = ({
register,
handleSubmit,
errors,
onSubmit,
triggerAlert,
disableScaling,
disableReadiness,
disableLiveness,
setDisableScaling,
setDisableReadiness,
setDisableLiveness,
setTriggerAlert,
minPods,
maxPods,
readinessPath,
readinessPort,
livenessPort,
livenessPath,
setIsEnableIngress,
isEnableIngress,
...props
}) => {
return (
<form {...props} id="form" onSubmit={handleSubmit(onSubmit)}>
<div className={styles.projectDetails}>
<div className={styles.projectDetailsHeader}>
<p>Project Details</p>
</div>
<div className={styles.fieldsCreateNew}>
<div className={styles.inputGroup}>
<div>
<p>Name</p>
<TextField
placeHolder="Enter service name"
{...register("serviceName", { required: true })}
hasError={!!errors.serviceName}
/>
</div>
<div>
<p>Version</p>
<TextField
placeHolder="Service version"
{...register("serviceVersion", { required: true })}
hasError={!!errors.serviceVersion}
/>
</div>
</div>
<div>
<div>
<p>
Image <span>(Optional)</span>
</p>
<TextField
placeHolder="Enter image name"
{...register("imageName", { required: false })}
hasError={!!errors.imageName}
/>
</div>
</div>
<div>
<div>
<p>Port</p>
<TextField
placeHolder="Enter port"
{...register("port", { required: true })}
hasError={!!errors.port}
/>
</div>
</div>
<div>
<div>
<p>Ingress</p>
<div className={styles.radioButtonContainer}>
<div>
<RadioButton
label="Enable"
name="isEnable"
value="true"
checked={isEnableIngress === true}
onChange={(e) =>
setIsEnableIngress(e.target.value === "true")
}
/>
<RadioButton
label="Disable"
name="isEnable"
value="false"
checked={isEnableIngress === false}
onChange={(e) =>
setIsEnableIngress(e.target.value === "true")
}
/>
</div>
</div>
</div>
</div>
{isEnableIngress && (
<>
<div>
<div>
<p>Sub Domain</p>
<TextField
placeHolder="Subdomain-"
{...register("subDomain", { required: isEnableIngress })}
hasError={!!errors.imageName}
/>
</div>
<div>
<p>Sub Domain</p>
<TextField
placeHolder="Subdomain-"
{...register("subDomain", { required: isEnableIngress })}
hasError={!!errors.imageName}
/>
</div>
</div>
<div>
<div>
<p>
Allowed Ips <span>(Optional)</span>
</p>
<textarea
className={styles.textarea}
name=""
id=""
placeholder="Enter allowed IP addresses (comma-separated, e.g., 192.168.1.1, 10.0.0.0/24)"
></textarea>
</div>
</div>
</>
)}
</div>
</div>
<div className={styles.resource}>
<div className={styles.projectDetailsHeader}>
<p>Resource</p>
</div>
<div className={styles.resourceFields}>
<div className={styles.inputGroup}>
<div>
<p>CPU Request (MB)</p>
<TextField
placeHolder="250"
{...register("cpuRequest", { required: true })}
hasError={!!errors.cpuRequest}
/>
</div>
<div>
<p>CPU Limit (MB)</p>
<TextField
placeHolder="250"
{...register("cpuLimit", { required: true })}
hasError={!!errors.cpuLimit}
/>
</div>
</div>
<div className={styles.inputGroup}>
<div>
<p>Memory Request (MB)</p>
<TextField
placeHolder="250"
{...register("memoryRequest", { required: true })}
hasError={!!errors.memoryRequest}
/>
</div>
<div>
<p>Memory Limit (MB)</p>
<TextField
placeHolder="500"
{...register("memoryLimit", { required: true })}
hasError={!!errors.memoryLimit}
/>
</div>
</div>
</div>
</div>
<div className={styles.additionalDetails}>
<div>
<div>
<div className={styles.additionalDetailsHeader}>
<div>
<p>Auto Scaling</p>
<CustomCheckbox
id="scalingCheckBox"
setChecked={() => setDisableScaling(!disableScaling)}
/>
</div>
</div>
<div className={styles.additionalDetailsFields}>
<div>
<div className={styles.inputGroup}>
<div>
<p>Minimum pods</p>
<TextField
placeHolder="1"
disabled={disableScaling}
{...register("minPods", {
required: maxPods.trim() !== "" && !disableScaling,
})}
hasError={!!errors.minPods}
/>
</div>
<div>
<p>Maximum pods</p>
<TextField
placeHolder="1"
disabled={disableScaling}
{...register("maxPods", {
required: minPods.trim() !== "" && !disableScaling,
})}
hasError={!!errors.maxPods}
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div className={styles.additionalDetailsHeader}>
<div>
<p>Readiness</p>
<CustomCheckbox
id="readiNessCheckBox"
setChecked={() => setDisableReadiness(!disableReadiness)}
/>
</div>
</div>
<div className={styles.additionalDetailsFields}>
<div>
<div className={styles.inputGroup}>
<div>
<p>Readiness Path</p>
<TextField
placeHolder="Enter Readiness path"
disabled={disableReadiness}
{...register("readinessPath", {
required:
readinessPort.trim() !== "" && !disableReadiness,
})}
hasError={!!errors.readinessPath}
/>
</div>
<div>
<p>Readiness Port</p>
<TextField
placeHolder="Enter Readiness port"
disabled={disableReadiness}
{...register("readinessPort", {
required:
readinessPath.trim() !== "" && !disableReadiness,
})}
hasError={!!errors.readinessPort}
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div className={styles.additionalDetailsHeader}>
<div>
<p>Liveness</p>
<CustomCheckbox
id="liveNessCheckBox"
setChecked={() => setDisableLiveness(!disableLiveness)}
/>
</div>
</div>
<div className={styles.additionalDetailsFields}>
<div>
<div className={styles.inputGroup}>
<div>
<p>Liveness Path</p>
<TextField
placeHolder="Enter liveness path"
disabled={disableLiveness}
{...register("livenessPath", {
required:
livenessPort.trim() !== "" && !disableLiveness,
})}
hasError={!!errors.livenessPath}
/>
</div>
<div>
<p>Liveness Port</p>
<TextField
placeHolder="Enter liveness port"
disabled={disableLiveness}
{...register("livenessPort", {
required:
livenessPath.trim() !== "" && !disableLiveness,
})}
hasError={!!errors.livenessPort}
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
);
};
export default ProjectDetails;

197
frontend/src/app/projects/view/[servicesId]/settings.jsx Normal file
View File

@@ -0,0 +1,197 @@
"use client";
import React, { useState } from "react";
import variableStyles from "./variableStyles.module.css";
import DeleteIcon from "@/app/components/icons/delete";
const Settings = ({
setTriggerAddVariable,
setTriggerAddVolume,
setTriggerAddConfigMap,
...props
}) => {
const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
const sampleData = [
{ id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
{
id: 2,
key: "DatabaseSettings:ConnectionString",
value:
"mongodb://databaseAdmin:d2OIxck4DHZgOJNuk1A@129.212.210.84:27017/?authSource=admin",
},
{ id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
{
id: 2,
key: "DatabaseSettings:ConnectionString",
value:
"mongodb://databaseAdmin:d2OIxck4DHZgOJNuk1A@129.212.210.84:27017/?authSource=admin",
},
{ id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
{
id: 2,
key: "DatabaseSettings:ConnectionString",
value:
"mongodb://databaseAdmin:d2OIxck4DHZgOJNuk1A@129.212.210.84:27017/?authSource=admin",
},
];
return (
<div {...props}>
<div className={variableStyles.variablesHeader}>
<div>
<div className={variableStyles.searchContainer}>
<div className={variableStyles.searchInputGroup}>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
<g clipPath="url(#clip0)">
<path
d="M8.66099 16.0271C12.7292 16.0271 16.0271 12.7292 16.0271 8.66099C16.0271 4.59282 12.7292 1.29492 8.66099 1.29492C4.59282 1.29492 1.29492 4.59282 1.29492 8.66099C1.29492 12.7292 4.59282 16.0271 8.66099 16.0271Z"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M18.7051 18.7061L14.0176 14.0186"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
</svg>
<input type="text" placeholder="Search" />
</div>
</div>
<div className={variableStyles.variablesHeaderDropDown}>
<div
className={variableStyles.variableHeaderDropdownButton}
onClick={() =>
setTriggerVariableDropDown(!triggerVariableDropDown)
}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M12 5.29199V18.7087"
stroke="white"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5.29102 12H18.7077"
stroke="white"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
{triggerVariableDropDown && (
<div className={variableStyles.dropDownContainer}>
<div
onClick={() => {
setTriggerAddVariable(true);
setTriggerVariableDropDown(!triggerVariableDropDown);
}}
>
<p>Environment Variables</p>
</div>
<div
onClick={() => {
setTriggerAddVolume(true);
setTriggerVariableDropDown(!triggerVariableDropDown);
}}
>
<p>Volumes</p>
</div>
<div
onClick={() => {
setTriggerAddConfigMap(true);
setTriggerVariableDropDown(!triggerVariableDropDown);
}}
>
<p>Config Maps</p>
</div>
</div>
)}
</div>
</div>
</div>
<div className={variableStyles.variablesContentContainer}>
<div>
<div className={variableStyles.variablesContent}>
<div className={variableStyles.environmentVariablesContainer}>
<div className={variableStyles.environmentVariablesHeader}>
<p>Environment Variables</p>
</div>
<div className={variableStyles.envVariablesHeader}>
<div>
<p>Key</p>
<p>Value</p>
</div>
</div>
<div className={variableStyles.variableList}>
{/* <div className={variableStyles.emptyVariableList}>
<div>
<p>No Environment Variables added</p>
</div>
</div> */}
{sampleData.map((data, key) => {
return (
<div className={variableStyles.variable}>
<p>{data.key}</p>
<p>{data.value}</p>
</div>
);
})}
</div>
</div>
</div>
<div className={variableStyles.variablesContent}>
<div className={variableStyles.environmentVariablesContainer}>
<div className={variableStyles.environmentVariablesHeader}>
<p>Volumes</p>
</div>
<div className={variableStyles.envVariablesHeader}>
<div>
<p>Name</p>
<p>Path</p>
<p>Size/Type</p>
<p>Access Mode</p>
<p>Storage Class</p>
</div>
</div>
<div className={variableStyles.variableList}>
<div className={variableStyles.emptyVariableList}>
<div>
<p>No volume added</p>
</div>
</div>
</div>
</div>
</div>
<div className={variableStyles.variablesContent}>
<div className={variableStyles.environmentVariablesContainer}>
<div className={variableStyles.environmentVariablesHeader}>
<p>Config maps</p>
</div>
<div className={variableStyles.variableList}>
<div className={variableStyles.emptyVariableList}>
<div>
<p>No config map added</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default Settings;

174
frontend/src/app/projects/view/[servicesId]/styles.module.css
View File

@@ -1,24 +1,122 @@
.content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
min-height: 0;
align-self: stretch;
}
.contentContainer {
display: flex;
align-items: flex-start;
flex: 1 0 0;
height: calc(100vh - 240px);
flex: 1;
align-self: stretch;
}
.heading {
display: none;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 0 16px;
align-self: stretch;
background: #191a24;
}
.heading > div {
display: flex;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.heading p {
display: flex;
padding: 24px 4px 16px 4px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 5px;
color: #85869b;
font-family: Inter;
font-size: 1.18rem;
font-weight: 400;
}
.heading .active {
border-bottom: 1px solid #959aff;
color: #959aff;
}
.fieldsContainerCreateNew {
display: flex;
padding-top: 36px;
flex-direction: column;
width: 550px;
align-items: flex-start;
gap: 36px;
background: #191a24;
height: calc(100vh - 175px);
height: calc(100vh - 170px);
min-height: 0;
flex: 1;
overflow-y: scroll;
scrollbar-width: none;
}
.radioButtonContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 12px;
align-self: stretch;
}
.radioButtonContainer > div {
display: flex;
align-items: flex-start;
gap: 24px;
padding: 20px 0;
}
.textarea {
display: flex;
height: 120px;
padding: 12px;
width: 100%;
flex-direction: column;
align-items: flex-start;
background-color: transparent;
gap: 10px;
align-self: stretch;
border-radius: 4px;
border: 1px solid #4b4f6d;
resize: none;
color: #85869b;
font-size: 1rem;
font-family: inter;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16px;
outline: none;
}
.textarea::placeholder {
color: #85869b;
}
.textarea:focus {
border-radius: 6px;
border: 1px solid #959aff;
background: rgba(75, 79, 109, 0.25);
}
.textarea:focus::placeholder {
color: #4b4f6d;
font-family: Inter;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.projectDetails {
display: flex;
padding: 0 36px;
padding: 0 20px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
@@ -33,7 +131,7 @@
}
.projectDetailsHeader p {
color: #d2d3e1;
font-size: 20px;
font-size: 1.25rem;
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -48,7 +146,7 @@
}
.resource {
display: flex;
padding: 0 36px;
padding: 0 20px;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
@@ -65,7 +163,7 @@
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
gap: 8px;
align-self: stretch;
}
@@ -81,7 +179,7 @@
.fieldsCreateNew > div > div p,
.resourceFields > div > div p {
color: #d2d3e1;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -92,25 +190,6 @@
color: #85869b;
}
.fieldsCreateNew > div > div select,
.resourceFields > div > div select {
display: flex;
padding: 12px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
align-self: stretch;
border-radius: 4px;
border: 1px solid #4b4f6d;
background-color: transparent;
color: white;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16px;
}
.repositoryForm {
display: flex;
padding: 12px;
@@ -123,7 +202,7 @@
border: 1px dashed #5980f1;
color: #5980f1;
text-align: center;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -174,7 +253,7 @@
.additionalDetailsHeader p {
color: #d2d3e1;
font-size: 20px;
font-size: 1.25rem;
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -211,9 +290,44 @@
}
.additionalDetailsFields p {
color: #d2d3e1;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16px;
}
.noDisplay {
display: none;
}
.hasDisplay {
display: flex;
}
@media (max-width: 768px) {
.heading {
display: flex;
}
.fieldsContainerCreateNew {
height: calc(100vh - 262px);
}
.content {
padding: 0;
}
.fieldsCreateNew .inputGroup,
.additionalDetailsFields > div .inputGroup,
.resourceFields .inputGroup {
display: flex;
flex-direction: column;
gap: 16px;
}
.fieldsCreateNew .inputGroup div,
.additionalDetailsFields > div .inputGroup div,
.resourceFields .inputGroup div {
width: 100%;
}
.projectDetailsHeader {
display: none;
}
.fieldsContainerCreateNew {
padding-top: 0;
}
}

94
frontend/src/app/projects/view/[servicesId]/variableStyles.module.css
View File

@@ -2,9 +2,8 @@
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 0 0;
flex: 1;
align-self: stretch;
background: #161720;
}
.variablesHeader {
@@ -23,7 +22,7 @@
}
.searchContainer > div {
display: flex;
width: 310px;
width: 100%;
padding: 8px 12px;
align-items: center;
gap: 9px;
@@ -36,7 +35,7 @@
.searchInputGroup input {
color: white;
font-family: Inter;
font-size: 18px;
font-size: 0.9rem;
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -103,6 +102,13 @@
align-self: stretch;
text-wrap: nowrap;
width: 100%;
border-radius: 4px;
color: #acb0ff;
font-family: Inter;
font-size: 0.9rem;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.dropDownContainer > div:hover {
background: #3c4159;
@@ -114,7 +120,7 @@
gap: 12px;
color: #acb0ff;
font-family: Inter;
font-size: 18px;
font-size: 0.9rem;
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -145,26 +151,7 @@
border-radius: 4px;
background: #1d1e2a;
}
.variable {
display: flex;
padding: 8px 0;
align-items: center;
align-self: stretch;
border-bottom: 0.5px solid #2e3042;
width: 100%;
}
.variable p {
display: flex;
align-items: center;
flex: 1 0 0;
align-self: stretch;
color: #d2d3e1;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.15px;
}
.environmentVariablesContainer {
display: flex;
min-height: 200px;
@@ -189,23 +176,25 @@
flex: 1 0 0;
color: #fff;
font-family: Inter;
font-size: 18px;
font-size: 0.9rem;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.envVariablesHeader {
display: flex;
flex-direction: column;
padding: 12px 24px;
align-items: flex-start;
width: 100%;
align-self: stretch;
flex-direction: column;
border-bottom: 1px solid #2c2e3f;
}
.envVariablesHeader > div {
display: flex;
padding: 12px 16px;
align-items: flex-start;
align-self: stretch;
border-bottom: 1px solid #2c2e3f;
}
.envVariablesHeader > div p {
display: flex;
@@ -213,23 +202,50 @@
flex: 1 0 0;
color: #85869b;
font-family: Inter;
font-size: 15px;
font-size: 0.9rem;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.variableList {
display: flex;
padding: 0 16px 16px 16px;
padding: 24px 24px 0 24px;
padding-bottom: 24px;
flex-direction: column;
align-items: center;
align-items: flex-start;
gap: 10px;
width: 100%;
flex: 1 0 0;
}
.variable {
display: flex;
align-items: flex-start;
align-self: stretch;
justify-content: space-between;
gap: 5px;
width: 100%;
}
.variable p {
display: flex;
align-items: start;
flex: 1 0 0;
align-self: stretch;
overflow-wrap: anywhere;
color: #d2d3e1;
font-size: 0.9rem;
font-weight: 400;
letter-spacing: 0.15px;
}
.emptyVariableList {
display: flex;
padding: 24px 16px 0 16px;
flex-direction: column;
align-items: flex-start;
width: 100%;
gap: 10px;
flex: 1 0 0;
}
@@ -237,6 +253,7 @@
display: flex;
justify-content: center;
align-items: center;
align-self: stretch;
}
.emptyVariableList > div > div {
@@ -246,8 +263,19 @@
flex: 1 0 0;
color: #85869b;
text-align: center;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.noDisplay {
display: none;
}
.hasDisplay {
display: flex;
}
@media (max-width: 768px) {
.variablesContentContainer > div {
height: calc(100vh - 342px);
}
}

505
frontend/src/app/projects/view/add-from-scratch/page.jsx
View File

@@ -4,20 +4,21 @@ import globalStyle from "@/app/globalStyle.module.css";
import TopHeader from "@/app/components/topHeader/TopHeader";
import styles from "./styles.module.css";
import variableStyles from "./variableStyles.module.css";
import TextField from "@/app/components/fields/textfield";
import AddVariableModal from "../variableModals/AddVariableModal/AddVariableModal";
import AddVolumeModal from "../variableModals/AddVolumes/AddVolumeModal";
import AddConfigMapModal from "../variableModals/AddConfigMap/AddConfigMapModal";
import DeleteIcon from "@/app/components/icons/delete";
import CustomCheckbox from "@/app/components/checkbox/CheckBox";
import SelectField from "@/app/components/select/SelectField";
import useServicesForm from "@/app/hooks/useServicesForm";
import Alert from "@/app/components/alerts/Alert";
import ProjectDetails from "./projectDetails";
import Settings from "./settings";
import useIsMobile from "@/app/hooks/useIsMobile";
const AddServices = () => {
const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
const [triggerAddVariable, setTriggerAddVariable] = useState(false);
const [triggerAddVolume, setTriggerAddVolume] = useState(false);
const [triggeAddConfigMap, setTriggerAddConfigMap] = useState(false);
const [triggerAddConfigMap, setTriggerAddConfigMap] = useState(false);
const [isProjectDetails, setIsProjectDetails] = useState(true);
const [isEnableIngress, setIsEnableIngress] = useState(false);
const isMobile = useIsMobile();
const {
register,
@@ -46,7 +47,7 @@ const AddServices = () => {
<Alert
setTriggerAlert={setTriggerAlert}
onClick={() => setEditState(true)}
title="Add User"
title="Create New Service"
/>
)}
{triggerAddVariable && (
@@ -55,7 +56,7 @@ const AddServices = () => {
{triggerAddVolume && (
<AddVolumeModal setTriggerAddVolume={setTriggerAddVolume} />
)}
{triggeAddConfigMap && (
{triggerAddConfigMap && (
<AddConfigMapModal setTriggerAddConfigMap={setTriggerAddConfigMap} />
)}
<div className={globalStyle.mainContainer}>
@@ -67,450 +68,54 @@ const AddServices = () => {
topbarTitle="Create New Services"
requiredButtons={["title", "save"]}
/>
<div className={styles.contentContainer}>
<form
className={styles.fieldsContainerCreateNew}
id="form"
onSubmit={handleSubmit(onSubmit)}
>
<div className={styles.projectDetails}>
<div className={styles.projectDetailsHeader}>
<p>Project Details</p>
</div>
<div className={styles.fieldsCreateNew}>
<div>
<div>
<p>
Repository <span>(Optional)</span>
</p>
<label className={styles.repositoryForm} htmlFor="#repo">
+ Link Repository
</label>
</div>
</div>
<div>
<div>
<p>Name</p>
<TextField
placeHolder="Enter service name"
{...register("serviceName", { required: true })}
hasError={!!errors.serviceName}
/>
</div>
<div>
<p>Version</p>
<TextField
placeHolder="Service version"
{...register("serviceVersion", { required: true })}
hasError={!!errors.serviceVersion}
/>
</div>
</div>
<div>
<div>
<p>
Image <span>(Optional)</span>
</p>
<TextField
placeHolder="Enter image name"
{...register("imageName", { required: false })}
hasError={!!errors.imageName}
/>
</div>
</div>
<div>
<div>
<p>Port</p>
<TextField
placeHolder="Enter port"
{...register("port", { required: true })}
hasError={!!errors.port}
/>
</div>
</div>
<div>
<div>
<p>Ingress</p>
<SelectField
label="Select"
options={[
{ label: "Option", value: "option" },
{ label: "Option 1", value: "option 1" },
{ label: "Option 2", value: "option 2" },
]}
/>
</div>
<div>
<p>Ingress</p>
<SelectField
label="Select"
options={[
{ label: "Option", value: "option" },
{ label: "Option 1", value: "option 1" },
{ label: "Option 2", value: "option 2" },
]}
/>
</div>
</div>
</div>
</div>
<div className={styles.resource}>
<div className={styles.projectDetailsHeader}>
<p>Resource</p>
</div>
<div className={styles.resourceFields}>
<div>
<div>
<p>CPU Request (MB)</p>
<TextField
placeHolder="250"
{...register("cpuRequest", { required: true })}
hasError={!!errors.cpuRequest}
/>
</div>
<div>
<p>CPU Limit (MB)</p>
<TextField
placeHolder="250"
{...register("cpuLimit", { required: true })}
hasError={!!errors.cpuLimit}
/>
</div>
</div>
<div>
<div>
<p>Memory Request (MB)</p>
<TextField
placeHolder="250"
{...register("memoryRequest", { required: true })}
hasError={!!errors.memoryRequest}
/>
</div>
<div>
<p>Memory Limit (MB)</p>
<TextField
placeHolder="500"
{...register("memoryLimit", { required: true })}
hasError={!!errors.memoryLimit}
/>
</div>
</div>
</div>
</div>
<div className={styles.additionalDetails}>
<div>
<div>
<div className={styles.additionalDetailsHeader}>
<div>
<p>Auto Scaling</p>
<CustomCheckbox
id="scalingCheckBox"
setChecked={() => setDisableScaling(!disableScaling)}
/>
</div>
</div>
<div className={styles.additionalDetailsFields}>
<div>
<div>
<div>
<p>Minimum pods</p>
<TextField
placeHolder="1"
disabled={disableScaling}
{...register("minPods", {
required: maxPods.trim() === "" ? false : true,
})}
hasError={!!errors.minPods}
/>
</div>
<div>
<p>Maximum pods</p>
<TextField
placeHolder="1"
disabled={disableScaling}
{...register("maxPods", {
required: minPods.trim() === "" ? false : true,
})}
hasError={!!errors.maxPods}
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div className={styles.additionalDetailsHeader}>
<div>
<p>Readiness</p>
<CustomCheckbox
id="readiNessCheckBox"
setChecked={() =>
setDisableReadiness(!disableReadiness)
}
/>
</div>
</div>
<div className={styles.additionalDetailsFields}>
<div>
<div>
<div>
<p>Readiness Path</p>
<TextField
placeHolder="Enter Readiness path"
disabled={disableReadiness}
{...register("readinessPath", {
required:
readinessPort.trim() === "" ? false : true,
})}
hasError={!!errors.readinessPath}
/>
</div>
<div>
<p>Readiness Port</p>
<TextField
placeHolder="Enter Readiness port"
disabled={disableReadiness}
{...register("readinessPort", {
required:
readinessPath.trim() === "" ? false : true,
})}
hasError={!!errors.readinessPort}
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div className={styles.additionalDetailsHeader}>
<div>
<p>Liveness</p>
<CustomCheckbox
id="liveNessCheckBox"
setChecked={() =>
setDisableLiveness(!disableLiveness)
}
/>
</div>
</div>
<div className={styles.additionalDetailsFields}>
<div>
<div>
<div>
<p>Liveness Path</p>
<TextField
placeHolder="Enter liveness path"
disabled={disableLiveness}
{...register("livenessPath", {
required:
livenessPort.trim() === "" ? false : true,
})}
hasError={!!errors.livenessPath}
/>
</div>
<div>
<p>Liveness Port</p>
<TextField
placeHolder="Enter liveness port"
disabled={disableLiveness}
{...register("livenessPort", {
required:
livenessPath.trim() === "" ? false : true,
})}
hasError={!!errors.livenessPort}
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<div className={variableStyles.variables}>
<div className={variableStyles.variablesHeader}>
<div>
<div className={variableStyles.searchContainer}>
<div className={variableStyles.searchInputGroup}>
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
>
<g clipPath="url(#clip0)">
<path
d="M8.66099 16.0271C12.7292 16.0271 16.0271 12.7292 16.0271 8.66099C16.0271 4.59282 12.7292 1.29492 8.66099 1.29492C4.59282 1.29492 1.29492 4.59282 1.29492 8.66099C1.29492 12.7292 4.59282 16.0271 8.66099 16.0271Z"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M18.7051 18.7061L14.0176 14.0186"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
</svg>
<input type="text" placeholder="Search" />
</div>
</div>
<div className={variableStyles.variablesHeaderDropDown}>
<div
className={variableStyles.variableHeaderDropdownButton}
onClick={() =>
setTriggerVariableDropDown(!triggerVariableDropDown)
}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M12 5.29199V18.7087"
stroke="white"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5.29102 12H18.7077"
stroke="white"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
{triggerVariableDropDown && (
<div className={variableStyles.dropDownContainer}>
<div
onClick={() => {
setTriggerAddVariable(true);
setTriggerVariableDropDown(
!triggerVariableDropDown,
);
}}
>
<p>Environment Variables</p>
</div>
<div
onClick={() => {
setTriggerAddVolume(true);
setTriggerVariableDropDown(
!triggerVariableDropDown,
);
}}
>
<p>Volumes</p>
</div>
<div
onClick={() => {
setTriggerAddConfigMap(true);
setTriggerVariableDropDown(
!triggerVariableDropDown,
);
}}
>
<p>Config Maps</p>
</div>
</div>
)}
</div>
</div>
</div>
<div className={variableStyles.variablesContentContainer}>
<div>
<div className={variableStyles.variablesContent}>
<div
className={variableStyles.environmentVariablesContainer}
>
<div
className={variableStyles.environmentVariablesHeader}
>
<p>Environment Variables</p>
</div>
<div className={variableStyles.envVariablesHeader}>
<div>
<p>Key</p>
<p>Value</p>
</div>
</div>
<div className={variableStyles.variableList}>
<div className={variableStyles.emptyVariableList}>
<div>
<p>No Environment Variables added</p>
</div>
</div>
{/* <div className={variableStyles.variable}>
<p>REQUEST_SERVICE_GRPC</p>
<p>request-service:50053</p>
<DeleteIcon />
</div> */}
</div>
</div>
</div>
<div className={variableStyles.variablesContent}>
<div
className={variableStyles.environmentVariablesContainer}
>
<div
className={variableStyles.environmentVariablesHeader}
>
<p>Volumes</p>
</div>
<div className={variableStyles.envVariablesHeader}>
<div>
<p>Name</p>
<p>Path</p>
<p>Size/Type</p>
<p>Access Mode</p>
<p>Storage Class</p>
</div>
</div>
<div className={variableStyles.variableList}>
<div className={variableStyles.emptyVariableList}>
<div>
<p>No volume added</p>
</div>
</div>
</div>
</div>
</div>
<div className={variableStyles.variablesContent}>
<div
className={variableStyles.environmentVariablesContainer}
>
<div
className={variableStyles.environmentVariablesHeader}
>
<p>Config maps</p>
</div>
<div className={variableStyles.variableList}>
<div className={variableStyles.emptyVariableList}>
<div>
<p>No config map added</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div className={styles.content}>
<div className={styles.heading}>
<div>
<p
className={`${isProjectDetails ? styles.active : null}`}
onClick={() => setIsProjectDetails(true)}
>
Project Details
</p>
<p
className={`${!isProjectDetails ? styles.active : null}`}
onClick={() => setIsProjectDetails(false)}
>
Settings
</p>
</div>
</div>
<div className={styles.contentContainer}>
<ProjectDetails
className={`${styles.fieldsContainerCreateNew} ${!isMobile || (isProjectDetails && isMobile) ? styles.hasDisplay : styles.noDisplay}`}
register={register}
handleSubmit={handleSubmit}
errors={errors}
onSubmit={onSubmit}
triggerAlert={triggerAlert}
disableScaling={disableScaling}
disableReadiness={disableReadiness}
disableLiveness={disableLiveness}
setDisableScaling={setDisableScaling}
setDisableReadiness={setDisableReadiness}
setDisableLiveness={setDisableLiveness}
setTriggerAlert={setTriggerAlert}
minPods={minPods}
maxPods={maxPods}
readinessPath={readinessPath}
readinessPort={readinessPort}
livenessPort={livenessPort}
livenessPath={livenessPath}
setIsEnableIngress={setIsEnableIngress}
isEnableIngress={isEnableIngress}
/>
<Settings
className={`${variableStyles.variables} ${!isMobile || (!isProjectDetails && isMobile) ? variableStyles.hasDisplay : variableStyles.noDisplay}`}
setTriggerAddConfigMap={setTriggerAddConfigMap}
setTriggerAddVariable={setTriggerAddVariable}
setTriggerAddVolume={setTriggerAddVolume}
/>
</div>
</div>
</div>
</div>

346
frontend/src/app/projects/view/add-from-scratch/projectDetails.jsx Normal file
View File

@@ -0,0 +1,346 @@
"use client";
import React, { useState } from "react";
import styles from "./styles.module.css";
import TextField from "@/app/components/fields/textfield";
import CustomCheckbox from "@/app/components/checkbox/CheckBox";
import SelectField from "@/app/components/select/SelectField";
import RadioButton from "@/app/components/radio-button/RadioButton";
const ProjectDetails = ({
register,
handleSubmit,
errors,
onSubmit,
triggerAlert,
disableScaling,
disableReadiness,
disableLiveness,
setDisableScaling,
setDisableReadiness,
setDisableLiveness,
setTriggerAlert,
minPods,
maxPods,
readinessPath,
readinessPort,
livenessPort,
livenessPath,
setIsEnableIngress,
isEnableIngress,
...props
}) => {
return (
<form {...props} id="form" onSubmit={handleSubmit(onSubmit)}>
<div className={styles.projectDetails}>
<div className={styles.projectDetailsHeader}>
<p>Project Details</p>
</div>
<div className={styles.fieldsCreateNew}>
<div>
<div>
<p>
Repository <span>(Optional)</span>
</p>
<label className={styles.repositoryForm} htmlFor="#repo">
+ Link Repository
</label>
</div>
</div>
<div className={styles.inputGroup}>
<div>
<p>Name</p>
<TextField
placeHolder="Enter service name"
{...register("serviceName", { required: true })}
hasError={!!errors.serviceName}
/>
</div>
<div>
<p>Version</p>
<TextField
placeHolder="Service version"
{...register("serviceVersion", { required: true })}
hasError={!!errors.serviceVersion}
/>
</div>
</div>
<div>
<div>
<p>
Image <span>(Optional)</span>
</p>
<TextField
placeHolder="Enter image name"
{...register("imageName", { required: false })}
hasError={!!errors.imageName}
/>
</div>
</div>
<div>
<div>
<p>Port</p>
<TextField
placeHolder="Enter port"
{...register("port", { required: true })}
hasError={!!errors.port}
/>
</div>
</div>
<div>
<div>
<p>Ingress</p>
<div className={styles.radioButtonContainer}>
<div>
<RadioButton
label="Enable"
name="isEnable"
value="true"
checked={isEnableIngress === true}
onChange={(e) =>
setIsEnableIngress(e.target.value === "true")
}
/>
<RadioButton
label="Disable"
name="isEnable"
value="false"
checked={isEnableIngress === false}
onChange={(e) =>
setIsEnableIngress(e.target.value === "true")
}
/>
</div>
</div>
</div>
</div>
{isEnableIngress && (
<>
<div>
<div>
<p>Sub Domain</p>
<TextField
placeHolder="Subdomain-"
{...register("subDomain", { required: isEnableIngress })}
hasError={!!errors.imageName}
/>
</div>
<div>
<p>Sub Domain</p>
<TextField
placeHolder="Subdomain-"
{...register("subDomain", { required: isEnableIngress })}
hasError={!!errors.imageName}
/>
</div>
</div>
<div>
<div>
<p>
Allowed Ips <span>(Optional)</span>
</p>
<textarea
className={styles.textarea}
name=""
id=""
placeholder="Enter allowed IP addresses (comma-separated, e.g., 192.168.1.1, 10.0.0.0/24)"
></textarea>
</div>
</div>
</>
)}
<div>
<div>
<p>Type</p>
<SelectField
label="Select"
options={[
{ label: "Option", value: "option" },
{ label: "Option 1", value: "option 1" },
{ label: "Option 2", value: "option 2" },
]}
/>
</div>
</div>
</div>
</div>
<div className={styles.resource}>
<div className={styles.projectDetailsHeader}>
<p>Resource</p>
</div>
<div className={styles.resourceFields}>
<div className={styles.inputGroup}>
<div>
<p>CPU Request (MB)</p>
<TextField
placeHolder="250"
{...register("cpuRequest", { required: true })}
hasError={!!errors.cpuRequest}
/>
</div>
<div>
<p>CPU Limit (MB)</p>
<TextField
placeHolder="250"
{...register("cpuLimit", { required: true })}
hasError={!!errors.cpuLimit}
/>
</div>
</div>
<div className={styles.inputGroup}>
<div>
<p>Memory Request (MB)</p>
<TextField
placeHolder="250"
{...register("memoryRequest", { required: true })}
hasError={!!errors.memoryRequest}
/>
</div>
<div>
<p>Memory Limit (MB)</p>
<TextField
placeHolder="500"
{...register("memoryLimit", { required: true })}
hasError={!!errors.memoryLimit}
/>
</div>
</div>
</div>
</div>
<div className={styles.additionalDetails}>
<div>
<div>
<div className={styles.additionalDetailsHeader}>
<div>
<p>Auto Scaling</p>
<CustomCheckbox
id="scalingCheckBox"
setChecked={() => setDisableScaling(!disableScaling)}
/>
</div>
</div>
<div className={styles.additionalDetailsFields}>
<div>
<div className={styles.inputGroup}>
<div>
<p>Minimum pods</p>
<TextField
placeHolder="1"
disabled={disableScaling}
{...register("minPods", {
required: maxPods.trim() !== "" && !disableScaling,
})}
hasError={!!errors.minPods}
/>
</div>
<div>
<p>Maximum pods</p>
<TextField
placeHolder="1"
disabled={disableScaling}
{...register("maxPods", {
required: minPods.trim() !== "" && !disableScaling,
})}
hasError={!!errors.maxPods}
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div className={styles.additionalDetailsHeader}>
<div>
<p>Readiness</p>
<CustomCheckbox
id="readiNessCheckBox"
setChecked={() => setDisableReadiness(!disableReadiness)}
/>
</div>
</div>
<div className={styles.additionalDetailsFields}>
<div>
<div className={styles.inputGroup}>
<div>
<p>Readiness Path</p>
<TextField
placeHolder="Enter Readiness path"
disabled={disableReadiness}
{...register("readinessPath", {
required:
readinessPort.trim() !== "" && !disableReadiness,
})}
hasError={!!errors.readinessPath}
/>
</div>
<div>
<p>Readiness Port</p>
<TextField
placeHolder="Enter Readiness port"
disabled={disableReadiness}
{...register("readinessPort", {
required:
readinessPath.trim() !== "" && !disableReadiness,
})}
hasError={!!errors.readinessPort}
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div className={styles.additionalDetailsHeader}>
<div>
<p>Liveness</p>
<CustomCheckbox
id="liveNessCheckBox"
setChecked={() => setDisableLiveness(!disableLiveness)}
/>
</div>
</div>
<div className={styles.additionalDetailsFields}>
<div>
<div className={styles.inputGroup}>
<div>
<p>Liveness Path</p>
<TextField
placeHolder="Enter liveness path"
disabled={disableLiveness}
{...register("livenessPath", {
required:
livenessPort.trim() !== "" && !disableLiveness,
})}
hasError={!!errors.livenessPath}
/>
</div>
<div>
<p>Liveness Port</p>
<TextField
placeHolder="Enter liveness port"
disabled={disableLiveness}
{...register("livenessPort", {
required:
livenessPath.trim() !== "" && !disableLiveness,
})}
hasError={!!errors.livenessPort}
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
);
};
export default ProjectDetails;

171
frontend/src/app/projects/view/add-from-scratch/settings.jsx Normal file
View File

@@ -0,0 +1,171 @@
"use client";
import React, { useState } from "react";
import variableStyles from "./variableStyles.module.css";
const Settings = ({
setTriggerAddVariable,
setTriggerAddVolume,
setTriggerAddConfigMap,
...props
}) => {
const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
return (
<div {...props}>
<div className={variableStyles.variablesHeader}>
<div>
<div className={variableStyles.searchContainer}>
<div className={variableStyles.searchInputGroup}>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
<g clipPath="url(#clip0)">
<path
d="M8.66099 16.0271C12.7292 16.0271 16.0271 12.7292 16.0271 8.66099C16.0271 4.59282 12.7292 1.29492 8.66099 1.29492C4.59282 1.29492 1.29492 4.59282 1.29492 8.66099C1.29492 12.7292 4.59282 16.0271 8.66099 16.0271Z"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M18.7051 18.7061L14.0176 14.0186"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
</svg>
<input type="text" placeholder="Search" />
</div>
</div>
<div className={variableStyles.variablesHeaderDropDown}>
<div
className={variableStyles.variableHeaderDropdownButton}
onClick={() =>
setTriggerVariableDropDown(!triggerVariableDropDown)
}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M12 5.29199V18.7087"
stroke="white"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5.29102 12H18.7077"
stroke="white"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
{triggerVariableDropDown && (
<div className={variableStyles.dropDownContainer}>
<div
onClick={() => {
setTriggerAddVariable(true);
setTriggerVariableDropDown(!triggerVariableDropDown);
}}
>
<p>Environment Variables</p>
</div>
<div
onClick={() => {
setTriggerAddVolume(true);
setTriggerVariableDropDown(!triggerVariableDropDown);
}}
>
<p>Volumes</p>
</div>
<div
onClick={() => {
setTriggerAddConfigMap(true);
setTriggerVariableDropDown(!triggerVariableDropDown);
}}
>
<p>Config Maps</p>
</div>
</div>
)}
</div>
</div>
</div>
<div className={variableStyles.variablesContentContainer}>
<div>
<div className={variableStyles.variablesContent}>
<div className={variableStyles.environmentVariablesContainer}>
<div className={variableStyles.environmentVariablesHeader}>
<p>Environment Variables</p>
</div>
<div className={variableStyles.envVariablesHeader}>
<div>
<p>Key</p>
<p>Value</p>
</div>
</div>
<div className={variableStyles.variableList}>
<div className={variableStyles.emptyVariableList}>
<div>
<p>No Environment Variables added</p>
</div>
</div>
{/* <div className={variableStyles.variable}>
<p>REQUEST_SERVICE_GRPC</p>
<p>request-service:50053</p>
<DeleteIcon />
</div> */}
</div>
</div>
</div>
<div className={variableStyles.variablesContent}>
<div className={variableStyles.environmentVariablesContainer}>
<div className={variableStyles.environmentVariablesHeader}>
<p>Volumes</p>
</div>
<div className={variableStyles.envVariablesHeader}>
<div>
<p>Name</p>
<p>Path</p>
<p>Size/Type</p>
<p>Access Mode</p>
<p>Storage Class</p>
</div>
</div>
<div className={variableStyles.variableList}>
<div className={variableStyles.emptyVariableList}>
<div>
<p>No volume added</p>
</div>
</div>
</div>
</div>
</div>
<div className={variableStyles.variablesContent}>
<div className={variableStyles.environmentVariablesContainer}>
<div className={variableStyles.environmentVariablesHeader}>
<p>Config maps</p>
</div>
<div className={variableStyles.variableList}>
<div className={variableStyles.emptyVariableList}>
<div>
<p>No config map added</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default Settings;

156
frontend/src/app/projects/view/add-from-scratch/styles.module.css
View File

@@ -1,24 +1,71 @@
.content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
min-height: 0;
align-self: stretch;
}
.contentContainer {
display: flex;
align-items: flex-start;
flex: 1 0 0;
height: calc(100vh - 240px);
flex: 1;
align-self: stretch;
}
.heading {
display: none;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 0 16px;
align-self: stretch;
background: #191a24;
}
.heading > div {
display: flex;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.heading p {
display: flex;
padding: 24px 4px 16px 4px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 5px;
color: #85869b;
font-family: Inter;
font-size: 1.18rem;
font-weight: 400;
}
.heading .active {
border-bottom: 1px solid #959aff;
color: #959aff;
}
.fieldsContainerCreateNew {
display: flex;
padding-top: 36px;
flex-direction: column;
width: 550px;
align-items: flex-start;
gap: 36px;
background: #191a24;
height: calc(100vh - 175px);
height: calc(100vh - 170px);
min-height: 0;
flex: 1;
overflow-y: scroll;
scrollbar-width: none;
}
.projectDetails {
display: flex;
padding: 0 36px;
padding: 0 20px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
@@ -33,7 +80,7 @@
}
.projectDetailsHeader p {
color: #d2d3e1;
font-size: 20px;
font-size: 1.25rem;
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -46,9 +93,61 @@
gap: 16px;
align-self: stretch;
}
.radioButtonContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 12px;
align-self: stretch;
}
.radioButtonContainer > div {
display: flex;
align-items: flex-start;
gap: 24px;
padding: 20px 0;
}
.textarea {
display: flex;
height: 120px;
padding: 12px;
width: 100%;
flex-direction: column;
align-items: flex-start;
background-color: transparent;
gap: 10px;
align-self: stretch;
border-radius: 4px;
border: 1px solid #4b4f6d;
resize: none;
color: #85869b;
font-size: 1rem;
font-family: inter;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16px;
outline: none;
}
.textarea::placeholder {
color: #85869b;
}
.textarea:focus {
border-radius: 6px;
border: 1px solid #959aff;
background: rgba(75, 79, 109, 0.25);
}
.textarea:focus::placeholder {
color: #4b4f6d;
font-family: Inter;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.resource {
display: flex;
padding: 0 36px;
padding: 0 20px;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
@@ -82,13 +181,13 @@
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 12px;
gap: 16px;
flex: 1 0 0;
}
.fieldsCreateNew > div > div p,
.resourceFields > div > div p {
color: #d2d3e1;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -111,7 +210,7 @@
border: 1px dashed #5980f1;
color: #5980f1;
text-align: center;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -162,7 +261,7 @@
.additionalDetailsHeader p {
color: #d2d3e1;
font-size: 20px;
font-size: 1.25rem;
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -199,9 +298,44 @@
}
.additionalDetailsFields p {
color: #d2d3e1;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16px;
}
.noDisplay {
display: none;
}
.hasDisplay {
display: flex;
}
@media (max-width: 768px) {
.heading {
display: flex;
}
.fieldsContainerCreateNew {
height: calc(100vh - 262px);
}
.content {
padding: 0;
}
.fieldsCreateNew .inputGroup,
.additionalDetailsFields > div .inputGroup,
.resourceFields .inputGroup {
display: flex;
flex-direction: column;
gap: 16px;
}
.fieldsCreateNew .inputGroup div,
.additionalDetailsFields > div .inputGroup div,
.resourceFields .inputGroup div {
width: 100%;
}
.projectDetailsHeader {
display: none;
}
.fieldsContainerCreateNew {
padding-top: 0;
}
}

30
frontend/src/app/projects/view/add-from-scratch/variableStyles.module.css
View File

@@ -2,9 +2,8 @@
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 0 0;
flex: 1;
align-self: stretch;
background: #161720;
}
.variablesHeader {
@@ -23,7 +22,7 @@
}
.searchContainer > div {
display: flex;
width: 310px;
width: 100%;
padding: 8px 12px;
align-items: center;
gap: 9px;
@@ -36,7 +35,7 @@
.searchInputGroup input {
color: white;
font-family: Inter;
font-size: 18px;
font-size: 1.18rem;
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -106,7 +105,7 @@
border-radius: 4px;
color: #acb0ff;
font-family: Inter;
font-size: 18px;
font-size: 1.18rem;
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -121,7 +120,7 @@
gap: 12px;
color: #acb0ff;
font-family: Inter;
font-size: 18px;
font-size: 1.18rem;
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -166,7 +165,7 @@
flex: 1 0 0;
align-self: stretch;
color: #d2d3e1;
font-size: 15px;
font-size: 0.9rem;
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -196,7 +195,7 @@
flex: 1 0 0;
color: #fff;
font-family: Inter;
font-size: 18px;
font-size: 1.18rem;
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -220,7 +219,7 @@
flex: 1 0 0;
color: #85869b;
font-family: Inter;
font-size: 15px;
font-size: 0.93rem;
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -253,8 +252,19 @@
flex: 1 0 0;
color: #85869b;
text-align: center;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.noDisplay {
display: none;
}
.hasDisplay {
display: flex;
}
@media (max-width: 768px) {
.variablesContentContainer > div {
height: calc(100vh - 342px);
}
}

459
frontend/src/app/projects/view/page.jsx
View File

@@ -6,10 +6,13 @@ import styles from "./styles.module.css";
import AddServicesModal from "./AddServicesModal/AddServicesModal";
import { useRouter, usePathname } from "next/navigation";
import CopyIcon from "@/app/components/icons/copy";
import useIsMobile from "@/app/hooks/useIsMobile";
import Card from "./service-card/Card";
import MobileSearchBar from "@/app/components/mobileSearchBar/MobileSearchBar";
const AddProject = () => {
const [triggerAddServicesModal, setTriggerAddServicesModal] = useState(false);
const router = useRouter();
const isMobile = useIsMobile();
const pathName = usePathname();
const sampleData = [
{
@@ -108,6 +111,19 @@ const AddProject = () => {
"services-drop-down",
]}
/>
<div className={styles.cardContainer}>
<MobileSearchBar />
{isMobile &&
sampleData.map((data, key) => (
<Card
data={data}
key={key}
onClick={() => router.push(`${pathName}/${data.id}`)}
/>
))}
</div>
<div className={styles.tableContainer}>
<table className={styles.table}>
<thead>
@@ -116,243 +132,256 @@ const AddProject = () => {
<th>Version</th>
<th>Health</th>
<th>Status</th>
<th width="15%">Image</th>
<th width="10%">Image</th>
<th>Ingress</th>
<th>Port</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{sampleData.map((services, index) => {
return (
<tr
key={index}
onClick={() =>
router.push(`${pathName}/${services.id}`)
}
>
<td>{services.name}</td>
<td style={{ textAlign: "center" }}>
{services.version}
</td>
<td>
<div className={styles.servicesHealth}>
<div>
{!isMobile &&
sampleData.map((services, index) => {
return (
<tr
key={index}
onClick={() =>
router.push(`${pathName}/${services.id}`)
}
>
<td>{services.name}</td>
<td style={{ textAlign: "center" }}>
{services.version}
</td>
<td>
<div className={styles.servicesHealth}>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="8"
height="8"
viewBox="0 0 8 8"
fill="none"
>
<path
d="M2.32605 1.02451C2.62107 0.974241 2.92361 0.990823 3.21137 1.07303C3.49913 1.15524 3.76477 1.30098 3.98872 1.49951L4.00105 1.51051L4.01238 1.50051C4.22612 1.31294 4.47739 1.17311 4.74944 1.09034C5.02149 1.00756 5.30807 0.983759 5.59005 1.02051L5.67205 1.03251C6.02748 1.09388 6.35971 1.25023 6.63354 1.485C6.90737 1.71977 7.11261 2.02422 7.22753 2.36612C7.34245 2.70802 7.36278 3.07463 7.28635 3.42713C7.20992 3.77963 7.03959 4.10491 6.79338 4.36851L6.73338 4.43017L6.71738 4.44384L4.23405 6.90351C4.17674 6.96023 4.10082 6.99425 4.02034 6.99928C3.93987 7.0043 3.8603 6.97999 3.79638 6.93084L3.76505 6.90351L1.26738 4.42951C1.00279 4.17206 0.814617 3.8464 0.723703 3.4886C0.63279 3.13079 0.642684 2.75481 0.75229 2.40228C0.861896 2.04975 1.06694 1.73444 1.3447 1.49127C1.62247 1.24809 1.96213 1.08654 2.32605 1.02451Z"
fill="#4A9D41"
style={{ fill: "#4A9D41", fillOpacity: 1 }}
/>
</svg>
<p>Overall</p>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="8"
height="8"
viewBox="0 0 8 8"
fill="none"
>
<path
d="M2.32605 1.02451C2.62107 0.974241 2.92361 0.990823 3.21137 1.07303C3.49913 1.15524 3.76477 1.30098 3.98872 1.49951L4.00105 1.51051L4.01238 1.50051C4.22612 1.31294 4.47739 1.17311 4.74944 1.09034C5.02149 1.00756 5.30807 0.983759 5.59005 1.02051L5.67205 1.03251C6.02748 1.09388 6.35971 1.25023 6.63354 1.485C6.90737 1.71977 7.11261 2.02422 7.22753 2.36612C7.34245 2.70802 7.36278 3.07463 7.28635 3.42713C7.20992 3.77963 7.03959 4.10491 6.79338 4.36851L6.73338 4.43017L6.71738 4.44384L4.23405 6.90351C4.17674 6.96023 4.10082 6.99425 4.02034 6.99928C3.93987 7.0043 3.8603 6.97999 3.79638 6.93084L3.76505 6.90351L1.26738 4.42951C1.00279 4.17206 0.814617 3.8464 0.723703 3.4886C0.63279 3.13079 0.642684 2.75481 0.75229 2.40228C0.861896 2.04975 1.06694 1.73444 1.3447 1.49127C1.62247 1.24809 1.96213 1.08654 2.32605 1.02451Z"
fill="#4A9D41"
style={{
fill: "#4A9D41",
fillOpacity: 1,
}}
/>
</svg>
<p>Overall</p>
</div>
<p>{services.health.overall}</p>
</div>
<p>{services.health.overall}</p>
</div>
<div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="8"
height="8"
viewBox="0 0 8 8"
fill="none"
>
<path
d="M4.42857 0V3.11111H7L3.57143 8V4.88889H1L4.42857 0Z"
fill="#CAB111"
style={{ fill: "#CAB111", fillOpacity: 1 }}
/>
</svg>
<p>Liveness</p>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="8"
height="8"
viewBox="0 0 8 8"
fill="none"
>
<path
d="M4.42857 0V3.11111H7L3.57143 8V4.88889H1L4.42857 0Z"
fill="#CAB111"
style={{
fill: "#CAB111",
fillOpacity: 1,
}}
/>
</svg>
<p>Liveness</p>
</div>
<p>{services.health.liveness}</p>
</div>
<p>{services.health.liveness}</p>
</div>
<div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="8"
height="8"
viewBox="0 0 8 8"
fill="none"
>
<path
d="M2 1.33343V6.66676C1.99998 6.72607 2.01579 6.78431 2.04579 6.83547C2.0758 6.88663 2.11891 6.92887 2.17067 6.95781C2.22244 6.98675 2.281 7.00135 2.34029 7.00011C2.39959 6.99888 2.45748 6.98184 2.508 6.95076L6.84133 4.28409C6.88987 4.25427 6.92995 4.21251 6.95775 4.16279C6.98555 4.11307 7.00015 4.05706 7.00015 4.00009C7.00015 3.94313 6.98555 3.88712 6.95775 3.8374C6.92995 3.78768 6.88987 3.74592 6.84133 3.71609L2.508 1.04943C2.45748 1.01835 2.39959 1.00131 2.34029 1.00007C2.281 0.998834 2.22244 1.01344 2.17067 1.04238C2.11891 1.07132 2.0758 1.11355 2.04579 1.16472C2.01579 1.21588 1.99998 1.27412 2 1.33343Z"
fill="#757696"
style={{ fill: "#757696", fillOpacity: 1 }}
/>
</svg>
<p>Readiness</p>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="8"
height="8"
viewBox="0 0 8 8"
fill="none"
>
<path
d="M2 1.33343V6.66676C1.99998 6.72607 2.01579 6.78431 2.04579 6.83547C2.0758 6.88663 2.11891 6.92887 2.17067 6.95781C2.22244 6.98675 2.281 7.00135 2.34029 7.00011C2.39959 6.99888 2.45748 6.98184 2.508 6.95076L6.84133 4.28409C6.88987 4.25427 6.92995 4.21251 6.95775 4.16279C6.98555 4.11307 7.00015 4.05706 7.00015 4.00009C7.00015 3.94313 6.98555 3.88712 6.95775 3.8374C6.92995 3.78768 6.88987 3.74592 6.84133 3.71609L2.508 1.04943C2.45748 1.01835 2.39959 1.00131 2.34029 1.00007C2.281 0.998834 2.22244 1.01344 2.17067 1.04238C2.11891 1.07132 2.0758 1.11355 2.04579 1.16472C2.01579 1.21588 1.99998 1.27412 2 1.33343Z"
fill="#757696"
style={{
fill: "#757696",
fillOpacity: 1,
}}
/>
</svg>
<p>Readiness</p>
</div>
<p>{services.health.readiness}</p>
</div>
<p>{services.health.readiness}</p>
</div>
</div>
</td>
<td>
<div className={styles.servicesStatus}>
<div>
</td>
<td>
<div className={styles.servicesStatus}>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="8"
height="8"
viewBox="0 0 8 8"
fill="none"
>
<path
d="M2.19128 4.12547C2.33573 3.74214 2.51489 3.37964 2.72878 3.03797C2.94266 2.6963 3.18573 2.37269 3.45794 2.06714L2.81628 1.94214C2.70516 1.9199 2.59544 1.92547 2.48711 1.9588C2.37878 1.99214 2.28573 2.04769 2.20794 2.12547L1.07461 3.26714C1.0135 3.32824 0.991276 3.40185 1.00794 3.48797C1.02461 3.57407 1.07183 3.63381 1.14961 3.66714L2.19128 4.12547ZM7.02461 0.808797C6.41906 0.764353 5.84544 0.86852 5.30378 1.1213C4.76211 1.37407 4.27461 1.71714 3.84128 2.15047C3.56349 2.42824 3.31766 2.72407 3.10378 3.03797C2.88989 3.35185 2.71349 3.69214 2.57461 4.0588C2.55239 4.11436 2.54128 4.1699 2.54128 4.22547C2.54128 4.28102 2.56349 4.33102 2.60794 4.37547L3.73294 5.50047C3.77739 5.5449 3.82739 5.56714 3.88294 5.56714C3.93849 5.56714 3.99406 5.55602 4.04961 5.5338C4.41628 5.40047 4.75656 5.22547 5.07044 5.0088C5.38433 4.79214 5.68016 4.54491 5.95794 4.26714C6.39128 3.83381 6.73573 3.34631 6.99128 2.80464C7.24683 2.26297 7.35239 1.68935 7.30794 1.0838C7.30239 1.05046 7.29266 1.01852 7.27878 0.987963C7.26489 0.957408 7.24406 0.928242 7.21628 0.900463C7.18849 0.872687 7.15933 0.851853 7.12878 0.837963C7.09823 0.824075 7.06349 0.814353 7.02461 0.808797ZM4.88294 3.22547C4.77183 3.11435 4.71628 2.97685 4.71628 2.81297C4.71628 2.64907 4.77183 2.51157 4.88294 2.40047C4.99406 2.28935 5.13156 2.2338 5.29544 2.2338C5.45933 2.2338 5.59683 2.28935 5.70794 2.40047C5.81906 2.51157 5.87461 2.64907 5.87461 2.81297C5.87461 2.97685 5.81906 3.11435 5.70794 3.22547C5.59683 3.33657 5.45933 3.39214 5.29544 3.39214C5.13156 3.39214 4.99406 3.33657 4.88294 3.22547ZM3.99128 5.91714L4.44128 6.95881C4.47461 7.04214 4.53573 7.09074 4.62461 7.10464C4.71349 7.11852 4.78849 7.0949 4.84961 7.0338L5.98294 5.90047C6.06073 5.82269 6.11628 5.72964 6.14961 5.6213C6.18294 5.51297 6.18849 5.40324 6.16628 5.29214L6.04961 4.65047C5.74406 4.92269 5.42044 5.16574 5.07878 5.37964C4.73711 5.59352 4.37461 5.77269 3.99128 5.91714ZM1.34961 5.35047C1.54405 5.15602 1.78016 5.0574 2.05794 5.05464C2.33573 5.05186 2.57183 5.14769 2.76628 5.34214C2.96073 5.53657 3.05794 5.77269 3.05794 6.05047C3.05794 6.32824 2.96073 6.56435 2.76628 6.7588C2.49961 7.02547 2.18433 7.1838 1.82044 7.23381C1.45655 7.28381 1.09128 7.3338 0.724609 7.3838C0.774609 7.01714 0.825998 6.65185 0.878776 6.28797C0.931553 5.92407 1.0885 5.61157 1.34961 5.35047Z"
fill="#82EEFF"
style={{ fill: "#82EEFF", fillOpacity: 1 }}
/>
</svg>
<p>Deployment</p>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="8"
height="8"
viewBox="0 0 8 8"
fill="none"
>
<path
d="M2.19128 4.12547C2.33573 3.74214 2.51489 3.37964 2.72878 3.03797C2.94266 2.6963 3.18573 2.37269 3.45794 2.06714L2.81628 1.94214C2.70516 1.9199 2.59544 1.92547 2.48711 1.9588C2.37878 1.99214 2.28573 2.04769 2.20794 2.12547L1.07461 3.26714C1.0135 3.32824 0.991276 3.40185 1.00794 3.48797C1.02461 3.57407 1.07183 3.63381 1.14961 3.66714L2.19128 4.12547ZM7.02461 0.808797C6.41906 0.764353 5.84544 0.86852 5.30378 1.1213C4.76211 1.37407 4.27461 1.71714 3.84128 2.15047C3.56349 2.42824 3.31766 2.72407 3.10378 3.03797C2.88989 3.35185 2.71349 3.69214 2.57461 4.0588C2.55239 4.11436 2.54128 4.1699 2.54128 4.22547C2.54128 4.28102 2.56349 4.33102 2.60794 4.37547L3.73294 5.50047C3.77739 5.5449 3.82739 5.56714 3.88294 5.56714C3.93849 5.56714 3.99406 5.55602 4.04961 5.5338C4.41628 5.40047 4.75656 5.22547 5.07044 5.0088C5.38433 4.79214 5.68016 4.54491 5.95794 4.26714C6.39128 3.83381 6.73573 3.34631 6.99128 2.80464C7.24683 2.26297 7.35239 1.68935 7.30794 1.0838C7.30239 1.05046 7.29266 1.01852 7.27878 0.987963C7.26489 0.957408 7.24406 0.928242 7.21628 0.900463C7.18849 0.872687 7.15933 0.851853 7.12878 0.837963C7.09823 0.824075 7.06349 0.814353 7.02461 0.808797ZM4.88294 3.22547C4.77183 3.11435 4.71628 2.97685 4.71628 2.81297C4.71628 2.64907 4.77183 2.51157 4.88294 2.40047C4.99406 2.28935 5.13156 2.2338 5.29544 2.2338C5.45933 2.2338 5.59683 2.28935 5.70794 2.40047C5.81906 2.51157 5.87461 2.64907 5.87461 2.81297C5.87461 2.97685 5.81906 3.11435 5.70794 3.22547C5.59683 3.33657 5.45933 3.39214 5.29544 3.39214C5.13156 3.39214 4.99406 3.33657 4.88294 3.22547ZM3.99128 5.91714L4.44128 6.95881C4.47461 7.04214 4.53573 7.09074 4.62461 7.10464C4.71349 7.11852 4.78849 7.0949 4.84961 7.0338L5.98294 5.90047C6.06073 5.82269 6.11628 5.72964 6.14961 5.6213C6.18294 5.51297 6.18849 5.40324 6.16628 5.29214L6.04961 4.65047C5.74406 4.92269 5.42044 5.16574 5.07878 5.37964C4.73711 5.59352 4.37461 5.77269 3.99128 5.91714ZM1.34961 5.35047C1.54405 5.15602 1.78016 5.0574 2.05794 5.05464C2.33573 5.05186 2.57183 5.14769 2.76628 5.34214C2.96073 5.53657 3.05794 5.77269 3.05794 6.05047C3.05794 6.32824 2.96073 6.56435 2.76628 6.7588C2.49961 7.02547 2.18433 7.1838 1.82044 7.23381C1.45655 7.28381 1.09128 7.3338 0.724609 7.3838C0.774609 7.01714 0.825998 6.65185 0.878776 6.28797C0.931553 5.92407 1.0885 5.61157 1.34961 5.35047Z"
fill="#82EEFF"
style={{
fill: "#82EEFF",
fillOpacity: 1,
}}
/>
</svg>
<p>Deployment</p>
</div>
<p>{services.status.deployment}</p>
</div>
<p>{services.status.deployment}</p>
</div>
<div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="10"
height="10"
viewBox="0 0 10 10"
fill="none"
>
<path
d="M1.40625 3.00358C1.40625 2.68587 1.53246 2.38118 1.75711 2.15653C1.98176 1.93187 2.28646 1.80566 2.60417 1.80566H7.39583C7.71354 1.80566 8.01824 1.93187 8.24289 2.15653C8.46754 2.38118 8.59375 2.68587 8.59375 3.00358V3.80219C8.59375 4.1199 8.46754 4.42459 8.24289 4.64925C8.01824 4.8739 7.71354 5.00011 7.39583 5.00011H2.60417C2.28646 5.00011 1.98176 4.8739 1.75711 4.64925C1.53246 4.42459 1.40625 4.1199 1.40625 3.80219V3.00358Z"
stroke="#617EE9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M1.40625 6.19792C1.40625 5.88021 1.53246 5.57551 1.75711 5.35086C1.98176 5.12621 2.28646 5 2.60417 5H7.39583C7.71354 5 8.01824 5.12621 8.24289 5.35086C8.46754 5.57551 8.59375 5.88021 8.59375 6.19792V6.99653C8.59375 7.31423 8.46754 7.61893 8.24289 7.84358C8.01824 8.06824 7.71354 8.19444 7.39583 8.19444H2.60417C2.28646 8.19444 1.98176 8.06824 1.75711 7.84358C1.53246 7.61893 1.40625 7.31423 1.40625 6.99653V6.19792Z"
stroke="#617EE9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M3.00391 3.40234V3.40599"
stroke="#617EE9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M3.00391 6.59766V6.60131"
stroke="#617EE9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.60156 3.40234H6.9974"
stroke="#617EE9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.60156 6.59766H6.9974"
stroke="#617EE9"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<p>Replicas</p>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="10"
height="10"
viewBox="0 0 10 10"
fill="none"
>
<path
d="M1.40625 3.00358C1.40625 2.68587 1.53246 2.38118 1.75711 2.15653C1.98176 1.93187 2.28646 1.80566 2.60417 1.80566H7.39583C7.71354 1.80566 8.01824 1.93187 8.24289 2.15653C8.46754 2.38118 8.59375 2.68587 8.59375 3.00358V3.80219C8.59375 4.1199 8.46754 4.42459 8.24289 4.64925C8.01824 4.8739 7.71354 5.00011 7.39583 5.00011H2.60417C2.28646 5.00011 1.98176 4.8739 1.75711 4.64925C1.53246 4.42459 1.40625 4.1199 1.40625 3.80219V3.00358Z"
stroke="#617EE9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M1.40625 6.19792C1.40625 5.88021 1.53246 5.57551 1.75711 5.35086C1.98176 5.12621 2.28646 5 2.60417 5H7.39583C7.71354 5 8.01824 5.12621 8.24289 5.35086C8.46754 5.57551 8.59375 5.88021 8.59375 6.19792V6.99653C8.59375 7.31423 8.46754 7.61893 8.24289 7.84358C8.01824 8.06824 7.71354 8.19444 7.39583 8.19444H2.60417C2.28646 8.19444 1.98176 8.06824 1.75711 7.84358C1.53246 7.61893 1.40625 7.31423 1.40625 6.99653V6.19792Z"
stroke="#617EE9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M3.00391 3.40234V3.40599"
stroke="#617EE9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M3.00391 6.59766V6.60131"
stroke="#617EE9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.60156 3.40234H6.9974"
stroke="#617EE9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.60156 6.59766H6.9974"
stroke="#617EE9"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<p>Replicas</p>
</div>
<p>{services.status.replicas}</p>
</div>
<p>{services.status.replicas}</p>
</div>
</div>
</td>
<td className={styles.imageText}>
<div>
<CopyIcon />
<p>Copy</p>
</div>
<p> {services.image}</p>
</td>
<td>{services.ingress}</td>
<td>{services.ports}</td>
<td>
<div className={styles.actions}>
</td>
<td className={styles.imageText}>
<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>
<CopyIcon />
<p>Copy</p>
</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>
<p> {services.image}</p>
</td>
<td>{services.ingress}</td>
<td>{services.ports}</td>
<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>
</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>
</div>
</div>
</td>
</tr>
);
})}
</td>
</tr>
);
})}
</tbody>
</table>
</div>

170
frontend/src/app/projects/view/service-card/Card.jsx Normal file
View File

@@ -0,0 +1,170 @@
import DeleteIcon from "@/app/components/icons/delete";
import React from "react";
import styles from "./styles.module.css";
const Card = (props) => {
return (
<div className={styles.cardContainer} {...props}>
<div className={styles.cardDetails}>
<div className={styles.list}>
<p>Name</p>
<p>{props?.data?.name}</p>
</div>
<div className={styles.list}>
<p>Version</p>
<p>{props?.data?.version}</p>
</div>
<div className={styles.list}>
<p>Health</p>
<div className={styles.servicesHealth}>
<div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="8"
height="8"
viewBox="0 0 8 8"
fill="none"
>
<path
d="M2.32605 1.02451C2.62107 0.974241 2.92361 0.990823 3.21137 1.07303C3.49913 1.15524 3.76477 1.30098 3.98872 1.49951L4.00105 1.51051L4.01238 1.50051C4.22612 1.31294 4.47739 1.17311 4.74944 1.09034C5.02149 1.00756 5.30807 0.983759 5.59005 1.02051L5.67205 1.03251C6.02748 1.09388 6.35971 1.25023 6.63354 1.485C6.90737 1.71977 7.11261 2.02422 7.22753 2.36612C7.34245 2.70802 7.36278 3.07463 7.28635 3.42713C7.20992 3.77963 7.03959 4.10491 6.79338 4.36851L6.73338 4.43017L6.71738 4.44384L4.23405 6.90351C4.17674 6.96023 4.10082 6.99425 4.02034 6.99928C3.93987 7.0043 3.8603 6.97999 3.79638 6.93084L3.76505 6.90351L1.26738 4.42951C1.00279 4.17206 0.814617 3.8464 0.723703 3.4886C0.63279 3.13079 0.642684 2.75481 0.75229 2.40228C0.861896 2.04975 1.06694 1.73444 1.3447 1.49127C1.62247 1.24809 1.96213 1.08654 2.32605 1.02451Z"
fill="#4A9D41"
style={{ fill: "#4A9D41", fillOpacity: 1 }}
/>
</svg>
<p>Overall</p>
</div>
<p>{props?.data?.health?.overall}</p>
</div>
<div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="8"
height="8"
viewBox="0 0 8 8"
fill="none"
>
<path
d="M4.42857 0V3.11111H7L3.57143 8V4.88889H1L4.42857 0Z"
fill="#CAB111"
style={{ fill: "#CAB111", fillOpacity: 1 }}
/>
</svg>
<p>Liveness</p>
</div>
<p>{props?.data?.health?.liveness}</p>
</div>
<div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="8"
height="8"
viewBox="0 0 8 8"
fill="none"
>
<path
d="M2 1.33343V6.66676C1.99998 6.72607 2.01579 6.78431 2.04579 6.83547C2.0758 6.88663 2.11891 6.92887 2.17067 6.95781C2.22244 6.98675 2.281 7.00135 2.34029 7.00011C2.39959 6.99888 2.45748 6.98184 2.508 6.95076L6.84133 4.28409C6.88987 4.25427 6.92995 4.21251 6.95775 4.16279C6.98555 4.11307 7.00015 4.05706 7.00015 4.00009C7.00015 3.94313 6.98555 3.88712 6.95775 3.8374C6.92995 3.78768 6.88987 3.74592 6.84133 3.71609L2.508 1.04943C2.45748 1.01835 2.39959 1.00131 2.34029 1.00007C2.281 0.998834 2.22244 1.01344 2.17067 1.04238C2.11891 1.07132 2.0758 1.11355 2.04579 1.16472C2.01579 1.21588 1.99998 1.27412 2 1.33343Z"
fill="#757696"
style={{ fill: "#757696", fillOpacity: 1 }}
/>
</svg>
<p>Readiness</p>
</div>
<p>{props?.data?.health?.readiness}</p>
</div>
</div>
</div>
<div className={styles.list}>
<p>Status</p>
<div className={styles.servicesStatus}>
<div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="8"
height="8"
viewBox="0 0 8 8"
fill="none"
>
<path
d="M2.19128 4.12547C2.33573 3.74214 2.51489 3.37964 2.72878 3.03797C2.94266 2.6963 3.18573 2.37269 3.45794 2.06714L2.81628 1.94214C2.70516 1.9199 2.59544 1.92547 2.48711 1.9588C2.37878 1.99214 2.28573 2.04769 2.20794 2.12547L1.07461 3.26714C1.0135 3.32824 0.991276 3.40185 1.00794 3.48797C1.02461 3.57407 1.07183 3.63381 1.14961 3.66714L2.19128 4.12547ZM7.02461 0.808797C6.41906 0.764353 5.84544 0.86852 5.30378 1.1213C4.76211 1.37407 4.27461 1.71714 3.84128 2.15047C3.56349 2.42824 3.31766 2.72407 3.10378 3.03797C2.88989 3.35185 2.71349 3.69214 2.57461 4.0588C2.55239 4.11436 2.54128 4.1699 2.54128 4.22547C2.54128 4.28102 2.56349 4.33102 2.60794 4.37547L3.73294 5.50047C3.77739 5.5449 3.82739 5.56714 3.88294 5.56714C3.93849 5.56714 3.99406 5.55602 4.04961 5.5338C4.41628 5.40047 4.75656 5.22547 5.07044 5.0088C5.38433 4.79214 5.68016 4.54491 5.95794 4.26714C6.39128 3.83381 6.73573 3.34631 6.99128 2.80464C7.24683 2.26297 7.35239 1.68935 7.30794 1.0838C7.30239 1.05046 7.29266 1.01852 7.27878 0.987963C7.26489 0.957408 7.24406 0.928242 7.21628 0.900463C7.18849 0.872687 7.15933 0.851853 7.12878 0.837963C7.09823 0.824075 7.06349 0.814353 7.02461 0.808797ZM4.88294 3.22547C4.77183 3.11435 4.71628 2.97685 4.71628 2.81297C4.71628 2.64907 4.77183 2.51157 4.88294 2.40047C4.99406 2.28935 5.13156 2.2338 5.29544 2.2338C5.45933 2.2338 5.59683 2.28935 5.70794 2.40047C5.81906 2.51157 5.87461 2.64907 5.87461 2.81297C5.87461 2.97685 5.81906 3.11435 5.70794 3.22547C5.59683 3.33657 5.45933 3.39214 5.29544 3.39214C5.13156 3.39214 4.99406 3.33657 4.88294 3.22547ZM3.99128 5.91714L4.44128 6.95881C4.47461 7.04214 4.53573 7.09074 4.62461 7.10464C4.71349 7.11852 4.78849 7.0949 4.84961 7.0338L5.98294 5.90047C6.06073 5.82269 6.11628 5.72964 6.14961 5.6213C6.18294 5.51297 6.18849 5.40324 6.16628 5.29214L6.04961 4.65047C5.74406 4.92269 5.42044 5.16574 5.07878 5.37964C4.73711 5.59352 4.37461 5.77269 3.99128 5.91714ZM1.34961 5.35047C1.54405 5.15602 1.78016 5.0574 2.05794 5.05464C2.33573 5.05186 2.57183 5.14769 2.76628 5.34214C2.96073 5.53657 3.05794 5.77269 3.05794 6.05047C3.05794 6.32824 2.96073 6.56435 2.76628 6.7588C2.49961 7.02547 2.18433 7.1838 1.82044 7.23381C1.45655 7.28381 1.09128 7.3338 0.724609 7.3838C0.774609 7.01714 0.825998 6.65185 0.878776 6.28797C0.931553 5.92407 1.0885 5.61157 1.34961 5.35047Z"
fill="#82EEFF"
style={{
fill: "#82EEFF",
fillOpacity: 1,
}}
/>
</svg>
<p>Deployment</p>
</div>
<p>{props?.data?.status?.deployment}</p>
</div>
<div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="10"
height="10"
viewBox="0 0 10 10"
fill="none"
>
<path
d="M1.40625 3.00358C1.40625 2.68587 1.53246 2.38118 1.75711 2.15653C1.98176 1.93187 2.28646 1.80566 2.60417 1.80566H7.39583C7.71354 1.80566 8.01824 1.93187 8.24289 2.15653C8.46754 2.38118 8.59375 2.68587 8.59375 3.00358V3.80219C8.59375 4.1199 8.46754 4.42459 8.24289 4.64925C8.01824 4.8739 7.71354 5.00011 7.39583 5.00011H2.60417C2.28646 5.00011 1.98176 4.8739 1.75711 4.64925C1.53246 4.42459 1.40625 4.1199 1.40625 3.80219V3.00358Z"
stroke="#617EE9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M1.40625 6.19792C1.40625 5.88021 1.53246 5.57551 1.75711 5.35086C1.98176 5.12621 2.28646 5 2.60417 5H7.39583C7.71354 5 8.01824 5.12621 8.24289 5.35086C8.46754 5.57551 8.59375 5.88021 8.59375 6.19792V6.99653C8.59375 7.31423 8.46754 7.61893 8.24289 7.84358C8.01824 8.06824 7.71354 8.19444 7.39583 8.19444H2.60417C2.28646 8.19444 1.98176 8.06824 1.75711 7.84358C1.53246 7.61893 1.40625 7.31423 1.40625 6.99653V6.19792Z"
stroke="#617EE9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M3.00391 3.40234V3.40599"
stroke="#617EE9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M3.00391 6.59766V6.60131"
stroke="#617EE9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.60156 3.40234H6.9974"
stroke="#617EE9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.60156 6.59766H6.9974"
stroke="#617EE9"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<p>Replicas</p>
</div>
<p>{props?.data?.status?.replicas}</p>
</div>
</div>
</div>
<div className={styles.list}>
<p>Image</p>
<p>{props?.data?.image}</p>
</div>
</div>
<div className={styles.cardAction}>
<DeleteIcon />
</div>
</div>
);
};
export default Card;

116
frontend/src/app/projects/view/service-card/styles.module.css Normal file
View File

@@ -0,0 +1,116 @@
.cardContainer {
display: flex;
padding: 16px 0;
align-items: flex-start;
gap: 16px;
align-self: stretch;
border-bottom: 1px solid #2c2d3d;
cursor: pointer;
}
.cardDetails {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
flex: 1 0 0;
}
.list {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
align-self: stretch;
}
.list > p {
color: #85869b;
font-family: Inter;
font-size: 0.8rem;
font-style: normal;
font-weight: 400;
line-height: normal;
overflow-wrap: anywhere;
}
.list > p:nth-child(2) {
color: #eeeffd;
font-family: Inter;
font-size: 1rem;
font-weight: 500;
}
.cardAction {
display: flex;
align-items: center;
gap: 17px;
}
.servicesHealth,
.servicesStatus {
display: flex;
align-items: start;
gap: 4px;
width: 100%;
align-self: stretch;
}
.servicesHealth > div,
.servicesStatus > div {
display: flex;
padding: 4px 6px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 5px;
border-radius: 6px;
border: 1px solid rgba(22, 159, 49, 0.25);
background: rgba(22, 159, 49, 0.05);
color: #179f31;
font-family: Inter;
font-size: 0.63rem;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.servicesHealth > div:nth-child(2) {
border: 1px solid rgba(207, 176, 0, 0.25);
background: rgba(207, 176, 0, 0.05);
color: #cfb000;
}
.servicesHealth > div:nth-child(2) > div {
color: #cfb000;
}
.servicesHealth > div:nth-child(3) {
border: 1px solid rgba(117, 118, 153, 0.25);
background: rgba(117, 118, 153, 0.05);
color: #757696;
}
.servicesHealth > div:nth-child(3) > div {
color: #757696;
}
.servicesHealth > div > div,
.servicesStatus > div > div {
display: flex;
align-items: center;
gap: 4px;
color: #179f31;
font-family: Inter;
font-size: 0.6rem;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.servicesStatus > div:nth-child(1) {
border-radius: 6px;
border: 1px solid rgba(80, 241, 255, 0.25);
background: rgba(80, 241, 255, 0.05);
color: #82eeff;
}
.servicesStatus > div:nth-child(1) > div {
color: #82eeff;
}
.servicesStatus > div:nth-child(2) {
border-radius: 6px;
border: 1px solid rgba(89, 127, 241, 0.25);
background: rgba(89, 127, 241, 0.05);
color: #617ee9;
}
.servicesStatus > div:nth-child(2) > div {
color: #617ee9;
}

36
frontend/src/app/projects/view/styles.module.css
View File

@@ -18,7 +18,8 @@
text-wrap: nowrap;
color: #85869b;
font-family: Inter;
font-size: 13px;
z-index: 3;
font-size: 0.8rem;
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -39,7 +40,8 @@
color: #eeeffd;
font-family: Inter;
overflow-wrap: anywhere;
font-size: 13px;
font-size: 0.8rem;
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -56,8 +58,11 @@
.servicesHealth,
.servicesStatus {
display: flex;
align-items: center;
align-items: start;
text-wrap: nowrap;
gap: 4px;
width: 100%;
flex-wrap: wrap;
align-self: stretch;
}
.servicesHealth > div,
@@ -73,7 +78,7 @@
background: rgba(22, 159, 49, 0.05);
color: #179f31;
font-family: Inter;
font-size: 12px;
font-size: 0.65rem;
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -101,7 +106,7 @@
gap: 4px;
color: #179f31;
font-family: Inter;
font-size: 10px;
font-size: 0.65rem;
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -128,6 +133,7 @@
display: flex;
align-items: center;
gap: 10px;
align-self: stretch;
}
.iconButton {
@@ -173,6 +179,7 @@
box-shadow: 0 0 10px 0 #000;
color: black;
opacity: 0;
text-wrap: nowrap;
}
.imageText > p {
height: 100%;
@@ -180,3 +187,22 @@
.imageText:hover > div {
opacity: 1;
}
.cardContainer {
display: none;
padding: 0 16px;
padding-bottom: 50px;
height: calc(100vh - 170px);
flex-direction: column;
align-items: flex-start;
gap: 12px;
align-self: stretch;
overflow: auto;
}
@media (max-width: 768px) {
.cardContainer {
display: flex;
}
.tableContainer {
display: none;
}
}

55
frontend/src/app/projects/view/variableModals/AddConfigMap/AddConfigMapModal.jsx
View File

@@ -4,7 +4,10 @@ import CloseIcon from "@/app/components/icons/close";
import TextField from "@/app/components/fields/textfield";
import AddIcon from "@/app/components/icons/add";
import PrimaryButton from "@/app/components/buttons/primarybutton/PrimaryButton";
import SelectField from "@/app/components/select/SelectField";
import RadioButton from "@/app/components/radio-button/RadioButton";
const AddConfigMapModal = (props) => {
const [typeOption, setTypeOption] = useState("raw");
return (
<div className={styles.container}>
<div className={styles.modal}>
@@ -33,21 +36,20 @@ const AddConfigMapModal = (props) => {
<div>
<p>Type</p>
<div>
{" "}
<div>
<label className={styles.radio}>
<input type="radio" name="typeOption" />
<span className={styles.custom}></span>
Raw
</label>
</div>
<div>
<label className={styles.radio}>
<input type="radio" name="typeOption" />
<span className={styles.custom}></span>
Credential
</label>
</div>
<RadioButton
name="typeOption"
value="raw"
checked={typeOption === "raw"}
onChange={(e) => setTypeOption(e.target.value)}
label="Raw"
/>
<RadioButton
name="typeOption"
value="credential"
checked={typeOption === "credential"}
onChange={(e) => setTypeOption(e.target.value)}
label="Credential"
/>
</div>
</div>
</div>
@@ -57,11 +59,22 @@ const AddConfigMapModal = (props) => {
<p>Value</p>
</div>
<textarea
name=""
id=""
placeholder="Enter a description"
></textarea>
{typeOption === "raw" ? (
<textarea
name=""
id=""
placeholder="Enter a description"
></textarea>
) : (
<SelectField
label="Select"
options={[
{ label: "Option", value: "option" },
{ label: "Option 1", value: "option 1" },
{ label: "Option 2", value: "option 2" },
]}
/>
)}
</div>
</div>
</div>
@@ -69,7 +82,7 @@ const AddConfigMapModal = (props) => {
</div>
</div>
<div className={styles.addButtonContainer}>
<PrimaryButton />
<PrimaryButton text=" Add " icon={<AddIcon />} />
</div>
</div>
</div>

49
frontend/src/app/projects/view/variableModals/AddConfigMap/styles.module.css
View File

@@ -7,13 +7,14 @@
z-index: 10;
display: flex;
align-items: center;
padding: 5px;
justify-content: center;
background-color: #00000037;
}
.modal {
display: flex;
width: 593px;
max-width: 593px;
width: 100%;
padding: 16px 16px 24px 16px;
flex-direction: column;
align-items: flex-start;
@@ -46,7 +47,7 @@
.header > p {
color: #d2d3e1;
font-size: 24px;
font-size: 1.5rem;
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -82,7 +83,7 @@
align-items: flex-start;
gap: 5px;
color: #d2d3e1;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -146,7 +147,7 @@
}
.verticalInput p {
color: #d2d3e1;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -167,35 +168,14 @@
border: 1px solid #4b4f6d;
resize: none;
color: #85869b;
font-size: 16px;
font-size: 1rem;
font-family: inter;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16px;
}
.verticalInput textarea {
display: flex;
height: 120px;
padding: 12px;
width: 100%;
flex-direction: column;
align-items: flex-start;
background-color: transparent;
gap: 10px;
align-self: stretch;
border-radius: 4px;
border: 1px solid #4b4f6d;
resize: none;
color: #85869b;
font-size: 16px;
font-family: inter;
font-style: normal;
font-weight: 400;
outline: none;
line-height: normal;
letter-spacing: 0.16px;
}
.verticalInput textarea:focus {
border-radius: 6px;
border: 1px solid #959aff;
@@ -204,7 +184,7 @@
.verticalInput textarea:focus::placeholder {
color: #4b4f6d;
font-family: Inter;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -227,7 +207,7 @@
display: flex;
align-items: flex-start;
color: #d2d3e1;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -286,3 +266,12 @@
gap: 16px;
align-self: stretch;
}
@media (max-width: 768px) {
.horizontalInput > div {
flex-direction: column;
gap: 10px;
}
.horizontalInput > div > div {
width: 100%;
}
}

12
frontend/src/app/projects/view/variableModals/AddVariableModal/AddVariableModal.jsx
View File

@@ -102,16 +102,24 @@ const AddVariableModal = (props) => {
<div className={styles.horizontalInput}>
<div>
<div>
<p>Protocol</p>
<p>Username</p>
<TextField placeHolder="MongoDB" />
</div>
<div>
<p>Service</p>
<p>Password</p>
<TextField placeHolder="Select a service" />
</div>
</div>
</div>
</div>
<div className={styles.verticalInput}>
<div>
<div>
<p>Custom Port (Optional)</p>
</div>
<TextField placeHolder="Leave empty to use service’s default port" />
</div>
</div>
</>
)}
</div>

33
frontend/src/app/projects/view/variableModals/AddVariableModal/styles.module.css
View File

@@ -4,6 +4,7 @@
position: absolute;
top: 0;
left: 0;
padding: 5px;
z-index: 10;
display: flex;
align-items: center;
@@ -12,8 +13,8 @@
}
.modal {
display: flex;
width: 593px;
height: 566px;
max-width: 593px;
width: 100%;
padding: 16px 16px 24px 16px;
flex-direction: column;
align-items: flex-start;
@@ -45,7 +46,7 @@
.header > p {
color: #d2d3e1;
font-size: 24px;
font-size: 1.5rem;
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -81,7 +82,7 @@
align-items: flex-start;
gap: 5px;
color: #d2d3e1;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -105,6 +106,9 @@
align-items: flex-start;
gap: 16px;
align-self: stretch;
max-height: 400px;
overflow-y: scroll;
padding: 0px 5px;
}
.horizontalInput {
display: flex;
@@ -145,7 +149,7 @@
}
.verticalInput p {
color: #d2d3e1;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -166,7 +170,7 @@
border: 1px solid #4b4f6d;
resize: none;
color: #85869b;
font-size: 16px;
font-size: 1rem;
font-family: inter;
font-style: normal;
font-weight: 400;
@@ -182,25 +186,21 @@
.verticalInput textarea:focus::placeholder {
color: #4b4f6d;
font-family: Inter;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.authenticationContainer {
display: flex;
padding: 12px 12px 32px 12px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 16px;
align-self: stretch;
border-radius: 6px;
background: #272b3a;
}
.authenticationContainer > p {
color: #85869b;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -213,3 +213,12 @@
gap: 16px;
align-self: stretch;
}
@media (max-width: 768px) {
.horizontalInput > div {
flex-direction: column;
gap: 10px;
}
.horizontalInput > div > div {
width: 100%;
}
}

2
frontend/src/app/projects/view/variableModals/AddVolumes/AddVolumeModal.jsx
View File

@@ -61,7 +61,7 @@ const AddVolumeModal = (props) => {
</div>
</div>
<div className={styles.addButtonContainer}>
<PrimaryButton />
<PrimaryButton text=" Add " icon={<AddIcon />} />
</div>
</div>
</div>

23
frontend/src/app/projects/view/variableModals/AddVolumes/styles.module.css
View File

@@ -12,8 +12,8 @@
}
.modal {
display: flex;
width: 593px;
max-width: 593px;
width: 100%;
padding: 16px 16px 24px 16px;
flex-direction: column;
align-items: flex-start;
@@ -45,7 +45,7 @@
.header > p {
color: #d2d3e1;
font-size: 24px;
font-size: 1.5rem;
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -81,7 +81,7 @@
align-items: flex-start;
gap: 5px;
color: #d2d3e1;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -145,7 +145,7 @@
}
.verticalInput p {
color: #d2d3e1;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -166,7 +166,7 @@
border: 1px solid #4b4f6d;
resize: none;
color: #85869b;
font-size: 16px;
font-size: 1rem;
font-family: inter;
font-style: normal;
font-weight: 400;
@@ -187,7 +187,7 @@
}
.authenticationContainer > p {
color: #85869b;
font-size: 16px;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -200,3 +200,12 @@
gap: 16px;
align-self: stretch;
}
@media (max-width: 768px) {
.horizontalInput > div {
flex-direction: column;
gap: 10px;
}
.horizontalInput > div > div {
width: 100%;
}
}

32
frontend/src/app/roles/[rolesId]/page.jsx
View File

@@ -1,9 +1,11 @@
import React from "react";
"use client";
import React, { useState } from "react";
import TopHeader from "@/app/components/topHeader/TopHeader";
import globalStyle from "../../globalStyle.module.css";
import editRoleStyle from "./styles.module.css";
import TextField from "@/app/components/fields/textfield";
import Permissions from "@/app/components/permissions/Permissions";
import Toggle from "@/app/components/mobileToggleTab/Toggle";
const ViewRolePage = () => {
const sampleData = [
@@ -22,6 +24,8 @@ const ViewRolePage = () => {
{ permission: "service.delete" },
{ permission: "service.update" },
];
const [activeTab, setActiveTab] = useState("details");
return (
<div className={globalStyle.section}>
<div className={globalStyle.mainContainer}>
@@ -32,23 +36,30 @@ const ViewRolePage = () => {
state="view"
requiredButtons={["back", "title", "edit", "download"]}
/>
<div className={editRoleStyle.addRoleContainer}>
<div className={editRoleStyle.editRoleContainer}>
{/* Mobile Toggle */}
<Toggle
activeTab={activeTab}
onChange={setActiveTab}
tabs={[
{ label: "Role Details", value: "details" },
{ label: "Permissions", value: "permissions" },
]}
/>
{/* Input fields Container */}
<div className={editRoleStyle.inputFieldContainer}>
{/* User Details */}
<div className={editRoleStyle.userDetails}>
{/* Header */}
<div
className={`${editRoleStyle.roleDetails} ${activeTab !== "details" ? editRoleStyle.hiddenMobile : ""}`}
>
<div className={editRoleStyle.header}>
<div>
<p>Role Details</p>
</div>
</div>
{/* Input fields */}
<form className={editRoleStyle.fields}>
{/* Email */}
<div className={editRoleStyle.inputMainContainer}>
<div className={editRoleStyle.inputContainer}>
{/* Label */}
<div className={editRoleStyle.label}>
<p>Name</p>
</div>
@@ -77,7 +88,12 @@ const ViewRolePage = () => {
</div>
{/* Permissions */}
<Permissions sampleData={sampleData} />
<div
className={`${editRoleStyle.userPermissions} ${activeTab !== "permissions" ? editRoleStyle.hiddenMobile : ""}`}
>
<div className={editRoleStyle.imanginaryDiv}></div>
<Permissions sampleData={sampleData} />
</div>
</div>
</div>
</div>

Some files were not shown because too many files have changed in this diff Show More