From 881cc5b8bbbf9bd343a6c9fc7ff21e0f89e1ce01 Mon Sep 17 00:00:00 2001
From: Laux Dev <2201104208@student.buksu.edu.ph>
Date: Wed, 25 Feb 2026 16:32:40 +0800
Subject: [PATCH] Added add project page

---
 .../app/components/topToolTip/TopToolTip.jsx  |  43 +++++++
 .../components/topToolTip/styles.module.css   |  23 ++++
 frontend/src/app/organization/add/page.jsx    |  38 +-----
 .../app/organization/add/styles.module.css    |   2 +-
 frontend/src/app/projects/add/page.jsx        | 112 ++++++++++++++++++
 .../src/app/projects/add/styles.module.css    | 108 +++++++++++++++++
 frontend/src/app/projects/page.jsx            |   2 +-
 7 files changed, 291 insertions(+), 37 deletions(-)
 create mode 100644 frontend/src/app/components/topToolTip/TopToolTip.jsx
 create mode 100644 frontend/src/app/components/topToolTip/styles.module.css
 create mode 100644 frontend/src/app/projects/add/page.jsx
 create mode 100644 frontend/src/app/projects/add/styles.module.css

diff --git a/frontend/src/app/components/topToolTip/TopToolTip.jsx b/frontend/src/app/components/topToolTip/TopToolTip.jsx
new file mode 100644
index 0000000..b02d62d
--- /dev/null
+++ b/frontend/src/app/components/topToolTip/TopToolTip.jsx
@@ -0,0 +1,43 @@
+import React from "react";
+import styles from "./styles.module.css";
+
+const TopToolTip = () => {
+  return (
+    <div className={styles.upperToolTips}>
+      <div>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={20}
+          height={20}
+          viewBox="0 0 20 20"
+          fill="none"
+        >
+          <path
+            d="M2.5 10C2.5 10.9849 2.69399 11.9602 3.0709 12.8701C3.44781 13.7801 4.00026 14.6069 4.6967 15.3033C5.39314 15.9997 6.21993 16.5522 7.12987 16.9291C8.03982 17.306 9.01509 17.5 10 17.5C10.9849 17.5 11.9602 17.306 12.8701 16.9291C13.7801 16.5522 14.6069 15.9997 15.3033 15.3033C15.9997 14.6069 16.5522 13.7801 16.9291 12.8701C17.306 11.9602 17.5 10.9849 17.5 10C17.5 8.01088 16.7098 6.10322 15.3033 4.6967C13.8968 3.29018 11.9891 2.5 10 2.5C8.01088 2.5 6.10322 3.29018 4.6967 4.6967C3.29018 6.10322 2.5 8.01088 2.5 10Z"
+            stroke="#191A23"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M10 6.66699V10.0003"
+            stroke="#191A23"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M10 13.333H10.0083"
+            stroke="#191A23"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+        <p>Complete the input field before saving</p>
+      </div>
+    </div>
+  );
+};
+
+export default TopToolTip;
diff --git a/frontend/src/app/components/topToolTip/styles.module.css b/frontend/src/app/components/topToolTip/styles.module.css
new file mode 100644
index 0000000..49b6f07
--- /dev/null
+++ b/frontend/src/app/components/topToolTip/styles.module.css
@@ -0,0 +1,23 @@
+.upperToolTips {
+  display: flex;
+  padding: 10px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  background: #959aff;
+}
+.upperToolTips > div {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.upperToolTips > div > p {
+  color: #191a24;
+  text-align: center;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
diff --git a/frontend/src/app/organization/add/page.jsx b/frontend/src/app/organization/add/page.jsx
index 2a2a07f..353242d 100644
--- a/frontend/src/app/organization/add/page.jsx
+++ b/frontend/src/app/organization/add/page.jsx
@@ -3,6 +3,7 @@ import globalStyle from "../../globalStyle.module.css";
 import TopHeader from "@/app/components/topHeader/TopHeader";
 import styles from "./styles.module.css";
 import Image from "next/image";
+import TopToolTip from "@/app/components/topToolTip/TopToolTip";
 const AddCredentials = () => {
   return (
     <div className={globalStyle.section}>
@@ -15,41 +16,8 @@ const AddCredentials = () => {
             topbarTitle="Create New Organization"
           />
           <div className={styles.contentContainer}>
-            <div className={styles.upperToolTips}>
-              <div>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width={20}
-                  height={20}
-                  viewBox="0 0 20 20"
-                  fill="none"
-                >
-                  <path
-                    d="M2.5 10C2.5 10.9849 2.69399 11.9602 3.0709 12.8701C3.44781 13.7801 4.00026 14.6069 4.6967 15.3033C5.39314 15.9997 6.21993 16.5522 7.12987 16.9291C8.03982 17.306 9.01509 17.5 10 17.5C10.9849 17.5 11.9602 17.306 12.8701 16.9291C13.7801 16.5522 14.6069 15.9997 15.3033 15.3033C15.9997 14.6069 16.5522 13.7801 16.9291 12.8701C17.306 11.9602 17.5 10.9849 17.5 10C17.5 8.01088 16.7098 6.10322 15.3033 4.6967C13.8968 3.29018 11.9891 2.5 10 2.5C8.01088 2.5 6.10322 3.29018 4.6967 4.6967C3.29018 6.10322 2.5 8.01088 2.5 10Z"
-                    stroke="#191A23"
-                    strokeWidth={2}
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <path
-                    d="M10 6.66699V10.0003"
-                    stroke="#191A23"
-                    strokeWidth={2}
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <path
-                    d="M10 13.333H10.0083"
-                    stroke="#191A23"
-                    strokeWidth={2}
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-                <p>Complete the input field before saving</p>
-              </div>
-            </div>
-            <div className={styles.createProjectForm}>
+            <TopToolTip />
+            <div className={styles.createOrganizationFormContainer}>
               <div className={styles.organizationBadgeContainer}>
                 <div className={styles.organizationBadge}>
                   <div className={styles.organizationBadgeDetails}>
diff --git a/frontend/src/app/organization/add/styles.module.css b/frontend/src/app/organization/add/styles.module.css
index a5968ff..a4533b8 100644
--- a/frontend/src/app/organization/add/styles.module.css
+++ b/frontend/src/app/organization/add/styles.module.css
@@ -29,7 +29,7 @@
   font-weight: 400;
   line-height: normal;
 }
-.createProjectForm {
+.createOrganizationFormContainer {
   display: flex;
   padding: 24px;
   flex-direction: column;
diff --git a/frontend/src/app/projects/add/page.jsx b/frontend/src/app/projects/add/page.jsx
new file mode 100644
index 0000000..8d9a2e8
--- /dev/null
+++ b/frontend/src/app/projects/add/page.jsx
@@ -0,0 +1,112 @@
+import React from "react";
+import globalStyle from "../../globalStyle.module.css";
+import TopHeader from "@/app/components/topHeader/TopHeader";
+import styles from "./styles.module.css";
+import TopToolTip from "@/app/components/topToolTip/TopToolTip";
+const AddProject = () => {
+  return (
+    <div className={globalStyle.section}>
+      <div className={globalStyle.mainContainer}>
+        <div className={globalStyle.container}>
+          <TopHeader
+            buttonText="Save"
+            cancelButtonText="Cancel"
+            state="add"
+            topbarTitle="Create New Project"
+          />
+          <div className={styles.contentContainer}>
+            <TopToolTip />
+            <div className={styles.createProjectFormContainer}>
+              <div className={styles.inputGroup}>
+                <div className={styles.label}>
+                  <p>
+                    Project Name <span>*</span>
+                  </p>
+                </div>
+                <div className={styles.inputField}>
+                  <input type="text" placeholder="Enter project name" />
+                  <div className={styles.prompts}>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width={20}
+                      height={20}
+                      viewBox="0 0 20 20"
+                      fill="none"
+                    >
+                      <path
+                        d="M2.5 10C2.5 10.9849 2.69399 11.9602 3.0709 12.8701C3.44781 13.7801 4.00026 14.6069 4.6967 15.3033C5.39314 15.9997 6.21993 16.5522 7.12987 16.9291C8.03982 17.306 9.01509 17.5 10 17.5C10.9849 17.5 11.9602 17.306 12.8701 16.9291C13.7801 16.5522 14.6069 15.9997 15.3033 15.3033C15.9997 14.6069 16.5522 13.7801 16.9291 12.8701C17.306 11.9602 17.5 10.9849 17.5 10C17.5 8.01088 16.7098 6.10322 15.3033 4.6967C13.8968 3.29018 11.9891 2.5 10 2.5C8.01088 2.5 6.10322 3.29018 4.6967 4.6967C3.29018 6.10322 2.5 8.01088 2.5 10Z"
+                        stroke="#CCA04F"
+                        strokeWidth={1.5}
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                      <path
+                        d="M10 6.66699V10.0003"
+                        stroke="#CCA04F"
+                        strokeWidth={1.5}
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                      <path
+                        d="M10 13.333H10.0083"
+                        stroke="#CCA04F"
+                        strokeWidth={1.5}
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                    <p>The name is already in used. You can try another.</p>
+                  </div>
+                </div>
+              </div>
+              <div className={styles.inputGroup}>
+                <div className={styles.label}>
+                  <p>
+                    Project Version <span>*</span>
+                  </p>
+                </div>
+                <div className={styles.inputField}>
+                  <input type="text" placeholder="Version" />
+                </div>
+              </div>
+              <div className={styles.inputGroup}>
+                <div className={styles.label}>
+                  <p>
+                    Organization <span>*</span>
+                  </p>
+                </div>
+                <div className={styles.inputField}>
+                  <select name="" id="">
+                    <option value="">Select</option>
+                  </select>
+                </div>
+              </div>
+              <div className={styles.inputGroup}>
+                <div className={styles.label}>
+                  <p>
+                    Agent <span>*</span>
+                  </p>
+                </div>
+                <div className={styles.inputField}>
+                  <select name="" id="">
+                    <option value="">Select</option>
+                    <option value="">Select</option>
+                    <option value="">Select</option>
+                    <option value="">Select</option>
+                    <option value="">Select</option>
+                    <option value="">Select</option>
+                    <option value="">Select</option>
+                    <option value="">Select</option>
+                    <option value="">Select</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AddProject;
diff --git a/frontend/src/app/projects/add/styles.module.css b/frontend/src/app/projects/add/styles.module.css
new file mode 100644
index 0000000..ae0fc03
--- /dev/null
+++ b/frontend/src/app/projects/add/styles.module.css
@@ -0,0 +1,108 @@
+.contentContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 48px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.createProjectFormContainer {
+  display: flex;
+  padding: 24px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
+  border-radius: 8px;
+}
+.inputGroup {
+  display: flex;
+  width: 500px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+}
+.label {
+  display: flex;
+  align-items: flex-start;
+  gap: 2px;
+  align-self: stretch;
+}
+.label > p {
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.label > p span {
+  color: #cfb000;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+.inputField {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  align-self: stretch;
+}
+.inputField > input,
+.inputField > select {
+  display: flex;
+  height: 44px;
+  padding: 12px 16px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 6px;
+  border: 1px solid #616583;
+  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;
+}
+.inputField > input:focus {
+  border-radius: 6px;
+  border: 1px solid #959aff;
+  background: rgba(75, 79, 109, 0.25);
+}
+.inputField > input:hover {
+  background: rgba(75, 79, 109, 0.25);
+}
+.inputField > input::placeholder,
+.inputField > select {
+  color: #85869b;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.prompts {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+}
+.prompts > p {
+  color: #d49e3d;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -0.07px;
+}
diff --git a/frontend/src/app/projects/page.jsx b/frontend/src/app/projects/page.jsx
index 15d2e22..9efe766 100644
--- a/frontend/src/app/projects/page.jsx
+++ b/frontend/src/app/projects/page.jsx
@@ -169,7 +169,7 @@ const ProjectsPage = () => {
             <table className={styles.table}>
               <thead>
                 <tr>
-                  <th width="25%">Name</th>
+                  <th>Name</th>
                   <th>Version</th>
                   <th>CPU Used/Limit</th>
                   <th>Memory Used/Limit</th>