From 7dd27b21b4f45cda98c786cc6f494c0fe25ea642 Mon Sep 17 00:00:00 2001
From: ardhi <ardhi.irfan.syabani@gmail.com>
Date: Wed, 21 Sep 2022 14:59:07 +0700
Subject: [PATCH] add dashboard BoD

---
 src/views/Dashboard/index.js | 193 ++++++++++++++++++++++++++++++++++-
 1 file changed, 190 insertions(+), 3 deletions(-)

diff --git a/src/views/Dashboard/index.js b/src/views/Dashboard/index.js
index dbaae25..4a4b4fc 100644
--- a/src/views/Dashboard/index.js
+++ b/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>
   );
 }