check responsive & page dashboard user account & turns & transactions & comments

app/booking/[slug]/page.js

@@ -7,12 +7,12 @@ import doctors from '@/data/doctors.json';
 import Date from '@/components/booking/date';
 import BookingPage from '@/components/booking';
 import RegisterPage from '@/components/register';
-import SetCodePage from '@/components/register/SetCodePage';
 import Paying from '@/components/booking/paying';
+import Detail from '@/components/booking/detail';
+import FailedPay from '@/components/booking/failedPay';
 import LogInPage from '@/components/register/LogInPage';
 import SuccessPay from '@/components/booking/successPay';
-import FailedPay from '@/components/booking/failedPay';
-import Detail from '@/components/booking/detail';
+import SetCodePage from '@/components/register/SetCodePage';
 
 function Booking({ params: { slug } }) {
 

app/component/CustomTable.js

@@ -0,0 +1,32 @@
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material'
+
+function CustomTable({ tableHead, centerTable, children }) {
+    return (
+        <TableContainer className='!shadow-none !rounded-[8px] !border !border-solid !border-[#DBDBDB]'>
+            <Table className='!rounded-[8px] !overflow-hidden'>
+                <TableHead>
+                    <TableRow
+                        className='!bg-[#EFEFEF]'
+                    >
+                        {tableHead.map((item, idx) => (
+                            <TableCell
+                                key={idx}
+                                className={`
+                                !text-[#616161] !text-[14px] !font-normal !py-[10px] !px-[18px]
+                                ${centerTable.find(i => i === idx) ? '!text-center' : '!text-start'}
+                            `}
+                            >
+                                {item}
+                            </TableCell>
+                        ))}
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {children}
+                </TableBody>
+            </Table>
+        </TableContainer>
+    )
+}
+
+export default CustomTable

app/component/EditField.js

@@ -0,0 +1,47 @@
+import EditGrayA from "@/components/icons/EditGrayA"
+import EditOrangeA from "@/components/icons/EditOrangeA"
+import { Button, TextField } from "@mui/material"
+
+function EditField({ changeData, data, name, iconGray }) {
+    return (
+        <div className="relative w-full">
+            <TextField
+                value={data?.value}
+                disabled={!data?.isEdit}
+                type='text'
+                className="!bg-[#FFF] !w-full res-field-account"
+                onChange={e => {
+                    changeData(e.target.value, 'value', name)
+                }}
+                sx={{
+                    '& .MuiFormLabel-root': {
+                        top: '-4px !important'
+                    },
+                    '& .MuiInputBase-input': { padding: '12.5px 14px' },
+                    '& .MuiInputBase-root': { borderRadius: '6px !important' },
+                    '& .MuiOutlinedInput-notchedOutline': { border: '1px solid #D7D7D7 !important' },
+                    ".Mui-focused": {
+                        '& .MuiOutlinedInput-notchedOutline': {
+                            border: '1px solid #5559CE !important',
+                            transition: '0.5s all'
+                        }
+                    }
+                }}
+            />
+            <Button
+                className="!absolute !left-[8px] !top-1/2 !-translate-y-1/2 !min-w-fit !p-1"
+                onClick={() => {
+                    changeData(!data.isEdit, 'isEdit', name)
+                }}
+            >
+                {iconGray ? (
+                    <EditGrayA />
+                ) : (
+                    <EditOrangeA />
+                )}
+            </Button>
+        </div>
+    )
+}
+
+export default EditField

app/component/Tabs.js

@@ -7,7 +7,7 @@ function a11yProps(index) {
     };
 };
 
-function Tabs({ value, handleChange, listTab, isSm }) {
+function Tabs({ value, handleChange, listTab, isSm, style }) {
     return (
         <Box
             className="!border-none"
@@ -16,24 +16,10 @@ function Tabs({ value, handleChange, listTab, isSm }) {
                 value={value}
                 onChange={handleChange}
                 sx={{
+                    ...style,
                     '.MuiTabs-fixed': {
                         overflow: 'auto !important'
                     },
-                    '.MuiTabs-indicator': {
-                        height: isSm ? '4px' : '2px',
-                        borderRadius: isSm ? '8px' : '10px',
-                        background: '#F17732'
-                    },
-                    '& .MuiTabs-flexContainer': {
-                        borderBottom: isSm ? '2px solid #EFEFEF' : '',
-                        marginBottom: isSm ? '1px' : ''
-                    },
-                    '& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected': {
-                        color: '#F17732 !important'
-                    },
-                    '& .MuiButtonBase-root.Mui-selected': {
-                        color: '#F17732 !important'
-                    }
                 }}
             >
                 {listTab.map((item, idx) => (

app/component/date/dateTime/index.js

@@ -20,6 +20,23 @@ function DateTime({ doctor, setStep, setIsError, locateVisit }) {
     <div className="w-full">
       <Tabs
         isSm={true}
+        style={{
+          '.MuiTabs-indicator': {
+            height: '4px',
+            borderRadius: '8px',
+            background: '#F17732'
+          },
+          '& .MuiTabs-flexContainer': {
+            borderBottom: '2px solid #EFEFEF',
+            marginBottom: '1px'
+          },
+          '& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected': {
+            color: '#F17732 !important'
+          },
+          '& .MuiButtonBase-root.Mui-selected': {
+            color: '#F17732 !important'
+          }
+        }}
         value={value}
         listTab={listTab}
         handleChange={handleChange}

app/component/element/AutoCompleteSelect.js

@@ -27,7 +27,17 @@ function AutoCompleteSelect({ list, isError, updateData, name, label }) {
                 },
                 '& .MuiOutlinedInput-notchedOutline': {
                     border: isError ? '1px solid red' : ''
+                },
+                '& .MuiOutlinedInput-notchedOutline': {
+                    border: '1px solid #D7D7D7'
+                },
+                '& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline': {
+                    borderColor: "#D7D7D7 !important"
+                },
+                '& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                    border: '1px solid #5559CE !important'
                 }
+
             }}
             renderInput={params =>
                 <TextField

app/dashboard/page.js

@@ -1,18 +0,0 @@
-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/dashboard/user-account/page.js

@@ -0,0 +1,13 @@
+import userData from '@/data/userData.json';
+import DashboardPage from "@/components/dashboard";
+import UserAccountPage from "@/components/dashboard/userAccount/UserAccount";
+
+function UserAccount() {
+    return (
+        <DashboardPage user={userData.data} >
+            <UserAccountPage user={userData.data} />
+        </DashboardPage>
+    )
+}
+
+export default UserAccount

app/globals.css

@@ -171,6 +171,10 @@ html {
     background: url(../public/assets/images/banner-about.png);
 }
 
+.bg-head-dashboard {
+    background: url(../public/assets/images/bg-head-dashboard.png);
+}
+
 .bg-banner-home::after,
 .bg-banner-stroke::after {
     content: "";