l-min-components 1.0.604 → 1.0.607

package/src/components/AdminRolesPermission/index.jsx

@@ -3,10 +3,23 @@ import { AdminRolesAndPermissionContainer } from "./index.styled";
 import { useNavigate } from "react-router-dom";
 import ButtonComponent from "../button";
 import photo from "./assets/images/roles_img.png";
+import SearchBar from "../searchBar";
+import { categoryList } from "./create/data";
+import { MdDeleteOutline } from "react-icons/md";
+import { PencilIcon } from "./assets/svg/pencil";
+import Checkbox from "../checkBoxes/checkbox/index2";
+import avatar from "./assets/images/avatar.png";
+import PreviewModal from "./modals/preview-modal";
+import AssigneesPanel from "./preview-panels/assignees-panel";
 
 const AdminRolesAndPermission = () => {
   const navigate = useNavigate();
-
+  const [deleteModal, setDeleteModal] = useState(false);
+  const [deleteAssigneeModal, setDeleteAssigneeModal] = useState(false);
+  const [assigneePanel, setAssigneePanel] = useState(false);
+  const handleChange = (newValue) => {
+    setChecked(newValue);
+  };
   return (
     <AdminRolesAndPermissionContainer>
       <div className="arp_header">
@@ -16,7 +29,7 @@ const AdminRolesAndPermission = () => {
         </p>
       </div>
 
-      <div className="arp_main">
+      {/* <div className="arp_main">
         <div className="arp_img">
           <img src={photo} alt="" />
         </div>
@@ -36,7 +49,115 @@ const AdminRolesAndPermission = () => {
             e.preventDefault();
           }}
         />
+      </div> */}
+
+      <div className="rll_main_body">
+        <div className="rll_main_header">
+          <SearchBar
+            placeholder="Search here"
+            outlineColor="transparent"
+            heightSize="44px"
+            widthSize="100%"
+            border="1px solid #ADB2B2"
+            // onSubmit={setSearch}
+          />
+
+          <ButtonComponent
+            text={"Create New Role"}
+            styles={{ width: "200px", padding: 10, height: 43 }}
+            onClick={(e) => {
+              e.preventDefault();
+            }}
+          />
+        </div>
+
+        <div className="rll_role_section">
+          <div className="rll_sl_header">
+            <div className="rll_sl_one">
+              {" "}
+              <Checkbox
+                label=""
+                color="#ff9900"
+                defaultValue={false}
+                onChange={handleChange}
+                className="adm_check"
+              />
+              Role
+            </div>
+            <div className="rll_no_created">No of Permissions</div>
+            <div className="rll_sl_two">Assignees</div>
+            <div className="rll_sl_three">Action</div>
+          </div>
+
+          <div className="rll_sl_body">
+            {categoryList?.map((item, idx) => (
+              <div className="rll_sl_tr" key={idx} onClick={() => navigate("")}>
+                <div className="rll_content_title">
+                  <div className="rll_img">
+                    <Checkbox
+                      label=""
+                      color="#ff9900"
+                      defaultValue={item.selection}
+                      onChange={handleChange}
+                      className="adm_check"
+                    />
+                  </div>
+                  {item?.name}
+                </div>
+
+                <div className="rll_nc_users"> {item?.permissions}</div>
+
+                <div className="rll_nc_assign">
+                  <div className="rll_img_group">
+                    <div className="rll_img">
+                      <img src={avatar} alt="" />
+                    </div>
+                    <div className="rll_img">
+                      <img src={avatar} alt="" />
+                    </div>
+                    <div className="rll_img">
+                      <img src={avatar} alt="" />
+                    </div>
+                  </div>
+                  <span> +24 Others</span>
+                </div>
+
+                <div className="rll_action">
+                  <span className="">
+                    <MdDeleteOutline
+                      color="#F95454"
+                      onClick={() => setDeleteModal(true)}
+                    />
+                  </span>
+                  <span className="">
+                    <PencilIcon />
+                    Edit
+                  </span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
       </div>
+
+      <PreviewModal
+        isOpen={deleteModal}
+        onRequestClose={() => setDeleteModal(false)}
+        title={"Are you sure you want to delete “Manager” Role?"}
+        subTitle={"Deleting this role means there..."}
+      />
+      <PreviewModal
+        isOpen={deleteAssigneeModal}
+        onRequestClose={() => setDeleteAssigneeModal(false)}
+        title={"Are you sure you want to remove Saul Hayes?"}
+        subTitle={<span>Admin will no longer have access to <br /> their account.</span>}
+        secondaryButtonText={"No"}
+        primaryButtonText={"Yes, Remove"}
+      />
+
+      {assigneePanel && (
+        <AssigneesPanel close={() => setAssigneePanel(false)} />
+      )}
     </AdminRolesAndPermissionContainer>
   );
 };

package/src/components/AdminRolesPermission/index.styled.js

@@ -73,4 +73,196 @@ export const AdminRolesAndPermissionContainer = styled.div`
       letter-spacing: 0.32px;
     }
   }
+
+  .rll_main_header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+  }
+
+  .rll_role_section {
+    .rll_sl_header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px 10px;
+      border-radius: 10px 10px 0px 0px;
+      border: 1px solid #b0dcdc;
+      background: rgba(58, 194, 194, 0.1);
+      color: #747682;
+      font-size: 16px;
+      font-weight: 600;
+
+      .rll_sl_one {
+        width: 30%;
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        .adm_check > span {
+          border-radius: 8px;
+        }
+
+        span {
+          display: flex;
+          align-items: center;
+        }
+      }
+
+      .rll_no_created {
+        width: 20%;
+        position: relative;
+
+        &::before {
+          content: "";
+          height: 22px;
+          width: 2px;
+          border-radius: 10px;
+          position: absolute;
+          top: 0%;
+          left: -12px;
+          display: block;
+          background: #d9d9d9;
+          transform: translate(-50%);
+        }
+      }
+
+      .rll_sl_two {
+        width: 22%;
+        position: relative;
+
+        &::before {
+          content: "";
+          height: 22px;
+          width: 2px;
+          border-radius: 10px;
+          position: absolute;
+          top: 0%;
+          left: -12px;
+          display: block;
+          background: #d9d9d9;
+          transform: translate(-50%);
+        }
+      }
+      .rll_sl_three {
+        width: 20%;
+        position: relative;
+
+        &::before {
+          content: "";
+          height: 22px;
+          width: 2px;
+          border-radius: 10px;
+          position: absolute;
+          top: 0%;
+          left: -12px;
+          display: block;
+          background: #d9d9d9;
+          transform: translate(-50%);
+        }
+      }
+    }
+
+    .rll_sl_body {
+      .rll_sl_tr {
+        display: flex;
+        padding: 12px 10px;
+        border-bottom: 1px solid #d2c8c8;
+        justify-content: space-between;
+        align-items: center;
+
+        .rll_content_title {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+          color: #03091d;
+          font-size: 16px;
+          font-weight: 600;
+          width: 30%;
+
+          .rll_img {
+            width: 25px;
+            display: flex;
+            align-items: center;
+            margin-right: 8px;
+            .adm_check > span {
+              border-radius: 8px;
+            }
+          }
+        }
+
+        .rll_nc_users {
+          width: 20%;
+          color: #313333;
+          font-size: 16px;
+          font-weight: 400;
+        }
+        .rll_nc_assign {
+          width: 22%;
+          color: #00c2c2;
+          font-size: 16px;
+          font-weight: 600;
+          display: flex;
+          align-items: center;
+          gap: 15px;
+
+          span {
+            cursor: pointer;
+          }
+
+          .rll_img_group {
+            position: relative;
+            display: flex;
+            align-items: center;
+            max-width: 90px;
+            width: 100%;
+            cursor: pointer;
+
+            .rll_img {
+              width: 38px;
+              height: 38px;
+              border-radius: 100%;
+              border: 1px solid #c6cccc;
+              background: #c6cccc;
+
+              &:nth-child(2) {
+                position: absolute;
+                left: 26px;
+              }
+              &:nth-child(3) {
+                position: absolute;
+                left: 53px;
+              }
+              img {
+                width: 100%;
+                border-radius: 100%;
+              }
+            }
+          }
+        }
+
+        .rll_action {
+          width: 20%;
+          color: #00c2c2;
+          font-size: 16px;
+          font-weight: 600;
+          display: flex;
+          gap: 50px;
+          svg {
+            width: 24px;
+            height: 24px;
+          }
+          span {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            cursor: pointer;
+
+          }
+        }
+      }
+    }
+  }
 `;

package/src/components/AdminRolesPermission/modals/index.styled.js

@@ -0,0 +1,126 @@
+import styled from "styled-components";
+
+export const CancelModalContainer = styled.div`
+  .success_modal {
+    > div > div > div > div > div > div {
+      background-color: red;
+    }
+  }
+`;
+
+export const ModalCardContainer = styled.div`
+  /* padding: 25px; */
+  font-family: "Nunito";
+  width: 100%;
+  max-width: 720px;
+`;
+
+export const SuccessModal = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 34.504px;
+  border: 1px solid var(--Neutral-20, #dfe5e5);
+  background: var(--white, #fff);
+  gap: 40px;
+  padding: 30px;
+  text-align: center;
+  width: 458.463px;
+  height: 509.982px;
+  h2 {
+    color: var(--Neutral-90, #313333);
+    text-align: center;
+    font-family: Nunito;
+    font-size: 22px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 130%; /* 28.6px */
+    letter-spacing: 0.44px;
+  }
+`;
+
+export const CloseModalButton = styled.div`
+  background-color: rgba(255, 255, 255, 1);
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  font-family: "Nunito";
+  border-radius: 50%;
+  margin-bottom: 8px;
+  margin-left: auto;
+  cursor: pointer;
+`;
+
+export const CardContainer = styled.div`
+  background-color: rgba(255, 255, 255, 1);
+  padding: 25px;
+  font-family: "Nunito";
+  width: 100%;
+  max-width: 700px;
+  border-radius: 30px;
+`;
+
+
+export const CardBody = styled.div`
+  width: 100%;
+  /* display: flex; */
+  margin: 20px auto 10px;
+  text-align: center;
+
+  .ssm_img {
+    max-width: 112px;
+    width: 100%;
+    margin: 0 auto 40px;
+    img {
+      width: 100%;
+    }
+  }
+  .ssm_img_opt {
+    max-width: 69px;
+    width: 100%;
+    margin: 0 auto 25px;
+    img {
+      width: 100%;
+    }
+  }
+
+  .ssm_txt {
+    color: #313333;
+    text-align: center;
+    font-size: 22px;
+    font-style: normal;
+    font-weight: 700;
+    letter-spacing: 0.44px;
+  }
+  .ssm_txt_opt {
+    color: #313333;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    letter-spacing: 0.36px;
+  }
+
+  .ssm_sub_txt {
+    color: #4a4d4d;
+    text-align: center;
+    font-size: 16px;
+    font-weight: 400;
+    letter-spacing: 0.32px;
+    margin-top: 12px;
+  }
+
+  .btn__footer {
+    display: flex;
+    margin-top: 40px;
+    justify-content: center;
+
+    button {
+      width: 195px;
+      margin: 0 20px;
+    }
+  }
+`;

package/src/components/AdminRolesPermission/modals/preview-modal.jsx

@@ -0,0 +1,89 @@
+import React, { useState } from "react";
+import {
+  CardContainer,
+  CardBody,
+  ModalCardContainer,
+  CloseModalButton,
+} from "./index.styled";
+import { IoMdClose } from "react-icons/io";
+import Modal from "react-modal";
+import ButtonComponent from "../../button";
+import img from "../assets/images/shield_big.png";
+
+const PreviewModal = (props) => {
+  const modalCustomStyles = {
+    overlay: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+      zIndex: 9999999999,
+      transition: "opacity 2000ms ease-in-out",
+    },
+    content: {
+      position: "absolute",
+      overflow: "auto",
+      WebkitOverflowScrolling: "scroll",
+      outline: "none",
+      top: "50%",
+      left: "50%",
+      right: "auto",
+      bottom: "auto",
+      marginRight: "-50%",
+      transform: "translate(-50%, -50%)",
+      borderRadius: "30px",
+      border: "none",
+      zIndex: 333333333,
+      background: "transparent",
+      width: "422px",
+    },
+  };
+
+  return (
+    <Modal
+      isOpen={props.isOpen}
+      onRequestClose={props.onRequestClose}
+      style={modalCustomStyles}
+      closeTimeoutMS={0}
+      ariaHideApp={false}
+      contentLabel="Selected Option"
+    >
+      <ModalCardContainer>
+        <CloseModalButton onClick={props.onRequestClose}>
+          <IoMdClose />
+        </CloseModalButton>
+        <CardContainer>
+          <CardBody>
+            <div className="ssm_img_opt">
+              <img src={img} alt="" />
+            </div>
+            <p className="ssm_txt_opt">{props.title}</p>
+            <p className="ssm_sub_txt">{props.subTitle}</p>
+            <div className="btn__footer">
+              <ButtonComponent
+                text={props.secondaryButtonText || "No, Cancel"}
+                type="secondary"
+                styles={{ width: "150px", margin: 0, padding: 10, height: 40 }}
+                onClick={props.onRequestClose}
+              />
+              <ButtonComponent
+                text={props.primaryButtonText || "Yes, Add"}
+                styles={{
+                  width: "150px",
+                  marginLeft: 12,
+                  padding: 10,
+                  height: 40,
+                }}
+                onClick={props.nextOpen}
+              />
+            </div>
+          </CardBody>
+        </CardContainer>
+      </ModalCardContainer>
+    </Modal>
+  );
+};
+
+export default PreviewModal;

package/src/components/AdminRolesPermission/preview-panels/admins-panel.jsx

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import { PreviewPanelContainer } from "./index.styled";
+import { CloseIcon } from "../assets/svg/close";
+import { adminPanelList } from "../create/data";
+import { CloseRedIcon } from "../assets/svg/close-red";
+
+const PreviewAdminsPanel = ({ close }) => {
+  return (
+    <PreviewPanelContainer>
+      <div className="adp_main_content">
+        <div className="adp_header">
+          <p className="adp_header_title"> Admins</p>
+
+          <span className="close_icon" onClick={close}>
+            <CloseIcon />
+          </span>
+        </div>
+        <p className="adp_subtitle">
+          Add admins to this role and have them access specific <br />
+          permissions.
+        </p>
+
+        <div className="adp_body">
+        {adminPanelList?.map((item, idx) => (
+          <div className="adp_list_row" key={idx}>
+            <div className="adp_wrapper">
+              <div className="adp_img">
+                <img src={item?.image} alt="" />
+              </div>
+
+              <div>
+                <p className="adp_title">{item?.name}</p>
+                <p className="adp_stat">
+                    <span> </span>
+                  {item?.status}
+                </p>
+              </div>
+            </div>
+            <span className="close_icon" onClick={close}>
+            <CloseRedIcon />
+          </span>
+          </div>
+        ))}
+      </div>
+      </div>
+    </PreviewPanelContainer>
+  );
+};
+
+export default PreviewAdminsPanel;

package/src/components/AdminRolesPermission/preview-panels/assignees-panel.jsx

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import { PreviewPanelContainer } from "./index.styled";
+import { CloseIcon } from "../assets/svg/close";
+import {  assigneeList } from "../create/data";
+import { CloseRedIcon } from "../assets/svg/close-red";
+import SearchBar from "../../searchBar";
+
+const AssigneesPanel = ({ close }) => {
+  return (
+    <PreviewPanelContainer>
+      <div className="asp_main_content">
+        <div className="asp_header">
+          <p className="asp_header_title"> Assignees </p>
+
+          <span className="close_icon" onClick={close}>
+            <CloseIcon fill={"#323232"} />
+          </span>
+        </div>
+
+        <div className="asp_body">
+          <SearchBar
+            placeholder="Search here"
+            outlineColor="transparent"
+            heightSize="44px"
+            widthSize="100%"
+            border="1px solid #ADB2B2"
+            // onSubmit={setSearch}
+          />
+
+          <div className="asp_inner">
+            {assigneeList?.map((item, idx) => (
+              <div className="asp_list_row" key={idx}>
+                <div className="asp_wrapper">
+                  <div className="asp_img">
+                    <img src={item?.image} alt="" />
+                  </div>
+
+                  <div>
+                    <p className="asp_title">{item?.name}</p>
+                    <p className="asp_stat">
+                      {item?.email}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="asp_assigned">
+                    <p className="ass_txt"> Assigned on:</p>
+                    <p className="ass_subtxt"> {item?.date} </p>
+                </div>
+                <span className="close_icon" onClick={close}>
+                  <CloseRedIcon />
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </PreviewPanelContainer>
+  );
+};
+
+export default AssigneesPanel;