Skip to content

T
Tia-dev
Commit b87c0434 authored by Rifka Kurnia Irfiana's avatar Rifka Kurnia Irfiana
Browse files
Options

update apprmatrix and add image

parent 7d0ad741
Hide whitespace changes
Inline Side-by-side
Showing with 183 additions and 28 deletions
src/assets/Images.js
View file @ b87c0434
......@@ -21,6 +21,11 @@ const Images = {
red: 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/add.svg 0 → 100644
View file @ b87c0434
<svg xmlns="http://www.w3.org/2000/svg" width="37" height="37" viewBox="0 0 37 37">
<g fill="none" fill-rule="evenodd">
<circle cx="18.5" cy="18.5" r="18.5" fill="#51C6EA"/>
<g>
<path d="M0 0H24V24H0z" transform="translate(6 7)"/>
<g stroke="#FFF" stroke-linecap="round" stroke-width="2">
<path d="M5 0L5 9.218" transform="translate(6 7) translate(7 7)"/>
<path d="M5 0L5 9.218" transform="translate(6 7) translate(7 7) rotate(-90 5 4.61)"/>
</g>
</g>
</g>
</svg>
src/assets/download.svg 0 → 100644
View file @ b87c0434
<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="#47B6AD" rx="18.5"/>
<g>
<path d="M0 0H24V24H0z" transform="rotate(90 12 18)"/>
<g fill="#FFF" fill-rule="nonzero">
<path d="M9.979 6.353c-.071-.156-.226-.255-.397-.255H7.84V.436C7.84.196 7.645 0 7.404 0H5.662c-.24 0-.435.195-.435.436v5.662H3.484c-.17 0-.325.1-.396.255-.071.156-.043.338.069.467l3.049 3.484c.083.095.202.15.327.15.126 0 .245-.056.328-.15L9.91 6.82c.113-.128.14-.311.069-.467z" transform="rotate(90 12 18) rotate(-90 11.5 6.5)"/>
<path d="M11.324 9.582v2.614H1.742V9.582H0v3.485c0 .481.39.87.871.87h11.325c.481 0 .87-.389.87-.87V9.582h-1.742z" transform="rotate(90 12 18) rotate(-90 11.5 6.5)"/>
</g>
</g>
</g>
</svg>
src/assets/template.svg 0 → 100644
View file @ b87c0434
<svg xmlns="http://www.w3.org/2000/svg" width="37" height="37" viewBox="0 0 37 37">
<g fill="none" fill-rule="evenodd">
<circle cx="18.5" cy="18.5" r="18.5" fill="#51C6EA"/>
<circle cx="18.5" cy="18.5" r="18.5" fill="#FFD74C"/>
<g>
<path d="M0 0H24V24H0z" transform="translate(6 7)"/>
<g stroke="#FFF" stroke-width="2" transform="translate(6 7) translate(3 6)">
<path d="M0 6h6v6H1c-.552 0-1-.448-1-1V6h0zM1 0h5v6H0V1c0-.552.448-1 1-1z"/>
<rect width="6" height="6" x="6" y="6" rx="1"/>
<rect width="6" height="6" x="6" rx="1"/>
<path d="M12 6h6v5c0 .552-.448 1-1 1h-5 0V6zM12 0h5c.552 0 1 .448 1 1v5h0-6V0z"/>
</g>
</g>
</g>
</svg>
src/assets/upload.svg 0 → 100644
View file @ b87c0434
<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="#EAB051" rx="18.5"/>
<g>
<path d="M0 0H24V24H0z" transform="rotate(90 12 18)"/>
<g fill="#FFF" fill-rule="nonzero">
<path d="M9.979 4.1c-.071.156-.226.256-.397.256H7.84v5.662c0 .24-.195.435-.436.435H5.662c-.24 0-.435-.195-.435-.435V4.356H3.484c-.17 0-.325-.1-.396-.256-.071-.156-.043-.338.069-.467L6.206.15C6.289.054 6.408 0 6.533 0c.126 0 .245.055.328.149L9.91 3.633c.113.128.14.311.069.467z" transform="rotate(90 12 18) rotate(-90 11.5 6.5)"/>
<path d="M11.324 9.582v2.614H1.742V9.582H0v3.485c0 .481.39.87.871.87h11.325c.481 0 .87-.389.87-.87V9.582h-1.742z" transform="rotate(90 12 18) rotate(-90 11.5 6.5)"/>
</g>
</g>
</g>
</svg>
src/assets/visualisasi.svg 0 → 100644
View file @ b87c0434
<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 @ b87c0434
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"/>
<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' }}>
<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>
<div style={{ flex: 1, padding: 20, width: '100%' }}>
<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>
</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>
<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