push initioal

.env

@@ -1,8 +1,8 @@
 NODE_ENV="development"
 
-NEXT_PUBLIC_SERVER_URL=http://192.168.88.12:32769
+NEXT_PUBLIC_SERVER_URL=http://192.168.156.123:32769
-NEXT_PUBLIC_PUBLIC_URL=http://192.168.88.12:32769
+NEXT_PUBLIC_PUBLIC_URL=http://192.168.156.123:32769
-NEXT_PUBLIC_API_URL=http://192.168.88.12:32769/api
+NEXT_PUBLIC_API_URL=http://192.168.156.123:32769/api
 # SECURE_LOCAL_STORAGE_HASH_KEY=f1da2b2c7a4c446934267fea631102ec389b5b99
 # NEXT_PUBLIC_API_URL_IMAGE=https://192.168.88.12:49154/Files/ReportImages
 # NEXT_PUBLIC_API_URL_BackUp=https://192.168.88.12:49154/Files/BackUps

components/EmployeesComponent/Roles/page.jsx

@@ -7,6 +7,12 @@ const RolesEmployees = () => {
   const CTX = useContext(AppContext);
   const rolesData = CTX.state.rolesData;
 
+  const goToEditRole = (id) => {
+    CTX.setGoToEditRole(true);
+    CTX.setBottomSheetCreateRoleOpen(true);
+    CTX.setIdEditRole(id);
+  };
+
   return (
     <>
       {rolesData && rolesData.length > 0 ? (
@@ -18,7 +24,10 @@ const RolesEmployees = () => {
                   {e.persianName}
                 </p>
               </div>
-              <div className="w-[30px] h-[30px] bg-secondaryLighter-100 rounded-full">
+              <div
+                className="w-[30px] h-[30px] bg-secondaryLighter-100 rounded-full"
+                onClick={() => goToEditRole(e.id)}
+              >
                 <svg
                   width="13"
                   height="13"

components/EmployeesComponent/Users/page.jsx

@@ -1,66 +1,79 @@
-import React from "react";
+"use client";
+
+import AppContext from "@ctx/AppContext";
+import React, { useContext } from "react";
+import Avatar from "boring-avatars";
 
 const UsersEmployees = () => {
-  const data = [];
+  const CTX = useContext(AppContext);
+  const usersData = CTX.state.usersData;
+
   return (
     <>
-      {data.length > 0 ? (
+      {usersData.length > 0 ? (
         <>
-          {data.map((e) => (
+          {usersData.map((e) => (
             <div className="mt-5">
               <div className="flex mt-5 ">
-                <div className="w-[90px] h-[70px] bg-green-200 rounded-full sahdow-sm z-20 "></div>
+                <div className=" rounded-full sahdow-sm z-10 ">
+                  <Avatar
+                    size={70}
+                    name={e.firstName}
+                    variant="beam"
+                    colors={["#9d9f88", "#83af96", "#b2de93"]}
+                  />
+                </div>
                 <div className="bg-white rounded-l-full p-2 flex justify-between w-full h-fit pr-5 mt-2 relative left-[12px]">
                   <div>
                     <h4 className="text-sm  font-bold text-primary-300">
-                      نگین اسلامیپور{" "}
+                      {e.firstName}{" "}
                     </h4>
                     <p className="mb-0 text-[11px]">صندوق دار</p>
                   </div>
-                  <div className="flex mt-1">
+                  <div className="flex ">
-                    <div className="mx-2 ">
+                    <div
+                      className="w-[35px] h-[35px] bg-secondaryLighter-100 rounded-full"
+                      onClick={() => goToEditRole(e.id)}
+                    >
                       <svg
-                        width="20"
+                        width="13"
-                        height="20"
+                        height="13"
                         viewBox="0 0 18 18"
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg"
-                        className="mt-1"
+                        className="mx-auto mt-[8px]"
                       >
-                        <g clip-path="url(#clip0_72_940)">
+                        <g clip-path="url(#clip0_72_994)">
                           <path
-                            d="M11.4653 2.364L10.77 3.05925L4.37926 9.44925C3.94651 9.88275 3.72976 10.0995 3.54376 10.338C3.32409 10.6195 3.13573 10.924 2.98201 11.2463C2.85226 11.5193 2.75551 11.8103 2.56201 12.3908L1.74151 14.8515L1.54051 15.453C1.4935 15.5932 1.48652 15.7438 1.52037 15.8877C1.55422 16.0317 1.62755 16.1633 1.73212 16.2679C1.83669 16.3725 1.96835 16.4458 2.1123 16.4796C2.25626 16.5135 2.4068 16.5065 2.54701 16.4595L3.14851 16.2585L5.60926 15.438C6.19051 15.2445 6.48076 15.1478 6.75376 15.018C7.07626 14.8643 7.38076 14.676 7.66201 14.4563C7.90051 14.2703 8.11726 14.0535 8.55001 13.6208L14.9408 7.23L15.636 6.53475C16.1891 5.98168 16.4998 5.23155 16.4998 4.44938C16.4998 3.66721 16.1891 2.91708 15.636 2.364C15.0829 1.81093 14.3328 1.50021 13.5506 1.50021C12.7685 1.50021 12.0183 1.81093 11.4653 2.364Z"
+                            d="M11.4653 2.36397L10.77 3.05922L4.37926 9.44922C3.94651 9.88272 3.72976 10.0995 3.54376 10.338C3.32409 10.6194 3.13573 10.924 2.98201 11.2462C2.85226 11.5192 2.75551 11.8102 2.56201 12.3907L1.74151 14.8515L1.54051 15.453C1.4935 15.5932 1.48652 15.7437 1.52037 15.8877C1.55422 16.0316 1.62755 16.1633 1.73212 16.2679C1.83669 16.3724 1.96835 16.4458 2.1123 16.4796C2.25626 16.5135 2.4068 16.5065 2.54701 16.4595L3.14851 16.2585L5.60926 15.438C6.19051 15.2445 6.48076 15.1477 6.75376 15.018C7.07626 14.8642 7.38076 14.676 7.66201 14.4562C7.90051 14.2702 8.11726 14.0535 8.55001 13.6207L14.9408 7.22997L15.636 6.53472C16.1891 5.98165 16.4998 5.23152 16.4998 4.44935C16.4998 3.66718 16.1891 2.91705 15.636 2.36397C15.0829 1.8109 14.3328 1.50018 13.5506 1.50018C12.7685 1.50018 12.0183 1.8109 11.4653 2.36397Z"
-                            stroke="#2B91EF"
+                            stroke="#DA4215"
                             stroke-width="1.5"
                           />
                           <path
-                            opacity="0.5"
+                            d="M11.4653 2.36397L10.77 3.05922L4.37926 9.44922C3.94651 9.88272 3.72976 10.0995 3.54376 10.338C3.32409 10.6194 3.13573 10.924 2.98201 11.2462C2.85226 11.5192 2.75551 11.8102 2.56201 12.3907L1.74151 14.8515L1.54051 15.453C1.4935 15.5932 1.48652 15.7437 1.52037 15.8877C1.55422 16.0316 1.62755 16.1633 1.73212 16.2679C1.83669 16.3724 1.96835 16.4458 2.1123 16.4796C2.25626 16.5135 2.4068 16.5065 2.54701 16.4595L3.14851 16.2585L5.60926 15.438C6.19051 15.2445 6.48076 15.1477 6.75376 15.018C7.07626 14.8642 7.38076 14.676 7.66201 14.4562C7.90051 14.2702 8.11726 14.0535 8.55001 13.6207L14.9408 7.22997L15.636 6.53472C16.1891 5.98165 16.4998 5.23152 16.4998 4.44935C16.4998 3.66718 16.1891 2.91705 15.636 2.36397C15.0829 1.8109 14.3328 1.50018 13.5506 1.50018C12.7685 1.50018 12.0183 1.8109 11.4653 2.36397Z"
-                            d="M10.77 3.0585C10.77 3.0585 10.857 4.536 12.1605 5.8395C13.464 7.143 14.9408 7.22925 14.9408 7.22925M3.14852 16.2585L1.74152 14.85"
+                            stroke="#D03405"
-                            stroke="#2B91EF"
+                            stroke-width="1.5"
+                          />
+                          <g opacity="0.5">
+                            <path
+                              d="M10.77 3.05847C10.77 3.05847 10.857 4.53597 12.1605 5.83947C13.464 7.14297 14.9408 7.22922 14.9408 7.22922M3.14852 16.2585L1.74152 14.85"
+                              stroke="#DA4215"
+                              stroke-width="1.5"
+                            />
+                            <path
+                              d="M10.77 3.05847C10.77 3.05847 10.857 4.53597 12.1605 5.83947C13.464 7.14297 14.9408 7.22922 14.9408 7.22922M3.14852 16.2585L1.74152 14.85"
+                              stroke="#D03405"
                               stroke-width="1.5"
                             />
                           </g>
+                        </g>
                         <defs>
-                          <clipPath id="clip0_72_940">
+                          <clipPath id="clip0_72_994">
                             <rect width="18" height="18" fill="white" />
                           </clipPath>
                         </defs>
                       </svg>
                     </div>
-                    <div>
-                      <svg
-                        width="33"
-                        height="33"
-                        viewBox="0 0 27 27"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M14.9783 13.3875L18.9551 9.40951C19.0626 9.30573 19.1483 9.18159 19.2072 9.04434C19.2662 8.90709 19.2972 8.75946 19.2985 8.61009C19.2998 8.46071 19.2714 8.31257 19.2148 8.17431C19.1582 8.03605 19.0747 7.91045 18.9691 7.80482C18.8635 7.69919 18.7378 7.61565 18.5996 7.55909C18.4613 7.50252 18.3132 7.47406 18.1638 7.47535C18.0144 7.47665 17.8668 7.50769 17.7296 7.56665C17.5923 7.62561 17.4682 7.71131 17.3644 7.81876L13.3864 11.7956L9.40951 7.81876C9.30573 7.71131 9.18159 7.62561 9.04434 7.56665C8.90709 7.50769 8.75946 7.47665 8.61009 7.47535C8.46071 7.47406 8.31257 7.50252 8.17431 7.55909C8.03605 7.61565 7.91045 7.69919 7.80482 7.80482C7.69919 7.91045 7.61565 8.03605 7.55909 8.17431C7.50252 8.31257 7.47406 8.46071 7.47535 8.61009C7.47665 8.75946 7.50769 8.90709 7.56665 9.04434C7.62561 9.18159 7.71131 9.30573 7.81876 9.40951L11.7956 13.3864L7.81876 17.3644C7.71131 17.4682 7.62561 17.5923 7.56665 17.7296C7.50769 17.8668 7.47665 18.0144 7.47535 18.1638C7.47406 18.3132 7.50252 18.4613 7.55909 18.5996C7.61565 18.7378 7.69919 18.8635 7.80482 18.9691C7.91045 19.0747 8.03605 19.1582 8.17431 19.2148C8.31257 19.2714 8.46071 19.2998 8.61009 19.2985C8.75946 19.2972 8.90709 19.2662 9.04434 19.2072C9.18159 19.1483 9.30573 19.0626 9.40951 18.9551L13.3864 14.9783L17.3644 18.9551C17.4682 19.0626 17.5923 19.1483 17.7296 19.2072C17.8668 19.2662 18.0144 19.2972 18.1638 19.2985C18.3132 19.2998 18.4613 19.2714 18.5996 19.2148C18.7378 19.1582 18.8635 19.0747 18.9691 18.9691C19.0747 18.8635 19.1582 18.7378 19.2148 18.5996C19.2714 18.4613 19.2998 18.3132 19.2985 18.1638C19.2972 18.0144 19.2662 17.8668 19.2072 17.7296C19.1483 17.5923 19.0626 17.4682 18.9551 17.3644L14.9783 13.3875Z"
-                          fill="#FF2C2C"
-                        />
-                      </svg>
-                    </div>
                   </div>
                 </div>
               </div>

components/LoginComponents/LoginStep.jsx

@@ -12,7 +12,6 @@ const LoginStep = (props) => {
   const [alertRolCheckBox, setAlertRolCheckBox] = useState(false);
   const CTX = useContext(AppContext);
   const phoneNumber = CTX.state.phoneNumber;
-  // console.log(alertRolCheckBox);
 
   const handleConfirmPhoneNumber = () => {
     setAlertRolCheckBox(false);

components/LoginComponents/SignUp.jsx

@@ -72,8 +72,6 @@ const SignUp = (props) => {
     }
   };
 
-  console.log(body);
-
   return (
     <div className="px-5 mt-6">
       <p className="mb-0 text-textMain-100 mt-1 text-right text-sm ">

components/NavBar/NavBAr.jsx

@@ -11,8 +11,6 @@ const NavBAr = (props) => {
   const usePath = usePathname();
   const CTX = useContext(AppContext);
 
-  console.log("vvvvv", CTX.state.BigPlusOpen);
-
   const openBigPlus = () => {
     setTimeout(() => {
       CTX.setBigPlusRotateIcon(true);

package.json

@@ -10,9 +10,12 @@
   },
   "dependencies": {
     "@hassanmojab/react-modern-calendar-datepicker": "^3.1.7",
+    "@uidotdev/usehooks": "^2.4.0",
     "autoprefixer": "10.4.15",
     "axios": "^1.5.1",
+    "boring-avatars": "^1.10.1",
     "framer-motion": "^10.16.1",
+    "jalali-moment": "^3.3.11",
     "next": "13.4.19",
     "postcss": "8.4.28",
     "react": "18.2.0",

plugins/BottomSheet/BottomSheetCreateEmployees.jsx

@@ -8,6 +8,8 @@ import SimpleReactValidator from "simple-react-validator";
 import { toast } from "react-toastify";
 import Buttonbriz from "plugins/Buttonbriz/page";
 import DatePickerIran from "plugins/DatePickerIran/page";
+import moment from "jalali-moment";
+const jalaliMoment = require("jalali-moment");
 
 const BottomSheetCreateEmployees = (props) => {
   const CTX = useContext(AppContext);
@@ -16,7 +18,9 @@ const BottomSheetCreateEmployees = (props) => {
   const [phoneNumber, setPhoneNumber] = useState("");
   const [nationalId, setNationalId] = useState("");
   const [gender, setGender] = useState(0);
-  const [roleSelectData, setRoleSelectData] = useState("");
+  const [birthDate, setBirthDate] = useState(null);
+  const [roleSelectCurrntData, setRoleSelectCurrntData] = useState("");
+  const [roleSelectData, setRoleSelectData] = useState([]);
   const [, forceUpdate] = useState();
 
   const validator = useRef(
@@ -40,8 +44,15 @@ const BottomSheetCreateEmployees = (props) => {
     phoneNumber,
     firstName,
     lastName,
-    // birthDate,
+    birthDate:
-    gender,
+      birthDate &&
+      moment
+        .utc(
+          [birthDate.year, birthDate.month, birthDate.day],
+          "jYYYY-jMM-jDDTHH"
+        )
+        .unix(),
+    gender: parseInt(gender),
     nationalId,
     roleIds: rolesChoose,
   };
@@ -75,6 +86,13 @@ const BottomSheetCreateEmployees = (props) => {
         if (e.type == "OPEN") {
           CTX.GetRoles();
         }
+
+        setRoleSelectData(
+          rolesData.map((item) => ({
+            key: item.persianName,
+            value: item.id,
+          }))
+        );
       }}
       open={CTX.state.BottomSheetCreateEmployeesOpen}
       onDismiss={() => CTX.setBottomSheetCreateEmployeesOpen(false)}
@@ -146,13 +164,16 @@ const BottomSheetCreateEmployees = (props) => {
             )}
             select={true}
             selectData={[
-              { key: "مرد", value: "0" },
+              { key: "مرد", value: 0 },
-              { key: "زن", value: "1" },
+              { key: "زن", value: 1 },
             ]}
           />
         </div>
 
-        <DatePickerIran />
+        <DatePickerIran
+          datePickerEvent={(e) => setBirthDate(e)}
+          date={birthDate}
+        />
 
         <div className="">
           <Input
@@ -195,10 +216,9 @@ const BottomSheetCreateEmployees = (props) => {
             id="roleIds-id"
             name="roleIds"
             type={"text"}
-            value={roleSelectData}
+            value={roleSelectCurrntData}
             inputEvent={(e) => {
-              setRoleSelectData(e.target.value);
+              setRoleSelectCurrntData(e.target.value);
-              console.log("s11515", e.target.value);
 
               if (!!rolesChoose.find((b) => b == e.target.value)) {
                 toast.error("نقش تکراری است", {
@@ -216,7 +236,7 @@ const BottomSheetCreateEmployees = (props) => {
               "required"
             )}
             select={true}
-            selectData={CTX.state.rolesData}
+            selectData={roleSelectData}
           />
         </div>
 
@@ -247,5 +267,5 @@ const BottomSheetCreateEmployees = (props) => {
     </BottomSheet>
   );
 };
-y:\projects\macsonline\Dockerfile.emergency
+
 export default BottomSheetCreateEmployees;

plugins/BottomSheet/BottomSheetCreateRole.jsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useContext, useRef, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import { BottomSheet } from "react-spring-bottom-sheet";
 import Input from "plugins/Input/page";
 import AppContext from "@ctx/AppContext";
@@ -18,6 +18,9 @@ const BottomSheetCreateRole = (props) => {
 
   const permissionsData = CTX.state.permissions;
   const permissionsChoose = CTX.state.permissionsChoose;
+  const goToEditRole = CTX.state.goToEditRole;
+  const idEditRole = CTX.state.idEditRole;
+  const roleData = CTX.state.roleData;
 
   const validator = useRef(
     new SimpleReactValidator({
@@ -40,10 +43,28 @@ const BottomSheetCreateRole = (props) => {
     description,
     permissions: permissionsChoose,
   };
+  const bodyUpdate = {
+    persianName,
+    englishName,
+    description,
+    permissions: permissionsChoose,
+    roleId: roleData.roleId,
+  };
 
-  const handleCreateRole = () => {
+  const clear = () => {
+    setPersianName("");
+    setEnglishName("");
+    setDescription("");
+    CTX.setPermissionsChoose([]);
+  };
+
+  const handleCreateRole = (update) => {
     if (validator.current.allValid()) {
+      if (update == "UPDATE") {
+        CTX.UpdateRole(bodyUpdate);
+      } else {
         CTX.CreateRole(body);
+      }
     } else {
       toast.error("پرکردن همه ی فیلد ها واجب است", {
         position: "bottom-right",
@@ -60,13 +81,32 @@ const BottomSheetCreateRole = (props) => {
     }
   };
 
-  return (
+  const handleBottomSheetCreateRole = (e) => {
-    <BottomSheet
-      onSpringStart={(e) => {
     if (e.type == "OPEN") {
       CTX.GetPermissions();
+      if (goToEditRole) {
+        CTX.GetRole(idEditRole);
       }
-      }}
+    } else if (e.type == "CLOSE") {
+      clear();
+      CTX.setGoToEditRole(false);
+      CTX.setIdEditRole(null);
+      CTX.setRoleData([]);
+    }
+  };
+
+  useEffect(() => {
+    if (goToEditRole) {
+      setPersianName(roleData.persianName);
+      setEnglishName(roleData.englishName);
+      setDescription(roleData.description);
+      CTX.setPermissionsChoose(roleData.permissions);
+    }
+  }, [roleData]);
+
+  return (
+    <BottomSheet
+      onSpringStart={(e) => handleBottomSheetCreateRole(e)}
       open={CTX.state.BottomSheetCreateRoleOpen}
       onDismiss={() => CTX.setBottomSheetCreateRoleOpen(false)}
     >
@@ -151,12 +191,24 @@ const BottomSheetCreateRole = (props) => {
             ))}
         </div>
 
+        {goToEditRole ? (
+          <Buttonbriz
+            title="ویرایش نقش"
+            color="INFO"
+            icon="CHECK"
+            buttonEvent={() => handleCreateRole("UPDATE")}
+            subButton={true}
+            subButtonTitle="حذف نقش"
+            subButtonEvent={() => CTX.DeleteRole(idEditRole)}
+          />
+        ) : (
           <Buttonbriz
             title="ثبت نقش"
-          color="INFO"
+            color="PRIMARY"
             icon="CHECK"
             buttonEvent={() => handleCreateRole()}
           />
+        )}
       </div>
     </BottomSheet>
   );

plugins/Buttonbriz/page.jsx

@@ -1,6 +1,24 @@
-import React from "react";
+"use state";
 
-const Buttonbriz = ({ title, color, buttonEvent, icon }) => {
+import React, { useState } from "react";
+import { useLongPress } from "@uidotdev/usehooks";
+
+const Buttonbriz = ({
+  title,
+  color,
+  buttonEvent,
+  icon,
+  subButton,
+  subButtonTitle,
+  subButtonEvent,
+}) => {
+  const [subButtonAction, setSubButtonAction] = useState(false);
+  const attrs = useLongPress(subButtonEvent, {
+    onStart: (event) => setSubButtonAction(true),
+    onFinish: (event) => subButtonEvent,
+    onCancel: (event) => setSubButtonAction(false),
+    threshold: 1000,
+  });
   const icons = [
     {
       iconName: "PHONE",
@@ -73,9 +91,25 @@ const Buttonbriz = ({ title, color, buttonEvent, icon }) => {
         </button>
       </div>
 
-      {/* <div className=" mx-7 mt-4">
+      {subButton && (
-      <p className="mb-0 text-info-200  "> بستن </p>
+        <div
-    </div> */}
+          {...attrs}
+          className={`tr03 ${
+            subButtonAction
+              ? "delete"
+              : "w-[140px]  mr-[10px] p-[17px] mt-[5px]"
+          }`}
+        >
+          <p
+            className={`mb-0 tr03  ${
+              subButtonAction ? "text-white font-semibold" : "text-red-500"
+            } `}
+          >
+            {" "}
+            {subButtonTitle}{" "}
+          </p>
+        </div>
+      )}
     </div>
   );
 };

plugins/CheckBoxBriz/page.jsx

@@ -1,17 +1,32 @@
 "use client";
 
 import AppContext from "@ctx/AppContext";
-import React, { useContext, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 
 const page = ({ title, detail, value }) => {
   const CTX = useContext(AppContext);
+  const permissionsChoose = CTX.state.permissionsChoose;
+  const roleData = CTX.state.roleData;
 
   const [isChecked, setIsChecked] = useState(false);
 
-  const hanslePermissionsChoose = (e) => {
+  const handlePermissionsChoose = (e) => {
     setIsChecked(e.target.checked);
+    if (e.target.checked) {
       CTX.setPermissionsChoose((current) => [...current, value]);
+    } else {
+      CTX.setPermissionsChoose(permissionsChoose.filter((el) => el !== value));
+    }
   };
+
+  useEffect(() => {
+    if (!!permissionsChoose?.find((e) => e == value)) {
+      setIsChecked(true);
+      console.log("data");
+    }
+  }, [permissionsChoose]);
+
+  console.log(permissionsChoose);
   return (
     <div className="flex rtl mt-4">
       <div>
@@ -22,7 +37,7 @@ const page = ({ title, detail, value }) => {
           defaultValue={isChecked}
           name="hasSchengenRelative"
           //   onClick={checkBoxEvent}
-          onChange={(e) => hanslePermissionsChoose(e)}
+          onChange={(e) => handlePermissionsChoose(e)}
         />
       </div>
 

plugins/DatePickerIran/page.jsx

@@ -1,13 +1,17 @@
 "use client";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import "@hassanmojab/react-modern-calendar-datepicker/lib/DatePicker.css";
 import DatePicker from "@hassanmojab/react-modern-calendar-datepicker";
 import Buttonbriz from "plugins/Buttonbriz/page";
 import { Calendar } from "react-modern-calendar-datepicker";
 
-const DatePickerIran = () => {
+const DatePickerIran = ({ datePickerEvent, date }) => {
   const [selectedDay, setSelectedDay] = useState(null);
 
+  useEffect(() => {
+    setSelectedDay(date);
+  }, [date]);
+
   return (
     <div className="">
       <div className="flex justify-end z-[1000] relative top-[22px] right-3">
@@ -18,14 +22,12 @@ const DatePickerIran = () => {
 
       <DatePicker
         value={selectedDay}
-        onChange={setSelectedDay}
+        onChange={datePickerEvent}
         shouldHighlightWeekends
         inputClassName={`peer w-full border-b placeholder:text-transparent relative !text-right  ${
           2 == 1 ? "form-control-white" : "form-control"
         }`}
-        locale="fa" // add this
+        locale="fa"
-        inputPlaceholder="  "
-        inputName={1}
       />
     </div>
   );

plugins/Input/page.jsx

@@ -38,9 +38,9 @@ const Input = ({
         />
       ) : select ? (
         <select
-          className={`peer w-full border-b placeholder:text-transparent relative ${
+          className={`peer w-full border-b placeholder:text-transparent ${
             theme == 1 ? "form-control-white" : "form-control"
-          }`}
+          }  ${style ? style : ""} relative`}
           placeholder={name}
           disabled={disabled ? true : false}
           readOnly={readOnly ? true : false}
@@ -49,9 +49,7 @@ const Input = ({
           id={id}
         >
           {selectData &&
-            selectData.map((e) => (
+            selectData.map((e) => <option value={e.value}>{e.key}</option>)}
-              <option value={e.id}>{e.persianName}</option>
-            ))}
         </select>
       ) : (
         <input

pnpm-lock.yaml

@@ -8,15 +8,24 @@ dependencies:
   '@hassanmojab/react-modern-calendar-datepicker':
     specifier: ^3.1.7
     version: 3.1.7(react-dom@18.2.0)(react@18.2.0)
+  '@uidotdev/usehooks':
+    specifier: ^2.4.0
+    version: 2.4.0(react-dom@18.2.0)(react@18.2.0)
   autoprefixer:
     specifier: 10.4.15
     version: 10.4.15(postcss@8.4.28)
   axios:
     specifier: ^1.5.1
     version: 1.5.1
+  boring-avatars:
+    specifier: ^1.10.1
+    version: 1.10.1
   framer-motion:
     specifier: ^10.16.1
     version: 10.16.1(react-dom@18.2.0)(react@18.2.0)
+  jalali-moment:
+    specifier: ^3.3.11
+    version: 3.3.11
   next:
     specifier: 13.4.19
     version: 13.4.19(react-dom@18.2.0)(react@18.2.0)
@@ -303,6 +312,17 @@ packages:
     resolution: {integrity: sha512-ywJmriP+nvjBKNBEMaNZgj2irZHoxcKeYcyMLbqhYKbDVn8yCIULy2Ol/tvIb37O3IBeZj3RU4tXqQTtGwoAMg==}
     dev: false
 
+  /@uidotdev/usehooks@2.4.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-NrpTsZUGsawYxFbEXrd8+FPpfziC4M01GSQgYWOnGa84UiavqVCzCL5bSRe6rfQc4QsHS2rGAA0h63ya/j+p6A==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@webassemblyjs/ast@1.11.6:
     resolution: {integrity: sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==}
     dependencies:
@@ -474,6 +494,25 @@ packages:
       uri-js: 4.4.1
     dev: true
 
+  /ansi-escapes@4.3.2:
+    resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      type-fest: 0.21.3
+    dev: false
+
+  /ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+    dev: false
+
+  /ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+    dependencies:
+      color-convert: 2.0.1
+    dev: false
+
   /any-promise@1.3.0:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
     dev: false
@@ -531,15 +570,31 @@ packages:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
     dev: false
 
+  /base64-js@1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+    dev: false
+
   /binary-extensions@2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
     dev: false
 
+  /bl@4.1.0:
+    resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
+    dependencies:
+      buffer: 5.7.1
+      inherits: 2.0.4
+      readable-stream: 3.6.2
+    dev: false
+
   /body-scroll-lock@3.1.5:
     resolution: {integrity: sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==}
     dev: false
 
+  /boring-avatars@1.10.1:
+    resolution: {integrity: sha512-WcgHDeLrazCR03CDPEvCchLsUecZAZvs4F6FnMiGlTEjyQQf15Q5TRl4EUaAQ1dacvhPq7lC9EOTWkCojQ6few==}
+    dev: false
+
   /brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
     dependencies:
@@ -568,6 +623,13 @@ packages:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
     dev: true
 
+  /buffer@5.7.1:
+    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+    dev: false
+
   /busboy@1.6.0:
     resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
     engines: {node: '>=10.16.0'}
@@ -583,6 +645,18 @@ packages:
   /caniuse-lite@1.0.30001523:
     resolution: {integrity: sha512-I5q5cisATTPZ1mc588Z//pj/Ox80ERYDfR71YnvY7raS/NOk8xXlZcB0sF7JdqaV//kOaa6aus7lRfpdnt1eBA==}
 
+  /chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+    dev: false
+
+  /chardet@0.7.0:
+    resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
+    dev: false
+
   /chokidar@3.5.3:
     resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
     engines: {node: '>= 8.10.0'}
@@ -607,15 +681,48 @@ packages:
     resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==}
     dev: false
 
+  /cli-cursor@3.1.0:
+    resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
+    engines: {node: '>=8'}
+    dependencies:
+      restore-cursor: 3.1.0
+    dev: false
+
+  /cli-spinners@2.9.1:
+    resolution: {integrity: sha512-jHgecW0pxkonBJdrKsqxgRX9AcG+u/5k0Q7WPDfi8AogLAdwxEkyYYNWwZ5GvVFoFx2uiY1eNcSK00fh+1+FyQ==}
+    engines: {node: '>=6'}
+    dev: false
+
+  /cli-width@3.0.0:
+    resolution: {integrity: sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==}
+    engines: {node: '>= 10'}
+    dev: false
+
   /client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
     dev: false
 
+  /clone@1.0.4:
+    resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
+    engines: {node: '>=0.8'}
+    dev: false
+
   /clsx@1.2.1:
     resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
     engines: {node: '>=6'}
     dev: false
 
+  /color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+    dependencies:
+      color-name: 1.1.4
+    dev: false
+
+  /color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+    dev: false
+
   /combined-stream@1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
@@ -632,6 +739,11 @@ packages:
     engines: {node: '>= 6'}
     dev: false
 
+  /commander@7.2.0:
+    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
+    engines: {node: '>= 10'}
+    dev: false
+
   /component-classes@1.2.6:
     resolution: {integrity: sha512-hPFGULxdwugu1QWW3SvVOCUHLzO34+a2J6Wqy0c5ASQkfi9/8nZcBB0ZohaEbXOQlCflMAEMmEWk7u7BVs4koA==}
     dependencies:
@@ -688,6 +800,12 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  /defaults@1.0.4:
+    resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==}
+    dependencies:
+      clone: 1.0.4
+    dev: false
+
   /delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
@@ -708,6 +826,10 @@ packages:
   /electron-to-chromium@1.4.503:
     resolution: {integrity: sha512-LF2IQit4B0VrUHFeQkWhZm97KuJSGF2WJqq1InpY+ECpFRkXd8yTIaTtJxsO0OKDmiBYwWqcrNaXOurn2T2wiA==}
 
+  /emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+    dev: false
+
   /enhanced-resolve@5.15.0:
     resolution: {integrity: sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==}
     engines: {node: '>=10.13.0'}
@@ -724,6 +846,11 @@ packages:
     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
     engines: {node: '>=6'}
 
+  /escape-string-regexp@1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
+    dev: false
+
   /eslint-scope@5.1.1:
     resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
     engines: {node: '>=8.0.0'}
@@ -754,6 +881,15 @@ packages:
     engines: {node: '>=0.8.x'}
     dev: true
 
+  /external-editor@3.1.0:
+    resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==}
+    engines: {node: '>=4'}
+    dependencies:
+      chardet: 0.7.0
+      iconv-lite: 0.4.24
+      tmp: 0.0.33
+    dev: false
+
   /fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
     dev: true
@@ -779,6 +915,13 @@ packages:
       reusify: 1.0.4
     dev: false
 
+  /figures@3.2.0:
+    resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
+    engines: {node: '>=8'}
+    dependencies:
+      escape-string-regexp: 1.0.5
+    dev: false
+
   /fill-range@7.0.1:
     resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
     engines: {node: '>=8'}
@@ -883,7 +1026,6 @@ packages:
   /has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
-    dev: true
 
   /has@1.0.3:
     resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
@@ -892,6 +1034,13 @@ packages:
       function-bind: 1.1.1
     dev: false
 
+  /iconv-lite@0.4.24:
+    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      safer-buffer: 2.1.2
+    dev: false
+
   /icss-utils@5.1.0(postcss@8.4.28):
     resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
     engines: {node: ^10 || ^12 || >= 14}
@@ -901,6 +1050,10 @@ packages:
       postcss: 8.4.28
     dev: true
 
+  /ieee754@1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+    dev: false
+
   /inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     dependencies:
@@ -912,6 +1065,27 @@ packages:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
     dev: false
 
+  /inquirer@8.2.6:
+    resolution: {integrity: sha512-M1WuAmb7pn9zdFRtQYk26ZBoY043Sse0wVDdk4Bppr+JOXyQYybdtvK+l9wUibhtjdjvtoiNy8tk+EgsYIUqKg==}
+    engines: {node: '>=12.0.0'}
+    dependencies:
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      cli-cursor: 3.1.0
+      cli-width: 3.0.0
+      external-editor: 3.1.0
+      figures: 3.2.0
+      lodash: 4.17.21
+      mute-stream: 0.0.8
+      ora: 5.4.1
+      run-async: 2.4.1
+      rxjs: 7.8.1
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      through: 2.3.8
+      wrap-ansi: 6.2.0
+    dev: false
+
   /is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
@@ -930,6 +1104,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+    dev: false
+
   /is-glob@4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
@@ -937,11 +1116,21 @@ packages:
       is-extglob: 2.1.1
     dev: false
 
+  /is-interactive@1.0.0:
+    resolution: {integrity: sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==}
+    engines: {node: '>=8'}
+    dev: false
+
   /is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
     dev: false
 
+  /is-unicode-supported@0.1.0:
+    resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==}
+    engines: {node: '>=10'}
+    dev: false
+
   /jalaali-js@0.2.0:
     resolution: {integrity: sha512-NnJVmUbesh1v3GXZsjPd18sGvxKaNmHQ7svwULNvYBSVQKdsEatUmXiUQZd7HzU10Ur2eX/83ZT5rEzc746dJw==}
     dev: false
@@ -950,6 +1139,15 @@ packages:
     resolution: {integrity: sha512-io974va+Qyu+UfuVX3UIAgJlxLhAMx9Y8VMfh+IG00Js7hXQo1qNQuwSiSa0xxco0SVgx5HWNkaiCcV+aZ8WPw==}
     dev: false
 
+  /jalali-moment@3.3.11:
+    resolution: {integrity: sha512-tdSaRs9cjWjOIaWhcsGFZMhZQhfgok5J0TwqFpBIZPudZxxa6yjUPoLCOwuvbAtRpiZn7k/mvazAJh+vEN5suw==}
+    hasBin: true
+    dependencies:
+      commander: 7.2.0
+      inquirer: 8.2.6
+      moment: 2.29.4
+    dev: false
+
   /jest-worker@27.5.1:
     resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
     engines: {node: '>= 10.13.0'}
@@ -990,6 +1188,18 @@ packages:
     engines: {node: '>=6.11.5'}
     dev: true
 
+  /lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+    dev: false
+
+  /log-symbols@4.1.0:
+    resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
+    engines: {node: '>=10'}
+    dependencies:
+      chalk: 4.1.2
+      is-unicode-supported: 0.1.0
+    dev: false
+
   /loose-envify@1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
@@ -1031,6 +1241,11 @@ packages:
     dependencies:
       mime-db: 1.52.0
 
+  /mimic-fn@2.1.0:
+    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
+    engines: {node: '>=6'}
+    dev: false
+
   /minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
     dependencies:
@@ -1048,6 +1263,10 @@ packages:
     resolution: {integrity: sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==}
     dev: false
 
+  /mute-stream@0.0.8:
+    resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
+    dev: false
+
   /mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
     dependencies:
@@ -1134,6 +1353,33 @@ packages:
       wrappy: 1.0.2
     dev: false
 
+  /onetime@5.1.2:
+    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
+    engines: {node: '>=6'}
+    dependencies:
+      mimic-fn: 2.1.0
+    dev: false
+
+  /ora@5.4.1:
+    resolution: {integrity: sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      bl: 4.1.0
+      chalk: 4.1.2
+      cli-cursor: 3.1.0
+      cli-spinners: 2.9.1
+      is-interactive: 1.0.0
+      is-unicode-supported: 0.1.0
+      log-symbols: 4.1.0
+      strip-ansi: 6.0.1
+      wcwidth: 1.0.1
+    dev: false
+
+  /os-tmpdir@1.0.2:
+    resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /path-is-absolute@1.0.1:
     resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
     engines: {node: '>=0.10.0'}
@@ -1493,6 +1739,15 @@ packages:
       pify: 2.3.0
     dev: false
 
+  /readable-stream@3.6.2:
+    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
+    engines: {node: '>= 6'}
+    dependencies:
+      inherits: 2.0.4
+      string_decoder: 1.3.0
+      util-deprecate: 1.0.2
+    dev: false
+
   /readdirp@3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
@@ -1517,20 +1772,42 @@ packages:
       supports-preserve-symlinks-flag: 1.0.0
     dev: false
 
+  /restore-cursor@3.1.0:
+    resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
+    engines: {node: '>=8'}
+    dependencies:
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+    dev: false
+
   /reusify@1.0.4:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
     dev: false
 
+  /run-async@2.4.1:
+    resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
+    engines: {node: '>=0.12.0'}
+    dev: false
+
   /run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
     dependencies:
       queue-microtask: 1.2.3
     dev: false
 
+  /rxjs@7.8.1:
+    resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==}
+    dependencies:
+      tslib: 2.6.2
+    dev: false
+
   /safe-buffer@5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
-    dev: true
+
+  /safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+    dev: false
 
   /scheduler@0.23.0:
     resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
@@ -1565,6 +1842,10 @@ packages:
     resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==}
     dev: false
 
+  /signal-exit@3.0.7:
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+    dev: false
+
   /simple-react-validator@1.6.2:
     resolution: {integrity: sha512-49KhaVh7wXTANXKuvLtRebK1RKTBi3Cu/7jf8ssBdL+9ShZOfW74nkPWK+AFj4NApSYpYozMQ27ZybE630SNVA==}
     dev: false
@@ -1590,6 +1871,28 @@ packages:
     engines: {node: '>=10.0.0'}
     dev: false
 
+  /string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+    dev: false
+
+  /string_decoder@1.3.0:
+    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+    dependencies:
+      safe-buffer: 5.2.1
+    dev: false
+
+  /strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+    dependencies:
+      ansi-regex: 5.0.1
+    dev: false
+
   /styled-jsx@5.1.1(react@18.2.0):
     resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
     engines: {node: '>= 12.0.0'}
@@ -1621,6 +1924,13 @@ packages:
       ts-interface-checker: 0.1.13
     dev: false
 
+  /supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+    dependencies:
+      has-flag: 4.0.0
+    dev: false
+
   /supports-color@8.1.1:
     resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
     engines: {node: '>=10'}
@@ -1730,6 +2040,17 @@ packages:
       any-promise: 1.3.0
     dev: false
 
+  /through@2.3.8:
+    resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
+    dev: false
+
+  /tmp@0.0.33:
+    resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
+    engines: {node: '>=0.6.0'}
+    dependencies:
+      os-tmpdir: 1.0.2
+    dev: false
+
   /to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -1745,6 +2066,11 @@ packages:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
     dev: false
 
+  /type-fest@0.21.3:
+    resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
+    engines: {node: '>=10'}
+    dev: false
+
   /undici-types@5.25.3:
     resolution: {integrity: sha512-Ga1jfYwRn7+cP9v8auvEXN1rX3sWqlayd4HP7OKk4mZWylEmu3KzXDUGrQUN6Ol7qo1gPvB2e5gX6udnyEPgdA==}
     dev: true
@@ -1810,6 +2136,12 @@ packages:
       glob-to-regexp: 0.4.1
       graceful-fs: 4.2.11
 
+  /wcwidth@1.0.1:
+    resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
+    dependencies:
+      defaults: 1.0.4
+    dev: false
+
   /webpack-sources@3.2.3:
     resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
     engines: {node: '>=10.13.0'}
@@ -1855,6 +2187,15 @@ packages:
       - uglify-js
     dev: true
 
+  /wrap-ansi@6.2.0:
+    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
+    engines: {node: '>=8'}
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+    dev: false
+
   /wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
     dev: false

src/app/employees/page.jsx

@@ -14,10 +14,10 @@ import React, { useContext, useEffect } from "react";
 
 const Employees = (props) => {
   const CTX = useContext(AppContext);
-  console.log("BottomSheetCreateRoleOpen", CTX.state.BottomSheetCreateRoleOpen);
 
   useEffect(() => {
     CTX.GetRoles();
+    CTX.GetUsers();
   }, []);
 
   return (

src/app/home/page.jsx

@@ -17,9 +17,7 @@ const Home = (props) => {
 
   useEffect(() => {
     if (!!localStorage.token) {
-      console.log("inga");
       const datatoken = ParseJwt(getToken());
-      console.log(datatoken);
       CTX.setComplexId(datatoken.ComplexId);
 
       if (datatoken.SignUpStatus == 1) {
@@ -27,7 +25,6 @@ const Home = (props) => {
         router.push(`/login?phoneNumber=${datatoken.unique_name}`);
       }
     } else {
-      console.log("inja1111111111111111");
       router.push("/login");
     }
   }, []);

src/app/layout.jsx

@@ -55,6 +55,9 @@ export default function RootLayout({ children }) {
   const [permissions, setPermissions] = useState(0);
   const [permissionsChoose, setPermissionsChoose] = useState([]);
   const [rolesData, setRolesData] = useState([]);
+  const [roleData, setRoleData] = useState([]);
+  const [goToEditRole, setGoToEditRole] = useState(false);
+  const [idEditRole, setIdEditRole] = useState(null);
 
   // createUser/ user
   const [usersData, setUsersData] = useState([]);
@@ -204,6 +207,34 @@ export default function RootLayout({ children }) {
       setLoading(false);
     }
   };
+  const UpdateRole = async (body) => {
+    setLoading(true);
+    try {
+      const data = await Chapar.put(
+        `${process.env.NEXT_PUBLIC_API_URL}/role`,
+        body,
+
+        {
+          headers: {
+            Authorization: getToken(),
+          },
+        }
+      );
+      toast.success(`نقش ویرایش شد`, {
+        position: "bottom-right",
+        closeOnClick: true,
+      });
+      setBottomSheetCreateRoleOpen(false);
+      setLoading(false);
+      GetRoles();
+    } catch ({ error, status }) {
+      toast.error(`${error.response.data.message}`, {
+        position: "bottom-right",
+        closeOnClick: true,
+      });
+      setLoading(false);
+    }
+  };
   const GetRoles = async () => {
     setLoading(true);
     try {
@@ -216,6 +247,7 @@ export default function RootLayout({ children }) {
           },
         }
       );
+      console.log("GetRoles", data);
 
       setRolesData(data);
       setLoading(false);
@@ -227,6 +259,54 @@ export default function RootLayout({ children }) {
       setLoading(false);
     }
   };
+  const GetRole = async (id) => {
+    setLoading(true);
+    try {
+      const data = await Chapar.get(
+        `${process.env.NEXT_PUBLIC_API_URL}/role/${id}?page=0`,
+
+        {
+          headers: {
+            Authorization: getToken(),
+          },
+        }
+      );
+      console.log("GetRole  ", data);
+
+      setRoleData(data);
+      setLoading(false);
+    } catch ({ error, status }) {
+      toast.error(`${error.response.data.message}`, {
+        position: "bottom-right",
+        closeOnClick: true,
+      });
+      setLoading(false);
+    }
+  };
+  const DeleteRole = async (id) => {
+    setLoading(true);
+    try {
+      const data = await Chapar.delete(
+        `${process.env.NEXT_PUBLIC_API_URL}/role/${id}`,
+
+        {
+          headers: {
+            Authorization: getToken(),
+          },
+        }
+      );
+      setBottomSheetCreateRoleOpen(false);
+      setLoading(false);
+
+      GetRoles();
+    } catch ({ error, status }) {
+      toast.error(`${error.response.data.message}`, {
+        position: "bottom-right",
+        closeOnClick: true,
+      });
+      setLoading(false);
+    }
+  };
   const CreateUser = async (body) => {
     setLoading(true);
     try {
@@ -259,7 +339,7 @@ export default function RootLayout({ children }) {
     setLoading(true);
     try {
       const data = await Chapar.get(
-        `${process.env.NEXT_PUBLIC_API_URL}/role?page=0`,
+        `${process.env.NEXT_PUBLIC_API_URL}/user?page=0`,
 
         {
           headers: {
@@ -268,6 +348,7 @@ export default function RootLayout({ children }) {
         }
       );
 
+      console.log("GetUsers", data);
       setUsersData(data);
       setLoading(false);
     } catch ({ error, status }) {
@@ -303,6 +384,9 @@ export default function RootLayout({ children }) {
           rolesData,
           usersData,
           rolesChoose,
+          goToEditRole,
+          roleData,
+          idEditRole,
         },
         setBottomSheetCreateRoleOpen,
         setBottomSheetCreateEmployeesOpen,
@@ -328,6 +412,12 @@ export default function RootLayout({ children }) {
         GetUsers,
         setUsersData,
         setRolesChoose,
+        setGoToEditRole,
+        setRoleData,
+        GetRole,
+        setIdEditRole,
+        DeleteRole,
+        UpdateRole,
       }}
     >
       <html lang="en">

style/globals.css

@@ -161,3 +161,46 @@ body {
   top: -100px !important;
   z-index: 100000;
 }
+
+.delete {
+  --border-size: 3px;
+  --border-angle: 0turn;
+  width: 140px;
+  height: fit-content;
+  padding: 17px;
+  margin-right: 10px;
+  background-image: conic-gradient(
+      from var(--border-angle),
+      transparent,
+      transparent 50%,
+      transparent
+    ),
+    conic-gradient(
+      from var(--border-angle),
+      transparent 1%,
+      rgb(179, 4, 4),
+      rgb(133, 2, 2),
+      rgb(204, 0, 0)
+    );
+  background-size: calc(100% - (var(--border-size) * 6))
+      calc(100% - (var(--border-size) * 2)),
+    cover;
+  background-position: center center;
+  background-repeat: no-repeat;
+  animation: bg-spin 1s linear infinite;
+  border-radius: 15px;
+  margin-top: 5px;
+}
+@keyframes bg-spin {
+  to {
+    --border-angle: 1turn;
+  }
+}
+.box:hover {
+  animation-play-state: paused;
+}
+@property --border-angle {
+  syntax: "<angle>";
+  inherits: true;
+  initial-value: 0turn;
+}