From 6633744911b0e92f8a4a5891693d0b1ada58cd48 Mon Sep 17 00:00:00 2001
From: benzbarquilla <benzzbarquilla@gmail.com>
Date: Tue, 3 Mar 2026 11:57:33 +0800
Subject: [PATCH] edited roles

---
 frontend/src/app/users/[usersId]/page.jsx     | 48 ++++++++-----------
 .../src/app/users/[usersId]/styles.module.css | 31 +++---------
 frontend/src/app/users/add/page.jsx           | 28 ++++-------
 frontend/src/app/users/add/styles.module.css  | 25 ----------
 4 files changed, 34 insertions(+), 98 deletions(-)

diff --git a/frontend/src/app/users/[usersId]/page.jsx b/frontend/src/app/users/[usersId]/page.jsx
index 72f1a51..dee1c6a 100644
--- a/frontend/src/app/users/[usersId]/page.jsx
+++ b/frontend/src/app/users/[usersId]/page.jsx
@@ -5,6 +5,7 @@ import editUserStyle from "./styles.module.css";
 import Prompts from "@/app/components/prompts/Prompts";
 import { useState } from "react";
 import TextField from "@/app/components/fields/textfield";
+import SelectField from "@/app/components/select/SelectField";
 
 const Page = () => {
   const sampleData = [
@@ -12,16 +13,16 @@ const Page = () => {
     { permission: "user.create" },
     { permission: "user.list" },
     { permission: "user.update" },
-    // { permission: "robot.create" },
-    // { permission: "user.delete" },
-    // { permission: "robot.list" },
-    // { permission: "robot.delete" },
-    // { permission: "project.delete" },
-    // { permission: "project.update" },
-    // { permission: "service.create" },
-    // { permission: "service.list" },
-    // { permission: "service.delete" },
-    // { permission: "service.update" },
+    { permission: "robot.create" },
+    { permission: "user.delete" },
+    { permission: "robot.list" },
+    { permission: "robot.delete" },
+    { permission: "project.delete" },
+    { permission: "project.update" },
+    { permission: "service.create" },
+    { permission: "service.list" },
+    { permission: "service.delete" },
+    { permission: "service.update" },
   ];
 
   return (
@@ -48,25 +49,14 @@ const Page = () => {
                 {/* Input fields */}
                 <form className={editUserStyle.fields}>
                   {/* Role and Dropdown */}
-                  <div className={editUserStyle.selectRoleContainer}>
-                    <div className={editUserStyle.inputContainer}>
-                      <div className={editUserStyle.label}>
-                        <p>Role</p>
-                        {/* <p className={editUserStyle.required}>*</p> */}
-                      </div>
-                      <div className={editUserStyle.inputField}>
-                        <select
-                          name="role"
-                          className={editUserStyle.selectField}
-                        >
-                          <option value="">Select Role</option>
-                          <option value="">Option</option>
-                          <option value="">Option 2</option>
-                          <option value="">Option 3</option>
-                        </select>
-                      </div>
-                    </div>
-                  </div>
+                  <SelectField
+                    label="Select Role"
+                    options={[
+                      { label: "Option", value: "Option" },
+                      { label: "Option 1", value: "Option 1" },
+                      { label: "Option 2", value: "Option 2" },
+                    ]}
+                  />
                   {/* 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 da357c2..ae7683e 100644
--- a/frontend/src/app/users/[usersId]/styles.module.css
+++ b/frontend/src/app/users/[usersId]/styles.module.css
@@ -5,6 +5,7 @@
   gap: 24px;
   flex: 1 0 0;
   align-self: stretch;
+  position: relative;
 }
 .inputFieldContainer {
   display: flex;
@@ -107,31 +108,6 @@
   align-self: stretch;
 }
 
-/* Select Role Dropdown */
-.selectField {
-  display: flex;
-  height: 44px;
-  padding: 12px 16px;
-  align-self: stretch;
-  background: none;
-  border-radius: 6px;
-  border: 1px solid #616583;
-  border: 1px solid color(display-p3 0.3843 0.3961 0.5057);
-  color: #d2d3e1;
-  font-family: Inter;
-  font-size: 16px;
-  font-weight: 400;
-  appearance: none;
-}
-
-.selectField:focus {
-  outline: none;
-  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);
-}
-
 .userPermissions {
   display: flex;
   flex-direction: column;
@@ -139,7 +115,12 @@
   flex: 1 0 0;
   align-self: stretch;
   border-radius: 6px;
+  height: calc(100vh - 280px);
+  position: relative;
+  overflow: auto;
+  scrollbar-width: none;
 }
+
 .permissionsContainer {
   display: flex;
   padding: 24px;
diff --git a/frontend/src/app/users/add/page.jsx b/frontend/src/app/users/add/page.jsx
index 9549814..aa8c474 100644
--- a/frontend/src/app/users/add/page.jsx
+++ b/frontend/src/app/users/add/page.jsx
@@ -3,7 +3,7 @@ import TopHeader from "@/app/components/topHeader/TopHeader";
 import globalStyle from "../../globalStyle.module.css";
 import addUserStyle from "./styles.module.css";
 import TextField from "@/app/components/fields/textfield";
-
+import SelectField from "@/app/components/select/SelectField";
 const page = () => {
   return (
     <div className={globalStyle.section}>
@@ -30,24 +30,14 @@ const page = () => {
                 {/* Input fields */}
                 <form className={addUserStyle.fields}>
                   {/* Role and Dropdown */}
-                  <div className={addUserStyle.selectRoleContainer}>
-                    <div className={addUserStyle.inputContainer}>
-                      <div className={addUserStyle.label}>
-                        <p>Role</p>
-                      </div>
-                      <div className={addUserStyle.inputField}>
-                        <select
-                          name="role"
-                          className={addUserStyle.selectField}
-                        >
-                          <option value="">Select Role</option>
-                          <option value="">Option</option>
-                          <option value="">Option 2</option>
-                          <option value="">Option 3</option>
-                        </select>
-                      </div>
-                    </div>
-                  </div>
+                  <SelectField
+                    label="Select Role"
+                    options={[
+                      { label: "Option", value: "Option" },
+                      { label: "Option 1", value: "Option 1" },
+                      { label: "Option 2", value: "Option 2" },
+                    ]}
+                  />
                   {/* 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 5393a49..0f33490 100644
--- a/frontend/src/app/users/add/styles.module.css
+++ b/frontend/src/app/users/add/styles.module.css
@@ -93,31 +93,6 @@
   align-self: stretch;
 }
 
-/* Select Role Dropdown */
-.selectField {
-  display: flex;
-  height: 44px;
-  padding: 12px 16px;
-  align-self: stretch;
-  background: none;
-  border-radius: 6px;
-  border: 1px solid #616583;
-  border: 1px solid color(display-p3 0.3843 0.3961 0.5057);
-  color: #d2d3e1;
-  font-family: Inter;
-  font-size: 16px;
-  font-weight: 400;
-  appearance: none;
-}
-
-.selectField:focus {
-  outline: none;
-  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);
-}
-
 .userPermissions {
   display: flex;
   flex-direction: column;