From 415a573566c8305a4c4068387c816202c3dbe7c7 Mon Sep 17 00:00:00 2001
From: Yusuf <ms.yusuf@outlook.co.id>
Date: Tue, 2 Aug 2022 12:22:47 +0700
Subject: [PATCH] updt

---
 src/views/DashboardPMOV1/index.js             | 58 ++++++++++++------
 src/views/DashboardPMOV1/projectPhaseChart.js | 59 ++++++++++---------
 .../CreatedProyek/DialogFormProyek.js         |  3 +-
 3 files changed, 70 insertions(+), 50 deletions(-)

diff --git a/src/views/DashboardPMOV1/index.js b/src/views/DashboardPMOV1/index.js
index d6473b0..b53365a 100644
--- a/src/views/DashboardPMOV1/index.js
+++ b/src/views/DashboardPMOV1/index.js
@@ -34,7 +34,6 @@ function BoxDashboard({ value, title, secondaryTitle, icon, bgColor }) {
   )
 }
 
-// pardon this, i've no time
 function BoxDashboardNoIcon({ value, title, secondaryTitle, bgColor }) {
   return (
     <>
@@ -61,6 +60,9 @@ const DashboardPM = () => {
   const [PROJECTACTUALCOSTTOTAL, SET_PROJECTACTUALCOSTTOTAL] = useState(0)
   const [PROJECTCOSTTOTAL, SET_PROJECTCOSTTOTAL] = useState(0)
   const [TOTALREVENUE, SET_TOTALREVENUE] = useState(0)
+  const [MANPOWERS, SET_MANPOWERS] = useState(0)
+  const [PROJECTPHASES, SET_PROJECTPHASES] = useState([])
+  const [PROJECTSBYPHASE, SET_PROJECTSBYPHASE] = useState([])
 
   const token = localStorage.getItem("token")
   const HEADER = {
@@ -78,6 +80,10 @@ const DashboardPM = () => {
     result.data.totalActualCost != undefined ? SET_PROJECTCOSTTOTAL(result.data.totalActualCost) : SET_PROJECTCOSTTOTAL(0)
     result.data.totalPlannedCost != undefined ? SET_PROJECTBUDGETTOTAL(result.data.totalPlannedCost) : SET_PROJECTBUDGETTOTAL(0)
     result.data.totalRevenue != undefined ? SET_TOTALREVENUE(result.data.totalRevenue) : SET_TOTALREVENUE(0)
+    result.data.manpowers != undefined ? SET_MANPOWERS(result.data.manpowers) : SET_MANPOWERS(0)
+    result.data.projectPhases != undefined ? SET_PROJECTPHASES(result.data.projectPhases) : SET_PROJECTPHASES([])
+    result.data.projectsByPhase != undefined ? SET_PROJECTSBYPHASE(result.data.projectsByPhase) : SET_PROJECTSBYPHASE([])
+
   }
 
   useEffect(() => {
@@ -95,34 +101,42 @@ const DashboardPM = () => {
             lg: 32,
           }}
         >
-          <Col span={6} style={{ margin: '' }}>
+          <Col span={4} style={{ margin: '' }}>
+            <BoxDashboard
+              icon={<i style={{ color: '#fff' }} class="zmdi zmdi-calendar-note zmdi-hc-2x"></i>}
+              value={PROJECTCOUNT}
+              bgColor="#0287c7"
+              title="Projects"
+            />
+          </Col>
+          <Col span={5} style={{ margin: '' }}>
             <BoxDashboard
-              icon={<i style={{ color: '#fff' }} class="zmdi zmdi-money zmdi-hc-4x"></i>}
+              icon={<i style={{ color: '#fff' }} class="zmdi zmdi-money zmdi-hc-2x"></i>}
               value={`${formatRibuanDecimal(PROJECTBUDGETTOTAL)}`}
-              bgColor="#077857"
+              bgColor="#cf6102"
               title="Budget"
             />
           </Col>
-          <Col span={6} style={{ margin: '' }}>
+          <Col span={5} style={{ margin: '' }}>
             <BoxDashboard
-              icon={<i style={{ color: '#fff' }} class="zmdi zmdi-money zmdi-hc-4x"></i>}
+              icon={<i style={{ color: '#fff' }} class="zmdi zmdi-money zmdi-hc-2x"></i>}
               value={`${formatRibuanDecimal(PROJECTCOSTTOTAL)}`}
-              bgColor="#077857"
+              bgColor="#f51d1d"
               title="Spent on Projects"
             />
           </Col>
-          <Col span={6} style={{ margin: '' }}>
+          <Col span={5} style={{ margin: '' }}>
             <BoxDashboard
-              icon={<i style={{ color: '#fff' }} class="zmdi zmdi-money zmdi-hc-4x"></i>}
+              icon={<i style={{ color: '#fff' }} class="zmdi zmdi-money zmdi-hc-2x"></i>}
               value={`${formatRibuanDecimal(TOTALREVENUE)}`}
               bgColor="#077857"
               title="Revenue"
             />
           </Col>
-          <Col span={6} style={{ margin: '' }}>
+          <Col span={4} style={{ margin: '' }}>
             <BoxDashboard
-              icon={<i style={{ color: '#fff' }} class="zmdi zmdi-accounts-alt zmdi-hc-4x"></i>}
-              value="-"
+              icon={<i style={{ color: '#fff' }} class="zmdi zmdi-accounts-alt zmdi-hc-2x"></i>}
+              value={MANPOWERS}
               bgColor="#0287c7"
               title="Manpowers"
             />
@@ -134,6 +148,12 @@ const DashboardPM = () => {
               <Panel key="1">
                 <Row style={{ margin: '15px 10px 0px 0px' }}>
                   <Col span={8} >
+                    <Row>
+                      <Col span={24}>
+                        <h6 class="text-center">Car Management</h6>
+                        <h6 class="text-center">Total Vehicles: -</h6>
+                      </Col>
+                    </Row>
                     <Row
                       gutter={{
                         xs: 8,
@@ -145,15 +165,15 @@ const DashboardPM = () => {
                       <Col span={12}>
                         <BoxDashboardNoIcon
                           value="-"
-                          bgColor="#077857"
-                          title="Active / Standby"
+                          bgColor="#5e5c70"
+                          title="On Duty"
                         />
                       </Col>
                       <Col span={12}>
                         <BoxDashboardNoIcon
                           value="-"
-                          bgColor="#077857"
-                          title="Need Maintenance"
+                          bgColor="#5e5c70"
+                          title="At Pool"
                         />
                       </Col>
                     </Row>
@@ -167,7 +187,7 @@ const DashboardPM = () => {
                     >
                       <Col span={12}>
                         <BoxDashboardNoIcon
-                          bgColor="#077857"
+                          bgColor="#5e5c70"
                           title=""
                           value={<i style={{ color: '#fff' }} class="zmdi zmdi-truck zmdi-hc-2x"></i>}
                         />
@@ -175,14 +195,14 @@ const DashboardPM = () => {
                       <Col span={12}>
                         <BoxDashboardNoIcon
                           value="-"
-                          bgColor="#077857"
+                          bgColor="#5e5c70"
                           title="On Maintenance"
                         />
                       </Col>
                     </Row>
                   </Col>
                   <Col span={8}>
-                    <ProjectPhaseChart />
+                    <ProjectPhaseChart projectPhases={PROJECTPHASES} projectsByPhase={PROJECTSBYPHASE} />
                   </Col>
                   <Col span={8}>
                     <ProjectTypeChart />
diff --git a/src/views/DashboardPMOV1/projectPhaseChart.js b/src/views/DashboardPMOV1/projectPhaseChart.js
index 111e748..253b3ec 100644
--- a/src/views/DashboardPMOV1/projectPhaseChart.js
+++ b/src/views/DashboardPMOV1/projectPhaseChart.js
@@ -1,36 +1,37 @@
 import React from 'react';
-import { Bar } from 'react-chartjs-2';
-import { faker } from '@faker-js/faker';
+import { HorizontalBar } from 'react-chartjs-2';
 
 const options = {
-  indexAxis: 'y',
   responsive: true,
+  title: {
+    display: true,
+    text: 'PROJECT BY PHASE'
+  }
 };
 
-const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
-
-export const data = {
-  labels,
-  datasets: [
-    {
-      label: 'Dataset 1',
-      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
-      borderColor: 'rgb(255, 99, 132)',
-      backgroundColor: 'rgba(255, 99, 132, 0.5)',
-    },
-    {
-      label: 'Dataset 2',
-      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
-      borderColor: 'rgb(53, 162, 235)',
-      backgroundColor: 'rgba(53, 162, 235, 0.5)',
-    },
-  ],
-};
-
-export function ProjectPhaseChart() {
-  return <Bar options={options} data={data} />;
+export const ProjectPhaseChart = ({ projectPhases, projectsByPhase }) => {
+  let dataSets = []
+  let total = []
+
+  for (var i = 0; i < projectsByPhase.length; i++) {
+    total = []
+    for (var j = 0; j < projectPhases.length; j++) {
+      if (projectPhases[j] != projectsByPhase[i].name) {
+        total.push(0)
+      } else {
+        total.push(projectsByPhase[i].total)
+      }
+    }
+    dataSets.push({
+      label: projectsByPhase[i].name,
+      data: total,
+      backgroundColor: projectsByPhase[i].color,
+      borderColor: '#000000',
+    });
+  }
+  const data = {
+    datasets: dataSets,
+    labels: projectPhases,
+  };
+  return <HorizontalBar options={options} data={data} />;
 }
-
-
-
-
diff --git a/src/views/SimproV2/CreatedProyek/DialogFormProyek.js b/src/views/SimproV2/CreatedProyek/DialogFormProyek.js
index 43320f7..57c74a9 100644
--- a/src/views/SimproV2/CreatedProyek/DialogFormProyek.js
+++ b/src/views/SimproV2/CreatedProyek/DialogFormProyek.js
@@ -80,7 +80,6 @@ const DialogFormProyek = ({
       .get(`${PROYEK_GET_ID(id)}`, HEADER)
       .then((res) => res)
       .catch((err) => err.response);
-    console.log("proyek by id", result);
     if (result && result.data && result.data.code === 200) {
       const val = result.data.data;
       setName(val.nama);
@@ -305,7 +304,7 @@ const DialogFormProyek = ({
         akhir_proyek: endDate,
         type_proyek_id: parseInt(typeProject),
         phase_id: parseInt(phaseProject),
-        budget_health: budgetHealth,
+        health_budget: budgetHealth,
         pm_id: pic,
         investor,
         finance,