Skip to content

T
Tia-dev
Commit 64788e6e authored by EKSAD's avatar EKSAD
Browse files
Options

Visualisasi Report Items

parent 33b53923
Show whitespace changes
Inline Side-by-side
Showing with 125 additions and 101 deletions
src/container/MasterData/formReportItems/VisualReportItems.js
View file @ 64788e6e
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Container, Row, Col } from "react-bootstrap"; import { makeStyles } from '@material-ui/core/styles';
import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles'; import { TextField, List, ListSubheader, Typography } from '@material-ui/core';
import { TextField } from '@material-ui/core'; import MinimizeIcon from '@material-ui/icons/Minimize';
import MenuItem from '@material-ui/core/MenuItem'; 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 = [ const type = [
{ {
value: 'KPI', value: '1',
label: 'KPI', label: 'KPI',
}, },
{ {
value: 'Gatau', value: '2',
label: 'Gatau', label: 'KPI',
}, },
]; ];
const companies = [
{
value: '',
label: '',
},
{
value: '1',
label: 'TIA',
},
{
value: '2',
label: 'TIA',
},
];
export default class VisualReportItems extends Component { export default class VisualReportItems extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
visibleAM: false, open: false
visibleVisual: true
}
} }
state = {
tasks: [
{name:"Angular",type:"lvl1"},
{name:"Typescript",type:"lvl1"},
{name:"React", type:"lvl2"},
{name:"Vue", type:"lvl3"}
]
} }
componentDidMount() { componentDidMount() {
...@@ -39,21 +58,6 @@ export default class VisualReportItems extends Component { ...@@ -39,21 +58,6 @@ export default class VisualReportItems extends Component {
} }
render() { 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 ( return (
<div> <div>
...@@ -65,80 +69,100 @@ export default class VisualReportItems extends Component { ...@@ -65,80 +69,100 @@ export default class VisualReportItems extends Component {
</div> </div>
<div style={{ padding: 25, width: '100%' }}> <div style={{ padding: 25, width: '100%' }}>
<div style={{ width: '100%', padding: 25, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4'}}> <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> <label style={{ color: '#4b4b4b', fontSize: '16px', fontWeight: 'bold' }}>Hirarki Item Laporan</label>
<div className="" style={{ width: 250, marginTop: 8, marginBottom: 28 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} id="reportItems"
id="type" style={{ width: 250 }}
select select
label="Tipe Persetujuan" label="Item Laporan"
// value={this.state.periode} // onChange={handleChange}
onChange={(e) => null} 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) => ( {type.map((option) => (
<MenuItem key={option.value} value={option.value}> <option key={option.value} value={option.value}>
{option.label} {option.label}
</MenuItem> </option>
))} ))}
</TextField> </TextField>
</div> </div>
<div className="grid grid-4x grid-mobile-none gap-15px"> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<div className="column-1"> <TextField
<div className="margin-bottom-20px"> id="company"
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>1. John Doe</label> style={{ width: 250 }}
</div> select
</div> label="Perusahaan"
<div className="column-2"> // onChange={handleChange}
</div> helperText=""
<div className="column-3"> SelectProps={{
</div> native: true,
<div className="column-4"> }}
</div> InputLabelProps={{
</div> style: {
<div className="grid grid-4x grid-mobile-none gap-15px"> fontSize: 11,
<div className="column-1"> fontWeight: 600,
<div className="margin-bottom-20px"> fontFamily: 'Nunito Sans, sans-serif',
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>2. Barbara Rosa</label> color: '#7e8085',
</div> paddingLeft: 10
</div> }
<div className="column-2"> }}
<div className="margin-bottom-20px"> inputProps={{
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>Aneesa Hassan</label> style: {
</div> fontSize: 11,
</div> fontWeight: 600,
<div className="column-3"> fontFamily: 'Nunito Sans, sans-serif',
<div className="margin-bottom-20px"> paddingLeft: 10
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>AND</label> }
</div> }}
</div> >
</div> {companies.map((option) => (
<div className="grid grid-4x grid-mobile-none gap-15px"> <option key={option.value} value={option.value}>
<div className="column-1"> {option.label}
<div className="margin-bottom-20px"> </option>
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>3. Cole Park</label> ))}
</div> </TextField>
</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>
<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>
</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