fix responsive all page & add modal doctor id & page dashboard aside

app/component/Tabs.js

@@ -26,6 +26,9 @@ function Tabs({ value, handleChange, listTab, isSm }) {
                     },
                     '& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected': {
                         color: '#F17732 !important'
+                    },
+                    '& .MuiButtonBase-root.Mui-selected': {
+                        color: '#F17732 !important'
                     }
                 }}
             >

app/component/ThemeRegistry.js

@@ -1,6 +1,8 @@
 // app/ThemeRegistry.tsx
 'use client';
 import createCache from '@emotion/cache';
+import { prefixer } from 'stylis';
+import rtlPlugin from 'stylis-plugin-rtl';
 import { useServerInsertedHTML } from 'next/navigation';
 import { CacheProvider, ThemeProvider } from '@emotion/react';
 import React from 'react';
@@ -11,7 +13,10 @@ import theme from '../theme/theme';
 export default function ThemeRegistry({
     children
 }) {
-    const options = { key: 'mui' }
+    const options = {
+        key: 'muirtl',
+        stylisPlugins: [prefixer, rtlPlugin],
+    }
     const [{ cache, flush }] = React.useState(() => {
         const cache = createCache(options);
         cache.compat = true;

app/component/date/dateTime/Hours.js

@@ -12,7 +12,7 @@ function Hours({ doctor, hour, setHour, value, nameHours }) {
                     <Button
                         onClick={() => setHour(idx)}
                         className={`
-                        !w-full !rounded-[8px] !grid !place-items-center !bg-[#EFEFEF] !py-[10px] !px-[14px]
+                        !w-full !rounded-[8px] !grid !place-items-center !bg-[#EFEFEF] !py-[10px] !px-[14px] !h-[40px] md:!h-[42px] lg:!h-[44px]
                         ${idx === hour ? '!bg-[#F79463] ' : ''}
                     `}
                     >

app/component/date/dateTime/index.js

@@ -37,7 +37,7 @@ function DateTime({ doctor }) {
         className="w-full flex justify-end"
       >
         <Button
-          className="!gap-[4px] !px-[12px] !py-[8px] !w-full !min-w-[157px]"
+          className="!gap-[4px] !px-[12px] !py-[8px] md:!py-[9px] !w-full md:!w-fit !min-w-[157px]"
           onClick={() =>
             localStorage.setItem('doctor-id', doctor?.id)
           }

app/component/element/Field.js

@@ -5,6 +5,7 @@ function Field({ title, type, isPlaceHolder }) {
     return (
         <TextField
             label={title}
+            dir="rtl"
             type={type || 'text'}
             className="!w-full !mx-auto !bg-[#FFF]"
             sx={{

app/component/openLocation/index.js

@@ -34,7 +34,8 @@ function ModalOpenLocation({ open, setOpen, handleClose, children }) {
                 className="!flex md:!hidden"
                 sx={{
                     '& .MuiPaper-root': {
-                        borderRadius: '25px 25px 0px 0px'
+                        borderRadius: '25px 25px 0px 0px !important',
+                        overflow: 'hidden'
                     }
                 }}
             >