add dot badge for validation tab

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 (
+        <Badge offset={[5, 0]} dot={hasErrors}>
+          {title}
+        </Badge>
+      );
+    });
+  }
+
+  return {
+    children: <Component />,
+    key: id,
+    label: <Label />,
+  };
+});
 
 const Wrapper = styled(Background)`
   padding: 4px 10px;
@@ -21,13 +49,7 @@ const Wrapper = styled(Background)`
 function Output() {
   return (
     <Wrapper>
-      <Tabs>
-        {outputTabs.map(({ id, title, Component }) => (
-          <Tabs.TabPane tab={title} key={id}>
-            <Component />
-          </Tabs.TabPane>
-        ))}
-      </Tabs>
+      <Tabs items={items} />
     </Wrapper>
   );
 }

apps/web/stores/calculation/index.ts

@@ -17,6 +17,12 @@ export default class CalculationStore {
   public $options: OptionsStore;
   public $validation: Partial<Record<Values.Elements, Validation>>;
 
+  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);

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)));
   }

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,

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];
   }

packages/ui/elements/badge.js

@@ -0,0 +1 @@
+export { Badge } from 'antd';

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';