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

remove unrelevant dashboard

pull/2/head
Muhammad Sulaiman Yusuf 2 years ago
parent
39a2b533d7
commit
4d1be4a8bb
11 changed files with 0 additions and 991 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. 3
      src/routes.js
  2. 106
      src/views/DashboardPMO/chartDashboard.js
  3. 173
      src/views/DashboardPMO/index.js
  4. 130
      src/views/DashboardPMO/tableDashboard.js
  5. 42
      src/views/DashboardProject/chatDashboard.js
  6. 29
      src/views/DashboardProject/ganttDashboard.js
  7. 171
      src/views/DashboardProject/index.js
  8. 77
      src/views/DashboardProject/tableDashboard.js
  9. 124
      src/views/DashboardSecurity/index.js
  10. 51
      src/views/DashboardSecurity/mapDashboard.js
  11. 85
      src/views/DashboardSecurity/tableDashboard.js

3
src/routes.js
Unescape View File

@ -77,9 +77,6 @@ const routes = [
{ path: '/config-alert', exact: true, name: 'Config Alert', component: ConfigAlert }, { path: '/config-alert', exact: true, name: 'Config Alert', component: ConfigAlert },
// todo : remove // todo : remove
{ path: '/dashboard-pmo', exact: true, name: 'Dashboard PMO', component: DashboardPMO },
{ path: '/dashboard-project', exact: true, name: 'Dashboard Project', component: DashboardProject },
{ path: '/dashboard-security', exact: true, name: 'Dashboard Security', component: DashboardSecurity },
{ path: '/checklist-k3', exact: true, name: 'Checklist K3', component: ChecklistK3 }, { path: '/checklist-k3', exact: true, name: 'Checklist K3', component: ChecklistK3 },
{ path: '/absensi', exact: true, name: 'Absensi', component: Absensi }, { path: '/absensi', exact: true, name: 'Absensi', component: Absensi },
{ path: '/divisi-karyawan', exact: true, name: 'Divisi Karyawan', component: DivisiKaryawan }, { path: '/divisi-karyawan', exact: true, name: 'Divisi Karyawan', component: DivisiKaryawan },

106
src/views/DashboardPMO/chartDashboard.js
Unescape View File

@ -1,106 +0,0 @@
import React from 'react';
import { Doughnut, Bar } from 'react-chartjs-2';
import faker from '@faker-js/faker';
export const optionsDoughnut = {
title: {
display: true,
text: 'PROJECT BY TYPE'
},
};
export const data = {
labels: ['Manned guarding ', 'C&T', 'CMS ', 'ESS', 'RSO'],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
// 'rgba(255, 159, 64, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
// 'rgba(255, 159, 64, 1)',
],
borderWidth: 1,
},
],
};
export const DoughnutChart = () => {
return <Doughnut data={data} options={optionsDoughnut} />;
}
export const options = {
title: {
display: true,
text: 'PROJECT BY GOVERNANCE PHASE'
},
legend: {
position: 'right',
},
responsive: true,
scales: {
yAxes: [{
display: true,
// position: 'right',
stacked: true,
}],
xAxes: [{
display: true,
// position: 'right',
stacked: true,
}],
},
};
const labels = [''];
export const dataBar = {
labels,
datasets: [
{
indexAxis: 'y',
label: 'Initiation',
data: labels.map(() => faker.datatype.number({ min: 0, max: 10 })),
backgroundColor: 'rgb(255, 99, 132)',
},
{
indexAxis: 'y',
label: 'Execution',
data: labels.map(() => faker.datatype.number({ min: 0, max: 10 })),
backgroundColor: 'rgb(75, 192, 192)',
},
{
indexAxis: 'y',
label: 'Closing',
data: labels.map(() => faker.datatype.number({ min: 0, max: 10 })),
backgroundColor: 'rgb(53, 162, 235)',
},
// {
// indexAxis: 'y',
// label: 'Excecution',
// data: labels.map(() => faker.datatype.number({ min: 0, max: 10 })),
// backgroundColor: 'rgba(255, 159, 64, 1)',
// },
],
};
export function BarChart() {
return <Bar indexAxis='y' options={options} data={dataBar} />;
}

173
src/views/DashboardPMO/index.js
Unescape View File

