RollingOutlook.js 23.8 KB
Newer Older
EKSAD's avatar
EKSAD committed
1
import React, { Component } from 'react';
2
import { Typography, Paper, TextField, MenuItem, Select, FormControlLabel } from '@material-ui/core';
EKSAD's avatar
EKSAD committed
3 4
import MUIDataTable from 'mui-datatables';
import Images from '../assets/Images';
EKSAD's avatar
EKSAD committed
5
import BalanceSheet from './BudgetTahunan/BalanceSheet';
EKSAD's avatar
EKSAD committed
6 7 8
import api from '../api';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { titleCase } from '../library/Utils';
EKSAD's avatar
EKSAD committed
9 10 11 12
import ProfitLoss from './BudgetTahunan/ProfitLoss';
import TaxPlanning from './BudgetTahunan/TaxPlanning';
import FixedAssetsMovement from './BudgetTahunan/FixedAssetsMovement';
import CorporateAnnualTarget from './BudgetTahunan/CorporateAnnualTarget';
13 14 15
import { ExcelRenderer } from 'react-excel-renderer';
import UploadFile from "../library/Upload";
import { format } from 'date-fns';
EKSAD's avatar
EKSAD committed
16 17 18 19 20 21

export default class RollingOutlook extends Component {
    constructor(props) {
        super(props)
        this.state = {
            perusahaan: 'TAP Group',
22 23
            listRevision: null,
            revision: null,
EKSAD's avatar
EKSAD committed
24
            visibleRollingOutlook: true,
25 26 27
            visibleBS: false,
            listPeriode: null,
            periode: null,
EKSAD's avatar
EKSAD committed
28 29 30 31
            listCompany: null,
            company: null,
            report_id: null,
            visiblePL: false,
32 33 34
            visibleCAT: false,
            listAttachment: [],
            visibleUpload: false
EKSAD's avatar
EKSAD committed
35
        }
36
        this.fileHandler = this.fileHandler.bind(this);
EKSAD's avatar
EKSAD committed
37 38 39 40 41 42
    }

    componentDidMount() {
        this.getCompanyActive()
    }

43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58
    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);
        })
    }

EKSAD's avatar
EKSAD committed
59 60 61
    getReport() {
        let payload = {
            "company_id": this.state.company.company_id,
62
            "periode": this.state.periode.periode,
EKSAD's avatar
EKSAD committed
63 64 65
            "report_type": "Rolling Outlook",
        }
        api.create().getReportTypeBody(payload).then(response => {
66
            // console.log(response);
EKSAD's avatar
EKSAD committed
67 68 69 70
            if (response.data) {
                if (response.data.status === "success") {
                    let dataTable = response.data.data.map((item, index) => {
                        return [
71
                            item.number,
EKSAD's avatar
EKSAD committed
72
                            item.report_name,
73 74 75 76 77
                            item.revision,
                            item.current_status,
                            item.report_id,
                            item.is_can_upload,
                            item.revision
EKSAD's avatar
EKSAD committed
78 79
                        ]
                    })
80
                    // console.log(dataTable);
EKSAD's avatar
EKSAD committed
81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100
                    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),
                };
101 102 103
                this.setState({ listCompany: defaultProps, company: companyData[0] }, () => {
                    this.getPeriode()
                })
EKSAD's avatar
EKSAD committed
104 105 106 107 108 109
            } else {
                alert(response.data.message)
            }
        })
    }

110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162
    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()
                    })
                }
            }
        })
    }

EKSAD's avatar
EKSAD committed
163 164 165 166 167 168 169 170 171 172 173 174
    clickDetail(item, id) {
        this.setState({ report_id: id })
        if (item === 'Balance Sheet') {
            this.setState({
                visibleRollingOutlook: false,
                visibleBS: true,
                visiblePL: false,
                visibleCAT: false,
                visibleTP: false,
            })
        } else if (item === 'Profit & Loss') {
            this.setState({
175
                visibleRollingOutlook: false,
EKSAD's avatar
EKSAD committed
176 177 178 179 180 181 182
                visibleBS: false,
                visiblePL: true,
                visibleCAT: false,
                visibleTP: false
            })
        } else if (item === 'Tax Planning') {
            this.setState({
183
                visibleRollingOutlook: false,
EKSAD's avatar
EKSAD committed
184 185 186 187 188
                visibleBS: false,
                visiblePL: false,
                visibleCAT: false,
                visibleTP: true
            })
EKSAD's avatar
EKSAD committed
189 190 191 192 193 194 195 196 197
        } else if (item === 'Fixed Assets Movement') {
            this.setState({
                visibleRollingOutlook: false,
                visibleBS: false,
                visiblePL: false,
                visibleCAT: false,
                visibleTP: false
            })
        } else if (item === 'CAT') {
198 199
            this.setState({
                visibleRollingOutlook: false,
EKSAD's avatar
EKSAD committed
200 201 202 203 204 205 206 207
                visibleBS: false,
                visiblePL: false,
                visibleCAT: true,
                visibleTP: false
            })
        }
    }

