From e187b213988f605c82b8d0d325b70d0a811ede8d Mon Sep 17 00:00:00 2001
From: Yusuf <ms.yusuf@outlook.co.id>
Date: Fri, 5 Aug 2022 15:23:38 +0700
Subject: [PATCH] revamp cards

---
 src/views/DashboardPMOV1/index.js | 126 ++++++++++--------------------
 1 file changed, 40 insertions(+), 86 deletions(-)

diff --git a/src/views/DashboardPMOV1/index.js b/src/views/DashboardPMOV1/index.js
index a16faff..d59a248 100644
--- a/src/views/DashboardPMOV1/index.js
+++ b/src/views/DashboardPMOV1/index.js
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Row, Col, Select, Collapse } from 'antd';
-import { Column } from '@ant-design/plots';
+import { Row, Col, Collapse } from 'antd';
 import TableDashboardV1 from './tableDashboardv1';
 import { ProjectTypeChart } from './chartDashboard';
 import { ProjectPhaseChart } from './projectPhaseChart';
@@ -11,10 +10,10 @@ import { formatRibuanDecimal } from '../../const/CustomFunc.js';
 
 const { Panel } = Collapse;
 
-function BoxDashboard({ value, title, secondaryTitle, icon, bgColor }) {
+function BoxDashboard({ value, title, secondaryTitle, icon, bgColor, valFSize = '1.0rem', fSize = '0.7rem' }) {
   return (
     <>
-      <div style={{ backgroundColor: bgColor }} class='box-dashboard-pm'>
+      <div style={{ backgroundColor: bgColor, height: 58 }} class='box-dashboard-pm'>
         <Row>
           <Col span={4}>
             <div class='box-icon'>
@@ -23,8 +22,8 @@ function BoxDashboard({ value, title, secondaryTitle, icon, bgColor }) {
           </Col>
           <Col span={20}>
             <div class='box-content'>
-              <div style={{ fontSize: '1.0rem' }} class='text-box'>{value}</div>
-              <div style={{ fontSize: '0.7rem' }} class='text-box'>{title.toUpperCase()}</div>
+              <div style={{ fontSize: valFSize }} class='text-box'>{value}</div>
+              <div style={{ fontSize: fSize }} class='text-box'>{title.toUpperCase()}</div>
               <div style={{ fontSize: '0.6rem' }} class='text-box-secondary'>{secondaryTitle && secondaryTitle.toUpperCase()}</div>
             </div>
           </Col>
@@ -34,15 +33,15 @@ function BoxDashboard({ value, title, secondaryTitle, icon, bgColor }) {
   )
 }
 
-function BoxDashboardNoIcon({ value, title, secondaryTitle, bgColor }) {
+function BoxDashboardNoIcon({ value, title, secondaryTitle, bgColor, valFSize = '1.0rem', fSize = '0.7rem' }) {
   return (
     <>
-      <div style={{ backgroundColor: bgColor }} class='box-dashboard-pm'>
+      <div style={{ backgroundColor: bgColor, height: 60 }} class='box-dashboard-pm'>
         <Row>
           <Col span={24}>
             <div class='box-content'>
-              <div style={{ fontSize: '1.4rem' }} class='text-box'>{value}</div>
-              <div style={{ fontSize: '0.7rem' }} class='text-box'>{title.toUpperCase()}</div>
+              <div style={{ fontSize: valFSize }} class='text-box'>{value}</div>
+              <div style={{ fontSize: fSize }} class='text-box'>{title}</div>
               <div style={{ fontSize: '0.6rem' }} class='text-box-secondary'>{secondaryTitle && secondaryTitle.toUpperCase()}</div>
             </div>
           </Col>
@@ -106,113 +105,68 @@ const DashboardPM = () => {
             lg: 32,
           }}
         >
-          <Col span={4} style={{ margin: '' }}>
-            <BoxDashboard
-              icon={<i style={{ color: '#fff' }} class="zmdi zmdi-calendar-note zmdi-hc-2x"></i>}
+          <Col span={2} style={{ margin: '' }}>
+            <BoxDashboardNoIcon
               value={PROJECTCOUNT}
               bgColor="#0287c7"
               title="Projects"
             />
           </Col>
+          <Col span={3} style={{ margin: '' }}>
+            <BoxDashboardNoIcon
+              value={PROJECTCOUNT}
+              bgColor="#f51d1d"
+              title="Projects on Danger"
+              fSize="0.7rem"
+            />
+          </Col>
           <Col span={5} style={{ margin: '' }}>
-            <BoxDashboard
-              icon={<i style={{ color: '#fff' }} class="zmdi zmdi-money zmdi-hc-2x"></i>}
+            <BoxDashboardNoIcon
               value={`${formatRibuanDecimal(PROJECTBUDGETTOTAL)}`}
               bgColor="#cf6102"
               title="Budget"
+              valFSize="1rem"
             />
           </Col>
           <Col span={5} style={{ margin: '' }}>
-            <BoxDashboard
-              icon={<i style={{ color: '#fff' }} class="zmdi zmdi-money zmdi-hc-2x"></i>}
+            <BoxDashboardNoIcon
               value={`${formatRibuanDecimal(PROJECTCOSTTOTAL)}`}
               bgColor="#f51d1d"
-              title="Spent on Projects"
+              title="Project Expanditure"
+              valFSize="1rem"
             />
           </Col>
           <Col span={5} style={{ margin: '' }}>
-            <BoxDashboard
-              icon={<i style={{ color: '#fff' }} class="zmdi zmdi-money zmdi-hc-2x"></i>}
+            <BoxDashboardNoIcon
               value={`${formatRibuanDecimal(TOTALREVENUE)}`}
               bgColor="#077857"
               title="Revenue"
+              valFSize="1rem"
             />
           </Col>
-          <Col span={4} style={{ margin: '' }}>
-            <BoxDashboard
-              icon={<i style={{ color: '#fff' }} class="zmdi zmdi-accounts-alt zmdi-hc-2x"></i>}
+          <Col span={2} style={{ margin: '' }}>
+            <BoxDashboardNoIcon
               value={MANPOWERS}
               bgColor="#0287c7"
               title="Manpowers"
             />
           </Col>
+          <Col span={2} style={{ margin: '' }}>
+            <BoxDashboardNoIcon
+              value={<i style={{ color: '#fff' }} class="zmdi zmdi-truck zmdi-hc-2x"></i>}
+              bgColor="#0287c7"
+              title="OSLOG"
+            />
+          </Col>
         </Row>
         <Row style={{ marginTop: '15px' }}>
-          <Col span={24} style={{ margin: '0px 0px 0px 0px' }}> 
-            <Collapse> 
-            
-              <Panel header="More Iformation Chart" key="1"> 
+          <Col span={24} style={{ margin: '0px 0px 0px 0px' }}>
+            <Collapse>
+
+              <Panel header="More Information Chart" key="1">
                 <Row style={{ margin: '10px 10px 0px 10px' }}>
                   <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,
-                        sm: 16,
-                        md: 24,
-                        lg: 32,
-                      }}
-                    >
-                      <Col span={12}>
-                        <BoxDashboardNoIcon
-                          bgColor="#5e5c70"
-                          title=""
-                          value={<i style={{ color: '#fff' }} class="zmdi zmdi-truck zmdi-hc-2x"></i>}
-                        />
-                      </Col> 
-                      <Col span={12}>
-                        <BoxDashboardNoIcon
-                          value="-"
-                          bgColor="#5e5c70"
-                          title="At Pool"
-                        />
-                      </Col>
-                    </Row>
-                    <Row
-                      gutter={{
-                        xs: 8,
-                        sm: 16,
-                        md: 24,
-                        lg: 32,
-                      }}
-                    >
-                      {/* <Col span={12}>
-                        <BoxDashboardNoIcon
-                          bgColor="#5e5c70"
-                          title=""
-                          value={<i style={{ color: '#fff' }} class="zmdi zmdi-truck zmdi-hc-2x"></i>}
-                        />
-                      </Col> */}
-                      <Col span={12}>
-                        <BoxDashboardNoIcon
-                          value="-"
-                          bgColor="#5e5c70"
-                          title="On Duty"
-                        />
-                      </Col>
-                      <Col span={12}>
-                        <BoxDashboardNoIcon
-                          value="-"
-                          bgColor="#5e5c70"
-                          title="On Maintenance"
-                        />
-                      </Col>
-                    </Row>
+                    <Row></Row>
                   </Col>
                   <Col span={8}>
                     <ProjectPhaseChart projectPhases={PROJECTPHASES} projectsByPhase={PROJECTSBYPHASE} />