@ -1,173 +0,0 @@
import React from 'react';
import { Row, Col, Select } from 'antd';
import TableDashboard from './tableDashboard';
import { BarChart, DoughnutChart } from './chartDashboard';
function BoxDashboard({ value, title, secondaryTitle, icon, bgColor }) {
return (
<div style={{ backgroundColor: bgColor }} className='box-dashboard-pm'>
<Row>
<Col span={7}>
<div className='box-icon'>
{icon}
</div>
</Col>
<Col span={17}>
<div className='box-content'>
<div style={{ fontSize: '1.4rem' }} className='text-box'>{value}</div>
<div style={{ fontSize: '0.7rem' }} className='text-box'>{title.toUpperCase()}</div>
<div style={{ fontSize: '0.6rem' }} className='text-box-secondary'>{secondaryTitle && secondaryTitle.toUpperCase()}</div>
</div>
</Col>
</Row>
</div>
)
}
const { Option } = Select;
const DashbaoardPM = () => {
const onChange = (value) => {
console.log(`selected ${value}`);
}
const onSearch = (val) => {
console.log('search:', val);
}
return (
<div>
<Row>
<Col span={4}><h6 style={{ textAlign: 'center' }}>PORTOFOLIO DASHBOARD</h6></Col>
<Col span={5}>
<Select
style={{ width: '100%', padding: '0 5px' }}
showSearch
placeholder="Department"
optionFilterProp="children"
onChange={onChange}
onSearch={onSearch}
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="tom">Tom</Option>
</Select>
</Col>
<Col span={5}>
<Select
style={{ width: '100%', padding: '0 5px' }}
showSearch
placeholder="Project Type"
optionFilterProp="children"
onChange={onChange}
onSearch={onSearch}
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{['Manned guarding ', 'C&T', 'CMS ', 'ESS', 'RSO'].map(res => (
<Option value={res}>{res}</Option>
))}
{/* <Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="tom">Tom</Option> */}
</Select>
</Col>
<Col span={5}>
<Select
style={{ width: '100%', padding: '0 5px' }}
showSearch
placeholder="Project Owner"
optionFilterProp="children"
onChange={onChange}
onSearch={onSearch}
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="tom">Tom</Option>
</Select>
</Col>
<Col span={5}>
<Select
style={{ width: '100%', padding: '0 5px' }}
showSearch
placeholder="Governance Phase"
optionFilterProp="children"
onChange={onChange}
onSearch={onSearch}
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{['Initiation ', 'Excecution', 'Closing '].map(res => (
<Option value={res}>{res}</Option>
))}
</Select>
</Col>
</Row>
<div style={{ paddingTop: 10 }}>
<Row>
<Col span={4}>
<BoxDashboard
icon={<i style={{ color: '#fff' }} class="zmdi zmdi-assignment zmdi-hc-3x"></i>}
value="100"
bgColor="teal"
title="Project Count" />
{/* <BoxDashboard
icon={<i style={{ color: '#fff' }} class="zmdi zmdi-money-box zmdi-hc-3x"></i>}
value="19 M"
bgColor="#059669"
title="Project Cost"
secondaryTitle="(dollars)" /> */}
<BoxDashboard
icon={<i style={{ color: '#fff' }} class="zmdi zmdi-money zmdi-hc-3x"></i>}
value="7.2 M"
bgColor="#047857"
title="Cost Variance"
secondaryTitle="(dollars)" />
<BoxDashboard
icon={<i style={{ color: '#fff' }} class="zmdi zmdi-accounts-alt zmdi-hc-3x"></i>}
value="2000"
bgColor="#0284c7"
title="Project Manpower"
/>
<BoxDashboard
icon={<i style={{ color: '#fff' }} class="zmdi zmdi-account zmdi-hc-3x"></i>}
value="540"
bgColor="#0369a1"
title="Manpower Variance"
/>
<BoxDashboard
icon={<i style={{ color: '#fff' }} class="zmdi zmdi-alert-circle zmdi-hc-3x"></i>}
value="80"
bgColor="#b30000"
title="Active Car" />
</Col>
<Col span={20}>
<div style={{ padding: '20px 0 20px 5px' }}>
<Row>
<Col span={12}>
<BarChart />
</Col>
<Col span={12}>
<DoughnutChart />
</Col>
</Row>
</div>
<div style={{ paddingLeft: 5, }}>
<TableDashboard />
</div>
</Col>
</Row>
</div>
</div>
);
}
export default DashbaoardPM;

130
src/views/DashboardPMO/tableDashboard.js
Unescape View File

