From 2e772b204486ed314555073e05e7eb4d108de968 Mon Sep 17 00:00:00 2001
From: Laux Dev <2201104208@student.buksu.edu.ph>
Date: Fri, 27 Feb 2026 16:07:07 +0800
Subject: [PATCH] convert to components

---
 .../app/components/fields/styles.module.css   | 37 +++++++++++++++
 .../src/app/components/fields/textfield.jsx   |  9 ++++
 frontend/src/app/components/icons/close.jsx   | 31 +++++++++++++
 .../toast/success/styles.module.css           | 35 +++++++++++++++
 .../components/toast/success/successToast.jsx | 45 +++++++++++++++++++
 .../app/components/topHeader/TopHeader.jsx    | 10 ++---
 frontend/src/app/globals.css                  |  4 +-
 frontend/src/app/organization/add/page.jsx    |  3 +-
 .../app/organization/add/styles.module.css    |  3 +-
 frontend/src/app/organization/page.jsx        |  2 +
 frontend/src/app/projects/page.jsx            |  2 +
 .../AddServicesModal/AddServicesModal.jsx     | 28 ++----------
 .../projects/view/add-from-scratch/page.jsx   | 36 +++++++--------
 .../AddConfigMap/AddConfigMapModal.jsx        |  1 +
 .../AddConfigMap/styles.module.css            |  0
 .../AddVariableModal/AddVariableModal.jsx     | 45 +++++++++++++++++++
 .../AddVariableModal/styles.module.css        |  0
 .../AddVolumes/AddVolumeModal.jsx             |  0
 .../AddVolumes/styles.module.css              |  0
 frontend/src/app/projects/view/page.jsx       |  1 +
 20 files changed, 236 insertions(+), 56 deletions(-)
 create mode 100644 frontend/src/app/components/fields/styles.module.css
 create mode 100644 frontend/src/app/components/fields/textfield.jsx
 create mode 100644 frontend/src/app/components/icons/close.jsx
 create mode 100644 frontend/src/app/components/toast/success/styles.module.css
 create mode 100644 frontend/src/app/components/toast/success/successToast.jsx
 create mode 100644 frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/AddConfigMapModal.jsx
 create mode 100644 frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/styles.module.css
 create mode 100644 frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/AddVariableModal.jsx
 create mode 100644 frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/styles.module.css
 create mode 100644 frontend/src/app/projects/view/add-from-scratch/variableModals/AddVolumes/AddVolumeModal.jsx
 create mode 100644 frontend/src/app/projects/view/add-from-scratch/variableModals/AddVolumes/styles.module.css

