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

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>
   )
 }