+++

src/api/index.js

@@ -173,6 +173,10 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
   // UPLOAD FOTO
   const uploadFoto = (body) => api.post('attachment/upload_foto', body)
 
+  // MANAGEMENT DOCUMENT
+  const getDocumentCategory = () => api.get('document_category/get_all_document_category')
+  const getAllDocument = (body) => api.post('document/get_all_document', body)
+
   // ------
   // STEP 3
   // ------
@@ -275,7 +279,9 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
     deleteUnitBisnis,
     deleteParameter,
     deletePerusahaan,
-    deleteReportItems
+    deleteReportItems,
+    getDocumentCategory,
+    getAllDocument
   }
 }
 

src/container/DocumentManagement/AuditTahunan.js

+import React, { Component } from 'react'
+import MUIDataTable from 'mui-datatables'
+import { createMuiTheme, MuiThemeProvider } from '@material-ui/core';
+import api from '../../api';
+
+
+var ct = require("../../library/CustomTable");
+const getMuiTheme = () => createMuiTheme(ct.customTable());
+const options = ct.customOptionsManagementDocument();
+
+export default class AuditTahunan extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            dataTable: []
+        }
+    }
+
+    componentDidMount() {
+        console.log(this.props.data)
+        this.getData()
+    }
+
+    getData() {
+        let payload = {
+            "company_id": 1,
+            "document_category_id": 1
+        }
+
+        api.create().getAllDocument(payload).then(respone => {
+            let dataTable = respone.data.data.map(item => {
+                return [
+                    item.document_name,
+                    item.description,
+                    item.company_name,
+                    "",
+                    item.document_type,
+                    String(Number(item.document_size) / 1000 + ' MB'),
+                    item.created_by,
+                    item.created_at,
+                ]
+            })
+            this.setState({ dataTable })
+        })
+    }
+
+    render() {
+        let columns = [
+            "Nama File", "Keterangan", "Perusahaan", "Periode", "Tipe", "Ukuran", "Ditambahkan Oleh", "Ditambahkan Tanggal"
+        ]
+        return (
+            <div style={{ width: '100%' }}>
+                <div style={{ display: 'grid', justifyContent: 'flex-end' }}>
+                    <button
+                        type="button"
+                        onClick={() => null}
+                        style={{ marginRight: 25 }}
+                    >
+                        <div style={{ width: 150, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
+                            <span style={{ color: '#fff', fontSize: 11 }}>Add</span>
+                        </div>
+                    </button>
+                </div>
+                <div style={{ padding: 25 }}>
+                    <MuiThemeProvider theme={getMuiTheme()}>
+                        <MUIDataTable
+                            theme={getMuiTheme()}
+                            data={this.state.dataTable}
+                            columns={columns}
+                            options={options}
+                        />
+                    </MuiThemeProvider>
+                </div>
+            </div>
+        )
+    }
+}

src/container/DocumentManagement/DocumentManagement copy.js

+import React, {useEffect} from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+import ReactTooltip from 'react-tooltip';
+import Images from '../../assets/Images';
+import { Paper } from '@material-ui/core';
+import ManualBookTia from './ManualBookTia';
+import api from '../../api';
+
+function TabPanel(props) {
+    const { children, value, index, ...other } = props;
+
+    return (
+        <div
+            role="tabpanel"
+            hidden={value !== index}
+            id={`vertical-tabpanel-${index}`}
+            aria-labelledby={`vertical-tab-${index}`}
+            {...other}
+        >
+            {value === index && (
+                <Box p={3}>
+                    <Typography>{children}</Typography>
+                </Box>
+            )}
+        </div>
+    );
+}
+
+TabPanel.propTypes = {
+    children: PropTypes.node,
+    index: PropTypes.any.isRequired,
+    value: PropTypes.any.isRequired,
+};
+
+function a11yProps(index) {
+    return {
+        id: `vertical-tab-${index}`,
+        'aria-controls': `vertical-tabpanel-${index}`,
+    };
+}
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        display: 'flex',
+        // height: 244,
+    },
+    tabs: {
+        borderRight: `1px solid ${theme.palette.divider}`,
+    },
+}));
+
+export default function DocumentManagement() {
+    const classes = useStyles();
+    const [value, setValue] = React.useState(0);
+    const [listData, setListData] = React.useState([])
+
+    const handleChange = (event, newValue) => {
+        setValue(newValue);
+    };
+
+    useEffect(() => {
+        getDataDocument()
+    })
+
+    const getDataDocument = () => {
+        api.create().getDocumentCategory().then(response => {
+            let data = response.data.data
+            setListData(data)
+        })
+    }
+
+    return (
+        <div style={{ flex: 1 }}>
+            <div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
+                <Typography style={{ fontSize: '16px', color: 'white' }}>Document Management</Typography>
+            </div>
+            <Paper style={{ padding: 20 }}>
+                <div style={{ display: 'grid', justifyContent: 'flex-end' }}>
+                    <a data-tip={'Add New'} data-for="create">
+                        <button
+                            style={{
+                                backgroundColor: 'transparent',
+                                cursor: 'pointer',
+                                borderColor: 'transparent',
+                                margin: 5,
+                                marginRight: 20
+                            }}
+                            onClick={() => null}
+                        >
+                            <img src={Images.add} />
+                        </button>
+                    </a>
+                    <ReactTooltip border={true} id="create" place="bottom" type="light" effect="solid" />
+                </div>
+                <div className={classes.root}>
+                    <Tabs
+                        orientation="vertical"
+                        variant="scrollable"
+                        value={value}
+                        onChange={handleChange}
+                        aria-label="Vertical tabs example"
+                        className={classes.tabs}
+                    >
+                        {listData.map((item, index) => {
+                            return (
+                                <Tab label={item.document_category_name} {...a11yProps(index)} />
+                            )
+                        })}
+                    </Tabs>
+                    {listData.map((item, index) => {
+                        return (
+                            <TabPanel value={value} index={index} style={{ width: '100%'}}>
+                                {index === 0 ?
+                                    <ManualBookTia /> :
+                                    <span>Test</span>
+                                }
+                            </TabPanel>
+                        )
+                    })}
+                </div>
+            </Paper>
+        </div>
+    );
+}
\ No newline at end of file

