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

Add table for agents and credentials

Browse Source
This commit is contained in:
Laux Dev
2026-02-25 14:29:13 +08:00
parent 1c0532efa7
commit cf54a4a2e8
8 changed files with 480 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,129 @@
import React from "react";
import TopHeader from "../components/topHeader/TopHeader";
import globalStyle from "../globalStyle.module.css";
import styles from "./styles.module.css";
const CredentialsPage = () => {
const sampleData = [
{
name: "mongo tls ca crt",
organizationID: "67160a5ae69144ff19aafb86",
},
{
name: "mongo tls ca crt",
organizationID: "67160a5ae69144ff19aafb86",
},
{
name: "mongo tls ca crt",
organizationID: "67160a5ae69144ff19aafb86",
},
{
name: "mongo tls ca crt",
organizationID: "67160a5ae69144ff19aafb86",
},
{
name: "mongo tls ca crt",
organizationID: "67160a5ae69144ff19aafb86",
},
{
name: "mongo tls ca crt",
organizationID: "67160a5ae69144ff19aafb86",
},
{
name: "mongo tls ca crt",
organizationID: "67160a5ae69144ff19aafb86",
},
{
name: "mongo tls ca crt",
organizationID: "67160a5ae69144ff19aafb86",
},
{
name: "mongo tls ca crt",
organizationID: "67160a5ae69144ff19aafb86",
},
{
name: "mongo tls ca crt",
organizationID: "67160a5ae69144ff19aafb86",
},
{
name: "mongo tls ca crt",
organizationID: "67160a5ae69144ff19aafb86",
},
{
name: "mongo tls ca crt",
organizationID: "67160a5ae69144ff19aafb86",
},
];
return (
<div className={globalStyle.section}>
<div className={globalStyle.mainContainer}>
<div className={globalStyle.container}>
<TopHeader buttonText="Add Credentials" topbarTitle="Credentials" />
<div className={styles.tableContainer}>
<table className={styles.table}>
<thead>
<tr>
<th width="45%">Name</th>
<th width="45%">Organization ID</th>
<th width="10%"></th>
</tr>
</thead>
<tbody>
{sampleData.map((org, index) => {
return (
<tr key={index}>
<td>{org.name}</td>
<td>{org.organizationID}</td>
<td className={styles.actions}>
<div>
<button className={styles.iconButton}>
<svg
xmlns="http://www.w3.org/2000/svg"
width={20}
height={20}
viewBox="0 0 20 20"
fill="none"
>
<path
d="M3.61133 6.00684H16.3891"
stroke="#969AF9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M8.40234 9.20117V13.9928"
stroke="#969AF9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M11.5977 9.20117V13.9928"
stroke="#969AF9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.41016 6.00684L5.20877 15.5902C5.20877 16.0138 5.37705 16.42 5.67658 16.7196C5.97612 17.0191 6.38238 17.1874 6.80599 17.1874H13.1949C13.6185 17.1874 14.0247 17.0191 14.3243 16.7196C14.6238 16.42 14.7921 16.0138 14.7921 15.5902L15.5907 6.00684"
stroke="#969AF9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M7.60352 6.00694V3.61111C7.60352 3.39931 7.68765 3.19618 7.83742 3.04641C7.98719 2.89664 8.19032 2.8125 8.40213 2.8125H11.5966C11.8084 2.8125 12.0115 2.89664 12.1613 3.04641C12.311 3.19618 12.3952 3.39931 12.3952 3.61111V6.00694"
stroke="#969AF9"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</button>
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
</div>
</div>

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

@@ -0,0 +1,69 @@
.tableContainer {
width: 100%;
}
.tableContainer > table,
.tableContainer > table > thead {
border-collapse: collapse;
border: none;
width: 100%;
}
.tableContainer {
height: calc(100vh - 170px);
overflow-y: auto;
}
.tableContainer > table > thead > tr > th,
.tableContainer > table > tbody > tr > td {
padding: 12px 24px;
gap: 17px;
text-align: start;
}
.tableContainer > table > thead > tr {
border-bottom: 1px solid #212235;
background: #1c1d2b;
}
.tableContainer > table > tbody > tr > td {
color: #eeeffd;
font-family: Inter;
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.tableContainer > table > tbody > tr {
border-bottom: 1px solid rgba(129, 135, 255, 0);
cursor: pointer;
}
.tableContainer > table > tbody > tr:hover {
border-bottom: 1px solid rgba(129, 135, 255, 0.25);
background: rgba(129, 135, 255, 0.05);
}
.tableContainer > table > thead > tr > th {
color: #85869b;
font-family: Inter;
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.iconButton {
display: flex;
padding: 6px;
flex-direction: column;
justify-content: center;
align-items: center;
flex-shrink: 0;
aspect-ratio: 1/1;
background-color: rgba(255, 255, 255, 0);
outline: none;
border: 1px solid #959aff00;
cursor: pointer;
border-radius: 50%;
}
.iconButton:hover {
border: 1px solid #959aff;
background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
}
.iconButton:hover path {
stroke: white;
}