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

update page project-dashboard

pull/2/head
bnu 2 years ago
parent
f74eef3541
commit
ed3b77140d
4 changed files with 326 additions and 0 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. 42
      src/views/DashboardProject/chatDashboard.js
  2. 33
      src/views/DashboardProject/ganttDashboard.js
  3. 174
      src/views/DashboardProject/index.js
  4. 77
      src/views/DashboardProject/tableDashboard.js

42
src/views/DashboardProject/chatDashboard.js
Unescape View File

@ -0,0 +1,42 @@
import React from 'react';
const ChatDashboard = () => {
return (
<div style={{ margin: '0 5px' }} className="box-header-dashboard-project">
<div style={{ display: 'flex', justifyContent: 'center' }}>
<div style={{ marginBottom: '5px', fontSize: '0.8rem', fontWeight: '500' }}>COMUNICATION</div>
</div>
<div className='chat'>
<div className="chat-content">
<div className='chat-body'>
<div className='chat-header'>
Robert William
</div>
<div className='chat-body-content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div className='chat-footer'>
14/01/22 14:21
</div>
</div>
</div>
<div className="chat-content">
<div className='chat-body'>
<div className='chat-header'>
Jennifer lawrence
</div>
<div className='chat-body-content'>
Curabitur lobortis tellus nibh, at tincidunt turpis viverra at. Integer aliquam in quam eu fringilla. Nullam eu mauris gravida
</div>
<div className='chat-footer'>
14/01/22 10:20
</div>
</div>
</div>
</div>
</div>
);
}
export default ChatDashboard;

33
src/views/DashboardProject/ganttDashboard.js
Unescape View File

@ -0,0 +1,33 @@
import React, { useEffect, useMemo, useState } from 'react';
import Timeline from 'react-calendar-timeline'
// make sure you include the timeline stylesheet or the timeline will not be styled
import 'react-calendar-timeline/lib/Timeline.css'
// import moment from 'moment';
// import { USER_VERSION_GANTT_SEARCH, BASE_SIMPRO_LUMEN } from '../../../const/ApiConst';
// import axios from "../../../const/interceptorApi"
const token = localStorage.getItem("token")
const url = `https://ospro-gantt.ospro.id/src/index.html?base_url=https://ospro-api.ospro.id/api&gantt_id=12&proyek_id=11&token=${token}&ro=0`
const Gantt = (props) => {
const RenderGantt = () => (
<iframe
id="frame-gantt"
src={url}
style={{
width: '100%',
height: '50vh',
}}
scrolling="no"
frameBorder="0"
></iframe>
)
return (
<div>
<RenderGantt />
</div>
);
}
export default Gantt;

174
src/views/DashboardProject/index.js
Unescape View File

