Skip to content

T
Tia-dev
Commit 0be5cc85 authored by Dida Adams Arizona's avatar Dida Adams Arizona
Browse files
Options

Merge branch 'master' into 'didam' 

# Conflicts:
#   src/assets/Images.js
parents 759c9326 d1abb4c9
Show whitespace changes
Inline Side-by-side
Showing with 144 additions and 33 deletions
src/assets/Images.js
View file @ 0be5cc85
......@@ -17,10 +17,13 @@ const Images = {
key: require('./key.svg'),
green: require('./green.svg'),
red: require('./red.svg'),
template: require('./red.svg'),
add: require('./red.svg'),
download: require('./red.svg'),
upload: require('./red.svg'),
ceklis: require('./ceklis.png'),
approval: require('./approval.svg'),
template: require('./template.svg'),
upload: require('./upload.svg'),
download: require('./download.svg'),
visualisasi: require('./visualisasi.svg'),
add: require('./add.svg'),
//Image
triputra: require('./triputra.png'),
......
src/assets/approval.svg 0 → 100644
View file @ 0be5cc85
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16">
<g fill="none" fill-rule="evenodd" opacity=".9">
<path d="M0 0H24V24H0z" transform="translate(-3 -4)"/>
<g stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2">
<path d="M13.538 5.28v7.028c0 .68-.55 1.23-1.23 1.23H1.23c-.68 0-1.231-.55-1.231-1.23V1.23C0 .55.551 0 1.23 0h10.373" transform="translate(-3 -4) translate(4 5)"/>
<path d="M2.552 6.154L6.217 9.95 14.923 0" transform="translate(-3 -4) translate(4 5)"/>
</g>
</g>
</svg>
src/assets/visualisasi.svg 0 → 100644
View file @ 0be5cc85
<svg xmlns="http://www.w3.org/2000/svg" width="37" height="37" viewBox="0 0 37 37">
<g fill="none" fill-rule="evenodd">
<rect width="37" height="37" fill="#E45858" rx="18.5"/>
<g>
<path d="M0 0H24V24H0z" transform="rotate(90 12 18)"/>
<g fill="#FFF" fill-rule="nonzero">
<path d="M17.901 5.529c-.16-.225-3.99-5.494-8.866-5.494C4.16.035.26 5.305.1 5.53c-.132.184-.132.43 0 .614.16.224 4.061 5.494 8.936 5.494s8.705-5.27 8.866-5.494c.132-.183.132-.43 0-.614zM9.035 9.527C7 9.527 5.274 7.871 5.274 5.836S7 2.144 9.035 2.144c2.036 0 3.692 1.657 3.692 3.692S11.07 9.527 9.035 9.527z" transform="rotate(90 12 18) rotate(-90 13.5 7.5)"/>
<path d="M9.035 4.254c-.872 0-1.652.71-1.652 1.582 0 .872.78 1.582 1.652 1.582.873 0 1.582-.71 1.582-1.582 0-.872-.71-1.582-1.582-1.582z" transform="rotate(90 12 18) rotate(-90 13.5 7.5)"/>
</g>
</g>
</g>
</svg>
src/container/ApprovalMatrix.js
View file @ 0be5cc85
import React, { Component } from 'react';
import { Typography } from '@material-ui/core';
import TextField from "@material-ui/core/TextField";
import Images from '../assets/Images';
import MUIDataTable from "mui-datatables";
class ApprovalMatrix extends Component {
render() {
const columns = [{
name: "Action",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent'
}}
onClick={() => null}
>
<img src={Images.editCopy} />
</button>
</div >
);
}
}
}, "ID", "Tipe Persetujuan", "Order", "Nama Pemberi Persetujuan", "Operator", "Status"]
const data = [
["", "1", "Yearly", "1", "John Doe", "-", "Aktif"],
["", "2", "Yearly", "2", "John Doe", "-", "Aktif"],
["", "3", "Yearly", "2", "John Doe", "AND", "Aktif"],
["", "4", "Yearly", "2", "John Doe", "AND", "Non Aktif"],
["", "5", "Yearly", "3", "John Doe", "-", "Non Aktif"],
]
const options = {
filter: false,
sort: false,
responsive: "scroll",
print: false,
download: false,
selectableRows: false,
viewColumns: false,
rowsPerPage: 5,
search: false
}
return (
<div style={{ flex: 1 }}>
<div style={{ height: 150, width: '100%', backgroundColor: '#354960', padding: 24, paddingTop: 33 }}>
<div style={{ height: 150, width: '100%', backgroundColor: '#354960', padding: 24, paddingTop: 30 }}>
<div style={{ display: 'flex' }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Master Data - Approval Matrix</Typography>
{/* <form>
<TextField id="" label="" variant="outlined" placeholder="Search"/>
</form> */}
</div>
</div>
<div style={{ flex: 1, padding: 20, width: '100%' }}>
<Typography style={{ paddingTop: 8, paddingBottom: 7, fontSize: '16px', color: 'white' }}>Master Data - Approval Matrix</Typography>
<form style={{ marginLeft: 110 }}>
<TextField id="" label="" variant="outlined" size="small" placeholder="Search" style={{ width: 423, backgroundColor: 'white', borderRadius: 6 }}/>
</form>
<div style={{ display: 'flex' }}>
<Typography style={{ color: '#7e8085', fontSize: '11px', textDecorationLine: 'underline', marginRight: 48 }}>Budget - 2021 (0/7)</Typography>
<Typography style={{ color: '#7e8085', fontSize: '11px', textDecorationLine: 'underline', marginRight: 48 }}>Laporan Bulanan - Oct 2020 (1/7)</Typography>
<Typography style={{ color: '#51c6ea', fontSize: '11px', textDecorationLine: 'underline', marginRight: 48 }}>Rolling Outlook - Oct 2020 (0/5)</Typography>
<Typography style={{ color: '#7e8085', fontSize: '11px', textDecorationLine: 'underline' }}>Lainnya</Typography>
</div>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 82,
padding: 0
}}
onClick={() => null}
>
<img src={Images.template} />
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 16,
padding:0
}}
onClick={() => null}
>
<img src={Images.upload} />
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 16,
padding:0
}}
onClick={() => null}
>
<img src={Images.download} />
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 16,
padding:0
}}
onClick={() => null}
>
<img src={Images.visualisasi} />
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 16,
padding:0
}}
onClick={() => null}
>
<img src={Images.add} />
</button>
</div >
</div>
<div style={{ flex: 1, padding: 20, width: '100%' }}>
<div style={{ display: 'flex' }}>
<div style={{ height: 283, width: 398, borderRadius: 6, backgroundColor: '#fff', border: '1px solid #c4c4c4', marginRight: 25, padding: 16 }}>
<Typography style={{ color: '#4b4b4b', fontSize: '16px', fontWeight: 'bold' }}>BALANCE SHEET</Typography>
</div>
<div style={{ height: 283, width: 398, borderRadius: 6, backgroundColor: '#fff', border: '1px solid #c4c4c4' }}>
</div>
</div>
<div style={{ display: 'flex', marginTop: 25 }}>
<div style={{ height: 283, width: 398, borderRadius: 6, backgroundColor: '#fff', border: '1px solid #c4c4c4', marginRight: 25 }}>
</div>
<div style={{ height: 283, width: 398, borderRadius: 6, backgroundColor: '#fff', border: '1px solid #c4c4c4' }}>
</div>
<div style={{ flex: 1, padding: 20, width: '100%' }}>
<div>
<MUIDataTable
data={data}
columns={columns}
options={options}
/>
</div>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment