design sidebar & head layout & page dashboard

app/component/CustomTable.js

@@ -1,9 +1,16 @@
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material'
 
-function CustomTable({ tableHead, centerTable, children }) {
+function CustomTable({ tableHead, zeroRadius, centerTable, children }) {
     return (
-        <TableContainer className='!shadow-none table-shadow-none !rounded-[8px] !border !border-solid !border-[#DBDBDB]'>
-            <Table className='!rounded-[8px] !shadow-none !overflow-hidden'>
+        <TableContainer
+            className='!shadow-none table-shadow-none !border !border-solid !border-[#DBDBDB]'
+            sx={{
+                '&.MuiTableContainer-root': {
+                    borderRadius: zeroRadius && '0 !important'
+                }
+            }}
+        >
+            <Table className='!rounded-0 !shadow-none !overflow-hidden'>
                 <TableHead>
                     <TableRow
                         className='!bg-[#EFEFEF]'
@@ -13,7 +20,7 @@ function CustomTable({ tableHead, centerTable, children }) {
                                 key={idx}
                                 className={`
                                 !text-[#616161] !text-[14px] !font-normal !py-[10px] !px-[18px]
-                                ${centerTable.find(i => i === idx) ? '!text-center' : '!text-start'}
+                                ${centerTable.includes(idx) ? '!text-center' : '!text-start'}
                             `}
                             >
                                 {item}