Skip to content

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

Merge branch 'rifka' into 'master' 

update apprmatrix and add image

See merge request !20
parents 8c28748d b87c0434
Hide whitespace changes
Inline Side-by-side
Showing with 194 additions and 29 deletions
src/assets/Images.js
View file @ d1abb4c9
......@@ -20,6 +20,12 @@ const Images = {
green: require('./green.svg'),
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 @ d1abb4c9
<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/approval.svg 0 → 100644
View file @ d1abb4c9
<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/download.svg 0 → 100644
View file @ d1abb4c9
<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 @ d1abb4c9
<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 @ d1abb4c9
<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 @ d1abb4c9
<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 @ d1abb4c9
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={{ 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%' }}>
<div style={{ height: 150, width: '100%', backgroundColor: '#354960', padding: 24, paddingTop: 30 }}>
<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>
<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' }}>
<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