src/container/DocumentManagement/DocumentManagement.js

+import React, { Component } from 'react'
+import { Tabs, Tab, Typography, Paper } from '@material-ui/core'
+import ReactTooltip from 'react-tooltip'
+import Images from '../../assets/Images'
+import ManualBookTia from './ManualBookTia'
+import api from '../../api'
+import AuditTahunan from './AuditTahunan'
+
+export default class DocumentManagement extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            tab: 0,
+            listData: [],
+            id: 0
+        }
+    }
+
+    selectTab = (event, newEvent) => {
+        this.setState({ tab: newEvent })
+    }
+
+    componentDidMount() {
+        this.getDataDocument()
+    }
+
+    getDataDocument() {
+        api.create().getDocumentCategory().then(response => {
+            this.setState({
+                listData: response.data.data,
+                id: response.data.data[0].document_category_id,
+                loadTable: true
+            })
+        })
+    }
+
+    getID(id) {
+        console.log(id);
+        this.setState({ id })
+    }
+
+    render() {
+        return (
+            <div style={{ height: this.props.height, backgroundColor: '#f8f8f8' }}>
+                <div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
+                    <Typography style={{ fontSize: '16px', color: 'white' }}>Management Document</Typography>
+                </div>
+                <div style={{ padding: 20 }}>
+                    <Paper style={{ padding: 20 }}>
+                        <div style={{ display: 'flex' }}>
+                            <Tabs
+                                orientation="vertical"
+                                variant="scrollable"
+                                value={this.state.tab}
+                                onChange={this.selectTab}
+                                aria-label="simple tabs example"
+                                style={{ width: 350 }}
+                            >
+                                {this.state.listData.map((item, index) => {
+                                    return (
+                                        <Tab
+                                            onClick={() => this.setState({ id: item.document_category_id })}
+                                            label={item.document_category_name}
+                                        />
+                                    )
+                                })}
+                            </Tabs>
+                            {this.state.loadTable && (
+                                this.state.id === 2 ?
+                                    <AuditTahunan
+                                        data={this.state.listData[this.state.tab]}
+                                    /> :
+                                    this.state.id === 1 ?
+                                        <ManualBookTia /> :
+                                        <span>Test2</span>
+
+                            )}
+                        </div>
+
+                    </Paper>
+                </div>
+            </div>
+        )
+    }
+}

src/container/DocumentManagement/ManualBookTia.js

