Bhosseini/orders page

package.json

@@ -7,12 +7,15 @@
     "@emotion/styled": "latest",
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.8",
+    "@mui/x-data-grid": "^5.17.25",
+    "formik": "^2.2.9",
     "react": "latest",
     "react-dom": "latest",
     "react-hook-form": "^7.43.1",
     "react-scripts": "latest",
     "recharts": "^2.4.1",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "xlsx": "^0.18.5"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.tsx

@@ -1,9 +1,14 @@
 import * as React from "react";
 import { Dashboard } from "./components/dashboard/Dashboard";
+import Orders from "./components/dashboard/Orders";
+import StepperProvider from "./providers/SteperProvider";
 
 export default function App() {
     return (
         <Dashboard>
+            <StepperProvider>
+                <Orders />
+            </StepperProvider>
         </Dashboard>
     );
 }

src/components/dashboard/Dashboard.tsx

@@ -19,7 +19,7 @@ import { Copyright } from "../common/Copyright";
 const drawerWidth = 240;
 
 interface AppBarProps extends MuiAppBarProps {
-	open?: boolean;
+    open?: boolean;
 }
 
 const AppBar = styled(MuiAppBar, {