ordo
/
surveyor_indonesia_frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

revamp cards

pull/2/head
Yusuf 2 years ago
parent
d2fc49bd52
commit
e187b21398
1 changed files with 40 additions and 86 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 126
      src/views/DashboardPMOV1/index.js

126
src/views/DashboardPMOV1/index.js
Unescape View File

@ -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} />

Write Preview
Loading…
Cancel
Save