Feature/user management

src/core/components/CustomDatePicker.jsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
+import { faIR } from "@mui/x-date-pickers/locales";
+import { LocalizationProvider, MobileDatePicker } from "@mui/x-date-pickers";
+import { IconButton, InputAdornment } from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+
+const CustomDatePicker = ({
+  dateValue,
+  setDateValue,
+  placeholder = "انتخاب تاریخ",
+  size = "small",
+}) => {
+  const handleDateChange = (newValue) => {
+    setDateValue(newValue);
+  };
+
+  return (
+    <LocalizationProvider
+      dateAdapter={AdapterDateFnsJalali}
+      localeText={
+        faIR.components.MuiLocalizationProvider.defaultProps.localeText
+      }
+    >
+      <MobileDatePicker
+        value={dateValue || null}
+        onChange={handleDateChange}
+        slotProps={{
+          textField: {
+            size: size,
+            placeholder: placeholder,
+            InputProps: {
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton
+                    size={size}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      setDateValue(null);
+                    }}
+                    sx={{
+                      color: "#bfbfbf",
+                      "&:hover": {
+                        backgroundColor: "rgba(189, 189, 189, 0.1)",
+                        color: "#363434",
+                      },
+                    }}
+                  >
+                    <ClearIcon />
+                  </IconButton>
+                </InputAdornment>
+              ),
+            },
+          },
+        }}
+      ></MobileDatePicker>
+    </LocalizationProvider>
+  );
+};
+export default CustomDatePicker;