edited roles

This commit is contained in:
2026-03-03 11:57:33 +08:00
parent e47424771f
commit 6633744911
4 changed files with 34 additions and 98 deletions

View File

@@ -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}>

View File

@@ -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;

View File

@@ -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}>

View File

@@ -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;