@ -1,130 +0,0 @@
import React from 'react';
import { Table, Tag, Space } from 'antd';
const columns = [
{
title: 'Project Name',
dataIndex: 'project',
key: 'project',
fixed: 'left',
width: 200,
// render: text => <a>{text}</a>,
},
{
title: 'Project Owner',
dataIndex: 'owner',
key: 'owner',
},
{
title: 'Start Date',
dataIndex: 'startDate',
key: 'startDate',
},
{
title: 'End Date',
dataIndex: 'endDate',
key: 'endDate',
},
{
title: 'Cost',
dataIndex: 'cost',
key: 'cost',
render: text => `Rp. ${text.toLocaleString()}`,
align: 'right'
},
{
title: 'Cost Health',
dataIndex: 'costHealth',
key: 'costHealth',
render: text =>
text === 'good' ? <div className='health-status-good' /> :
text === 'danger' ? <div className='health-status-danger' /> :
text === 'warning' ? <div className='health-status-warning' /> : <div className='health-status-default' />
,
align: 'center',
},
{
title: 'Work Health',
dataIndex: 'workHealth',
key: 'workHealth',
render: text =>
text === 'good' ? <div className='health-status-good' /> :
text === 'danger' ? <div className='health-status-danger' /> :
text === 'warning' ? <div className='health-status-warning' /> : <div className='health-status-default' />,
align: 'center',
},
{
title: 'Schedule Health',
dataIndex: 'scheduleHealth',
key: 'scheduleHealth',
render: text =>
text === 'good' ? <div className='health-status-good' /> :
text === 'danger' ? <div className='health-status-danger' /> :
text === 'warning' ? <div className='health-status-warning' /> : <div className='health-status-default' />,
align: 'center',
},
{
title: '% Complete',
dataIndex: 'complete',
key: 'complete',
render: text => `${text}%`,
align: 'right'
},
// {
// title: 'Action',
// key: 'action',
// render: (text, record) => (
// <Space size="middle">
// <a>Invite {record.name}</a>
// <a>Delete</a>
// </Space>
// ),
// },
];
const data = [
{
key: '1',
project: 'Bay Plaza',
owner: 'John Brown',
startDate: '1/22/2022',
endDate: '1/22/2023',
complete: 20,
cost: 40000000,
costHealth: 'good',
workHealth: 'default',
scheduleHealth: 'warning'
},
{
key: '2',
project: 'Jambi Bridge',
owner: 'Jim Green',
startDate: '4/22/2022',
endDate: '11/22/2023',
complete: 65,
cost: 20000000,
costHealth: 'good',
workHealth: 'default',
scheduleHealth: 'danger'
},
{
key: '3',
project: 'Banten International Airport',
owner: 'Joe Black',
startDate: '1/22/2022',
endDate: '1/22/2025',
complete: 50,
cost: 200000000,
costHealth: 'default',
workHealth: 'default',
scheduleHealth: 'default'
},
];
const TableDashboard = () => {
return (
<Table size="small" columns={columns} dataSource={data} scroll={{ x: 1300, y: 300 }} />
);
}
export default TableDashboard;

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

@ -1,42 +0,0 @@
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;

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

@ -1,29 +0,0 @@
import React, { useEffect, useMemo, useState } from 'react';
import Timeline from 'react-calendar-timeline'
import 'react-calendar-timeline/lib/Timeline.css'
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;

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

