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

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