58 lines
1.2 KiB
JavaScript
58 lines
1.2 KiB
JavaScript
import PaymentsTable from './PaymentsTable';
|
|
import Results from './Results';
|
|
import Validation from './Validation';
|
|
import Background from '@/Components/Layout/Background';
|
|
import { useStore } from '@/stores/hooks';
|
|
import { min } from '@/styles/mq';
|
|
import { observer } from 'mobx-react-lite';
|
|
import styled from 'styled-components';
|
|
import { Badge, Tabs } from 'ui';
|
|
|
|
const outputTabs = [PaymentsTable, Results, Validation];
|
|
const items = outputTabs.map(({ Component, id, title }) => {
|
|
let Label = () => title;
|
|
|
|
if (id === 'validation') {
|
|
Label = observer(() => {
|
|
const { $calculation, $tables } = useStore();
|
|
const hasErrors =
|
|
$calculation.hasErrors ||
|
|
$tables.fingap.hasErrors ||
|
|
$tables.insurance.hasErrors ||
|
|
$tables.payments.hasErrors;
|
|
|
|
return (
|
|
<Badge offset={[5, 0]} dot={hasErrors}>
|
|
{title}
|
|
</Badge>
|
|
);
|
|
});
|
|
}
|
|
|
|
return {
|
|
children: <Component />,
|
|
key: id,
|
|
label: <Label />,
|
|
};
|
|
});
|
|
|
|
const Wrapper = styled(Background)`
|
|
padding: 4px 10px;
|
|
min-height: 200px;
|
|
|
|
${min('laptop')} {
|
|
padding: 4px 18px;
|
|
min-height: 641px;
|
|
}
|
|
`;
|
|
|
|
function Output() {
|
|
return (
|
|
<Wrapper>
|
|
<Tabs items={items} />
|
|
</Wrapper>
|
|
);
|
|
}
|
|
|
|
export default Output;
|