Files
fibdash/client/src/components/TableManagement.js

76 lines
1.8 KiB
JavaScript

import React, { Component } from 'react';
import {
Box,
Tabs,
Tab,
Paper,
Typography,
} from '@mui/material';
import {
AccountBalance as KreditorIcon,
AccountBalanceWallet as KontoIcon,
Receipt as BUIcon,
} from '@mui/icons-material';
import KreditorTable from './admin/KreditorTable';
import KontoTable from './admin/KontoTable';
import BUTable from './admin/BUTable';
class TableManagement extends Component {
constructor(props) {
super(props);
this.state = {
activeTab: 0,
};
}
handleTabChange = (event, newValue) => {
this.setState({ activeTab: newValue });
};
render() {
const { activeTab } = this.state;
const { user } = this.props;
return (
<Box>
<Typography variant="h4" component="h1" gutterBottom>
Stammdaten verwalten
</Typography>
<Paper elevation={2}>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs
value={activeTab}
onChange={this.handleTabChange}
variant="fullWidth"
>
<Tab
icon={<KreditorIcon />}
label="Kreditoren"
sx={{ minHeight: 64 }}
/>
<Tab
icon={<KontoIcon />}
label="Konten"
sx={{ minHeight: 64 }}
/>
<Tab
icon={<BUIcon />}
label="Buchungsschlüssel"
sx={{ minHeight: 64 }}
/>
</Tabs>
</Box>
<Box sx={{ p: 3 }}>
{activeTab === 0 && <KreditorTable user={user} />}
{activeTab === 1 && <KontoTable user={user} />}
{activeTab === 2 && <BUTable user={user} />}
</Box>
</Paper>
</Box>
);
}
}
export default TableManagement;