Skip to content

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

Merge branch 'rifka' into 'master' 

update apprvmatrix dan visualisasi css

See merge request !88
parents dc4b6f25 f7bb9ae2
Hide whitespace changes
Inline Side-by-side
Showing with 303 additions and 68 deletions
src/container/ApprovalMatrix/ApprovalMatrix.js
View file @ bad1146d
...@@ -275,7 +275,7 @@ export default class ApprovalMatrix extends Component { ...@@ -275,7 +275,7 @@ export default class ApprovalMatrix extends Component {
<div> <div>
{this.state.visibleAM === true ? {this.state.visibleAM === true ?
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
<div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} /> <div class="main-color" style={{ height: 199, width: '100%'}} />
<div> <div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}> <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ width: '20%', color: 'white', fontSize: 16, alignSelf: 'center', paddingTop: 8 }}>Master Data - Approval Matrix</label> <label style={{ width: '20%', color: 'white', fontSize: 16, alignSelf: 'center', paddingTop: 8 }}>Master Data - Approval Matrix</label>
...@@ -376,7 +376,7 @@ export default class ApprovalMatrix extends Component { ...@@ -376,7 +376,7 @@ export default class ApprovalMatrix extends Component {
/> />
: :
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
<div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} /> <div class="main-color" style={{ height: 199, width: '100%' }} />
<div> <div>
<div> <div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}> <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
......
src/container/ApprovalMatrix/VisualisasiAM.js
View file @ bad1146d
...@@ -6,6 +6,7 @@ import MenuItem from '@material-ui/core/MenuItem'; ...@@ -6,6 +6,7 @@ import MenuItem from '@material-ui/core/MenuItem';
import ReactDragListView from 'react-drag-listview'; import ReactDragListView from 'react-drag-listview';
import Autocomplete from '@material-ui/lab/Autocomplete'; import Autocomplete from '@material-ui/lab/Autocomplete';
import api from "../../api"; import api from "../../api";
import { none } from 'ramda';
const type = [ const type = [
...@@ -145,10 +146,15 @@ export default class VisualisasiAM extends Component { ...@@ -145,10 +146,15 @@ export default class VisualisasiAM extends Component {
return ( return (
<div> <div>
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
<div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} /> <div class="main-color" style={{ height: 199, width: '100%' }} />
<div> <div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}> <div style={{ display: 'flex', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', width: '20%', fontSize: 16, paddingTop: 8 }}>Visualisasi Data</label> <label style={{ color: 'white', width: '20%', fontSize: 16, paddingTop: 8 }}>Visualisasi</label>
</div>
<div style={{ display: 'flex', paddingRight: 25, paddingLeft: 25 }}>
<label style={{ color: '#51c6ea', width: '20%', fontSize: 11 }}>Master Data / Approval Matrix /
<span style={{ color: 'white', width: '20%', fontSize: 11 }}> Visualisasi</span>
</label>
</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'}}>
...@@ -160,16 +166,16 @@ export default class VisualisasiAM extends Component { ...@@ -160,16 +166,16 @@ export default class VisualisasiAM extends Component {
onChange={(event, newInputValue) => this.setState({typeName:newInputValue.approval_type_name}, () => { onChange={(event, newInputValue) => this.setState({typeName:newInputValue.approval_type_name}, () => {
this.handleInputChange() this.handleInputChange()
})} })}
debug disableClearable
renderInput={(params) => <TextField {...params} label="Tipe" margin="normal" />} renderInput={(params) => <TextField {...params} label="Tipe Persetujuan" margin="normal" />}
/> />
</div> </div>
<ReactDragListView {...dragProps}> <ReactDragListView {...dragProps}>
<ol style={{paddingLeft: 15}}> <ol style={{paddingLeft: 15}}>
{this.state.listApproval.map((item, index) => ( {this.state.listApproval.map((item, index) => (
<li key={index} style={{color: '#525252', fontSize: 14}}> <li key={index} style={{color: '#4b4b4b', fontSize: 14}}>
<a href="#" style={{color: '#525252'}}> <a href='#' style={{ color: '#4b4b4b', fontSize: '14px', cursor: 'auto', outline: 'none' }}>
<div className="grid grid-3x grid-mobile-none gap-20px" style={{width: '75%'}}> <div className="grid grid-3x grid-mobile-none gap-20px margin-bottom-20px" style={{width: '75%'}}>
{item.data.map((items, indexs) => {return(<label>{items.fullname}</label>)})} {item.data.map((items, indexs) => {return(<label>{items.fullname}</label>)})}
<label>{item.data.length == 1? '' : item.data[0].operator_type_name}</label> <label>{item.data.length == 1? '' : item.data[0].operator_type_name}</label>
</div> </div>
...@@ -178,64 +184,6 @@ export default class VisualisasiAM extends Component { ...@@ -178,64 +184,6 @@ export default class VisualisasiAM extends Component {
))} ))}
</ol> </ol>
</ReactDragListView> </ReactDragListView>
{/* <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>
</div> </div>
</div> </div>
<div className="row" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 15, paddingLeft: 15, paddingBottom: 25 }}> <div className="row" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 15, paddingLeft: 15, paddingBottom: 25 }}>
......
src/container/BudgetTahunan/TaxPlanning.js 0 → 100644
View file @ bad1146d
import React, { Component } from 'react';
import { Typography, Paper, createMuiTheme, MuiThemeProvider, TableCell, FormControlLabel, TextField, Input } from '@material-ui/core';
import MUIDataTable from 'mui-datatables';
import NumberFormat from 'react-number-format';
var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptionsFixedColumn();
const style = {
position: "sticky",
left: 0,
background: "white",
zIndex: 101,
};
const style2 = {
position: "sticky",
left: 420,
background: "white",
zIndex: 101
};
export default class BalanceSheet extends Component {
render() {
const columns = [{
name: "Account",
options: {
customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 102, backgroundColor: '#354960', width: 388 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ width: 388 }}>
{tableMeta.rowIndex == 0 || tableMeta.rowIndex == 1 ?
<span style={{ fontSize: 12, fontWeight: 'bold' }}>{val}</span>
:
tableMeta.rowIndex == 2 || tableMeta.rowIndex == 6 || tableMeta.rowIndex == 7 || tableMeta.rowIndex == 8 ?
<span style={{ fontSize: 12, marginLeft: 10 }}>{val}</span> :
<span style={{ fontSize: 12, marginLeft: 20}}>{val}</span>
}
</div>
)
}
}
}, {
name: "31 Dec 2020 Actual",
options: {
customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style2, top: 0, zIndex: 102, backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({
style: {
position: "sticky",
left: 420,
background: "white",
zIndex: 101
}
})
}
}, {
name: "January 2021",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (value, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'right' }}>
{tableMeta.rowIndex === 3 || tableMeta.rowIndex === 4 || tableMeta.rowIndex === 9 ?
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
// <Input
// value={this.formatValue(value)}
// style={{}}
// inputProps={{
// style: {
// color: "#5198ea",
// fontSize: 12,
// textAlign: 'right'
// }
// }}
// disableUnderline={true}
// inputStyle={{ color: 'red' }}
// />
<NumberFormat
thousandSeparator={true}
style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
value={value}
/>
}
onChange={event => updateValue(event.target.value)}
/>
</div> :
<span style={{ fontSize: 12, textAlign: 'right' }}>{value === "" ? "-" : value}</span>
}
</div>
)
}
}
}, {
name: "February 2021",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "March 2021",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "April 2021",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "May 2021",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "June 2021",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "31 Dec 2021 Total",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "31 Dec 2022 Total",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "31 Dec 2023 Total",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}
]
const dataTable = [
["TOTAL ASSETS", "11,247,249", "10,702,196"],
["TOTAL CURRENT ASSETS", "2,647,647", "2,058,898"],
["Cash & Cash Equivalent", "1,464,571", "729,743"],
["Cash & Bank Balance", "938,707", "265584"],
["Time & Call Deposit", "525,864", "464,159"],
["BI Deposit", "", ""],
["Marketable Securities", "150,250", "154,500"],
["Notes Receivable", "", ""],
["Accounts Receivable", "172,031", "97,112"],
["Trade Receivables - Third Party", "142,668", "77,480"],
]
return (
<div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}>
<div style={{ height: 78, backgroundColor: '#354960', flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Budget Tahunan - Tax Planning</Typography>
</div>
<div style={{ flex: 1, padding: 20, width: '100%' }}>
<Paper style={{ paddingTop: 10 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', fontWeight: 'bold', color: '#4b4b4b', margin: 10 }}>Budget Tahunan</Typography>
</div>
<div style={{ padding: 20 }}>
<div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>PT. XYZ</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Periode : 2021</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
</div>
<div style={{ marginTop: 20, width: '100%' }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={dataTable}
columns={columns}
options={options}
/>
</MuiThemeProvider>
</div>
</div>
</Paper>
</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