+import React, { Component } from 'react'
+import MUIDataTable from 'mui-datatables'
+import { createMuiTheme, MuiThemeProvider } from '@material-ui/core';
+
+
+var ct = require("../../library/CustomTable");
+const getMuiTheme = () => createMuiTheme(ct.customTable());
+const options = ct.customOptions();
+
+export default class ManualBookTia extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            dataTable: []
+        }
+    }
+
+    render() {
+        let columns = [
+            "Nama File", "Keterangan", "Perusahaan", "Tipe", "Ukuran", "Ditambahkan Oleh", "Ditambahkan Tanggal"
+        ]
+        return (
+            <div style={{ width: '100%' }}>
+                <div style={{ display: 'grid', justifyContent: 'flex-end' }}>
+                    <button
+                        type="button"
+                        onClick={() => null}
+                        style={{ marginRight: 25 }}
+                    >
+                        <div style={{ width: 150, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
+                            <span style={{ color: '#fff', fontSize: 11 }}>Add</span>
+                        </div>
+                    </button>
+                </div>
+                <div style={{ padding: 25 }}>
+                    <MuiThemeProvider theme={getMuiTheme()}>
+                        <MUIDataTable
+                            theme={getMuiTheme()}
+                            data={this.state.dataTable}
+                            columns={columns}
+                            options={options}
+                        />
+                    </MuiThemeProvider>
+                </div>
+            </div>
+        )
+    }
+}

src/container/MasterData/Parameter/CreateParameter.js

@@ -433,7 +433,7 @@ export default class CreateParameter extends Component {
             // } else if (R.isEmpty(this.state.tempData.description)) {
             //     this.setState({ errorDeskripsi: true, msgErrorDeskripsi: 'Deskripsi tidak boleh kosong' })
         } else if (R.isEmpty(this.state.tempData.value) && R.isEmpty(this.state.tempData.min_value) && R.isEmpty(this.state.tempData.max_value)) {
-            this.setState({ errorValue: true, msgErrorValue: 'Value tidak boleh kosong' })
+            this.setState({ errorValue: true, msgErrorValue: 'Value Cannot be Empty.' })
         } else if ((!R.isEmpty(this.state.tempData.max_value) && R.isEmpty(this.state.tempData.min_value))) {
             this.setState({ errorMinValue: true, msgErrorMinValue: 'Min Value Cannot be Empty.' })
         } else if (R.isNil(this.state.tempData.start_date)) {
@@ -459,7 +459,7 @@ export default class CreateParameter extends Component {
             // } else if (R.isEmpty(this.state.description)) {
             //     this.setState({ errorDeskripsi: true, msgErrorDeskripsi: 'Deskripsi tidak boleh kosong' })
         } else if ((R.isEmpty(this.state.value) && R.isEmpty(this.state.maxValue) && R.isEmpty(this.state.minValue))) {
-            this.setState({ errorValue: true, msgErrorValue: 'Value tidak boleh kosong' })
+            this.setState({ errorValue: true, msgErrorValue: 'Value Cannot be Empty.' })
         } else if ((!R.isEmpty(this.state.maxValue) && R.isEmpty(this.state.minValue))) {
             this.setState({ errorMinValue: true, msgErrorMinValue: 'Min Value Cannot be Empty.' })
         } else if (R.isNil(this.state.startDate)) {

src/library/CustomTable.js

@@ -528,3 +528,20 @@ exports.customOptionsFixedColumn = function () {
     pagination: false
   }
 }
+
+exports.customOptionsManagementDocument = function () {
+  return {
+    // selectableRows: false,
+    selectableRows: 'none',
+    filterType: 'multiselect',
+    responsive: 'scroll',
+    viewColumns:true,
+    rowsPerPage: 10,
+    rowsPerPageOptions: [10, 20, 30, 50],
+    print: false,
+    download: false,
+    elevation: 5,
+    filter: true,
+    search: true,
+  }
+}
\ No newline at end of file

src/router/homeRoutes.js

@@ -14,6 +14,7 @@ import BudgetTahunan from '../container/BudgetTahunan';
 import RollingOutlook from '../container/RollingOutlook';
 import OperatingIndicator from '../container/OperatingIndicator/OperatingIndicator'
 import MonthlyReport from '../container/MonthlyReport';
+import DocumentManagement from '../container/DocumentManagement/DocumentManagement';
 
 const routes = [
   {
@@ -76,6 +77,10 @@ const routes = [
     path: "/home/monthly-report",
     main: MonthlyReport
   },
+  {
+    path: "/home/document-management",
+    main: DocumentManagement
+  },
   {
     path: "*",
     main: screen404