Replace jalaali-react-date-picker with custom MUI-based Jalali date picker - fixes all 10 security vulnerabilities

components/dashboard/userAccount/detailUser/information/form/DateBirthday.js

@@ -1,70 +1,30 @@
 import CalendarEdit from "@/components/icons/CalendarEdit";
 import { convertToJalali } from "@/helper";
-import { Button, Popover } from "@mui/material";
-import { DatePicker } from "jalaali-react-date-picker";
-import { useState } from "react";
+import { Button } from "@mui/material";
+import JalaliDatePicker from "@/components/common/JalaliDatePicker";
 
 function DateBirthday({ data, changeData, error }) {
-  const [anchorEl, setAnchorEl] = useState(null);
-
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  const open = Boolean(anchorEl);
-  const id = open ? "simple-popover" : undefined;
-
   return (
     <div className="w-full">
-      <div
-        className={`relative w-full border cursor-pointer py-[15px] px-[16px] border-solid 
-          rounded-[8px] h-[48px]
-          ${error ? "border-[#ff0000]" : "border-[#D7D7D7]"} 
-          `}
-        onClick={handleClick}
-      >
-        <p className="text-[#7E7E7E] text-[14px] font-normal cursor-pointer">
-          {data}
-        </p>
-        <Button className="!absolute !left-[8px] !top-1/2 !-translate-y-1/2 !min-w-fit !p-1">
-          <CalendarEdit />
-        </Button>
-      </div>
-      <Popover
-        id={id}
-        open={open}
-        anchorEl={anchorEl}
-        onClose={handleClose}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "right",
-        }}
-        transformOrigin={{
-          vertical: "top",
-          horizontal: "right",
-        }}
-        sx={{
-          "& .MuiPaper-root": {
-            padding: "12px",
-            background: "#FAFAFA !important",
-            borderRadius: "16px",
-            border: "1px solid #E9ECEF",
-            boxShadow: "0px 2px 28.4px 0px rgba(112, 112, 112, 0.28)",
-          },
-        }}
-      >
-        <DatePicker
-          locale="fa"
+      <div className="relative">
+        <JalaliDatePicker
+          value={data}
+          placeholder="تاریخ تولد"
+          error={error}
           onChange={(e) => {
             changeData(convertToJalali(e._d), "birthday");
-            handleClose();
+          }}
+          textFieldProps={{
+            InputProps: {
+              endAdornment: (
+                <Button className="!min-w-fit !p-1">
+                  <CalendarEdit />
+                </Button>
+              ),
+            },
           }}
         />
-      </Popover>
+      </div>
     </div>
   );
 }