table and filter reusable component

src/shared/Main.tsx

@@ -1,5 +1,6 @@
 import { FC } from 'react'
 import SideBar from './SideBar'
+import AppRouter from '@/router/AppRouter'
 import Header from './Header'
 
 const Main: FC = () => {
@@ -7,7 +8,13 @@ const Main: FC = () => {
         <div className='p-4 overflow-hidden'>
             <SideBar />
             <Header />
-
+            <div className='flex-1 xl:ms-[269px] mt-[68px] xl:mt-[81px]'>
+                <div className={`overflow-auto w-[${window.innerWidth}] max-h-[calc(100vh-113px)]`}>
+                    <div className='xl:pb-20 pb-32'>
+                        <AppRouter />
+                    </div>
+                </div>
+            </div>
         </div>
     )
 }