all tabs page dashboard and responsive

app/component/CustomTable.js

@@ -2,8 +2,8 @@ import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from
 
 function CustomTable({ tableHead, centerTable, children }) {
     return (
-        <TableContainer className='!shadow-none !rounded-[8px] !border !border-solid !border-[#DBDBDB]'>
-            <Table className='!rounded-[8px] !overflow-hidden'>
+        <TableContainer className='!shadow-none table-shadow-none !rounded-[8px] !border !border-solid !border-[#DBDBDB]'>
+            <Table className='!rounded-[8px] !shadow-none !overflow-hidden'>
                 <TableHead>
                     <TableRow
                         className='!bg-[#EFEFEF]'

app/component/EditField.js

@@ -2,14 +2,14 @@ import EditGrayA from "@/components/icons/EditGrayA"
 import EditOrangeA from "@/components/icons/EditOrangeA"
 import { Button, TextField } from "@mui/material"
 
-function EditField({ changeData, data, name, iconGray }) {
+function EditField({ changeData, data, name, iconGray, isTransparent }) {
     return (
         <div className="relative w-full">
             <TextField
                 value={data?.value}
                 disabled={!data?.isEdit}
                 type='text'
-                className="!bg-[#FFF] !w-full res-field-account"
+                className={`!w-full res-field-account ${isTransparent ? '!bg-transparent lg:!bg-[#FFF]' : '!bg-[#FFF]'}`}
                 onChange={e => {
                     changeData(e.target.value, 'value', name)
                 }}

app/component/Tabs.js

@@ -10,7 +10,7 @@ function a11yProps(index) {
 function Tabs({ value, handleChange, listTab, isSm, style }) {
     return (
         <Box
-            className="!border-none"
+            className="!border-none !w-full"
         >
             <TabsMUI
                 value={value}

app/dashboard/page.js

@@ -9,17 +9,22 @@ import UserAccountPage from "@/components/dashboard/userAccount/UserAccount";
 function UserAccount() {
 
     const [value, setValue] = useState(0);
+    const [isOpenSide, setIsOpenSide] = useState(false);
 
     return (
         <DashboardPage
             value={value}
             setValue={setValue}
             user={userData.data}
+            isOpenSide={isOpenSide}
+            setIsOpenSide={setIsOpenSide}
         >
             <UserAccountPage
                 value={value}
                 setValue={setValue}
                 user={userData.data}
+                isOpenSide={isOpenSide}
+                setIsOpenSide={setIsOpenSide}
             />
         </DashboardPage>
     )

app/globals.css

@@ -266,7 +266,8 @@ html {
 
 /* Hidden Scroll */
 
-.MuiPaper-root {
+.MuiPaper-root,
+.MuiTableContainer-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;
@@ -274,12 +275,14 @@ html {
 }
 
 .hidden-scroll::-webkit-scrollbar-thumb,
-.MuiTabs-scroller::-webkit-scrollbar-thumb {
+.MuiTabs-scroller::-webkit-scrollbar-thumb,
+.MuiTableContainer-root::-webkit-scrollbar-thumb {
     background: transparent;
 }
 
 .hidden-scroll::-webkit-scrollbar,
-.MuiTabs-scroller::-webkit-scrollbar {
+.MuiTabs-scroller::-webkit-scrollbar,
+.MuiTableContainer-root::-webkit-scrollbar {
     height: 0;
 }
 
@@ -292,6 +295,11 @@ html {
     animation: rotate 1s;
 }
 
+.table-shadow-none {
+    box-shadow: none !important;
+    border-radius: 12px !important;
+}
+
 @keyframes rotate {
     from {
         rotate: 90;