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

app/dashboard/page.js

@@ -0,0 +1,18 @@
+import DashboardPage from '@/components/dashboard';
+import Layout from '@/components/layout';
+import user from '@/data/userData.json';
+
+function Dashboard() {
+    return (
+        <Layout
+            user={user.data}
+            title='داشبورد'
+            name='dashboard'
+            isSidebar={true}
+        >
+            <DashboardPage />
+        </Layout>
+    )
+}
+
+export default Dashboard

app/globals.css

@@ -248,8 +248,27 @@ html {
     background: url(../public/assets/images/bg-head-menu.png);
 }
 
+.w-full-icon svg {
+    width: 100%;
+    height: 100%;
+}
+
+@media (max-width: 768px) {
+    .res-field-account .MuiInputBase-input.MuiOutlinedInput-input {
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+}
+
 /* Hidden Scroll */
 
+.MuiPaper-root {
+    box-shadow: 0px 0px 18px 0px rgba(187, 187, 187, 0.25) !important;
+    border-radius: 4px !important;
+    border: 1px solid var(--colors-gray-50, #EFEFEF) !important;
+    background: var(--colors-white, #FFF) !important;
+}
+
 .hidden-scroll::-webkit-scrollbar-thumb,
 .MuiTabs-scroller::-webkit-scrollbar-thumb {
     background: transparent;
@@ -265,6 +284,20 @@ html {
     animation-duration: 1s;
 }
 
+.retry-icon svg {
+    animation: rotate 1s;
+}
+
+@keyframes rotate {
+    from {
+        rotate: 90;
+    }
+
+    to {
+        rotate: -360deg;
+    }
+}
+
 @keyframes loadPageOpacity {
     0% {
         opacity: 0;

app/signin/page.js

@@ -6,7 +6,7 @@ import { useState } from 'react';
 
 function SignIn() {
 
-    const [isSendMsg, setIsSendMsg] = useState(false);
+    const [isSendMsg, setIsSendMsg] = useState(true);
 
     return (
         <div>