From 4478a74ece9a65dea8af2aac280d6863ae7b874a Mon Sep 17 00:00:00 2001
From: benzbarquilla <benzzbarquilla@gmail.com>
Date: Fri, 13 Mar 2026 09:21:27 +0800
Subject: [PATCH] Added label for forms

---
 frontend/src/app/users/[usersId]/page.jsx     | 19 +++++++++++--------
 .../src/app/users/[usersId]/styles.module.css |  8 +++++++-
 frontend/src/app/users/add/page.jsx           | 19 +++++++++++--------
 frontend/src/app/users/add/styles.module.css  |  7 +++++++
 4 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/frontend/src/app/users/[usersId]/page.jsx b/frontend/src/app/users/[usersId]/page.jsx
index 4c29022..7b79a2b 100644
--- a/frontend/src/app/users/[usersId]/page.jsx
+++ b/frontend/src/app/users/[usersId]/page.jsx
@@ -50,14 +50,17 @@ const ViewUserPage = () => {
                 {/* Input fields */}
                 <form className={editUserStyle.fields}>
                   {/* Role and Dropdown */}
-                  <SelectField
-                    label="Select Role"
-                    options={[
-                      { label: "Option", value: "Option" },
-                      { label: "Option 1", value: "Option 1" },
-                      { label: "Option 2", value: "Option 2" },
-                    ]}
-                  />
+                  <div className={editUserStyle.roleField}>
+                    <p>Role</p>
+                    <SelectField
+                      label="Select Role"
+                      options={[
+                        { label: "Option", value: "Option" },
+                        { label: "Option 1", value: "Option 1" },
+                        { label: "Option 2", value: "Option 2" },
+                      ]}
+                    />
+                  </div>
                   {/* Email */}
                   <div className={editUserStyle.inputMainContainer}>
                     <div className={editUserStyle.inputContainer}>
diff --git a/frontend/src/app/users/[usersId]/styles.module.css b/frontend/src/app/users/[usersId]/styles.module.css
index af3385d..03a1dc2 100644
--- a/frontend/src/app/users/[usersId]/styles.module.css
+++ b/frontend/src/app/users/[usersId]/styles.module.css
@@ -99,7 +99,13 @@
   font-weight: 400;
   line-height: normal;
 }
-
+.roleField {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+}
 .inputField {
   display: flex;
   flex-direction: column;
diff --git a/frontend/src/app/users/add/page.jsx b/frontend/src/app/users/add/page.jsx
index e2f8dd1..42e6a92 100644
--- a/frontend/src/app/users/add/page.jsx
+++ b/frontend/src/app/users/add/page.jsx
@@ -54,14 +54,17 @@ const AddUserPage = () => {
                   onSubmit={handleSubmit(onSubmit)}
                 >
                   {/* Role and Dropdown */}
-                  <SelectField
-                    label="Select Role"
-                    options={[
-                      { label: "Option", value: "Option" },
-                      { label: "Option 1", value: "Option 1" },
-                      { label: "Option 2", value: "Option 2" },
-                    ]}
-                  />
+                  <div className={addUserStyle.roleField}>
+                    <p>Role</p>
+                    <SelectField
+                      label="Select Role"
+                      options={[
+                        { label: "Option", value: "Option" },
+                        { label: "Option 1", value: "Option 1" },
+                        { label: "Option 2", value: "Option 2" },
+                      ]}
+                    />
+                  </div>
                   {/* Email */}
                   <div className={addUserStyle.inputMainContainer}>
                     <div className={addUserStyle.inputContainer}>
diff --git a/frontend/src/app/users/add/styles.module.css b/frontend/src/app/users/add/styles.module.css
index 6acd5d8..f03154e 100644
--- a/frontend/src/app/users/add/styles.module.css
+++ b/frontend/src/app/users/add/styles.module.css
@@ -86,6 +86,13 @@
   font-weight: 400;
   line-height: normal;
 }
+.roleField {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+}
 .inputField {
   display: flex;
   flex-direction: column;