Laux/Frontend-Internal-Developer-Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

done users page

Browse Source
This commit is contained in:
sigmaBoei
2026-02-26 20:44:19 +08:00
parent ccd0caf14d
commit af243d17cb
7 changed files with 905 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/src/app/components/header/components/HeaderDetails.jsx
View File

@@ -1,8 +1,8 @@
"use client"; "use client";
import React from "react"; import React from "react";
import orgStyles from "./Organization.module.css"; import orgStyle from "./organization.module.css";
import profileStyles from "./Profile.module.css"; import profileStyle from "./profile.module.css";
import { useState } from "react"; import { useState } from "react";
@@ -24,22 +24,22 @@ const HeaderDetails = () => {
return ( return (
<> <>
{/* Organization and Dropdown Section*/} {/* Organization and Dropdown Section*/}
<div className={orgStyles.organizationContainer}> <div className={orgStyle.organizationContainer}>
<div className={orgStyles.orgContainer}> <div className={orgStyle.orgContainer}>
{/* Logo */} {/* Logo */}
<div className={orgStyles.orgLogo}></div> <div className={orgStyle.orgLogo}></div>
<div className={orgStyles.orgName}> <div className={orgStyle.orgName}>
<p>Organization</p> <p>Organization</p>
<div className={orgStyles.dropdownContainer}> <div className={orgStyle.dropdownContainer}>
{/* Dropdown Menu*/} {/* Dropdown Menu*/}
{openOrgDropdown && ( {openOrgDropdown && (
<div className={orgStyles.dropdown}> <div className={orgStyle.dropdown}>
{/* Organization Header and Search */} {/* Organization Header and Search */}
<div className={orgStyles.orgSearchContainer}> <div className={orgStyle.orgSearchContainer}>
{/* Header */} {/* Header */}
<div className={orgStyles.createBtnContainer}> <div className={orgStyle.createBtnContainer}>
<p>Organization</p> <p>Organization</p>
<div className={orgStyles.createBtn}> <div className={orgStyle.createBtn}>
<p>Create</p> <p>Create</p>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -80,8 +80,8 @@ const HeaderDetails = () => {
</div> </div>
</div> </div>
{/* Search */} {/* Search */}
<div className={orgStyles.srchInputContainer}> <div className={orgStyle.srchInputContainer}>
<div className={orgStyles.srchInputGroup}> <div className={orgStyle.srchInputGroup}>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="18" width="18"
@@ -112,7 +112,7 @@ const HeaderDetails = () => {
</defs> </defs>
</svg> </svg>
<input <input
className={orgStyles.placeholderTxt} className={orgStyle.placeholderTxt}
type="text" type="text"
name="search" name="search"
id="" id=""
@@ -123,16 +123,16 @@ const HeaderDetails = () => {
</div> </div>
{/* Select Options */} {/* Select Options */}
<div className={orgStyles.optionsContainer}> <div className={orgStyle.optionsContainer}>
{orgList.map((org, index) => { {orgList.map((org, index) => {
return ( return (
<div <div
className={orgStyles.orgList} className={orgStyle.orgList}
key={index} key={index}
onClick={() => handleOrgSelect(index)} onClick={() => handleOrgSelect(index)}
> >
<div <div
className={`${orgStyles.iconTxt} ${index === selectedOrg ? orgStyles.active : ""}`} className={`${orgStyle.iconTxt} ${index === selectedOrg ? orgStyle.active : ""}`}
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -160,7 +160,7 @@ const HeaderDetails = () => {
)} )}
{/* Button */} {/* Button */}
<div <div
className={orgStyles.dropdownBtn} className={orgStyle.dropdownBtn}
onClick={() => setOpenOrgDropdown(!openOrgDropdown)} onClick={() => setOpenOrgDropdown(!openOrgDropdown)}
> >
<p>Project Moonshot Inc.</p> <p>Project Moonshot Inc.</p>
@@ -188,20 +188,20 @@ const HeaderDetails = () => {
{/* Profile Section */} {/* Profile Section */}
<div <div
className={profileStyles.profileContainer} className={profileStyle.profileContainer}
onClick={() => setOpenProfileDropdown(!openProfileDropdown)} onClick={() => setOpenProfileDropdown(!openProfileDropdown)}
> >
{/* Profile */} {/* Profile */}
<div className={profileStyles.profileBadge}> <div className={profileStyle.profileBadge}>
{/* Username and Role*/} {/* Username and Role*/}
<div className={profileStyles.nameRole}> <div className={profileStyle.nameRole}>
<p className={profileStyles.userName}>JM Grills</p> <p className={profileStyle.userName}>JM Grills</p>
<p className={profileStyles.userRole}>Super Admin</p> <p className={profileStyle.userRole}>Super Admin</p>
</div> </div>
{/* User profile*/} {/* User profile*/}
<div className={profileStyles.userImgContainer}> <div className={profileStyle.userImgContainer}>
<div className={profileStyles.userPic}></div> <div className={profileStyle.userPic}></div>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="24" width="24"
@@ -219,11 +219,11 @@ const HeaderDetails = () => {
{/* Dropdown */} {/* Dropdown */}
{openProfileDropdown && ( {openProfileDropdown && (
<div className={profileStyles.dropdownContainer}> <div className={profileStyle.dropdownContainer}>
{/* Settings */} {/* Settings */}
<div className={profileStyles.settingsBtn}> <div className={profileStyle.settingsBtn}>
{/* Icon */} {/* Icon */}
<div className={profileStyles.btn}> <div className={profileStyle.btn}>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width={20} width={20}
@@ -250,9 +250,9 @@ const HeaderDetails = () => {
<p>Settings</p> <p>Settings</p>
</div> </div>
{/* Logout */} {/* Logout */}
<div className={profileStyles.logoutBtn}> <div className={profileStyle.logoutBtn}>
{/* Icon */} {/* Icon */}
<div className={profileStyles.btn}> <div className={profileStyle.btn}>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width={20} width={20}

14
frontend/src/app/components/header/components/Organization.module.css
View File

@@ -45,6 +45,7 @@
cursor: pointer; cursor: pointer;
position: relative; position: relative;
} }
.dropdownBtn { .dropdownBtn {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -92,6 +93,18 @@
top: 100%; top: 100%;
margin-top: 8px; margin-top: 8px;
left: 0; left: 0;
animation-name: dropDownAnimation;
animation-duration: 200ms;
}
@keyframes dropDownAnimation {
0% {
opacity: 0;
transform: translateY(-10%);
}
100% {
opacity: 1;
transform: translateY(0);
}
} }
.orgSearchContainer { .orgSearchContainer {
@@ -196,6 +209,7 @@
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
} }
.orgList:hover { .orgList:hover {
border-radius: 4px; border-radius: 4px;
background: #3c4159; background: #3c4159;

12
frontend/src/app/components/header/components/Profile.module.css
View File

@@ -89,6 +89,18 @@
z-index: 10; z-index: 10;
top: 100%; top: 100%;
margin-top: 3px; margin-top: 3px;
animation-name: dropDownAnimation;
animation-duration: 200ms;
}
@keyframes dropDownAnimation {
0% {
opacity: 0;
transform: translateY(-10%);
}
100% {
opacity: 1;
transform: translateY(0);
}
} }
.settingsBtn, .settingsBtn,

203
frontend/src/app/users/[usersId]/page.jsx
View File

@@ -1,13 +1,214 @@
import React from "react"; import React from "react";
import TopHeader from "@/app/components/topHeader/TopHeader"; import TopHeader from "@/app/components/topHeader/TopHeader";
import globalStyle from "../../globalStyle.module.css"; import globalStyle from "../../globalStyle.module.css";
import editUserStyle from "./styles.module.css";
const page = () => { const page = () => {
const sampleData = [
{ permission: "organization.delete" },
{ permission: "user.create" },
{ permission: "user.list" },
{ permission: "user.update" },
{ permission: "robot.create" },
{ permission: "user.delete" },
];
return ( return (
<div className={globalStyle.section}> <div className={globalStyle.section}>
<div className={globalStyle.mainContainer}> <div className={globalStyle.mainContainer}>
<div className={globalStyle.container}> <div className={globalStyle.container}>
<TopHeader buttonText="Edit" topbarTitle="View" /> <TopHeader buttonText="" topbarTitle="View" state="view" />
<div className={editUserStyle.addUserContainer}>
{/* Input fields Container */}
<div className={editUserStyle.inputFieldContainer}>
{/* User Details */}
<div className={editUserStyle.userDetails}>
{/* Header */}
<div className={editUserStyle.header}>
<div>
<p>User Details</p>
</div>
</div>
{/* Input fields */}
<form className={editUserStyle.fields}>
{/* Role and Dropdown */}
<div className={editUserStyle.selectRoleContainer}>
<div className={editUserStyle.inputContainer}>
<div className={editUserStyle.label}>
<p>Role</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>
{/* Email */}
<div className={editUserStyle.inputMainContainer}>
<div className={editUserStyle.inputContainer}>
{/* Label */}
<div className={editUserStyle.label}>
<p>Email</p>
</div>
{/* Input field */}
<div className={editUserStyle.inputField}>
<input
type="text"
name=""
id=""
placeholder="Enter Email"
className={editUserStyle.placeholderTxt}
/>
</div>
</div>
</div>
{/* Full Name */}
<div className={editUserStyle.inputMainContainer}>
<div className={editUserStyle.inputContainer}>
{/* Label */}
<div className={editUserStyle.label}>
<p>Full Name</p>
</div>
{/* Input field */}
<div className={editUserStyle.inputField}>
<input
type="text"
name=""
id=""
placeholder="Enter full name"
className={editUserStyle.placeholderTxt}
/>
</div>
</div>
</div>
</form>
</div>
{/* Permissions */}
<div className={editUserStyle.userPermissions}>
{/* Add permissions */}
<div className={editUserStyle.permissionsContainer}>
{/* Header */}
<div className={editUserStyle.permissionsHeader}>
<p>Permissions</p>
<div className={editUserStyle.svgContainer}>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
>
<path
d="M12 5.29199V18.7087"
stroke="#333649"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5.29102 12H18.7077"
stroke="#333649"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
</div>
</div>
{/* State text (static) */}
{sampleData.map((perm, index) => {
return (
<div className={editUserStyle.permissions} key={index}>
<div className={editUserStyle.permissionsItem}>
<svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
>
<path
d="M13.834 3.75V7.41667C13.834 7.65978 13.9306 7.89294 14.1025 8.06485C14.2744 8.23676 14.5075 8.33333 14.7507 8.33333H18.4173"
stroke="#969AF9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M16.584 20.25H7.41732C6.93109 20.25 6.46477 20.0568 6.12096 19.713C5.77714 19.3692 5.58398 18.9029 5.58398 18.4167V5.58333C5.58398 5.0971 5.77714 4.63079 6.12096 4.28697C6.46477 3.94315 6.93109 3.75 7.41732 3.75H13.834L18.4173 8.33333V18.4167C18.4173 18.9029 18.2242 19.3692 17.8803 19.713C17.5365 20.0568 17.0702 20.25 16.584 20.25Z"
stroke="#969AF9"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9.25 14.7503L11.0833 16.5837L14.75 12.917"
stroke="#969AF9"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<p>{perm.permission}</p>
</div>
<div className={editUserStyle.deleteBtn}>
<div className={editUserStyle.deleteSvg}>
{" "}
<svg
xmlns="http://www.w3.org/2000/svg"
width={20}
height={20}
viewBox="0 0 20 20"
fill="none"
>
<path
d="M3.61133 6.00684H16.3891"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M8.40234 9.20117V13.9928"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M11.5977 9.20117V13.9928"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.41016 6.00684L5.20877 15.5902C5.20877 16.0138 5.37705 16.42 5.67658 16.7196C5.97612 17.0191 6.38238 17.1874 6.80599 17.1874H13.1949C13.6185 17.1874 14.0247 17.0191 14.3243 16.7196C14.6238 16.42 14.7921 16.0138 14.7921 15.5902L15.5907 6.00684"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M7.60352 6.00694V3.61111C7.60352 3.39931 7.68765 3.19618 7.83742 3.04641C7.98719 2.89664 8.19032 2.8125 8.40213 2.8125H11.5966C11.8084 2.8125 12.0115 2.89664 12.1613 3.04641C12.311 3.19618 12.3952 3.39931 12.3952 3.61111V6.00694"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
</div>
</div>
);
})}
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

317
frontend/src/app/users/[usersId]/styles.module.css Normal file
View File

@@ -0,0 +1,317 @@
.addUserContainer {
display: flex;
padding: 36px 144px 72px 144px;
align-items: flex-start;
gap: 24px;
flex: 1 0 0;
align-self: stretch;
}
.inputFieldContainer {
display: flex;
align-items: flex-start;
gap: 24px;
flex: 1 0 0;
align-self: stretch;
}
.userDetails {
display: flex;
width: 400px;
padding: 24px 24px 48px 24px;
flex-direction: column;
align-items: flex-start;
border-radius: 6px;
background: #1d1e2a;
background: color(display-p3 0.1137 0.1176 0.1608);
}
.header {
display: flex;
padding-bottom: 24px;
align-items: flex-start;
gap: 17px;
align-self: stretch;
}
.header > div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 5px;
flex: 1 0 0;
}
.header > div > p {
width: 163px;
color: #d2d3e1;
color: color(display-p3 0.8235 0.8275 0.8784);
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.fields {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.selectRoleContainer,
.inputMainContainer {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
align-self: stretch;
}
.inputContainer {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
flex: 1 0 0;
}
.label {
display: flex;
align-items: flex-start;
gap: 2px;
align-self: stretch;
}
.label > p {
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;
}
.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;
}
/* 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;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
border-radius: 6px;
}
.permissionsContainer {
display: flex;
padding: 24px;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
border-radius: 6px;
background: #1d1e2a;
background: color(display-p3 0.1138 0.1191 0.1616);
}
.permissionsHeader {
display: flex;
padding-bottom: 24px;
align-items: flex-start;
gap: 17px;
align-self: stretch;
}
.permissionsHeader > p {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 5px;
flex: 1 0 0;
color: #d2d3e1;
color: color(display-p3 0.8235 0.8275 0.8784);
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: normal;
width: 163px;
}
.svgContainer {
display: flex;
width: 40px;
height: 40px;
flex-direction: column;
align-items: flex-end;
gap: 5px;
border-radius: 6px;
background: #27293b;
background: color(display-p3 0.1529 0.1608 0.2275);
}
.svgContainer > div {
display: flex;
padding: 8px;
justify-content: center;
align-items: center;
gap: 12px;
border-radius: 6px;
background: #27293b;
background: color(display-p3 0.1529 0.1608 0.2275);
}
.permissionDefaultState {
display: flex;
height: 43.813px;
padding: 8px 16px;
justify-content: center;
align-items: center;
align-self: stretch;
}
.permissionDefaultState p {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
flex: 1 0 0;
align-self: stretch;
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;
}
.permissions {
display: flex;
height: 43.813px;
padding: 8px 16px;
justify-content: space-between;
align-items: center;
align-self: stretch;
border-bottom: 0.5px solid #2e3042;
border-bottom: 0.5px solid color(display-p3 0.1831 0.189 0.2535);
}
.permissions:hover {
border-bottom: 1px solid rgba(129, 135, 255, 0.25);
border-bottom: 1px solid color(display-p3 0.5098 0.5294 1 / 0.25);
background: rgba(129, 135, 255, 0.05);
background: color(display-p3 0.5098 0.5294 1 / 0.05);
}
.permissionsItem {
display: flex;
align-items: center;
gap: 12px;
flex: 1 0 0;
align-self: stretch;
}
.permissionsItem > p {
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;
}
.deleteBtn {
display: flex;
align-items: center;
align-self: stretch;
}
.deleteSvg {
display: flex;
padding: 6px;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid #959aff00;
color: #969af9;
aspect-ratio: 1/1;
border-radius: 100px;
}
.deleteSvg:hover {
color: #fff;
stroke-width: 1px;
stroke: color(display-p3 1 1 1);
border-radius: 100px;
border: 1px solid #959aff;
border: 1px solid color(display-p3 0.5892 0.6031 0.9766);
background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
background: linear-gradient(
180deg,
color(display-p3 0.4118 0.4196 0.5725) 0%,
color(display-p3 0.1241 0.1265 0.1725) 100%
);
}

113
frontend/src/app/users/add/page.jsx
View File

@@ -9,7 +9,7 @@ const page = () => {
<div className={globalStyle.mainContainer}> <div className={globalStyle.mainContainer}>
<div className={globalStyle.container}> <div className={globalStyle.container}>
<TopHeader <TopHeader
buttonText="Add" buttonText="Save"
cancelButtonText="Cancel" cancelButtonText="Cancel"
topbarTitle="Add User" topbarTitle="Add User"
state="add" state="add"
@@ -18,9 +18,116 @@ const page = () => {
{/* Input fields Container */} {/* Input fields Container */}
<div className={addUserStyle.inputFieldContainer}> <div className={addUserStyle.inputFieldContainer}>
{/* User Details */} {/* User Details */}
<div className={addUserStyle.userDetails}></div> <div className={addUserStyle.userDetails}>
{/* Header */}
<div className={addUserStyle.header}>
<div>
<p>User Details</p>
</div>
</div>
{/* 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>
{/* Email */}
<div className={addUserStyle.inputMainContainer}>
<div className={addUserStyle.inputContainer}>
{/* Label */}
<div className={addUserStyle.label}>
<p>Email</p>
</div>
{/* Input field */}
<div className={addUserStyle.inputField}>
<input
type="text"
name=""
id=""
placeholder="Enter Email"
className={addUserStyle.placeholderTxt}
/>
</div>
</div>
</div>
{/* Full Name */}
<div className={addUserStyle.inputMainContainer}>
<div className={addUserStyle.inputContainer}>
{/* Label */}
<div className={addUserStyle.label}>
<p>Full Name</p>
</div>
{/* Input field */}
<div className={addUserStyle.inputField}>
<input
type="text"
name=""
id=""
placeholder="Enter full name"
className={addUserStyle.placeholderTxt}
/>
</div>
</div>
</div>
</form>
</div>
{/* Permissions */} {/* Permissions */}
<div className={addUserStyle.userPermissions}></div> <div className={addUserStyle.userPermissions}>
{/* Add permissions */}
<div className={addUserStyle.permissionsContainer}>
{/* Header */}
<div className={addUserStyle.permissionsHeader}>
<p>Permissions</p>
<div className={addUserStyle.svgContainer}>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
>
<path
d="M12 5.29199V18.7087"
stroke="#333649"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5.29102 12H18.7077"
stroke="#333649"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
</div>
</div>
{/* State text (static) */}
<div className={addUserStyle.permissionDefaultState}>
<p>No permission added yet</p>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

223
frontend/src/app/users/add/styles.module.css
View File

@@ -1,12 +1,11 @@
.addUserContainer { .addUserContainer {
background-color: red;
display: flex; display: flex;
padding: 36px 144px 72px 144px;
align-items: flex-start; align-items: flex-start;
gap: 24px; gap: 24px;
flex: 1 0 0; flex: 1 0 0;
align-self: stretch; align-self: stretch;
} }
.inputFieldContainer { .inputFieldContainer {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@@ -14,7 +13,6 @@
flex: 1 0 0; flex: 1 0 0;
align-self: stretch; align-self: stretch;
} }
.userDetails { .userDetails {
display: flex; display: flex;
width: 400px; width: 400px;
@@ -25,6 +23,144 @@
background: #1d1e2a; background: #1d1e2a;
background: color(display-p3 0.1137 0.1176 0.1608); background: color(display-p3 0.1137 0.1176 0.1608);
} }
.header {
display: flex;
padding-bottom: 24px;
align-items: flex-start;
gap: 17px;
align-self: stretch;
}
.header > div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 5px;
flex: 1 0 0;
}
.header > div > p {
width: 163px;
color: #d2d3e1;
color: color(display-p3 0.8235 0.8275 0.8784);
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.fields {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.selectRoleContainer,
.inputMainContainer {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
align-self: stretch;
}
.inputContainer {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
flex: 1 0 0;
}
.label {
display: flex;
align-items: flex-start;
gap: 2px;
align-self: stretch;
}
.label > p {
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;
}
.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;
}
/* 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 { .userPermissions {
display: flex; display: flex;
@@ -34,3 +170,84 @@
align-self: stretch; align-self: stretch;
border-radius: 6px; border-radius: 6px;
} }
.permissionsContainer {
display: flex;
padding: 24px;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
border-radius: 6px;
background: #1d1e2a;
background: color(display-p3 0.1138 0.1191 0.1616);
}
.permissionsHeader {
display: flex;
padding-bottom: 24px;
align-items: flex-start;
gap: 17px;
align-self: stretch;
}
.permissionsHeader > p {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 5px;
flex: 1 0 0;
color: #d2d3e1;
color: color(display-p3 0.8235 0.8275 0.8784);
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: normal;
width: 163px;
}
.svgContainer {
display: flex;
width: 40px;
height: 40px;
flex-direction: column;
align-items: flex-end;
gap: 5px;
border-radius: 6px;
background: #27293b;
background: color(display-p3 0.1529 0.1608 0.2275);
}
.svgContainer > div {
display: flex;
padding: 8px;
justify-content: center;
align-items: center;
gap: 12px;
border-radius: 6px;
background: #27293b;
background: color(display-p3 0.1529 0.1608 0.2275);
}
.permissionDefaultState {
display: flex;
height: 43.813px;
padding: 8px 16px;
justify-content: center;
align-items: center;
align-self: stretch;
}
.permissionDefaultState p {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
flex: 1 0 0;
align-self: stretch;
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;
}