@ -1,171 +0,0 @@
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';
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 = () => {
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

@ -1,77 +0,0 @@
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;

124
src/views/DashboardSecurity/index.js
Unescape View File

@ -1,124 +0,0 @@
import React from 'react';
import { Row, Col, Select, DatePicker } from 'antd';
import TableDashboard from './tableDashboard';
import MapDashboard from './mapDashboard';
const { Option } = Select;
const DashboardSecurity = () => {
const onChange = (value) => {
console.log(`selected ${value}`);
}
const onSearch = (val) => {
console.log('search:', val);
}
const onChangeDate = (date, dateString) => {
console.log(date, dateString);
}
return (
<div>
<Row>
<Col span={4}>
<DatePicker style={{ width: '100%' }} onChange={onChangeDate} picker="year" />
</Col>
<Col span={4}>
<Select
style={{ width: '100%', padding: '0 5px' }}
showSearch
placeholder="Month RO"
optionFilterProp="children"
onChange={onChange}
onSearch={onSearch}
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="tom">Tom</Option>
</Select>
</Col>
<Col span={4}>
<Select
style={{ width: '100%', padding: '0 5px' }}
showSearch
placeholder="Project"
optionFilterProp="children"
onChange={onChange}
onSearch={onSearch}
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{['Manned guarding ', 'C&T', 'CMS ', 'ESS', 'RSO'].map(res => (
<Option value={res}>{res}</Option>
))}
{/* <Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="tom">Tom</Option> */}
</Select>
</Col>
<Col span={4}>
<Select
style={{ width: '100%', padding: '0 5px' }}
showSearch
placeholder="Provinsi"
optionFilterProp="children"
onChange={onChange}
onSearch={onSearch}
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value="jack">Jawa Barat</Option>
<Option value="lucy">DKI Jakarta</Option>
<Option value="tom">Jawa Tengah</Option>
<Option value="tom">Jawa Timur</Option>
</Select>
</Col>
<Col span={4}>
<Select
style={{ width: '100%', padding: '0 5px' }}
showSearch
placeholder="Kecamatan"
optionFilterProp="children"
onChange={onChange}
onSearch={onSearch}
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{['Sindang ', 'Kebayoran Lama', 'Kebayoran baru '].map(res => (
<Option value={res}>{res}</Option>
))}
</Select>
</Col>
<Col span={4}>
<Select
style={{ width: '100%', padding: '0 5px' }}
showSearch
placeholder="Kelurahan"
optionFilterProp="children"
onChange={onChange}
onSearch={onSearch}
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{['Radio Dalam ', 'Cipete', 'Haji Nawi '].map(res => (
<Option value={res}>{res}</Option>
))}
</Select>
</Col>
</Row>
<div style={{ margin: '10px 0' }}><MapDashboard /></div>
<div style={{ margin: '10px 0' }}>
<TableDashboard />
</div>
</div>
);
}
export default DashboardSecurity;

51
src/views/DashboardSecurity/mapDashboard.js
Unescape View File

@ -1,51 +0,0 @@
import React, { useEffect } from 'react';
import L from 'leaflet';
let map = null
const MapDashboard = () => {
useEffect(() => {
// INITIALIZE Dashboard
if (!map) {
map = L.map('map', { zoomControl: false }).setView([-2.721044, 116.62442], 5);
L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}
).addTo(map);
L.marker([-6.142719569327774, 106.55132520955486]).addTo(map)
.bindPopup(`
ICN 1
<br>
8 Pencurian`)
.openPopup();
L.marker([-1.9277364358639633, 102.86230604426582]).addTo(map)
.bindPopup(`
ICN 2
<br>
2 Demonstrasi`)
.openPopup();
L.marker([-1.4977487818768103, 114.87755236966134]).addTo(map)
.bindPopup(`
ICN 3
<br>
1 Demonstrasi`)
.openPopup();
}
}, []);
return (
<>
<div id="map" />
</>
);
}
export default MapDashboard;

85
src/views/DashboardSecurity/tableDashboard.js
Unescape View File

@ -1,85 +0,0 @@
import React from 'react';
import { Table, Tag, Space } from 'antd';
const columns = [
{
title: 'No',
dataIndex: 'key',
key: 'key',
width: 50
},
{
title: 'ICN',
dataIndex: 'icn',
key: 'icn',
},
{
title: 'Project Name',
dataIndex: 'project',
key: 'project',
width: 300
},
{
title: 'Project Location',
dataIndex: 'location',
key: 'location',
},
{
title: 'Incident Date',
dataIndex: 'startDate',
key: 'startDate',
},
{
title: 'Incident',
dataIndex: 'incident',
key: 'incident',
},
{
title: 'Status',
dataIndex: 'status',
key: 'status',
render: text => {
return text == 'open' ? <div className="badge badge-primary">OPEN</div> : <div className="badge badge-success">CLOSE</div>
},
}
];
const data = [
{
key: '1',
icn: 'ICN 1',
project: 'Banten International Airport',
status: 'close',
location: 'Banten',
startDate: '17/01/2022',
incident: 'Pencurian',
},
{
key: '2',
icn: 'ICN 2',
project: 'Jambi Bridge',
location: 'Jambi',
status: 'open',
startDate: '04/2/2022',
incident: 'Demonstrasi',
},
{
key: '3',
icn: 'ICN 3',
project: 'Bay Plaza',
location: 'Kalimantan',
status: 'open',
startDate: '28/3/2022',
incident: 'Demonstrasi',
}
];
const TableDashboard = () => {
return (
<Table size="small" columns={columns} dataSource={data} scroll={{ y: 300 }} />
);
}
export default TableDashboard;
Write Preview
Loading…
Cancel
Save