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

Fixed

Browse Source
This commit is contained in:
Laux Dev
2026-03-16 10:19:36 +08:00
parent 30534eb169
commit e1ec8a90c1
17 changed files with 260 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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}>
<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;
}

96
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,50 +112,59 @@ const AgentsPage = () => {
topbarTitle="Agents"
requiredButtons={["title", "add", "search"]}
/>
<div className={styles.tableContainer}>
<table className={styles.table}>
<thead>
<tr>
<th width="25%">Name</th>
<th>Endpoint</th>
<th>Type</th>
<th>Proxy Name</th>
<th>Date Created</th>
{isMobile ? (
<div className={styles.cardContainer}>
<MobileSearchBar />
{sampleData.map((data, key) => {
return <Card data={data} key={key} />;
})}
</div>
) : (
<div className={styles.tableContainer}>
<table className={styles.table}>
<thead>
<tr>
<th width="25%">Name</th>
<th>Endpoint</th>
<th>Type</th>
<th>Proxy Name</th>
<th>Date Created</th>
<th width="10%"></th>
</tr>
</thead>
<th width="10%"></th>
</tr>
</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 />} />
<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 />} />
</div>
<div>
<ActionButton icon={<DeleteIcon />} />
</div>
</div>
<div>
<ActionButton icon={<DeleteIcon />} />
</div>
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
)}
</div>
</div>
</div>

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

@@ -77,3 +77,42 @@
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;
overflow: auto;
}
.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;
background-color: transparent;
color: white;
font-family: Inter;
font-size: 16px;
outline: none;
font-style: normal;
font-weight: 400;
line-height: normal;
caret-color: #575bc7;
}
.searchIcon {
position: absolute;
}

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

@@ -0,0 +1,13 @@
import React from "react";
import styles from "./styles.module.css";
import SearchIcon from "../icons/search";
const MobileSearchBar = (props) => {
return (
<div className={styles.searchBarContainer}>
<input type="text" className={styles.searchBar} />
<SearchIcon className={styles.searchIcon} />
</div>
);
};
export default MobileSearchBar;

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

@@ -0,0 +1,28 @@
.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;
background-color: transparent;
color: white;
font-family: Inter;
font-size: 16px;
outline: none;
font-style: normal;
font-weight: 400;
line-height: normal;
caret-color: #575bc7;
}
.searchIcon {
position: absolute;
}

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

@@ -59,13 +59,13 @@ const TopHeader = (props) => {
<div className={styles.actionBar}>
{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") && (

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

@@ -169,3 +169,9 @@
line-height: normal;
z-index: 13;
}
@media (max-width: 768px) {
.container {
background: #21232f00;
padding: 16px;
}
}

4
frontend/src/app/credentials/card/Card.jsx
View File

@@ -8,11 +8,11 @@ const Card = (props) => {
<div className={styles.cardDetails}>
<div className={styles.list}>
<p>Name</p>
<p>mongo tls ca crt</p>
<p>{props?.data?.name}</p>
</div>
<div className={styles.list}>
<p>Organization ID</p>
<p>67160a5ae69144ff19aafb86</p>
<p>{props?.data?.organizationId}</p>
</div>
</div>
<div className={styles.cardAction}>

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

@@ -8,6 +8,7 @@ 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 = [
@@ -72,11 +73,10 @@ const CredentialsPage = () => {
/>
{isMobile ? (
<div className={styles.cardContainer}>
<Card />
<Card />
<Card />
<Card />
<Card />
<MobileSearchBar />
{sampleData.map((data, key) => (
<Card data={data} key={key} />
))}
</div>
) : (
<div className={styles.tableContainer}>

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

@@ -55,7 +55,7 @@ a {
}
@media (max-width: 900px) {
:root {
--table-font-size: 11px;
--table-font-size: 12px;
}
}
@media (max-width: 500px) {

12
frontend/src/app/hooks/useIsMobile.jsx
View File

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

4
frontend/src/app/organization/card/Card.jsx
View File

@@ -8,11 +8,11 @@ const Card = (props) => {
<div className={styles.cardDetails}>
<div className={styles.list}>
<p>Organization Name</p>
<p>ProjectMoonShot Inc.</p>
<p>{props?.data?.organizationName}</p>
</div>
<div className={styles.list}>
<p>Date Created</p>
<p>2024-10-21 08:01:30.556 +0000 UTC</p>
<p>{props?.data?.dateCreated}</p>
</div>
</div>
<div className={styles.cardAction}>

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

@@ -8,6 +8,7 @@ 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();
@@ -69,13 +70,10 @@ const OrganizationPage = () => {
/>
{isMobile ? (
<div className={styles.cardContainer}>
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<MobileSearchBar />
{sampleData.map((data, key) => (
<Card data={data} key={key} />
))}
</div>
) : (
<div className={styles.tableContainer}>

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

@@ -10,6 +10,7 @@ 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();
@@ -182,10 +183,10 @@ const ProjectsPage = () => {
/>
{isMobile ? (
<div className={styles.cardContainer}>
<Card />
<Card />
<Card />
<Card />
<MobileSearchBar />
{sampleData.map((data, key) => (
<Card data={data} key={key} />
))}
</div>
) : (
<div className={styles.tableContainer}>

18
frontend/src/app/projects/project-card/Card.jsx
View File

@@ -2,38 +2,38 @@ import DeleteIcon from "@/app/components/icons/delete";
import React from "react";
import styles from "./styles.module.css";
const Card = () => {
const Card = (props) => {
return (
<div className={styles.cardContainer}>
<div className={styles.cardDetails}>
<div className={styles.list}>
<p>Name</p>
<p>DOKS One Cooperative Bank Backend Develop</p>
<p>{props?.data?.name}</p>
</div>
<div className={styles.list}>
<p>CPU Used/Limit</p>
<p>
<span className={styles.used}>13500</span> /{" "}
<span className={styles.limit}>20000</span>
<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}>13500</span> /{" "}
<span className={styles.limit}>20000</span>
<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}>10000</span> /{" "}
<span className={styles.limit}>1000000</span>
<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>2025-11-07 01:43:18.313 +0000 UTC</p>
<p>{props?.data?.dateCreated}</p>
</div>
</div>
<div className={styles.cardAction}>

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

@@ -177,6 +177,7 @@
box-shadow: 0 0 10px 0 #000;
color: black;
opacity: 0;
text-wrap: nowrap;
}
.imageText > p {
height: 100%;