121 lines
4.4 KiB
JavaScript
121 lines
4.4 KiB
JavaScript
import React from "react";
|
|
import TopHeader from "@/app/components/topHeader/TopHeader";
|
|
import globalStyle from "../../globalStyle.module.css";
|
|
import addRoleStyle from "./styles.module.css";
|
|
|
|
const page = () => {
|
|
return (
|
|
<div className={globalStyle.section}>
|
|
<div className={globalStyle.mainContainer}>
|
|
<div className={globalStyle.container}>
|
|
<TopHeader
|
|
buttonText="Save"
|
|
cancelButtonText="Cancel"
|
|
topbarTitle="Add Role"
|
|
state="add"
|
|
/>
|
|
<div className={addRoleStyle.addUserContainer}>
|
|
{/* Input fields Container */}
|
|
<div className={addRoleStyle.inputFieldContainer}>
|
|
{/* User Details */}
|
|
<div className={addRoleStyle.roleDetails}>
|
|
{/* Header */}
|
|
<div className={addRoleStyle.header}>
|
|
<div>
|
|
<p>Role Details</p>
|
|
</div>
|
|
</div>
|
|
{/* Input fields */}
|
|
<form className={addRoleStyle.fields}>
|
|
{/* Email */}
|
|
<div className={addRoleStyle.inputMainContainer}>
|
|
<div className={addRoleStyle.inputContainer}>
|
|
{/* Label */}
|
|
<div className={addRoleStyle.label}>
|
|
<p>Name</p>
|
|
</div>
|
|
{/* Input field */}
|
|
<div className={addRoleStyle.inputField}>
|
|
<input
|
|
type="text"
|
|
name=""
|
|
id=""
|
|
placeholder="Enter name"
|
|
className={addRoleStyle.placeholderTxt}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* Full Name */}
|
|
<div className={addRoleStyle.inputMainContainer}>
|
|
<div className={addRoleStyle.inputContainer}>
|
|
{/* Label */}
|
|
<div className={addRoleStyle.label}>
|
|
<p>Organization ID</p>
|
|
</div>
|
|
{/* Input field */}
|
|
<div className={addRoleStyle.inputField}>
|
|
<input
|
|
type="text"
|
|
name=""
|
|
id=""
|
|
placeholder="Enter organization ID"
|
|
className={addRoleStyle.placeholderTxt}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Permissions */}
|
|
<div className={addRoleStyle.rolePermissions}>
|
|
{/* Add permissions */}
|
|
<div className={addRoleStyle.permissionsContainer}>
|
|
{/* Header */}
|
|
<div className={addRoleStyle.permissionsHeader}>
|
|
<p>Permissions</p>
|
|
<div className={addRoleStyle.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={addRoleStyle.permissionDefaultState}>
|
|
<p>No permission added yet</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default page;
|