Skip to content

T
Tia-dev
Commit 875b0f69 authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

Merge branch 'faisal' into 'master' 

mr fam

See merge request !564
parents daef3dfc 4ace4b05
Show whitespace changes
Inline Side-by-side
Showing with 417 additions and 1 deletion
src/container/MonthlyReport.js
View file @ 875b0f69
......@@ -13,6 +13,7 @@ import { format } from 'date-fns';
import BalanceSheetMR from './MonthlyReport/BalanceSheetMR';
import ProfitLossMR from './MonthlyReport/ProfitLossMR';
import TaxPlanningMR from './MonthlyReport/TaxPlanningMR';
import FixedAssetsMovementMR from './MonthlyReport/FixedAssetsMovementMR';
export default class MonthlyReport extends Component {
constructor(props) {
......@@ -562,7 +563,15 @@ export default class MonthlyReport extends Component {
/>
)}
{this.state.visibleFAM && (
<FixedAssetsMovement
<FixedAssetsMovementMR
open={this.props.open}
report_id={this.state.report_id}
height={this.props.height}
width={this.props.width}
company={this.state.company}
revision={this.state.revisionTable}
periode={this.state.periode.periode}
submissionID={this.state.submissionID}
onClickClose={() => this.setState({ visibleFAM: false, visibleMonthlyReport: true })}
/>
)}
......
src/container/MonthlyReport/FixedAssetsMovementMR.js 0 → 100644
View file @ 875b0f69
import { createMuiTheme, MuiThemeProvider, Paper, TableCell, Typography } from '@material-ui/core'
import MUIDataTable from 'mui-datatables';
import React, { Component } from 'react'
import ReactTooltip from 'react-tooltip';
import Images from '../../assets/Images';
import api from '../../api';
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 FixedAssetsMovementMR extends Component {
constructor(props) {
super(props)
this.state = {
dataTable: []
}
}
componentDidMount() {
this.getItemHierarki()
}
getItemHierarki() {
this.setState({ loading: true })
let payload = {
"report_id": this.props.report_id,
"revision": Number(this.props.revision),
"periode": this.props.periode,
"company_id": this.props.company.company_id,
"submission_id": this.props.submissionID
}
api.create().getDetailReportMB(payload).then(response => {
// console.log(response);
let dataTable = []
if (response.data) {
let res = response.data.data
const handlePushChild = (item) => {
let indexIDzz = dataTable.findIndex((val) => val[1] === item.id)
if (indexIDzz === -1) {
dataTable.push([
item.type_report_id,
item.id,
item.parent,
item.formula,
item.level,
item.description,
item.fixed_asset_movement.total_actual_before === null ? "0" : item.fixed_asset_movement.total_actual_before === "" ? "0" : item.fixed_asset_movement.total_actual_before,
item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.fixed_asset_movement.january, formula: item.fixed_asset_movement.january_formula } : item.fixed_asset_movement.january,
item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.fixed_asset_movement.february, formula: item.fixed_asset_movement.february_formula } : item.fixed_asset_movement.february,
item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.fixed_asset_movement.march, formula: item.fixed_asset_movement.march_formula } : item.fixed_asset_movement.march,
item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.fixed_asset_movement.april, formula: item.fixed_asset_movement.april_formula } : item.fixed_asset_movement.april,
item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.fixed_asset_movement.may, formula: item.fixed_asset_movement.may_formula } : item.fixed_asset_movement.may,
item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.fixed_asset_movement.june, formula: item.fixed_asset_movement.june_formula } : item.fixed_asset_movement.june,
item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.fixed_asset_movement.july, formula: item.fixed_asset_movement.july_formula } : item.fixed_asset_movement.july,
item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.fixed_asset_movement.august, formula: item.fixed_asset_movement.august_formula } : item.fixed_asset_movement.august,
item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.fixed_asset_movement.september, formula: item.fixed_asset_movement.september_formula } : item.fixed_asset_movement.september,
item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.fixed_asset_movement.october, formula: item.fixed_asset_movement.october_formula } : item.fixed_asset_movement.october,
item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.fixed_asset_movement.november, formula: item.fixed_asset_movement.november_formula } : item.fixed_asset_movement.november,
item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.fixed_asset_movement.december, formula: item.fixed_asset_movement.december_formula } : item.fixed_asset_movement.december,
item.fixed_asset_movement.total_current_year,
item.type_report_id == 5 || item.type_report_id == 6 ? 0 : item.fixed_asset_movement.total_next_year,
item.type_report_id == 5 || item.type_report_id == 6 ? 0 : item.fixed_asset_movement.total_more_year,
item.order,
item.fixed_asset_movement.forecast_formula
])
}
if (item.children !== null) {
if (item.children.length > 0) {
item.children.map((items, indexs) => {
handlePushChild(items)
})
}
}
}
res.map((item, index) => {
dataTable.push([
item.type_report_id,
item.id,
item.parent,
item.formula,
item.level,
item.description,
item.fixed_asset_movement.total_actual_before === null ? "0" : item.fixed_asset_movement.total_actual_before === "" ? "0" : item.fixed_asset_movement.total_actual_before,
item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.fixed_asset_movement.january, formula: item.fixed_asset_movement.january_formula } : item.fixed_asset_movement.january,
item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.fixed_asset_movement.february, formula: item.fixed_asset_movement.february_formula } : item.fixed_asset_movement.february,
item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.fixed_asset_movement.march, formula: item.fixed_asset_movement.march_formula } : item.fixed_asset_movement.march,
item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.fixed_asset_movement.april, formula: item.fixed_asset_movement.april_formula } : item.fixed_asset_movement.april,
item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.fixed_asset_movement.may, formula: item.fixed_asset_movement.may_formula } : item.fixed_asset_movement.may,
item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.fixed_asset_movement.june, formula: item.fixed_asset_movement.june_formula } : item.fixed_asset_movement.june,
item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.fixed_asset_movement.july, formula: item.fixed_asset_movement.july_formula } : item.fixed_asset_movement.july,
item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.fixed_asset_movement.august, formula: item.fixed_asset_movement.august_formula } : item.fixed_asset_movement.august,
item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.fixed_asset_movement.september, formula: item.fixed_asset_movement.september_formula } : item.fixed_asset_movement.september,
item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.fixed_asset_movement.october, formula: item.fixed_asset_movement.october_formula } : item.fixed_asset_movement.october,
item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.fixed_asset_movement.november, formula: item.fixed_asset_movement.november_formula } : item.fixed_asset_movement.november,
item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.fixed_asset_movement.december, formula: item.fixed_asset_movement.december_formula } : item.fixed_asset_movement.december,
item.fixed_asset_movement.total_current_year,
item.type_report_id == 5 || item.type_report_id == 6 ? 0 : item.fixed_asset_movement.total_next_year,
item.type_report_id == 5 || item.type_report_id == 6 ? 0 : item.fixed_asset_movement.total_more_year,
item.order,
item.fixed_asset_movement.forecast_formula
])
if (item.children !== null) {
if (item.children.length > 0) {
item.children.map((items, indexs) => {
handlePushChild(items)
})
}
}
})
this.setState({ dataTable, loading: false, buttonError: true, editable: true })
} else {
this.setState({ dataTable, loading: false, buttonError: true, editable: true })
}
})
}
render() {
let dataTable2 = this.state.dataTable
let columns = [
{
name: "Account",
options: {
customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 102, 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 }}>
{val}
</div>
)
}
}
},
{
name: `Month To Date (MTD)`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', 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-3x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Master Budget (MB)"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Rolling Budget (RB)"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#37b5e6' }}>
<span>{"Actual"}</span>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div>
<div className="grid grid-3x content-center">
<div className="col-1">
<div style={{ textAlign: 'right', width: 90 }}>
{val.a}
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'right', width: 90 }}>
{val.b}
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'right', width: 90 }}>
{val.c}
</div>
</div>
</div>
</div>
)
}
}
},
{
name: "Actual Previous Month",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}>
<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 }}>
{val}
</div>
)
}
}
},
{
name: `Variance`,
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 }}>{columnMeta.name}</div>
<div className="grid grid-3x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, border: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<span>{"Act vs Previous Month"}</span>
</div>
<div className="grid grid-2x">
<div className="column-1" style={{ borderRight: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<span>{"Amount"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<span>{"%"}</span>
</div>
</div>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, border: '1px #fff solid', backgroundColor: '#07a7d0' }}>
<div style={{ borderBottom: '1px #fff solid' }}>
<span>{"Act vs MB"}</span>
</div>
<div className="grid grid-2x">
<div className="column-1" style={{ borderRight: '1px #fff solid' }}>
<span>{"Amount"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid' }}>
<span>{"%"}</span>
</div>
</div>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, border: '1px #fff solid', backgroundColor: '#07a7d0' }}>
<div style={{ borderBottom: '1px #fff solid' }}>
<span>{"Act vs RB"}</span>
</div>
<div className="grid grid-2x">
<div className="column-1" style={{ borderRight: '1px #fff solid' }}>
<span>{"Amount"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid' }}>
<span>{"%"}</span>
</div>
</div>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div>
<div className="grid grid-3x content-center">
<div className="col-1">
<div className="grid grid-2x content-center">
<div className="col-1">
<div style={{ textAlign: 'right', width: 90 }}>
{val.a}
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'right', width: 90 }}>
{val.b}
</div>
</div>
</div>
</div>
<div className="col-2">
<div className="grid grid-2x content-center">
<div className="col-1">
<div style={{ textAlign: 'right', width: 90 }}>
{val.c}
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'right', width: 90 }}>
{val.d}
</div>
</div>
</div>
</div>
<div className="col-3">
<div className="grid grid-2x content-center">
<div className="col-1">
<div style={{ textAlign: 'right', width: 90 }}>
{val.e}
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'right', width: 90 }}>
{val.f}
</div>
</div>
</div>
</div>
</div>
</div>
)
}
}
},
]
// let data = [
// ["Total Assets", { a: "2", b: "3", c: "4" }, "5", { a: "6", b: "7", c: "8", d: "9", e: "10", f: "11" }],
// ["Total Assets", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"]
// ]
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' }}>Monthly Report</Typography>
</div>
<div style={{ flex: 1, padding: 20, width: '100%' }}>
<Paper style={{ paddingTop: 10, paddingBottom: 20 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Monthly Report - Fixed Assets Movement</Typography>
</div>
<div style={{ padding: 20 }}>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>{this.props.company.company_name}</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Period : {this.props.periode} (rev.{this.props.revision})</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
</div>
<div style={{ width: '50%' }}>
<div style={{ justifyContent: 'flex-end', display: 'flex', flexFlow: 'wrap' }}>
<a data-tip={'Download Template'} data-for="template">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => null}
>
<img src={Images.template} />
</button>
</a>
<ReactTooltip border={true} id="template" place="bottom" type="light" effect="solid" />
<a data-tip={'Upload'} data-for="upload">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => null}
>
<img src={Images.upload} />
</button>
</a>
<ReactTooltip border={true} id="upload" place="bottom" type="light" effect="solid" />
<a data-tip={'Download'} data-for="download">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => null}
>
<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) }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={dataTable2}
columns={columns}
options={options}
/>
</MuiThemeProvider>
</div>
</div>
</Paper>
</div>
</div>
)
}
}
\ No newline at end of file
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