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 ActionButton from "../components/actionButton/ActionButton";
import DeleteIcon from "../components/icons/delete"; import DeleteIcon from "../components/icons/delete";
import ViewIcon from "../components/icons/view"; 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 AgentsPage = () => {
const router = useRouter(); const router = useRouter();
@@ -98,6 +102,7 @@ const AgentsPage = () => {
dateCreated: "2/11/2026", dateCreated: "2/11/2026",
}, },
]; ];
const isMobile = useIsMobile();
return ( return (
<div className={globalStyle.section}> <div className={globalStyle.section}>
<div className={globalStyle.mainContainer}> <div className={globalStyle.mainContainer}>
@@ -107,50 +112,59 @@ const AgentsPage = () => {
topbarTitle="Agents" topbarTitle="Agents"
requiredButtons={["title", "add", "search"]} requiredButtons={["title", "add", "search"]}
/> />
<div className={styles.tableContainer}> {isMobile ? (
<table className={styles.table}> <div className={styles.cardContainer}>
<thead> <MobileSearchBar />
<tr> {sampleData.map((data, key) => {
<th width="25%">Name</th> return <Card data={data} key={key} />;
<th>Endpoint</th> })}
<th>Type</th> </div>
<th>Proxy Name</th> ) : (
<th>Date Created</th> <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> <th width="10%"></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{sampleData.map((org, index) => { {sampleData.map((org, index) => {
return ( return (
<tr <tr
key={index} key={index}
onClick={() => router.push(`/agents/${org.name}`)} onClick={() => router.push(`/agents/${org.name}`)}
> >
<td>{org.name}</td> <td>{org.name}</td>
<td>{org.endPoint}</td> <td>{org.endPoint}</td>
<td> <td>
<div className={styles.type}>{org.type}</div> <div className={styles.type}>{org.type}</div>
</td> </td>
<td>{org.proxyName}</td> <td>{org.proxyName}</td>
<td>{org.dateCreated}</td> <td>{org.dateCreated}</td>
<td> <td>
<div className={styles.actions}> <div className={styles.actions}>
<div> <div>
<ActionButton icon={<ViewIcon />} /> <ActionButton icon={<ViewIcon />} />
</div>
<div>
<ActionButton icon={<DeleteIcon />} />
</div>
</div> </div>
<div> </td>
<ActionButton icon={<DeleteIcon />} /> </tr>
</div> );
</div> })}
</td> </tbody>
</tr> </table>
); </div>
})} )}
</tbody>
</table>
</div>
</div> </div>
</div> </div>
</div> </div>

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

@@ -77,3 +77,42 @@
gap: 12px; gap: 12px;
align-self: stretch; 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}> <div className={styles.actionBar}>
{props?.requiredButtons.includes("search") && ( {props?.requiredButtons.includes("search") && (
<div className={styles.searchBarContainer}> <div className={styles.searchBarContainer}>
<SearchBar /> {!isMobile && <SearchBar />}
</div> </div>
)} )}
{props?.requiredButtons.includes("env") && ( {props?.requiredButtons.includes("env") && (
<div className={styles.mngEnvKeyButton}> <div className={styles.mngEnvKeyButton}>
<EnviromentIcon /> <EnviromentIcon />
<p>Manage Env. Key</p> {!isMobile && <p>Manage Env. Key</p>}
</div> </div>
)} )}
{props?.requiredButtons.includes("add-services") && ( {props?.requiredButtons.includes("add-services") && (

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

@@ -169,3 +169,9 @@
line-height: normal; line-height: normal;
z-index: 13; 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.cardDetails}>
<div className={styles.list}> <div className={styles.list}>
<p>Name</p> <p>Name</p>
<p>mongo tls ca crt</p> <p>{props?.data?.name}</p>
</div> </div>
<div className={styles.list}> <div className={styles.list}>
<p>Organization ID</p> <p>Organization ID</p>
<p>67160a5ae69144ff19aafb86</p> <p>{props?.data?.organizationId}</p>
</div> </div>
</div> </div>
<div className={styles.cardAction}> <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 ActionButton from "../components/actionButton/ActionButton";
import useIsMobile from "../hooks/useIsMobile"; import useIsMobile from "../hooks/useIsMobile";
import Card from "./card/Card"; import Card from "./card/Card";
import MobileSearchBar from "../components/mobileSearchBar/MobileSearchBar";
const CredentialsPage = () => { const CredentialsPage = () => {
const isMobile = useIsMobile(); const isMobile = useIsMobile();
const sampleData = [ const sampleData = [
@@ -72,11 +73,10 @@ const CredentialsPage = () => {
/> />
{isMobile ? ( {isMobile ? (
<div className={styles.cardContainer}> <div className={styles.cardContainer}>
<Card /> <MobileSearchBar />
<Card /> {sampleData.map((data, key) => (
<Card /> <Card data={data} key={key} />
<Card /> ))}
<Card />
</div> </div>
) : ( ) : (
<div className={styles.tableContainer}> <div className={styles.tableContainer}>

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

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

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

@@ -1,14 +1,18 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
export default function useIsMobile(breakpoint = 768) { export default function useIsMobile(breakpoint = 768) {
const [isMobile, setIsMobile] = useState(window.innerWidth <= breakpoint); const [isMobile, setIsMobile] = useState(false);
useEffect(() => { useEffect(() => {
const handleResize = () => { const checkScreen = () => {
setIsMobile(window.innerWidth <= breakpoint); 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]); }, [breakpoint]);
return isMobile; 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.cardDetails}>
<div className={styles.list}> <div className={styles.list}>
<p>Organization Name</p> <p>Organization Name</p>
<p>ProjectMoonShot Inc.</p> <p>{props?.data?.organizationName}</p>
</div> </div>
<div className={styles.list}> <div className={styles.list}>
<p>Date Created</p> <p>Date Created</p>
<p>2024-10-21 08:01:30.556 +0000 UTC</p> <p>{props?.data?.dateCreated}</p>
</div> </div>
</div> </div>
<div className={styles.cardAction}> <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 ActionButton from "../components/actionButton/ActionButton";
import Card from "./card/Card"; import Card from "./card/Card";
import useIsMobile from "../hooks/useIsMobile"; import useIsMobile from "../hooks/useIsMobile";
import MobileSearchBar from "../components/mobileSearchBar/MobileSearchBar";
const OrganizationPage = () => { const OrganizationPage = () => {
const isMobile = useIsMobile(); const isMobile = useIsMobile();
@@ -69,13 +70,10 @@ const OrganizationPage = () => {
/> />
{isMobile ? ( {isMobile ? (
<div className={styles.cardContainer}> <div className={styles.cardContainer}>
<Card /> <MobileSearchBar />
<Card /> {sampleData.map((data, key) => (
<Card /> <Card data={data} key={key} />
<Card /> ))}
<Card />
<Card />
<Card />
</div> </div>
) : ( ) : (
<div className={styles.tableContainer}> <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 ActionButton from "../components/actionButton/ActionButton";
import useIsMobile from "../hooks/useIsMobile"; import useIsMobile from "../hooks/useIsMobile";
import Card from "./project-card/Card"; import Card from "./project-card/Card";
import MobileSearchBar from "../components/mobileSearchBar/MobileSearchBar";
const ProjectsPage = () => { const ProjectsPage = () => {
const router = useRouter(); const router = useRouter();
const isMobile = useIsMobile(); const isMobile = useIsMobile();
@@ -182,10 +183,10 @@ const ProjectsPage = () => {
/> />
{isMobile ? ( {isMobile ? (
<div className={styles.cardContainer}> <div className={styles.cardContainer}>
<Card /> <MobileSearchBar />
<Card /> {sampleData.map((data, key) => (
<Card /> <Card data={data} key={key} />
<Card /> ))}
</div> </div>
) : ( ) : (
<div className={styles.tableContainer}> <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 React from "react";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
const Card = () => { const Card = (props) => {
return ( return (
<div className={styles.cardContainer}> <div className={styles.cardContainer}>
<div className={styles.cardDetails}> <div className={styles.cardDetails}>
<div className={styles.list}> <div className={styles.list}>
<p>Name</p> <p>Name</p>
<p>DOKS One Cooperative Bank Backend Develop</p> <p>{props?.data?.name}</p>
</div> </div>
<div className={styles.list}> <div className={styles.list}>
<p>CPU Used/Limit</p> <p>CPU Used/Limit</p>
<p> <p>
<span className={styles.used}>13500</span> /{" "} <span className={styles.used}>{props?.data?.cpuUsed}</span> /{" "}
<span className={styles.limit}>20000</span> <span className={styles.limit}>{props?.data?.cpuLimit}</span>
</p> </p>
</div> </div>
<div className={styles.list}> <div className={styles.list}>
<p>Memory Used/Limit</p> <p>Memory Used/Limit</p>
<p> <p>
<span className={styles.used}>13500</span> /{" "} <span className={styles.used}>{props?.data?.memoryUsed}</span> /{" "}
<span className={styles.limit}>20000</span> <span className={styles.limit}>{props?.data?.memoryLimit}</span>
</p> </p>
</div> </div>
<div className={styles.list}> <div className={styles.list}>
<p>Storage Used/Limit</p> <p>Storage Used/Limit</p>
<p> <p>
<span className={styles.used}>10000</span> /{" "} <span className={styles.used}>{props?.data?.storageUsed}</span> /{" "}
<span className={styles.limit}>1000000</span> <span className={styles.limit}>{props?.data?.storageLimit}</span>
</p> </p>
</div> </div>
<div className={styles.list}> <div className={styles.list}>
<p>Date Created</p> <p>Date Created</p>
<p>2025-11-07 01:43:18.313 +0000 UTC</p> <p>{props?.data?.dateCreated}</p>
</div> </div>
</div> </div>
<div className={styles.cardAction}> <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; box-shadow: 0 0 10px 0 #000;
color: black; color: black;
opacity: 0; opacity: 0;
text-wrap: nowrap;
} }
.imageText > p { .imageText > p {
height: 100%; height: 100%;