sub-holding

src/container/Laporan/SubHolding.js

+import React, { Component } from 'react'
+import { Typography, MenuItem, TextField, AppBar, Paper, Tabs, Tab } from '@material-ui/core'
+
+export default class SubHolding extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            periode: '2020',
+            perusahaan: 'TAP Group',
+            laporan: 'Balance Sheet - Montly',
+            tab: 0
+        }
+    }
+
+    selectTab = (event, newEvent) => {
+        this.setState({ tab: newEvent })
+    }
+
+    render() {
+        const laporan = [
+            { value: 'Balance Sheet - Montly', label: 'Balance Sheet - Montly'},
+            { value: 'Profit & Loss - Montly', label: 'Profit & Loss - Montly'},
+            { value: 'Fixed Assets Movement - Montly', label: 'Fixed Assets Movement - Montly'},
+        ]
+        const perusahaan = [
+            { value: 'TIA', label: 'TIA' },
+            { value: 'TAP Group', label: 'TAP Group' },
+            { value: 'EKSAD', label: 'EKSAD' },
+            { value: 'Puninar', label: 'Puninar' },
+        ]
+        const periode = [
+            { value: '2020', label: '2020' },
+            { value: '2019', label: '2019' },
+            { value: '2018', label: '2018' },
+            { value: '2017', label: '2017' },
+            { value: '2016', label: '2016' },
+        ]
+        return (
+            <div style={{ flex: 1, backgroundColor: '#f8f8f8' }} ref={this.myRef}>
+                <div>
+                    <div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
+                        <Typography style={{ fontSize: '16px', color: 'white' }}>Sub Holding 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 }}>Sub Holding</Typography>
+                            </div>
+                            <div className="padding-20px" style={{ minWidth: 'max-content'}}>
+                                <div style={{ marginTop: 20 }}>
+                                    <TextField
+                                        style={{ width: 250 }}
+                                        id="laporan"
+                                        select
+                                        label="Jenis Laporan"
+                                        value={this.state.laporan}
+                                        onChange={(e) => this.setState({ laporan: e.target.value })}
+                                    >
+                                        {laporan.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="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>
+                        </Paper>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}

src/router/homeRoutes.js

@@ -16,6 +16,7 @@ import OperatingIndicator from '../container/OprIndicator/OperatingIndicator'
 import MonthlyReport from '../container/MonthlyReport';
 import DocumentManagement from '../container/DocumentManagement/DocumentManagement';
 import OutlookPA from '../container/OutlookPA';
+import SubHolding from '../container/Laporan/SubHolding';
 
 const routes = [
   {
@@ -86,6 +87,10 @@ const routes = [
     path: "/home/document-management",
     main: DocumentManagement
   },
+  {
+    path: "/home/sub-holding",
+    main: SubHolding
+  },
   {
     path: "*",
     main: screen404