add page approval matrix

src/container/ApprovalMatrix.js

+import React, { Component } from 'react';
+import { Typography } from '@material-ui/core';
+import TextField from "@material-ui/core/TextField";
+
+class ApprovalMatrix extends Component {
+    render() {
+        return (
+            <div style={{ flex: 1 }}>
+                <div style={{ height: 150, width: '100%', backgroundColor: '#354960', padding: 24, paddingTop: 33 }}>
+                    <div style={{ display: 'flex' }}>
+                        <Typography style={{ fontSize: '16px', color: 'white' }}>Master Data - Approval Matrix</Typography>
+                        {/* <form>
+                            <TextField id="" label="" variant="outlined" placeholder="Search"/>
+                        </form> */}
+                    </div>
+                </div>
+                <div style={{ flex: 1, padding: 20, width: '100%' }}>
+                    <div style={{ display: 'flex' }}>
+                        <Typography style={{ color: '#7e8085', fontSize: '11px', textDecorationLine: 'underline', marginRight: 48 }}>Budget - 2021 (0/7)</Typography>
+                        <Typography style={{ color: '#7e8085', fontSize: '11px', textDecorationLine: 'underline', marginRight: 48 }}>Laporan Bulanan - Oct 2020 (1/7)</Typography>
+                        <Typography style={{ color: '#51c6ea', fontSize: '11px', textDecorationLine: 'underline', marginRight: 48 }}>Rolling Outlook - Oct 2020 (0/5)</Typography>
+                        <Typography style={{ color: '#7e8085', fontSize: '11px', textDecorationLine: 'underline' }}>Lainnya</Typography>
+                    </div>
+                </div>
+                <div style={{ flex: 1, padding: 20, width: '100%' }}>
+                    <div style={{ display: 'flex' }}>
+                        <div style={{ height: 283, width: 398, borderRadius: 6, backgroundColor: '#fff', border: '1px solid #c4c4c4', marginRight: 25, padding: 16 }}>
+                            <Typography style={{ color: '#4b4b4b', fontSize: '16px', fontWeight: 'bold' }}>BALANCE SHEET</Typography>
+
+                        </div>
+                        <div style={{ height: 283, width: 398, borderRadius: 6, backgroundColor: '#fff', border: '1px solid #c4c4c4' }}>
+
+                        </div>
+                    </div>
+                    <div style={{ display: 'flex', marginTop: 25 }}>
+                        <div style={{ height: 283, width: 398, borderRadius: 6, backgroundColor: '#fff', border: '1px solid #c4c4c4', marginRight: 25 }}>
+
+                        </div>
+                        <div style={{ height: 283, width: 398, borderRadius: 6, backgroundColor: '#fff', border: '1px solid #c4c4c4' }}>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default ApprovalMatrix;
\ No newline at end of file

src/router/homeRoutes.js

 import screen404 from '../container/Screen404'
 import Beranda from '../container/Beranda'
+import ApprovalMatrix from '../container/ApprovalMatrix'
 
 const routes = [
     {
@@ -10,6 +11,10 @@ const routes = [
       path: "/home/screen404",
       main: screen404
     },
+    {
+      path: "/home/approval",
+      main: ApprovalMatrix
+    },
   ];
 
 export default routes;
\ No newline at end of file