Skip to content

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

Merge branch 'riri' into 'master' 

Visualisasi Report Items

See merge request !89
parents bad1146d 3ea10554
Hide whitespace changes
Inline Side-by-side
Showing with 125 additions and 101 deletions
src/container/MasterData/formReportItems/VisualReportItems.js
View file @ 4d3f2d99
import React, { Component } from 'react';
import { Container, Row, Col } from "react-bootstrap";
import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import { TextField } from '@material-ui/core';
import MenuItem from '@material-ui/core/MenuItem';
import { makeStyles } from '@material-ui/core/styles';
import { TextField, List, ListSubheader, Typography } from '@material-ui/core';
import MinimizeIcon from '@material-ui/icons/Minimize';
import AddIcon from '@material-ui/icons/Add';
import RemoveIcon from '@material-ui/icons/Remove';
import TreeView from '@material-ui/lab/TreeView';
import TreeItem from '@material-ui/lab/TreeItem';
const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
maxWidth: 500,
backgroundColor: theme.palette.background.paper,
},
nested: {
paddingLeft: theme.spacing(4),
},
}));
const type = [
{
value: 'KPI',
value: '1',
label: 'KPI',
},
{
value: 'Gatau',
label: 'Gatau',
value: '2',
label: 'KPI',
},
];
const companies = [
{
value: '',
label: '',
},
{
value: '1',
label: 'TIA',
},
{
value: '2',
label: 'TIA',
},
];
export default class VisualReportItems extends Component {
constructor(props) {
super(props)
this.state = {
visibleAM: false,
visibleVisual: true
open: false
}
}
state = {
tasks: [
{name:"Angular",type:"lvl1"},
{name:"Typescript",type:"lvl1"},
{name:"React", type:"lvl2"},
{name:"Vue", type:"lvl3"}
]
}
componentDidMount() {
console.log(this.props.height)
}
render() {
// var tasks = {
// lvl1: [],
// lvl2: [],
// lvl3: []
// }
// this.state.tasks.forEach ((task) => {
// tasks[task.type].push(
// <div key={task.taskName}
// className="draggable"
// style = {{backgroundColor: task.bgcolor}}>
// {task.taskName}
// </div>
// );
// });
return (
<div>
......@@ -65,81 +69,101 @@ export default class VisualReportItems extends Component {
</div>
<div style={{ padding: 25, width: '100%' }}>
<div style={{ width: '100%', padding: 25, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4'}}>
<label style={{ color: '#4b4b4b', fontSize: '16px', fontWeight: 'bold' }}>Hirarki Persetujuan</label>
<div className="" style={{ width: 250, marginTop: 8, marginBottom: 28 }}>
<label style={{ color: '#4b4b4b', fontSize: '16px', fontWeight: 'bold' }}>Hirarki Item Laporan</label>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="type"
id="reportItems"
style={{ width: 250 }}
select
label="Tipe Persetujuan"
// value={this.state.periode}
onChange={(e) => null}
>
label="Item Laporan"
// onChange={handleChange}
helperText=""
SelectProps={{
native: true,
}}
InputLabelProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085',
paddingLeft: 10
}
}}
inputProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
}
}}
>
{type.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</TextField>
</div>
<div className="grid grid-4x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>1. John Doe</label>
</div>
</div>
<div className="column-2">
</div>
<div className="column-3">
</div>
<div className="column-4">
</div>
</div>
<div className="grid grid-4x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>2. Barbara Rosa</label>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>Aneesa Hassan</label>
</div>
</div>
<div className="column-3">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>AND</label>
</div>
</div>
</div>
<div className="grid grid-4x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>3. Cole Park</label>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>Levison Robin</label>
</div>
</div>
<div className="column-3">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>OR</label>
</div>
</div>
</div>
<div className="grid grid-4x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>4. Madison Price</label>
</div>
</div>
<div className="column-2">
</div>
<div className="column-3">
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField
id="company"
style={{ width: 250 }}
select
label="Perusahaan"
// onChange={handleChange}
helperText=""
SelectProps={{
native: true,
}}
InputLabelProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085',
paddingLeft: 10
}
}}
inputProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
}
}}
>
{companies.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</TextField>
</div>
<div className="margin-top-30px">
<TreeView
defaultCollapseIcon={<RemoveIcon />}
defaultExpandIcon={< AddIcon/>}
>
<TreeItem nodeId="1" style={{margin: 10}} label="Accumulated Depreciation (negative value)">
<TreeItem nodeId="2" style={{margin: 20}} label="Beginning Balance" />
<TreeItem nodeId="3" style={{margin: 20}} label="Depreciation expense MTD (please fill in, if any)" />
<TreeItem nodeId="4" style={{margin: 20}} label="Disposal (positive value) (please fill in, if any)" />
</TreeItem>
<TreeItem nodeId="10" style={{margin: 20}} label="Control Gain/(Loss) on Fixed Assets" />
<TreeItem nodeId="5" style={{margin: 10}} label="Gain/(Loss) on Fixed Assets">
<TreeItem nodeId="6" style={{margin: 20}} label="NBV">
<TreeItem nodeId="7" style={{margin: 20}} label="Cost"/>
<TreeItem nodeId="9" style={{margin: 20}} label="Accm. Depreciation" />
</TreeItem>
<TreeItem nodeId="10" style={{margin: 20}} label="Proceed from sale or disposal of Fixed Assets (please fill in, if any)" />
</TreeItem>
</TreeView>
</div>
</div>
</div>
<div className="row" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 15, paddingLeft: 15, paddingBottom: 25 }}>
......
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