l-min-components 1.0.601 → 1.0.607

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.601",
+  "version": "1.0.607",
   "type": "module",
   "files": [
     "src/assets",

package/src/components/AdminRolesPermission/assets/svg/backArrow.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+export const BackArrowIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="25"
+      viewBox="0 0 24 25"
+      fill="none"
+    >
+      <g clipPath="url(#clip0_3085_48537)">
+        <path
+          d="M20 11.5H7.83L13.42 5.91L12 4.5L4 12.5L12 20.5L13.41 19.09L7.83 13.5H20V11.5Z"
+          fill="#323232"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_3085_48537">
+          <rect
+            width="24"
+            height="24"
+            fill="white"
+            transform="translate(0 0.5)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/src/components/AdminRolesPermission/assets/svg/close-red.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+export const CloseRedIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M12 22.0012C9.34711 22.0036 6.80218 20.9508 4.9263 19.0749C3.05042 17.199 1.99762 14.6541 2 12.0012V11.8012C2.08179 7.79339 4.5478 4.22132 8.26637 2.72423C11.9849 1.22713 16.2381 2.09406 19.074 4.92717C21.9365 7.78725 22.7932 12.0905 21.2443 15.8288C19.6955 19.5671 16.0465 22.0035 12 22.0012ZM12 13.4112L14.59 16.0012L16 14.5912L13.41 12.0012L16 9.41117L14.59 8.00117L12 10.5912L9.41001 8.00117L8.00001 9.41117L10.59 12.0012L8.00001 14.5912L9.41001 16.0012L12 13.4122V13.4112Z"
+        fill="#F95454"
+      />
+    </svg>
+  );
+};

package/src/components/AdminRolesPermission/assets/svg/close.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+export const CloseIcon = ({ width, height, fill }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="35"
+    height="35"
+    viewBox="0 0 35 35"
+    fill="none"
+  >
+    <path
+      d="M13.4736 13.2578L21.9589 21.7431"
+      stroke={fill || "#7C8080"}
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M13.4727 21.7431L21.958 13.2578"
+      stroke={fill || "#7C8080"}
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);

package/src/components/AdminRolesPermission/assets/svg/englishFlag.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+export const EnglishFlag = ({ width, height, fill }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="21"
+    height="15"
+    viewBox="0 0 21 15"
+    fill="none"
+  >
+    <g clip-path="url(#clip0_7519_334)">
+      <rect width="21" height="15" rx="7.5" fill="white" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M0 0H9V7H0V0Z"
+        fill="#1A47B8"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M9 0V1H21V0H9ZM9 2V3H21V2H9ZM9 4V5H21V4H9ZM9 6V7H21V6H9ZM0 8V9H21V8H0ZM0 10V11H21V10H0ZM0 12V13H21V12H0ZM0 14V15H21V14H0Z"
+        fill="#F93939"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M1 1V2H2V1H1ZM3 1V2H4V1H3ZM5 1V2H6V1H5ZM7 1V2H8V1H7ZM6 2V3H7V2H6ZM4 2V3H5V2H4ZM2 2V3H3V2H2ZM1 3V4H2V3H1ZM3 3V4H4V3H3ZM5 3V4H6V3H5ZM7 3V4H8V3H7ZM1 5V6H2V5H1ZM3 5V6H4V5H3ZM5 5V6H6V5H5ZM7 5V6H8V5H7ZM6 4V5H7V4H6ZM4 4V5H5V4H4ZM2 4V5H3V4H2Z"
+        fill="white"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_7519_334">
+        <rect width="21" height="15" rx="7.5" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);