diff --git a/frontend/src/app/components/fields/styles.module.css b/frontend/src/app/components/fields/styles.module.css
new file mode 100644
index 0000000..d385586
--- /dev/null
+++ b/frontend/src/app/components/fields/styles.module.css
@@ -0,0 +1,37 @@
+.input {
+  display: flex;
+  padding: 12px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 10px;
+  width: 100%;
+  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;
+}
+.input:focus {
+  border-radius: 6px;
+  border: 1px solid #a8aac1;
+  background: rgba(75, 79, 109, 0.25);
+}
+.input:hover {
+  background: rgba(75, 79, 109, 0.25);
+}
+.input::placeholder {
+  color: #85869b;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
diff --git a/frontend/src/app/components/fields/textfield.jsx b/frontend/src/app/components/fields/textfield.jsx
new file mode 100644
index 0000000..f1e6275
--- /dev/null
+++ b/frontend/src/app/components/fields/textfield.jsx
@@ -0,0 +1,9 @@
+import React from "react";
+import styles from "./styles.module.css";
+const TextField = ({ placeHolder }) => {
+  return (
+    <input className={styles.input} type="text" placeholder={placeHolder} />
+  );
+};
+
+export default TextField;
diff --git a/frontend/src/app/components/icons/close.jsx b/frontend/src/app/components/icons/close.jsx
new file mode 100644
index 0000000..f8b28d4
--- /dev/null
+++ b/frontend/src/app/components/icons/close.jsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+const CloseIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="28"
+      height="28"
+      viewBox="0 0 28 28"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M20.7077 7.29199L7.29102 20.7087"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.29102 7.29199L20.7077 20.7087"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default CloseIcon;
diff --git a/frontend/src/app/components/toast/success/styles.module.css b/frontend/src/app/components/toast/success/styles.module.css
new file mode 100644
index 0000000..9456a16
--- /dev/null
+++ b/frontend/src/app/components/toast/success/styles.module.css
@@ -0,0 +1,35 @@
+.toastContainer {
+  display: flex;
+  padding: 14px 10px 14px 16px;
+  align-items: center;
+  gap: 16px;
+  border-radius: 10px;
+  border: 1px solid #a6facc;
+  background: #eefdf3;
+  position: absolute;
+  bottom: 25px;
+  z-index: 11;
+  right: 20px;
+}
+.messageContainer {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.iconContainer {
+  display: flex;
+  padding: 4px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 100px;
+  background: #a6facc;
+}
+.messageContainer p {
+  color: #006929;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
diff --git a/frontend/src/app/components/toast/success/successToast.jsx b/frontend/src/app/components/toast/success/successToast.jsx
new file mode 100644
index 0000000..3899184
--- /dev/null
+++ b/frontend/src/app/components/toast/success/successToast.jsx
@@ -0,0 +1,45 @@
+import React from "react";
+import styles from "./styles.module.css";
+const SuccessToast = ({ message }) => {
+  return (
+    <div className={styles.toastContainer}>
+      <div className={styles.messageContainer}>
+        <div className={styles.iconContainer}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+          >
+            <path
+              d="M7.5 10L9.16667 11.6667L12.5 8.33333M2.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 9.01509 17.306 8.03982 16.9291 7.12987C16.5522 6.21993 15.9997 5.39314 15.3033 4.6967C14.6069 4.00026 13.7801 3.44781 12.8701 3.0709C11.9602 2.69399 10.9849 2.5 10 2.5C9.01509 2.5 8.03982 2.69399 7.12987 3.0709C6.21993 3.44781 5.39314 4.00026 4.6967 4.6967C4.00026 5.39314 3.44781 6.21993 3.0709 7.12987C2.69399 8.03982 2.5 9.01509 2.5 10Z"
+              stroke="#016730"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </div>
+        <p>{message}</p>
+      </div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+      >
+        <path
+          d="M15 5L5 15M5 5L15 15"
+          stroke="#016730"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default SuccessToast;
diff --git a/frontend/src/app/components/topHeader/TopHeader.jsx b/frontend/src/app/components/topHeader/TopHeader.jsx
index d1235bd..af3d355 100644
--- a/frontend/src/app/components/topHeader/TopHeader.jsx
+++ b/frontend/src/app/components/topHeader/TopHeader.jsx
@@ -1,19 +1,22 @@
 "use client";
 import React, { useState } from "react";
 import styles from "./styles.module.css";
-import { usePathname, useRouter } from "next/navigation";
+import { usePathname, useRouter, useParams } from "next/navigation";
 
 const TopHeader = (props) => {
   const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false);
   const pathName = usePathname();
   const router = useRouter();
+  const params = useParams();
   const handleNavigateToAdd = () => {
     router.push(`${pathName}/add`);
   };
   return (
     <div className={styles.container}>
       <div className={styles.title}>
-        {pathName.includes("/view") && props.state === "view" && (
+        {((pathName.includes("/view") && props.state === "view") ||
+          params.usersId ||
+          params.roleId) && (
           <div onClick={() => router.back()}>
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -25,7 +28,6 @@ const TopHeader = (props) => {
               <path
                 d="M5 12H19"
                 stroke="#8287FF"
-                style={{ stroke: "#8287FF", strokeOpacity: 1 }}
                 strokeWidth="2"
                 strokeLinecap="round"
                 strokeLinejoin="round"
@@ -33,7 +35,6 @@ const TopHeader = (props) => {
               <path
                 d="M5 12L11 18"
                 stroke="#8287FF"
-                style={{ stroke: "#8287FF", strokeOpacity: 1 }}
                 strokeWidth="2"
                 strokeLinecap="round"
                 strokeLinejoin="round"
@@ -41,7 +42,6 @@ const TopHeader = (props) => {
               <path
                 d="M5 12L11 6"
                 stroke="#8287FF"
-                style={{ stroke: "#8287FF", strokeOpacity: 1 }}
                 strokeWidth="2"
                 strokeLinecap="round"
                 strokeLinejoin="round"
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index b2fdb45..dbc2dcb 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -42,8 +42,8 @@ a {
   }
 }
 ::-webkit-scrollbar {
-  width: 8px; /* vertical */
-  height: 8px; /* horizontal */
+  width: 8px;
+  height: 8px;
   background-color: transparent;
 }
 
diff --git a/frontend/src/app/organization/add/page.jsx b/frontend/src/app/organization/add/page.jsx
index 353242d..11fbadf 100644
--- a/frontend/src/app/organization/add/page.jsx
+++ b/frontend/src/app/organization/add/page.jsx
@@ -4,6 +4,7 @@ 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";
+import TextField from "@/app/components/fields/textfield";
 const AddCredentials = () => {
   return (
     <div className={globalStyle.section}>
@@ -70,7 +71,7 @@ const AddCredentials = () => {
                   </p>
                 </div>
                 <div className={styles.inputField}>
-                  <input type="text" placeholder="Enter organization name" />
+                  <TextField placeHolder="Enter organization name" />
                   <div className={styles.prompts}>
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/src/app/organization/add/styles.module.css b/frontend/src/app/organization/add/styles.module.css
index a4533b8..5433706 100644
--- a/frontend/src/app/organization/add/styles.module.css
+++ b/frontend/src/app/organization/add/styles.module.css
@@ -149,8 +149,7 @@
 }
 .inputField > input {
   display: flex;
-  height: 44px;
-  padding: 12px 16px;
+  padding: 12px;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
diff --git a/frontend/src/app/organization/page.jsx b/frontend/src/app/organization/page.jsx
index 97469ca..09451cb 100644
--- a/frontend/src/app/organization/page.jsx
+++ b/frontend/src/app/organization/page.jsx
@@ -3,6 +3,7 @@ import React from "react";
 import styles from "./styles.module.css";
 import TopHeader from "../components/topHeader/TopHeader";
 import globalStyle from "../globalStyle.module.css";
+import SuccessToast from "../components/toast/success/successToast";
 
 const OrganizationPage = () => {
   const sampleData = [
@@ -54,6 +55,7 @@ const OrganizationPage = () => {
 
   return (
     <div className={globalStyle.section}>
+      <SuccessToast />
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
           <TopHeader buttonText="Add Organization" topbarTitle="Organization" />
diff --git a/frontend/src/app/projects/page.jsx b/frontend/src/app/projects/page.jsx
index 0fa31ec..192feac 100644
--- a/frontend/src/app/projects/page.jsx
+++ b/frontend/src/app/projects/page.jsx
@@ -4,6 +4,7 @@ import TopHeader from "../components/topHeader/TopHeader";
 import globalStyle from "../globalStyle.module.css";
 import styles from "./styles.module.css";
 import { useRouter } from "next/navigation";
+import SuccessToast from "../components/toast/success/successToast";
 const ProjectsPage = () => {
   const router = useRouter();
   const sampleData = [
@@ -165,6 +166,7 @@ const ProjectsPage = () => {
 
   return (
     <div className={globalStyle.section}>
+      <SuccessToast message="Project successfully added!" />
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
           <TopHeader buttonText="Create Project" topbarTitle="Project" />
diff --git a/frontend/src/app/projects/view/AddServicesModal/AddServicesModal.jsx b/frontend/src/app/projects/view/AddServicesModal/AddServicesModal.jsx
index 3ed0def..47e96ae 100644
--- a/frontend/src/app/projects/view/AddServicesModal/AddServicesModal.jsx
+++ b/frontend/src/app/projects/view/AddServicesModal/AddServicesModal.jsx
@@ -2,6 +2,7 @@
 import React from "react";
 import styles from "./styles.module.css";
 import { useRouter, usePathname } from "next/navigation";
+import CloseIcon from "@/app/components/icons/close";
 
 const AddServicesModal = (props) => {
   const router = useRouter();
@@ -90,31 +91,8 @@ const AddServicesModal = (props) => {
               <p>Choose how you want to create your service</p>
             </div>
           </div>
-          <svg
-            onClick={() => props.trigger(!props.triggerState)}
-            xmlns="http://www.w3.org/2000/svg"
-            width="28"
-            height="28"
-            viewBox="0 0 28 28"
-            fill="none"
-          >
-            <path
-              d="M20.7077 7.29199L7.29102 20.7087"
-              stroke="white"
-              strokeOpacity="1"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-            <path
-              d="M7.29102 7.29199L20.7077 20.7087"
-              stroke="white"
-              strokeOpacity="1"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
+
+          <CloseIcon onClick={() => props.trigger(!props.triggerState)} />
         </div>
         <div className={styles.content}>
           {servicesList.map((service, key) => {
diff --git a/frontend/src/app/projects/view/add-from-scratch/page.jsx b/frontend/src/app/projects/view/add-from-scratch/page.jsx
index fcbbab2..faca479 100644
--- a/frontend/src/app/projects/view/add-from-scratch/page.jsx
+++ b/frontend/src/app/projects/view/add-from-scratch/page.jsx
@@ -4,6 +4,7 @@ import globalStyle from "@/app/globalStyle.module.css";
 import TopHeader from "@/app/components/topHeader/TopHeader";
 import styles from "./styles.module.css";
 import variableStyles from "./variableStyles.module.css";
+import TextField from "@/app/components/fields/textfield";
 const AddServices = () => {
   const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
 
@@ -37,11 +38,11 @@ const AddServices = () => {
                   <div>
                     <div>
                       <p>Name</p>
-                      <input type="text" placeholder="Enter service name" />
+                      <TextField placeHolder="Enter service name" />
                     </div>
                     <div>
                       <p>Version</p>
-                      <input type="text" placeholder="Service version" />
+                      <TextField placeHolder="Service version" />
                     </div>
                   </div>
                   <div>
@@ -49,13 +50,13 @@ const AddServices = () => {
                       <p>
                         Image <span>(Optional)</span>
                       </p>
-                      <input type="text" placeholder="Enter image name" />
+                      <TextField placeHolder="Enter image name" />
                     </div>
                   </div>
                   <div>
                     <div>
                       <p>Port</p>
-                      <input type="text" placeholder="Enter port" />
+                      <TextField placeHolder="Enter port" />
                     </div>
                   </div>
                   <div>
@@ -82,21 +83,21 @@ const AddServices = () => {
                   <div>
                     <div>
                       <p>CPU Request (MB)</p>
-                      <input type="text" placeholder="100" />
+                      <TextField placeHolder="250" />
                     </div>
                     <div>
                       <p>CPU Limit (MB)</p>
-                      <input type="text" placeholder="250" />
+                      <TextField placeHolder="250" />
                     </div>
                   </div>
                   <div>
                     <div>
                       <p>Memory Request (MB)</p>
-                      <input type="text" placeholder="250" />
+                      <TextField placeHolder="250" />
                     </div>
                     <div>
                       <p>Memory Limit (MB)</p>
-                      <input type="text" placeholder="500" />
+                      <TextField placeHolder="500" />
                     </div>
                   </div>
                 </div>
@@ -114,14 +115,12 @@ const AddServices = () => {
                         <div>
                           <div>
                             <p>Name</p>
-                            <input
-                              type="text"
-                              placeholder="Enter service name"
-                            />
+
+                            <TextField placeHolder="Enter service name" />
                           </div>
                           <div>
                             <p>Version</p>
-                            <input type="text" placeholder="Service version" />
+                            <TextField placeHolder="Services version" />
                           </div>
                         </div>
                       </div>
@@ -169,17 +168,12 @@ const AddServices = () => {
                         <div>
                           <div>
                             <p>Liveness Path</p>
-                            <input
-                              type="text"
-                              placeholder="Enter liveness path"
-                            />
+                            <TextField placeHolder="Enter liveness path" />
                           </div>
                           <div>
                             <p>Liveness Port</p>
-                            <input
-                              type="text"
-                              placeholder="Enter liveness port"
-                            />
+
+                            <TextField placeHolder="Enter liveness port" />
                           </div>
                         </div>
                       </div>
diff --git a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/AddConfigMapModal.jsx b/frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/AddConfigMapModal.jsx
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/AddConfigMapModal.jsx
@@ -0,0 +1 @@
+
diff --git a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/styles.module.css b/frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/styles.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/AddVariableModal.jsx b/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/AddVariableModal.jsx
new file mode 100644
index 0000000..c18b080
--- /dev/null
+++ b/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/AddVariableModal.jsx
@@ -0,0 +1,45 @@
+import React from "react";
+import styles from "./styles.module.css";
+import CloseIcon from "@/app/components/icons/close";
+import TextField from "@/app/components/fields/textfield";
+const AddConfigMapModal = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.modal}>
+        <div className={styles.modalHeader}>
+          <p>Environment Variables</p>
+          <CloseIcon />
+        </div>
+        <div className={styles.contentContainer}>
+          <div>
+            <div className={styles.contentHeader}>
+              <div>
+                <p>Generic</p>
+              </div>
+              <div>
+                <p>Generic</p>
+              </div>
+            </div>
+            <div className={styles.fieldContainer}>
+              <div className={styles.fields}>
+                <div>
+                  <div>
+                    <div>
+                      <p>Key</p>
+                      <TextField placeHolder="Enter variable key" />
+                    </div>
+                    <div>
+                      <p>Value</p>
+                      <TextField placeHolder="Enter" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default AddConfigMapModal;
diff --git a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/styles.module.css b/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/styles.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVolumes/AddVolumeModal.jsx b/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVolumes/AddVolumeModal.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVolumes/styles.module.css b/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVolumes/styles.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/app/projects/view/page.jsx b/frontend/src/app/projects/view/page.jsx
index df5182a..1bcfe38 100644
--- a/frontend/src/app/projects/view/page.jsx
+++ b/frontend/src/app/projects/view/page.jsx
@@ -144,6 +144,7 @@ const AddProject = () => {
           triggerState={triggerAddServicesModal}
         />
       )}
+
       <div className={globalStyle.section}>
         <div className={globalStyle.mainContainer}>
           <div className={globalStyle.container}>