Integrate data grid for orders + add routes fix and move menus to a s…

…eparate file

package.json

@@ -7,12 +7,14 @@
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.15.15",
     "@mui/material": "^5.15.15",
+    "@mui/x-data-grid": "^7.1.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.96",
     "@types/react-dom": "^18.2.24",
+    "axios": "^1.6.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",

src/App.tsx

@@ -3,19 +3,17 @@ import { ThemeProvider } from '@mui/material/styles';
 import theme from './theme';
 import Layout from './components/Layout';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import Home from './pages/Home';
-import Orders from './pages/Orders';
-import Settings from './pages/Settings';
+import routes from './config/routes';
 
 const App: React.FC = () => {
   return (
     <ThemeProvider theme={theme}>
       <Router>
         <Layout>
           <Routes>
-            <Route path="/" element={<Home />} />
-            <Route path="/orders" element={<Orders />} />
-            <Route path="/settings" element={<Settings />} />
+            {routes.map((route, index) => (
+              <Route key={index} path={route.path} element={route.element} />
+            ))}
           </Routes>
         </Layout>
       </Router>

src/components/Layout.tsx

@@ -1,25 +1,11 @@
 import React, { useState } from 'react';
 import { AppBar, Box, Drawer, IconButton, List, ListItemButton, ListItemIcon, ListItemText, Menu, MenuItem, Select, Toolbar, Typography, FormControl, SelectChangeEvent } from '@mui/material';
-import HomeIcon from '@mui/icons-material/Home';
-import SettingsIcon from '@mui/icons-material/Settings';
 import AccountCircle from '@mui/icons-material/AccountCircle';
-import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
+import menuItems from '../config/menuItems';
 import { Link } from 'react-router-dom';
 
 const drawerWidth = 240;
 
-interface MenuItemType {
-  text: string;
-  icon: React.ReactElement;
-  path: string;
-}
-
-const menuItems: MenuItemType[] = [
-  { text: 'Home', icon: <HomeIcon />, path: '/' },
-  { text: 'Orders', icon: <SwapHorizIcon />, path: '/orders' },
-  { text: 'Settings', icon: <SettingsIcon />, path: '/settings' }
-];
-
 interface environmentOptionType {
   value: string;
   label: string;

src/config/menuItems.tsx

@@ -0,0 +1,19 @@
+// src/config/menuItems.ts
+import React from "react";
+import HomeIcon from '@mui/icons-material/Home';
+import SettingsIcon from '@mui/icons-material/Settings';
+import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
+
+interface MenuItemType {
+  text: string;
+  icon: React.ReactElement;
+  path: string;
+}
+
+const menuItems: MenuItemType[] = [
+  { text: 'Home', icon: <HomeIcon />, path: '/' },
+  { text: 'Orders', icon: <SwapHorizIcon />, path: '/orders' },
+  { text: 'Settings', icon: <SettingsIcon />, path: '/settings' }
+];
+
+export default menuItems;

src/config/routes.tsx

@@ -0,0 +1,28 @@
+// src/config/routes.tsx
+import React from 'react';
+import Home from '../pages/Home';
+import Orders from '../pages/Orders';
+import Settings from '../pages/Settings';
+
+interface RouteType {
+  path: string;
+  element: JSX.Element;
+}
+
+const routes: RouteType[] = [
+  {
+    path: '/',
+    element: <Home />,
+  },
+  {
+    path: '/orders',
+    element: <Orders />,
+  },
+  {
+    path: '/settings',
+    element: <Settings />,
+  },
+  // Add other routes here
+];
+
+export default routes;

src/pages/Home.tsx

@@ -1,8 +1,13 @@
 // src/pages/Home.tsx
-import React from 'react';
+import React, { useEffect } from 'react';
 import {Typography} from "@mui/material";
 
 const Home: React.FC = () => {
+
+  useEffect(() => {
+    document.title = '4M Control Panel Home';
+  }, []);
+
   return (
     <>
       <Typography variant="h4">Home Page</Typography>

src/pages/Orders.tsx

@@ -1,12 +1,81 @@
 // src/pages/Orders.tsx
-import React from 'react';
-import {Typography} from "@mui/material";
+import React, { useEffect, useState } from 'react';
+import {DataGrid, GridPaginationModel} from '@mui/x-data-grid';
+import axios from 'axios';
 
 const Orders: React.FC = () => {
+  const [orders, setOrders] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [rowCount, setRowCount] = useState(0);
+  const [paginationModel, setPaginationModel] = React.useState<GridPaginationModel>({
+    pageSize: 20,
+    page: 1,
+  })
+  const [rowCountState, setRowCountState] = React.useState(rowCount);
+
+  useEffect(() => {
+    setRowCountState((prevRowCountState) =>
+      rowCount !== undefined ? rowCount : prevRowCountState,
+    );
+  }, [rowCount, setRowCountState]);
+
+  const handlePaginationModelChange = (newModel: GridPaginationModel) => {
+    console.log(newModel)
+    setPaginationModel(newModel);
+  }
+
+  useEffect(() => {
+    document.title = 'Orders';
+    setLoading(true);
+    axios.get('http://localhost:8000/orders', {
+      params: {
+        page: paginationModel.page,
+        per_page: paginationModel.pageSize
+      }
+    })
+      .then((response) => {
+        setOrders(response.data.orders)
+        setRowCount(response.data.total)
+        setLoading(false)
+      })
+      .catch((error) => {
+        console.error('There was an error!', error);
+        setLoading(false);
+      });
+  }, [paginationModel]);
+
+  const columns = [
+    { field: 'id', headerName: 'ID', width: 70 },
+    { field: 'opportunity_uuid', headerName: 'Opportunity UUID', width: 100 },
+    { field: 'arbitrage_type', headerName: 'Arbitrage Type', width: 150 },
+    { field: 'order_type', headerName: 'Type', width: 150 },
+    { field: 'order_status', headerName: 'Status', width: 150 },
+    { field: 'order_ref', headerName: 'Exchange Ref', width: 250 },
+    { field: 'amount', headerName: 'Amount', width: 150 },
+    { field: 'price', headerName: 'Price', width: 150 }
+    // add other fields as necessary
+  ];
+
   return (
-    <div>
-      <Typography variant="h4">Orders</Typography>
-      <Typography paragraph>These are all exchanges orders</Typography>
+    <div style={{width: '100%'}}>
+      <DataGrid
+        rows={orders}
+        columns={columns}
+        initialState={{
+          pagination: {
+            paginationModel: {
+              pageSize: 50,
+            },
+          },
+        }}
+        rowCount={rowCountState}
+        pageSizeOptions={[5, 10, 20, 50, 100]}
+        pagination
+        paginationModel={paginationModel}
+        paginationMode="server"
+        onPaginationModelChange={handlePaginationModelChange}
+        loading={loading}
+      />
     </div>
   );
 };

src/pages/Settings.tsx

@@ -1,8 +1,13 @@
 // src/pages/Settings.tsx
-import React from 'react';
+import React, {useEffect} from 'react';
 import {Typography} from "@mui/material";
 
 const Settings: React.FC = () => {
+
+  useEffect(() => {
+    document.title = 'Settings';
+  }, []);
+
   return (
     <div>
       <Typography variant="h4">Settings Page</Typography>

src/theme.tsx

@@ -3,7 +3,7 @@ import { createTheme } from '@mui/material/styles';
 
 const theme = createTheme({
   palette: {
-    mode: 'dark', // Switches the theme to dark mode
+    mode: 'light', // Switches the theme to dark mode
   },
   // You can add more customization here
 });