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

app/component/DatePickerContent.js

@@ -1,10 +1,10 @@
-import { DatePicker } from "jalaali-react-date-picker";
+import JalaliDatePicker from "@/components/common/JalaliDatePicker";
 
 function DatePickerContent({ type, updateDate, handleClose }) {
   return (
-    <DatePicker
-      className="!pt-[12px] !px-[12px] sm:!pt-[24px] sm:!px-[24px] !border !border-solid !border-[#EFEFEF] dark:!border-none !bg-[#FFF] !rounded-[8px] !overflow-hidden"
-      dayLabelRender={(e) => (
+    <JalaliDatePicker
+      className="!pt-[12px] !px-[12px] sm:!pt-[24px] sm:!px-[24px]"
+      dayLabelRender={() => (
         <div className="day-label-bar-inner-rtl">
           <div className="day-label-item !text-[10px] font-semibold">شنبه</div>
           <div className="day-label-item !text-[10px] font-semibold">

app/component/date/datePicker/date/FirstDatePicker.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { DatePicker } from "jalaali-react-date-picker";
+import JalaliDatePicker from "@/components/common/JalaliDatePicker";
 import { nextIconData, prevIconData } from "./dataIcon";
 import LoadingDate from "../LoadingDate";
 import Image from "next/image";
@@ -16,10 +16,9 @@ function FirstDatePicker({
 }) {
   return (
     <div className="w-full first md:w-1/2 lg:w-full xl:w-1/2 relative flex justify-center">
-      <DatePicker
+      <JalaliDatePicker
         value={startDate}
         className={`w-full ${loading ? "opacity-0" : "opacity-100"}`}
-        timePicker={false}
         nextIcon={
           <Image {...nextIconData} ref={nextIconDatePickerF} id="nextIconF" />
         }

app/component/date/datePicker/date/SecondDatePicker.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { DatePicker } from "jalaali-react-date-picker";
+import JalaliDatePicker from "@/components/common/JalaliDatePicker";
 import { nextIconData, prevIconData } from "./dataIcon";
 import LoadingDate from "../LoadingDate";
 import Image from "next/image";
@@ -16,9 +16,8 @@ function SecondDatePicker({
   return (
     <div className="w-1/2 second hidden md:flex lg:hidden xl:flex">
       <div className="w-full relative flex justify-center">
-        <DatePicker
+        <JalaliDatePicker
           value={endDate}
-          timePicker={false}
           className={`w-full ${loading ? "opacity-0" : "opacity-100"}`}
           nextIcon={
             <Image

app/layout.js

@@ -1,6 +1,5 @@
 import "./globals.css";
 import ThemeRegistry from "./component/ThemeRegistry";
-import "jalaali-react-date-picker/lib/styles/index.css";
 import { Providers } from "./Providers";
 import { GoogleAnalytics } from "@next/third-parties/google";
 import { GoogleTagManager } from "@next/third-parties/google";