BudgetTahunan.js

import React, { Component } from 'react';
import { Typography, Paper, TextField, MenuItem } from '@material-ui/core';
import MUIDataTable from 'mui-datatables';
import Images from '../assets/Images';

export default class BudgetTahunan extends Component {
    constructor(props) {
        super(props)
        this.state = {
            periode: '2020',
            perusahaan: 'TAP Group',
            revisi: '0'
        }
    }
    render() {
        const columns = ["#", "Jenis Laporan",
            {
                name: "Status",
                options: {
                    customBodyRender: (val, tableMeta) => {
                        return (
                            <div style={{ display: 'flex' }}>
                                {val == 'done' ?
                                    <img src={Images.ceklis} style={{ width: 31, height: 24 }} /> :
                                    null
                                }
                            </div >
                        );
                    }
                }
            },
            {
                name: "Action",
                options: {
                    customBodyRender: (val, tableMeta) => {
                        return (
                            <div style={{ display: 'flex' }}>
                                <button
                                    style={{
                                        backgroundColor: 'transparent',
                                        cursor: 'pointer',
                                        borderColor: 'transparent'
                                    }}
                                    onClick={() => null}
                                >
                                    <Typography style={{ color: '#5198ea', fontSize: 12, }}>Detail</Typography>
                                </button>
                            </div >
                        );
                    }
                }
            }]
        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: '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' }}>
                <div style={{ height: 78, backgroundColor: '#354960', display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
                    <Typography style={{ fontSize: '16px', color: 'white' }}>Pengajuan Budget Tahunan</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 }}>Budget Tahunan</Typography>
                        </div>
                        <div style={{ padding: 20 }}>
                            <div>
                                <TextField
                                    style={{ width: 250, }}
                                    id="periode"
                                    select
                                    label="Periode"
                                    value={this.state.periode}
                                    onChange={(e) => this.setState({ periode: e.target.value })}
                                >
                                    {periode.map((option) => (
                                        <MenuItem key={option.value} value={option.value}>
                                            {option.label}
                                        </MenuItem>
                                    ))}
                                </TextField>
                            </div>
                            <div style={{ marginTop: 20 }}>
                                <TextField
                                    style={{ width: 250, }}
                                    id="perusahaan"
                                    select
                                    label="Perusahaan"
                                    value={this.state.perusahaan}
                                    onChange={(e) => this.setState({ perusahaan: e.target.value })}
                                >
                                    {perusahaan.map((option) => (
                                        <MenuItem key={option.value} value={option.value}>
                                            {option.label}
                                        </MenuItem>
                                    ))}
                                </TextField>
                            </div>
                            <div style={{ marginTop: 20 }}>
                                <TextField
                                    style={{ width: 250, }}
                                    id="reivisi"
                                    select
                                    label="Revisi"
                                    value={this.state.revisi}
                                    onChange={(e) => this.setState({ revisi: e.target.value })}
                                >
                                    {revisi.map((option) => (
                                        <MenuItem key={option.value} value={option.value}>
                                            {option.label}
                                        </MenuItem>
                                    ))}
                                </TextField>
                            </div>

                            <div style={{ marginTop: 20 }}>
                                <MUIDataTable
                                    data={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%' }}>
                                    <Typography style={{ fontSize: '16px', color: '#5198ea' }}>Upload File</Typography>
                                </div>
                            </div>
                            <div style={{ display: 'flex', marginTop: 10 }}>
                                <div style={{ width: '50%', paddingLeft: 20 }}>
                                    <Typography style={{ fontSize: '16px', color: '#4b4b4b' }}>File 1.xls </Typography>
                                    <Typography style={{ fontSize: '16px', color: '#4b4b4b' }}>File 2.xls </Typography>
                                </div>
                                <div style={{ width: '50%' }}>
                                    <Typography style={{ fontSize: '16px', color: '#ff3939' }}>Delete</Typography>
                                    <Typography style={{ fontSize: '16px', color: '#ff3939' }}>Delete</Typography>
                                </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 >
        );
    }
}