From de692a12480789061a7cfbd5d404266fe69deedc Mon Sep 17 00:00:00 2001
From: sigmaBoei <benzzbarquilla@gmail.com>
Date: Fri, 27 Feb 2026 13:48:05 +0800
Subject: [PATCH] users page changes

---
 .../src/app/components/prompts/Prompts.jsx    | 46 ++++++++++
 .../app/components/prompts/styles.module.css  | 16 ++++
 frontend/src/app/credentials/add/page.jsx     | 17 +++-
 .../src/app/credentials/add/styles.module.css | 86 +++++++++++++++++++
 frontend/src/app/users/[usersId]/page.jsx     | 15 +++-
 .../src/app/users/[usersId]/styles.module.css | 14 +++
 6 files changed, 190 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/app/components/prompts/Prompts.jsx
 create mode 100644 frontend/src/app/components/prompts/styles.module.css

diff --git a/frontend/src/app/components/prompts/Prompts.jsx b/frontend/src/app/components/prompts/Prompts.jsx
new file mode 100644
index 0000000..f842a68
--- /dev/null
+++ b/frontend/src/app/components/prompts/Prompts.jsx
@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+import styles from "./styles.module.css";
+
+const Prompts = ({ show }) => {
+  return (
+    <>
+      {/* Prompts (static) */}
+      {show && (
+        <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>
+      )}
+    </>
+  );
+};
+
+export default Prompts;
diff --git a/frontend/src/app/components/prompts/styles.module.css b/frontend/src/app/components/prompts/styles.module.css
new file mode 100644
index 0000000..66be081
--- /dev/null
+++ b/frontend/src/app/components/prompts/styles.module.css
@@ -0,0 +1,16 @@
+.prompts {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+}
+.prompts > p {
+  color: #d49e3d;
+  color: color(display-p3 0.7988 0.6279 0.3103);
+  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/credentials/add/page.jsx b/frontend/src/app/credentials/add/page.jsx
index 7a43b5c..c83f78a 100644
--- a/frontend/src/app/credentials/add/page.jsx
+++ b/frontend/src/app/credentials/add/page.jsx
@@ -20,7 +20,22 @@ const page = () => {
             <TopToolTip />
             <div className={createCredStyle.inputFieldContainer}>
               {/* Project Name Input Container */}
-              <div></div>
+              <div className={createCredStyle.projectName}>
+                <div className={createCredStyle.label}>
+                  <p className={createCredStyle.labelTxt}>Project Name</p>
+                  <p className={createCredStyle.required}>*</p>
+                </div>
+                {/* Content */}
+                <div className={createCredStyle.credInputField}>
+                  <input
+                    type="text"
+                    name=""
+                    id=""
+                    placeholder="Enter Email"
+                    className={createCredStyle.placeholderTxt}
+                  />
+                </div>
+              </div>
             </div>
           </div>
         </div>
diff --git a/frontend/src/app/credentials/add/styles.module.css b/frontend/src/app/credentials/add/styles.module.css
index e18567e..883e071 100644
--- a/frontend/src/app/credentials/add/styles.module.css
+++ b/frontend/src/app/credentials/add/styles.module.css
@@ -16,3 +16,89 @@
   gap: 24px;
   border-radius: 8px;
 }
+.projectName {
+  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;
+}
+.labelTxt {
+  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;
+}
+.required {
+  color: #cfb000;
+  font-weight: 600;
+}
+
+.credInputField {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  align-self: stretch;
+}
+
+/* 
+.inputField {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  align-self: stretch;
+}
+.inputField > input {
+  display: flex;
+  height: 44px;
+  padding: 12px 16px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  background: none;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 6px;
+  border: 1px solid #616583;
+  border: 1px solid color(display-p3 0.3843 0.3961 0.5057);
+}
+.inputField > input:hover {
+  border: 1px solid #616583;
+  border: 1px solid color(display-p3 0.3843 0.3961 0.5057);
+  background: rgba(75, 79, 109, 0.05);
+  background: color(display-p3 0.298 0.3098 0.4196 / 0.05);
+}
+
+.inputField input:focus {
+  outline: none;
+  border-radius: 6px;
+  border: 1px solid #959aff;
+  border: 1px solid color(display-p3 0.5892 0.6031 0.9766);
+  background: rgba(75, 79, 109, 0.25);
+  background: color(display-p3 0.298 0.3098 0.4196 / 0.25);
+  caret-color: #959aff;
+}
+.inputField input:focus::placeholder {
+  color: #4b4f6d;
+  color: color(display-p3 0.298 0.3098 0.4196);
+}
+
+.placeholderTxt::placeholder {
+  color: #85869b;
+  color: color(display-p3 0.5216 0.5255 0.6);
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal; */
diff --git a/frontend/src/app/users/[usersId]/page.jsx b/frontend/src/app/users/[usersId]/page.jsx
index d96bcb0..87c759f 100644
--- a/frontend/src/app/users/[usersId]/page.jsx
+++ b/frontend/src/app/users/[usersId]/page.jsx
@@ -1,9 +1,11 @@
-import React from "react";
+"use client";
 import TopHeader from "@/app/components/topHeader/TopHeader";
 import globalStyle from "../../globalStyle.module.css";
 import editUserStyle from "./styles.module.css";
+import Prompts from "@/app/components/prompts/Prompts";
+import { useState } from "react";
 
-const page = () => {
+const Page = () => {
   const sampleData = [
     { permission: "organization.delete" },
     { permission: "user.create" },
@@ -20,6 +22,9 @@ const page = () => {
     { permission: "service.delete" },
     { permission: "service.update" },
   ];
+
+  const [showPrompt, setShowPrompt] = useState(false);
+
   return (
     <div className={globalStyle.section}>
       <div className={globalStyle.mainContainer}>
@@ -43,6 +48,7 @@ const page = () => {
                     <div className={editUserStyle.inputContainer}>
                       <div className={editUserStyle.label}>
                         <p>Role</p>
+                        <p className={editUserStyle.required}>*</p>
                       </div>
                       <div className={editUserStyle.inputField}>
                         <select
@@ -63,6 +69,7 @@ const page = () => {
                       {/* Label */}
                       <div className={editUserStyle.label}>
                         <p>Email</p>
+                        {/* <p className={editUserStyle.optionalTxt}>(Optional)</p> */}
                       </div>
                       {/* Input field */}
                       <div className={editUserStyle.inputField}>
@@ -74,6 +81,7 @@ const page = () => {
                           className={editUserStyle.placeholderTxt}
                         />
                       </div>
+                      <Prompts showPrompt={false} />
                     </div>
                   </div>
                   {/* Full Name */}
@@ -82,6 +90,7 @@ const page = () => {
                       {/* Label */}
                       <div className={editUserStyle.label}>
                         <p>Full Name</p>
+                        {/* <p className={editUserStyle.optionalTxt}>(Optional)</p> */}
                       </div>
                       {/* Input field */}
                       <div className={editUserStyle.inputField}>
@@ -223,4 +232,4 @@ const page = () => {
   );
 };
 
-export default page;
+export default Page;
diff --git a/frontend/src/app/users/[usersId]/styles.module.css b/frontend/src/app/users/[usersId]/styles.module.css
index e3111f7..e990fa2 100644
--- a/frontend/src/app/users/[usersId]/styles.module.css
+++ b/frontend/src/app/users/[usersId]/styles.module.css
@@ -76,6 +76,19 @@
   gap: 2px;
   align-self: stretch;
 }
+.label > .required {
+  color: #cfb000;
+  font-weight: 600;
+}
+.label > .optionalTxt {
+  color: #85869b;
+  color: color(display-p3 0.5216 0.5255 0.6);
+  font-family: Inter;
+  font-size: 16 px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: normal;
+}
 .label > p {
   color: #d2d3e1;
   color: color(display-p3 0.8235 0.8275 0.8784);
@@ -85,6 +98,7 @@
   font-weight: 400;
   line-height: normal;
 }
+
 .inputField {
   display: flex;
   flex-direction: column;