Merge branch 'DEVELOPMENT' of https://gitea.internship.project-moonshot.com/Laux/Frontend-Internal-Developer-Platform into DEVELOPMENT

frontend/src/app/agents/page.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import styles from "./styles.module.css";
+import TopHeader from "../components/topHeader/TopHeader";
+import globalStyle from "../globalStyle.module.css";
+const AgentsPage = () => {
+  return (
+    <div className={globalStyle.section}>
+      <div className={globalStyle.mainContainer}>
+        <div className={globalStyle.container}>
+          <TopHeader buttonText="Add Agents" topbarTitle="Agents" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AgentsPage;

frontend/src/app/components/sidebar/Sidebar.jsx

@@ -1,6 +1,35 @@
+"use client";
 import React from "react";
 import styles from "./styles.module.css";
+
+import { usePathname, useRouter } from "next/navigation";
+
 const Sidebar = () => {
+  const router = useRouter();
+  const navToHome = () => {
+    router.push("/home");
+  };
+  const navToOrganization = () => {
+    router.push("/organization");
+  };
+  const navToProject = () => {
+    router.push("/projects");
+  };
+  const navToUsers = () => {
+    router.push("/users");
+  };
+  const navToRoles = () => {
+    router.push("/roles");
+  };
+  const navToCredentials = () => {
+    router.push("/credentials");
+  };
+  const navToAgents = () => {
+    router.push("/agents");
+  };
+
+  const pathname = usePathname();
+  console.log(pathname);
   return (
     <div className={styles.mainContainer}>
       <div className={styles.topContainer}>
@@ -61,7 +90,10 @@ const Sidebar = () => {
         </div>
         {/* Navigations */}
         <div className={styles.navContainer}>
-          <div className={styles.active}>
+          <div
+            className={`${styles.nav} ${pathname === "/home" ? styles.active : ""}`}
+            onClick={navToHome}
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
@@ -93,7 +125,10 @@ const Sidebar = () => {
             </svg>
             <p>Home</p>
           </div>
-          <div>
+          <div
+            className={`${styles.nav} ${pathname === "/organization" ? styles.active : ""}`}
+            onClick={navToOrganization}
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
@@ -111,7 +146,10 @@ const Sidebar = () => {
             </svg>
             <p>Organization</p>
           </div>
-          <div>
+          <div
+            onClick={navToProject}
+            className={`${styles.nav} ${pathname === "/projects" ? styles.active : ""}`}
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
@@ -129,7 +167,10 @@ const Sidebar = () => {
             </svg>
             <p>Project</p>
           </div>
-          <div>
+          <div
+            onClick={navToUsers}
+            className={`${styles.nav} ${pathname === "/users" ? styles.active : ""}`}
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
@@ -147,7 +188,10 @@ const Sidebar = () => {
             </svg>
             <p>Users</p>
           </div>
-          <div>
+          <div
+            onClick={navToRoles}
+            className={`${styles.nav} ${pathname === "/roles" ? styles.active : ""}`}
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
@@ -194,7 +238,10 @@ const Sidebar = () => {
             </svg>
             <p>Roles</p>
           </div>
-          <div>
+          <div
+            onClick={navToCredentials}
+            className={`${styles.nav} ${pathname === "/credentials" ? styles.active : ""}`}
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
@@ -212,7 +259,10 @@ const Sidebar = () => {
             </svg>
             <p>Credentials</p>
           </div>
-          <div>
+          <div
+            onClick={navToAgents}
+            className={`${styles.nav} ${pathname === "/agents" ? styles.active : ""}`}
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"

frontend/src/app/components/sidebar/styles.module.css

@@ -8,6 +8,7 @@
   height: 100vh;
   align-self: stretch;
   border-right: 1px solid #2c2d3d;
+  user-select: none;
 }
 .topContainer {
   display: flex;
@@ -78,7 +79,7 @@
   align-items: flex-start;
   align-self: stretch;
 }
-.navContainer > div {
+.nav {
   display: flex;
   padding: 16px 24px;
   align-items: center;
@@ -89,22 +90,16 @@
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+  border-left: 2px solid #959aff00;
   align-self: stretch;
 }
-
-.navContainer > div:hover {
+.nav:hover {
   background: rgba(149, 154, 255, 0.05);
 }
-.navContainer > div path {
+.nav path {
   stroke: #858699;
 }
-.navContainer > div:hover path {
-  stroke: #d2d3e0;
-}
-.navContainer > div path {
-  stroke: #858699;
-}
-.navContainer > div:hover path {
+.nav:hover path {
   stroke: #d2d3e0;
 }
 .active {
@@ -117,7 +112,10 @@
   font-weight: 400;
   line-height: normal;
 }
-.active svg path {
+.active:hover path {
+  stroke: #969af9;
+}
+.active path {
   stroke: #969af9;
 }
 .navFooterContainer {

frontend/src/app/components/topHeader/TopHeader.jsx

@@ -0,0 +1,59 @@
+import React from "react";
+import styles from "./styles.module.css";
+const TopHeader = (props) => {
+  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>
+        <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>
+      </div>
+    </div>
+  );
+};
+
+export default TopHeader;

frontend/src/app/components/topHeader/styles.module.css

@@ -0,0 +1,48 @@
+.container {
+  display: flex;
+  padding: 24px;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  background: #21232f;
+}
+.title {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+}
+.title > p {
+  color: #d2d3e1;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.actionBar {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 10px;
+}
+.searchBarContainer {
+  display: flex;
+  padding: 6px;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 10px;
+}
+.button {
+  display: flex;
+  padding: 8px 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 6px;
+  border: 0.5px solid #8187ff;
+  background: rgba(83, 89, 242, 0.25);
+  cursor: pointer;
+}
+.button:hover {
+  background: linear-gradient(180deg, #5359f2 0%, #2e3288 100%);
+}

frontend/src/app/credentials/page.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import TopHeader from "../components/topHeader/TopHeader";
+import globalStyle from "../globalStyle.module.css";
+const CredentialsPage = () => {
+  return (
+    <div className={globalStyle.section}>
+      <div className={globalStyle.mainContainer}>
+        <div className={globalStyle.container}>
+          <TopHeader buttonText="Add Credentials" topbarTitle="Credentials" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CredentialsPage;

frontend/src/app/globalStyle.module.css

@@ -0,0 +1,27 @@
+.section {
+  width: 100%;
+}
+.mainContainer {
+  display: flex;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+  background: #191a24;
+  width: 100%;
+}
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+  background: #191a24;
+}
+.topHeader {
+  display: flex;
+  padding: 24px;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  background: #21232f;
+}

frontend/src/app/globals.css

@@ -22,6 +22,7 @@ body {
   font-family: inter, Arial, Helvetica, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  user-select: none;
 }
 
 * {

frontend/src/app/home/page.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const HomePage = () => {
+  return <div></div>;
+};
+
+export default HomePage;

frontend/src/app/layout.js

@@ -1,4 +1,4 @@
-import { Geist, Geist_Mono, Inter } from "next/font/google";
+import { Inter } from "next/font/google";
 import Sidebar from "./components/sidebar/Sidebar";
 import Header from "./components/header/Header";
 import "./globals.css";

frontend/src/app/organization/page.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import styles from "./styles.module.css";
+import TopHeader from "../components/topHeader/TopHeader";
+import globalStyle from "../globalStyle.module.css";
+
+const OrganizationPage = () => {
+  return (
+    <div className={globalStyle.section}>
+      <div className={globalStyle.mainContainer}>
+        <div className={globalStyle.container}>
+          <TopHeader buttonText="Add Organization" topbarTitle="Organization" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OrganizationPage;

frontend/src/app/projects/page.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import TopHeader from "../components/topHeader/TopHeader";
+import globalStyle from "../globalStyle.module.css";
+const ProjectsPage = () => {
+  return (
+    <div className={globalStyle.section}>
+      <div className={globalStyle.mainContainer}>
+        <div className={globalStyle.container}>
+          <TopHeader buttonText="Create Project" topbarTitle="Project" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProjectsPage;

frontend/src/app/roles/page.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import TopHeader from "../components/topHeader/TopHeader";
+import globalStyle from "../globalStyle.module.css";
+const RolesPage = () => {
+  return (
+    <div className={globalStyle.section}>
+      <div className={globalStyle.mainContainer}>
+        <div className={globalStyle.container}>
+          <TopHeader buttonText="Add Role" topbarTitle="Roles" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RolesPage;

frontend/src/app/users/page.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import TopHeader from "../components/topHeader/TopHeader";
+import globalStyle from "../globalStyle.module.css";
+const UsersPage = () => {
+  return (
+    <div className={globalStyle.section}>
+      <div className={globalStyle.mainContainer}>
+        <div className={globalStyle.container}>
+          <TopHeader buttonText="Add User" topbarTitle="Users" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UsersPage;