Skip to content

T
Tia-dev
Commit 03e43b71 authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

Merge branch 'rifka' into 'master' 

add monthly report

See merge request !196
parents ef36863f 3da9297e
Hide whitespace changes
Inline Side-by-side
Showing with 670 additions and 30 deletions
src/container/ApprovalMatrix/ApprovalMatrix.js
View file @ 03e43b71
......@@ -188,7 +188,7 @@ export default class ApprovalMatrix extends Component {
}
},
{
name: "Start Date",
name: "Valid From",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
......@@ -213,7 +213,7 @@ export default class ApprovalMatrix extends Component {
}
},
{
name: "End Date",
name: "Valid To",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
......
src/container/ApprovalMatrix/CreateApprovalMatrix.js
View file @ 03e43b71
......@@ -195,7 +195,7 @@ export default class CreateApprovalMatrix extends Component {
<div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Add Data</span>
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Create Data</span>
</div>
</div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
......
src/container/BudgetTahunan/TaxPlanning.js
View file @ 03e43b71
......@@ -123,9 +123,9 @@ export default class TaxPlanning extends Component {
handleValue(data) {
let total = 0
this.state.dataTable.map((item,index) => {
this.state.dataTable.map((item, index) => {
if (data.rowData[1] == item[2]) {
total = item[6] == undefined? (total + 0) : (total + item[6])
total = item[data.columnIndex] == undefined ? (total + 0) : (total + item[data.columnIndex])
}
})
let indexParent = this.state.dataTable.findIndex((val) => val[1] == this.state.dataTable[data.rowIndex][2])
......@@ -135,17 +135,17 @@ export default class TaxPlanning extends Component {
}
handleChange(value, tableMeta) {
let val = String(value).split(",").join("")
let data = this.state.dataTable
let indexParent = data.findIndex((val) => val[1] == data[tableMeta.rowIndex][2])
// console.log(indexParent);
if (indexParent > 0) {
let a = data[tableMeta.rowIndex][tableMeta.columnIndex] = Number(value)
let a = data[tableMeta.rowIndex][tableMeta.columnIndex] = Number(val)
let jagain = data[indexParent][tableMeta.columnIndex]
a = data[indexParent][tableMeta.columnIndex] = jagain == undefined? (0 + Number(value)) : (jagain + Number(value))
a = data[indexParent][tableMeta.columnIndex] = jagain == undefined ? (0 + Number(val)) : (jagain + Number(val))
} else {
let a = data[tableMeta.rowIndex][tableMeta.columnIndex] = Number(value)
data[tableMeta.rowIndex][tableMeta.columnIndex] = Number(val)
}
// console.log(this.state.dataTable)
// this.setState({
// data: a,
// }, () => console.log(this.state.dataTable))
......@@ -246,7 +246,16 @@ export default class TaxPlanning extends Component {
/>
</div> :
tableMeta.rowData[0] === 2 ?
<span style={{ fontSize: 12, textAlign: 'right' }}>{this.handleValue(tableMeta)}</span>
<span style={{ fontSize: 12, textAlign: 'right' }}>
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={this.handleValue(tableMeta)}
/>
</span>
:
tableMeta.rowData[0] === 1 ?
<span>-</span>
......@@ -262,8 +271,83 @@ export default class TaxPlanning extends Component {
options: {
filter: false,
customHeadRender: (columnMeta) => (
<th key={3} style={{ cursor: 'pointer', backgroundColor: '#354960', color: '#fff', fontSize: 13, fontWeight: 1, width: 150}} >
<div style={{ borderBottom: "1px #fff solid", textAlign: 'center' }}>{columnMeta.name}</div>
<th key={3} style={{ cursor: 'pointer', backgroundColor: '#354960', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, border: "1px solid rgb(255, 255, 255)" }} >
<div style={{ borderBottom: "1px #fff solid", textAlign: 'center', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-3x" style={{ backgroundColor: '#354960', color: '#fff', fontSize: 13, fontWeight: 1, position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span>{"Trial Balance (Commercial) MTD"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span>{"Fiscal Correction Positive /(Negative)"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span>{"Trial Balance (Fiscal) MTD"}</span>
</div>
</div>
</th>
),
customBodyRender: (value, tableMeta, updateValue) => {
return (
<div>
<div className="grid grid-3x content-center">
<div className="column-1" style={{ paddingRight: 20}}>
{99}
</div>
<div className="column-2" style={{ }}>
{tableMeta.rowData[0] === 4 ?
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ color: "#5198ea", fontSize: 12, textAlign: 'center', borderColor: 'transparent', margin: 0, width: '100%', backgroundColor: 'transparent' }}
type="text"
placeholder=""
value={value}
onChange={event => {
// console.log(event.target)
updateValue(event.target.value)
this.handleChange(event.target.value, tableMeta)
}}
/>
}
/>
</div> :
tableMeta.rowData[0] === 2 ?
<span style={{ fontSize: 12, textAlign: 'center' }}>
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'center', borderColor: 'transparent', margin: 0, width: '100%', backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={this.handleValue(tableMeta)}
/>
</span>
:
tableMeta.rowData[0] === 1 ?
<span>-</span>
:
<span>validasi</span>
}
</div>
<div className="column-3" style={{ paddingLeft: 35}}>
{99}
</div>
</div>
</div>
);
}
}
}, {
name: "March 2021",
options: {
filter: false,
customHeadRender: (columnMeta) => (
<th style={{ cursor: 'pointer', backgroundColor: '#354960', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, border: "1px solid rgb(255, 255, 255)" }} >
<div style={{ borderBottom: "1px #fff solid", textAlign: 'center', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-3x" style={{ backgroundColor: '#354960', color: '#fff', fontSize: 13, fontWeight: 1, position: "sticky" }}>
<div style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span style={{ textAlign: 'center' }}>{"Trial Balance (Commercial) MTD"}</span>
......@@ -295,22 +379,6 @@ export default class TaxPlanning extends Component {
);
}
}
}, {
name: "March 2021",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "April 2021",
options: {
......
src/container/MonthlyReport.js 0 → 100644
View file @ 03e43b71
import React, { Component } from 'react';
import { Typography, Paper, TextField, MenuItem, Select, FormControlLabel } from '@material-ui/core';
import MUIDataTable from 'mui-datatables';
import Images from '../assets/Images';
import BalanceSheet from './BudgetTahunan/BalanceSheet';
import api from '../api';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { titleCase } from '../library/Utils';
import ProfitLoss from './BudgetTahunan/ProfitLoss';
import TaxPlanning from './BudgetTahunan/TaxPlanning';
import FixedAssetsMovement from './BudgetTahunan/FixedAssetsMovement';
import CorporateAnnualTarget from './BudgetTahunan/CorporateAnnualTarget';
import { ExcelRenderer } from 'react-excel-renderer';
import UploadFile from "../library/Upload";
import { format } from 'date-fns';
export default class MonthlyReport extends Component {
constructor(props) {
super(props)
this.state = {
perusahaan: 'TAP Group',
listRevision: null,
revision: null,
visibleMonthlyReport: true,
visibleBS: false,
listPeriode: null,
periode: null,
listCompany: null,
company: null,
report_id: null,
visiblePL: false,
visibleFAM: false,
visibleCAT: false,
listAttachment: [],
visibleUpload: false
}
this.fileHandler = this.fileHandler.bind(this);
}
componentDidMount() {
this.getCompanyActive()
}
getReportAttachment() {
let payload = {
"company_id": this.state.company.company_id,
"periode": this.state.periode.periode,
"revision": this.state.revision.revision,
}
api.create().getMasterBudgetAtt(payload).then(response => {
if (response.data) {
if (response.data.status === "success") {
this.setState({ listAttachment: response.data.data })
}
}
// console.log(response);
})
}
getReport() {
let payload = {
"company_id": this.state.company.company_id,
"periode": this.state.periode.periode,
"report_type": "Monthly Report",
}
api.create().getReportTypeBody(payload).then(response => {
// console.log(response);
if (response.data) {
if (response.data.status === "success") {
let dataTable = response.data.data.map((item, index) => {
return [
item.number,
item.report_name,
item.revision,
item.current_status,
item.report_id,
item.is_can_upload,
item.revision
]
})
// console.log(dataTable);
this.setState({ dataTable })
}
}
})
}
getCompanyActive() {
api.create().getPerusahaanActive().then((response) => {
if (response.data.status === 'success') {
let data = response.data.data
let companyData = data.map((item) => {
return {
company_id: item.company_id,
company_name: item.company_name,
}
})
let defaultProps = {
options: companyData,
getOptionLabel: (option) => titleCase(option.company_name),
};
this.setState({ listCompany: defaultProps, company: companyData[0] }, () => {
this.getPeriode()
})
} else {
alert(response.data.message)
}
})
}
getPeriode() {
api.create().getPeriodeTransaction().then(response => {
let dateNow = new Date
let year = format(dateNow, 'yyyy')
if (response.data) {
if (response.data.status === "success") {
let data = response.data.data
let periodeData = data.map((item) => {
return {
periode: item,
}
})
let defaultProps = {
options: periodeData,
getOptionLabel: (option) => option.periode,
};
let index = data.sort((a, b) => a - b).findIndex((val) => val == year)
this.setState({ listPeriode: defaultProps, periode: index == -1 ? periodeData[0] : periodeData[index] }, () => {
this.getRevision()
})
}
}
})
}
getRevision() {
let payload = {
"company_id": this.state.company.company_id,
"periode": this.state.periode.periode
}
api.create().getRevision(payload).then(response => {
console.log(response);
if (response.data) {
if (response.data.status === "success") {
let data = response.data.data
let revisionData = data.map((item) => {
return {
revision: item,
}
})
let defaultProps = {
options: revisionData,
getOptionLabel: (option) => option.revision,
};
this.setState({ listRevision: defaultProps, revision: revisionData[0] }, () => {
this.getReport()
this.getReportAttachment()
})
}
}
})
}
clickDetail(item, id) {
this.setState({ report_id: id })
if (item === 'Balance Sheet') {
this.setState({
visibleMonthlyReport: false,
visibleBS: true,
visiblePL: false,
visibleCAT: false,
visibleFAM: false,
visibleTP: false,
})
} else if (item === 'Profit & Loss') {
this.setState({
visibleMonthlyReport: false,
visibleBS: false,
visiblePL: true,
visibleCAT: false,
visibleFAM: false,
visibleTP: false
})
} else if (item === 'Tax Planning') {
this.setState({
visibleMonthlyReport: false,
visibleBS: false,
visiblePL: false,
visibleCAT: false,
visibleFAM: false,
visibleTP: true
})
} else if (item === 'Fixed Assets Movement') {
this.setState({
visibleMonthlyReport: false,
visibleBS: false,
visiblePL: false,
visibleCAT: false,
visibleFAM: true,
visibleTP: false
})
} else if (item === 'CAT') {
this.setState({
visibleMonthlyReport: false,
visibleBS: false,
visiblePL: false,
visibleCAT: true,
visibleFAM: false,
visibleTP: false
})
}
}
handleChange(value, tableMeta) {
let data = this.state.dataTable
data[tableMeta.rowIndex][tableMeta.columnIndex] = value
}
fileHandler = (event) => {
let fileObj = event
ExcelRenderer(fileObj, (err, resp) => {
// console.log(resp)
if (err) {
console.log(err);
}
else {
const formData = new FormData();
formData.append("revision", Number(this.state.revisi));
formData.append("companyId", this.state.company.company_id);
formData.append("periode", Number(this.state.periode.periode));
formData.append("file", event);
this.setState({ formData })
}
})
}
uploadAttachment(formData) {
api.create().uploadAttachment(formData).then(response => {
if (response.data) {
if (response.data.status === "success") {
this.setState({ visibleUpload: false }, () => {
this.getReport()
this.getReportAttachment()
})
}
}
// console.log(response)
})
}
render() {
const columns = ["#", "Jenis Laporan",
{
name: "Revision",
options: {
customBodyRender: (val, tableMeta, updateValue) => {
var list = [];
for (var i = 0; i <= tableMeta.rowData[6]; i++) {
list.push(i);
}
return (
<div style={{ display: 'flex' }}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<Select
value={val}
onChange={event => {
// console.log(event.target)
updateValue(event.target.value)
this.handleChange(event.target.value, tableMeta)
}}
autoWidth
>
{list.map((item, index) =>
<MenuItem key={index} value={item}>{item}</MenuItem>
)}
</Select>
}
/>
</div >
);
}
}
}, {
name: "Status",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
{val === "submitted" || val === "approved" ?
<img src={Images.ceklis} style={{ width: 31, height: 24 }} /> :
val === "revision" ?
<span>Revisi</span> :
null
}
</div >
);
}
}
},
{
name: "Action",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<button
style={{
backgroundColor: 'transparent',
cursor: tableMeta.rowData[5] ? 'pointer' : null,
borderColor: 'transparent'
}}
// onClick={() =>
// tableMeta.rowData[5] ? this.clickDetail(tableMeta.rowData[1], tableMeta.rowData[4]) : null
// }
>
<Typography style={{ color: tableMeta.rowData[5] ? '#5198ea' : 'GrayText', fontSize: 12, }}>Detail</Typography>
</button>
</div >
);
}
}
}, {
name: "",
options: { display: false }
}, {
name: "",
options: { display: false }
}]
// const dataTable = [
// ["1", "Balance Sheet", "done"],
// ["2", "Profit & Loss", ""],
// ["3", "CAT", "done"],
// ["4", "Fixed Assets Movement", ""],
// ["5", "Tax Planning", "done"],
// ["6", "Balance Sheet", "done"],
// ["7", "Profit & Loss", ""],
// ["8", "CAT", "done"],
// ["9", "Fixed Assets Movement", ""],
// ["10", "Tax Planning", "done"],
// ["11", "Balance Sheet", "done"],
// ["12", "Profit & Loss", "done"],
// ["13", "CAT", "done"],
// ["14", "Fixed Assets Movement", "done"],
// ["15", "Tax Planning", "done"],
// ]
const options = {
filter: false,
sort: false,
responsive: "scroll",
print: false,
download: false,
selectableRows: false,
viewColumns: false,
rowsPerPage: 5,
rowsPerPageOptions: [5, 25, 100],
search: false
}
const periode = [
{ value: '2021', label: '2021' },
{ value: '2020', label: '2020' },
{ value: '2019', label: '2019' },
{ value: '2018', label: '2018' },
{ value: '2017', label: '2017' },
{ value: '2016', label: '2016' },
]
const perusahaan = [
{ value: 'TAP Group', label: 'TAP Group' },
{ value: '2019', label: '2019' },
{ value: '2018', label: '2018' },
{ value: '2017', label: '2017' },
{ value: '2016', label: '2016' },
]
const revisi = [
{ value: '0', label: '0' },
{ value: '1', label: '1' },
]
return (
<div style={{ flex: 1, backgroundColor: '#f8f8f8' }}>
{this.state.visibleMonthlyReport && (
<div>
<div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Monthly Report</Typography>
</div>
<div style={{ padding: 20, width: '100%' }}>
<Paper style={{ paddingTop: 10 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>MonthlyReport</Typography>
</div>
<div style={{ padding: 20 }}>
<div>
<Autocomplete
{...this.state.listPeriode}
id="periode"
onChange={(event, newInputValue) => this.setState({ periode: newInputValue }, () => {
this.getReport()
this.getReportAttachment()
})}
debug
disableClearable
style={{ width: 250 }}
renderInput={(params) => <TextField {...params} label="Periode" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.periode}
/>
</div>
<div style={{ marginTop: 20 }}>
<Autocomplete
{...this.state.listCompany}
id="company"
onChange={(event, newInputValue) => this.setState({ company: newInputValue }, () => {
this.getReport()
this.getReportAttachment()
})}
debug
disableClearable
style={{ width: 250 }}
renderInput={(params) => <TextField {...params} label="Company" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.company}
/>
</div>
<div style={{ marginTop: 20 }}>
<Autocomplete
{...this.state.listRevision}
id="revision"
onChange={(event, newInputValue) => this.setState({ revision: newInputValue }, () => {
this.getReport()
this.getReportAttachment()
})}
debug
disableClearable
style={{ width: 250 }}
renderInput={(params) => <TextField {...params} label="Revision" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.revision}
/>
</div>
<div style={{ marginTop: 20 }}>
<MUIDataTable
data={this.state.dataTable}
columns={columns}
options={options}
/>
</div>
<div style={{ display: 'flex', marginTop: 20 }}>
<div style={{ width: '50%' }}>
<Typography style={{ fontSize: '16px', color: '#4b4b4b', fontWeight: 'bold' }}>Attachment: </Typography>
</div>
<div style={{ width: '50%' }}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none'
}}
onClick={() => this.setState({ visibleUpload: true })}
>
<Typography style={{ fontSize: '16px', color: '#5198ea' }}>Upload File</Typography>
</button>
</div>
</div>
<div style={{ display: 'flex', marginTop: 10 }}>
<div style={{ width: '50%', paddingLeft: 20 }}>
{this.state.listAttachment.length > 0 ?
this.state.listAttachment.map((item) => {
return (
<Typography style={{ fontSize: '16px', color: '#4b4b4b' }}>{item.attachment_name}</Typography>
)
})
: null
}
</div>
<div style={{ width: '50%' }}>
{this.state.listAttachment.length > 0 ?
this.state.listAttachment.map((item) => {
return (
<Typography style={{ fontSize: '16px', color: '#ff3939' }}>Delete</Typography>
)
})
: null
}
</div>
</div>
</div>
<div style={{ borderTop: 'solid 1px #c4c4c4', padding: 10, backgroundColor: '#f5f5f5', width: '100%', display: 'flex', justifyContent: 'flex-end' }} >
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Submit</Typography>
</div>
</div>
</Paper>
</div>
</div>
)}
{this.state.visibleUpload && (
<div className="test app-popup-show">
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
<div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Upload File</span>
</div>
</div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
<button
type="button"
className="btn btn-circle btn-white"
onClick={() => this.setState({ visibleUpload: false })}
>
<img src={Images.close} />
</button>
</div>
</div>
<UploadFile
type={this.state.uploadStatus}
percentage={this.state.percentage}
result={this.state.result}
acceptedFiles={["xlsx"]}
onHandle={(dt) => {
this.fileHandler(dt)
this.setState({ uploadStatus: 'idle', percentage: '0' })
}}
onUpload={() => this.uploadAttachment(this.state.formData)}
/>
</div>
</div>
)}
{this.state.visibleBS && (
<BalanceSheet
report_id={this.state.report_id}
company={this.state.company}
onClickClose={() => this.setState({ visibleBS: false, visibleMonthlyReport: true })}
/>
)}
{this.state.visiblePL && (
<ProfitLoss
report_id={this.state.report_id}
company={this.state.company}
onClickClose={() => this.setState({ visiblePL: false, visibleMonthlyReport: true })}
/>
)}
{this.state.visibleTP && (
<TaxPlanning
report_id={this.state.report_id}
company={this.state.company}
onClickClose={() => this.setState({ visibleTP: false, visibleMonthlyReport: true })}
/>
)}
{this.state.visibleFAM && (
<FixedAssetsMovement
onClickClose={() => this.setState({ visibleFAM: false, visibleMonthlyReport: true })}
/>
)}
{this.state.visibleCAT && (
<CorporateAnnualTarget
onClickClose={() => this.setState({ visibleCAT: false, visibleMonthlyReport: true })}
/>
)}
</div >
);
}
}
src/library/Array.js
View file @ 03e43b71
......@@ -16,7 +16,7 @@ const arraySide = [
{
img: Images.laporanBulanan,
label: 'Monthly Report',
path: 'beranda',
path: 'monthly-report',
subItem: null
},
{
......
src/router/homeRoutes.js
View file @ 03e43b71
......@@ -13,6 +13,7 @@ import DashboardCAT from '../container/Laporan/DashboardCAT'
import BudgetTahunan from '../container/BudgetTahunan';
import RollingOutlook from '../container/RollingOutlook';
import OperatingIndicator from '../container/OperatingIndicator/OperatingIndicator'
import MonthlyReport from '../container/MonthlyReport';
const routes = [
{
......@@ -71,6 +72,10 @@ const routes = [
path: "/home/profile",
main: Profile
},
{
path: "/home/monthly-report",
main: MonthlyReport
},
{
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