clear search of date from datatable

src/components/dashboard/passenger-office/index.jsx

@@ -1,6 +1,7 @@
 import DataTableStructure from "@/core/components/DatatableStructure";
 import DashboardLayouts from "@/layouts/dashboardLayouts";
-import { Box, Typography } from "@mui/material";
+import { Box, IconButton, Typography } from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
 import { useMemo } from "react";
 // import TableToolbar from "./TableTollbar";
 import { GET_PASSENGER_OFFICE } from "@/core/data/apiRoutes";
@@ -106,27 +107,38 @@ function DashboardPassengerOfficeComponent() {
         Filter: ({ column }) => {
           const filterFnValue = column.columnDef._filterFn;
           return (
-            <LocalizationProvider dateAdapter={AdapterDateFnsJalali}>
-              <MobileDateTimePicker
-                onChange={(newValue) => {
-                  const date = new Date(newValue);
-                  const formattedDate = moment(date)
-                    .locale("en")
-                    .format("YYYY-MM-DD HH:mm");
-                  column.setFilterValue(formattedDate);
+            <Box sx={{ display: "flex", alignItems: "start" }}>
+              <LocalizationProvider dateAdapter={AdapterDateFnsJalali}>
+                <MobileDateTimePicker
+                  onChange={(newValue) => {
+                    const date = new Date(newValue);
+                    const formattedDate = moment(date)
+                      .locale("en")
+                      .format("YYYY-MM-DD HH:mm");
+                    column.setFilterValue(formattedDate);
+                  }}
+                  slotProps={{
+                    textField: {
+                      helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
+                      sx: { minWidth: "120px" },
+                      variant: "standard",
+                    },
+                  }}
+                  value={moment(column.getFilterValue())
+                    .locale("fa")
+                    .format("yyyy/mm/dd HH:mm")}
+                />
+              </LocalizationProvider>
+              <IconButton
+                size="small"
+                onClick={() => {
+                  column.setFilterValue(null);
                 }}
-                slotProps={{
-                  textField: {
-                    helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
-                    sx: { minWidth: "120px" },
-                    variant: "standard",
-                  },
-                }}
-                value={moment(column.getFilterValue())
-                  .locale("fa")
-                  .format("yyyy/mm/dd HH:mm")}
-              />
-            </LocalizationProvider>
+                color="rgba(0, 0, 0, 0.54)"
+              >
+                <ClearIcon />
+              </IconButton>
+            </Box>
           );
         },
       },