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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 120
      src/views/DashboardPMOV1/index.js

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

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

Write Preview
Loading…
Cancel
Save