add dashboard BoD

src/views/Dashboard/index.js

@@ -1,5 +1,145 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios'
+import { Row, Col, Button } from 'antd';
+// import {
+//   Chart as ChartJS,
+//   CategoryScale,
+//   LinearScale,
+//   BarElement,
+//   Title,
+//   Tooltip,
+//   Legend,
+// } from 'chart.js';
+import { Bar, HorizontalBar } from 'react-chartjs-2';
+
+// ChartJS.register(
+//   CategoryScale,
+//   LinearScale,
+//   BarElement,
+//   Title,
+//   Tooltip,
+//   Legend
+// );
+
+const verticalBarChartOption = {
+  elements: {
+    bar: {
+      borderWidth: 2,
+    },
+  },
+  maintainAspectRatio: false,
+  responsive: true,
+  legend: {
+    display: true,
+    position: 'right'
+  },
+}
+
+const horizontalBarChartOption = {
+  elements: {
+    bar: {
+      borderWidth: 2,
+    },
+  },
+  responsive: false,
+  legend: {
+    display: false
+  }
+}
+
+const optionsExpenditure = {
+  indexAxis: 'y',
+  elements: {
+    bar: {
+      borderWidth: 2,
+    },
+  },
+  responsive: false,
+  legend: {
+    display: false
+  },
+  // plugins: {
+  //   legend: {
+  //     position: 'right',
+  //   },
+  //   title: {
+  //     display: true,
+  //     text: 'Chart.js Horizontal Bar Chart',
+  //   },
+  // },
+};
+const labelsExpenditure = ['Total Budget', 'Expenditure', 'Invoice', 'Cash In'];
+const dataExpenditure = {
+  labels: labelsExpenditure,
+  datasets: [
+    {
+      label: '',
+      data: [302, 197, 197, 157],
+      borderColor: 'rgb(255, 99, 132)',
+      backgroundColor: 'rgba(255, 99, 132, 0.5)',
+    }
+  ],
+};
+const CardExpenditure = ({title, subtitle}) => {
+  return (
+    <div style={{backgroundColor: '#F8F8F8', margin: 2, paddingLeft: 20, paddingRight: 20, paddingTop: 10}}>
+      <div style={{display: 'flex', flexDirection: 'row', marginBottom: 10}}>
+        <div style={{flex: 20, display: 'flex', flexDirection: 'column'}}>
+          <div style={{color: '#444444', fontSize: 20, fontWeight: 'bold'}}>{title}</div>
+          <div style={{color: '#888888', fontSize: 12}}>{subtitle}</div>
+        </div>
+        <div style={{flex: 6, display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
+          <Button>Detail</Button>
+        </div>
+      </div>
+
+      <div style={{height: 200, marginVertical: 10}}>
+        <HorizontalBar options={optionsExpenditure} data={dataExpenditure} />
+      </div>
+      
+    </div>
+  )
+}
+const CardDashboard = ({title, subtitle, chartType, chartData, chartOption}) => {
+  let chart = null;
+  if (chartType === 'vertical-bar') {
+    chart = <Bar 
+      options={chartOption ? chartOption : verticalBarChartOption} 
+      data={chartData ? chartData : null}
+    />
+  }
+  else if (chartType === 'horizontal-bar') {
+    chart = <HorizontalBar
+      options={chartOption ? chartOption : horizontalBarChartOption}
+      data={chartData ? chartData : null}
+    />
+  }
+  else if (chartType === 'pie') {
+
+  }
+  else if (chartType === 'line') {
+
+  }
+  else if (chartType === '') {
+
+  }
+
+  return (
+    <div style={{backgroundColor: '#F8F8F8', margin: 2, paddingLeft: 20, paddingRight: 20, paddingTop: 10}}>
+      <div style={{display: 'flex', flexDirection: 'row', marginBottom: 10}}>
+        <div style={{flex: 20, display: 'flex', flexDirection: 'column'}}>
+          <div style={{color: '#444444', fontSize: 20, fontWeight: 'bold'}}>{title}</div>
+          <div style={{color: '#888888', fontSize: 12}}>{subtitle}</div>
+        </div>
+      </div>
+
+      <div style={{height: 200, marginVertical: 10}}>
+        {chart}
+      </div>
+      
+    </div>
+  )
+}
 
 const DashboardPMO = () => {
   const token = localStorage.getItem("token")
@@ -11,9 +151,56 @@ const DashboardPMO = () => {
   }
 
   return (
-    <>
-      <div></div>
-    </>
+    <div style={{marginLeft: -25, marginRight: -25}}>
+      <Row>
+        <Col span={8}>
+          <CardExpenditure 
+            title="Project Expenditure" 
+            subtitle="Total Project Expenditure from on-going project."
+          />
+        </Col>
+        <Col span={16}>
+          <CardDashboard 
+            title="Project Invoice vs Cash In" 
+            subtitle="Total Invoice vs Cash In taken from all project."
+            chartType="vertical-bar"
+            chartData={{
+              labels: ["Gedung Tenaga Panel Surya", "Pembangunan Gedung Tower ABC", "Tower Jaringan Jawa Barat", "Tower Jaringan Jawa Timur", "Tower Jaringan Jawa Tengah", "Tower Jaringan Bali", "Project Tower ABC", "Tower Jaringan DKI Jakarta", "Tower Jaringan NTT"],
+              datasets: [
+                {
+                  label: "This Year",
+                  data: [16, 8, 12, 10, 13, 12, 10, 10, 8],
+                  borderColor: '#A36A16',
+                  backgroundColor: '#A36A16',
+                  borderWidth: 2,
+                  borderRadius: 20,
+                  borderSkipped: false
+                },
+                {
+                  label: "Last Year",
+                  data: [1, 1, 7, 6, 10, 9.5, 8, 9, 7.5],
+                  borderColor: '#4C4747',
+                  backgroundColor: '#4C4747',
+                  borderWidth: 2,
+                  borderRadius: 20,
+                  borderSkipped: false
+                }
+              ],
+            }}
+          />
+        </Col>
+      </Row>
+      <Row>
+        <Col span={8}></Col>
+        <Col span={8}></Col>
+        <Col span={8}></Col>
+      </Row>
+      <Row>
+        <Col span={8}></Col>
+        <Col span={8}></Col>
+        <Col span={8}></Col>
+      </Row>
+    </div>
   );
 }