Skip to content

T
Tia-dev
Commit 7f8f1810 authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

tebel

parent 848655b9
Hide whitespace changes
Inline Side-by-side
Showing with 201 additions and 144 deletions
src/container/BudgetTahunan/BalanceSheet.js
View file @ 7f8f1810
...@@ -5,6 +5,7 @@ import NumberFormat from 'react-number-format'; ...@@ -5,6 +5,7 @@ import NumberFormat from 'react-number-format';
var ct = require("../../library/CustomTable"); var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable()); const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptionsFixedColumn(); const options = ct.customOptionsFixedColumn();
const style = { const style = {
position: "sticky", position: "sticky",
...@@ -36,9 +37,9 @@ export default class BalanceSheet extends Component { ...@@ -36,9 +37,9 @@ export default class BalanceSheet extends Component {
{tableMeta.rowIndex == 0 || tableMeta.rowIndex == 1 ? {tableMeta.rowIndex == 0 || tableMeta.rowIndex == 1 ?
<span style={{ fontSize: 12, fontWeight: 'bold' }}>{val}</span> <span style={{ fontSize: 12, fontWeight: 'bold' }}>{val}</span>
: :
tableMeta.rowIndex == 2 || tableMeta.rowIndex == 6 || tableMeta.rowIndex == 7 || tableMeta.rowIndex == 8 ? tableMeta.rowIndex == 2 || tableMeta.rowIndex == 6 || tableMeta.rowIndex == 7 || tableMeta.rowIndex == 8 ?
<span style={{ fontSize: 12, marginLeft: 10 }}>{val}</span> : <span style={{ fontSize: 12, marginLeft: 10 }}>{val}</span> :
<span style={{ fontSize: 12, marginLeft: 20 }}>{val}</span> <span style={{ fontSize: 12, marginLeft: 20}}>{val}</span>
} }
</div> </div>
) )
...@@ -261,39 +262,21 @@ export default class BalanceSheet extends Component { ...@@ -261,39 +262,21 @@ export default class BalanceSheet extends Component {
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} > <div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Budget Tahunan - Balance Sheet</Typography> <Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Budget Tahunan - Balance Sheet</Typography>
</div> </div>
<div className="test app-popup-show" style={{ marginTop: 100}}> <div style={{ padding: 20 }}>
<div className="popup-content background-white border-radius"> <div>
<div className="popup-panel grid grid-2x"> <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>PT. XYZ</Typography>
<div className="col-1" style={{ width: '140%' }}> <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Periode : 2021</Typography>
<div className="popup-title"> <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
Test </div>
</div>
</div>
<div className="col-2 content-right" style={{maxWidth: "inherit"}}>
<button
type="button"
className="btn btn-circle btn-grey"
onClick={()=> null}
>
<i className="fa fa-lg fa-times" />
</button>
</div>
</div>
<div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>PT. XYZ</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Periode : 2021</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
</div>
{/* <div style={{ marginTop: 20, width: 1350 }}> <div style={{ marginTop: 20, width: 1350 }}>
<MuiThemeProvider theme={getMuiTheme()}> <MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable <MUIDataTable
data={dataTable} data={dataTable}
columns={columns} columns={columns}
options={options} options={options}
/> />
</MuiThemeProvider> </MuiThemeProvider>
</div> */}
</div> </div>
</div> </div>
</Paper> </Paper>
......
src/container/MasterData/UnitBisnis.js 0 → 100644
View file @ 7f8f1810
import React, { Component } from "react";
import { Container, Row, Col } from "react-bootstrap";
import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import SearchIcon from '@material-ui/icons/Search';
import Images from "../../assets/Images";
import MUIDataTable from "mui-datatables";
import CreateUnitBisnis from "./formUnitBisnis/CreateUnitBisnis";
var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions();
export default class UnitBisnis extends Component {
constructor(props) {
super(props)
this.state = {
visibleCreate: false
}
}
render() {
const columns = ["#", "Nama Perusahaan", "Revisi", "Status", {
name: "Action",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent'
}}
onClick={() => null}
>
<img src={Images.editCopy2} />
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent'
}}
onClick={() => null}
>
<img src={Images.editCopy} />
</button>
</div >
);
}
}
}]
const data = [
["1", "TRIPUTRA AGRO PERSADA", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
["2", "DAYA GROUP", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
["3", "PUNINAR INFINITE RAYA", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
["4", "DHARMA GROUP", "Laporan Bulanan - September 2020", "0 (20 Oktober 2020)", "Belum Disetujui"],
["5", "PUNINAR INFINITE RAYA", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
]
return (
<Container fluid style={{ height: '100vh', padding: 0 }}>
{/* <Row> */}
<div style={{ height: '20vh', backgroundColor: '#354960', width: '100%' }} />
<div style={{ marginTop: -150 }}>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25 }}>
<label style={{ color: 'white', width: '20%' }}>Master Data - Unit Bisnis</label>
<label style={{ color: 'white', width: '60%', justifyContent: 'center', display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center' }}>Search</label>
<div style={{ width: '20%', justifyContent: 'flex-end', display: 'flex' }}>
<img src={Images.add} onClick={() => this.setState({ visibleCreate: true })} />
</div>
</div>
<div style={{ padding: 25 }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
theme={getMuiTheme()}
data={data}
columns={columns}
options={options}
/>
</MuiThemeProvider>
</div>
</div>
{this.state.visibleCreate && (
<CreateUnitBisnis
onClickClose={() => this.setState({ visibleCreate: false })}
/>
)}
</Container>
);
}
}
src/container/MasterData/formUnitBisnis/CreateUnitBisnis.js 0 → 100644
View file @ 7f8f1810
import React, { Component } from 'react';
export default class CreateUnitBisnis extends Component {
render() {
return (
<div className="test app-popup-show" style={{ marginTop: 100 }}>
<div className="popup-content background-white border-radius">
<div className="popup-panel grid grid-2x">
<div className="col-1" style={{ maxWidth: "inherit" }}>
<div className="popup-title">
Create Data
</div>
</div>
<div className="col-2 content-right" style={{ maxWidth: "inherit" }}>
<button
type="button"
className="btn btn-circle btn-grey"
onClick={() => null}
>
<i className="fa fa-lg fa-times" />
</button>
</div>
</div>
<div>
</div>
</div>
</div>
);
}
}
src/container/Otorisasi/User.js
View file @ 7f8f1810
import React, { Component } from "react"; import React, { Component } from "react";
import { Container, Row, Col } from "react-bootstrap"; import { Container, Row, Col } from "react-bootstrap";
import { makeStyles, createMuiTheme } from '@material-ui/core/styles'; import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import SearchIcon from '@material-ui/icons/Search'; import SearchIcon from '@material-ui/icons/Search';
import Images from "../../assets/Images"; import Images from "../../assets/Images";
import MUIDataTable from "mui-datatables"; import MUIDataTable from "mui-datatables";
var ct = require("../../library/CustomTable"); var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable()); const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptionsFixedColumn(); const options = ct.customOptions();
export default class componentName extends Component { export default class componentName extends Component {
render() { render() {
const columns = ["#", "Nama Perusahaan", "Revisi", "Status", { const columns = ["#", "Nama Perusahaan", "Revisi", "Status", {
name: "Action", name: "Action",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<button <button
style={{ style={{
backgroundColor: 'transparent', backgroundColor: 'transparent',
cursor: 'pointer', cursor: 'pointer',
borderColor: 'transparent' borderColor: 'transparent'
}} }}
onClick={() => null} onClick={() => null}
> >
<img src={Images.editCopy2} /> <img src={Images.editCopy2} />
</button> </button>
<button <button
style={{ style={{
backgroundColor: 'transparent', backgroundColor: 'transparent',
cursor: 'pointer', cursor: 'pointer',
borderColor: 'transparent' borderColor: 'transparent'
}} }}
onClick={() => null} onClick={() => null}
> >
<img src={Images.editCopy} /> <img src={Images.editCopy} />
</button> </button>
</div > </div >
); );
}
} }
}
}] }]
const data = [ const data = [
["1", "TRIPUTRA AGRO PERSADA", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"], ["1", "TRIPUTRA AGRO PERSADA", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
["2", "DAYA GROUP", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"], ["2", "DAYA GROUP", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
["3", "PUNINAR INFINITE RAYA", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"], ["3", "PUNINAR INFINITE RAYA", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
["4", "DHARMA GROUP", "Laporan Bulanan - September 2020", "0 (20 Oktober 2020)", "Belum Disetujui"], ["4", "DHARMA GROUP", "Laporan Bulanan - September 2020", "0 (20 Oktober 2020)", "Belum Disetujui"],
["5", "PUNINAR INFINITE RAYA", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"], ["5", "PUNINAR INFINITE RAYA", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
] ]
return ( return (
<Container fluid style={{height: '100vh', padding: 0}}> <Container fluid style={{ height: '100vh', padding: 0 }}>
{/* <Row> */} {/* <Row> */}
<div style={{height: '20vh', backgroundColor: '#354960', width: '100%'}}/> <div style={{ height: '20vh', backgroundColor: '#354960', width: '100%' }} />
<div style={{marginTop: -150}}> <div style={{ marginTop: -150 }}>
<div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25}}> <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25 }}>
<label style={{color:'white', width: '20%'}}>Master Data - Role & Otorisasi</label> <label style={{ color: 'white', width: '20%' }}>Master Data - Role & Otorisasi</label>
<label style={{color:'white', width: '60%', justifyContent: 'center', display: 'flex', backgroundColor:'white', borderWidth: 2, alignItems:'center'}}>Search</label> <label style={{ color: 'white', width: '60%', justifyContent: 'center', display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center' }}>Search</label>
<div style={{width: '20%', justifyContent:'flex-end', display: 'flex'}}> <div style={{ width: '20%', justifyContent: 'flex-end', display: 'flex' }}>
<img src={Images.add}/> <img src={Images.add} />
</div> </div>
</div> </div>
<div style={{padding: 25}}> <div style={{ padding: 25 }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable <MUIDataTable
theme={getMuiTheme()}
data={data} data={data}
columns={columns} columns={columns}
options={options} options={options}
/> />
</MuiThemeProvider>
</div> </div>
</div> </div>
</Container> </Container>
......
src/library/Array.js
View file @ 7f8f1810
...@@ -59,7 +59,7 @@ const arraySide = [ ...@@ -59,7 +59,7 @@ const arraySide = [
{ {
img: '', img: '',
label: 'Unit Bisnis', label: 'Unit Bisnis',
path: 'beranda', path: 'unit-bisnis',
}, },
{ {
img: '', img: '',
......
src/library/CustomTable.js
View file @ 7f8f1810
...@@ -13,7 +13,7 @@ exports.customTable = function () { ...@@ -13,7 +13,7 @@ exports.customTable = function () {
// width: '100% !important', // width: '100% !important',
boxShadow: "0 0 0 0 rgba(154,161,171,.15)", boxShadow: "0 0 0 0 rgba(154,161,171,.15)",
border: "1px rgba(0,0,0,0.1) solid", border: "1px rgba(0,0,0,0.1) solid",
borderRadius: "7.5px", borderRadius: "10px",
overflow: "hidden", overflow: "hidden",
}, },
// responsiveScroll: { // responsiveScroll: {
...@@ -149,7 +149,6 @@ exports.customTable = function () { ...@@ -149,7 +149,6 @@ exports.customTable = function () {
root: { root: {
position: 'relative', position: 'relative',
fontSize: "13px", fontSize: "13px",
padding: "10px 15px",
} }
}, },
MUIDataTableSelectCell: { MUIDataTableSelectCell: {
...@@ -309,72 +308,15 @@ exports.customOptions = function () { ...@@ -309,72 +308,15 @@ exports.customOptions = function () {
// selectableRows: false, // selectableRows: false,
selectableRows: 'none', selectableRows: 'none',
filterType: 'multiselect', filterType: 'multiselect',
responsive: 'scrollMaxHeight', responsive: 'scroll',
rowsPerPage: 5, viewColumns:false,
rowsPerPageOptions: [5, 10, 20, 50],
print: false,
download: false,
elevation: 5,
}
}
exports.customOptions2 = function () {
return {
selectableRows: true,
filterType: 'dropdown',
responsive: 'scrollMaxHeight',
rowsPerPage: 5,
rowsPerPageOptions: [5, 10, 20, 50],
print: false,
download: false,
elevation: 5,
}
}
exports.customOptions3 = function () {
return {
selectableRows: true,
filterType: 'dropdown',
responsive: 'scrollMaxHeight',
rowsPerPage: 5, rowsPerPage: 5,
rowsPerPageOptions: [5, 10, 20, 50], rowsPerPageOptions: [5, 10, 20, 50],
print: false, print: false,
download: false, download: false,
sort: true,
elevation: 5, elevation: 5,
}
}
exports.customOptions4 = function () {
return {
selectableRows: false,
filter: false, filter: false,
responsive: 'scrollMaxHeight', search: false
rowsPerPage: 5,
rowsPerPageOptions: [5, 10, 20, 50],
print: false,
download: false,
sort: true,
search: false,
viewColumns: false,
elevation: 5
}
}
exports.customOptions5 = function () {
return {
// selectableRows: false,
selectableRows: 'none',
filterType: false,
filter: false,
sort: false,
viewColumns: false,
responsive: 'scrollMaxHeight',
rowsPerPage: 5,
rowsPerPageOptions: [5, 10, 20, 50],
print: false,
download: false,
elevation: 5,
} }
} }
......
src/router/homeRoutes.js
View file @ 7f8f1810
...@@ -9,6 +9,7 @@ import BalanceSheet from '../container/BudgetTahunan/BalanceSheet'; ...@@ -9,6 +9,7 @@ import BalanceSheet from '../container/BudgetTahunan/BalanceSheet';
import Profile from '../container/Profile'; import Profile from '../container/Profile';
import ItemLaporan from '../container/ItemLaporan'; import ItemLaporan from '../container/ItemLaporan';
import Perusahaan from '../container/Perusahaan'; import Perusahaan from '../container/Perusahaan';
import UnitBisnis from '../container/MasterData/UnitBisnis'
const routes = [ const routes = [
{ {
...@@ -43,6 +44,10 @@ const routes = [ ...@@ -43,6 +44,10 @@ const routes = [
path: "/home/user", path: "/home/user",
main: User main: User
}, },
{
path: "/home/unit-bisnis",
main: UnitBisnis
},
]; ];
export default routes; export default routes;
\ No newline at end of file
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