package/src/components/AdminRolesPermission/assets/svg/frenchFlag.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+export const FrenchFlag = ({ width, height, fill }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="21"
+    height="15"
+    viewBox="0 0 21 15"
+    fill="none"
+  >
+    <rect width="21" height="15" rx="7.5" fill="#F93939" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M0 0H7V15H0V0Z"
+      fill="#249F58"
+    />
+    <path
+      d="M7 10C8.65685 10 10 8.65685 10 7C10 5.34315 8.65685 4 7 4C5.34315 4 4 5.34315 4 7C4 8.65685 5.34315 10 7 10Z"
+      fill="#FFDA2C"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M9 8V5H5V8C5 8.552 5.895 9 7 9C8.105 9 9 8.552 9 8Z"
+      fill="#F93939"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6 6H8V8H6V6Z"
+      fill="white"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6 6H7V7H6V6ZM7 7H8V8H7V7Z"
+      fill="#1A47B8"
+    />
+  </svg>
+);

package/src/components/AdminRolesPermission/assets/svg/germanFlag.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+export const GermanFlag = ({ width, height, fill }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="21"
+    height="15"
+    viewBox="0 0 21 15"
+    fill="none"
+  >
+    <g clip-path="url(#clip0_7519_37087)">
+      <rect width="21" height="15" rx="7.5" fill="#F93939" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M0 10H21V15H0V10Z"
+        fill="#FFDA2C"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M0 0H21V5H0V0Z"
+        fill="#151515"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_7519_37087">
+        <rect width="21" height="15" rx="7.5" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);

