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

Added add ogranization page and project page

Browse Source
This commit is contained in:
Laux Dev
2026-02-25 11:39:22 +08:00
parent 03bb2c22aa
commit 1c0532efa7
10 changed files with 450 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -91,7 +91,7 @@ const Sidebar = () => {
{/* Navigations */}
<div className={styles.navContainer}>
<div
className={`${styles.nav} ${pathname === "/home" ? styles.active : ""}`}
className={`${styles.nav} ${pathname.includes("/home") ? styles.active : ""}`}
onClick={navToHome}
>
<svg
@@ -126,7 +126,7 @@ const Sidebar = () => {
<p>Home</p>
</div>
<div
className={`${styles.nav} ${pathname === "/organization" ? styles.active : ""}`}
className={`${styles.nav} ${pathname.includes("/organization") ? styles.active : ""}`}
onClick={navToOrganization}
>
<svg
@@ -148,7 +148,7 @@ const Sidebar = () => {
</div>
<div
onClick={navToProject}
className={`${styles.nav} ${pathname === "/projects" ? styles.active : ""}`}
className={`${styles.nav} ${pathname.includes("/projects") ? styles.active : ""}`}
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -169,7 +169,7 @@ const Sidebar = () => {
</div>
<div
onClick={navToUsers}
className={`${styles.nav} ${pathname === "/users" ? styles.active : ""}`}
className={`${styles.nav} ${pathname.includes("/users") ? styles.active : ""}`}
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -190,7 +190,7 @@ const Sidebar = () => {
</div>
<div
onClick={navToRoles}
className={`${styles.nav} ${pathname === "/roles" ? styles.active : ""}`}
className={`${styles.nav} ${pathname.includes("/roles") ? styles.active : ""}`}
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -240,7 +240,7 @@ const Sidebar = () => {
</div>
<div
onClick={navToCredentials}
className={`${styles.nav} ${pathname === "/credentials" ? styles.active : ""}`}
className={`${styles.nav} ${pathname.includes("/credentials") ? styles.active : ""}`}
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -261,7 +261,7 @@ const Sidebar = () => {
</div>
<div
onClick={navToAgents}
className={`${styles.nav} ${pathname === "/agents" ? styles.active : ""}`}
className={`${styles.nav} ${pathname.includes("/agents") ? styles.active : ""}`}
>
<svg
xmlns="http://www.w3.org/2000/svg"

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

@@ -9,6 +9,8 @@
align-self: stretch;
border-right: 1px solid #2c2d3d;
user-select: none;
border-right: 1px solid #2c2d3d;
background: #191a24;
}
.topContainer {
display: flex;

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

@@ -1,34 +1,39 @@
"use client";
import React from "react";
import styles from "./styles.module.css";
import { usePathname } from "next/navigation";
import { usePathname, useRouter } from "next/navigation";
const TopHeader = (props) => {
const pathName = usePathname();
console.log(pathName);
const router = useRouter();
const handleNavigateToAdd = () => {
router.push(`${pathName}/add`);
};
return (
<div className={styles.container}>
<div className={styles.title}>
<p>{props.topbarTitle}</p>
</div>
<div className={styles.actionBar}>
<div className={styles.searchBarContainer}>
<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="#858699"
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
{!props.state && (
<div className={styles.searchBarContainer}>
<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="#858699"
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
)}
{pathName === "/credentials" ? (
<div className={styles.mngEnvKeyButton}>
<svg
@@ -72,33 +77,62 @@ const TopHeader = (props) => {
) : (
""
)}
<div className={styles.button}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
>
<path
d="M10 4.41016V15.5907"
stroke="currentColor"
strokeOpacity={1}
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.41016 10H15.5907"
stroke="currentColor"
strokeOpacity={1}
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<p>{props.buttonText}</p>
</div>
{!props.state && (
<div className={styles.button} onClick={handleNavigateToAdd}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
>
<path
d="M10 4.41016V15.5907"
stroke="currentColor"
strokeOpacity={1}
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.41016 10H15.5907"
stroke="currentColor"
strokeOpacity={1}
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<p>{props.buttonText}</p>
</div>
)}
{props.state === "add" ? (
<>
<div className={styles.button}>
<svg
xmlns="http://www.w3.org/2000/svg"
width={20}
height={20}
viewBox="0 0 20 20"
fill="none"
>
<path
d="M4.53125 10L8.4375 13.9062L16.25 6.09375"
stroke="white"
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<p>{props.buttonText}</p>
</div>
<div className={styles.cancelButton} onClick={() => router.back()}>
<p>{props.cancelButtonText}</p>
</div>
</>
) : (
""
)}
</div>
</div>
);

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

@@ -55,6 +55,7 @@
border-radius: 6px;
border-radius: 6px;
border: 1px solid #5358f200;
cursor: pointer;
}
.mngEnvKeyButton > p {
color: #8187ff;
@@ -75,3 +76,19 @@
.mngEnvKeyButton:hover path {
stroke: white;
}
.cancelButton {
display: flex;
height: 36px;
padding: 9px 12px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 6px;
border: 0.5px solid #4e537e;
cursor: pointer;
}
.cancelButton:hover {
border-radius: 6px;
border: 1px solid #8e98e7;
background: linear-gradient(180deg, #8e98e6 0%, #4d537e 100%);
}