Skip to content

T
Tia-dev
Commit 58e9050b authored by Riri Novita's avatar Riri Novita
Browse files
Options

Merge branch 'riri' into 'master' 

mtd

See merge request !1085
parents 9616c8e3 7afd3df7
Hide whitespace changes
Inline Side-by-side
Showing with 379 additions and 12052 deletions
src/container/Laporan/DBFR.js deleted 100644 → 0
View file @ 9616c8e3
This source diff could not be displayed because it is too large. You can view the blob instead.
src/container/Laporan/DBOI.js deleted 100644 → 0
View file @ 9616c8e3
import React, { Component } from 'react';
import { Typography, Paper, createMuiTheme, MuiThemeProvider, TableCell, FormControlLabel, TextField, Input, Tooltip, withStyles, Snackbar } from '@material-ui/core';
import MUIDataTable from 'mui-datatables';
import NumberFormat from 'react-number-format';
import api from '../../api';
import AddIcon from '@material-ui/icons/Add';
import { values } from 'ramda';
import PropagateLoader from "react-spinners/PropagateLoader"
import Images from '../../assets/Images';
import ReactTooltip from 'react-tooltip';
import UploadFile from "../../library/Upload";
import { ExcelRenderer } from 'react-excel-renderer';
import { Alert } from '@material-ui/lab';
import * as R from 'ramda';
const LightTooltip = withStyles((theme) => ({
tooltip: {
backgroundColor: theme.palette.common.white,
color: 'rgba(0, 0, 0, 0.87)',
boxShadow: theme.shadows[1],
fontSize: 11,
},
}))(Tooltip);
var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable3());
const options = ct.customOptionsFixedColumn();
const style = {
position: "sticky",
left: 0,
zIndex: 101,
background: "white",
};
const style2 = {
position: "sticky",
background: "white",
zIndex: 100,
top: 0
};
export default class DBOI extends Component {
constructor(props) {
super(props)
this.state = {
dataTable: [],
loading: false,
}
}
componentDidMount() {
// this.getItemHierarki()
}
closeAlert() {
this.setState({ alert: false })
}
render() {
const columnDBOI = [
{
name: "Account",
options: {
customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: '#1c71b8', width: 300 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ width: 300 }}>
{
tableMeta.rowData[4] == 0 ?
<span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()}</span>
:
<div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
<span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : val}</span>
</div>
}
</div>
)
}
}
}, {
name: "UOM",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderLeft: '1px #fff solid', borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 || tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
// value={val}
control={
<Input
disableUnderline={true}
style={{ color: "#000", fontSize: 12, textAlign: 'left', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
defaultValue={val}
// onBlur={(event) => {
// // updateValue(event.target.value)
// handleNotes(event.target.value, tableMeta)
// // console.log(dataTable2)
// }}
/>
}
/>
</div>
}
</div>
)
}
}
}, {
name: `MB ${this.props.periode} (Trial Balance - Fiscal)`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#000', backgroundColor: '#07a7d0', top: 0, zIndex: 102, fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
{/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> */}
<div style={{ borderBottom: "1px #fff solid", backgroundColor: 'rgb(200 224 229)', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-3x" style={{ ...style2, color: '#000', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: 'rgb(200 224 229)' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"1"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"2"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"3"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"4"}</span>
</div>
</div>
<div className="column-2 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: 'rgb(200 224 229)' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"5"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"6"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"7"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"8"}</span>
</div>
</div>
<div className="column-3 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: 'rgb(200 224 229)' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"9"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"10"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"11"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: 'rgb(200 224 229)' }}>
<span>{"12"}</span>
</div>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
console.log(tableMeta)
return (
<div>
<div className="grid grid-3x content-center">
<div className="grid grid-4x content-center">
<div className="col-1">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(1).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-2">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(2).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-3">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(3).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-4">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(4).toFixed(1)}
/>
}
/>
</div>
}
</div>
</div>
<div className="grid grid-4x content-center">
<div className="col-1">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(5).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-2">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(6).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-3">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(7).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-4">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(8).toFixed(1)}
/>
}
/>
</div>
}
</div>
</div>
<div className="grid grid-4x content-center">
<div className="col-1">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(9).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-2">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(10).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-3">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(11).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-4">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(12).toFixed(1)}
/>
}
/>
</div>
}
</div>
</div>
</div>
</div>
)
}
}
}, {
name: `ACTUAL ${this.props.periode}`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', top: 0, zIndex: 102, fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
{/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> */}
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#07a7d0', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-3x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: '#07a7d0' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"1"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"2"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"3"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"4"}</span>
</div>
</div>
<div className="column-2 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: '#07a7d0' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"5"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"6"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"7"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"8"}</span>
</div>
</div>
<div className="column-3 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: '#07a7d0' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"9"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"10"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"11"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#07a7d0' }}>
<span>{"12"}</span>
</div>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
console.log(tableMeta)
return (
<div>
<div className="grid grid-3x content-center">
<div className="grid grid-4x content-center">
<div className="col-1">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(1).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-2">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(2).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-3">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(3).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-4">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(4).toFixed(1)}
/>
}
/>
</div>
}
</div>
</div>
<div className="grid grid-4x content-center">
<div className="col-1">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(5).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-2">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(6).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-3">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(7).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-4">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(8).toFixed(1)}
/>
}
/>
</div>
}
</div>
</div>
<div className="grid grid-4x content-center">
<div className="col-1">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(9).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-2">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(10).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-3">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(11).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-4">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(12).toFixed(1)}
/>
}
/>
</div>
}
</div>
</div>
</div>
</div>
)
}
}
}
]
let datas = [
["ABCD", "Testing", { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }],
["Total Assets", "Notes", { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }]
]
const loadingComponent = (
<div style={{ position: 'absolute', zIndex: 110, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)' }}>
<PropagateLoader
// css={override}
size={20}
color={"#274B80"}
loading={this.state.loading}
/>
</div>
);
return (
<div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}>
<div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>FINANCIAL SUMMARY OF TRIPUTRA GROUP</Typography>
</div>
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert}
</Alert>
</Snackbar>
{/* {this.state.loading && loadingComponent} */}
<div style={{ flex: 1, padding: 20, width: '100%' }}>
{/* {this.state.visibleTP === true ? */}
<Paper style={{ paddingTop: 10, paddingBottom: 20 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Sub Holding Report</Typography>
</div>
<div style={{ padding: 20 }}>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Operating Indicator - Monthly (Database)</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Period : 2021 </Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
</div>
<div style={{ width: '50%' }}>
{this.state.dataTable.length == 0 ? null : this.props.isApprover == true ?
<div style={{ justifyContent: 'flex-end', display: 'flex', flexFlow: 'wrap' }}>
<a data-tip={'Download'} data-for="download">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() =>
this.setState({ loading: true }, () => {
setTimeout(() => {
this.downloadAllData()
}, 100);
})}
>
<img src={Images.download} />
</button>
</a>
<ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
</div> :
<div style={{ justifyContent: 'flex-end', display: 'flex', flexFlow: 'wrap' }}>
{((this.props.lastStatus === 'SUBMIT' || this.props.lastStatus === 'REVISION') && this.props.prevRevision === false && (this.props.status === 'revision' || this.props.status === 'not-yet' || this.props.status === 'draft' || this.props.status === 'submitted')) && (
<div>
<a data-tip={'Download Template'} data-for="template">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => this.downloadTemplate()}
>
<img src={Images.template} />
</button>
</a>
<ReactTooltip border={true} id="template" place="bottom" type="light" effect="solid" />
</div>
)}
{((this.props.lastStatus === 'SUBMIT' || this.props.lastStatus === 'REVISION') && this.props.prevRevision === false && (this.props.status === 'revision' || this.props.status === 'not-yet' || this.props.status === 'draft' || this.props.status === 'submitted')) && (
<div>
<a data-tip={'Upload'} data-for="upload">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => this.setState({ visibleUpload: true })}
>
<img src={Images.upload} />
</button>
</a>
<ReactTooltip border={true} id="upload" place="bottom" type="light" effect="solid" />
</div>
)}
<a data-tip={'Download'} data-for="download">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() =>
this.setState({ loading: true }, () => {
setTimeout(() => {
this.downloadAllData()
}, 100);
})}
>
<img src={Images.download} />
</button>
</a>
<ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
</div>
}
</div>
</div>
<div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150) }}>
{this.state.loading && loadingComponent}
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={datas}
columns={columnDBOI}
options={options}
/>
</MuiThemeProvider>
</div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b', marginTop: 20 }}>Last Updated by : {this.state.updateBy}</Typography>
</div>
<div className="grid grid-2x" style={{ marginTop: 20 }}>
<div className="col-1">
<button
type="button"
onClick={() => this.setState({ loading: true }, () => {
setTimeout(() => {
this.props.onClickClose()
}, 100);
})}
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none'
}}
>
<div style={{ backgroundColor: '#019ce5', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Cancel</Typography>
</div>
</button>
</div>
{this.props.isApprover === true || this.state.dataTable.length == 0 ? null :
(this.props.lastStatus === 'SUBMIT' || this.props.lastStatus === 'REVISION') && this.props.prevRevision === false && (this.props.status === 'revision' || this.props.status === 'not-yet' || this.props.status === 'draft' || this.props.status === 'submitted') ?
<div className="col-2" style={{ display: 'flex', justifyContent: 'flex-end', maxWidth: '100%' }}>
<button
className="button"
type="button"
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
onClick={() => {
// this.forceUpdate()
this.setState({ loading: true, buttonDraft: false }, () => {
setTimeout(() => {
// this.setState({ loading: false, buttonError: false, editable: true })
this.handleValidate()
}, 100);
})
}}
>
<div style={{ backgroundColor: '#fff', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960' }}>
<Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Calculate</Typography>
</div>
</button>
<button
className="button"
type="button"
onClick={() =>
this.state.saveDraft === true ?
null :
this.state.handleTekTekTek == 1 ? null :
this.setState({ handleTekTekTek: 1, loading: true }, () => {
setTimeout(() => {
this.backToMasterBudget('draft')
}, 100);
})
}
style={{
backgroundColor: 'transparent',
cursor: this.state.saveDraft !== true ? 'pointer' : 'default',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
>
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save as Draft</Typography>
</div>
</button>
<button
type="button"
disabled={this.state.buttonError}
onClick={() => this.state.buttonError ?
this.setState({ alert: true, messageAlert: 'Data is not complete !', tipeAlert: 'warning' })
:
this.state.handleTekTekTek == 1 ? null :
this.setState({ handleTekTekTek: 1, loading: true }, () => {
setTimeout(() => {
this.backToMasterBudget('submitted')
}, 100);
})}
style={{
backgroundColor: 'transparent',
cursor: this.state.buttonError === true ? 'default' : 'pointer',
borderColor: 'transparent',
outline: 'none'
}}
>
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', marginRight: 20 }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save & Complete</Typography>
</div>
</button>
</div>
: null }
</div>
</Paper>
</div>
</div>
);
}
}
src/container/Laporan/DBTP.js deleted 100644 → 0
View file @ 9616c8e3
import React, { Component } from 'react';
import { Typography, Paper, createMuiTheme, MuiThemeProvider, TableCell, FormControlLabel, TextField, Input, Tooltip, withStyles, Snackbar } from '@material-ui/core';
import MUIDataTable from 'mui-datatables';
import NumberFormat from 'react-number-format';
import api from '../../api';
import AddIcon from '@material-ui/icons/Add';
import { values } from 'ramda';
import PropagateLoader from "react-spinners/PropagateLoader"
import Images from '../../assets/Images';
import ReactTooltip from 'react-tooltip';
import UploadFile from "../../library/Upload";
import { ExcelRenderer } from 'react-excel-renderer';
import { Alert } from '@material-ui/lab';
import * as R from 'ramda';
const LightTooltip = withStyles((theme) => ({
tooltip: {
backgroundColor: theme.palette.common.white,
color: 'rgba(0, 0, 0, 0.87)',
boxShadow: theme.shadows[1],
fontSize: 11,
},
}))(Tooltip);
var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable3());
const options = ct.customOptionsFixedColumn();
const style = {
position: "sticky",
left: 0,
zIndex: 101,
background: "white",
};
const style2 = {
position: "sticky",
background: "white",
zIndex: 100,
top: 0
};
export default class DBTP extends Component {
constructor(props) {
super(props)
this.state = {
dataTable: [],
loading: false,
}
}
componentDidMount() {
// this.getItemHierarki()
}
closeAlert() {
this.setState({ alert: false })
}
render() {
const columnDBTP = [
{
name: "Account",
options: {
customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: '#1c71b8', width: 300 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ width: 300 }}>
{
tableMeta.rowData[4] == 0 ?
<span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()}</span>
:
<div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
<span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : val}</span>
</div>
}
</div>
)
}
}
}, {
name: `MB ${this.props.periode} (Trial Balance - Fiscal)`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#000', backgroundColor: '#07a7d0', top: 0, zIndex: 102, fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
{/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> */}
<div style={{ borderBottom: "1px #fff solid", backgroundColor: 'rgb(200 224 229)', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-3x" style={{ ...style2, color: '#000', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: 'rgb(200 224 229)' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"1"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"2"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"3"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"4"}</span>
</div>
</div>
<div className="column-2 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: 'rgb(200 224 229)' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"5"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"6"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"7"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"8"}</span>
</div>
</div>
<div className="column-3 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: 'rgb(200 224 229)' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"9"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"10"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"11"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: 'rgb(200 224 229)' }}>
<span>{"12"}</span>
</div>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
console.log(tableMeta)
return (
<div>
<div className="grid grid-3x content-center">
<div className="grid grid-4x content-center">
<div className="col-1">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(1).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-2">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(2).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-3">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(3).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-4">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(4).toFixed(1)}
/>
}
/>
</div>
}
</div>
</div>
<div className="grid grid-4x content-center">
<div className="col-1">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(5).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-2">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(6).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-3">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(7).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-4">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(8).toFixed(1)}
/>
}
/>
</div>
}
</div>
</div>
<div className="grid grid-4x content-center">
<div className="col-1">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(9).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-2">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(10).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-3">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(11).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-4">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(12).toFixed(1)}
/>
}
/>
</div>
}
</div>
</div>
</div>
</div>
)
}
}
}, {
name: `ACTUAL ${this.props.periode}`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', top: 0, zIndex: 102, fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
{/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> */}
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#07a7d0', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-3x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: '#07a7d0' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"1"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"2"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"3"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"4"}</span>
</div>
</div>
<div className="column-2 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: '#07a7d0' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"5"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"6"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"7"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"8"}</span>
</div>
</div>
<div className="column-3 grid grid-5x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: '#07a7d0' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"9"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"10"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"11"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"12"}</span>
</div>
<div className="column-5" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#07a7d0' }}>
<span>{"FY"}</span>
</div>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
console.log(tableMeta)
return (
<div>
<div className="grid grid-3x content-center">
<div className="grid grid-4x content-center">
<div className="col-1">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(1).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-2">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(2).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-3">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(3).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-4">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(4).toFixed(1)}
/>
}
/>
</div>
}
</div>
</div>
<div className="grid grid-4x content-center">
<div className="col-1">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(5).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-2">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(6).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-3">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(7).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-4">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(8).toFixed(1)}
/>
}
/>
</div>
}
</div>
</div>
<div className="grid grid-5x content-center">
<div className="col-1">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(9).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-2">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(10).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-3">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(11).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-4">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(12).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-5">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(13).toFixed(1)}
/>
}
/>
</div>
}
</div>
</div>
</div>
</div>
)
}
}
}
]
let datas = [
["ABCD", { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }],
["Total Assets", { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }]
]
const loadingComponent = (
<div style={{ position: 'absolute', zIndex: 110, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)' }}>
<PropagateLoader
// css={override}
size={20}
color={"#274B80"}
loading={this.state.loading}
/>
</div>
);
return (
<div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}>
<div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>FINANCIAL SUMMARY OF TRIPUTRA GROUP</Typography>
</div>
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert}
</Alert>
</Snackbar>
{/* {this.state.loading && loadingComponent} */}
<div style={{ flex: 1, padding: 20, width: '100%' }}>
{/* {this.state.visibleTP === true ? */}
<Paper style={{ paddingTop: 10, paddingBottom: 20 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Sub Holding Report</Typography>
</div>
<div style={{ padding: 20 }}>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Tax Planning - Monthly (Database)</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Period : 2021 </Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
</div>
<div style={{ width: '50%' }}>
{this.state.dataTable.length == 0 ? null : this.props.isApprover == true ?
<div style={{ justifyContent: 'flex-end', display: 'flex', flexFlow: 'wrap' }}>
<a data-tip={'Download'} data-for="download">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() =>
this.setState({ loading: true }, () => {
setTimeout(() => {
this.downloadAllData()
}, 100);
})}
>
<img src={Images.download} />
</button>
</a>
<ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
</div> :
<div style={{ justifyContent: 'flex-end', display: 'flex', flexFlow: 'wrap' }}>
{((this.props.lastStatus === 'SUBMIT' || this.props.lastStatus === 'REVISION') && this.props.prevRevision === false && (this.props.status === 'revision' || this.props.status === 'not-yet' || this.props.status === 'draft' || this.props.status === 'submitted')) && (
<div>
<a data-tip={'Download Template'} data-for="template">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => this.downloadTemplate()}
>
<img src={Images.template} />
</button>
</a>
<ReactTooltip border={true} id="template" place="bottom" type="light" effect="solid" />
</div>
)}
{((this.props.lastStatus === 'SUBMIT' || this.props.lastStatus === 'REVISION') && this.props.prevRevision === false && (this.props.status === 'revision' || this.props.status === 'not-yet' || this.props.status === 'draft' || this.props.status === 'submitted')) && (
<div>
<a data-tip={'Upload'} data-for="upload">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => this.setState({ visibleUpload: true })}
>
<img src={Images.upload} />
</button>
</a>
<ReactTooltip border={true} id="upload" place="bottom" type="light" effect="solid" />
</div>
)}
<a data-tip={'Download'} data-for="download">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() =>
this.setState({ loading: true }, () => {
setTimeout(() => {
this.downloadAllData()
}, 100);
})}
>
<img src={Images.download} />
</button>
</a>
<ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
</div>
}
</div>
</div>
<div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150) }}>
{this.state.loading && loadingComponent}
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={datas}
columns={columnDBTP}
options={options}
/>
</MuiThemeProvider>
</div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b', marginTop: 20 }}>Last Updated by : {this.state.updateBy}</Typography>
</div>
<div className="grid grid-2x" style={{ marginTop: 20 }}>
<div className="col-1">
<button
type="button"
onClick={() => this.setState({ loading: true }, () => {
setTimeout(() => {
this.props.onClickClose()
}, 100);
})}
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none'
}}
>
<div style={{ backgroundColor: '#019ce5', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Cancel</Typography>
</div>
</button>
</div>
{this.props.isApprover === true || this.state.dataTable.length == 0 ? null :
(this.props.lastStatus === 'SUBMIT' || this.props.lastStatus === 'REVISION') && this.props.prevRevision === false && (this.props.status === 'revision' || this.props.status === 'not-yet' || this.props.status === 'draft' || this.props.status === 'submitted') ?
<div className="col-2" style={{ display: 'flex', justifyContent: 'flex-end', maxWidth: '100%' }}>
<button
className="button"
type="button"
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
onClick={() => {
// this.forceUpdate()
this.setState({ loading: true, buttonDraft: false }, () => {
setTimeout(() => {
// this.setState({ loading: false, buttonError: false, editable: true })
this.handleValidate()
}, 100);
})
}}
>
<div style={{ backgroundColor: '#fff', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960' }}>
<Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Calculate</Typography>
</div>
</button>
<button
className="button"
type="button"
onClick={() =>
this.state.saveDraft === true ?
null :
this.state.handleTekTekTek == 1 ? null :
this.setState({ handleTekTekTek: 1, loading: true }, () => {
setTimeout(() => {
this.backToMasterBudget('draft')
}, 100);
})
}
style={{
backgroundColor: 'transparent',
cursor: this.state.saveDraft !== true ? 'pointer' : 'default',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
>
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save as Draft</Typography>
</div>
</button>
<button
type="button"
disabled={this.state.buttonError}
onClick={() => this.state.buttonError ?
this.setState({ alert: true, messageAlert: 'Data is not complete !', tipeAlert: 'warning' })
:
this.state.handleTekTekTek == 1 ? null :
this.setState({ handleTekTekTek: 1, loading: true }, () => {
setTimeout(() => {
this.backToMasterBudget('submitted')
}, 100);
})}
style={{
backgroundColor: 'transparent',
cursor: this.state.buttonError === true ? 'default' : 'pointer',
borderColor: 'transparent',
outline: 'none'
}}
>
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', marginRight: 20 }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save & Complete</Typography>
</div>
</button>
</div>
: null }
</div>
</Paper>
</div>
</div>
);
}
}
src/container/Laporan/SummaryBS.js deleted 100644 → 0
View file @ 9616c8e3
import React, { Component } from 'react';
import { Typography, Paper, createMuiTheme, MuiThemeProvider, TableCell, FormControlLabel, TextField, Input, Tooltip, withStyles, Snackbar } from '@material-ui/core';
import MUIDataTable from 'mui-datatables';
import NumberFormat from 'react-number-format';
import api from '../../api';
import AddIcon from '@material-ui/icons/Add';
import { values } from 'ramda';
import PropagateLoader from "react-spinners/PropagateLoader"
import Images from '../../assets/Images';
import ReactTooltip from 'react-tooltip';
import UploadFile from "../../library/Upload";
import { ExcelRenderer } from 'react-excel-renderer';
import { Alert } from '@material-ui/lab';
import * as R from 'ramda';
const LightTooltip = withStyles((theme) => ({
tooltip: {
backgroundColor: theme.palette.common.white,
color: 'rgba(0, 0, 0, 0.87)',
boxShadow: theme.shadows[1],
fontSize: 11,
},
}))(Tooltip);
var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable3());
const options = ct.customOptionsFixedColumn();
const style = {
position: "sticky",
left: 0,
zIndex: 101,
background: "white",
};
const style2 = {
position: "sticky",
background: "white",
zIndex: 100,
top: 0
};
export default class SummaryBS extends Component {
constructor(props) {
super(props)
this.state = {
dataTable: [],
loading: false,
}
}
componentDidMount() {
// this.getItemHierarki()
}
closeAlert() {
this.setState({ alert: false })
}
render() {
const columnSummaryBS = [
{
name: "Account",
options: {
customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: '#1c71b8', width: 300 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ width: 300 }}>
{
tableMeta.rowData[4] == 0 ?
<span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()}</span>
:
<div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
<span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : val}</span>
</div>
}
</div>
)
}
}
}, {
name: `MTD 2021`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#000', backgroundColor: '#07a7d0', top: 0, zIndex: 102, fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
{/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> */}
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-2x" style={{ ...style2, color: '#000', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: 'rgb(200 224 229)' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Last Month"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Actual"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"MB"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"% of MB"}</span>
</div>
</div>
<div className="column-2 grid grid-3x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: 'rgb(200 224 229)' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"OL"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"% of OL"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Last Year"}</span>
</div>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
console.log(tableMeta)
return (
<div>
<div className="grid grid-2x content-center">
<div className="grid grid-4x content-center">
<div className="col-1">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(1).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-2">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(2).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-3">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(3).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-4">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(4).toFixed(1)}
/>
}
/>
</div>
}
</div>
</div>
<div className="grid grid-3x content-center">
<div className="col-1">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(5).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-2">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(6).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-3">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(7).toFixed(1)}
/>
}
/>
</div>
}
</div>
</div>
</div>
</div>
)
}
}
}, {
name: "2022",
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', fontSize: 13, top: 0, zIndex: 102, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
{/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> */}
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-1x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#1c71b8', width: 96 }}>
<span>{"ForeCast"}</span>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta) => {
return (
<div style={{textAlign: 'right' }}>
</div>
)
}
}
}, {
name: "2023",
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', fontSize: 13, top: 0, zIndex: 102, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
{/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> */}
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-1x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#1c71b8', width: 96 }}>
<span>{"ForeCast"}</span>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta) => {
return (
<div style={{textAlign: 'right' }}>
</div>
)
}
}
}
]
let datas = [
["ABCD", { a: "0", b: "0", c: "0", d: "0" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }],
["Total Assets", { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }]
]
const loadingComponent = (
<div style={{ position: 'absolute', zIndex: 110, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)' }}>
<PropagateLoader
// css={override}
size={20}
color={"#274B80"}
loading={this.state.loading}
/>
</div>
);
return (
<div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}>
<div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>FINANCIAL SUMMARY OF TRIPUTRA GROUP</Typography>
</div>
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert}
</Alert>
</Snackbar>
{/* {this.state.loading && loadingComponent} */}
<div style={{ flex: 1, padding: 20, width: '100%' }}>
{/* {this.state.visibleTP === true ? */}
<Paper style={{ paddingTop: 10, paddingBottom: 20 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Historical</Typography>
</div>
<div style={{ padding: 20 }}>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Historical</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Period : 2021 </Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
</div>
<div style={{ width: '50%' }}>
{this.state.dataTable.length == 0 ? null : this.props.isApprover == true ?
<div style={{ justifyContent: 'flex-end', display: 'flex', flexFlow: 'wrap' }}>
<a data-tip={'Download'} data-for="download">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() =>
this.setState({ loading: true }, () => {
setTimeout(() => {
this.downloadAllData()
}, 100);
})}
>
<img src={Images.download} />
</button>
</a>
<ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
</div> :
<div style={{ justifyContent: 'flex-end', display: 'flex', flexFlow: 'wrap' }}>
{((this.props.lastStatus === 'SUBMIT' || this.props.lastStatus === 'REVISION') && this.props.prevRevision === false && (this.props.status === 'revision' || this.props.status === 'not-yet' || this.props.status === 'draft' || this.props.status === 'submitted')) && (
<div>
<a data-tip={'Download Template'} data-for="template">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => this.downloadTemplate()}
>
<img src={Images.template} />
</button>
</a>
<ReactTooltip border={true} id="template" place="bottom" type="light" effect="solid" />
</div>
)}
{((this.props.lastStatus === 'SUBMIT' || this.props.lastStatus === 'REVISION') && this.props.prevRevision === false && (this.props.status === 'revision' || this.props.status === 'not-yet' || this.props.status === 'draft' || this.props.status === 'submitted')) && (
<div>
<a data-tip={'Upload'} data-for="upload">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => this.setState({ visibleUpload: true })}
>
<img src={Images.upload} />
</button>
</a>
<ReactTooltip border={true} id="upload" place="bottom" type="light" effect="solid" />
</div>
)}
<a data-tip={'Download'} data-for="download">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() =>
this.setState({ loading: true }, () => {
setTimeout(() => {
this.downloadAllData()
}, 100);
})}
>
<img src={Images.download} />
</button>
</a>
<ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
</div>
}
</div>
</div>
<div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150) }}>
{this.state.loading && loadingComponent}
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={datas}
columns={columnSummaryBS}
options={options}
/>
</MuiThemeProvider>
</div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b', marginTop: 20 }}>Last Updated by : {this.state.updateBy}</Typography>
</div>
<div className="grid grid-2x" style={{ marginTop: 20 }}>
<div className="col-1">
<button
type="button"
onClick={() => this.setState({ loading: true }, () => {
setTimeout(() => {
this.props.onClickClose()
}, 100);
})}
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none'
}}
>
<div style={{ backgroundColor: '#019ce5', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Cancel</Typography>
</div>
</button>
</div>
{this.props.isApprover === true || this.state.dataTable.length == 0 ? null :
(this.props.lastStatus === 'SUBMIT' || this.props.lastStatus === 'REVISION') && this.props.prevRevision === false && (this.props.status === 'revision' || this.props.status === 'not-yet' || this.props.status === 'draft' || this.props.status === 'submitted') ?
<div className="col-2" style={{ display: 'flex', justifyContent: 'flex-end', maxWidth: '100%' }}>
<button
className="button"
type="button"
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
onClick={() => {
// this.forceUpdate()
this.setState({ loading: true, buttonDraft: false }, () => {
setTimeout(() => {
// this.setState({ loading: false, buttonError: false, editable: true })
this.handleValidate()
}, 100);
})
}}
>
<div style={{ backgroundColor: '#fff', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960' }}>
<Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Calculate</Typography>
</div>
</button>
<button
className="button"
type="button"
onClick={() =>
this.state.saveDraft === true ?
null :
this.state.handleTekTekTek == 1 ? null :
this.setState({ handleTekTekTek: 1, loading: true }, () => {
setTimeout(() => {
this.backToMasterBudget('draft')
}, 100);
})
}
style={{
backgroundColor: 'transparent',
cursor: this.state.saveDraft !== true ? 'pointer' : 'default',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
>
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save as Draft</Typography>
</div>
</button>
<button
type="button"
disabled={this.state.buttonError}
onClick={() => this.state.buttonError ?
this.setState({ alert: true, messageAlert: 'Data is not complete !', tipeAlert: 'warning' })
:
this.state.handleTekTekTek == 1 ? null :
this.setState({ handleTekTekTek: 1, loading: true }, () => {
setTimeout(() => {
this.backToMasterBudget('submitted')
}, 100);
})}
style={{
backgroundColor: 'transparent',
cursor: this.state.buttonError === true ? 'default' : 'pointer',
borderColor: 'transparent',
outline: 'none'
}}
>
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', marginRight: 20 }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save & Complete</Typography>
</div>
</button>
</div>
: null }
</div>
</Paper>
</div>
</div>
);
}
}
src/container/Laporan/SummaryCF.js deleted 100644 → 0
View file @ 9616c8e3
This source diff could not be displayed because it is too large. You can view the blob instead.
src/container/Laporan/SummaryPL.js deleted 100644 → 0
View file @ 9616c8e3
import React, { Component } from 'react';
import { Typography, Paper, createMuiTheme, MuiThemeProvider, TableCell, FormControlLabel, TextField, Input, Tooltip, withStyles, Snackbar } from '@material-ui/core';
import MUIDataTable from 'mui-datatables';
import NumberFormat from 'react-number-format';
import api from '../../api';
import AddIcon from '@material-ui/icons/Add';
import { values } from 'ramda';
import PropagateLoader from "react-spinners/PropagateLoader"
import Images from '../../assets/Images';
import ReactTooltip from 'react-tooltip';
import UploadFile from "../../library/Upload";
import { ExcelRenderer } from 'react-excel-renderer';
import { Alert } from '@material-ui/lab';
import * as R from 'ramda';
const LightTooltip = withStyles((theme) => ({
tooltip: {
backgroundColor: theme.palette.common.white,
color: 'rgba(0, 0, 0, 0.87)',
boxShadow: theme.shadows[1],
fontSize: 11,
},
}))(Tooltip);
var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable3());
const options = ct.customOptionsFixedColumn();
const style = {
position: "sticky",
left: 0,
zIndex: 101,
background: "white",
};
const style2 = {
position: "sticky",
background: "white",
zIndex: 100,
top: 0
};
export default class SummaryPL extends Component {
constructor(props) {
super(props)
this.state = {
dataTable: [],
loading: false,
}
}
componentDidMount() {
// this.getItemHierarki()
}
closeAlert() {
this.setState({ alert: false })
}
render() {
const columnSummaryPL = [
{
name: "Account",
options: {
customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 102, backgroundColor: '#1c71b8', width: 300, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ width: 300 }}>
{ val }
</div>
)
}
}
}, {
name: `MTD 2021`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
<div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 50 }}>{columnMeta.name}</div>
<div className="grid grid-1x" style={{ ...style2, backgroundColor: '#37b5e6', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Actual"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', color: 'black', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"MB"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', color: 'black', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"% of MB"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d06' }}>
<span>{"Last Year"}</span>
</div>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
console.log(tableMeta)
console.log(val)
return (
<div>
<div className="grid grid-1x content-center">
<div className="grid grid-4x content-center">
<div className="col-1">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-4">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
</div>
</div>
</div>
)
}
}
}, {
name: `YTD 2021`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
<div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 50 }}>{columnMeta.name}</div>
<div className="grid grid-1x" style={{ ...style2, backgroundColor: '#37b5e6', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Actual"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', color: 'black', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"MB"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', color: 'black', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"% of MB"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d06' }}>
<span>{"Last Year"}</span>
</div>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
console.log(tableMeta)
console.log(val)
return (
<div>
<div className="grid grid-1x content-center">
<div className="grid grid-4x content-center">
<div className="col-1">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-4">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
</div>
</div>
</div>
)
}
}
}, {
name: `Q1 2021`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
<div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 50 }}>{columnMeta.name}</div>
<div className="grid grid-1x" style={{ ...style2, backgroundColor: '#37b5e6', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Actual"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', color: 'black', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"MB"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', color: 'black', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"% of MB"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d06' }}>
<span>{"Last Year"}</span>
</div>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
console.log(tableMeta)
console.log(val)
return (
<div>
<div className="grid grid-1x content-center">
<div className="grid grid-4x content-center">
<div className="col-1">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-4">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
</div>
</div>
</div>
)
}
}
}, {
name: `FY 2021`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
<div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 50}}>{columnMeta.name}</div>
<div className="grid grid-2x" style={{ ...style2, backgroundColor: '#37b5e6', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Actual"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', color: 'black', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"MB"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', color: 'black', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"% of MB"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', color: 'black', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#rgb(200 224 229)' }}>
<span>{"OL"}</span>
</div>
</div>
<div className="column-2 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center' }}>
<div className="column-1" style={{ placeSelf: 'center', color: 'black', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"% of OL"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Last Year"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"% of LY"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', color: 'black', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"% ach OL to MB"}</span>
</div>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
console.log(tableMeta)
console.log(val)
return (
<div>
<div className="grid grid-2x content-center">
<div className="col-1">
<div className="grid grid-4x content-center">
<div className="col-1">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-4">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
</div>
</div>
<div className="col-2">
<div className="grid grid-4x content-center">
<div className="col-1">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-4">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
</div>
</div>
</div>
</div>
)
}
}
}, {
name: "2022",
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', fontSize: 13, top: 0, zIndex: 102, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
{/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> */}
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 50 }}>{columnMeta.name}</div>
<div className="grid grid-1x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#1c71b8', width: 96 }}>
<span>{"ForeCast"}</span>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta) => {
return (
<div style={{textAlign: 'right' }}>
</div>
)
}
}
}, {
name: "2023",
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', fontSize: 13, top: 0, zIndex: 102, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
{/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> */}
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 50 }}>{columnMeta.name}</div>
<div className="grid grid-1x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#1c71b8', width: 96 }}>
<span>{"ForeCast"}</span>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta) => {
return (
<div style={{textAlign: 'right' }}>
</div>
)
}
}
}
]
let datas = [
["ABCD", { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }],
["Total Assets", { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }]
]
const loadingComponent = (
<div style={{ position: 'absolute', zIndex: 110, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)' }}>
<PropagateLoader
// css={override}
size={20}
color={"#274B80"}
loading={this.state.loading}
/>
</div>
);
return (
<div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}>
<div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>FINANCIAL SUMMARY OF TRIPUTRA GROUP</Typography>
</div>
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert}
</Alert>
</Snackbar>
{/* {this.state.loading && loadingComponent} */}
<div style={{ flex: 1, padding: 20, width: '100%' }}>
{/* {this.state.visibleTP === true ? */}
<Paper style={{ paddingTop: 10, paddingBottom: 20 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Sub Holding Report</Typography>
</div>
<div style={{ padding: 20 }}>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Tax Planning - Monthly (Database)</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Period : 2021 </Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
</div>
<div style={{ width: '50%' }}>
{this.state.dataTable.length == 0 ? null : this.props.isApprover == true ?
<div style={{ justifyContent: 'flex-end', display: 'flex', flexFlow: 'wrap' }}>
<a data-tip={'Download'} data-for="download">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() =>
this.setState({ loading: true }, () => {
setTimeout(() => {
this.downloadAllData()
}, 100);
})}
>
<img src={Images.download} />
</button>
</a>
<ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
</div> :
<div style={{ justifyContent: 'flex-end', display: 'flex', flexFlow: 'wrap' }}>
{((this.props.lastStatus === 'SUBMIT' || this.props.lastStatus === 'REVISION') && this.props.prevRevision === false && (this.props.status === 'revision' || this.props.status === 'not-yet' || this.props.status === 'draft' || this.props.status === 'submitted')) && (
<div>
<a data-tip={'Download Template'} data-for="template">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => this.downloadTemplate()}
>
<img src={Images.template} />
</button>
</a>
<ReactTooltip border={true} id="template" place="bottom" type="light" effect="solid" />
</div>
)}
{((this.props.lastStatus === 'SUBMIT' || this.props.lastStatus === 'REVISION') && this.props.prevRevision === false && (this.props.status === 'revision' || this.props.status === 'not-yet' || this.props.status === 'draft' || this.props.status === 'submitted')) && (
<div>
<a data-tip={'Upload'} data-for="upload">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => this.setState({ visibleUpload: true })}
>
<img src={Images.upload} />
</button>
</a>
<ReactTooltip border={true} id="upload" place="bottom" type="light" effect="solid" />
</div>
)}
<a data-tip={'Download'} data-for="download">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() =>
this.setState({ loading: true }, () => {
setTimeout(() => {
this.downloadAllData()
}, 100);
})}
>
<img src={Images.download} />
</button>
</a>
<ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
</div>
}
</div>
</div>
<div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150) }}>
{this.state.loading && loadingComponent}
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={datas}
columns={columnSummaryPL}
options={options}
/>
</MuiThemeProvider>
</div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b', marginTop: 20 }}>Last Updated by : {this.state.updateBy}</Typography>
</div>
<div className="grid grid-2x" style={{ marginTop: 20 }}>
<div className="col-1">
<button
type="button"
onClick={() => this.setState({ loading: true }, () => {
setTimeout(() => {
this.props.onClickClose()
}, 100);
})}
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none'
}}
>
<div style={{ backgroundColor: '#019ce5', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Cancel</Typography>
</div>
</button>
</div>
{this.props.isApprover === true || this.state.dataTable.length == 0 ? null :
(this.props.lastStatus === 'SUBMIT' || this.props.lastStatus === 'REVISION') && this.props.prevRevision === false && (this.props.status === 'revision' || this.props.status === 'not-yet' || this.props.status === 'draft' || this.props.status === 'submitted') ?
<div className="col-2" style={{ display: 'flex', justifyContent: 'flex-end', maxWidth: '100%' }}>
<button
className="button"
type="button"
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
onClick={() => {
// this.forceUpdate()
this.setState({ loading: true, buttonDraft: false }, () => {
setTimeout(() => {
// this.setState({ loading: false, buttonError: false, editable: true })
this.handleValidate()
}, 100);
})
}}
>
<div style={{ backgroundColor: '#fff', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960' }}>
<Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Calculate</Typography>
</div>
</button>
<button
className="button"
type="button"
onClick={() =>
this.state.saveDraft === true ?
null :
this.state.handleTekTekTek == 1 ? null :
this.setState({ handleTekTekTek: 1, loading: true }, () => {
setTimeout(() => {
this.backToMasterBudget('draft')
}, 100);
})
}
style={{
backgroundColor: 'transparent',
cursor: this.state.saveDraft !== true ? 'pointer' : 'default',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
>
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save as Draft</Typography>
</div>
</button>
<button
type="button"
disabled={this.state.buttonError}
onClick={() => this.state.buttonError ?
this.setState({ alert: true, messageAlert: 'Data is not complete !', tipeAlert: 'warning' })
:
this.state.handleTekTekTek == 1 ? null :
this.setState({ handleTekTekTek: 1, loading: true }, () => {
setTimeout(() => {
this.backToMasterBudget('submitted')
}, 100);
})}
style={{
backgroundColor: 'transparent',
cursor: this.state.buttonError === true ? 'default' : 'pointer',
borderColor: 'transparent',
outline: 'none'
}}
>
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', marginRight: 20 }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save & Complete</Typography>
</div>
</button>
</div>
: null }
</div>
</Paper>
</div>
</div>
);
}
}
src/container/SummaryTriputra/SummaryOfTriputra.js
View file @ 58e9050b
...@@ -274,88 +274,262 @@ export default class SummaryOfTriputra extends Component { ...@@ -274,88 +274,262 @@ export default class SummaryOfTriputra extends Component {
"report_type":"historical" "report_type":"historical"
} }
if (this.state.report.value === 1) { if (this.state.report.value === 1) {
let dbMTD =[]
api.create().getHierarkiReportMTD(payload).then(response => { api.create().getHierarkiReportMTD(payload).then(response => {
console.log(response); console.log(response);
console.log(payload) // console.log(payload)
let dataTable = [] // let dataTable = []
// if (response.data) { if (response.data) {
// let res = response.data.data let res = response.data.data
// const handlePushChild = (item) => { const handlePushChild = (item) => {
// let indexIDzz = dataTable.findIndex((val) => val[1] === item.id) let indexIDzz = dbMTD.findIndex((val) => val[0] === item.company_id)
// if (indexIDzz === -1) { if (indexIDzz === -1) {
// dataTable.push([ let mtd_revenue_act = item.mtd_revenue_act = '' ? 0 : Number(item.mtd_revenue_act)
// item.type_report_id, let mtd_revenue_mb = item.mtd_revenue_mb = '' ? 0 : Number(item.mtd_revenue_mb)
// item.id, let persenRevMB = 0
// item.parent, if (mtd_revenue_mb < 0) {
// item.formula, if (mtd_revenue_act >= mtd_revenue_mb) {
// item.level, persenRevMB = ( mtd_revenue_mb - mtd_revenue_act ) / mtd_revenue_mb + 1
// item.description, } else {
// item.profit_loss.total_actual_before === null ? "0" : item.profit_loss.total_actual_before === "" ? "0" : item.profit_loss.total_actual_before, persenRevMB = ( mtd_revenue_mb - mtd_revenue_act ) / mtd_revenue_mb
// item.profit_loss.january, }
// item.profit_loss.february,
// item.profit_loss.march, } else {
// item.profit_loss.april, persenRevMB = mtd_revenue_act / mtd_revenue_mb
// item.profit_loss.may, }
// item.profit_loss.june,
// item.profit_loss.july, let mtd_ebitda_act = item.mtd_ebitda_act = '' ? 0 : Number(item.mtd_ebitda_act)
// item.profit_loss.august, let mtd_ebitda_mb = item.mtd_ebitda_mb = '' ? 0 : Number(item.mtd_ebitda_mb)
// item.profit_loss.september, let persenEbitMB = 0
// item.profit_loss.october, if (mtd_ebitda_mb < 0) {
// item.profit_loss.november, if (mtd_ebitda_act >= mtd_ebitda_mb) {
// item.profit_loss.december, persenEbitMB = ( mtd_ebitda_mb - mtd_ebitda_act ) / mtd_ebitda_mb + 1
// item.profit_loss.total_current_year, } else {
// item.profit_loss.total_next_year, persenEbitMB = ( mtd_ebitda_mb - mtd_ebitda_act ) / mtd_ebitda_mb
// item.profit_loss.total_more_year, }
// item.order
// ]) } else {
// } persenEbitMB = mtd_ebitda_act / mtd_ebitda_mb
// if (item.children !== null) { }
// if (item.children.length > 0) {
// item.children.map((items, indexs) => { let mtd_tpat_act = item.mtd_tpat_act = '' ? 0 : Number(item.mtd_tpat_act)
// handlePushChild(items) let mtd_tpat_mb = item.mtd_tpat_mb = '' ? 0 : Number(item.mtd_tpat_mb)
// }) let persenTPATMB = 0
// } if (mtd_tpat_mb < 0) {
// } if (mtd_tpat_act >= mtd_tpat_mb) {
// } persenTPATMB = ( mtd_tpat_mb - mtd_tpat_act ) / mtd_tpat_mb + 1
// res.map((item, index) => { } else {
// dataTable.push([ persenTPATMB = ( mtd_tpat_mb - mtd_tpat_act ) / mtd_tpat_mb
// item.type_report_id, }
// item.id,
// item.parent, } else {
// item.formula, persenTPATMB = mtd_tpat_act / mtd_tpat_mb
// item.level, }
// item.description,
// item.profit_loss.total_actual_before === null ? "0" : item.profit_loss.total_actual_before === "" ? "0" : item.profit_loss.total_actual_before, let mtd_npat_act = item.mtd_npat_act = '' ? 0 : Number(item.mtd_npat_act)
// item.profit_loss.january, let mtd_npat_mb = item.mtd_npat_mb = '' ? 0 : Number(item.mtd_npat_mb)
// item.profit_loss.february, let persenNPATMB = 0
// item.profit_loss.march, if (mtd_npat_mb < 0) {
// item.profit_loss.april, if (mtd_npat_act >= mtd_npat_mb) {
// item.profit_loss.may, persenNPATMB = ( mtd_npat_mb - mtd_npat_act ) / mtd_npat_mb + 1
// item.profit_loss.june, } else {
// item.profit_loss.july, persenNPATMB = ( mtd_npat_mb - mtd_npat_act ) / mtd_npat_mb
// item.profit_loss.august, }
// item.profit_loss.september,
// item.profit_loss.october, } else {
// item.profit_loss.november, persenNPATMB = mtd_npat_act / mtd_npat_mb
// item.profit_loss.december, }
// item.profit_loss.total_current_year,
// item.profit_loss.total_next_year, let mtd_cf_cfo = item.mtd_cf_cfo = '' ? 0 : Number(item.mtd_cf_cfo)
// item.profit_loss.total_more_year, let mtd_cf_cfi = item.mtd_cf_cfi = '' ? 0 : Number(item.mtd_cf_cfi)
// item.order let mtd_cf_cff = item.mtd_cf_cff = '' ? 0 : Number(item.mtd_cf_cff)
// ]) let mtd_net_cf = mtd_cf_cfo + mtd_cf_cfi + mtd_cf_cff
// if (item.children !== null) {
// if (item.children.length > 0) { let mtd_os_bank_loan_ki = item.mtd_os_bank_loan_ki = '' ? 0 : Number(item.mtd_os_bank_loan_ki)
// item.children.map((items, indexs) => { let mtd_os_bank_loan_wc = item.mtd_os_bank_loan_wc = '' ? 0 : Number(item.mtd_os_bank_loan_wc)
// handlePushChild(items) let mtd_os_bank_loan_others = item.mtd_os_bank_loan_others = '' ? 0 : Number(item.mtd_os_bank_loan_others)
// }) let mtd_os_bank_loan_total = mtd_os_bank_loan_ki + mtd_os_bank_loan_wc + mtd_os_bank_loan_others
// }
// } let mtd_fr_ar_days = item.mtd_fr_ar_days = '' ? 0 : Number(item.mtd_fr_ar_days)
// }) let mtd_fr_inv_days = item.mtd_fr_inv_days = '' ? 0 : Number(item.mtd_fr_inv_days)
// // console.log(dataTable) let mtd_fr_ap_days = item.mtd_fr_ap_days = '' ? 0 : Number(item.mtd_fr_ap_days)
this.setState({ dataTable, previewTable: true, loading: false, previewDownload: true }) let mtd_fr_ccc = mtd_fr_ar_days + mtd_fr_inv_days - mtd_fr_ap_days
// } else {
// this.setState({ dataTable: [], previewTable: false, loading: false, previewDownload: false })
// } dbMTD.push([
item.company_id,
item.parent,
item.level,
item.company_name,
item.mtd_revenue_act,
item.mtd_revenue_mb,
isNaN(persenRevMB) || persenRevMB == 'Infinity' || persenRevMB == '-Infinity'? (item.mtd_revenue_mb == '' || item.mtd_revenue_mb == 0? -0 : 0) : (item.mtd_revenue_mb == '' || item.mtd_revenue_mb == 0? persenRevMB * -100 : persenRevMB * 100),
item.mtd_ebitda_act,
item.mtd_ebitda_mb,
isNaN(persenEbitMB) || persenEbitMB == 'Infinity' || persenEbitMB == '-Infinity'? (item.mtd_ebitda_mb == '' || item.mtd_ebitda_mb == 0? -0 : 0) : (item.mtd_ebitda_mb == '' || item.mtd_ebitda_mb == 0? persenEbitMB * -100 : persenEbitMB * 100),
item.mtd_tpat_act,
item.mtd_tpat_mb,
isNaN(persenTPATMB) || persenTPATMB == 'Infinity' || persenTPATMB == '-Infinity'? (item.mtd_tpat_mb == '' || item.mtd_tpat_mb == 0? -0 : 0) : (item.mtd_tpat_mb == '' || item.mtd_tpat_mb == 0? persenTPATMB * -100 : persenTPATMB * 100),
item.mtd_npat_act,
item.mtd_npat_mb,
isNaN(persenNPATMB) || persenNPATMB == 'Infinity' || persenNPATMB == '-Infinity'? (item.mtd_npat_mb == '' || item.mtd_npat_mb == 0? -0 : 0) : (item.mtd_npat_mb == '' || item.mtd_npat_mb == 0? persenNPATMB * -100 : persenNPATMB * 100),
item.mtd_cf_cfo,
item.mtd_cf_cfi,
item.mtd_cf_cff,
mtd_net_cf,
item.mtd_os_bank_loan_ki,
item.mtd_os_bank_loan_wc,
item.mtd_os_bank_loan_others,
mtd_os_bank_loan_total,
item.mtd_os_shl,
item.mtd_bs_cash_bank,
item.mtd_bs_ca,
item.mtd_bs_cl,
item.mtd_bs_equility,
item.mtd_fr_cr,
item.mtd_fr_der,
item.mtd_fr_debt_ebitda,
item.mtd_fr_interest,
item.mtd_fr_ar_days,
item.mtd_fr_inv_days,
item.mtd_fr_ap_days,
mtd_fr_ccc,
item.order,
])
}
if (item.children !== null) {
if (item.children.length > 0) {
item.children.map((items, indexs) => {
handlePushChild(items)
})
}
}
}
res.map((item, index) => {
let mtd_revenue_act = item.mtd_revenue_act = '' ? 0 : Number(item.mtd_revenue_act)
let mtd_revenue_mb = item.mtd_revenue_mb = '' ? 0 : Number(item.mtd_revenue_mb)
let persenRevMB = 0
if (mtd_revenue_mb < 0) {
if (mtd_revenue_act >= mtd_revenue_mb) {
persenRevMB = ( mtd_revenue_mb - mtd_revenue_act ) / mtd_revenue_mb + 1
} else {
persenRevMB = ( mtd_revenue_mb - mtd_revenue_act ) / mtd_revenue_mb
}
} else {
persenRevMB = mtd_revenue_act / mtd_revenue_mb
}
let mtd_ebitda_act = item.mtd_ebitda_act = '' ? 0 : Number(item.mtd_ebitda_act)
let mtd_ebitda_mb = item.mtd_ebitda_mb = '' ? 0 : Number(item.mtd_ebitda_mb)
let persenEbitMB = 0
if (mtd_ebitda_mb < 0) {
if (mtd_ebitda_act >= mtd_ebitda_mb) {
persenEbitMB = ( mtd_ebitda_mb - mtd_ebitda_act ) / mtd_ebitda_mb + 1
} else {
persenEbitMB = ( mtd_ebitda_mb - mtd_ebitda_act ) / mtd_ebitda_mb
}
} else {
persenEbitMB = mtd_ebitda_act / mtd_ebitda_mb
}
let mtd_tpat_act = item.mtd_tpat_act = '' ? 0 : Number(item.mtd_tpat_act)
let mtd_tpat_mb = item.mtd_tpat_mb = '' ? 0 : Number(item.mtd_tpat_mb)
let persenTPATMB = 0
if (mtd_tpat_mb < 0) {
if (mtd_tpat_act >= mtd_tpat_mb) {
persenTPATMB = ( mtd_tpat_mb - mtd_tpat_act ) / mtd_tpat_mb + 1
} else {
persenTPATMB = ( mtd_tpat_mb - mtd_tpat_act ) / mtd_tpat_mb
}
} else {
persenTPATMB = mtd_tpat_act / mtd_tpat_mb
}
let mtd_npat_act = item.mtd_npat_act = '' ? 0 : Number(item.mtd_npat_act)
let mtd_npat_mb = item.mtd_npat_mb = '' ? 0 : Number(item.mtd_npat_mb)
let persenNPATMB = 0
if (mtd_npat_mb < 0) {
if (mtd_npat_act >= mtd_npat_mb) {
persenNPATMB = ( mtd_npat_mb - mtd_npat_act ) / mtd_npat_mb + 1
} else {
persenNPATMB = ( mtd_npat_mb - mtd_npat_act ) / mtd_npat_mb
}
} else {
persenNPATMB = mtd_npat_act / mtd_npat_mb
}
let mtd_cf_cfo = item.mtd_cf_cfo = '' ? 0 : Number(item.mtd_cf_cfo)
let mtd_cf_cfi = item.mtd_cf_cfi = '' ? 0 : Number(item.mtd_cf_cfi)
let mtd_cf_cff = item.mtd_cf_cff = '' ? 0 : Number(item.mtd_cf_cff)
let mtd_net_cf = mtd_cf_cfo + mtd_cf_cfi + mtd_cf_cff
let mtd_os_bank_loan_ki = item.mtd_os_bank_loan_ki = '' ? 0 : Number(item.mtd_os_bank_loan_ki)
let mtd_os_bank_loan_wc = item.mtd_os_bank_loan_wc = '' ? 0 : Number(item.mtd_os_bank_loan_wc)
let mtd_os_bank_loan_others = item.mtd_os_bank_loan_others = '' ? 0 : Number(item.mtd_os_bank_loan_others)
let mtd_os_bank_loan_total = mtd_os_bank_loan_ki + mtd_os_bank_loan_wc + mtd_os_bank_loan_others
let mtd_fr_ar_days = item.mtd_fr_ar_days = '' ? 0 : Number(item.mtd_fr_ar_days)
let mtd_fr_inv_days = item.mtd_fr_inv_days = '' ? 0 : Number(item.mtd_fr_inv_days)
let mtd_fr_ap_days = item.mtd_fr_ap_days = '' ? 0 : Number(item.mtd_fr_ap_days)
let mtd_fr_ccc = mtd_fr_ar_days + mtd_fr_inv_days - mtd_fr_ap_days
dbMTD.push([
item.company_id,
item.parent,
item.level,
item.company_name,
item.mtd_revenue_act,
item.mtd_revenue_mb,
isNaN(persenRevMB) || persenRevMB == 'Infinity' || persenRevMB == '-Infinity'? (item.mtd_revenue_mb == '' || item.mtd_revenue_mb == 0? -0 : 0) : (item.mtd_revenue_mb == '' || item.mtd_revenue_mb == 0? persenRevMB * -100 : persenRevMB * 100),
item.mtd_ebitda_act,
item.mtd_ebitda_mb,
isNaN(persenEbitMB) || persenEbitMB == 'Infinity' || persenEbitMB == '-Infinity'? (item.mtd_ebitda_mb == '' || item.mtd_ebitda_mb == 0? -0 : 0) : (item.mtd_ebitda_mb == '' || item.mtd_ebitda_mb == 0? persenEbitMB * -100 : persenEbitMB * 100),
item.mtd_tpat_act,
item.mtd_tpat_mb,
isNaN(persenTPATMB) || persenTPATMB == 'Infinity' || persenTPATMB == '-Infinity'? (item.mtd_tpat_mb == '' || item.mtd_tpat_mb == 0? -0 : 0) : (item.mtd_tpat_mb == '' || item.mtd_tpat_mb == 0? persenTPATMB * -100 : persenTPATMB * 100),
item.mtd_npat_act,
item.mtd_npat_mb,
isNaN(persenNPATMB) || persenNPATMB == 'Infinity' || persenNPATMB == '-Infinity'? (item.mtd_npat_mb == '' || item.mtd_npat_mb == 0? -0 : 0) : (item.mtd_npat_mb == '' || item.mtd_npat_mb == 0? persenNPATMB * -100 : persenNPATMB * 100),
item.mtd_cf_cfo,
item.mtd_cf_cfi,
item.mtd_cf_cff,
mtd_net_cf,
item.mtd_os_bank_loan_ki,
item.mtd_os_bank_loan_wc,
item.mtd_os_bank_loan_others,
mtd_os_bank_loan_total,
item.mtd_os_shl,
item.mtd_bs_cash_bank,
item.mtd_bs_ca,
item.mtd_bs_cl,
item.mtd_bs_equility,
item.mtd_fr_cr,
item.mtd_fr_der,
item.mtd_fr_debt_ebitda,
item.mtd_fr_interest,
item.mtd_fr_ar_days,
item.mtd_fr_inv_days,
item.mtd_fr_ap_days,
mtd_fr_ccc,
item.order,
])
if (item.children !== null) {
if (item.children.length > 0) {
item.children.map((items, indexs) => {
handlePushChild(items)
})
}
}
})
console.log(dbMTD)
this.setState({ dataTable: dbMTD, previewTable: true, loading: false, previewDownload: true })
} else {
this.setState({ dataTable: [], previewTable: false, loading: false, previewDownload: false })
}
}) })
} else if (this.state.report.value === 2) { } else if (this.state.report.value === 2) {
api.create().getHierarkiReportYtd(payload).then(response => { api.create().getHierarkiReportYtd(payload).then(response => {
......
src/container/SummaryTriputra/TableSummaryTriputra.js
View file @ 58e9050b
...@@ -31,17 +31,27 @@ export default class TableSummaryTriputra extends Component { ...@@ -31,17 +31,27 @@ export default class TableSummaryTriputra extends Component {
["ABCD", { a: "2", b: "3", c: "4", d: "5", e: "6", f: "1", g: "3", h: "4", i: "5", j: "6", k: "6" }, { a: "2", b: "3", c: "4", d: "5", e: "6" }, { a: "3", b: "3", c: "4", d: "5", e: "6" }, { a: "4", b: "3", c: "4", d: "5", e: "6" }, { a: "5", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }], ["ABCD", { a: "2", b: "3", c: "4", d: "5", e: "6", f: "1", g: "3", h: "4", i: "5", j: "6", k: "6" }, { a: "2", b: "3", c: "4", d: "5", e: "6" }, { a: "3", b: "3", c: "4", d: "5", e: "6" }, { a: "4", b: "3", c: "4", d: "5", e: "6" }, { a: "5", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }],
["Total Assets", { a: "6", b: "7", c: "8", d: "9", e: "10", f: "1", g: "3", h: "4", i: "5", j: "6", k: "6" }, { a: "6", b: "7", c: "8", d: "9", e: "10" }, { a: "6", b: "7", c: "8", d: "9", e: "10" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }] ["Total Assets", { a: "6", b: "7", c: "8", d: "9", e: "10", f: "1", g: "3", h: "4", i: "5", j: "6", k: "6" }, { a: "6", b: "7", c: "8", d: "9", e: "10" }, { a: "6", b: "7", c: "8", d: "9", e: "10" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }]
] ]
let datasMTD = [
["ABCD", { a: "1", b: "2", c: "3", d: "4", e: "5", f: "6", g: "7", h: "8", i: "9", j: "10", k: "11", l: "12" }, { a: "1", b: "2", c: "3", d: "4" }, { a: "1", b: "2", c: "3", d: "4" }, { q: "1" }, { a: "1", b: "2", c: "3" }, { a: "1", b: "2", c: "3", d: "4" }, { a: "1", b: "2", c: "3", d: "4", e: "5", f: "6", g: "7", h: "8" }],
["Total Assets", { a: "13", b: "14", c: "15", d: "16", e: "17", f: "18", g: "19", h: "20", i: "21", j: "22", k: "24", l: "25" }, { a: "1", b: "2", c: "3", d: "4" }, { a: "1", b: "2", c: "3", d: "4" }, { a: "1", b: "3", c: "4" }, { a: "1", b: "3", c: "4" }, { a: "1" }, { a: "1", b: "3", c: "4" }, { a: "1", b: "3", c: "4" }, { a: "1", b: "3", c: "4" }]
]
let datasYTD = [
["ABCD", { a: "2", b: "3", c: "4", d: "5", e: "6", f: "1", g: "3", h: "4", i: "5", j: "6", k: "6" }, { a: "2", b: "3", c: "4", d: "5", e: "6" }, { a: "3", b: "3", c: "4", d: "5", e: "6" }, { a: "4", b: "3", c: "4", d: "5", e: "6" }, { a: "5", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }],
["Total Assets", { a: "6", b: "7", c: "8", d: "9", e: "10", f: "1", g: "3", h: "4", i: "5", j: "6", k: "6" }, { a: "6", b: "7", c: "8", d: "9", e: "10" }, { a: "6", b: "7", c: "8", d: "9", e: "10" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }]
]
let dataTable2 = this.props.dataTable let dataTable2 = this.props.dataTable
const columnMTD = [ const columnMTD = [
{
name: "",
options: {
display: false
}
},
{
name: "",
options: {
display: false
}
},
{
name: "",
options: {
display: false
}
},
{ {
name: "Company", name: "Company",
options: { options: {
...@@ -54,7 +64,14 @@ export default class TableSummaryTriputra extends Component { ...@@ -54,7 +64,14 @@ export default class TableSummaryTriputra extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ width: 300 }}> <div style={{ width: 300 }}>
{ val } {
tableMeta.rowData[2] == 0 ?
<span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(val).toUpperCase()}</span>
:
<div style={{ paddingLeft: 20 * Number(tableMeta.rowData[2]) }}>
<span style={{ fontSize: 12 }}>{val}</span>
</div>
}
</div> </div>
) )
} }
...@@ -140,19 +157,61 @@ export default class TableSummaryTriputra extends Component { ...@@ -140,19 +157,61 @@ export default class TableSummaryTriputra extends Component {
<div className="grid grid-4x content-center"> <div className="grid grid-4x content-center">
<div className="col-1"> <div className="col-1">
<div className="grid grid-3x content-center"> <div className="grid grid-3x content-center">
<div className="col-1"> <div className="col-1" style={{ padding: 0, left: -15}} >
<div style={{ textAlign: 'right', width: 60 }}> <div style={{ flex: 1}}>
{val.a} <FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
decimalScale={1}
disabled={true}
value={Number(tableMeta.rowData[4]).toFixed(1)}
/>
}
/>
</div> </div>
</div> </div>
<div className="col-2"> <div className="col-2">
<div style={{ textAlign: 'right', width: 90 }}> <div style={{ flex: 1 }}>
{val.b} <FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
decimalScale={1}
disabled={true}
value={Number(tableMeta.rowData[5]).toFixed(1)}
/>
}
/>
</div> </div>
</div> </div>
<div className="col-3"> <div className="col-3">
<div style={{ textAlign: 'right', width: 90 }}> <div style={{ flex: 1 }}>
{val.c} <FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
suffix={'%'}
disabled={true}
value={Number(tableMeta.rowData[6]).toFixed(2)}
/>
}
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -160,18 +219,60 @@ export default class TableSummaryTriputra extends Component { ...@@ -160,18 +219,60 @@ export default class TableSummaryTriputra extends Component {
<div className="col-2"> <div className="col-2">
<div className="grid grid-3x content-center"> <div className="grid grid-3x content-center">
<div className="col-1"> <div className="col-1">
<div style={{ textAlign: 'right', width: 90 }}> <div style={{ flex: 1 }}>
{val.d} <FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
decimalScale={1}
disabled={true}
value={Number(tableMeta.rowData[7]).toFixed(1)}
/>
}
/>
</div> </div>
</div> </div>
<div className="col-2"> <div className="col-2">
<div style={{ textAlign: 'right', width: 90 }}> <div style={{ flex: 1 }}>
{val.e} <FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
decimalScale={1}
disabled={true}
value={Number(tableMeta.rowData[8]).toFixed(1)}
/>
}
/>
</div> </div>
</div> </div>
<div className="col-3"> <div className="col-3">
<div style={{ textAlign: 'right', width: 90 }}> <div style={{ flex: 1 }}>
{val.f} <FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
suffix={'%'}
disabled={true}
value={Number(tableMeta.rowData[9]).toFixed(2)}
/>
}
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -219,7 +320,7 @@ export default class TableSummaryTriputra extends Component { ...@@ -219,7 +320,7 @@ export default class TableSummaryTriputra extends Component {
) )
} }
}, },
}, { }, {
name: `MTD 2021 (OPTIONAL)`, name: `MTD 2021 (OPTIONAL)`,
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
...@@ -2348,7 +2449,7 @@ export default class TableSummaryTriputra extends Component { ...@@ -2348,7 +2449,7 @@ export default class TableSummaryTriputra extends Component {
<div style={{ padding: '0px 20px 20px 20px', width: this.props.width - (this.props.open === true ? 350 : 100) }}> <div style={{ padding: '0px 20px 20px 20px', width: this.props.width - (this.props.open === true ? 350 : 100) }}>
<MuiThemeProvider theme={getMuiTheme()}> <MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable <MUIDataTable
data={this.props.type === 4 ? datasHistorical : this.props.type === 1 ? datasMTD : this.props.type === 2 ? dataTable2 : this.props.type === 3 ? datas : datas} data={this.props.type === 4 ? datasHistorical : this.props.type === 3 ? datas : dataTable2}
columns={this.props.type === 1 ? columnMTD : this.props.type === 2 ? columnYTD : this.props.type === 3 ? columnCPSM : this.props.type === 4 ? columnHistorical : columns} columns={this.props.type === 1 ? columnMTD : this.props.type === 2 ? columnYTD : this.props.type === 3 ? columnCPSM : this.props.type === 4 ? columnHistorical : columns}
options={options} options={options}
/> />
......
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