package/src/components/AdminRolesPermission/assets/svg/list.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+export const ListIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="69"
+      height="68"
+      viewBox="0 0 69 68"
+      fill="none"
+    >
+      <g clip-path="url(#clip0_5982_218419)">
+        <path
+          d="M11.833 29.75C9.48134 29.75 7.58301 31.6483 7.58301 34C7.58301 36.3517 9.48134 38.25 11.833 38.25C14.1847 38.25 16.083 36.3517 16.083 34C16.083 31.6483 14.1847 29.75 11.833 29.75ZM11.833 12.75C9.48134 12.75 7.58301 14.6483 7.58301 17C7.58301 19.3517 9.48134 21.25 11.833 21.25C14.1847 21.25 16.083 19.3517 16.083 17C16.083 14.6483 14.1847 12.75 11.833 12.75ZM11.833 46.75C9.48134 46.75 7.58301 48.6767 7.58301 51C7.58301 53.3233 9.50967 55.25 11.833 55.25C14.1563 55.25 16.083 53.3233 16.083 51C16.083 48.6767 14.1847 46.75 11.833 46.75ZM20.333 53.8333H59.9997V48.1667H20.333V53.8333ZM20.333 36.8333H59.9997V31.1667H20.333V36.8333ZM20.333 14.1667V19.8333H59.9997V14.1667H20.333Z"
+          fill="#C6CCCC"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_5982_218419">
+          <rect
+            width="68"
+            height="68"
+            fill="white"
+            transform="translate(0.5)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/src/components/AdminRolesPermission/assets/svg/pencil.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+export const PencilIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <g clip-path="url(#clip0_5982_214096)">
+        <path
+          d="M14.06 9.02L14.98 9.94L5.92 19H5V18.08L14.06 9.02ZM17.66 3C17.41 3 17.15 3.1 16.96 3.29L15.13 5.12L18.88 8.87L20.71 7.04C21.1 6.65 21.1 6.02 20.71 5.63L18.37 3.29C18.17 3.09 17.92 3 17.66 3ZM14.06 6.19L3 17.25V21H6.75L17.81 9.94L14.06 6.19Z"
+          fill="#00C2C2"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_5982_214096">
+          <rect width="24" height="24" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/src/components/AdminRolesPermission/assets/svg/portugalFlag.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+export const PortugalFlag = ({ width, height, fill }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="21"
+    height="15"
+    viewBox="0 0 21 15"
+    fill="none"
+  >
+    <rect width="21" height="15" rx="7.5" fill="#F93939" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M0 0H7V15H0V0Z"
+      fill="#249F58"
+    />
+    <path
+      d="M7 10C8.65685 10 10 8.65685 10 7C10 5.34315 8.65685 4 7 4C5.34315 4 4 5.34315 4 7C4 8.65685 5.34315 10 7 10Z"
+      fill="#FFDA2C"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M9 8V5H5V8C5 8.552 5.895 9 7 9C8.105 9 9 8.552 9 8Z"
+      fill="#F93939"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6 6H8V8H6V6Z"
+      fill="white"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6 6H7V7H6V6ZM7 7H8V8H7V7Z"
+      fill="#1A47B8"
+    />
+  </svg>
+);

package/src/components/AdminRolesPermission/create/admins.jsx

@@ -0,0 +1,125 @@
+import React, { useState } from "react";
+import { AdminsContainer } from "./index.styled";
+import ButtonComponent from "../../button";
+import { adminList } from "./data";
+import Checkbox from "../../checkBoxes/checkbox/index2";
+import avatar from "../assets/images/avatar.png";
+import { IoFilterSharp } from "react-icons/io5";
+import SearchBar from "../../searchBar";
+import PreviewUnassignedPanel from "../preview-panels/unassigned";
+import PreviewAdminsPanel from "../preview-panels/admins-panel";
+import PreviewModal from "../modals/preview-modal";
+
+const Admins = () => {
+  const [open, setOpen] = useState(false);
+  const [unassignedPanel, setUnassignedPanel] = useState(false);
+  const [adminsPanel, setAdminsPanel] = useState(false);
+  const [addModal, setAddModal] = useState(false);
+
+  const handleChange = (newValue) => {
+    setChecked(newValue);
+  };
+
+  return (
+    <AdminsContainer>
+      <div className="ad_header">
+        <p className="ad_title">Admins</p>
+        <ButtonComponent
+          text={"Save & Add"}
+          styles={{ width: "120px", padding: 10, height: 40 }}
+          onClick={(e) => {
+            e.preventDefault();
+            setAddModal(true)
+          }}
+        />
+      </div>
+
+      <div className="ad_filter_row">
+        <SearchBar
+          placeholder="Search Admins"
+          outlineColor="transparent"
+          heightSize="44px"
+          widthSize="100%"
+          border="1px solid #ADB2B2"
+          // onSubmit={setSearch}
+        />
+
+        <div className="ad_drop_filter">
+          <div className="ad_filter_box" onClick={() => setOpen(!open)}>
+            <IoFilterSharp />
+            All
+          </div>
+
+          {open && (
+            <div className="ad_filter_body">
+              <p className="afb_item"> Manager</p>
+              <p className="afb_item"> IT</p>
+              <p className="afb_item"> Security </p>
+              <p className="afb_item"> CMS </p>
+              <p className="afb_item"> Unassigned </p>
+              <p className="afb_item"> Undefined</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="ad_body">
+        {adminList?.map((item, idx) => (
+          <div className="ad_list_row" key={idx}>
+            <div className="adl_box">
+              <Checkbox
+                label=""
+                color="#ff9900"
+                defaultValue={item.selection}
+                onChange={handleChange}
+                className="adm_check"
+              />
+            </div>
+
+            <div className="adl_wrapper">
+              <div className="adl_img">
+                <img src={item?.image} alt="" />
+              </div>
+
+              <div>
+                <p className="adl_title">{item?.name}</p>
+                <span
+                  className="adl_stat"
+                  onClick={() => setUnassignedPanel(true)}
+                >
+                  {" "}
+                  {item?.status}
+                </span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {unassignedPanel && (
+        <PreviewUnassignedPanel
+          close={() => {
+            setUnassignedPanel(false);
+          }}
+        />
+      )}
+
+      {adminsPanel && (
+        <PreviewAdminsPanel
+          close={() => {
+            setAdminsPanel(false);
+          }}
+        />
+      )}
+      <PreviewModal
+        isOpen={addModal}
+        onRequestClose={() => setAddModal(false)}
+        title={"Are you sure you want to add these admins?"}
+        secondaryButtonText={"No, Cancel"}
+        primaryButtonText={"Yes, Add"}
+      />
+    </AdminsContainer>
+  );
+};
+
+export default Admins;