Skip to content

T
Tia-dev
Commit 29d60692 authored by Riri Novita's avatar Riri Novita
Browse files
Options

Merge branch 'master' of http://103.44.149.204/d.arizona/tia-dev into riri

parents 3c394d5a b25c41af
Show whitespace changes
Inline Side-by-side
Showing with 6626 additions and 300 deletions
package.json
View file @ 29d60692
......@@ -6,10 +6,15 @@
"dependencies": {
"@date-io/date-fns": "^1.3.13",
"@date-io/moment": "^2.8.0",
"@devexpress/dx-react-chart": "^2.7.3",
"@devexpress/dx-react-chart-material-ui": "^2.7.3",
"@devexpress/dx-react-core": "^2.7.3",
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.56",
"@material-ui/pickers": "^3.2.10",
"@nivo/bar": "^0.67.0",
"@nivo/core": "^0.67.0",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
......
src/container/BudgetTahunan/CorporateAnnualTarget.js
View file @ 29d60692
......@@ -184,8 +184,8 @@ export default class CorporateAnnualTarget extends Component {
item.description === 'ROIC' ? Number(item.cat.march).toFixed(1) : item.parent_name == "FINANCIAL PERSPECTIVE" ? item.type_report_id == 3? (item.cat.march == "" ? item.cat.march : String(item.cat.march).indexOf(".") == -1 ? Number(item.cat.march) : Number(item.cat.march).toFixed(1)) : { value: item.cat.march, formula: item.cat.march_formula } : (item.cat.march == "" ? item.cat.march : String(item.cat.march).indexOf(".") == -1 ? Number(item.cat.march) : Number(item.cat.march).toFixed(1)),
item.description === 'ROIC' ? Number(item.cat.april).toFixed(1) : item.parent_name == "FINANCIAL PERSPECTIVE" ? item.type_report_id == 3? (item.cat.april == "" ? item.cat.april : String(item.cat.april).indexOf(".") == -1 ? Number(item.cat.april) : Number(item.cat.april).toFixed(1)) : { value: item.cat.april, formula: item.cat.april_formula } : (item.cat.april == "" ? item.cat.april : String(item.cat.april).indexOf(".") == -1 ? Number(item.cat.april) : Number(item.cat.april).toFixed(1)),
item.description === 'ROIC' ? Number(item.cat.may).toFixed(1) : item.parent_name == "FINANCIAL PERSPECTIVE" ? item.type_report_id == 3? (item.cat.may == "" ? item.cat.may : String(item.cat.may).indexOf(".") == -1 ? Number(item.cat.may) : Number(item.cat.may).toFixed(1)) : { value: item.cat.may, formula: item.cat.may_formula } : (item.cat.may == "" ? item.cat.may : String(item.cat.may).indexOf(".") == -1 ? Number(item.cat.may) : Number(item.cat.may).toFixed(1)),
item.description === 'ROIC' ? Number(item.cat.may).toFixed(1) : item.parent_name == "FINANCIAL PERSPECTIVE" ? item.type_report_id == 3? (item.cat.june == "" ? item.cat.june : String(item.cat.june).indexOf(".") == -1 ? Number(item.cat.june) : Number(item.cat.june).toFixed(1)) : { value: item.cat.june, formula: item.cat.june_formula } : item.description === 'ROIC' ? Number(item.cat.june).toFixed(1) : (item.cat.june == "" ? item.cat.june : String(item.cat.june).indexOf(".") == -1 ? Number(item.cat.june) : Number(item.cat.june).toFixed(1)),
item.description === 'ROIC' ? Number(item.cat.may).toFixed(1) : item.parent_name == "FINANCIAL PERSPECTIVE" ? item.type_report_id == 3? (item.cat.july == "" ? item.cat.july : String(item.cat.july).indexOf(".") == -1 ? Number(item.cat.july) : Number(item.cat.july).toFixed(1)) : { value: item.cat.july, formula: item.cat.july_formula } : item.description === 'ROIC' ? Number(item.cat.july).toFixed(1) : (item.cat.july == "" ? item.cat.july : String(item.cat.july).indexOf(".") == -1 ? Number(item.cat.july) : Number(item.cat.july).toFixed(1)),
item.description === 'ROIC' ? Number(item.cat.june).toFixed(1) : item.parent_name == "FINANCIAL PERSPECTIVE" ? item.type_report_id == 3? (item.cat.june == "" ? item.cat.june : String(item.cat.june).indexOf(".") == -1 ? Number(item.cat.june) : Number(item.cat.june).toFixed(1)) : { value: item.cat.june, formula: item.cat.june_formula } : item.description === 'ROIC' ? Number(item.cat.june).toFixed(1) : (item.cat.june == "" ? item.cat.june : String(item.cat.june).indexOf(".") == -1 ? Number(item.cat.june) : Number(item.cat.june).toFixed(1)),
item.description === 'ROIC' ? Number(item.cat.july).toFixed(1) : item.parent_name == "FINANCIAL PERSPECTIVE" ? item.type_report_id == 3? (item.cat.july == "" ? item.cat.july : String(item.cat.july).indexOf(".") == -1 ? Number(item.cat.july) : Number(item.cat.july).toFixed(1)) : { value: item.cat.july, formula: item.cat.july_formula } : item.description === 'ROIC' ? Number(item.cat.july).toFixed(1) : (item.cat.july == "" ? item.cat.july : String(item.cat.july).indexOf(".") == -1 ? Number(item.cat.july) : Number(item.cat.july).toFixed(1)),
item.description === 'ROIC' ? Number(item.cat.august).toFixed(1) : item.parent_name == "FINANCIAL PERSPECTIVE" ? item.type_report_id == 3? (item.cat.august == "" ? item.cat.august : String(item.cat.august).indexOf(".") == -1 ? Number(item.cat.august) : Number(item.cat.august).toFixed(1)) : { value: item.cat.august, formula: item.cat.august_formula } : (item.cat.august == "" ? item.cat.august : String(item.cat.august).indexOf(".") == -1 ? Number(item.cat.august) : Number(item.cat.august).toFixed(1)),
item.description === 'ROIC' ? Number(item.cat.september).toFixed(1) : item.parent_name == "FINANCIAL PERSPECTIVE" ? item.type_report_id == 3? (item.cat.september == "" ? item.cat.september : String(item.cat.september).indexOf(".") == -1 ? Number(item.cat.september) : Number(item.cat.september).toFixed(1)) : { value: item.cat.september, formula: item.cat.september_formula } : (item.cat.september == "" ? item.cat.september : String(item.cat.september).indexOf(".") == -1 ? Number(item.cat.september) : Number(item.cat.september).toFixed(1)),
item.description === 'ROIC' ? Number(item.cat.october).toFixed(1) : item.parent_name == "FINANCIAL PERSPECTIVE" ? item.type_report_id == 3? (item.cat.october == "" ? item.cat.october : String(item.cat.october).indexOf(".") == -1 ? Number(item.cat.october) : Number(item.cat.october).toFixed(1)) : { value: item.cat.october, formula: item.cat.october_formula } : (item.cat.october == "" ? item.cat.october : String(item.cat.october).indexOf(".") == -1 ? Number(item.cat.october) : Number(item.cat.october).toFixed(1)),
......@@ -228,8 +228,8 @@ export default class CorporateAnnualTarget extends Component {
item.description === 'ROIC' ? Number(item.cat.march).toFixed(1) : item.parent_name == "FINANCIAL PERSPECTIVE" ? { value: item.cat.march, formula: item.cat.march_formula } : (item.cat.march == "" ? item.cat.march : String(item.cat.march).indexOf(".") == -1 ? Number(item.cat.march) : Number(item.cat.march).toFixed(1)),
item.description === 'ROIC' ? Number(item.cat.april).toFixed(1) : item.parent_name == "FINANCIAL PERSPECTIVE" ? { value: item.cat.april, formula: item.cat.april_formula } : (item.cat.april == "" ? item.cat.april : String(item.cat.april).indexOf(".") == -1 ? Number(item.cat.april) : Number(item.cat.april).toFixed(1)),
item.description === 'ROIC' ? Number(item.cat.may).toFixed(1) : item.parent_name == "FINANCIAL PERSPECTIVE" ? { value: item.cat.may, formula: item.cat.may_formula } : (item.cat.may == "" ? item.cat.may : String(item.cat.may).indexOf(".") == -1 ? Number(item.cat.may) : Number(item.cat.may).toFixed(1)),
item.description === 'ROIC' ? Number(item.cat.may).toFixed(1) : item.parent_name == "FINANCIAL PERSPECTIVE" ? { value: item.cat.june, formula: item.cat.june_formula } : item.description === 'ROIC' ? Number(item.cat.june).toFixed(1) : (item.cat.june == "" ? item.cat.june : String(item.cat.june).indexOf(".") == -1 ? Number(item.cat.june) : Number(item.cat.june).toFixed(1)),
item.description === 'ROIC' ? Number(item.cat.may).toFixed(1) : item.parent_name == "FINANCIAL PERSPECTIVE" ? { value: item.cat.july, formula: item.cat.july_formula } : item.description === 'ROIC' ? Number(item.cat.july).toFixed(1) : (item.cat.july == "" ? item.cat.july : String(item.cat.july).indexOf(".") == -1 ? Number(item.cat.july) : Number(item.cat.july).toFixed(1)),
item.description === 'ROIC' ? Number(item.cat.june).toFixed(1) : item.parent_name == "FINANCIAL PERSPECTIVE" ? { value: item.cat.june, formula: item.cat.june_formula } : item.description === 'ROIC' ? Number(item.cat.june).toFixed(1) : (item.cat.june == "" ? item.cat.june : String(item.cat.june).indexOf(".") == -1 ? Number(item.cat.june) : Number(item.cat.june).toFixed(1)),
item.description === 'ROIC' ? Number(item.cat.july).toFixed(1) : item.parent_name == "FINANCIAL PERSPECTIVE" ? { value: item.cat.july, formula: item.cat.july_formula } : item.description === 'ROIC' ? Number(item.cat.july).toFixed(1) : (item.cat.july == "" ? item.cat.july : String(item.cat.july).indexOf(".") == -1 ? Number(item.cat.july) : Number(item.cat.july).toFixed(1)),
item.description === 'ROIC' ? Number(item.cat.august).toFixed(1) : item.parent_name == "FINANCIAL PERSPECTIVE" ? { value: item.cat.august, formula: item.cat.august_formula } : (item.cat.august == "" ? item.cat.august : String(item.cat.august).indexOf(".") == -1 ? Number(item.cat.august) : Number(item.cat.august).toFixed(1)),
item.description === 'ROIC' ? Number(item.cat.september).toFixed(1) : item.parent_name == "FINANCIAL PERSPECTIVE" ? { value: item.cat.september, formula: item.cat.september_formula } : (item.cat.september == "" ? item.cat.september : String(item.cat.september).indexOf(".") == -1 ? Number(item.cat.september) : Number(item.cat.september).toFixed(1)),
item.description === 'ROIC' ? Number(item.cat.october).toFixed(1) : item.parent_name == "FINANCIAL PERSPECTIVE" ? { value: item.cat.october, formula: item.cat.october_formula } : (item.cat.october == "" ? item.cat.october : String(item.cat.october).indexOf(".") == -1 ? Number(item.cat.october) : Number(item.cat.october).toFixed(1)),
......
src/container/Home.js
View file @ 29d60692
......@@ -217,6 +217,11 @@ export default function MiniDrawer() {
label: 'CAT Dashboard',
path: 'dashboard-cat',
},
{
img: 'beranda',
label: 'Financial Dashboard',
path: 'dashboard-financial',
},
{
img: 'beranda',
label: 'Summary of Triputra Group',
......
src/container/Laporan/DBFR.js 0 → 100644
View file @ 29d60692
This source diff could not be displayed because it is too large. You can view the blob instead.
src/container/Laporan/DBOI.js 0 → 100644
View file @ 29d60692
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
View file @ 29d60692
......@@ -841,12 +841,12 @@ export default class DBTP extends Component {
{/* {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>
<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' }}>Historical</Typography>
<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>
......
src/container/Laporan/DashboardFinancial.js 0 → 100644
View file @ 29d60692
import * as React from 'react';
import Paper from '@material-ui/core/Paper';
import { ResponsiveBar } from '@nivo/bar'
import { Snackbar, TextField, Typography, withStyles } from '@material-ui/core';
import MuiAlert from '@material-ui/lab/Alert';
import { Autocomplete } from '@material-ui/lab';
import { titleCase } from '../../library/Utils';
import api from '../../api';
import Constant from '../../library/Constant';
const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
// make sure parent container have a defined height when using
// responsive component, otherwise height will be 0 and
// no chart will be rendered.
// website examples showcase many properties,
// you'll often use just a few of them.
// const MyResponsiveBar = ({ data /* see data tab */ }) => (
// )
export default class DashboardFinancial extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [
{
"country": "AD",
"hot dog": 6,
"hot dogColor": "hsl(228, 70%, 50%)",
"burger": 53,
"burgerColor": "hsl(29, 70%, 50%)",
"sandwich": 74,
"sandwichColor": "hsl(148, 70%, 50%)",
"kebab": 132,
"kebabColor": "hsl(54, 70%, 50%)",
"fries": 46,
"friesColor": "hsl(2, 70%, 50%)",
"donut": 146,
"donutColor": "hsl(60, 70%, 50%)"
},
{
"country": "AE",
"hot dog": 167,
"hot dogColor": "hsl(340, 70%, 50%)",
"burger": 133,
"burgerColor": "hsl(160, 70%, 50%)",
"sandwich": 46,
"sandwichColor": "hsl(330, 70%, 50%)",
"kebab": 68,
"kebabColor": "hsl(298, 70%, 50%)",
"fries": 11,
"friesColor": "hsl(89, 70%, 50%)",
"donut": 119,
"donutColor": "hsl(40, 70%, 50%)"
},
{
"country": "AF",
"hot dog": 60,
"hot dogColor": "hsl(188, 70%, 50%)",
"burger": 120,
"burgerColor": "hsl(252, 70%, 50%)",
"sandwich": 138,
"sandwichColor": "hsl(152, 70%, 50%)",
"kebab": 45,
"kebabColor": "hsl(256, 70%, 50%)",
"fries": 132,
"friesColor": "hsl(201, 70%, 50%)",
"donut": 130,
"donutColor": "hsl(191, 70%, 50%)"
},
{
"country": "AG",
"hot dog": 84,
"hot dogColor": "hsl(356, 70%, 50%)",
"burger": 102,
"burgerColor": "hsl(161, 70%, 50%)",
"sandwich": 157,
"sandwichColor": "hsl(177, 70%, 50%)",
"kebab": 65,
"kebabColor": "hsl(74, 70%, 50%)",
"fries": 105,
"friesColor": "hsl(82, 70%, 50%)",
"donut": 90,
"donutColor": "hsl(138, 70%, 50%)"
},
{
"country": "AI",
"hot dog": 144,
"hot dogColor": "hsl(102, 70%, 50%)",
"burger": 62,
"burgerColor": "hsl(308, 70%, 50%)",
"sandwich": 59,
"sandwichColor": "hsl(101, 70%, 50%)",
"kebab": 117,
"kebabColor": "hsl(152, 70%, 50%)",
"fries": 57,
"friesColor": "hsl(297, 70%, 50%)",
"donut": 34,
"donutColor": "hsl(319, 70%, 50%)"
},
{
"country": "AL",
"hot dog": 84,
"hot dogColor": "hsl(288, 70%, 50%)",
"burger": 93,
"burgerColor": "hsl(288, 70%, 50%)",
"sandwich": 23,
"sandwichColor": "hsl(64, 70%, 50%)",
"kebab": 128,
"kebabColor": "hsl(118, 70%, 50%)",
"fries": 199,
"friesColor": "hsl(125, 70%, 50%)",
"donut": 184,
"donutColor": "hsl(334, 70%, 50%)"
},
{
"country": "AM",
"hot dog": 44,
"hot dogColor": "hsl(239, 70%, 50%)",
"burger": 17,
"burgerColor": "hsl(306, 70%, 50%)",
"sandwich": 58,
"sandwichColor": "hsl(317, 70%, 50%)",
"kebab": 51,
"kebabColor": "hsl(148, 70%, 50%)",
"fries": 151,
"friesColor": "hsl(344, 70%, 50%)",
"donut": 174,
"donutColor": "hsl(190, 70%, 50%)"
}
],
};
}
componentDidMount() {
console.log(this.props.height)
}
getDetailUser() {
let userId = localStorage.getItem(Constant.USER)
api.create().getDetailUser(userId).then((response) => {
if (response.data) {
if (response.ok) {
if (response.data.status === 'success') {
this.setState({ userCompany: response.data.data.company }, () => {
this.getCompanyActive()
})
}
}
}
})
}
getCompanyActive() {
api.create().getPerusahaanActive().then((response) => {
// console.log(response);
if (response.data) {
if (response.data.status === 'success') {
let data = response.data.data
let comID = this.state.rawData ? this.state.rawData.company_id : 0
let companyData = data.map((item) => {
return {
company_id: item.company_id,
company_name: item.company_name,
}
})
let arrayBaru = []
this.state.userCompany.map((item, index) => {
let indexID = companyData.findIndex((val) => val.company_id == item)
if (indexID !== -1) {
arrayBaru.push(companyData[indexID])
}
})
let defaultProps = {
options: arrayBaru,
getOptionLabel: (option) => titleCase(option.company_name),
};
let index = arrayBaru.findIndex((val) => val.company_id == comID)
this.setState({ listCompany: defaultProps, company: arrayBaru.length < 1 ? companyData[0] : (index == -1 ? arrayBaru[0] : arrayBaru[index]) }, () => {
this.getLastPeriod()
})
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', listCompany: null, company: null })
}
})
}
getLastPeriod() {
api.create().getLastPeriod(this.state.company.company_id).then(response => {
// console.log(response);
if (response.data.status === "success") {
this.setState({ lastPeriod: response.data.data.last_periode, latestPeriode: response.data.data.latest_periode }, () => {
this.getPeriode()
})
}
})
}
getPeriode() {
api.create().getPeriodeTransaction().then(response => {
let currentYear = new Date().getFullYear()
// console.log(currentYear)
if (response.data) {
if (response.data.status === "success") {
let data = []
response.data.data.map((item) => {
if (this.state.isApprover) {
if (item >= 2000 && item <= (Number(currentYear) + 1)) {
data.push(item)
}
} else {
if ((item >= 2000) && (item == this.state.lastPeriod || item < this.state.lastPeriod)) {
data.push(item)
}
}
})
let periodeData = data.map((item) => {
return {
periode: item,
}
})
let defaultProps = {
options: periodeData,
getOptionLabel: (option) => option.periode,
};
let periode = (this.state.lastPeriod == "" ? String(Number(currentYear) + 1) : this.state.lastPeriod)
let index = data.sort((a, b) => a - b).findIndex((val) => val === periode)
// console.log(data)
// console.log(this.state.latestPeriode)
// console.log(periodeData)
// console.log(index)
this.setState({ listPeriode: defaultProps, periode: index === -1 ? periodeData[0] : periodeData[index] }, () => {
// this.getDataTable()
// this.getSubmission()
this.getReportType()
// if (this.state.isApprover === true) {
// this.getCompanySubmitted()
// } else {
// this.getRevision()
// }
})
}
}
})
}
getReportType() {
let payload = {
"company_id": this.state.company.company_id,
"periode": this.state.periode.periode,
"report_type": "Master Budget",
}
api.create().getReportTypeBody(payload).then(response => {
console.log(response);
if (response.data) {
if (response.data.status === "success") {
if (this.state.report.value === 2) {
response.data.data.map((item, index) => {
if (item.report_name === 'Balance Sheet') {
this.setState({ revisionType: item.revision }, ()=> {
this.getSubmission()
})
}
})
} else if (this.state.report.value === 1) {
response.data.data.map((item, index) => {
if (item.report_name === 'Profit Loss') {
this.setState({ revisionType: item.revision }, ()=> {
this.getSubmission()
})
}
})
} else {
this.setState({ revisionType: 0 }, ()=> {
this.getSubmission()
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', loading: false })
}
})
}
render() {
const { data: chartData } = this.state;
return (
<div style={{ flex: 1, backgroundColor: '#f8f8f8' }} ref={this.myRef}>
<div>
<div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Dashboard Financial</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>
<div style={{ padding: 20, width: '100%' }}>
<Paper style={{ paddingTop: 10 , height: this.props.height}}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>FINANCIAL SUMMARY OF TRIPUTRA GROUP</Typography>
</div>
<div style={{ minWidth: 'max-content', padding: '20px 20px 0px 20px' }}>
<div style={{ marginTop: 15 }}>
<Autocomplete
options={this.state.reportType}
getOptionLabel={(option) => titleCase(option.label)}
id="typereport"
onChange={(event, newInputValue) => this.setState({ report: newInputValue, loading: true, previewTable: false }, () => {
this.getReportType()
})}
disableClearable
style={{ width: 250 }}
renderInput={(params) => <TextField {...params} label="Report Type" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.report}
/>
</div>
<div style={{ marginTop: 15 }}>
<Autocomplete
{...this.state.listCompany}
id="company"
disabled={this.state.intent === 'Home' ? true : false}
onChange={(event, newInputValue) => this.setState({ company: newInputValue, loading: true, previewTable: false }, () => {
this.getReportType()
})}
disableClearable
style={{ width: 250 }}
renderInput={(params) => <TextField {...params} label="Company" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.company}
/>
</div>
<div style={{ marginTop: 15 }}>
<Autocomplete
{...this.state.listPeriode}
id="periode"
onChange={(event, newInputValue) => this.setState({ periode: newInputValue, loading: true, previewTable: false }, () => {
this.getReportType()
})}
disabled={this.state.intent === 'Home' ? true : false}
disableClearable
style={{ width: 250 }}
renderInput={(params) =>
<TextField {...params} label="Period" margin="normal" style={{ marginTop: 7 }}
/>}
value={this.state.periode}
/>
</div>
</div>
<div style={{height: Number(0.3 * this.props.height)}}>
<ResponsiveBar
data={chartData}
keys={[ 'hot dog', 'burger', 'sandwich', 'kebab', 'fries', 'donut' ]}
indexBy="country"
margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
padding={0.3}
groupMode="grouped"
valueScale={{ type: 'linear' }}
indexScale={{ type: 'band', round: true }}
colors={{ scheme: 'nivo' }}
defs={[
{
id: 'dots',
type: 'patternDots',
background: 'inherit',
color: '#38bcb2',
size: 4,
padding: 1,
stagger: true
},
{
id: 'lines',
type: 'patternLines',
background: 'inherit',
color: '#eed312',
rotation: -45,
lineWidth: 6,
spacing: 10
}
]}
fill={[
{
match: {
id: 'fries'
},
id: 'dots'
},
{
match: {
id: 'sandwich'
},
id: 'lines'
}
]}
borderColor={{ from: 'color', modifiers: [ [ 'darker', 1.6 ] ] }}
axisTop={null}
axisRight={null}
axisBottom={{
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: 'country',
legendPosition: 'middle',
legendOffset: 32
}}
axisLeft={{
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: 'food',
legendPosition: 'middle',
legendOffset: -40
}}
labelSkipWidth={12}
labelSkipHeight={12}
labelTextColor={{ from: 'color', modifiers: [ [ 'darker', 1.6 ] ] }}
legends={[
{
dataFrom: 'keys',
anchor: 'bottom-right',
direction: 'column',
justify: false,
translateX: 25,
translateY: 0,
itemsSpacing: 0,
itemWidth: 20,
itemHeight: 24,
itemDirection: 'left-to-right',
itemOpacity: 0.85,
symbolSize: 17,
effects: [
{
on: 'hover',
style: {
itemOpacity: 1
}
}
]
}
]}
animate={true}
motionStiffness={90}
motionDamping={15}
/>
</div>
</Paper>
</div>
</div>
</div>
);
}
}
src/container/MonthlyReport/CorporateAnnualTargetMR.js
View file @ 29d60692
......@@ -137,9 +137,12 @@ export default class CorporateAnnualTargetMR extends Component {
item.description,
item.type_report_id == 1 ? `${Number(item.weight) * 100}%` : (String(item.corporate_annual_target.weight).indexOf(".") == -1 ? item.corporate_annual_target.weight : `${Number(item.weight) * 100}%`),
parentTrue ? item.corporate_annual_target.uom : item.uom,
parentTrue ? item.corporate_annual_target.kpi_type == "" ? null : { value: item.corporate_annual_target.kpi_type } : item.kpi_type == "" ? null : { value: item.kpi_type },
parentTrue ? item.corporate_annual_target.max_ach == "" ? null : { value: titleCase(item.corporate_annual_target.max_ach) } : item.max_ach == "" ? null : { value: titleCase(item.max_ach) },
parentTrue ? item.corporate_annual_target.formula == "" ? null : { value: item.corporate_annual_target.formula } : item.formula_ytd == "" ? null : { value: item.formula_ytd },
parentTrue ? item.corporate_annual_target.kpi_type == "" ? null : item.corporate_annual_target.kpi_type : item.kpi_type == "" ? null : item.kpi_type,
// parentTrue ? item.corporate_annual_target.kpi_type == "" ? null : { value: item.corporate_annual_target.kpi_type } : item.kpi_type == "" ? null : { value: item.kpi_type },
parentTrue ? item.corporate_annual_target.max_ach == "" ? null : titleCase(item.corporate_annual_target.max_ach) : item.max_ach == "" ? null : titleCase(item.max_ach),
// parentTrue ? item.corporate_annual_target.max_ach == "" ? null : { value: titleCase(item.corporate_annual_target.max_ach) } : item.max_ach == "" ? null : { value: titleCase(item.max_ach) },
item.formula_ytd == "" ? null : item.formula_ytd,
// parentTrue ? item.corporate_annual_target.formula == "" ? null : { value: item.corporate_annual_target.formula } : item.formula_ytd == "" ? null : { value: item.formula_ytd },
item.corporate_annual_target.actual_monthly == "" ? item.corporate_annual_target.actual_monthly : String(item.corporate_annual_target.actual_monthly).indexOf(".") == -1 ? Number(item.corporate_annual_target.actual_monthly) : Number(item.corporate_annual_target.actual_monthly).toFixed(1),
item.corporate_annual_target.target_monthly === null ? "0" : item.corporate_annual_target.target_monthly,
item.corporate_annual_target.achivement_monthly === null ? "0" : item.corporate_annual_target.achivement_monthly,
......@@ -165,10 +168,13 @@ export default class CorporateAnnualTargetMR extends Component {
item.level,
item.description,
item.type_report_id == 1 ? `${Number(item.weight) * 100}%` : item.weight,
item.corporate_annual_target.uom,
item.kpi_type == "" ? null : { value: item.kpi_type },
item.max_ach == "" ? null : { value: titleCase(item.max_ach) },
item.formula == "" ? null : { value: item.formula_ytd },
item.uom,
item.kpi_type == "" ? null : item.kpi_type,
// item.kpi_type == "" ? null : { value: item.kpi_type },
item.max_ach == "" ? null : titleCase(item.max_ach),
// item.max_ach == "" ? null : { value: titleCase(item.max_ach) },
item.formula == "" ? null : item.formula_ytd,
// item.formula == "" ? null : { value: item.formula_ytd },
item.corporate_annual_target.actual_monthly == "" ? item.corporate_annual_target.actual_monthly : String(item.corporate_annual_target.actual_monthly).indexOf(".") == -1 ? Number(item.corporate_annual_target.actual_monthly) : Number(item.corporate_annual_target.actual_monthly).toFixed(1),
item.corporate_annual_target.target_monthly === null ? "0" : item.corporate_annual_target.target_monthly,
item.corporate_annual_target.achivement_monthly === null ? "0" : item.corporate_annual_target.achivement_monthly,
......@@ -249,11 +255,10 @@ export default class CorporateAnnualTargetMR extends Component {
isi.map((i, index) => {
if (i.length > 0) {
payload.push({
orders: i[0] === undefined ? "" : String(i[0]).trim(),
item_report_id: i[1] === undefined ? "" : String(i[1]).trim(),
item_report: i[2] === undefined ? "" : String(i[2]).trim(),
weight: i[3] === undefined ? "" : (String(i[3])) === false ? "0" : String(i[3]).trim(),
oum: i[4] === undefined ? "" : (String(i[4])) === false ? "0" : String(i[4]).trim(),
uom: i[4] === undefined ? "" : (String(i[4])) === false ? "0" : String(i[4]).trim(),
jenis_kpi: i[5] === undefined ? "" : (String(i[5])) === false ? "0" : String(i[5]).trim(),
max_ach: i[6] === undefined ? "" : (String(i[6])) === false ? "0" : String(i[6]).trim(),
actual_monthly: i[7] === undefined ? "0.0" : (String(i[7])) === false ? "0" : String(i[7]).trim(),
......@@ -292,7 +297,7 @@ export default class CorporateAnnualTargetMR extends Component {
item.item_report,
item.weight,
item.uom,
item.kpi_type,
item.jenis_kpi,
item.max_ach,
item.formula_ytd,
item.actual_monthly,
......@@ -580,36 +585,6 @@ export default class CorporateAnnualTargetMR extends Component {
}
}
const handleChangePercentage = (value, tableMeta) => {
// let valueReal = value.replace('%', '')
// let indexParentDatatable = dataTable2.findIndex((val) => val[1] == tableMeta.rowData[2])
// let indexParentReal = this.state.dataReal.findIndex((val) => val.id == tableMeta.rowData[2])
// let valParent = dataTable2[indexParentDatatable][7]
// valParent.replace('%', '')
// let valChild = 0
// dataTable2.map((item, index) => {
// if (item[2] == dataTable2[indexParentDatatable][1] && item[1] !== tableMeta.rowData[1]) {
// let weightItem = item[7] == "" ? 0 : item[7].replace('%', '')
// // // console.log(weightItem)
// valChild += Number(weightItem)
// }
// })
// let endVal = ''
// if ((Number(valueReal) + Number(valChild)) > Number(valParent.replace('%', ''))) {
// endVal = `${Number(valParent.replace('%', '')) - (Number(valChild))}%`
// // // console.log(endVal)
// } else {
// endVal = `${Number(valueReal)}%`
// // // console.log(endVal)
// }
// // // // console.log(endVal)
// dataTable2[tableMeta.rowIndex][tableMeta.columnIndex] = endVal
dataTable2[tableMeta.rowIndex][tableMeta.columnIndex] = value
}
const handleChangeText = (value, tableMeta) => {
// // console.log(value)
dataTable2[tableMeta.rowIndex][tableMeta.columnIndex] = value
......@@ -844,31 +819,7 @@ export default class CorporateAnnualTargetMR extends Component {
<div style={{ textAlign: 'center' }}>
{tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ?
null :
// tableMeta.rowData[0] === 1 ?
value
// :
// <div style={{ flex: 1 }}>
// <FormControlLabel
// style={{ margin: 0 }}
// value={value}
// control={
// <NumberFormat
// thousandSeparator={true}
// suffix="%"
// style={{ color: "#5198ea", fontSize: 12, textAlign: 'center', borderColor: 'transparent', margin: 0, width: 60, backgroundColor: 'transparent' }}
// type="text"
// placeholder=""
// value={value}
// disabled={this.props.isApprover ? true : ((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') ? false : true)}
// maxLength={4}
// onBlur={(event) => {
// // updateValue(some)
// handleChangePercentage(event.target.value, tableMeta)
// }}
// />
// }
// />
// </div>
}
</div>
)
......@@ -885,48 +836,6 @@ export default class CorporateAnnualTargetMR extends Component {
customBodyRender: (value, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'center' }}>
{/* {tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ?
null :
<FormControlLabel
style={{ margin: 0 }}
// value={value}
control={
!handleAction(tableMeta.rowData[2], tableMeta.rowData[0]) ?
<Input
disableUnderline={true}
style={{ fontSize: 12, textAlign: 'center', borderColor: 'transparent', margin: 0, width: 60, backgroundColor: 'transparent', marginTop: -10 }}
type="text"
placeholder=""
defaultValue={value}
color={"#5198ea"}
disabled={true}
onBlur={(event) => {
// // console.log(event.target.value)
// updateValue(event.target.value)
handleChangeText(event.target.value, tableMeta)
// // console.log(dataTable2)
}}
/> :
<ThemeProvider theme={theme}>
<Input
disableUnderline={true}
style={{ fontSize: 12, textAlign: 'center', borderColor: 'transparent', margin: 0, width: 60, backgroundColor: 'transparent', marginBottom: -5 }}
type="text"
placeholder=""
defaultValue={value}
color={"#5198ea"}
// disabled={this.props.isApprover ? true : ((this.props.lastStatus == 'SUBMIT' || this.props.lastStatus == 'REVISION') && this.props.prevRevision === false ? false : !handleAction(tableMeta.rowData[2]))}
onBlur={(event) => {
// // console.log(event.target.value)
// updateValue(event.target.value)
handleChangeText(event.target.value, tableMeta)
// // console.log(dataTable2)
}}
/>
</ThemeProvider>
}
/>
} */}
<div style={{ textAlign: 'center', width: 60 }}>
{value}
</div>
......@@ -944,25 +853,10 @@ export default class CorporateAnnualTargetMR extends Component {
),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ width: 96 }}>
<div style={{ textAlign: 'center', width: 60 }}>
{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ?
null :
<Autocomplete
{...this.state.kpiTypeList}
id="kpiType"
onChange={(event, newInputValue) => handleChangeDropdown(newInputValue, tableMeta)}
debug
disableClearable
disabled={!handleAction(tableMeta.rowData[2], tableMeta.rowData[0])}
value={handleValueDropdown(val, 'KPI', tableMeta)}
style={{ padding: 0, margin: 0 }}
renderInput={(params) =>
<div ref={params.InputProps.ref} style={{ padding: 0, margin: 0 }}>
<input style={{ borderColor: 'white', width: 96, textAlign: 'center', padding: 0, margin: 0, color: handleAction(tableMeta.rowData[2], tableMeta.rowData[0]) ? "#5198ea" : "black" }} type="text" {...params.inputProps} />
</div>
}
/>
// val
val
}
</div>
)
......@@ -981,22 +875,7 @@ export default class CorporateAnnualTargetMR extends Component {
<div style={{ textAlign: 'center', width: 60 }}>
{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ?
null :
<Autocomplete
{...this.state.maxAchList}
id="maxAchList"
onChange={(event, newInputValue) => handleChangeDropdown(newInputValue, tableMeta)}
debug
disableClearable
value={handleValueDropdown(val, 'MAX', tableMeta)}
style={{ padding: 0, margin: 0 }}
// disabled={!handleAction(tableMeta.rowData[2], tableMeta.rowData[0])}
renderInput={(params) =>
<div ref={params.InputProps.ref} style={{ padding: 0, margin: 0 }}>
<input style={{ borderColor: 'white', width: 96, textAlign: 'center', padding: 0, margin: 0, color: handleAction(tableMeta.rowData[2], tableMeta.rowData[0]) ? "#5198ea" : "black" }} type="text" {...params.inputProps} />
</div>
}
// value={this.state.parent}
/>
val
}
</div>
)
......@@ -1012,29 +891,10 @@ export default class CorporateAnnualTargetMR extends Component {
),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div style={{ width: 60 }}>
<div style={{ textAlign: 'center', width: 60 }}>
{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ?
null :
<Autocomplete
{...this.state.formulaYtdList}
id="formulaYtdList"
onChange={(event, newInputValue) => {
// updateValue(newInputValue)
handleChangeDropdown(newInputValue, tableMeta)
}
}
debug
disableClearable
value={handleValueDropdown(val, 'FORMULA', tableMeta)}
disabled={!handleAction(tableMeta.rowData[2], tableMeta.rowData[0])}
style={{ padding: 0, margin: 0 }}
renderInput={(params) =>
<div ref={params.InputProps.ref} style={{ padding: 0, margin: 0 }}>
<input style={{ borderColor: 'white', width: 96, textAlign: 'center', padding: 0, margin: 0, color: handleAction(tableMeta.rowData[2], tableMeta.rowData[0]) ? "#5198ea" : "black" }} type="text" {...params.inputProps} />
</div>
}
// value={this.state.parent}
/>
val
}
</div>
)
......
src/container/MonthlyReport/ListOfCreditFacilities.js
View file @ 29d60692
......@@ -86,7 +86,9 @@ export default class ListOfCreditFacilities extends Component {
perBS: 0,
snekbar: false,
snekbarMsg: '',
visibleLOCFMR: true
visibleLOCFMR: true,
saveDraft: true,
saveComp: true
}
this.fileHandler = this.fileHandler.bind(this);
}
......@@ -303,8 +305,8 @@ export default class ListOfCreditFacilities extends Component {
)
}
this.getPerBS()
// console.log(dataTable)
this.setState({ dataTable, loading: false }, () => {
console.log(dataTable)
this.setState({ dataTable, loading: false, visibleLOCFMR: true, totalOutStand: 0, diff: 0 }, () => {
this.handleCalculate()
})
}
......@@ -387,11 +389,11 @@ export default class ListOfCreditFacilities extends Component {
checkUpload() {
api.create().checkUploadMonthlyReportLOCF(this.state.payload).then(response => {
// console.log(JSON.stringify(this.state.payload));
console.log(JSON.stringify(this.state.payload));
console.log(response)
if (response.data) {
if (response.data.status === 'success') {
this.setState({ visibleUpload: false, visibleLOCFMR: false, loading: true })
this.setState({ visibleUpload: false, loading: true, visibleLOCFMR: false, totalOutStand: 0, diff: 0 })
let dataTable = []
response.data.data.map((item, index) => {
if (index == response.data.data.length -1) {
......@@ -401,13 +403,12 @@ export default class ListOfCreditFacilities extends Component {
item.parent,
item.formula,
item.level,
// item.description,
item.borrower_comp_name === null ? "" : item.borrower_comp_name === "" ? "" : item.borrower_comp_name,
item.borrower_comp_name === null ? this.props.company.company_name : item.borrower_comp_name === "" ? this.props.company.company_name : item.borrower_comp_name,
item.bank_name === null ? null : item.bank_name === "" ? null : {value: item.bank_name},
item.type_of_credit === null ? null : item.type_of_credit === "" ? null : {value: item.type_of_credit},
item.remarks === null ? "0.0" : item.remarks === "" ? "0.0" : item.remarks,
item.loan_maturity_date === null ? "0.0" : item.loan_maturity_date === "" ? "0.0" : item.loan_maturity_date,
item.interest === null ? "0.0" : item.interest === "" ? "0.0" : item.interest,
item.remarks === null ? "" : item.remarks === "" ? "" : item.remarks,
item.loan_maturity_date === null ? this.state.currentDate : item.loan_maturity_date === "" ? this.state.currentDate : item.loan_maturity_date,
item.interest === null ? "0" : item.interest === "" ? "0" : item.interest,
item.currency === null ? "0.0" : item.currency === "" ? "0.0" : item.currency,
item.loan_plafond_amount_ori,
item.loan_plafond_amount_idr === null ? "0.0" : item.loan_plafond_amount_idr === "" ? "0.0" : item.loan_plafond_amount_idr,
......@@ -415,7 +416,6 @@ export default class ListOfCreditFacilities extends Component {
item.out_loan_ki_amount_idr === null ? "0.0" : item.out_loan_ki_amount_idr === "" ? "0.0" : item.out_loan_ki_amount_idr,
item.out_loan_kmk_amount_ori,
item.out_loan_kmk_amount_idr === null ? "0.0" : item.out_loan_kmk_amount_idr === "" ? "0.0" : item.out_loan_kmk_amount_idr,
// item.mtd_vs_previous_month === null ? "0.0" : item.mtd_vs_previous_month === "" ? "0.0" : item.mtd_vs_previous_month,
item.out_loan_other_type,
item.out_loan_other_amount_ori,
item.out_loan_other_amount_idr === null ? "0.0" : item.out_loan_other_amount_idr === "" ? "0.0" : item.out_loan_other_amount_idr,
......@@ -432,20 +432,18 @@ export default class ListOfCreditFacilities extends Component {
item.ebitda_to_interest_financial,
item.ebitda_to_interest_current === null ? "0.0" : item.ebitda_to_interest_current === "" ? "0.0" : item.ebitda_to_interest_current,
item.other_ratio1_ratio_name,
item.other_ratio1_financial,
item.other_ratio1_financial === null ? "0.0" : item.other_ratio1_financial === "" ? "0.0" : item.other_ratio1_financial,
item.other_ratio1_current === null ? "0.0" : item.other_ratio1_current === "" ? "0.0" : item.other_ratio1_current,
item.other_ratio2_ratio_name,
item.other_ratio2_financial,
item.other_ratio2_financial === null ? "0.0" : item.other_ratio2_financial === "" ? "0.0" : item.other_ratio2_financial,
item.other_ratio2_current === null ? "0.0" : item.other_ratio2_current === "" ? "0.0" : item.other_ratio2_current,
item.other_ratio3_ratio_name,
item.other_ratio3_financial,
item.other_ratio3_financial === null ? "0.0" : item.other_ratio3_financial === "" ? "0.0" : item.other_ratio3_financial,
item.other_ratio3_current === null ? "0.0" : item.other_ratio3_current === "" ? "0.0" : item.other_ratio3_current,
item.other_ratio4_ratio_name,
item.other_ratio4_financia,,
item.other_ratio4_financial === null ? "0.0" : item.other_ratio4_financial === "" ? "0.0" : item.other_ratio4_financial,
item.other_ratio4_current === null ? "0.0" : item.other_ratio4_current === "" ? "0.0" : item.other_ratio4_current,
item.notes,
// item.per_bs === null ? "0.0" : item.per_bs === "" ? "0.0" : item.per_bs,
// item.diff === null ? "0.0" : item.diff === "" ? "0.0" : item.diff,
],
[9, "", "", "", "", "", {value: "Grand Total"}, null, "", "", "", "0", "", "0", "", "0", "", "0", "", "", "0", "0", "0", "0", "0", "", "0", "", "0", "", "0", "", "0", "", "", "", "", "", "", "", "", "", "", "", "", "notes", 999999 ],
)
......@@ -456,13 +454,12 @@ export default class ListOfCreditFacilities extends Component {
item.parent,
item.formula,
item.level,
// item.description,
item.borrower_comp_name === null ? "0.0" : item.borrower_comp_name === "" ? "0.0" : item.borrower_comp_name,
item.borrower_comp_name === null ? this.props.company.company_name : item.borrower_comp_name === "" ? this.props.company.company_name : item.borrower_comp_name,
item.bank_name === null ? null : item.bank_name === "" ? null : {value: item.bank_name},
item.type_of_credit === null ? null : item.type_of_credit === "" ? null : {value: item.type_of_credit},
item.remarks === null ? "0.0" : item.remarks === "" ? "0.0" : item.remarks,
item.loan_maturity_date === null ? "0.0" : item.loan_maturity_date === "" ? "0.0" : item.loan_maturity_date,
item.interest === null ? "0.0" : item.interest === "" ? "0.0" : item.interest,
item.remarks === null ? "" : item.remarks === "" ? "" : item.remarks,
item.loan_maturity_date === null ? this.state.currentDate : item.loan_maturity_date === "" ? this.state.currentDate : item.loan_maturity_date,
item.interest === null ? "0" : item.interest === "" ? "0" : item.interest,
item.currency === null ? "0.0" : item.currency === "" ? "0.0" : item.currency,
item.loan_plafond_amount_ori,
item.loan_plafond_amount_idr === null ? "0.0" : item.loan_plafond_amount_idr === "" ? "0.0" : item.loan_plafond_amount_idr,
......@@ -470,7 +467,6 @@ export default class ListOfCreditFacilities extends Component {
item.out_loan_ki_amount_idr === null ? "0.0" : item.out_loan_ki_amount_idr === "" ? "0.0" : item.out_loan_ki_amount_idr,
item.out_loan_kmk_amount_ori,
item.out_loan_kmk_amount_idr === null ? "0.0" : item.out_loan_kmk_amount_idr === "" ? "0.0" : item.out_loan_kmk_amount_idr,
// item.mtd_vs_previous_month === null ? "0.0" : item.mtd_vs_previous_month === "" ? "0.0" : item.mtd_vs_previous_month,
item.out_loan_other_type,
item.out_loan_other_amount_ori,
item.out_loan_other_amount_idr === null ? "0.0" : item.out_loan_other_amount_idr === "" ? "0.0" : item.out_loan_other_amount_idr,
......@@ -487,20 +483,18 @@ export default class ListOfCreditFacilities extends Component {
item.ebitda_to_interest_financial,
item.ebitda_to_interest_current === null ? "0.0" : item.ebitda_to_interest_current === "" ? "0.0" : item.ebitda_to_interest_current,
item.other_ratio1_ratio_name,
item.other_ratio1_financial,
item.other_ratio1_financial === null ? "0.0" : item.other_ratio1_financial === "" ? "0.0" : item.other_ratio1_financial,
item.other_ratio1_current === null ? "0.0" : item.other_ratio1_current === "" ? "0.0" : item.other_ratio1_current,
item.other_ratio2_ratio_name,
item.other_ratio2_financial,
item.other_ratio2_financial === null ? "0.0" : item.other_ratio2_financial === "" ? "0.0" : item.other_ratio2_financial,
item.other_ratio2_current === null ? "0.0" : item.other_ratio2_current === "" ? "0.0" : item.other_ratio2_current,
item.other_ratio3_ratio_name,
item.other_ratio3_financial,
item.other_ratio3_financial === null ? "0.0" : item.other_ratio3_financial === "" ? "0.0" : item.other_ratio3_financial,
item.other_ratio3_current === null ? "0.0" : item.other_ratio3_current === "" ? "0.0" : item.other_ratio3_current,
item.other_ratio4_ratio_name,
item.other_ratio4_financia,,
item.other_ratio4_financial === null ? "0.0" : item.other_ratio4_financial === "" ? "0.0" : item.other_ratio4_financial,
item.other_ratio4_current === null ? "0.0" : item.other_ratio4_current === "" ? "0.0" : item.other_ratio4_current,
item.notes,
// item.per_bs === null ? "0.0" : item.locf.per_bs === "" ? "0.0" : item.locf.per_bs,
// item.diff === null ? "0.0" : item.locf.diff === "" ? "0.0" : item.locf.diff,
])
}
......@@ -521,6 +515,7 @@ export default class ListOfCreditFacilities extends Component {
}
this.setState({ dataTable, dataLoaded: true, loading: false, buttonError: false }, () => {
this.handleCalculate()
this.state.dataTable.map(item => {
if (item[23].length > 0) {
// console.log('masuk')
......@@ -537,92 +532,94 @@ export default class ListOfCreditFacilities extends Component {
uploadProfitLossMR(type) {
let data = []
// this.state.dataTable.map(i => {
// data.push({
// "item_report_id": i[1],
// "borrower_comp_name": i[5],
// "bank_name": i[6].value,
// "type_of_credit": i[7].value,
// "remarks": i[8],
// "loan_maturity_date": i[9],
// "interest": i[10],
// "currency": i[11],
// "loan_plafond_amount_ori": i[12],
// "loan_plafond_amount_idr": i[13],
// "out_loan_ki_amount_ori": i[14],
// "out_loan_ki_amount_idr": i[15],
// "out_loan_kmk_amount_ori": i[16],
// "out_loan_kmk_amount_idr": i[17],
// // "mtd_vs_previous_month": i[18],
// "out_loan_other_type": i[18],
// "out_loan_other_amount_ori": i[19],
// "out_loan_other_amount_idr": i[20],
// "total_out_loan_ori": i[21],
// "total_out_loan_idr": i[22],
// "remaining_plafond_ori": i[23],
// "remaining_plafond_idr": i[24],
// "current_ratio_financial": i[25],
// "current_ratio_current": i[26],
// "der_financial": i[27],
// "der_current": i[28],
// "debt_to_ebitda_financial": i[20],
// "debt_to_ebitda_current": i[30],
// "ebitda_to_interest_financial": i[31],
// "ebitda_to_interest_current": i[32],
// "other_ratio1_ratio_name": i[33],
// "other_ratio1_financial": i[34],
// "other_ratio1_current": i[35],
// "other_ratio2_ratio_name": i[36],
// "other_ratio2_financial": i[37],
// "other_ratio2_current": i[38],
// "other_ratio3_ratio_name": i[39],
// "other_ratio3_financial": i[40],
// "other_ratio3_current": i[41],
// "other_ratio4_ratio_name": i[42],
// "other_ratio4_financial": i[43],
// "other_ratio4_current": i[4],
// "notes": i[45],
// })
// })
// let body = {
// "monthly_report_id": this.props.monthlyReportId,
// "company_id": this.props.company.company_id,
// "periode": this.props.periode,
// "report_id": this.props.report_id,
// "status": type,
// "months": this.props.month.month_id,
// "locf": data,
// "per_bs": this.state.perBS,
// "diff": this.state.diff,
// "total_loan" : this.state.totalOutStand
// }
this.state.dataTable.map(i => {
if (i[0] == 3) {
data.push({
"item_report_id": i[1],
"borrower_comp_name": i[5],
"bank_name": i[6].value,
"type_of_credit": i[7].value,
"remarks": i[8],
"loan_maturity_date": i[9],
"interest": i[10],
"currency": i[11],
"loan_plafond_amount_ori": i[12],
"loan_plafond_amount_idr": i[13],
"out_loan_ki_amount_ori": i[14],
"out_loan_ki_amount_idr": i[15],
"out_loan_kmk_amount_ori": i[16],
"out_loan_kmk_amount_idr": i[17],
// "mtd_vs_previous_month": i[18],
"out_loan_other_type": i[18],
"out_loan_other_amount_ori": i[19],
"out_loan_other_amount_idr": i[20],
"total_out_loan_ori": i[21],
"total_out_loan_idr": i[22],
"remaining_plafond_ori": i[23],
"remaining_plafond_idr": i[24],
"current_ratio_financial": i[25],
"current_ratio_current": i[26],
"der_financial": i[27],
"der_current": i[28],
"debt_to_ebitda_financial": i[20],
"debt_to_ebitda_current": i[30],
"ebitda_to_interest_financial": i[31],
"ebitda_to_interest_current": i[32],
"other_ratio1_ratio_name": i[33],
"other_ratio1_financial": i[34],
"other_ratio1_current": i[35],
"other_ratio2_ratio_name": i[36],
"other_ratio2_financial": i[37],
"other_ratio2_current": i[38],
"other_ratio3_ratio_name": i[39],
"other_ratio3_financial": i[40],
"other_ratio3_current": i[41],
"other_ratio4_ratio_name": i[42],
"other_ratio4_financial": i[43],
"other_ratio4_current": i[4],
"notes": i[45],
})
}
})
let body = {
"monthly_report_id": this.props.monthlyReportId,
"company_id": this.props.company.company_id,
"periode": this.props.periode,
"report_id": this.props.report_id,
"status": type,
"months": this.props.month.month_id,
"locf": data,
"per_bs": this.state.perBS,
"diff": this.state.diff,
"total_loan" : this.state.totalOutStand
}
// console.log(data);
// api.create('UPLOAD').uploadMonthlyReportLOCF(body).then(response => {
// console.log(response);
// if (response.data) {
// if (response.ok) {
// if (response.data.status === "success") {
// this.props.saveToMonthlyReport()
// // this.props.onClickClose()
// // this.props.getReport()
// } else {
// this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
// if (response.data.message.includes("Someone Logged In")) {
// setTimeout(() => {
// localStorage.removeItem(Constant.TOKEN)
// window.location.reload();
// }, 1000);
// }
// })
// // alert(response.data.status)
// }
// } else {
// this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error', loading: false })
// }
// } else {
// this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', loading: false })
// }
// })
api.create('UPLOAD').uploadMonthlyReportLOCF(body).then(response => {
console.log(response);
if (response.data) {
if (response.ok) {
if (response.data.status === "success") {
this.props.saveToMonthlyReport()
// this.props.onClickClose()
// this.props.getReport()
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
// alert(response.data.status)
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error', loading: false })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', loading: false })
}
})
}
getBankData() {
......@@ -631,6 +628,7 @@ export default class ListOfCreditFacilities extends Component {
company_id: this.props.company.company_id,
type: 'BANK_NAME'
}
this.setState({ dataLoaded: false })
api.create().getAllSettingByType(body).then(response => {
console.log(response)
if (response.data) {
......@@ -1185,14 +1183,14 @@ export default class ListOfCreditFacilities extends Component {
setTimeout(() => {
// console.log(dataCoba)
// console.log(dataGabung)
// console.log(newData)
console.log(newData)
// console.log(dataTampungBank)
// console.log(totalLoan);
// dataTable: newData, totalOutStand: newData[newData.length-1][22]
if (bankNameEmpty) {
this.setState({ loading: false, dataTable: this.state.dataTable, totalOutStand: 0, diff: Number(0 - this.state.perBS) })
this.setState({ loading: false, dataTable: this.state.dataTable, totalOutStand: 0, diff: Number(0 - this.state.perBS), saveDraft: false })
} else {
this.setState({ loading: false, dataTable: newData, totalOutStand: totalLoan, diff: Number(totalLoan - this.state.perBS) })
this.setState({ loading: false, dataTable: newData, totalOutStand: totalLoan, diff: Number(totalLoan - this.state.perBS), saveDraft: false, saveComp: Number(totalLoan - this.state.perBS) == 0? false : true })
}
}, 100);
})
......@@ -1590,7 +1588,7 @@ export default class ListOfCreditFacilities extends Component {
type="text"
placeholder=""
disabled={tableMeta.rowData[0] == 8 || tableMeta.rowData[0] == 9? true : false}
defaultValue={val}
defaultValue={tableMeta.rowData[8]}
onBlur={(event) => {
// // // console.log(event.target.value)
// updateValue(event.target.value)
......@@ -1712,7 +1710,7 @@ export default class ListOfCreditFacilities extends Component {
type="text"
placeholder=""
disabled={false}
defaultValue={val}
defaultValue={tableMeta.rowData[11]}
onBlur={(event) => {
// // // console.log(event.target.value)
// updateValue(event.target.value)
......@@ -3617,7 +3615,7 @@ export default class ListOfCreditFacilities extends Component {
type="button"
// disabled={this.state.buttonError}
onClick={() =>
this.state.buttonError ?
this.state.saveComp ?
this.setState({ alert: true, messageAlert: 'Data is not complete !', tipeAlert: 'warning' })
:
this.state.handleTekTekTek == 1 ? null :
......@@ -3629,7 +3627,7 @@ export default class ListOfCreditFacilities extends Component {
}
style={{
backgroundColor: 'transparent',
cursor: this.state.buttonError === true ? 'default' : 'pointer',
cursor: this.state.saveComp === true ? 'default' : 'pointer',
borderColor: 'transparent',
outline: 'none'
}}
......@@ -3662,13 +3660,13 @@ export default class ListOfCreditFacilities extends Component {
<div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150) }}>
{this.state.loading && loadingComponent}
<MuiThemeProvider theme={getMuiTheme()}>
{this.state.dataLoaded && <MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={dataTable2}
columns={columns}
options={options}
/>
</MuiThemeProvider>
</MuiThemeProvider>}
</div>
<div style={{ display: 'flex', justifyContent: 'flex-end', maxWidth: '100%', paddingLeft: 15, paddingRight: 15, marginTop: 5}}>
......@@ -3696,11 +3694,12 @@ export default class ListOfCreditFacilities extends Component {
<div className="col-1">
<button
type="button"
onClick={() => this.setState({ loading: true, visibleLOCFMR: true }, () => {
setTimeout(() => {
this.setState({loading: false})
}, 100);
})}
onClick={() => {
this.getBankData()
this.getTypeOfCredit()
this.getSubmission()
}
}
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
......@@ -3741,7 +3740,7 @@ export default class ListOfCreditFacilities extends Component {
this.state.handleTekTekTek == 1 ? null :
this.setState({ handleTekTekTek: 1, loading: true }, () => {
setTimeout(() => {
this.backToMonthlyReport('draft')
this.uploadProfitLossMR('draft')
}, 100);
})
}
......@@ -3761,19 +3760,19 @@ export default class ListOfCreditFacilities extends Component {
type="button"
// disabled={this.state.buttonError}
onClick={() =>
this.state.buttonError ?
this.state.saveComp ?
this.setState({ alert: true, messageAlert: 'Data is not complete !', tipeAlert: 'warning' })
:
this.state.handleTekTekTek == 1 ? null :
this.setState({ handleTekTekTek: 1, loading: true }, () => {
setTimeout(() => {
this.backToMonthlyReport('submitted')
this.uploadProfitLossMR('submitted')
}, 100);
})
}
style={{
backgroundColor: 'transparent',
cursor: this.state.buttonError === true ? 'default' : 'pointer',
cursor: this.state.saveComp === true ? 'default' : 'pointer',
borderColor: 'transparent',
outline: 'none'
}}
......
src/container/SummaryTriputra/SummaryOfTriputra.js
View file @ 29d60692
......@@ -26,7 +26,6 @@ export default class SummaryOfTriputra extends Component {
{ value: 2, label: 'YTD Report' },
{ value: 3, label: 'CPSM Report' },
{ value: 4, label: 'Historical' },
{ value: 5, label: 'Dashboard Financial' },
],
report: null,
loading: false,
......@@ -233,6 +232,7 @@ export default class SummaryOfTriputra extends Component {
if (this.state.report.value === 1) {
api.create().getDetailReportMB(payload).then(response => {
// console.log(response);
// console.log(payload)
let dataTable = []
if (response.data) {
let res = response.data.data
......
src/router/homeRoutes.js
View file @ 29d60692
......@@ -10,6 +10,7 @@ import UnitBisnis from '../container/MasterData/UnitBisnis'
import Parameter from '../container/MasterData/Parameter/Parameter'
import ReportItems from '../container/MasterData/ReportItems'
import DashboardCAT from '../container/Laporan/DashboardCAT'
import DashboardFinancial from '../container/Laporan/DashboardFinancial'
import BudgetTahunan from '../container/BudgetTahunan';
import RollingOutlook from '../container/RollingOutlook';
import OperatingIndicator from '../container/OprIndicator/OperatingIndicator'
......@@ -96,6 +97,10 @@ const routes = [
path: "/home/summary-of-triputra",
main: SummaryTriputra
},
{
path: "/home/dashboard-financial",
main: DashboardFinancial
},
{
path: "*",
main: screen404
......
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