Components/Output: set active key after calculation results

apps/web/Components/Output/index.jsx

@@ -5,6 +5,7 @@ import Background from '@/Components/Layout/Background';
 import { useStore } from '@/stores/hooks';
 import { min } from '@/styles/mq';
 import { observer } from 'mobx-react-lite';
+import { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Badge, Tabs } from 'ui/elements';
 
@@ -46,12 +47,27 @@ const Wrapper = styled(Background)`
   }
 `;
 
-function Output() {
+const Output = observer(() => {
+  const { $results } = useStore();
+  const [activeKey, setActiveKey] = useState(undefined);
+
+  useEffect(() => {
+    if ($results.payments.length > 0) {
+      setActiveKey('payments-table');
+    }
+  }, [$results.payments.length]);
+
   return (
     <Wrapper>
-      <Tabs items={items} />
+      <Tabs
+        items={items}
+        activeKey={activeKey}
+        onChange={(key) => {
+          setActiveKey(key);
+        }}
+      />
     </Wrapper>
   );
-}
+});
 
 export default Output;