WIP: Dashboard BoD

src/views/Dashboard/graphProjectExpenditure.js

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios'
+import { Bar } from 'react-chartjs-2';
+
+const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+
+const data = {
+	labels,
+	datasets: [
+		{
+			label: 'Dataset 1',
+			borderColor: 'rgb(255, 99, 132)',
+			backgroundColor: 'rgba(255, 99, 132, 0.5)',
+			data: []
+		},
+		{
+			label: 'Dataset 2',
+			borderColor: 'rgb(53, 162, 235)',
+			backgroundColor: 'rgba(53, 162, 235, 0.5)',
+		},
+	],
+};
+
+
+const options = {
+	indexAxis: 'y',
+	elements: {
+		bar: {
+			borderWidth: 2,
+		},
+	},
+	responsive: true,
+	plugins: {
+		legend: {
+			position: 'right',
+		},
+		title: {
+			display: true,
+			text: 'Chart.js Horizontal Bar Chart',
+		},
+	},
+};
+
+const DashboardPMO = () => {
+	const token = localStorage.getItem("token")
+	const HEADER = {
+		headers: {
+			"Content-Type": "application/json",
+			"Authorization": `Bearer ${token}`
+		}
+	}
+
+	return (
+		<>
+			<div>
+				<Bar
+					options={options}
+					data={data}
+				/>
+			</div>
+		</>
+	);
+}
+
+export default DashboardPMO;

src/views/Dashboard/index.js

@@ -1,5 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios'
+import { Col, Divider, Row } from 'antd';
+
+import { graphProjectExpenditure } from './graphProjectExpenditure';
 
 const DashboardPMO = () => {
   const token = localStorage.getItem("token")
@@ -12,9 +15,25 @@ const DashboardPMO = () => {
 
   return (
     <>
-      <div></div>
+		<Row>
+			<Col span={8}>
+				<graphProjectExpenditure />
+			</Col>
+			<Col span={16}>Project Invoice vs Cash In</Col>
+		</Row>
+		<Row>
+			<Col span={8}>Project By Schedule (PIE)</Col>
+			<Col span={8}>Project By Health (PIE)</Col>
+			<Col span={8}>Project Health per Divisions</Col>
+		</Row>
+		<Row>
+			<Col span={8}>Project By Phase</Col>
+			<Col span={8}>Project By Division</Col>
+			<Col span={8}>Project Value Per Division</Col>
+		</Row>
 	</>
-  );
+);
+
 }
 
 export default DashboardPMO;