diff --git a/apps/web/Components/Output/index.jsx b/apps/web/Components/Output/index.jsx
index c15e8fd..055e5ce 100644
--- a/apps/web/Components/Output/index.jsx
+++ b/apps/web/Components/Output/index.jsx
@@ -2,11 +2,39 @@ 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 Tabs from 'ui/elements/layout/Tabs';
+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 (
+
+ {title}
+
+ );
+ });
+ }
+
+ return {
+ children: ,
+ key: id,
+ label: ,
+ };
+});
const Wrapper = styled(Background)`
padding: 4px 10px;
@@ -21,13 +49,7 @@ const Wrapper = styled(Background)`
function Output() {
return (
-
- {outputTabs.map(({ id, title, Component }) => (
-
-
-
- ))}
-
+
);
}
diff --git a/apps/web/stores/calculation/index.ts b/apps/web/stores/calculation/index.ts
index c49be96..5170830 100644
--- a/apps/web/stores/calculation/index.ts
+++ b/apps/web/stores/calculation/index.ts
@@ -17,6 +17,12 @@ export default class CalculationStore {
public $options: OptionsStore;
public $validation: Partial>;
+ public get hasErrors() {
+ return (Object.keys(this.$validation) as Values.Elements[]).some(
+ (elementName) => this.$validation[elementName]?.hasErrors
+ );
+ }
+
constructor(rootStore: RootStore) {
this.root = rootStore;
this.$values = new ValuesStore(rootStore);
diff --git a/apps/web/stores/tables/fingap/index.ts b/apps/web/stores/tables/fingap/index.ts
index 90b0541..4b7fe50 100644
--- a/apps/web/stores/tables/fingap/index.ts
+++ b/apps/web/stores/tables/fingap/index.ts
@@ -27,6 +27,10 @@ export default class FinGAPTable {
this.root = rootStore;
}
+ public get hasErrors() {
+ return this.validation.hasErrors;
+ }
+
public getSelectedRisks() {
return toJS(this.risks.filter((x) => this.selectedKeys.has(x.key)));
}
diff --git a/apps/web/stores/tables/insurance/index.ts b/apps/web/stores/tables/insurance/index.ts
index bee94d9..461225b 100644
--- a/apps/web/stores/tables/insurance/index.ts
+++ b/apps/web/stores/tables/insurance/index.ts
@@ -33,6 +33,10 @@ export default class InsuranceTable {
this.root = rootStore;
}
+ public get hasErrors() {
+ return this.validation.hasErrors;
+ }
+
public hydrate = ({
values: initialValues,
options: initialOptions,
diff --git a/apps/web/stores/tables/payments/index.ts b/apps/web/stores/tables/payments/index.ts
index 9e87865..5688f33 100644
--- a/apps/web/stores/tables/payments/index.ts
+++ b/apps/web/stores/tables/payments/index.ts
@@ -40,6 +40,10 @@ export default class PaymentsTable {
);
}
+ public get hasErrors() {
+ return this.validation.hasErrors;
+ }
+
public getValue(index: number) {
return this.values[index];
}
diff --git a/packages/ui/elements/badge.js b/packages/ui/elements/badge.js
new file mode 100644
index 0000000..d4ecff9
--- /dev/null
+++ b/packages/ui/elements/badge.js
@@ -0,0 +1 @@
+export { Badge } from 'antd';
diff --git a/packages/ui/elements/index.ts b/packages/ui/elements/index.ts
index 7b14df4..7ba3afd 100644
--- a/packages/ui/elements/index.ts
+++ b/packages/ui/elements/index.ts
@@ -1,3 +1,4 @@
+export * from './badge';
export { default as Button } from './Button';
export { default as Checkbox } from './Checkbox';
export { default as AntdConfig } from './Config';