@ -0,0 +1,174 @@
import React from 'react';
import { Row, Col, Select, Divider } from 'antd';
import moment from 'moment'
import Gantt from './ganttDashboard';
import TableDashboard from './tableDashboard';
import ChatDashboard from './chatDashboard';
import { useParams } from 'react-router-dom';
function BoxDashboard({ value, title, secondaryTitle, icon, bgColor }) {
return (
<div style={{ backgroundColor: bgColor }} className='box-header-dashboard-project'>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div style={{ fontSize: '0.8rem', fontWeight: 500, color: '#fff', textTransform: 'uppercase' }}>{title}</div>
<div>{icon}</div>
</div>
<div style={{ fontSize: '1rem', fontWeight: 500, color: '#fff' }}>Rp. {value}</div>
</div>
)
}
const DashboardProject = () => {
const { id } = useParams();
console.log("test ", id)
return (
<div style={{ margin: "-15px" }}>
<Row>
<Col span={5}>
<div style={{ display: 'flex', justifyContent: 'space-between', margin: '0 5px' }} className="box-header-dashboard-project">
<div><i style={{ color: 'teal' }} class="zmdi zmdi-assignment zmdi-hc-lg"></i></div>
<div style={{ textTransform: 'uppercase' }}>Project Status</div>
<div style={{ marginTop: 5 }} className='health-status-good' />
</div>
</Col>
<Col span={7}>
<div style={{ display: 'flex', justifyContent: 'space-between', margin: '0 5px' }} className="box-header-dashboard-project">
<div><i style={{ color: '#0284c7' }} class="zmdi zmdi-account zmdi-hc-lg"></i></div>
<div style={{ textTransform: 'uppercase' }}>Project Manager</div>
<div style={{ fontWeight: 500, color: '#404040', textTransform: 'uppercase' }}>Mark Julius</div>
</div>
</Col>
<Col span={7}>
<div style={{ display: 'flex', justifyContent: 'space-between', margin: '0 5px' }} className="box-header-dashboard-project">
<div><i style={{ color: '#b91c1c' }} class="zmdi zmdi-home zmdi-hc-lg"></i></div>
<div style={{ textTransform: 'uppercase' }}>RO</div>
<div style={{ fontWeight: 500, color: '#404040', textTransform: 'uppercase' }}>Capitol Corp</div>
</div>
</Col>
<Col span={5}>
<div style={{ display: 'flex', justifyContent: 'space-between', margin: '0 5px' }} className="box-header-dashboard-project">
<div><i style={{ color: '#e68a00' }} class="zmdi zmdi-calendar-alt zmdi-hc-lg"></i></div>
<div style={{ textTransform: 'uppercase' }}>Date</div>
<div style={{ fontWeight: 500, color: '#404040' }}>{moment().format("DD-MM-YYYY")}</div>
</div>
</Col>
</Row>
<div style={{ paddingTop: 20 }}>
<Row>
<Col span={9}>
<div style={{ margin: '0 5px' }} className="box-header-dashboard-project">
<div style={{ margin: '5px 0' }}><h6>SCHEDULE</h6></div>
<div style={{ padding: '5px 0' }}>
<Row>
<Col span={2}><i style={{ color: 'teal' }} class="zmdi zmdi-calendar-alt zmdi-hc-lg"></i></Col>
<Col span={22}>
<div style={{ textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}>
<div>Start Date</div>
<div style={{ fontWeight: 500, color: '#8c8c8c' }}>April 1, 2022</div>
</div>
</Col>
</Row>
</div>
<div style={{ padding: '5px 0' }}>
<Row>
<Col span={2}><i style={{ color: 'teal' }} class="zmdi zmdi-calendar-alt zmdi-hc-lg"></i></Col>
<Col span={22}>
<div style={{ textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}>
<div>Baseline Finish Date</div>
<div style={{ fontWeight: 500, color: '#8c8c8c' }}>September 30, 2022</div>
</div>
</Col>
</Row>
</div>
<div style={{ padding: '5px 0' }}>
<Row>
<Col span={2}><i style={{ color: 'teal' }} class="zmdi zmdi-calendar-alt zmdi-hc-lg"></i></Col>
<Col span={22}>
<div style={{ textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}>
<div>Estimated Finish Date</div>
<div style={{ fontWeight: 500, color: '#8c8c8c' }}>April 1, 2023</div>
</div>
</Col>
</Row>
</div>
</div>
</Col>
<Col span={10}>
<div style={{ margin: '0 5px' }} className="box-header-dashboard-project">
<div style={{ margin: '5px 0' }}><h6>FINANCIALS</h6></div>
<div style={{ padding: '5px 0' }}>
<Row>
<Col span={2}><i style={{ color: '#059669' }} class="zmdi zmdi-money zmdi-hc-lg"></i></Col>
<Col span={22}>
<div style={{ textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}>
<div>Budget To Date (BCWP)</div>
<div style={{ fontWeight: 500, color: '#8c8c8c' }}>Rp. 2.000.000.000</div>
</div>
</Col>
</Row>
</div>
<div style={{ padding: '5px 0' }}>
<Row>
<Col span={2}><i style={{ color: '#059669' }} class="zmdi zmdi-money zmdi-hc-lg"></i></Col>
<Col span={22}>
<div style={{ textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}>
<div>Actual To Date (ACWP)</div>
<div style={{ fontWeight: 500, color: '#8c8c8c' }}>Rp. 1.700.000.000</div>
</div>
</Col>
</Row>
</div>
<div style={{ padding: '5px 0' }}>
<Row>
<Col span={2}><i style={{ color: '#059669' }} class="zmdi zmdi-money zmdi-hc-lg"></i></Col>
<Col span={22}>
<div style={{ textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}>
<div>Variance</div>
<div style={{ fontWeight: 500, color: '#8c8c8c' }}>Rp. 300.000.000</div>
</div>
</Col>
</Row>
</div>
</div>
</Col>
<Col span={5}>
<BoxDashboard
icon={<i style={{ color: '#fff' }} class="zmdi zmdi-money zmdi-hc-lg"></i>}
value="3.200.000.000"
bgColor="#059669"
title="Budget" />
<div style={{ margin: '5px 0' }} className="box-header-dashboard-project">
<div style={{ display: 'flex', justifyContent: 'center' }}>
<div style={{ marginBottom: '5px', fontSize: '0.8rem', fontWeight: '500' }}>ICON SET</div>
</div>
<div style={{ display: 'flex', justifyContent: 'space-evenly', }}>
<div style={{ marginTop: 5 }} className='health-status-good' />
<div style={{ marginTop: 5 }} className='health-status-warning' />
<div style={{ marginTop: 5 }} className='health-status-danger' />
</div>
</div>
</Col>
</Row>
</div>
<div style={{ paddingTop: 20 }}>
<Row>
<Col span={19}>
<Gantt />
<div style={{ marginTop: 15 }}>
<h6>Car Status</h6>
<TableDashboard />
</div>
</Col>
<Col span={5}>
<ChatDashboard />
</Col>
</Row>
</div>
</div>
);
}
export default DashboardProject;

77
src/views/DashboardProject/tableDashboard.js
Unescape View File

@ -0,0 +1,77 @@
import React from 'react';
import { Table, Tag, Space } from 'antd';
const columns = [
{
title: 'No',
dataIndex: 'carNo',
key: 'carNo',
fixed: 'left',
},
{
title: 'Description',
dataIndex: 'description',
key: 'description',
width: 350
},
{
title: 'Severity',
dataIndex: 'severity',
key: 'severity',
render: text => {
return text == 'low' ? <div className="badge" style={{ backgroundColor: '#e6e600' }}>LOW</div> :
text == 'medium' ? <div className="badge badge-orange" style={{ backgroundColor: 'orange' }}>MEDIUM</div> :
<div className="badge badge-danger">HIGH</div>
},
},
{
title: 'Status',
dataIndex: 'status',
key: 'status',
render: text => {
return text == 'open' ? <div className="badge badge-primary">OPEN</div> :
text == 'on-progress' ? <div className="badge badge-warning">ON PROGRESS</div> :
<div className="badge badge-success">DONE</div>
},
},
{
title: 'Assigned',
dataIndex: 'assigned',
key: 'assigned',
},
{
title: 'Due',
dataIndex: 'due',
key: 'due',
}
];
const data = [
{
key: '1',
carNo: 'RIS001',
description: 'Test Analyst on unplanned leave, risk to project if leave extends pas 5/20',
severity: 'medium',
status: 'on-progress',
due: '05/04/2022',
assigned: 'John Lennon'
},
{
key: '2',
carNo: 'RIS002',
description: 'Coffee machine broken, result in extra long breaks to find coffee',
severity: 'low',
status: 'open',
due: '14/011/2022',
assigned: 'Robert William'
},
];
const TableDashboard = () => {
return (
<Table size="small" columns={columns} dataSource={data} scroll={{ y: 300 }} />
);
}
export default TableDashboard;
Write Preview
Loading…
Cancel
Save