change design and responsive & pay & detail account & success pay & faield pay & doctor id

app/component/ProgressChange.js

@@ -0,0 +1,41 @@
+import { Slider } from "@mui/material"
+import { useState } from "react"
+
+function ProgressChange({ data }) {
+
+    const [value, setValue] = useState(70)
+
+    return (
+        <li className="flex items-center justify-start gap-3 w-full">
+            <p className="text-[#525252] text-[14px] font-normal w-[118px]">{data.label}</p>
+            <Slider
+                defaultValue={value}
+                className="!w-full lg:!w-[265px] !rounded-[10px] !h-[11px]"
+                onChange={e => setValue(e.target.value)}
+                sx={{
+                    '& .MuiSlider-rail': {
+                        background: '#E8E8E8',
+                        opacity: '100'
+                    },
+                    '& .MuiSlider-track': {
+                        background: '#05BA58',
+                        border: 'none'
+                    },
+                    '& .MuiSlider-thumb': {
+                        marginRight: '-21px',
+                        background: '#EBEBEB',
+                        border: '1px solid #05BA58 !important'
+                    },
+                    '& .MuiSlider-thumb.Mui-focusVisible, .MuiSlider-thumb:hover': {
+                        boxShadow: 'none'
+                    },
+                }}
+            />
+            <p className="text-[#525252] text-[20px] font-medium w-[30px]">
+                {value}
+            </p>
+        </li>
+    )
+}
+
+export default ProgressChange

app/component/date/datePicker/index.js

@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { DatePicker as DatePickerJalali } from "jalaali-react-date-picker";
 
 function DatePicker({ date, updateDate }) {
+
     const [startDate, setStartDate] = useState(null);
     const [endDate, setEndDate] = useState(null);
 
@@ -24,19 +25,20 @@ function DatePicker({ date, updateDate }) {
     };
 
     return (
-        <div className='flex items-start gap-[40px]'>
+        <div className='flex items-start justify-evenly w-full'>
             <DatePickerJalali
                 value={startDate}
                 className='w-1/2'
                 timePicker={false}
                 onChange={handleStartDateChange}
             />
-            <DatePickerJalali
-                value={endDate}
-                className='w-1/2'
-                timePicker={false}
-                onChange={handleEndDateChange}
-            />
+            <div className='w-1/2 hidden md:flex lg:hidden xl:flex'>
+                <DatePickerJalali
+                    value={endDate}
+                    timePicker={false}
+                    onChange={handleEndDateChange}
+                />
+            </div>
         </div>
     );
 }

app/component/date/dateTime/Hours.js

@@ -3,7 +3,7 @@ import { Button } from "@mui/material";
 function Hours({ doctor, hour, setHour, value, nameHours }) {
     return (
         <ul
-            className="grid grid-cols-6 gap-x-[16px] gap-y-[24px] mt-[24px] mb-[40px]"
+            className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-x-[16px] gap-y-[24px] mt-[24px] mb-[40px]"
         >
             {doctor[nameHours[value]].map((item, idx) => (
                 <li

app/component/date/dateTime/index.js

@@ -32,22 +32,21 @@ function DateTime({ doctor }) {
         setHour={setHour}
         nameHours={nameHours}
       />
-      <div className="w-full flex justify-end">
-        <Link
-          href='/login-verify'
+      <Link
+        href='/login-verify'
+        className="w-full flex justify-end"
+      >
+        <Button
+          className="!gap-[4px] !px-[12px] !py-[8px] !w-full !min-w-[157px]"
+          onClick={() =>
+            localStorage.setItem('doctor-id', doctor?.id)
+          }
+          variant="contained"
         >
-          <Button
-            className="!gap-[4px] !px-[12px] !py-[8px] !min-w-[157px]"
-            onClick={() =>
-              localStorage.setItem('doctor-id', doctor?.id)
-            }
-            variant="contained"
-          >
-            <p className="text-[#EFEFEF] text-[16px] font-medium">تایید نوبت</p>
-            <ArrowLeftB />
-          </Button>
-        </Link>
-      </div>
+          <p className="text-[#EFEFEF] text-[16px] font-medium">تایید نوبت</p>
+          <ArrowLeftB />
+        </Button>
+      </Link>
     </div>
   )
 }