change tabs dashboard & handle hour functionality code page add timer

app/component/TimePickerField.js

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers"
 
-function TimePickerField() {
+function TimePickerField({ dataChange, setData, data }) {
 
     const [value, setValue] = useState('00:00');
 
@@ -13,14 +13,26 @@ function TimePickerField() {
                     ampm={false}
                     format="hh:mm"
                     className="!w-full"
+                    shouldDisableTime={(timeValue, clockType) => {
+                        if (clockType === 'hours') {
+                            return dataChange.is_morgen ?
+                                !(16 > timeValue.$H && timeValue.$H > 5) :
+                                !(24 > timeValue.$H && timeValue.$H > 11)
+                        }
+                    }}
                     views={['hours', 'minutes']}
                     placeholder="انتخاب کنید..."
                     onChange={e => {
                         const hours = e.$H;
                         const minute = e.$m;
                         const handleTwoLength = value => String(value).length === 1 ? `0${value}` : value
+                        const newValue = `${handleTwoLength(hours)}:${handleTwoLength(minute)}`;
 
-                        setValue(`${handleTwoLength(hours)}:${handleTwoLength(minute)}`)
+                        const newData = data;
+                        const { idx, is_morning } = dataChange;
+                        newData[idx][is_morning ? 'morning_time' : 'evening_time'] = newValue
+
+                        setValue(newValue);
                     }}
                     sx={{
                         '& .MuiFormLabel-root': {