208 209 210 211 212 213 214 215 216 217 218 219 220 221
    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();
EKSAD's avatar
EKSAD committed
222
                formData.append("revision", Number(this.state.revision.revision));
223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243
                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)
        })
    }
EKSAD's avatar
EKSAD committed
244 245 246 247

    render() {
        const columns = ["#", "Jenis Laporan",
            {
248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280
                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 >
                        );
                    }
                }
            }, {
EKSAD's avatar
EKSAD committed
281 282 283 284 285
                name: "Status",
                options: {
                    customBodyRender: (val, tableMeta) => {
                        return (
                            <div style={{ display: 'flex' }}>
286
                                {val === "submitted" || val === "approved" ?
EKSAD's avatar
EKSAD committed
287
                                    <img src={Images.ceklis} style={{ width: 31, height: 24 }} /> :
288 289
                                    val === "revision" ? 
                                    <span>Revisi</span> :
EKSAD's avatar
EKSAD committed
290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305
                                    null
                                }
                            </div >
                        );
                    }
                }
            },
            {
                name: "Action",
                options: {
                    customBodyRender: (val, tableMeta) => {
                        return (
                            <div style={{ display: 'flex' }}>
                                <button
                                    style={{
                                        backgroundColor: 'transparent',
306
                                        cursor: tableMeta.rowData[5] ? 'pointer' : null,
EKSAD's avatar
EKSAD committed
307 308
                                        borderColor: 'transparent'
                                    }}
309 310 311
                                    onClick={() =>
                                        tableMeta.rowData[5] ? this.clickDetail(tableMeta.rowData[1], tableMeta.rowData[4]) : null
                                    }
EKSAD's avatar
EKSAD committed
312
                                >
313
                                    <Typography style={{ color: tableMeta.rowData[5] ? '#5198ea' : 'GrayText', fontSize: 12, }}>Detail</Typography>
EKSAD's avatar
EKSAD committed
314 315 316 317 318
                                </button>
                            </div >
                        );
                    }
                }
319 320 321 322 323 324
            }, {
                name: "",
                options: { display: false }
            }, {
                name: "",
                options: { display: false }
EKSAD's avatar
EKSAD committed
325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355
            }]
        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 = [
356
            { value: '2021', label: '2021' },
EKSAD's avatar
EKSAD committed
357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387
            { 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.visibleRollingOutlook && (
                    <div>
                        <div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
                            <Typography style={{ fontSize: '16px', color: 'white' }}>Rolling Outlook & Revisi CAT</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 }}>Rolling Outlook & Revisi CAT</Typography>
                                </div>
                                <div style={{ padding: 20 }}>
                                    <div>
388 389
                                        <Autocomplete
                                            {...this.state.listPeriode}
EKSAD's avatar
EKSAD committed
390
                                            id="periode"
391 392 393 394 395 396 397 398
                                            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 }} />}
EKSAD's avatar
EKSAD committed
399
                                            value={this.state.periode}
400
                                        />
EKSAD's avatar
EKSAD committed
401 402 403 404 405
                                    </div>
                                    <div style={{ marginTop: 20 }}>
                                        <Autocomplete
                                            {...this.state.listCompany}
                                            id="company"
406 407 408 409
                                            onChange={(event, newInputValue) => this.setState({ company: newInputValue }, () => {
                                                this.getReport()
                                                this.getReportAttachment()
                                            })}
EKSAD's avatar
EKSAD committed
410 411 412 413 414 415 416 417
                                            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 }}>
418 419 420 421 422 423 424 425 426 427 428 429 430
                                        <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}
                                        />
EKSAD's avatar
EKSAD committed
431 432 433 434 435 436 437 438 439 440 441 442 443 444
                                    </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%' }}>
445 446 447 448 449 450 451 452 453 454 455
                                            <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>
EKSAD's avatar
EKSAD committed
456 457 458 459
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', marginTop: 10 }}>
                                        <div style={{ width: '50%', paddingLeft: 20 }}>
460 461 462 463 464 465 466 467
                                            {this.state.listAttachment.length > 0 ?
                                                this.state.listAttachment.map((item) => {
                                                    return (
                                                        <Typography style={{ fontSize: '16px', color: '#4b4b4b' }}>{item.attachment_name}</Typography>
                                                    )
                                                })
                                                : null
                                            }
EKSAD's avatar
EKSAD committed
468 469
                                        </div>
                                        <div style={{ width: '50%' }}>
470 471 472 473 474 475 476 477
                                            {this.state.listAttachment.length > 0 ?
                                                this.state.listAttachment.map((item) => {
                                                    return (
                                                        <Typography style={{ fontSize: '16px', color: '#ff3939' }}>Delete</Typography>
                                                    )
                                                })
                                                : null
                                            }
EKSAD's avatar
EKSAD committed
478 479 480 481 482 483 484 485 486 487 488 489 490
                                        </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>
                )}
491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524

                {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>
                )}
EKSAD's avatar
EKSAD committed
525 526 527 528
            </div >
        );
    }
}