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

Compare commits

base: Laux:f88ef87c2ddad51b1bec5143eed16473ac5c5f8c
Branches Tags
Laux:main Laux:DEVELOPMENT
...
compare: Laux:bd94bb46186120cb0dc9887bb0d44f6525b5b7ba
Branches Tags
Laux:DEVELOPMENT Laux:main

2 Commits
f88ef87c2d ... bd94bb4618

Author SHA1 Message Date
Laux Dev
bd94bb4618 Merge branch 'DEVELOPMENT' of https://gitea.internship.project-moonshot.com/Laux/Frontend-Internal-Developer-Platform into DEVELOPMENT 2026-02-26 11:59:20 +08:00
Laux Dev
7b99f73a7e Added projects features 2026-02-26 11:59:16 +08:00
11 changed files with 904 additions and 151 deletions
Expand all files Collapse all files

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

@@ -119,72 +119,74 @@ const AgentsPage = () => {
</td> </td>
<td>{org.proxyName}</td> <td>{org.proxyName}</td>
<td>{org.dateCreated}</td> <td>{org.dateCreated}</td>
<td className={styles.actions}> <td>
<div> <div className={styles.actions}>
<button className={styles.iconButton}> <div>
<svg <button className={styles.iconButton}>
xmlns="http://www.w3.org/2000/svg" <svg
width={20} xmlns="http://www.w3.org/2000/svg"
height={20} width={20}
viewBox="0 0 20 20" height={20}
fill="none" 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" <path
stroke="#969AF9" 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"
strokeLinecap="round" stroke="#969AF9"
strokeLinejoin="round" 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" <path
stroke="#969AF9" 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"
strokeLinecap="round" stroke="#969AF9"
strokeLinejoin="round" strokeLinecap="round"
/> strokeLinejoin="round"
</svg> />
</button> </svg>
</div> </button>
<div> </div>
<button className={styles.iconButton}> <div>
<svg <button className={styles.iconButton}>
xmlns="http://www.w3.org/2000/svg" <svg
width={20} xmlns="http://www.w3.org/2000/svg"
height={20} width={20}
viewBox="0 0 20 20" height={20}
fill="none" viewBox="0 0 20 20"
> fill="none"
<path >
d="M3.61133 6.00684H16.3891" <path
stroke="#969AF9" d="M3.61133 6.00684H16.3891"
strokeLinecap="round" stroke="#969AF9"
strokeLinejoin="round" strokeLinecap="round"
/> strokeLinejoin="round"
<path />
d="M8.40234 9.20117V13.9928" <path
stroke="#969AF9" d="M8.40234 9.20117V13.9928"
strokeLinecap="round" stroke="#969AF9"
strokeLinejoin="round" strokeLinecap="round"
/> strokeLinejoin="round"
<path />
d="M11.5977 9.20117V13.9928" <path
stroke="#969AF9" d="M11.5977 9.20117V13.9928"
strokeLinecap="round" stroke="#969AF9"
strokeLinejoin="round" 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" <path
stroke="#969AF9" 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"
strokeLinecap="round" stroke="#969AF9"
strokeLinejoin="round" 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" <path
stroke="#969AF9" 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"
strokeLinecap="round" stroke="#969AF9"
strokeLinejoin="round" strokeLinecap="round"
/> strokeLinejoin="round"
</svg> />
</button> </svg>
</button>
</div>
</div> </div>
</td> </td>
</tr> </tr>

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

@@ -10,8 +10,13 @@
.tableContainer { .tableContainer {
height: calc(100vh - 170px); height: calc(100vh - 170px);
overflow-y: auto; overflow-y: auto;
position: relative;
}
.tableContainer th {
background-color: #1c1d2b;
top: 0;
position: sticky;
} }
.tableContainer > table > thead > tr > th, .tableContainer > table > thead > tr > th,
.tableContainer > table > tbody > tr > td { .tableContainer > table > tbody > tr > td {
padding: 12px 24px; padding: 12px 24px;

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

@@ -1,9 +1,10 @@
"use client"; "use client";
import React from "react"; import React, { useState } from "react";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
import { usePathname, useRouter } from "next/navigation"; import { usePathname, useRouter } from "next/navigation";
const TopHeader = (props) => { const TopHeader = (props) => {
const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false);
const pathName = usePathname(); const pathName = usePathname();
const router = useRouter(); const router = useRouter();
const handleNavigateToAdd = () => { const handleNavigateToAdd = () => {
@@ -12,10 +13,46 @@ const TopHeader = (props) => {
return ( return (
<div className={styles.container}> <div className={styles.container}>
<div className={styles.title}> <div className={styles.title}>
{pathName.includes("/view") && (
<div onClick={() => router.back()}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M5 12H19"
stroke="#8287FF"
style={{ stroke: "#8287FF", strokeOpacity: 1 }}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5 12L11 18"
stroke="#8287FF"
style={{ stroke: "#8287FF", strokeOpacity: 1 }}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5 12L11 6"
stroke="#8287FF"
style={{ stroke: "#8287FF", strokeOpacity: 1 }}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
)}
<p>{props.topbarTitle}</p> <p>{props.topbarTitle}</p>
</div> </div>
<div className={styles.actionBar}> <div className={styles.actionBar}>
{!props.state && ( {(pathName === "/projects/view" || !props.state) && (
<div className={styles.searchBarContainer}> <div className={styles.searchBarContainer}>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -77,7 +114,7 @@ const TopHeader = (props) => {
) : ( ) : (
"" ""
)} )}
{!props.state && ( {(pathName === "/projects/view" || !props.state) && (
<div className={styles.button} onClick={handleNavigateToAdd}> <div className={styles.button} onClick={handleNavigateToAdd}>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -133,6 +170,146 @@ const TopHeader = (props) => {
) : ( ) : (
"" ""
)} )}
{/* Projects 3 dots menu */}
{pathName.includes("/projects/view") && (
<div
className={styles.menu}
onClick={() => setTriggerDropDownMenu(!triggerDropDownMenu)}
>
<div className={styles.dotMenu}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
>
<path
d="M9.20117 9.99978C9.20117 10.1047 9.22183 10.2085 9.26196 10.3054C9.3021 10.4023 9.36092 10.4903 9.43508 10.5645C9.50924 10.6386 9.59728 10.6975 9.69417 10.7376C9.79106 10.7777 9.89491 10.7984 9.99978 10.7984C10.1047 10.7984 10.2085 10.7777 10.3054 10.7376C10.4023 10.6975 10.4903 10.6386 10.5645 10.5645C10.6386 10.4903 10.6975 10.4023 10.7376 10.3054C10.7777 10.2085 10.7984 10.1047 10.7984 9.99978C10.7984 9.89491 10.7777 9.79106 10.7376 9.69417C10.6975 9.59728 10.6386 9.50924 10.5645 9.43508C10.4903 9.36092 10.4023 9.3021 10.3054 9.26196C10.2085 9.22183 10.1047 9.20117 9.99978 9.20117C9.89491 9.20117 9.79106 9.22183 9.69417 9.26196C9.59728 9.3021 9.50924 9.36092 9.43508 9.43508C9.36092 9.50924 9.3021 9.59728 9.26196 9.69417C9.22183 9.79106 9.20117 9.89491 9.20117 9.99978Z"
fill="#8287FF"
stroke="#8287FF"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9.20117 15.5906C9.20117 15.6955 9.22183 15.7993 9.26196 15.8962C9.3021 15.9931 9.36092 16.0811 9.43508 16.1553C9.50924 16.2295 9.59728 16.2883 9.69417 16.3284C9.79106 16.3686 9.89491 16.3892 9.99978 16.3892C10.1047 16.3892 10.2085 16.3686 10.3054 16.3284C10.4023 16.2883 10.4903 16.2295 10.5645 16.1553C10.6386 16.0811 10.6975 15.9931 10.7376 15.8962C10.7777 15.7993 10.7984 15.6955 10.7984 15.5906C10.7984 15.4857 10.7777 15.3819 10.7376 15.285C10.6975 15.1881 10.6386 15.1001 10.5645 15.0259C10.4903 14.9517 10.4023 14.8929 10.3054 14.8528C10.2085 14.8126 10.1047 14.792 9.99978 14.792C9.89491 14.792 9.79106 14.8126 9.69417 14.8528C9.59728 14.8929 9.50924 14.9517 9.43508 15.0259C9.36092 15.1001 9.3021 15.1881 9.26196 15.285C9.22183 15.3819 9.20117 15.4857 9.20117 15.5906Z"
fill="#8287FF"
stroke="#8287FF"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9.20117 4.40994C9.20117 4.51481 9.22183 4.61866 9.26196 4.71555C9.3021 4.81245 9.36092 4.90048 9.43508 4.97464C9.50924 5.0488 9.59728 5.10763 9.69417 5.14776C9.79106 5.18789 9.89491 5.20855 9.99978 5.20855C10.1047 5.20855 10.2085 5.18789 10.3054 5.14776C10.4023 5.10763 10.4903 5.0488 10.5645 4.97464C10.6386 4.90048 10.6975 4.81245 10.7376 4.71555C10.7777 4.61866 10.7984 4.51481 10.7984 4.40994C10.7984 4.30506 10.7777 4.20122 10.7376 4.10432C10.6975 4.00743 10.6386 3.91939 10.5645 3.84524C10.4903 3.77108 10.4023 3.71225 10.3054 3.67212C10.2085 3.63198 10.1047 3.61133 9.99978 3.61133C9.89491 3.61133 9.79106 3.63198 9.69417 3.67212C9.59728 3.71225 9.50924 3.77108 9.43508 3.84524C9.36092 3.91939 9.3021 4.00743 9.26196 4.10432C9.22183 4.20122 9.20117 4.30506 9.20117 4.40994Z"
fill="#8287FF"
stroke="#8287FF"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
{triggerDropDownMenu && (
<div className={styles.dropDown}>
<div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M7.20898 9.76388C7.20898 9.08602 7.47826 8.43593 7.95758 7.95661C8.4369 7.47729 9.087 7.20801 9.76486 7.20801H18.0698C18.7476 7.20801 19.3977 7.47729 19.8771 7.95661C20.3564 8.43593 20.6257 9.08602 20.6257 9.76388V18.0688C20.6257 18.7467 20.3564 19.3968 19.8771 19.8761C19.3977 20.3554 18.7476 20.6247 18.0698 20.6247H9.76486C9.087 20.6247 8.4369 20.3554 7.95758 19.8761C7.47826 19.3968 7.20898 18.7467 7.20898 18.0688V9.76388Z"
stroke="#D2D3E0"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.34483 16.5396C4.05062 16.3725 3.80591 16.1304 3.63557 15.838C3.46523 15.5456 3.37533 15.2134 3.375 14.875V5.29167C3.375 4.2375 4.2375 3.375 5.29167 3.375H14.875C15.5938 3.375 15.9848 3.74396 16.3125 4.33333"
stroke="#D2D3E0"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M11.041 13.917H16.791"
stroke="#D2D3E0"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M13.916 11.042V16.792"
stroke="#D2D3E0"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<p>Clone Project</p>
</div>
</div>
<div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M8.16667 3.375L10.0833 6.25M15.8333 3.375L13.9167 6.25M9.125 12.9583V11.0417M14.875 11.0417V12.9583M3.375 10.0833C3.375 9.06667 3.77887 8.09165 4.49776 7.37276C5.21665 6.65387 6.19167 6.25 7.20833 6.25H16.7917C17.8083 6.25 18.7834 6.65387 19.5022 7.37276C20.2211 8.09165 20.625 9.06667 20.625 10.0833V15.8333C20.625 16.85 20.2211 17.825 19.5022 18.5439C18.7834 19.2628 17.8083 19.6667 16.7917 19.6667H7.20833C6.19167 19.6667 5.21665 19.2628 4.49776 18.5439C3.77887 17.825 3.375 16.85 3.375 15.8333V10.0833Z"
stroke="#D2D3E0"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<p>Robots</p>
</div>
</div>
<div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M14.875 9.12482H14.8846M16.3652 4.18269L19.8171 7.63461C20.0732 7.89064 20.2763 8.1946 20.4149 8.52913C20.5535 8.86367 20.6248 9.22223 20.6248 9.58434C20.6248 9.94644 20.5535 10.305 20.4149 10.6395C20.2763 10.9741 20.0732 11.278 19.8171 11.5341L17.2843 14.0669C17.0282 14.323 16.7243 14.5261 16.3897 14.6647C16.0552 14.8033 15.6966 14.8746 15.3345 14.8746C14.9724 14.8746 14.6139 14.8033 14.2793 14.6647C13.9448 14.5261 13.6408 14.323 13.3848 14.0669L13.0963 13.7785L6.81158 20.0632C6.49315 20.3816 6.07278 20.5777 5.62421 20.6171L5.4565 20.6248H4.33333C4.09861 20.6248 3.87205 20.5386 3.69664 20.3826C3.52123 20.2267 3.40917 20.0117 3.38171 19.7786L3.375 19.6665V18.5433C3.37511 18.0933 3.53354 17.6577 3.82254 17.3128L3.93658 17.1882L4.33333 16.7915H6.25V14.8748H8.16667V12.9581L10.2213 10.9035L9.93287 10.615C9.67681 10.359 9.47368 10.055 9.3351 9.7205C9.19651 9.38596 9.12518 9.0274 9.12518 8.66529C9.12518 8.30319 9.19651 7.94463 9.3351 7.61009C9.47368 7.27556 9.67681 6.97159 9.93287 6.71557L12.4657 4.18269C12.7218 3.92662 13.0257 3.7235 13.3603 3.58491C13.6948 3.44633 14.0534 3.375 14.4155 3.375C14.7776 3.375 15.1361 3.44633 15.4707 3.58491C15.8052 3.7235 16.1092 3.92662 16.3652 4.18269Z"
stroke="#D2D3E0"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<p>Init Key</p>
</div>
</div>
<div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M6.25065 11.9997C5.74232 11.9997 5.25481 11.7977 4.89536 11.4383C4.53592 11.0789 4.33398 10.5913 4.33398 10.083C4.33398 9.57468 4.53592 9.08716 4.89536 8.72772C5.25481 8.36828 5.74232 8.16634 6.25065 8.16634M6.25065 11.9997C6.75898 11.9997 7.24649 11.7977 7.60594 11.4383C7.96538 11.0789 8.16732 10.5913 8.16732 10.083C8.16732 9.57468 7.96538 9.08716 7.60594 8.72772C7.24649 8.36828 6.75898 8.16634 6.25065 8.16634M6.25065 11.9997L6.25065 19.6663M6.25065 8.16634L6.25065 4.33301M13.1497 14.2987C12.9066 14.1167 12.6238 13.9951 12.3246 13.9439C12.0253 13.8926 11.7182 13.9132 11.4284 14.0039C11.1387 14.0946 10.8746 14.2528 10.658 14.4655C10.4414 14.6783 10.2784 14.9394 10.1825 15.2275C10.0865 15.5156 10.0604 15.8223 10.1063 16.1225C10.1521 16.4226 10.2686 16.7075 10.4462 16.9538C10.6237 17.2001 10.8573 17.4007 11.1275 17.5391C11.3978 17.6774 11.697 17.7496 12.0007 17.7497V19.6663M12.0007 4.33301V13.9163M17.7507 9.12467C17.2423 9.12467 16.7548 8.92274 16.3954 8.5633C16.0359 8.20385 15.834 7.71634 15.834 7.20801C15.834 6.69968 16.0359 6.21216 16.3954 5.85272C16.7548 5.49328 17.2423 5.29134 17.7507 5.29134M17.7507 9.12467C18.259 9.12467 18.7465 8.92274 19.1059 8.5633C19.4654 8.20385 19.6673 7.71634 19.6673 7.20801C19.6673 6.69968 19.4654 6.21216 19.1059 5.85272C18.7465 5.49328 18.259 5.29134 17.7507 5.29134M17.7507 9.12467V11.5205M17.7507 5.29134V4.33301M18.7099 20.6247C18.4582 20.6247 18.209 20.5751 17.9765 20.4788C17.7439 20.3825 17.5326 20.2413 17.3547 20.0633C17.1767 19.8853 17.0355 19.674 16.9392 19.4415C16.8429 19.2089 16.7933 18.9597 16.7933 18.708C16.7933 18.4563 16.8429 18.2071 16.9392 17.9745C17.0355 17.742 17.1767 17.5307 17.3547 17.3527C17.5326 17.1747 17.7439 17.0336 17.9765 16.9372C18.209 16.8409 18.4582 16.7913 18.7099 16.7913M18.7099 20.6247C18.9616 20.6247 19.2109 20.5751 19.4434 20.4788C19.676 20.3825 19.8873 20.2413 20.0652 20.0633C20.2432 19.8853 20.3844 19.674 20.4807 19.4415C20.577 19.2089 20.6266 18.9597 20.6266 18.708C20.6266 18.4563 20.577 18.2071 20.4807 17.9745C20.3844 17.742 20.2432 17.5307 20.0652 17.3527C19.8873 17.1747 19.676 17.0336 19.4434 16.9372C19.2109 16.8409 18.9616 16.7913 18.7099 16.7913M18.7099 20.6247V22.0622M18.7099 16.7913V15.3538M21.6147 17.0309L20.3698 17.7497M17.0511 19.6663L15.8052 20.3851M15.8052 17.0309L17.0511 17.7497M20.3698 19.6663L21.6156 20.3851"
stroke="#D2D3E0"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<p>Manage Env. Key</p>
</div>
</div>
</div>
)}
</div>
)}
</div> </div>
</div> </div>
); );

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

@@ -8,9 +8,18 @@
} }
.title { .title {
display: flex; display: flex;
flex-direction: column; align-items: center;
align-items: flex-start; gap: 24px;
gap: 8px; }
.title > div {
display: flex;
padding: 6px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 100px;
border: 0.5px solid #8187ff;
cursor: pointer;
} }
.title > p { .title > p {
color: #d2d3e1; color: #d2d3e1;
@@ -92,3 +101,85 @@
border: 1px solid #8e98e7; border: 1px solid #8e98e7;
background: linear-gradient(180deg, #8e98e6 0%, #4d537e 100%); background: linear-gradient(180deg, #8e98e6 0%, #4d537e 100%);
} }
.menu {
display: flex;
width: 36px;
height: 36px;
gap: 10px;
flex-direction: column;
align-items: flex-end;
aspect-ratio: 1/1;
position: relative;
}
.dotMenu {
display: flex;
padding: 8px;
align-items: center;
gap: 12px;
border-radius: 6px;
border: 1px solid #8187ff;
cursor: pointer;
}
.dotMenu:hover {
background: linear-gradient(180deg, #5359f2 0%, #2e3288 100%);
}
.dotMenu:hover path {
stroke: white;
}
.dropDown {
display: flex;
width: 200px;
padding: 8px;
flex-direction: column;
align-items: flex-start;
gap: 6px;
z-index: 2;
border-radius: 6px;
background: #2d3144;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
animation-name: dropDownAnimation;
animation-duration: 200ms;
}
@keyframes dropDownAnimation {
0% {
opacity: 0;
transform: translateY(-10%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.dropDown > div:hover {
border-radius: 4px;
background: #3c4159;
background: color(display-p3 0.2392 0.2549 0.3412);
color: white;
}
.dropDown > div:hover p {
color: white;
}
.dropDown > div:hover path {
stroke: white;
}
.dropDown > div {
display: flex;
padding: 6px;
align-items: center;
gap: 10px;
align-self: stretch;
border-radius: 4px;
}
.dropDown > div > div {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
color: #d2d3e1;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
}

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

@@ -10,8 +10,14 @@
.tableContainer { .tableContainer {
height: calc(100vh - 170px); height: calc(100vh - 170px);
overflow-y: auto; overflow-y: auto;
position: relative;
} }
.tableContainer th {
background: #1c1d2b;
top: 0;
position: sticky;
}
.tableContainer > table > thead > tr > th, .tableContainer > table > thead > tr > th,
.tableContainer > table > tbody > tr > td { .tableContainer > table > tbody > tr > td {
padding: 12px 24px; padding: 12px 24px;

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

@@ -50,14 +50,6 @@ const OrganizationPage = () => {
organizationName: "Project Moonshot Inc.", organizationName: "Project Moonshot Inc.",
dateCreated: "2024-10-21 08:01:30.556 +0000 UTC", dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
}, },
{
organizationName: "Project Moonshot Inc.",
dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
},
{
organizationName: "Project Moonshot Inc.",
dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
},
]; ];
return ( return (

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

@@ -10,8 +10,13 @@
.tableContainer { .tableContainer {
height: calc(100vh - 170px); height: calc(100vh - 170px);
overflow-y: auto; overflow-y: auto;
position: relative;
}
.tableContainer th {
background: #1c1d2b;
top: 0;
position: sticky;
} }
.tableContainer > table > thead > tr > th, .tableContainer > table > thead > tr > th,
.tableContainer > table > tbody > tr > td { .tableContainer > table > tbody > tr > td {
padding: 12px 24px; padding: 12px 24px;

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

@@ -1,8 +1,11 @@
"use client";
import React from "react"; import React from "react";
import TopHeader from "../components/topHeader/TopHeader"; import TopHeader from "../components/topHeader/TopHeader";
import globalStyle from "../globalStyle.module.css"; import globalStyle from "../globalStyle.module.css";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
import { useRouter } from "next/navigation";
const ProjectsPage = () => { const ProjectsPage = () => {
const router = useRouter();
const sampleData = [ const sampleData = [
{ {
name: "DOKS One Cooperative Bank Backend Develop", name: "DOKS One Cooperative Bank Backend Develop",
@@ -181,7 +184,10 @@ const ProjectsPage = () => {
<tbody> <tbody>
{sampleData.map((project, index) => { {sampleData.map((project, index) => {
return ( return (
<tr key={index}> <tr
key={index}
onClick={() => router.push("/projects/view")}
>
<td>{project.name}</td> <td>{project.name}</td>
<td style={{ textAlign: "center" }}>{project.version}</td> <td style={{ textAlign: "center" }}>{project.version}</td>
<td> <td>
@@ -207,72 +213,74 @@ const ProjectsPage = () => {
</span> </span>
</td> </td>
<td>{project.dateCreated}</td> <td>{project.dateCreated}</td>
<td className={styles.actions}> <td>
<div> <div className={styles.actions}>
<button className={styles.iconButton}> <div>
<svg <button className={styles.iconButton}>
xmlns="http://www.w3.org/2000/svg" <svg
width={20} xmlns="http://www.w3.org/2000/svg"
height={20} width={20}
viewBox="0 0 20 20" height={20}
fill="none" 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" <path
stroke="#969AF9" 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"
strokeLinecap="round" stroke="#969AF9"
strokeLinejoin="round" 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" <path
stroke="#969AF9" 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"
strokeLinecap="round" stroke="#969AF9"
strokeLinejoin="round" strokeLinecap="round"
/> strokeLinejoin="round"
</svg> />
</button> </svg>
</div> </button>
<div> </div>
<button className={styles.iconButton}> <div>
<svg <button className={styles.iconButton}>
xmlns="http://www.w3.org/2000/svg" <svg
width={20} xmlns="http://www.w3.org/2000/svg"
height={20} width={20}
viewBox="0 0 20 20" height={20}
fill="none" viewBox="0 0 20 20"
> fill="none"
<path >
d="M3.61133 6.00684H16.3891" <path
stroke="#969AF9" d="M3.61133 6.00684H16.3891"
strokeLinecap="round" stroke="#969AF9"
strokeLinejoin="round" strokeLinecap="round"
/> strokeLinejoin="round"
<path />
d="M8.40234 9.20117V13.9928" <path
stroke="#969AF9" d="M8.40234 9.20117V13.9928"
strokeLinecap="round" stroke="#969AF9"
strokeLinejoin="round" strokeLinecap="round"
/> strokeLinejoin="round"
<path />
d="M11.5977 9.20117V13.9928" <path
stroke="#969AF9" d="M11.5977 9.20117V13.9928"
strokeLinecap="round" stroke="#969AF9"
strokeLinejoin="round" 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" <path
stroke="#969AF9" 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"
strokeLinecap="round" stroke="#969AF9"
strokeLinejoin="round" 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" <path
stroke="#969AF9" 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"
strokeLinecap="round" stroke="#969AF9"
strokeLinejoin="round" strokeLinecap="round"
/> strokeLinejoin="round"
</svg> />
</button> </svg>
</button>
</div>
</div> </div>
</td> </td>
</tr> </tr>

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

@@ -10,6 +10,12 @@
.tableContainer { .tableContainer {
height: calc(100vh - 170px); height: calc(100vh - 170px);
overflow-y: auto; overflow-y: auto;
position: relative;
}
.tableContainer th {
background: #1c1d2b;
top: 0;
position: sticky;
} }
.tableContainer > table > thead > tr > th { .tableContainer > table > thead > tr > th {
@@ -53,9 +59,8 @@
} }
.actions { .actions {
display: flex; display: flex;
justify-content: start;
align-items: center; align-items: center;
gap: 12px; gap: 10px;
align-self: stretch; align-self: stretch;
} }
.iconButton { .iconButton {

309
frontend/src/app/projects/view/page.jsx Normal file
View File

@@ -0,0 +1,309 @@
import React from "react";
import globalStyle from "../../globalStyle.module.css";
import TopHeader from "@/app/components/topHeader/TopHeader";
import styles from "./styles.module.css";
const AddProject = () => {
const sampleData = [
{
name: "accounting-service",
version: "v1",
health: {
overall: "Healthy",
liveness: "Unreachable",
readiness: "Ready",
},
status: {
deployment: "Healthy",
replicas: "1/1",
},
image: "xuru.isaachybrid.com/698d24e36c2855a6f0d8cf9b/accounting-service",
ingress: "",
ports: "3000:3000, 50054:50054",
},
{
name: "accounting-service",
version: "v1",
health: {
overall: "Healthy",
liveness: "Unreachable",
readiness: "Ready",
},
status: {
deployment: "Healthy",
replicas: "1/1",
},
image: "xuru.isaachybrid.com/698d24e36c2855a6f0d8cf9b/accounting-service",
ingress: "",
ports: "3000:3000, 50054:50054",
},
{
name: "accounting-service",
version: "v1",
health: {
overall: "Healthy",
liveness: "Unreachable",
readiness: "Ready",
},
status: {
deployment: "Healthy",
replicas: "1/1",
},
image: "xuru.isaachybrid.com/698d24e36c2855a6f0d8cf9b/accounting-service",
ingress: "",
ports: "3000:3000, 50054:50054",
},
];
return (
<div className={globalStyle.section}>
<div className={globalStyle.mainContainer}>
<div className={globalStyle.container}>
<TopHeader
buttonText="Add Services"
cancelButtonText="Cancel"
state="view"
topbarTitle="Services"
/>
<div className={styles.tableContainer}>
<table className={styles.table}>
<thead>
<tr>
<th>Name</th>
<th>Version</th>
<th>Health</th>
<th>Status</th>
<th width="15%">Image</th>
<th>Ingress</th>
<th>Port</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{sampleData.map((services, index) => {
return (
<tr key={index}>
<td>{services.name}</td>
<td style={{ textAlign: "center" }}>
{services.version}
</td>
<td>
<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>{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>
<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>
<p>{services.health.readiness}</p>
</div>
</div>
</td>
<td>
<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>{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>
<p>{services.status.replicas}</p>
</div>
</div>
</td>
<td>{services.image}</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>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
</div>
</div>
);
};
export default AddProject;

153
frontend/src/app/projects/view/styles.module.css Normal file
View File

@@ -0,0 +1,153 @@
.tableContainer {
height: calc(100vh - 170px);
overflow-y: auto;
position: relative;
width: 100%;
}
.tableContainer table,
.tableContainer table thead {
border-collapse: collapse;
border: none;
width: calc(100% -250px);
}
.tableContainer th {
background: #1c1d2b;
top: 0;
position: sticky;
text-wrap: nowrap;
color: #85869b;
font-family: Inter;
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.tableContainer th,
.tableContainer td {
padding: 12px 0px;
padding-left: 24px;
text-align: start;
align-self: stretch;
}
.tableContainer thead tr {
border-bottom: 1px solid #212235;
background: #1c1d2b;
}
.tableContainer tbody td {
color: #eeeffd;
font-family: Inter;
overflow-wrap: anywhere;
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.tableContainer tbody tr {
border-bottom: 1px solid rgba(129, 135, 255, 0);
cursor: pointer;
}
.tableContainer tbody tr:hover {
border-bottom: 1px solid rgba(129, 135, 255, 0.25);
background: rgba(129, 135, 255, 0.05);
}
.servicesHealth,
.servicesStatus {
display: flex;
align-items: center;
gap: 4px;
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: 12px;
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: 10px;
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;
}
.actions {
display: flex;
align-items: center;
gap: 10px;
align-self: stretch;
}
.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;
}