first commit

2026-03-05 11:46:58 +08:00
commit e7033775d8
20657 changed files with 1988940 additions and 0 deletions
--- a/frontend/node_modules/rc-tabs/LICENSE.md
+++ b/frontend/node_modules/rc-tabs/LICENSE.md
@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) 2014-present yiminghe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--- a/frontend/node_modules/rc-tabs/README.md
+++ b/frontend/node_modules/rc-tabs/README.md
@@ -0,0 +1,191 @@
+# rc-tabs
+
+---
+
+React Tabs component.
+
+[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][codecov-image]][codecov-url] [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
+
+[npm-image]: http://img.shields.io/npm/v/rc-tabs.svg?style=flat-square
+[npm-url]: http://npmjs.org/package/rc-tabs
+[github-actions-image]: https://github.com/react-component/tabs/workflows/CI/badge.svg
+[github-actions-url]: https://github.com/react-component/tabs/actions
+[codecov-image]: https://img.shields.io/codecov/c/github/react-component/tabs/master.svg?style=flat-square
+[codecov-url]: https://codecov.io/gh/react-component/tabs/branch/master
+[download-image]: https://img.shields.io/npm/dm/rc-tabs.svg?style=flat-square
+[download-url]: https://npmjs.org/package/rc-tabs
+[bundlephobia-url]: https://bundlephobia.com/result?p=rc-tabs
+[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-tabs
+
+
+## Screenshot
+
+<img src='https://zos.alipayobjects.com/rmsportal/JwLASrsOYJuFRIt.png' width='408'>
+
+## Example
+
+http://localhost:8000/examples
+
+online example: https://tabs.react-component.now.sh/
+
+## install
+
+[![rc-tabs](https://nodei.co/npm/rc-tabs.png)](https://npmjs.org/package/rc-tabs)
+
+## Feature
+
+### Keyboard
+
+- left and up: tabs to previous tab
+- right and down: tabs to next tab
+
+## Usage
+
+```tsx | pure
+import Tabs from 'rc-tabs';
+import ReactDom from 'react-dom';
+
+const callback = (key) => {
+  console.log(key);
+};
+
+const items = [
+  {
+    key: '1',
+    label: 'Google',
+    children: (
+      <div className="text-xl">
+        <p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
+      </div>
+    ),
+  },
+  {
+    key: '2',
+    label: <p>Amazon</p>,
+    children:
+      'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...',
+    disabled: true,
+  },
+  {
+    key: '3',
+    label: <p>Twitter</p>,
+    children: (
+      <div>
+        "There is no one who loves pain itself, who seeks after it and wants to have it, simply
+        because it is pain..."
+      </div>
+    ),
+  },
+];
+
+ReactDom.render(
+  <Tabs
+    tabPosition="bottom"
+    items={items}
+    defaultActiveKey="1"
+    className="md:w-[70%] w-full mx-auto p-2 border-0"
+    onChange={callback}
+    style={{ color: 'yellow' }}
+  />,
+  root,
+);
+```
+
+## API
+
+### Tabs
+
+| name | type | default | description |
+| --- | --- | --- | --- |
+| prefixCls | string | `'rc-tabs'` | prefix class name, use to custom style |
+| className | string | - | to define a class name for an element |
+| style | CSS properties | - | object with css properties for styling |
+| items | TabItem[] | [] | configure tab content |
+| id | string | - | unique identifier |
+| defaultActiveKey | string | - | initial active tabPanel's key if activeKey is absent |
+| activeKey | string | - | current active tabPanel's key |
+| direction | `'ltr' or 'rtl'` | `'ltr'` | Layout direction of tabs component |
+| animated | boolean \| { inkBar: boolean, tabPane: boolean } | `{ inkBar: true, tabPane: false }` | config animation |
+| renderTabBar | (props, TabBarComponent) => ReactElement | - | How to render tab bar |
+| tabBarExtraContent | ReactNode \| `{ left: ReactNode, right: ReactNode }` | - | config extra content |
+| tabBarGutter | number | 0 | config tab bar gutter |
+| tabBarPosition | `'left' \| 'right' \| 'top' \| 'bottom'` | `'top'` | tab nav 's position |
+| tabBarStyle | style | - | tab nav style |
+| tabPosition | `'left' or 'right' or 'top' or 'bottom'` | `'top'` | tab nav 's position |
+| destroyInactiveTabPane | boolean | false | whether destroy inactive TabPane when change tab |
+| onChange | (key) => void | - | called when tabPanel is changed |
+| onTabClick | (key) => void | - | called when tab click |
+| onTabScroll | ({ direction }) => void | - | called when tab scroll |
+| editable | { onEdit(type: 'add' \| 'remove', info: { key, event }), showAdd: boolean, removeIcon: ReactNode, addIcon: ReactNode } | - | config tab editable |
+| locale | { dropdownAriaLabel: string, removeAriaLabel: string, addAriaLabel: string } | - | Accessibility locale help text |
+| moreIcon | ReactNode | - | collapse icon |
+
+### TabItem
+
+| name | type | default | description |
+| --- | --- | --- | --- |
+| key | string | - | corresponding to activeKey, should be unique |
+| label | string | - | TabPane's head display text |
+| tab | ReactNode | - | current tab's title corresponding to current tabPane |
+| className | string | - | to define a class name for an element |
+| style | CSS properties | - | object with css properties for styling |
+| disabled | boolean | false | set TabPane disabled |
+| children | ReactNode | - | TabPane's head display content |
+| forceRender | boolean | false | forced render of content in tabs, not lazy render after clicking on tabs |
+| closable | boolean | false | closable feature of tab item |
+| closeIcon | ReactNode | - | Config close icon |
+| prefixCls | string | `'rc-tabs-tab'` | prefix class name, use to custom style |
+| id | string | - | unique identifier |
+| animated | boolean \| { inkBar: boolean, tabPane: boolean } | `{ inkBar: true, tabPane: false }` | config animation |
+| destroyInactiveTabPane | boolean | false | whether destroy inactive TabPane when change tab |
+| active | boolean | false | active feature of tab item |
+| tabKey | string | - | key linked to tab |
+
+
+### TabPane(support in older versions)
+
+| name | type | default | description |
+| --- | --- | --- | --- |
+| destroyInactiveTabPane | boolean | false | whether destroy inactive TabPane when change tab |
+| key | string | - | corresponding to activeKey, should be unique |
+| forceRender | boolean | false | forced render of content in tabs, not lazy render after clicking on tabs |
+| tab | ReactNode | - | current tab's title corresponding to current tabPane |
+| closeIcon | ReactNode | - | Config close icon |
+
+## Development
+
+```
+npm install
+npm start
+```
+
+## Test Case
+
+```
+npm test
+npm run chrome-test
+```
+
+## Coverage
+
+```
+npm run coverage
+```
+
+open coverage/ dir
+
+## License
+
+rc-tabs is released under the MIT license.
+
+## FAQ
+
+### Responsive Tabs
+
+There are 3 cases when handling responsive tabs:
+![image](https://user-images.githubusercontent.com/27722486/156315099-7e6eda9d-ab77-4b16-9b49-1727c5ec8b26.png)
+
+We get hidden tabs through [useVisibleRange.ts](https://github.com/react-component/tabs/blob/master/src/hooks/useVisibleRange.ts).
+If enconter the third case, in order to make tabs responsive, some tabs should be hidden. 
+So we minus `addSize` when calculating `basicSize` manully, even though there's no addNode in container.
+In this way, case 3 turns to case 2, tabs become stable again.
--- a/frontend/node_modules/rc-tabs/assets/index.css
+++ b/frontend/node_modules/rc-tabs/assets/index.css
@@ -0,0 +1,223 @@
+.rc-tabs-dropdown {
+  position: absolute;
+  background: #fefefe;
+  border: 1px solid black;
+  max-height: 200px;
+  overflow: auto;
+}
+.rc-tabs-dropdown-hidden {
+  display: none;
+}
+.rc-tabs-dropdown-menu {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.rc-tabs-dropdown-menu-item {
+  padding: 4px 8px;
+}
+.rc-tabs-dropdown-menu-item-selected {
+  background: red;
+}
+.rc-tabs-dropdown-menu-item-disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+.rc-tabs-content {
+  position: relative;
+  width: 100%;
+}
+.rc-tabs-content-holder {
+  flex: auto;
+}
+.rc-tabs-tabpane-hidden {
+  display: none;
+}
+.rc-tabs {
+  display: flex;
+}
+.rc-tabs-top,
+.rc-tabs-bottom {
+  flex-direction: column;
+}
+.rc-tabs-top .rc-tabs-ink-bar,
+.rc-tabs-bottom .rc-tabs-ink-bar {
+  height: 3px;
+}
+.rc-tabs-top .rc-tabs-ink-bar {
+  bottom: 0;
+}
+.rc-tabs-bottom .rc-tabs-nav {
+  order: 1;
+}
+.rc-tabs-bottom .rc-tabs-content {
+  order: 0;
+}
+.rc-tabs-bottom .rc-tabs-ink-bar {
+  top: 0;
+}
+.rc-tabs-left.rc-tabs-editable .rc-tabs-tab,
+.rc-tabs-right.rc-tabs-editable .rc-tabs-tab {
+  padding-right: 32px;
+}
+.rc-tabs-left .rc-tabs-nav-wrap,
+.rc-tabs-right .rc-tabs-nav-wrap {
+  flex-direction: column;
+}
+.rc-tabs-left .rc-tabs-ink-bar,
+.rc-tabs-right .rc-tabs-ink-bar {
+  width: 3px;
+}
+.rc-tabs-left .rc-tabs-nav,
+.rc-tabs-right .rc-tabs-nav {
+  flex-direction: column;
+  min-width: 50px;
+}
+.rc-tabs-left .rc-tabs-nav-list,
+.rc-tabs-right .rc-tabs-nav-list,
+.rc-tabs-left .rc-tabs-nav-operations,
+.rc-tabs-right .rc-tabs-nav-operations {
+  flex: 1 0 auto;
+  flex-direction: column;
+}
+.rc-tabs-left .rc-tabs-ink-bar {
+  right: 0;
+}
+.rc-tabs-right .rc-tabs-nav {
+  order: 1;
+}
+.rc-tabs-right .rc-tabs-content {
+  order: 0;
+}
+.rc-tabs-right .rc-tabs-ink-bar {
+  left: 0;
+}
+.rc-tabs-rtl {
+  direction: rtl;
+}
+.rc-tabs-dropdown-rtl {
+  direction: rtl;
+}
+.rc-tabs {
+  overflow: hidden;
+  font-size: 14px;
+  border: 1px solid gray;
+}
+.rc-tabs-nav {
+  position: relative;
+  display: flex;
+  flex: none;
+}
+.rc-tabs-nav-measure,
+.rc-tabs-nav-wrap {
+  position: relative;
+  display: inline-block;
+  display: flex;
+  flex: auto;
+  overflow: hidden;
+  white-space: nowrap;
+  transform: translate(0);
+}
+.rc-tabs-nav-measure-ping-left::before,
+.rc-tabs-nav-wrap-ping-left::before,
+.rc-tabs-nav-measure-ping-right::after,
+.rc-tabs-nav-wrap-ping-right::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  content: '';
+}
+.rc-tabs-nav-measure-ping-left::before,
+.rc-tabs-nav-wrap-ping-left::before {
+  left: 0;
+  border-left: 1px solid red;
+}
+.rc-tabs-nav-measure-ping-right::after,
+.rc-tabs-nav-wrap-ping-right::after {
+  right: 0;
+  border-right: 1px solid red;
+}
+.rc-tabs-nav-measure-ping-top::before,
+.rc-tabs-nav-wrap-ping-top::before,
+.rc-tabs-nav-measure-ping-bottom::after,
+.rc-tabs-nav-wrap-ping-bottom::after {
+  position: absolute;
+  right: 0;
+  left: 0;
+  content: '';
+}
+.rc-tabs-nav-measure-ping-top::before,
+.rc-tabs-nav-wrap-ping-top::before {
+  top: 0;
+  border-top: 1px solid red;
+}
+.rc-tabs-nav-measure-ping-bottom::after,
+.rc-tabs-nav-wrap-ping-bottom::after {
+  bottom: 0;
+  border-top: 1px solid red;
+}
+.rc-tabs-nav-list {
+  position: relative;
+  display: flex;
+  transition: transform 0.3s;
+}
+.rc-tabs-nav-operations {
+  display: flex;
+}
+.rc-tabs-nav-operations-hidden {
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+}
+.rc-tabs-nav-more {
+  background: rgba(255, 0, 0, 0.1);
+  border: 1px solid blue;
+}
+.rc-tabs-nav-add {
+  background: rgba(0, 255, 0, 0.1);
+  border: 1px solid green;
+}
+.rc-tabs-tab {
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin: 0;
+  font-weight: lighter;
+  font-size: 20px;
+  background: rgba(255, 255, 255, 0.5);
+  border: 0;
+  outline: none;
+  cursor: pointer;
+}
+.rc-tabs-tab-btn,
+.rc-tabs-tab-remove {
+  background: transparent;
+  border: 0;
+}
+.rc-tabs-tab-btn {
+  font-weight: inherit;
+  line-height: 32px;
+}
+.rc-tabs-tab-btn:focus {
+  outline: none;
+}
+.rc-tabs-tab-remove:hover {
+  color: red;
+}
+.rc-tabs-tab-active {
+  font-weight: bolder;
+}
+.rc-tabs-tab-focus {
+  outline: 1px auto #1677ff;
+}
+.rc-tabs-ink-bar {
+  position: absolute;
+  background: red;
+  pointer-events: none;
+}
+.rc-tabs-ink-bar-animated {
+  transition: all 0.3s;
+}
+.rc-tabs-extra-content {
+  flex: none;
+}
--- a/frontend/node_modules/rc-tabs/es/TabContext.d.ts
+++ b/frontend/node_modules/rc-tabs/es/TabContext.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { Tab } from './interface';
+export interface TabContextProps {
+    tabs: Tab[];
+    prefixCls: string;
+}
+declare const _default: import("react").Context<TabContextProps>;
+export default _default;
--- a/frontend/node_modules/rc-tabs/es/TabContext.js
+++ b/frontend/node_modules/rc-tabs/es/TabContext.js
@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export default /*#__PURE__*/createContext(null);
--- a/frontend/node_modules/rc-tabs/es/TabNavList/AddButton.d.ts
+++ b/frontend/node_modules/rc-tabs/es/TabNavList/AddButton.d.ts
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { EditableConfig, TabsLocale } from '../interface';
+export interface AddButtonProps {
+    prefixCls: string;
+    editable?: EditableConfig;
+    locale?: TabsLocale;
+    style?: React.CSSProperties;
+}
+declare const AddButton: React.ForwardRefExoticComponent<AddButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default AddButton;
--- a/frontend/node_modules/rc-tabs/es/TabNavList/AddButton.js
+++ b/frontend/node_modules/rc-tabs/es/TabNavList/AddButton.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+var AddButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var prefixCls = props.prefixCls,
+    editable = props.editable,
+    locale = props.locale,
+    style = props.style;
+  if (!editable || editable.showAdd === false) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("button", {
+    ref: ref,
+    type: "button",
+    className: "".concat(prefixCls, "-nav-add"),
+    style: style,
+    "aria-label": (locale === null || locale === void 0 ? void 0 : locale.addAriaLabel) || 'Add tab',
+    onClick: function onClick(event) {
+      editable.onEdit('add', {
+        event: event
+      });
+    }
+  }, editable.addIcon || '+');
+});
+export default AddButton;
--- a/frontend/node_modules/rc-tabs/es/TabNavList/ExtraContent.d.ts
+++ b/frontend/node_modules/rc-tabs/es/TabNavList/ExtraContent.d.ts
@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { TabBarExtraContent, TabBarExtraPosition } from '../interface';
+interface ExtraContentProps {
+    position: TabBarExtraPosition;
+    prefixCls: string;
+    extra?: TabBarExtraContent;
+}
+declare const ExtraContent: React.ForwardRefExoticComponent<ExtraContentProps & React.RefAttributes<HTMLDivElement>>;
+export default ExtraContent;
--- a/frontend/node_modules/rc-tabs/es/TabNavList/ExtraContent.js
+++ b/frontend/node_modules/rc-tabs/es/TabNavList/ExtraContent.js
@@ -0,0 +1,33 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import * as React from 'react';
+var ExtraContent = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var position = props.position,
+    prefixCls = props.prefixCls,
+    extra = props.extra;
+  if (!extra) {
+    return null;
+  }
+  var content;
+
+  // Parse extra
+  var assertExtra = {};
+  if (_typeof(extra) === 'object' && ! /*#__PURE__*/React.isValidElement(extra)) {
+    assertExtra = extra;
+  } else {
+    assertExtra.right = extra;
+  }
+  if (position === 'right') {
+    content = assertExtra.right;
+  }
+  if (position === 'left') {
+    content = assertExtra.left;
+  }
+  return content ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-extra-content"),
+    ref: ref
+  }, content) : null;
+});
+if (process.env.NODE_ENV !== 'production') {
+  ExtraContent.displayName = 'ExtraContent';
+}
+export default ExtraContent;
--- a/frontend/node_modules/rc-tabs/es/TabNavList/OperationNode.d.ts
+++ b/frontend/node_modules/rc-tabs/es/TabNavList/OperationNode.d.ts
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { EditableConfig, Tab, TabsLocale, MoreProps } from '../interface';
+export interface OperationNodeProps {
+    prefixCls: string;
+    className?: string;
+    style?: React.CSSProperties;
+    id: string;
+    tabs: Tab[];
+    rtl: boolean;
+    tabBarGutter?: number;
+    activeKey: string;
+    mobile: boolean;
+    more?: MoreProps;
+    editable?: EditableConfig;
+    locale?: TabsLocale;
+    removeAriaLabel?: string;
+    onTabClick: (key: string, e: React.MouseEvent | React.KeyboardEvent) => void;
+    tabMoving?: boolean;
+    getPopupContainer?: (node: HTMLElement) => HTMLElement;
+    popupClassName?: string;
+}
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<OperationNodeProps & React.RefAttributes<HTMLDivElement>>>;
+export default _default;
--- a/frontend/node_modules/rc-tabs/es/TabNavList/OperationNode.js
+++ b/frontend/node_modules/rc-tabs/es/TabNavList/OperationNode.js
@@ -0,0 +1,193 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import classNames from 'classnames';
+import Dropdown from 'rc-dropdown';
+import Menu, { MenuItem } from 'rc-menu';
+import KeyCode from "rc-util/es/KeyCode";
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { getRemovable } from "../util";
+import AddButton from "./AddButton";
+var OperationNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var prefixCls = props.prefixCls,
+    id = props.id,
+    tabs = props.tabs,
+    locale = props.locale,
+    mobile = props.mobile,
+    _props$more = props.more,
+    moreProps = _props$more === void 0 ? {} : _props$more,
+    style = props.style,
+    className = props.className,
+    editable = props.editable,
+    tabBarGutter = props.tabBarGutter,
+    rtl = props.rtl,
+    removeAriaLabel = props.removeAriaLabel,
+    onTabClick = props.onTabClick,
+    getPopupContainer = props.getPopupContainer,
+    popupClassName = props.popupClassName;
+  // ======================== Dropdown ========================
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedKey = _useState4[0],
+    setSelectedKey = _useState4[1];
+  var _moreProps$icon = moreProps.icon,
+    moreIcon = _moreProps$icon === void 0 ? 'More' : _moreProps$icon;
+  var popupId = "".concat(id, "-more-popup");
+  var dropdownPrefix = "".concat(prefixCls, "-dropdown");
+  var selectedItemId = selectedKey !== null ? "".concat(popupId, "-").concat(selectedKey) : null;
+  var dropdownAriaLabel = locale === null || locale === void 0 ? void 0 : locale.dropdownAriaLabel;
+  function onRemoveTab(event, key) {
+    event.preventDefault();
+    event.stopPropagation();
+    editable.onEdit('remove', {
+      key: key,
+      event: event
+    });
+  }
+  var menu = /*#__PURE__*/React.createElement(Menu, {
+    onClick: function onClick(_ref) {
+      var key = _ref.key,
+        domEvent = _ref.domEvent;
+      onTabClick(key, domEvent);
+      setOpen(false);
+    },
+    prefixCls: "".concat(dropdownPrefix, "-menu"),
+    id: popupId,
+    tabIndex: -1,
+    role: "listbox",
+    "aria-activedescendant": selectedItemId,
+    selectedKeys: [selectedKey],
+    "aria-label": dropdownAriaLabel !== undefined ? dropdownAriaLabel : 'expanded dropdown'
+  }, tabs.map(function (tab) {
+    var closable = tab.closable,
+      disabled = tab.disabled,
+      closeIcon = tab.closeIcon,
+      key = tab.key,
+      label = tab.label;
+    var removable = getRemovable(closable, closeIcon, editable, disabled);
+    return /*#__PURE__*/React.createElement(MenuItem, {
+      key: key,
+      id: "".concat(popupId, "-").concat(key),
+      role: "option",
+      "aria-controls": id && "".concat(id, "-panel-").concat(key),
+      disabled: disabled
+    }, /*#__PURE__*/React.createElement("span", null, label), removable && /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      "aria-label": removeAriaLabel || 'remove',
+      tabIndex: 0,
+      className: "".concat(dropdownPrefix, "-menu-item-remove"),
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        onRemoveTab(e, key);
+      }
+    }, closeIcon || editable.removeIcon || '×'));
+  }));
+  function selectOffset(offset) {
+    var enabledTabs = tabs.filter(function (tab) {
+      return !tab.disabled;
+    });
+    var selectedIndex = enabledTabs.findIndex(function (tab) {
+      return tab.key === selectedKey;
+    }) || 0;
+    var len = enabledTabs.length;
+    for (var i = 0; i < len; i += 1) {
+      selectedIndex = (selectedIndex + offset + len) % len;
+      var tab = enabledTabs[selectedIndex];
+      if (!tab.disabled) {
+        setSelectedKey(tab.key);
+        return;
+      }
+    }
+  }
+  function onKeyDown(e) {
+    var which = e.which;
+    if (!open) {
+      if ([KeyCode.DOWN, KeyCode.SPACE, KeyCode.ENTER].includes(which)) {
+        setOpen(true);
+        e.preventDefault();
+      }
+      return;
+    }
+    switch (which) {
+      case KeyCode.UP:
+        selectOffset(-1);
+        e.preventDefault();
+        break;
+      case KeyCode.DOWN:
+        selectOffset(1);
+        e.preventDefault();
+        break;
+      case KeyCode.ESC:
+        setOpen(false);
+        break;
+      case KeyCode.SPACE:
+      case KeyCode.ENTER:
+        if (selectedKey !== null) {
+          onTabClick(selectedKey, e);
+        }
+        break;
+    }
+  }
+
+  // ========================= Effect =========================
+  useEffect(function () {
+    // We use query element here to avoid React strict warning
+    var ele = document.getElementById(selectedItemId);
+    if (ele && ele.scrollIntoView) {
+      ele.scrollIntoView(false);
+    }
+  }, [selectedKey]);
+  useEffect(function () {
+    if (!open) {
+      setSelectedKey(null);
+    }
+  }, [open]);
+
+  // ========================= Render =========================
+  var moreStyle = _defineProperty({}, rtl ? 'marginRight' : 'marginLeft', tabBarGutter);
+  if (!tabs.length) {
+    moreStyle.visibility = 'hidden';
+    moreStyle.order = 1;
+  }
+  var overlayClassName = classNames(_defineProperty({}, "".concat(dropdownPrefix, "-rtl"), rtl));
+  var moreNode = mobile ? null : /*#__PURE__*/React.createElement(Dropdown, _extends({
+    prefixCls: dropdownPrefix,
+    overlay: menu,
+    visible: tabs.length ? open : false,
+    onVisibleChange: setOpen,
+    overlayClassName: classNames(overlayClassName, popupClassName),
+    mouseEnterDelay: 0.1,
+    mouseLeaveDelay: 0.1,
+    getPopupContainer: getPopupContainer
+  }, moreProps), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "".concat(prefixCls, "-nav-more"),
+    style: moreStyle,
+    "aria-haspopup": "listbox",
+    "aria-controls": popupId,
+    id: "".concat(id, "-more"),
+    "aria-expanded": open,
+    onKeyDown: onKeyDown
+  }, moreIcon));
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefixCls, "-nav-operations"), className),
+    style: style,
+    ref: ref
+  }, moreNode, /*#__PURE__*/React.createElement(AddButton, {
+    prefixCls: prefixCls,
+    locale: locale,
+    editable: editable
+  }));
+});
+export default /*#__PURE__*/React.memo(OperationNode, function (_, next) {
+  return (
+    // https://github.com/ant-design/ant-design/issues/32544
+    // We'd better remove syntactic sugar in `rc-menu` since this has perf issue
+    next.tabMoving
+  );
+});
--- a/frontend/node_modules/rc-tabs/es/TabNavList/TabNode.d.ts
+++ b/frontend/node_modules/rc-tabs/es/TabNavList/TabNode.d.ts
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { EditableConfig, Tab } from '../interface';
+export interface TabNodeProps {
+    id: string;
+    prefixCls: string;
+    tab: Tab;
+    active: boolean;
+    focus: boolean;
+    closable?: boolean;
+    editable?: EditableConfig;
+    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    onResize?: (width: number, height: number, left: number, top: number) => void;
+    renderWrapper?: (node: React.ReactElement) => React.ReactElement;
+    removeAriaLabel?: string;
+    tabCount: number;
+    currentPosition: number;
+    removeIcon?: React.ReactNode;
+    onKeyDown: React.KeyboardEventHandler;
+    onMouseDown: React.MouseEventHandler;
+    onMouseUp: React.MouseEventHandler;
+    onFocus: React.FocusEventHandler;
+    onBlur: React.FocusEventHandler;
+    style?: React.CSSProperties;
+}
+declare const TabNode: React.FC<TabNodeProps>;
+export default TabNode;
--- a/frontend/node_modules/rc-tabs/es/TabNavList/TabNode.js
+++ b/frontend/node_modules/rc-tabs/es/TabNavList/TabNode.js
@@ -0,0 +1,102 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import classNames from 'classnames';
+import * as React from 'react';
+import { genDataNodeKey, getRemovable } from "../util";
+var TabNode = function TabNode(props) {
+  var prefixCls = props.prefixCls,
+    id = props.id,
+    active = props.active,
+    focus = props.focus,
+    _props$tab = props.tab,
+    key = _props$tab.key,
+    label = _props$tab.label,
+    disabled = _props$tab.disabled,
+    closeIcon = _props$tab.closeIcon,
+    icon = _props$tab.icon,
+    closable = props.closable,
+    renderWrapper = props.renderWrapper,
+    removeAriaLabel = props.removeAriaLabel,
+    editable = props.editable,
+    onClick = props.onClick,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    onKeyDown = props.onKeyDown,
+    onMouseDown = props.onMouseDown,
+    onMouseUp = props.onMouseUp,
+    style = props.style,
+    tabCount = props.tabCount,
+    currentPosition = props.currentPosition;
+  var tabPrefix = "".concat(prefixCls, "-tab");
+  var removable = getRemovable(closable, closeIcon, editable, disabled);
+  function onInternalClick(e) {
+    if (disabled) {
+      return;
+    }
+    onClick(e);
+  }
+  function onRemoveTab(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    editable.onEdit('remove', {
+      key: key,
+      event: event
+    });
+  }
+  var labelNode = React.useMemo(function () {
+    return icon && typeof label === 'string' ? /*#__PURE__*/React.createElement("span", null, label) : label;
+  }, [label, icon]);
+  var btnRef = React.useRef(null);
+  React.useEffect(function () {
+    if (focus && btnRef.current) {
+      btnRef.current.focus();
+    }
+  }, [focus]);
+  var node = /*#__PURE__*/React.createElement("div", {
+    key: key,
+    "data-node-key": genDataNodeKey(key),
+    className: classNames(tabPrefix, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(tabPrefix, "-with-remove"), removable), "".concat(tabPrefix, "-active"), active), "".concat(tabPrefix, "-disabled"), disabled), "".concat(tabPrefix, "-focus"), focus)),
+    style: style,
+    onClick: onInternalClick
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: btnRef,
+    role: "tab",
+    "aria-selected": active,
+    id: id && "".concat(id, "-tab-").concat(key),
+    className: "".concat(tabPrefix, "-btn"),
+    "aria-controls": id && "".concat(id, "-panel-").concat(key),
+    "aria-disabled": disabled,
+    tabIndex: disabled ? null : active ? 0 : -1,
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      onInternalClick(e);
+    },
+    onKeyDown: onKeyDown,
+    onMouseDown: onMouseDown,
+    onMouseUp: onMouseUp,
+    onFocus: onFocus,
+    onBlur: onBlur
+  }, focus && /*#__PURE__*/React.createElement("div", {
+    "aria-live": "polite",
+    style: {
+      width: 0,
+      height: 0,
+      position: 'absolute',
+      overflow: 'hidden',
+      opacity: 0
+    }
+  }, "Tab ".concat(currentPosition, " of ").concat(tabCount)), icon && /*#__PURE__*/React.createElement("span", {
+    className: "".concat(tabPrefix, "-icon")
+  }, icon), label && labelNode), removable && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    role: "tab",
+    "aria-label": removeAriaLabel || 'remove',
+    tabIndex: active ? 0 : -1,
+    className: "".concat(tabPrefix, "-remove"),
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      onRemoveTab(e);
+    }
+  }, closeIcon || editable.removeIcon || '×'));
+  return renderWrapper ? renderWrapper(node) : node;
+};
+export default TabNode;
--- a/frontend/node_modules/rc-tabs/es/TabNavList/Wrapper.d.ts
+++ b/frontend/node_modules/rc-tabs/es/TabNavList/Wrapper.d.ts
@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { TabNavListProps } from '.';
+export type TabNavListWrapperProps = Required<Omit<TabNavListProps, 'children' | 'className'>> & TabNavListProps;
+declare const TabNavListWrapper: React.FC<TabNavListWrapperProps>;
+export default TabNavListWrapper;
--- a/frontend/node_modules/rc-tabs/es/TabNavList/Wrapper.js
+++ b/frontend/node_modules/rc-tabs/es/TabNavList/Wrapper.js
@@ -0,0 +1,39 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["renderTabBar"],
+  _excluded2 = ["label", "key"];
+// zombieJ: To compatible with `renderTabBar` usage.
+
+import * as React from 'react';
+import TabNavList from '.';
+import TabContext from "../TabContext";
+import TabPane from "../TabPanelList/TabPane";
+// We have to create a TabNavList components.
+var TabNavListWrapper = function TabNavListWrapper(_ref) {
+  var renderTabBar = _ref.renderTabBar,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var _React$useContext = React.useContext(TabContext),
+    tabs = _React$useContext.tabs;
+  if (renderTabBar) {
+    var tabNavBarProps = _objectSpread(_objectSpread({}, restProps), {}, {
+      // Legacy support. We do not use this actually
+      panes: tabs.map(function (_ref2) {
+        var label = _ref2.label,
+          key = _ref2.key,
+          restTabProps = _objectWithoutProperties(_ref2, _excluded2);
+        return /*#__PURE__*/React.createElement(TabPane, _extends({
+          tab: label,
+          key: key,
+          tabKey: key
+        }, restTabProps));
+      })
+    });
+    return renderTabBar(tabNavBarProps, TabNavList);
+  }
+  return /*#__PURE__*/React.createElement(TabNavList, restProps);
+};
+if (process.env.NODE_ENV !== 'production') {
+  TabNavListWrapper.displayName = 'TabNavListWrapper';
+}
+export default TabNavListWrapper;
--- a/frontend/node_modules/rc-tabs/es/TabNavList/index.d.ts
+++ b/frontend/node_modules/rc-tabs/es/TabNavList/index.d.ts
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import type { GetIndicatorSize } from '../hooks/useIndicator';
+import type { AnimatedConfig, EditableConfig, MoreProps, OnTabScroll, RenderTabBar, TabBarExtraContent, TabPosition, TabsLocale } from '../interface';
+export interface TabNavListProps {
+    id: string;
+    tabPosition: TabPosition;
+    activeKey: string;
+    rtl: boolean;
+    animated?: AnimatedConfig;
+    extra?: TabBarExtraContent;
+    editable?: EditableConfig;
+    more?: MoreProps;
+    mobile: boolean;
+    tabBarGutter?: number;
+    renderTabBar?: RenderTabBar;
+    className?: string;
+    style?: React.CSSProperties;
+    locale?: TabsLocale;
+    onTabClick: (activeKey: string, e: React.MouseEvent | React.KeyboardEvent) => void;
+    onTabScroll?: OnTabScroll;
+    children?: (node: React.ReactElement) => React.ReactElement;
+    getPopupContainer?: (node: HTMLElement) => HTMLElement;
+    popupClassName?: string;
+    indicator?: {
+        size?: GetIndicatorSize;
+        align?: 'start' | 'center' | 'end';
+    };
+}
+declare const TabNavList: React.ForwardRefExoticComponent<TabNavListProps & React.RefAttributes<HTMLDivElement>>;
+export default TabNavList;
--- a/frontend/node_modules/rc-tabs/es/TabNavList/index.js
+++ b/frontend/node_modules/rc-tabs/es/TabNavList/index.js
@@ -0,0 +1,613 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/* eslint-disable react-hooks/exhaustive-deps */
+import classNames from 'classnames';
+import ResizeObserver from 'rc-resize-observer';
+import useEvent from "rc-util/es/hooks/useEvent";
+import { useComposeRef } from "rc-util/es/ref";
+import * as React from 'react';
+import { useEffect, useRef, useState } from 'react';
+import TabContext from "../TabContext";
+import useIndicator from "../hooks/useIndicator";
+import useOffsets from "../hooks/useOffsets";
+import useSyncState from "../hooks/useSyncState";
+import useTouchMove from "../hooks/useTouchMove";
+import useUpdate, { useUpdateState } from "../hooks/useUpdate";
+import useVisibleRange from "../hooks/useVisibleRange";
+import { genDataNodeKey, getRemovable, stringify } from "../util";
+import AddButton from "./AddButton";
+import ExtraContent from "./ExtraContent";
+import OperationNode from "./OperationNode";
+import TabNode from "./TabNode";
+var getTabSize = function getTabSize(tab, containerRect) {
+  // tabListRef
+  var offsetWidth = tab.offsetWidth,
+    offsetHeight = tab.offsetHeight,
+    offsetTop = tab.offsetTop,
+    offsetLeft = tab.offsetLeft;
+  var _tab$getBoundingClien = tab.getBoundingClientRect(),
+    width = _tab$getBoundingClien.width,
+    height = _tab$getBoundingClien.height,
+    left = _tab$getBoundingClien.left,
+    top = _tab$getBoundingClien.top;
+
+  // Use getBoundingClientRect to avoid decimal inaccuracy
+  if (Math.abs(width - offsetWidth) < 1) {
+    return [width, height, left - containerRect.left, top - containerRect.top];
+  }
+  return [offsetWidth, offsetHeight, offsetLeft, offsetTop];
+};
+var getSize = function getSize(refObj) {
+  var _ref = refObj.current || {},
+    _ref$offsetWidth = _ref.offsetWidth,
+    offsetWidth = _ref$offsetWidth === void 0 ? 0 : _ref$offsetWidth,
+    _ref$offsetHeight = _ref.offsetHeight,
+    offsetHeight = _ref$offsetHeight === void 0 ? 0 : _ref$offsetHeight;
+
+  // Use getBoundingClientRect to avoid decimal inaccuracy
+  if (refObj.current) {
+    var _refObj$current$getBo = refObj.current.getBoundingClientRect(),
+      width = _refObj$current$getBo.width,
+      height = _refObj$current$getBo.height;
+    if (Math.abs(width - offsetWidth) < 1) {
+      return [width, height];
+    }
+  }
+  return [offsetWidth, offsetHeight];
+};
+
+/**
+ * Convert `SizeInfo` to unit value. Such as [123, 456] with `top` position get `123`
+ */
+var getUnitValue = function getUnitValue(size, tabPositionTopOrBottom) {
+  return size[tabPositionTopOrBottom ? 0 : 1];
+};
+var TabNavList = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+    style = props.style,
+    id = props.id,
+    animated = props.animated,
+    activeKey = props.activeKey,
+    rtl = props.rtl,
+    extra = props.extra,
+    editable = props.editable,
+    locale = props.locale,
+    tabPosition = props.tabPosition,
+    tabBarGutter = props.tabBarGutter,
+    children = props.children,
+    onTabClick = props.onTabClick,
+    onTabScroll = props.onTabScroll,
+    indicator = props.indicator;
+  var _React$useContext = React.useContext(TabContext),
+    prefixCls = _React$useContext.prefixCls,
+    tabs = _React$useContext.tabs;
+  var containerRef = useRef(null);
+  var extraLeftRef = useRef(null);
+  var extraRightRef = useRef(null);
+  var tabsWrapperRef = useRef(null);
+  var tabListRef = useRef(null);
+  var operationsRef = useRef(null);
+  var innerAddButtonRef = useRef(null);
+  var tabPositionTopOrBottom = tabPosition === 'top' || tabPosition === 'bottom';
+  var _useSyncState = useSyncState(0, function (next, prev) {
+      if (tabPositionTopOrBottom && onTabScroll) {
+        onTabScroll({
+          direction: next > prev ? 'left' : 'right'
+        });
+      }
+    }),
+    _useSyncState2 = _slicedToArray(_useSyncState, 2),
+    transformLeft = _useSyncState2[0],
+    setTransformLeft = _useSyncState2[1];
+  var _useSyncState3 = useSyncState(0, function (next, prev) {
+      if (!tabPositionTopOrBottom && onTabScroll) {
+        onTabScroll({
+          direction: next > prev ? 'top' : 'bottom'
+        });
+      }
+    }),
+    _useSyncState4 = _slicedToArray(_useSyncState3, 2),
+    transformTop = _useSyncState4[0],
+    setTransformTop = _useSyncState4[1];
+  var _useState = useState([0, 0]),
+    _useState2 = _slicedToArray(_useState, 2),
+    containerExcludeExtraSize = _useState2[0],
+    setContainerExcludeExtraSize = _useState2[1];
+  var _useState3 = useState([0, 0]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tabContentSize = _useState4[0],
+    setTabContentSize = _useState4[1];
+  var _useState5 = useState([0, 0]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    addSize = _useState6[0],
+    setAddSize = _useState6[1];
+  var _useState7 = useState([0, 0]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    operationSize = _useState8[0],
+    setOperationSize = _useState8[1];
+  var _useUpdateState = useUpdateState(new Map()),
+    _useUpdateState2 = _slicedToArray(_useUpdateState, 2),
+    tabSizes = _useUpdateState2[0],
+    setTabSizes = _useUpdateState2[1];
+  var tabOffsets = useOffsets(tabs, tabSizes, tabContentSize[0]);
+
+  // ========================== Unit =========================
+  var containerExcludeExtraSizeValue = getUnitValue(containerExcludeExtraSize, tabPositionTopOrBottom);
+  var tabContentSizeValue = getUnitValue(tabContentSize, tabPositionTopOrBottom);
+  var addSizeValue = getUnitValue(addSize, tabPositionTopOrBottom);
+  var operationSizeValue = getUnitValue(operationSize, tabPositionTopOrBottom);
+  var needScroll = Math.floor(containerExcludeExtraSizeValue) < Math.floor(tabContentSizeValue + addSizeValue);
+  var visibleTabContentValue = needScroll ? containerExcludeExtraSizeValue - operationSizeValue : containerExcludeExtraSizeValue - addSizeValue;
+
+  // ========================== Util =========================
+  var operationsHiddenClassName = "".concat(prefixCls, "-nav-operations-hidden");
+  var transformMin = 0;
+  var transformMax = 0;
+  if (!tabPositionTopOrBottom) {
+    transformMin = Math.min(0, visibleTabContentValue - tabContentSizeValue);
+    transformMax = 0;
+  } else if (rtl) {
+    transformMin = 0;
+    transformMax = Math.max(0, tabContentSizeValue - visibleTabContentValue);
+  } else {
+    transformMin = Math.min(0, visibleTabContentValue - tabContentSizeValue);
+    transformMax = 0;
+  }
+  function alignInRange(value) {
+    if (value < transformMin) {
+      return transformMin;
+    }
+    if (value > transformMax) {
+      return transformMax;
+    }
+    return value;
+  }
+
+  // ========================= Mobile ========================
+  var touchMovingRef = useRef(null);
+  var _useState9 = useState(),
+    _useState10 = _slicedToArray(_useState9, 2),
+    lockAnimation = _useState10[0],
+    setLockAnimation = _useState10[1];
+  function doLockAnimation() {
+    setLockAnimation(Date.now());
+  }
+  function clearTouchMoving() {
+    if (touchMovingRef.current) {
+      clearTimeout(touchMovingRef.current);
+    }
+  }
+  useTouchMove(tabsWrapperRef, function (offsetX, offsetY) {
+    function doMove(setState, offset) {
+      setState(function (value) {
+        var newValue = alignInRange(value + offset);
+        return newValue;
+      });
+    }
+
+    // Skip scroll if place is enough
+    if (!needScroll) {
+      return false;
+    }
+    if (tabPositionTopOrBottom) {
+      doMove(setTransformLeft, offsetX);
+    } else {
+      doMove(setTransformTop, offsetY);
+    }
+    clearTouchMoving();
+    doLockAnimation();
+    return true;
+  });
+  useEffect(function () {
+    clearTouchMoving();
+    if (lockAnimation) {
+      touchMovingRef.current = setTimeout(function () {
+        setLockAnimation(0);
+      }, 100);
+    }
+    return clearTouchMoving;
+  }, [lockAnimation]);
+
+  // ===================== Visible Range =====================
+  // Render tab node & collect tab offset
+  var _useVisibleRange = useVisibleRange(tabOffsets,
+    // Container
+    visibleTabContentValue,
+    // Transform
+    tabPositionTopOrBottom ? transformLeft : transformTop,
+    // Tabs
+    tabContentSizeValue,
+    // Add
+    addSizeValue,
+    // Operation
+    operationSizeValue, _objectSpread(_objectSpread({}, props), {}, {
+      tabs: tabs
+    })),
+    _useVisibleRange2 = _slicedToArray(_useVisibleRange, 2),
+    visibleStart = _useVisibleRange2[0],
+    visibleEnd = _useVisibleRange2[1];
+
+  // ========================= Scroll ========================
+  var scrollToTab = useEvent(function () {
+    var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : activeKey;
+    var tabOffset = tabOffsets.get(key) || {
+      width: 0,
+      height: 0,
+      left: 0,
+      right: 0,
+      top: 0
+    };
+    if (tabPositionTopOrBottom) {
+      // ============ Align with top & bottom ============
+      var newTransform = transformLeft;
+
+      // RTL
+      if (rtl) {
+        if (tabOffset.right < transformLeft) {
+          newTransform = tabOffset.right;
+        } else if (tabOffset.right + tabOffset.width > transformLeft + visibleTabContentValue) {
+          newTransform = tabOffset.right + tabOffset.width - visibleTabContentValue;
+        }
+      }
+      // LTR
+      else if (tabOffset.left < -transformLeft) {
+        newTransform = -tabOffset.left;
+      } else if (tabOffset.left + tabOffset.width > -transformLeft + visibleTabContentValue) {
+        newTransform = -(tabOffset.left + tabOffset.width - visibleTabContentValue);
+      }
+      setTransformTop(0);
+      setTransformLeft(alignInRange(newTransform));
+    } else {
+      // ============ Align with left & right ============
+      var _newTransform = transformTop;
+      if (tabOffset.top < -transformTop) {
+        _newTransform = -tabOffset.top;
+      } else if (tabOffset.top + tabOffset.height > -transformTop + visibleTabContentValue) {
+        _newTransform = -(tabOffset.top + tabOffset.height - visibleTabContentValue);
+      }
+      setTransformLeft(0);
+      setTransformTop(alignInRange(_newTransform));
+    }
+  });
+
+  // ========================= Focus =========================
+  var _useState11 = useState(),
+    _useState12 = _slicedToArray(_useState11, 2),
+    focusKey = _useState12[0],
+    setFocusKey = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    isMouse = _useState14[0],
+    setIsMouse = _useState14[1];
+  var enabledTabs = tabs.filter(function (tab) {
+    return !tab.disabled;
+  }).map(function (tab) {
+    return tab.key;
+  });
+  var onOffset = function onOffset(offset) {
+    var currentIndex = enabledTabs.indexOf(focusKey || activeKey);
+    var len = enabledTabs.length;
+    var nextIndex = (currentIndex + offset + len) % len;
+    var newKey = enabledTabs[nextIndex];
+    setFocusKey(newKey);
+  };
+  var handleRemoveTab = function handleRemoveTab(removalTabKey, e) {
+    var removeIndex = enabledTabs.indexOf(removalTabKey);
+    var removeTab = tabs.find(function (tab) {
+      return tab.key === removalTabKey;
+    });
+    var removable = getRemovable(removeTab === null || removeTab === void 0 ? void 0 : removeTab.closable, removeTab === null || removeTab === void 0 ? void 0 : removeTab.closeIcon, editable, removeTab === null || removeTab === void 0 ? void 0 : removeTab.disabled);
+    if (removable) {
+      e.preventDefault();
+      e.stopPropagation();
+      editable.onEdit('remove', {
+        key: removalTabKey,
+        event: e
+      });
+
+      // when remove last tab, focus previous tab
+      if (removeIndex === enabledTabs.length - 1) {
+        onOffset(-1);
+      } else {
+        onOffset(1);
+      }
+    }
+  };
+  var handleMouseDown = function handleMouseDown(key, e) {
+    setIsMouse(true);
+    // Middle mouse button
+    if (e.button === 1) {
+      handleRemoveTab(key, e);
+    }
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    var code = e.code;
+    var isRTL = rtl && tabPositionTopOrBottom;
+    var firstEnabledTab = enabledTabs[0];
+    var lastEnabledTab = enabledTabs[enabledTabs.length - 1];
+    switch (code) {
+      // LEFT
+      case 'ArrowLeft':
+        {
+          if (tabPositionTopOrBottom) {
+            onOffset(isRTL ? 1 : -1);
+          }
+          break;
+        }
+
+      // RIGHT
+      case 'ArrowRight':
+        {
+          if (tabPositionTopOrBottom) {
+            onOffset(isRTL ? -1 : 1);
+          }
+          break;
+        }
+
+      // UP
+      case 'ArrowUp':
+        {
+          e.preventDefault();
+          if (!tabPositionTopOrBottom) {
+            onOffset(-1);
+          }
+          break;
+        }
+
+      // DOWN
+      case 'ArrowDown':
+        {
+          e.preventDefault();
+          if (!tabPositionTopOrBottom) {
+            onOffset(1);
+          }
+          break;
+        }
+
+      // HOME
+      case 'Home':
+        {
+          e.preventDefault();
+          setFocusKey(firstEnabledTab);
+          break;
+        }
+
+      // END
+      case 'End':
+        {
+          e.preventDefault();
+          setFocusKey(lastEnabledTab);
+          break;
+        }
+
+      // Enter & Space
+      case 'Enter':
+      case 'Space':
+        {
+          e.preventDefault();
+          onTabClick(focusKey !== null && focusKey !== void 0 ? focusKey : activeKey, e);
+          break;
+        }
+      // Backspace
+      case 'Backspace':
+      case 'Delete':
+        {
+          handleRemoveTab(focusKey, e);
+          break;
+        }
+    }
+  };
+
+  // ========================== Tab ==========================
+  var tabNodeStyle = {};
+  if (tabPositionTopOrBottom) {
+    tabNodeStyle[rtl ? 'marginRight' : 'marginLeft'] = tabBarGutter;
+  } else {
+    tabNodeStyle.marginTop = tabBarGutter;
+  }
+  var tabNodes = tabs.map(function (tab, i) {
+    var key = tab.key;
+    return /*#__PURE__*/React.createElement(TabNode, {
+      id: id,
+      prefixCls: prefixCls,
+      key: key,
+      tab: tab
+      /* first node should not have margin left */,
+      style: i === 0 ? undefined : tabNodeStyle,
+      closable: tab.closable,
+      editable: editable,
+      active: key === activeKey,
+      focus: key === focusKey,
+      renderWrapper: children,
+      removeAriaLabel: locale === null || locale === void 0 ? void 0 : locale.removeAriaLabel,
+      tabCount: enabledTabs.length,
+      currentPosition: i + 1,
+      onClick: function onClick(e) {
+        onTabClick(key, e);
+      },
+      onKeyDown: handleKeyDown,
+      onFocus: function onFocus() {
+        if (!isMouse) {
+          setFocusKey(key);
+        }
+        scrollToTab(key);
+        doLockAnimation();
+        if (!tabsWrapperRef.current) {
+          return;
+        }
+        // Focus element will make scrollLeft change which we should reset back
+        if (!rtl) {
+          tabsWrapperRef.current.scrollLeft = 0;
+        }
+        tabsWrapperRef.current.scrollTop = 0;
+      },
+      onBlur: function onBlur() {
+        setFocusKey(undefined);
+      },
+      onMouseDown: function onMouseDown(e) {
+        return handleMouseDown(key, e);
+      },
+      onMouseUp: function onMouseUp() {
+        setIsMouse(false);
+      }
+    });
+  });
+
+  // Update buttons records
+  var updateTabSizes = function updateTabSizes() {
+    return setTabSizes(function () {
+      var _tabListRef$current;
+      var newSizes = new Map();
+      var listRect = (_tabListRef$current = tabListRef.current) === null || _tabListRef$current === void 0 ? void 0 : _tabListRef$current.getBoundingClientRect();
+      tabs.forEach(function (_ref2) {
+        var _tabListRef$current2;
+        var key = _ref2.key;
+        var btnNode = (_tabListRef$current2 = tabListRef.current) === null || _tabListRef$current2 === void 0 ? void 0 : _tabListRef$current2.querySelector("[data-node-key=\"".concat(genDataNodeKey(key), "\"]"));
+        if (btnNode) {
+          var _getTabSize = getTabSize(btnNode, listRect),
+            _getTabSize2 = _slicedToArray(_getTabSize, 4),
+            width = _getTabSize2[0],
+            height = _getTabSize2[1],
+            left = _getTabSize2[2],
+            top = _getTabSize2[3];
+          newSizes.set(key, {
+            width: width,
+            height: height,
+            left: left,
+            top: top
+          });
+        }
+      });
+      return newSizes;
+    });
+  };
+  useEffect(function () {
+    updateTabSizes();
+  }, [tabs.map(function (tab) {
+    return tab.key;
+  }).join('_')]);
+  var onListHolderResize = useUpdate(function () {
+    // Update wrapper records
+    var containerSize = getSize(containerRef);
+    var extraLeftSize = getSize(extraLeftRef);
+    var extraRightSize = getSize(extraRightRef);
+    setContainerExcludeExtraSize([containerSize[0] - extraLeftSize[0] - extraRightSize[0], containerSize[1] - extraLeftSize[1] - extraRightSize[1]]);
+    var newAddSize = getSize(innerAddButtonRef);
+    setAddSize(newAddSize);
+    var newOperationSize = getSize(operationsRef);
+    setOperationSize(newOperationSize);
+
+    // Which includes add button size
+    var tabContentFullSize = getSize(tabListRef);
+    setTabContentSize([tabContentFullSize[0] - newAddSize[0], tabContentFullSize[1] - newAddSize[1]]);
+
+    // Update buttons records
+    updateTabSizes();
+  });
+
+  // ======================== Dropdown =======================
+  var startHiddenTabs = tabs.slice(0, visibleStart);
+  var endHiddenTabs = tabs.slice(visibleEnd + 1);
+  var hiddenTabs = [].concat(_toConsumableArray(startHiddenTabs), _toConsumableArray(endHiddenTabs));
+
+  // =================== Link & Operations ===================
+  var activeTabOffset = tabOffsets.get(activeKey);
+  var _useIndicator = useIndicator({
+      activeTabOffset: activeTabOffset,
+      horizontal: tabPositionTopOrBottom,
+      indicator: indicator,
+      rtl: rtl
+    }),
+    indicatorStyle = _useIndicator.style;
+
+  // ========================= Effect ========================
+  useEffect(function () {
+    scrollToTab();
+  }, [activeKey, transformMin, transformMax, stringify(activeTabOffset), stringify(tabOffsets), tabPositionTopOrBottom]);
+
+  // Should recalculate when rtl changed
+  useEffect(function () {
+    onListHolderResize();
+    // eslint-disable-next-line
+  }, [rtl]);
+
+  // ========================= Render ========================
+  var hasDropdown = !!hiddenTabs.length;
+  var wrapPrefix = "".concat(prefixCls, "-nav-wrap");
+  var pingLeft;
+  var pingRight;
+  var pingTop;
+  var pingBottom;
+  if (tabPositionTopOrBottom) {
+    if (rtl) {
+      pingRight = transformLeft > 0;
+      pingLeft = transformLeft !== transformMax;
+    } else {
+      pingLeft = transformLeft < 0;
+      pingRight = transformLeft !== transformMin;
+    }
+  } else {
+    pingTop = transformTop < 0;
+    pingBottom = transformTop !== transformMin;
+  }
+  return /*#__PURE__*/React.createElement(ResizeObserver, {
+    onResize: onListHolderResize
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: useComposeRef(ref, containerRef),
+    role: "tablist",
+    "aria-orientation": tabPositionTopOrBottom ? 'horizontal' : 'vertical',
+    className: classNames("".concat(prefixCls, "-nav"), className),
+    style: style,
+    onKeyDown: function onKeyDown() {
+      // No need animation when use keyboard
+      doLockAnimation();
+    }
+  }, /*#__PURE__*/React.createElement(ExtraContent, {
+    ref: extraLeftRef,
+    position: "left",
+    extra: extra,
+    prefixCls: prefixCls
+  }), /*#__PURE__*/React.createElement(ResizeObserver, {
+    onResize: onListHolderResize
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(wrapPrefix, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(wrapPrefix, "-ping-left"), pingLeft), "".concat(wrapPrefix, "-ping-right"), pingRight), "".concat(wrapPrefix, "-ping-top"), pingTop), "".concat(wrapPrefix, "-ping-bottom"), pingBottom)),
+    ref: tabsWrapperRef
+  }, /*#__PURE__*/React.createElement(ResizeObserver, {
+    onResize: onListHolderResize
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: tabListRef,
+    className: "".concat(prefixCls, "-nav-list"),
+    style: {
+      transform: "translate(".concat(transformLeft, "px, ").concat(transformTop, "px)"),
+      transition: lockAnimation ? 'none' : undefined
+    }
+  }, tabNodes, /*#__PURE__*/React.createElement(AddButton, {
+    ref: innerAddButtonRef,
+    prefixCls: prefixCls,
+    locale: locale,
+    editable: editable,
+    style: _objectSpread(_objectSpread({}, tabNodes.length === 0 ? undefined : tabNodeStyle), {}, {
+      visibility: hasDropdown ? 'hidden' : null
+    })
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefixCls, "-ink-bar"), _defineProperty({}, "".concat(prefixCls, "-ink-bar-animated"), animated.inkBar)),
+    style: indicatorStyle
+  }))))), /*#__PURE__*/React.createElement(OperationNode, _extends({}, props, {
+    removeAriaLabel: locale === null || locale === void 0 ? void 0 : locale.removeAriaLabel,
+    ref: operationsRef,
+    prefixCls: prefixCls,
+    tabs: hiddenTabs,
+    className: !hasDropdown && operationsHiddenClassName,
+    tabMoving: !!lockAnimation
+  })), /*#__PURE__*/React.createElement(ExtraContent, {
+    ref: extraRightRef,
+    position: "right",
+    extra: extra,
+    prefixCls: prefixCls
+  })));
+  /* eslint-enable */
+});
+export default TabNavList;
--- a/frontend/node_modules/rc-tabs/es/TabPanelList/TabPane.d.ts
+++ b/frontend/node_modules/rc-tabs/es/TabPanelList/TabPane.d.ts
@@ -0,0 +1,20 @@
+import * as React from 'react';
+export interface TabPaneProps {
+    tab?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+    children?: React.ReactNode;
+    forceRender?: boolean;
+    closable?: boolean;
+    closeIcon?: React.ReactNode;
+    icon?: React.ReactNode;
+    prefixCls?: string;
+    tabKey?: string;
+    id?: string;
+    animated?: boolean;
+    active?: boolean;
+    destroyInactiveTabPane?: boolean;
+}
+declare const TabPane: React.ForwardRefExoticComponent<TabPaneProps & React.RefAttributes<HTMLDivElement>>;
+export default TabPane;
--- a/frontend/node_modules/rc-tabs/es/TabPanelList/TabPane.js
+++ b/frontend/node_modules/rc-tabs/es/TabPanelList/TabPane.js
@@ -0,0 +1,25 @@
+import classNames from 'classnames';
+import * as React from 'react';
+var TabPane = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var prefixCls = props.prefixCls,
+    className = props.className,
+    style = props.style,
+    id = props.id,
+    active = props.active,
+    tabKey = props.tabKey,
+    children = props.children;
+  return /*#__PURE__*/React.createElement("div", {
+    id: id && "".concat(id, "-panel-").concat(tabKey),
+    role: "tabpanel",
+    tabIndex: active ? 0 : -1,
+    "aria-labelledby": id && "".concat(id, "-tab-").concat(tabKey),
+    "aria-hidden": !active,
+    style: style,
+    className: classNames(prefixCls, active && "".concat(prefixCls, "-active"), className),
+    ref: ref
+  }, children);
+});
+if (process.env.NODE_ENV !== 'production') {
+  TabPane.displayName = 'TabPane';
+}
+export default TabPane;
--- a/frontend/node_modules/rc-tabs/es/TabPanelList/index.d.ts
+++ b/frontend/node_modules/rc-tabs/es/TabPanelList/index.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { AnimatedConfig, TabPosition } from '../interface';
+export interface TabPanelListProps {
+    activeKey: string;
+    id: string;
+    animated?: AnimatedConfig;
+    tabPosition?: TabPosition;
+    destroyInactiveTabPane?: boolean;
+}
+declare const TabPanelList: React.FC<TabPanelListProps>;
+export default TabPanelList;
--- a/frontend/node_modules/rc-tabs/es/TabPanelList/index.js
+++ b/frontend/node_modules/rc-tabs/es/TabPanelList/index.js
@@ -0,0 +1,56 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _excluded = ["key", "forceRender", "style", "className", "destroyInactiveTabPane"];
+import classNames from 'classnames';
+import CSSMotion from 'rc-motion';
+import * as React from 'react';
+import TabContext from "../TabContext";
+import TabPane from "./TabPane";
+var TabPanelList = function TabPanelList(props) {
+  var id = props.id,
+    activeKey = props.activeKey,
+    animated = props.animated,
+    tabPosition = props.tabPosition,
+    destroyInactiveTabPane = props.destroyInactiveTabPane;
+  var _React$useContext = React.useContext(TabContext),
+    prefixCls = _React$useContext.prefixCls,
+    tabs = _React$useContext.tabs;
+  var tabPaneAnimated = animated.tabPane;
+  var tabPanePrefixCls = "".concat(prefixCls, "-tabpane");
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefixCls, "-content-holder"))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefixCls, "-content"), "".concat(prefixCls, "-content-").concat(tabPosition), _defineProperty({}, "".concat(prefixCls, "-content-animated"), tabPaneAnimated))
+  }, tabs.map(function (item) {
+    var key = item.key,
+      forceRender = item.forceRender,
+      paneStyle = item.style,
+      paneClassName = item.className,
+      itemDestroyInactiveTabPane = item.destroyInactiveTabPane,
+      restTabProps = _objectWithoutProperties(item, _excluded);
+    var active = key === activeKey;
+    return /*#__PURE__*/React.createElement(CSSMotion, _extends({
+      key: key,
+      visible: active,
+      forceRender: forceRender,
+      removeOnLeave: !!(destroyInactiveTabPane || itemDestroyInactiveTabPane),
+      leavedClassName: "".concat(tabPanePrefixCls, "-hidden")
+    }, animated.tabPaneMotion), function (_ref, ref) {
+      var motionStyle = _ref.style,
+        motionClassName = _ref.className;
+      return /*#__PURE__*/React.createElement(TabPane, _extends({}, restTabProps, {
+        prefixCls: tabPanePrefixCls,
+        id: id,
+        tabKey: key,
+        animated: tabPaneAnimated,
+        active: active,
+        style: _objectSpread(_objectSpread({}, paneStyle), motionStyle),
+        className: classNames(paneClassName, motionClassName),
+        ref: ref
+      }));
+    });
+  })));
+};
+export default TabPanelList;
--- a/frontend/node_modules/rc-tabs/es/Tabs.d.ts
+++ b/frontend/node_modules/rc-tabs/es/Tabs.d.ts
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import type { GetIndicatorSize } from './hooks/useIndicator';
+import type { AnimatedConfig, EditableConfig, MoreProps, OnTabScroll, RenderTabBar, Tab, TabBarExtraContent, TabPosition, TabsLocale } from './interface';
+export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
+    prefixCls?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    id?: string;
+    items?: Tab[];
+    activeKey?: string;
+    defaultActiveKey?: string;
+    direction?: 'ltr' | 'rtl';
+    animated?: boolean | AnimatedConfig;
+    renderTabBar?: RenderTabBar;
+    tabBarExtraContent?: TabBarExtraContent;
+    tabBarGutter?: number;
+    tabBarStyle?: React.CSSProperties;
+    tabPosition?: TabPosition;
+    destroyInactiveTabPane?: boolean;
+    onChange?: (activeKey: string) => void;
+    onTabClick?: (activeKey: string, e: React.KeyboardEvent | React.MouseEvent) => void;
+    onTabScroll?: OnTabScroll;
+    editable?: EditableConfig;
+    getPopupContainer?: (node: HTMLElement) => HTMLElement;
+    locale?: TabsLocale;
+    more?: MoreProps;
+    /** @private Internal usage. Not promise will rename in future */
+    popupClassName?: string;
+    indicator?: {
+        size?: GetIndicatorSize;
+        align?: 'start' | 'center' | 'end';
+    };
+}
+declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+export default Tabs;
--- a/frontend/node_modules/rc-tabs/es/Tabs.js
+++ b/frontend/node_modules/rc-tabs/es/Tabs.js
@@ -0,0 +1,179 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["id", "prefixCls", "className", "items", "direction", "activeKey", "defaultActiveKey", "editable", "animated", "tabPosition", "tabBarGutter", "tabBarStyle", "tabBarExtraContent", "locale", "more", "destroyInactiveTabPane", "renderTabBar", "onChange", "onTabClick", "onTabScroll", "getPopupContainer", "popupClassName", "indicator"];
+// Accessibility https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role
+import classNames from 'classnames';
+import useMergedState from "rc-util/es/hooks/useMergedState";
+import isMobile from "rc-util/es/isMobile";
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import TabContext from "./TabContext";
+import TabNavListWrapper from "./TabNavList/Wrapper";
+import TabPanelList from "./TabPanelList";
+import useAnimateConfig from "./hooks/useAnimateConfig";
+/**
+ * Should added antd:
+ * - type
+ *
+ * Removed:
+ * - onNextClick
+ * - onPrevClick
+ * - keyboard
+ */
+
+// Used for accessibility
+var uuid = 0;
+var Tabs = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var id = props.id,
+    _props$prefixCls = props.prefixCls,
+    prefixCls = _props$prefixCls === void 0 ? 'rc-tabs' : _props$prefixCls,
+    className = props.className,
+    items = props.items,
+    direction = props.direction,
+    activeKey = props.activeKey,
+    defaultActiveKey = props.defaultActiveKey,
+    editable = props.editable,
+    animated = props.animated,
+    _props$tabPosition = props.tabPosition,
+    tabPosition = _props$tabPosition === void 0 ? 'top' : _props$tabPosition,
+    tabBarGutter = props.tabBarGutter,
+    tabBarStyle = props.tabBarStyle,
+    tabBarExtraContent = props.tabBarExtraContent,
+    locale = props.locale,
+    more = props.more,
+    destroyInactiveTabPane = props.destroyInactiveTabPane,
+    renderTabBar = props.renderTabBar,
+    onChange = props.onChange,
+    onTabClick = props.onTabClick,
+    onTabScroll = props.onTabScroll,
+    getPopupContainer = props.getPopupContainer,
+    popupClassName = props.popupClassName,
+    indicator = props.indicator,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var tabs = React.useMemo(function () {
+    return (items || []).filter(function (item) {
+      return item && _typeof(item) === 'object' && 'key' in item;
+    });
+  }, [items]);
+  var rtl = direction === 'rtl';
+  var mergedAnimated = useAnimateConfig(animated);
+
+  // ======================== Mobile ========================
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    mobile = _useState2[0],
+    setMobile = _useState2[1];
+  useEffect(function () {
+    // Only update on the client side
+    setMobile(isMobile());
+  }, []);
+
+  // ====================== Active Key ======================
+  var _useMergedState = useMergedState(function () {
+      var _tabs$;
+      return (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.key;
+    }, {
+      value: activeKey,
+      defaultValue: defaultActiveKey
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    mergedActiveKey = _useMergedState2[0],
+    setMergedActiveKey = _useMergedState2[1];
+  var _useState3 = useState(function () {
+      return tabs.findIndex(function (tab) {
+        return tab.key === mergedActiveKey;
+      });
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeIndex = _useState4[0],
+    setActiveIndex = _useState4[1];
+
+  // Reset active key if not exist anymore
+  useEffect(function () {
+    var newActiveIndex = tabs.findIndex(function (tab) {
+      return tab.key === mergedActiveKey;
+    });
+    if (newActiveIndex === -1) {
+      var _tabs$newActiveIndex;
+      newActiveIndex = Math.max(0, Math.min(activeIndex, tabs.length - 1));
+      setMergedActiveKey((_tabs$newActiveIndex = tabs[newActiveIndex]) === null || _tabs$newActiveIndex === void 0 ? void 0 : _tabs$newActiveIndex.key);
+    }
+    setActiveIndex(newActiveIndex);
+  }, [tabs.map(function (tab) {
+    return tab.key;
+  }).join('_'), mergedActiveKey, activeIndex]);
+
+  // ===================== Accessibility ====================
+  var _useMergedState3 = useMergedState(null, {
+      value: id
+    }),
+    _useMergedState4 = _slicedToArray(_useMergedState3, 2),
+    mergedId = _useMergedState4[0],
+    setMergedId = _useMergedState4[1];
+
+  // Async generate id to avoid ssr mapping failed
+  useEffect(function () {
+    if (!id) {
+      setMergedId("rc-tabs-".concat(process.env.NODE_ENV === 'test' ? 'test' : uuid));
+      uuid += 1;
+    }
+  }, []);
+
+  // ======================== Events ========================
+  function onInternalTabClick(key, e) {
+    onTabClick === null || onTabClick === void 0 || onTabClick(key, e);
+    var isActiveChanged = key !== mergedActiveKey;
+    setMergedActiveKey(key);
+    if (isActiveChanged) {
+      onChange === null || onChange === void 0 || onChange(key);
+    }
+  }
+
+  // ======================== Render ========================
+  var sharedProps = {
+    id: mergedId,
+    activeKey: mergedActiveKey,
+    animated: mergedAnimated,
+    tabPosition: tabPosition,
+    rtl: rtl,
+    mobile: mobile
+  };
+  var tabNavBarProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
+    editable: editable,
+    locale: locale,
+    more: more,
+    tabBarGutter: tabBarGutter,
+    onTabClick: onInternalTabClick,
+    onTabScroll: onTabScroll,
+    extra: tabBarExtraContent,
+    style: tabBarStyle,
+    panes: null,
+    getPopupContainer: getPopupContainer,
+    popupClassName: popupClassName,
+    indicator: indicator
+  });
+  return /*#__PURE__*/React.createElement(TabContext.Provider, {
+    value: {
+      tabs: tabs,
+      prefixCls: prefixCls
+    }
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    id: id,
+    className: classNames(prefixCls, "".concat(prefixCls, "-").concat(tabPosition), _defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-mobile"), mobile), "".concat(prefixCls, "-editable"), editable), "".concat(prefixCls, "-rtl"), rtl), className)
+  }, restProps), /*#__PURE__*/React.createElement(TabNavListWrapper, _extends({}, tabNavBarProps, {
+    renderTabBar: renderTabBar
+  })), /*#__PURE__*/React.createElement(TabPanelList, _extends({
+    destroyInactiveTabPane: destroyInactiveTabPane
+  }, sharedProps, {
+    animated: mergedAnimated
+  }))));
+});
+if (process.env.NODE_ENV !== 'production') {
+  Tabs.displayName = 'Tabs';
+}
+export default Tabs;
--- a/frontend/node_modules/rc-tabs/es/hooks/useAnimateConfig.d.ts
+++ b/frontend/node_modules/rc-tabs/es/hooks/useAnimateConfig.d.ts
@@ -0,0 +1,3 @@
+import type { TabsProps } from '..';
+import type { AnimatedConfig } from '../interface';
+export default function useAnimateConfig(animated?: TabsProps['animated']): AnimatedConfig;
--- a/frontend/node_modules/rc-tabs/es/hooks/useAnimateConfig.js
+++ b/frontend/node_modules/rc-tabs/es/hooks/useAnimateConfig.js
@@ -0,0 +1,37 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import warning from "rc-util/es/warning";
+export default function useAnimateConfig() {
+  var animated = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+    inkBar: true,
+    tabPane: false
+  };
+  var mergedAnimated;
+  if (animated === false) {
+    mergedAnimated = {
+      inkBar: false,
+      tabPane: false
+    };
+  } else if (animated === true) {
+    mergedAnimated = {
+      inkBar: true,
+      tabPane: false
+    };
+  } else {
+    mergedAnimated = _objectSpread({
+      inkBar: true
+    }, _typeof(animated) === 'object' ? animated : {});
+  }
+
+  // Enable tabPane animation if provide motion
+  if (mergedAnimated.tabPaneMotion && mergedAnimated.tabPane === undefined) {
+    mergedAnimated.tabPane = true;
+  }
+  if (!mergedAnimated.tabPaneMotion && mergedAnimated.tabPane) {
+    if (process.env.NODE_ENV !== 'production') {
+      warning(false, '`animated.tabPane` is true but `animated.tabPaneMotion` is not provided. Motion will not work.');
+    }
+    mergedAnimated.tabPane = false;
+  }
+  return mergedAnimated;
+}
--- a/frontend/node_modules/rc-tabs/es/hooks/useIndicator.d.ts
+++ b/frontend/node_modules/rc-tabs/es/hooks/useIndicator.d.ts
@@ -0,0 +1,16 @@
+import React from 'react';
+import type { TabOffset } from '../interface';
+export type GetIndicatorSize = number | ((origin: number) => number);
+interface UseIndicatorOptions {
+    activeTabOffset: TabOffset;
+    horizontal: boolean;
+    rtl: boolean;
+    indicator?: {
+        size?: GetIndicatorSize;
+        align?: 'start' | 'center' | 'end';
+    };
+}
+declare const useIndicator: (options: UseIndicatorOptions) => {
+    style: React.CSSProperties;
+};
+export default useIndicator;
--- a/frontend/node_modules/rc-tabs/es/hooks/useIndicator.js
+++ b/frontend/node_modules/rc-tabs/es/hooks/useIndicator.js
@@ -0,0 +1,83 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import raf from "rc-util/es/raf";
+import React, { useEffect, useRef, useState } from 'react';
+var useIndicator = function useIndicator(options) {
+  var activeTabOffset = options.activeTabOffset,
+    horizontal = options.horizontal,
+    rtl = options.rtl,
+    _options$indicator = options.indicator,
+    indicator = _options$indicator === void 0 ? {} : _options$indicator;
+  var size = indicator.size,
+    _indicator$align = indicator.align,
+    align = _indicator$align === void 0 ? 'center' : _indicator$align;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    inkStyle = _useState2[0],
+    setInkStyle = _useState2[1];
+  var inkBarRafRef = useRef();
+  var getLength = React.useCallback(function (origin) {
+    if (typeof size === 'function') {
+      return size(origin);
+    }
+    if (typeof size === 'number') {
+      return size;
+    }
+    return origin;
+  }, [size]);
+
+  // Delay set ink style to avoid remove tab blink
+  function cleanInkBarRaf() {
+    raf.cancel(inkBarRafRef.current);
+  }
+  useEffect(function () {
+    var newInkStyle = {};
+    if (activeTabOffset) {
+      if (horizontal) {
+        newInkStyle.width = getLength(activeTabOffset.width);
+        var key = rtl ? 'right' : 'left';
+        if (align === 'start') {
+          newInkStyle[key] = activeTabOffset[key];
+        }
+        if (align === 'center') {
+          newInkStyle[key] = activeTabOffset[key] + activeTabOffset.width / 2;
+          newInkStyle.transform = rtl ? 'translateX(50%)' : 'translateX(-50%)';
+        }
+        if (align === 'end') {
+          newInkStyle[key] = activeTabOffset[key] + activeTabOffset.width;
+          newInkStyle.transform = 'translateX(-100%)';
+        }
+      } else {
+        newInkStyle.height = getLength(activeTabOffset.height);
+        if (align === 'start') {
+          newInkStyle.top = activeTabOffset.top;
+        }
+        if (align === 'center') {
+          newInkStyle.top = activeTabOffset.top + activeTabOffset.height / 2;
+          newInkStyle.transform = 'translateY(-50%)';
+        }
+        if (align === 'end') {
+          newInkStyle.top = activeTabOffset.top + activeTabOffset.height;
+          newInkStyle.transform = 'translateY(-100%)';
+        }
+      }
+    }
+    cleanInkBarRaf();
+    inkBarRafRef.current = raf(function () {
+      // Avoid jitter caused by tiny numerical differences
+      // fix https://github.com/ant-design/ant-design/issues/53378
+      var isEqual = inkStyle && newInkStyle && Object.keys(newInkStyle).every(function (key) {
+        var newValue = newInkStyle[key];
+        var oldValue = inkStyle[key];
+        return typeof newValue === 'number' && typeof oldValue === 'number' ? Math.round(newValue) === Math.round(oldValue) : newValue === oldValue;
+      });
+      if (!isEqual) {
+        setInkStyle(newInkStyle);
+      }
+    });
+    return cleanInkBarRaf;
+  }, [JSON.stringify(activeTabOffset), horizontal, rtl, align, getLength]);
+  return {
+    style: inkStyle
+  };
+};
+export default useIndicator;
--- a/frontend/node_modules/rc-tabs/es/hooks/useOffsets.d.ts
+++ b/frontend/node_modules/rc-tabs/es/hooks/useOffsets.d.ts
@@ -0,0 +1,2 @@
+import type { Tab, TabOffsetMap, TabSizeMap } from '../interface';
+export default function useOffsets(tabs: Tab[], tabSizes: TabSizeMap, holderScrollWidth: number): TabOffsetMap;
--- a/frontend/node_modules/rc-tabs/es/hooks/useOffsets.js
+++ b/frontend/node_modules/rc-tabs/es/hooks/useOffsets.js
@@ -0,0 +1,36 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { useMemo } from 'react';
+var DEFAULT_SIZE = {
+  width: 0,
+  height: 0,
+  left: 0,
+  top: 0
+};
+export default function useOffsets(tabs, tabSizes, holderScrollWidth) {
+  return useMemo(function () {
+    var _tabs$;
+    var map = new Map();
+    var lastOffset = tabSizes.get((_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.key) || DEFAULT_SIZE;
+    var rightOffset = lastOffset.left + lastOffset.width;
+    for (var i = 0; i < tabs.length; i += 1) {
+      var key = tabs[i].key;
+      var data = tabSizes.get(key);
+
+      // Reuse last one when not exist yet
+      if (!data) {
+        var _tabs;
+        data = tabSizes.get((_tabs = tabs[i - 1]) === null || _tabs === void 0 ? void 0 : _tabs.key) || DEFAULT_SIZE;
+      }
+      var entity = map.get(key) || _objectSpread({}, data);
+
+      // Right
+      entity.right = rightOffset - entity.left - entity.width;
+
+      // Update entity
+      map.set(key, entity);
+    }
+    return map;
+  }, [tabs.map(function (tab) {
+    return tab.key;
+  }).join('_'), tabSizes, holderScrollWidth]);
+}
--- a/frontend/node_modules/rc-tabs/es/hooks/useSyncState.d.ts
+++ b/frontend/node_modules/rc-tabs/es/hooks/useSyncState.d.ts
@@ -0,0 +1,3 @@
+type Updater<T> = (prev: T) => T;
+export default function useSyncState<T>(defaultState: T, onChange: (newValue: T, prevValue: T) => void): [T, (updater: T | Updater<T>) => void];
+export {};
--- a/frontend/node_modules/rc-tabs/es/hooks/useSyncState.js
+++ b/frontend/node_modules/rc-tabs/es/hooks/useSyncState.js
@@ -0,0 +1,17 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+export default function useSyncState(defaultState, onChange) {
+  var stateRef = React.useRef(defaultState);
+  var _React$useState = React.useState({}),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    forceUpdate = _React$useState2[1];
+  function setState(updater) {
+    var newValue = typeof updater === 'function' ? updater(stateRef.current) : updater;
+    if (newValue !== stateRef.current) {
+      onChange(newValue, stateRef.current);
+    }
+    stateRef.current = newValue;
+    forceUpdate({});
+  }
+  return [stateRef.current, setState];
+}
--- a/frontend/node_modules/rc-tabs/es/hooks/useTouchMove.d.ts
+++ b/frontend/node_modules/rc-tabs/es/hooks/useTouchMove.d.ts
@@ -0,0 +1,2 @@
+import * as React from 'react';
+export default function useTouchMove(ref: React.RefObject<HTMLDivElement>, onOffset: (offsetX: number, offsetY: number) => boolean): void;
--- a/frontend/node_modules/rc-tabs/es/hooks/useTouchMove.js
+++ b/frontend/node_modules/rc-tabs/es/hooks/useTouchMove.js
@@ -0,0 +1,155 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+import { useRef, useState } from 'react';
+var MIN_SWIPE_DISTANCE = 0.1;
+var STOP_SWIPE_DISTANCE = 0.01;
+var REFRESH_INTERVAL = 20;
+var SPEED_OFF_MULTIPLE = Math.pow(0.995, REFRESH_INTERVAL);
+
+// ================================= Hook =================================
+export default function useTouchMove(ref, onOffset) {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    touchPosition = _useState2[0],
+    setTouchPosition = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    lastTimestamp = _useState4[0],
+    setLastTimestamp = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    lastTimeDiff = _useState6[0],
+    setLastTimeDiff = _useState6[1];
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    lastOffset = _useState8[0],
+    setLastOffset = _useState8[1];
+  var motionRef = useRef();
+
+  // ========================= Events =========================
+  // >>> Touch events
+  function onTouchStart(e) {
+    var _e$touches$ = e.touches[0],
+      screenX = _e$touches$.screenX,
+      screenY = _e$touches$.screenY;
+    setTouchPosition({
+      x: screenX,
+      y: screenY
+    });
+    window.clearInterval(motionRef.current);
+  }
+  function onTouchMove(e) {
+    if (!touchPosition) return;
+
+    // e.preventDefault();
+    var _e$touches$2 = e.touches[0],
+      screenX = _e$touches$2.screenX,
+      screenY = _e$touches$2.screenY;
+    setTouchPosition({
+      x: screenX,
+      y: screenY
+    });
+    var offsetX = screenX - touchPosition.x;
+    var offsetY = screenY - touchPosition.y;
+    onOffset(offsetX, offsetY);
+    var now = Date.now();
+    setLastTimestamp(now);
+    setLastTimeDiff(now - lastTimestamp);
+    setLastOffset({
+      x: offsetX,
+      y: offsetY
+    });
+  }
+  function onTouchEnd() {
+    if (!touchPosition) return;
+    setTouchPosition(null);
+    setLastOffset(null);
+
+    // Swipe if needed
+    if (lastOffset) {
+      var distanceX = lastOffset.x / lastTimeDiff;
+      var distanceY = lastOffset.y / lastTimeDiff;
+      var absX = Math.abs(distanceX);
+      var absY = Math.abs(distanceY);
+
+      // Skip swipe if low distance
+      if (Math.max(absX, absY) < MIN_SWIPE_DISTANCE) return;
+      var currentX = distanceX;
+      var currentY = distanceY;
+      motionRef.current = window.setInterval(function () {
+        if (Math.abs(currentX) < STOP_SWIPE_DISTANCE && Math.abs(currentY) < STOP_SWIPE_DISTANCE) {
+          window.clearInterval(motionRef.current);
+          return;
+        }
+        currentX *= SPEED_OFF_MULTIPLE;
+        currentY *= SPEED_OFF_MULTIPLE;
+        onOffset(currentX * REFRESH_INTERVAL, currentY * REFRESH_INTERVAL);
+      }, REFRESH_INTERVAL);
+    }
+  }
+
+  // >>> Wheel event
+  var lastWheelDirectionRef = useRef();
+  function onWheel(e) {
+    var deltaX = e.deltaX,
+      deltaY = e.deltaY;
+
+    // Convert both to x & y since wheel only happened on PC
+    var mixed = 0;
+    var absX = Math.abs(deltaX);
+    var absY = Math.abs(deltaY);
+    if (absX === absY) {
+      mixed = lastWheelDirectionRef.current === 'x' ? deltaX : deltaY;
+    } else if (absX > absY) {
+      mixed = deltaX;
+      lastWheelDirectionRef.current = 'x';
+    } else {
+      mixed = deltaY;
+      lastWheelDirectionRef.current = 'y';
+    }
+    if (onOffset(-mixed, -mixed)) {
+      e.preventDefault();
+    }
+  }
+
+  // ========================= Effect =========================
+  var touchEventsRef = useRef(null);
+  touchEventsRef.current = {
+    onTouchStart: onTouchStart,
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd,
+    onWheel: onWheel
+  };
+  React.useEffect(function () {
+    function onProxyTouchStart(e) {
+      touchEventsRef.current.onTouchStart(e);
+    }
+    function onProxyTouchMove(e) {
+      touchEventsRef.current.onTouchMove(e);
+    }
+    function onProxyTouchEnd(e) {
+      touchEventsRef.current.onTouchEnd(e);
+    }
+    function onProxyWheel(e) {
+      touchEventsRef.current.onWheel(e);
+    }
+    document.addEventListener('touchmove', onProxyTouchMove, {
+      passive: false
+    });
+    document.addEventListener('touchend', onProxyTouchEnd, {
+      passive: true
+    });
+
+    // No need to clean up since element removed
+    ref.current.addEventListener('touchstart', onProxyTouchStart, {
+      passive: true
+    });
+    ref.current.addEventListener('wheel', onProxyWheel, {
+      passive: false
+    });
+    return function () {
+      document.removeEventListener('touchmove', onProxyTouchMove);
+      document.removeEventListener('touchend', onProxyTouchEnd);
+    };
+  }, []);
+}
--- a/frontend/node_modules/rc-tabs/es/hooks/useUpdate.d.ts
+++ b/frontend/node_modules/rc-tabs/es/hooks/useUpdate.d.ts
@@ -0,0 +1,8 @@
+/**
+ * Help to merge callback with `useLayoutEffect`.
+ * One time will only trigger once.
+ */
+export default function useUpdate(callback: VoidFunction): () => void;
+type Callback<T> = (ori: T) => T;
+export declare function useUpdateState<T>(defaultState: T | (() => T)): [T, (updater: Callback<T>) => void];
+export {};
--- a/frontend/node_modules/rc-tabs/es/hooks/useUpdate.js
+++ b/frontend/node_modules/rc-tabs/es/hooks/useUpdate.js
@@ -0,0 +1,53 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useLayoutUpdateEffect } from "rc-util/es/hooks/useLayoutEffect";
+import { useRef, useState } from 'react';
+
+/**
+ * Help to merge callback with `useLayoutEffect`.
+ * One time will only trigger once.
+ */
+export default function useUpdate(callback) {
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    count = _useState2[0],
+    setCount = _useState2[1];
+  var effectRef = useRef(0);
+  var callbackRef = useRef();
+  callbackRef.current = callback;
+
+  // Trigger on `useLayoutEffect`
+  useLayoutUpdateEffect(function () {
+    var _callbackRef$current;
+    (_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 || _callbackRef$current.call(callbackRef);
+  }, [count]);
+
+  // Trigger to update count
+  return function () {
+    if (effectRef.current !== count) {
+      return;
+    }
+    effectRef.current += 1;
+    setCount(effectRef.current);
+  };
+}
+export function useUpdateState(defaultState) {
+  var batchRef = useRef([]);
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    forceUpdate = _useState4[1];
+  var state = useRef(typeof defaultState === 'function' ? defaultState() : defaultState);
+  var flushUpdate = useUpdate(function () {
+    var current = state.current;
+    batchRef.current.forEach(function (callback) {
+      current = callback(current);
+    });
+    batchRef.current = [];
+    state.current = current;
+    forceUpdate({});
+  });
+  function updater(callback) {
+    batchRef.current.push(callback);
+    flushUpdate();
+  }
+  return [state.current, updater];
+}
--- a/frontend/node_modules/rc-tabs/es/hooks/useVisibleRange.d.ts
+++ b/frontend/node_modules/rc-tabs/es/hooks/useVisibleRange.d.ts
@@ -0,0 +1,6 @@
+import type { Tab, TabOffsetMap } from '../interface';
+import type { TabNavListProps } from '../TabNavList';
+export type ContainerSizeInfo = [width: number, height: number, left: number, top: number];
+export default function useVisibleRange(tabOffsets: TabOffsetMap, visibleTabContentValue: number, transform: number, tabContentSizeValue: number, addNodeSizeValue: number, operationNodeSizeValue: number, { tabs, tabPosition, rtl }: {
+    tabs: Tab[];
+} & TabNavListProps): [visibleStart: number, visibleEnd: number];
--- a/frontend/node_modules/rc-tabs/es/hooks/useVisibleRange.js
+++ b/frontend/node_modules/rc-tabs/es/hooks/useVisibleRange.js
@@ -0,0 +1,50 @@
+import { useMemo } from 'react';
+var DEFAULT_SIZE = {
+  width: 0,
+  height: 0,
+  left: 0,
+  top: 0,
+  right: 0
+};
+export default function useVisibleRange(tabOffsets, visibleTabContentValue, transform, tabContentSizeValue, addNodeSizeValue, operationNodeSizeValue, _ref) {
+  var tabs = _ref.tabs,
+    tabPosition = _ref.tabPosition,
+    rtl = _ref.rtl;
+  var charUnit;
+  var position;
+  var transformSize;
+  if (['top', 'bottom'].includes(tabPosition)) {
+    charUnit = 'width';
+    position = rtl ? 'right' : 'left';
+    transformSize = Math.abs(transform);
+  } else {
+    charUnit = 'height';
+    position = 'top';
+    transformSize = -transform;
+  }
+  return useMemo(function () {
+    if (!tabs.length) {
+      return [0, 0];
+    }
+    var len = tabs.length;
+    var endIndex = len;
+    for (var i = 0; i < len; i += 1) {
+      var offset = tabOffsets.get(tabs[i].key) || DEFAULT_SIZE;
+      if (Math.floor(offset[position] + offset[charUnit]) > Math.floor(transformSize + visibleTabContentValue)) {
+        endIndex = i - 1;
+        break;
+      }
+    }
+    var startIndex = 0;
+    for (var _i = len - 1; _i >= 0; _i -= 1) {
+      var _offset = tabOffsets.get(tabs[_i].key) || DEFAULT_SIZE;
+      if (_offset[position] < transformSize) {
+        startIndex = _i + 1;
+        break;
+      }
+    }
+    return startIndex > endIndex ? [0, -1] : [startIndex, endIndex];
+  }, [tabOffsets, visibleTabContentValue, tabContentSizeValue, addNodeSizeValue, operationNodeSizeValue, transformSize, tabPosition, tabs.map(function (tab) {
+    return tab.key;
+  }).join('_'), rtl]);
+}
--- a/frontend/node_modules/rc-tabs/es/index.d.ts
+++ b/frontend/node_modules/rc-tabs/es/index.d.ts
@@ -0,0 +1,4 @@
+import type { TabsProps } from './Tabs';
+import Tabs from './Tabs';
+export type { TabsProps };
+export default Tabs;
--- a/frontend/node_modules/rc-tabs/es/index.js
+++ b/frontend/node_modules/rc-tabs/es/index.js
@@ -0,0 +1,2 @@
+import Tabs from "./Tabs";
+export default Tabs;
--- a/frontend/node_modules/rc-tabs/es/interface.d.ts
+++ b/frontend/node_modules/rc-tabs/es/interface.d.ts
@@ -0,0 +1,77 @@
+import type { CSSMotionProps } from 'rc-motion';
+import type React from 'react';
+import type { TabNavListProps } from './TabNavList';
+import type { TabPaneProps } from './TabPanelList/TabPane';
+import type { DropdownProps } from 'rc-dropdown/lib/Dropdown';
+export type TriggerProps = {
+    trigger?: 'hover' | 'click';
+};
+export type moreIcon = React.ReactNode;
+export type MoreProps = {
+    icon?: moreIcon;
+} & Omit<DropdownProps, 'children'>;
+export type SizeInfo = [width: number, height: number];
+export type TabSizeMap = Map<React.Key, {
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+}>;
+export interface TabOffset {
+    width: number;
+    height: number;
+    left: number;
+    right: number;
+    top: number;
+}
+export type TabOffsetMap = Map<React.Key, TabOffset>;
+export type TabPosition = 'left' | 'right' | 'top' | 'bottom';
+export interface Tab extends Omit<TabPaneProps, 'tab'> {
+    key: string;
+    label: React.ReactNode;
+}
+type RenderTabBarProps = {
+    id: string;
+    activeKey: string;
+    animated: AnimatedConfig;
+    tabPosition: TabPosition;
+    rtl: boolean;
+    mobile: boolean;
+    editable: EditableConfig;
+    locale: TabsLocale;
+    more: MoreProps;
+    tabBarGutter: number;
+    onTabClick: (key: string, e: React.MouseEvent | React.KeyboardEvent) => void;
+    onTabScroll: OnTabScroll;
+    extra: TabBarExtraContent;
+    style: React.CSSProperties;
+    /** @deprecated It do not pass real TabPane node. Only for compatible usage.  */
+    panes: React.ReactNode;
+};
+export type RenderTabBar = (props: RenderTabBarProps, DefaultTabBar: React.ComponentType<TabNavListProps>) => React.ReactElement;
+export interface TabsLocale {
+    dropdownAriaLabel?: string;
+    removeAriaLabel?: string;
+    addAriaLabel?: string;
+}
+export interface EditableConfig {
+    onEdit: (type: 'add' | 'remove', info: {
+        key?: string;
+        event: React.MouseEvent | React.KeyboardEvent;
+    }) => void;
+    showAdd?: boolean;
+    removeIcon?: React.ReactNode;
+    addIcon?: React.ReactNode;
+}
+export interface AnimatedConfig {
+    inkBar?: boolean;
+    tabPane?: boolean;
+    tabPaneMotion?: CSSMotionProps;
+}
+export type OnTabScroll = (info: {
+    direction: 'left' | 'right' | 'top' | 'bottom';
+}) => void;
+export type TabBarExtraPosition = 'left' | 'right';
+export type TabBarExtraMap = Partial<Record<TabBarExtraPosition, React.ReactNode>>;
+export type TabBarExtraContent = React.ReactNode | TabBarExtraMap;
+export {};
--- a/frontend/node_modules/rc-tabs/es/interface.js
+++ b/frontend/node_modules/rc-tabs/es/interface.js
@@ -0,0 +1 @@
+export {};
--- a/frontend/node_modules/rc-tabs/es/util.d.ts
+++ b/frontend/node_modules/rc-tabs/es/util.d.ts
@@ -0,0 +1,10 @@
+import type React from 'react';
+import type { ReactNode } from 'react';
+import type { EditableConfig } from './interface';
+/**
+ * We trade Map as deps which may change with same value but different ref object.
+ * We should make it as hash for deps
+ * */
+export declare function stringify<K extends PropertyKey, V>(obj: Record<K, V> | Map<K, V>): string;
+export declare function genDataNodeKey(key: React.Key): string;
+export declare function getRemovable(closable?: boolean, closeIcon?: ReactNode, editable?: EditableConfig, disabled?: boolean): boolean;
--- a/frontend/node_modules/rc-tabs/es/util.js
+++ b/frontend/node_modules/rc-tabs/es/util.js
@@ -0,0 +1,34 @@
+/**
+ * We trade Map as deps which may change with same value but different ref object.
+ * We should make it as hash for deps
+ * */
+export function stringify(obj) {
+  var tgt;
+  if (obj instanceof Map) {
+    tgt = {};
+    obj.forEach(function (v, k) {
+      tgt[k] = v;
+    });
+  } else {
+    tgt = obj;
+  }
+  return JSON.stringify(tgt);
+}
+var RC_TABS_DOUBLE_QUOTE = 'TABS_DQ';
+export function genDataNodeKey(key) {
+  return String(key).replace(/"/g, RC_TABS_DOUBLE_QUOTE);
+}
+export function getRemovable(closable, closeIcon, editable, disabled) {
+  if (
+  // Only editable tabs can be removed
+  !editable ||
+  // Tabs cannot be removed when disabled
+  disabled ||
+  // closable is false
+  closable === false ||
+  // If closable is undefined, the remove button should be hidden when closeIcon is null or false
+  closable === undefined && (closeIcon === false || closeIcon === null)) {
+    return false;
+  }
+  return true;
+}
--- a/frontend/node_modules/rc-tabs/lib/TabContext.d.ts
+++ b/frontend/node_modules/rc-tabs/lib/TabContext.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { Tab } from './interface';
+export interface TabContextProps {
+    tabs: Tab[];
+    prefixCls: string;
+}
+declare const _default: import("react").Context<TabContextProps>;
+export default _default;
--- a/frontend/node_modules/rc-tabs/lib/TabContext.js
+++ b/frontend/node_modules/rc-tabs/lib/TabContext.js
@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _default = exports.default = /*#__PURE__*/(0, _react.createContext)(null);
--- a/frontend/node_modules/rc-tabs/lib/TabNavList/AddButton.d.ts
+++ b/frontend/node_modules/rc-tabs/lib/TabNavList/AddButton.d.ts
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { EditableConfig, TabsLocale } from '../interface';
+export interface AddButtonProps {
+    prefixCls: string;
+    editable?: EditableConfig;
+    locale?: TabsLocale;
+    style?: React.CSSProperties;
+}
+declare const AddButton: React.ForwardRefExoticComponent<AddButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default AddButton;
--- a/frontend/node_modules/rc-tabs/lib/TabNavList/AddButton.js
+++ b/frontend/node_modules/rc-tabs/lib/TabNavList/AddButton.js
@@ -0,0 +1,32 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var AddButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var prefixCls = props.prefixCls,
+    editable = props.editable,
+    locale = props.locale,
+    style = props.style;
+  if (!editable || editable.showAdd === false) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("button", {
+    ref: ref,
+    type: "button",
+    className: "".concat(prefixCls, "-nav-add"),
+    style: style,
+    "aria-label": (locale === null || locale === void 0 ? void 0 : locale.addAriaLabel) || 'Add tab',
+    onClick: function onClick(event) {
+      editable.onEdit('add', {
+        event: event
+      });
+    }
+  }, editable.addIcon || '+');
+});
+var _default = exports.default = AddButton;
--- a/frontend/node_modules/rc-tabs/lib/TabNavList/ExtraContent.d.ts
+++ b/frontend/node_modules/rc-tabs/lib/TabNavList/ExtraContent.d.ts
@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { TabBarExtraContent, TabBarExtraPosition } from '../interface';
+interface ExtraContentProps {
+    position: TabBarExtraPosition;
+    prefixCls: string;
+    extra?: TabBarExtraContent;
+}
+declare const ExtraContent: React.ForwardRefExoticComponent<ExtraContentProps & React.RefAttributes<HTMLDivElement>>;
+export default ExtraContent;
--- a/frontend/node_modules/rc-tabs/lib/TabNavList/ExtraContent.js
+++ b/frontend/node_modules/rc-tabs/lib/TabNavList/ExtraContent.js
@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var ExtraContent = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var position = props.position,
+    prefixCls = props.prefixCls,
+    extra = props.extra;
+  if (!extra) {
+    return null;
+  }
+  var content;
+
+  // Parse extra
+  var assertExtra = {};
+  if ((0, _typeof2.default)(extra) === 'object' && ! /*#__PURE__*/React.isValidElement(extra)) {
+    assertExtra = extra;
+  } else {
+    assertExtra.right = extra;
+  }
+  if (position === 'right') {
+    content = assertExtra.right;
+  }
+  if (position === 'left') {
+    content = assertExtra.left;
+  }
+  return content ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-extra-content"),
+    ref: ref
+  }, content) : null;
+});
+if (process.env.NODE_ENV !== 'production') {
+  ExtraContent.displayName = 'ExtraContent';
+}
+var _default = exports.default = ExtraContent;
--- a/frontend/node_modules/rc-tabs/lib/TabNavList/OperationNode.d.ts
+++ b/frontend/node_modules/rc-tabs/lib/TabNavList/OperationNode.d.ts
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { EditableConfig, Tab, TabsLocale, MoreProps } from '../interface';
+export interface OperationNodeProps {
+    prefixCls: string;
+    className?: string;
+    style?: React.CSSProperties;
+    id: string;
+    tabs: Tab[];
+    rtl: boolean;
+    tabBarGutter?: number;
+    activeKey: string;
+    mobile: boolean;
+    more?: MoreProps;
+    editable?: EditableConfig;
+    locale?: TabsLocale;
+    removeAriaLabel?: string;
+    onTabClick: (key: string, e: React.MouseEvent | React.KeyboardEvent) => void;
+    tabMoving?: boolean;
+    getPopupContainer?: (node: HTMLElement) => HTMLElement;
+    popupClassName?: string;
+}
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<OperationNodeProps & React.RefAttributes<HTMLDivElement>>>;
+export default _default;
--- a/frontend/node_modules/rc-tabs/lib/TabNavList/OperationNode.js
+++ b/frontend/node_modules/rc-tabs/lib/TabNavList/OperationNode.js
@@ -0,0 +1,203 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _rcDropdown = _interopRequireDefault(require("rc-dropdown"));
+var _rcMenu = _interopRequireWildcard(require("rc-menu"));
+var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _util = require("../util");
+var _AddButton = _interopRequireDefault(require("./AddButton"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var OperationNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var prefixCls = props.prefixCls,
+    id = props.id,
+    tabs = props.tabs,
+    locale = props.locale,
+    mobile = props.mobile,
+    _props$more = props.more,
+    moreProps = _props$more === void 0 ? {} : _props$more,
+    style = props.style,
+    className = props.className,
+    editable = props.editable,
+    tabBarGutter = props.tabBarGutter,
+    rtl = props.rtl,
+    removeAriaLabel = props.removeAriaLabel,
+    onTabClick = props.onTabClick,
+    getPopupContainer = props.getPopupContainer,
+    popupClassName = props.popupClassName;
+  // ======================== Dropdown ========================
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    selectedKey = _useState4[0],
+    setSelectedKey = _useState4[1];
+  var _moreProps$icon = moreProps.icon,
+    moreIcon = _moreProps$icon === void 0 ? 'More' : _moreProps$icon;
+  var popupId = "".concat(id, "-more-popup");
+  var dropdownPrefix = "".concat(prefixCls, "-dropdown");
+  var selectedItemId = selectedKey !== null ? "".concat(popupId, "-").concat(selectedKey) : null;
+  var dropdownAriaLabel = locale === null || locale === void 0 ? void 0 : locale.dropdownAriaLabel;
+  function onRemoveTab(event, key) {
+    event.preventDefault();
+    event.stopPropagation();
+    editable.onEdit('remove', {
+      key: key,
+      event: event
+    });
+  }
+  var menu = /*#__PURE__*/React.createElement(_rcMenu.default, {
+    onClick: function onClick(_ref) {
+      var key = _ref.key,
+        domEvent = _ref.domEvent;
+      onTabClick(key, domEvent);
+      setOpen(false);
+    },
+    prefixCls: "".concat(dropdownPrefix, "-menu"),
+    id: popupId,
+    tabIndex: -1,
+    role: "listbox",
+    "aria-activedescendant": selectedItemId,
+    selectedKeys: [selectedKey],
+    "aria-label": dropdownAriaLabel !== undefined ? dropdownAriaLabel : 'expanded dropdown'
+  }, tabs.map(function (tab) {
+    var closable = tab.closable,
+      disabled = tab.disabled,
+      closeIcon = tab.closeIcon,
+      key = tab.key,
+      label = tab.label;
+    var removable = (0, _util.getRemovable)(closable, closeIcon, editable, disabled);
+    return /*#__PURE__*/React.createElement(_rcMenu.MenuItem, {
+      key: key,
+      id: "".concat(popupId, "-").concat(key),
+      role: "option",
+      "aria-controls": id && "".concat(id, "-panel-").concat(key),
+      disabled: disabled
+    }, /*#__PURE__*/React.createElement("span", null, label), removable && /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      "aria-label": removeAriaLabel || 'remove',
+      tabIndex: 0,
+      className: "".concat(dropdownPrefix, "-menu-item-remove"),
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        onRemoveTab(e, key);
+      }
+    }, closeIcon || editable.removeIcon || '×'));
+  }));
+  function selectOffset(offset) {
+    var enabledTabs = tabs.filter(function (tab) {
+      return !tab.disabled;
+    });
+    var selectedIndex = enabledTabs.findIndex(function (tab) {
+      return tab.key === selectedKey;
+    }) || 0;
+    var len = enabledTabs.length;
+    for (var i = 0; i < len; i += 1) {
+      selectedIndex = (selectedIndex + offset + len) % len;
+      var tab = enabledTabs[selectedIndex];
+      if (!tab.disabled) {
+        setSelectedKey(tab.key);
+        return;
+      }
+    }
+  }
+  function onKeyDown(e) {
+    var which = e.which;
+    if (!open) {
+      if ([_KeyCode.default.DOWN, _KeyCode.default.SPACE, _KeyCode.default.ENTER].includes(which)) {
+        setOpen(true);
+        e.preventDefault();
+      }
+      return;
+    }
+    switch (which) {
+      case _KeyCode.default.UP:
+        selectOffset(-1);
+        e.preventDefault();
+        break;
+      case _KeyCode.default.DOWN:
+        selectOffset(1);
+        e.preventDefault();
+        break;
+      case _KeyCode.default.ESC:
+        setOpen(false);
+        break;
+      case _KeyCode.default.SPACE:
+      case _KeyCode.default.ENTER:
+        if (selectedKey !== null) {
+          onTabClick(selectedKey, e);
+        }
+        break;
+    }
+  }
+
+  // ========================= Effect =========================
+  (0, _react.useEffect)(function () {
+    // We use query element here to avoid React strict warning
+    var ele = document.getElementById(selectedItemId);
+    if (ele && ele.scrollIntoView) {
+      ele.scrollIntoView(false);
+    }
+  }, [selectedKey]);
+  (0, _react.useEffect)(function () {
+    if (!open) {
+      setSelectedKey(null);
+    }
+  }, [open]);
+
+  // ========================= Render =========================
+  var moreStyle = (0, _defineProperty2.default)({}, rtl ? 'marginRight' : 'marginLeft', tabBarGutter);
+  if (!tabs.length) {
+    moreStyle.visibility = 'hidden';
+    moreStyle.order = 1;
+  }
+  var overlayClassName = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(dropdownPrefix, "-rtl"), rtl));
+  var moreNode = mobile ? null : /*#__PURE__*/React.createElement(_rcDropdown.default, (0, _extends2.default)({
+    prefixCls: dropdownPrefix,
+    overlay: menu,
+    visible: tabs.length ? open : false,
+    onVisibleChange: setOpen,
+    overlayClassName: (0, _classnames.default)(overlayClassName, popupClassName),
+    mouseEnterDelay: 0.1,
+    mouseLeaveDelay: 0.1,
+    getPopupContainer: getPopupContainer
+  }, moreProps), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "".concat(prefixCls, "-nav-more"),
+    style: moreStyle,
+    "aria-haspopup": "listbox",
+    "aria-controls": popupId,
+    id: "".concat(id, "-more"),
+    "aria-expanded": open,
+    onKeyDown: onKeyDown
+  }, moreIcon));
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)("".concat(prefixCls, "-nav-operations"), className),
+    style: style,
+    ref: ref
+  }, moreNode, /*#__PURE__*/React.createElement(_AddButton.default, {
+    prefixCls: prefixCls,
+    locale: locale,
+    editable: editable
+  }));
+});
+var _default = exports.default = /*#__PURE__*/React.memo(OperationNode, function (_, next) {
+  return (
+    // https://github.com/ant-design/ant-design/issues/32544
+    // We'd better remove syntactic sugar in `rc-menu` since this has perf issue
+    next.tabMoving
+  );
+});
--- a/frontend/node_modules/rc-tabs/lib/TabNavList/TabNode.d.ts
+++ b/frontend/node_modules/rc-tabs/lib/TabNavList/TabNode.d.ts
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { EditableConfig, Tab } from '../interface';
+export interface TabNodeProps {
+    id: string;
+    prefixCls: string;
+    tab: Tab;
+    active: boolean;
+    focus: boolean;
+    closable?: boolean;
+    editable?: EditableConfig;
+    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    onResize?: (width: number, height: number, left: number, top: number) => void;
+    renderWrapper?: (node: React.ReactElement) => React.ReactElement;
+    removeAriaLabel?: string;
+    tabCount: number;
+    currentPosition: number;
+    removeIcon?: React.ReactNode;
+    onKeyDown: React.KeyboardEventHandler;
+    onMouseDown: React.MouseEventHandler;
+    onMouseUp: React.MouseEventHandler;
+    onFocus: React.FocusEventHandler;
+    onBlur: React.FocusEventHandler;
+    style?: React.CSSProperties;
+}
+declare const TabNode: React.FC<TabNodeProps>;
+export default TabNode;
--- a/frontend/node_modules/rc-tabs/lib/TabNavList/TabNode.js
+++ b/frontend/node_modules/rc-tabs/lib/TabNavList/TabNode.js
@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var React = _interopRequireWildcard(require("react"));
+var _util = require("../util");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var TabNode = function TabNode(props) {
+  var prefixCls = props.prefixCls,
+    id = props.id,
+    active = props.active,
+    focus = props.focus,
+    _props$tab = props.tab,
+    key = _props$tab.key,
+    label = _props$tab.label,
+    disabled = _props$tab.disabled,
+    closeIcon = _props$tab.closeIcon,
+    icon = _props$tab.icon,
+    closable = props.closable,
+    renderWrapper = props.renderWrapper,
+    removeAriaLabel = props.removeAriaLabel,
+    editable = props.editable,
+    onClick = props.onClick,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    onKeyDown = props.onKeyDown,
+    onMouseDown = props.onMouseDown,
+    onMouseUp = props.onMouseUp,
+    style = props.style,
+    tabCount = props.tabCount,
+    currentPosition = props.currentPosition;
+  var tabPrefix = "".concat(prefixCls, "-tab");
+  var removable = (0, _util.getRemovable)(closable, closeIcon, editable, disabled);
+  function onInternalClick(e) {
+    if (disabled) {
+      return;
+    }
+    onClick(e);
+  }
+  function onRemoveTab(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    editable.onEdit('remove', {
+      key: key,
+      event: event
+    });
+  }
+  var labelNode = React.useMemo(function () {
+    return icon && typeof label === 'string' ? /*#__PURE__*/React.createElement("span", null, label) : label;
+  }, [label, icon]);
+  var btnRef = React.useRef(null);
+  React.useEffect(function () {
+    if (focus && btnRef.current) {
+      btnRef.current.focus();
+    }
+  }, [focus]);
+  var node = /*#__PURE__*/React.createElement("div", {
+    key: key,
+    "data-node-key": (0, _util.genDataNodeKey)(key),
+    className: (0, _classnames.default)(tabPrefix, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(tabPrefix, "-with-remove"), removable), "".concat(tabPrefix, "-active"), active), "".concat(tabPrefix, "-disabled"), disabled), "".concat(tabPrefix, "-focus"), focus)),
+    style: style,
+    onClick: onInternalClick
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: btnRef,
+    role: "tab",
+    "aria-selected": active,
+    id: id && "".concat(id, "-tab-").concat(key),
+    className: "".concat(tabPrefix, "-btn"),
+    "aria-controls": id && "".concat(id, "-panel-").concat(key),
+    "aria-disabled": disabled,
+    tabIndex: disabled ? null : active ? 0 : -1,
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      onInternalClick(e);
+    },
+    onKeyDown: onKeyDown,
+    onMouseDown: onMouseDown,
+    onMouseUp: onMouseUp,
+    onFocus: onFocus,
+    onBlur: onBlur
+  }, focus && /*#__PURE__*/React.createElement("div", {
+    "aria-live": "polite",
+    style: {
+      width: 0,
+      height: 0,
+      position: 'absolute',
+      overflow: 'hidden',
+      opacity: 0
+    }
+  }, "Tab ".concat(currentPosition, " of ").concat(tabCount)), icon && /*#__PURE__*/React.createElement("span", {
+    className: "".concat(tabPrefix, "-icon")
+  }, icon), label && labelNode), removable && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    role: "tab",
+    "aria-label": removeAriaLabel || 'remove',
+    tabIndex: active ? 0 : -1,
+    className: "".concat(tabPrefix, "-remove"),
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      onRemoveTab(e);
+    }
+  }, closeIcon || editable.removeIcon || '×'));
+  return renderWrapper ? renderWrapper(node) : node;
+};
+var _default = exports.default = TabNode;
--- a/frontend/node_modules/rc-tabs/lib/TabNavList/Wrapper.d.ts
+++ b/frontend/node_modules/rc-tabs/lib/TabNavList/Wrapper.d.ts
@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { TabNavListProps } from '.';
+export type TabNavListWrapperProps = Required<Omit<TabNavListProps, 'children' | 'className'>> & TabNavListProps;
+declare const TabNavListWrapper: React.FC<TabNavListWrapperProps>;
+export default TabNavListWrapper;
--- a/frontend/node_modules/rc-tabs/lib/TabNavList/Wrapper.js
+++ b/frontend/node_modules/rc-tabs/lib/TabNavList/Wrapper.js
@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var React = _interopRequireWildcard(require("react"));
+var _ = _interopRequireDefault(require("."));
+var _TabContext = _interopRequireDefault(require("../TabContext"));
+var _TabPane = _interopRequireDefault(require("../TabPanelList/TabPane"));
+var _excluded = ["renderTabBar"],
+  _excluded2 = ["label", "key"]; // zombieJ: To compatible with `renderTabBar` usage.
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// We have to create a TabNavList components.
+var TabNavListWrapper = function TabNavListWrapper(_ref) {
+  var renderTabBar = _ref.renderTabBar,
+    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _React$useContext = React.useContext(_TabContext.default),
+    tabs = _React$useContext.tabs;
+  if (renderTabBar) {
+    var tabNavBarProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), {}, {
+      // Legacy support. We do not use this actually
+      panes: tabs.map(function (_ref2) {
+        var label = _ref2.label,
+          key = _ref2.key,
+          restTabProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+        return /*#__PURE__*/React.createElement(_TabPane.default, (0, _extends2.default)({
+          tab: label,
+          key: key,
+          tabKey: key
+        }, restTabProps));
+      })
+    });
+    return renderTabBar(tabNavBarProps, _.default);
+  }
+  return /*#__PURE__*/React.createElement(_.default, restProps);
+};
+if (process.env.NODE_ENV !== 'production') {
+  TabNavListWrapper.displayName = 'TabNavListWrapper';
+}
+var _default = exports.default = TabNavListWrapper;
--- a/frontend/node_modules/rc-tabs/lib/TabNavList/index.d.ts
+++ b/frontend/node_modules/rc-tabs/lib/TabNavList/index.d.ts
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import type { GetIndicatorSize } from '../hooks/useIndicator';
+import type { AnimatedConfig, EditableConfig, MoreProps, OnTabScroll, RenderTabBar, TabBarExtraContent, TabPosition, TabsLocale } from '../interface';
+export interface TabNavListProps {
+    id: string;
+    tabPosition: TabPosition;
+    activeKey: string;
+    rtl: boolean;
+    animated?: AnimatedConfig;
+    extra?: TabBarExtraContent;
+    editable?: EditableConfig;
+    more?: MoreProps;
+    mobile: boolean;
+    tabBarGutter?: number;
+    renderTabBar?: RenderTabBar;
+    className?: string;
+    style?: React.CSSProperties;
+    locale?: TabsLocale;
+    onTabClick: (activeKey: string, e: React.MouseEvent | React.KeyboardEvent) => void;
+    onTabScroll?: OnTabScroll;
+    children?: (node: React.ReactElement) => React.ReactElement;
+    getPopupContainer?: (node: HTMLElement) => HTMLElement;
+    popupClassName?: string;
+    indicator?: {
+        size?: GetIndicatorSize;
+        align?: 'start' | 'center' | 'end';
+    };
+}
+declare const TabNavList: React.ForwardRefExoticComponent<TabNavListProps & React.RefAttributes<HTMLDivElement>>;
+export default TabNavList;
--- a/frontend/node_modules/rc-tabs/lib/TabNavList/index.js
+++ b/frontend/node_modules/rc-tabs/lib/TabNavList/index.js
@@ -0,0 +1,624 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
+var _useEvent = _interopRequireDefault(require("rc-util/lib/hooks/useEvent"));
+var _ref3 = require("rc-util/lib/ref");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _TabContext = _interopRequireDefault(require("../TabContext"));
+var _useIndicator2 = _interopRequireDefault(require("../hooks/useIndicator"));
+var _useOffsets = _interopRequireDefault(require("../hooks/useOffsets"));
+var _useSyncState5 = _interopRequireDefault(require("../hooks/useSyncState"));
+var _useTouchMove = _interopRequireDefault(require("../hooks/useTouchMove"));
+var _useUpdate = _interopRequireWildcard(require("../hooks/useUpdate"));
+var _useVisibleRange3 = _interopRequireDefault(require("../hooks/useVisibleRange"));
+var _util = require("../util");
+var _AddButton = _interopRequireDefault(require("./AddButton"));
+var _ExtraContent = _interopRequireDefault(require("./ExtraContent"));
+var _OperationNode = _interopRequireDefault(require("./OperationNode"));
+var _TabNode = _interopRequireDefault(require("./TabNode"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* eslint-disable react-hooks/exhaustive-deps */
+
+var getTabSize = function getTabSize(tab, containerRect) {
+  // tabListRef
+  var offsetWidth = tab.offsetWidth,
+    offsetHeight = tab.offsetHeight,
+    offsetTop = tab.offsetTop,
+    offsetLeft = tab.offsetLeft;
+  var _tab$getBoundingClien = tab.getBoundingClientRect(),
+    width = _tab$getBoundingClien.width,
+    height = _tab$getBoundingClien.height,
+    left = _tab$getBoundingClien.left,
+    top = _tab$getBoundingClien.top;
+
+  // Use getBoundingClientRect to avoid decimal inaccuracy
+  if (Math.abs(width - offsetWidth) < 1) {
+    return [width, height, left - containerRect.left, top - containerRect.top];
+  }
+  return [offsetWidth, offsetHeight, offsetLeft, offsetTop];
+};
+var getSize = function getSize(refObj) {
+  var _ref = refObj.current || {},
+    _ref$offsetWidth = _ref.offsetWidth,
+    offsetWidth = _ref$offsetWidth === void 0 ? 0 : _ref$offsetWidth,
+    _ref$offsetHeight = _ref.offsetHeight,
+    offsetHeight = _ref$offsetHeight === void 0 ? 0 : _ref$offsetHeight;
+
+  // Use getBoundingClientRect to avoid decimal inaccuracy
+  if (refObj.current) {
+    var _refObj$current$getBo = refObj.current.getBoundingClientRect(),
+      width = _refObj$current$getBo.width,
+      height = _refObj$current$getBo.height;
+    if (Math.abs(width - offsetWidth) < 1) {
+      return [width, height];
+    }
+  }
+  return [offsetWidth, offsetHeight];
+};
+
+/**
+ * Convert `SizeInfo` to unit value. Such as [123, 456] with `top` position get `123`
+ */
+var getUnitValue = function getUnitValue(size, tabPositionTopOrBottom) {
+  return size[tabPositionTopOrBottom ? 0 : 1];
+};
+var TabNavList = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+    style = props.style,
+    id = props.id,
+    animated = props.animated,
+    activeKey = props.activeKey,
+    rtl = props.rtl,
+    extra = props.extra,
+    editable = props.editable,
+    locale = props.locale,
+    tabPosition = props.tabPosition,
+    tabBarGutter = props.tabBarGutter,
+    children = props.children,
+    onTabClick = props.onTabClick,
+    onTabScroll = props.onTabScroll,
+    indicator = props.indicator;
+  var _React$useContext = React.useContext(_TabContext.default),
+    prefixCls = _React$useContext.prefixCls,
+    tabs = _React$useContext.tabs;
+  var containerRef = (0, _react.useRef)(null);
+  var extraLeftRef = (0, _react.useRef)(null);
+  var extraRightRef = (0, _react.useRef)(null);
+  var tabsWrapperRef = (0, _react.useRef)(null);
+  var tabListRef = (0, _react.useRef)(null);
+  var operationsRef = (0, _react.useRef)(null);
+  var innerAddButtonRef = (0, _react.useRef)(null);
+  var tabPositionTopOrBottom = tabPosition === 'top' || tabPosition === 'bottom';
+  var _useSyncState = (0, _useSyncState5.default)(0, function (next, prev) {
+      if (tabPositionTopOrBottom && onTabScroll) {
+        onTabScroll({
+          direction: next > prev ? 'left' : 'right'
+        });
+      }
+    }),
+    _useSyncState2 = (0, _slicedToArray2.default)(_useSyncState, 2),
+    transformLeft = _useSyncState2[0],
+    setTransformLeft = _useSyncState2[1];
+  var _useSyncState3 = (0, _useSyncState5.default)(0, function (next, prev) {
+      if (!tabPositionTopOrBottom && onTabScroll) {
+        onTabScroll({
+          direction: next > prev ? 'top' : 'bottom'
+        });
+      }
+    }),
+    _useSyncState4 = (0, _slicedToArray2.default)(_useSyncState3, 2),
+    transformTop = _useSyncState4[0],
+    setTransformTop = _useSyncState4[1];
+  var _useState = (0, _react.useState)([0, 0]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    containerExcludeExtraSize = _useState2[0],
+    setContainerExcludeExtraSize = _useState2[1];
+  var _useState3 = (0, _react.useState)([0, 0]),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    tabContentSize = _useState4[0],
+    setTabContentSize = _useState4[1];
+  var _useState5 = (0, _react.useState)([0, 0]),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    addSize = _useState6[0],
+    setAddSize = _useState6[1];
+  var _useState7 = (0, _react.useState)([0, 0]),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    operationSize = _useState8[0],
+    setOperationSize = _useState8[1];
+  var _useUpdateState = (0, _useUpdate.useUpdateState)(new Map()),
+    _useUpdateState2 = (0, _slicedToArray2.default)(_useUpdateState, 2),
+    tabSizes = _useUpdateState2[0],
+    setTabSizes = _useUpdateState2[1];
+  var tabOffsets = (0, _useOffsets.default)(tabs, tabSizes, tabContentSize[0]);
+
+  // ========================== Unit =========================
+  var containerExcludeExtraSizeValue = getUnitValue(containerExcludeExtraSize, tabPositionTopOrBottom);
+  var tabContentSizeValue = getUnitValue(tabContentSize, tabPositionTopOrBottom);
+  var addSizeValue = getUnitValue(addSize, tabPositionTopOrBottom);
+  var operationSizeValue = getUnitValue(operationSize, tabPositionTopOrBottom);
+  var needScroll = Math.floor(containerExcludeExtraSizeValue) < Math.floor(tabContentSizeValue + addSizeValue);
+  var visibleTabContentValue = needScroll ? containerExcludeExtraSizeValue - operationSizeValue : containerExcludeExtraSizeValue - addSizeValue;
+
+  // ========================== Util =========================
+  var operationsHiddenClassName = "".concat(prefixCls, "-nav-operations-hidden");
+  var transformMin = 0;
+  var transformMax = 0;
+  if (!tabPositionTopOrBottom) {
+    transformMin = Math.min(0, visibleTabContentValue - tabContentSizeValue);
+    transformMax = 0;
+  } else if (rtl) {
+    transformMin = 0;
+    transformMax = Math.max(0, tabContentSizeValue - visibleTabContentValue);
+  } else {
+    transformMin = Math.min(0, visibleTabContentValue - tabContentSizeValue);
+    transformMax = 0;
+  }
+  function alignInRange(value) {
+    if (value < transformMin) {
+      return transformMin;
+    }
+    if (value > transformMax) {
+      return transformMax;
+    }
+    return value;
+  }
+
+  // ========================= Mobile ========================
+  var touchMovingRef = (0, _react.useRef)(null);
+  var _useState9 = (0, _react.useState)(),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    lockAnimation = _useState10[0],
+    setLockAnimation = _useState10[1];
+  function doLockAnimation() {
+    setLockAnimation(Date.now());
+  }
+  function clearTouchMoving() {
+    if (touchMovingRef.current) {
+      clearTimeout(touchMovingRef.current);
+    }
+  }
+  (0, _useTouchMove.default)(tabsWrapperRef, function (offsetX, offsetY) {
+    function doMove(setState, offset) {
+      setState(function (value) {
+        var newValue = alignInRange(value + offset);
+        return newValue;
+      });
+    }
+
+    // Skip scroll if place is enough
+    if (!needScroll) {
+      return false;
+    }
+    if (tabPositionTopOrBottom) {
+      doMove(setTransformLeft, offsetX);
+    } else {
+      doMove(setTransformTop, offsetY);
+    }
+    clearTouchMoving();
+    doLockAnimation();
+    return true;
+  });
+  (0, _react.useEffect)(function () {
+    clearTouchMoving();
+    if (lockAnimation) {
+      touchMovingRef.current = setTimeout(function () {
+        setLockAnimation(0);
+      }, 100);
+    }
+    return clearTouchMoving;
+  }, [lockAnimation]);
+
+  // ===================== Visible Range =====================
+  // Render tab node & collect tab offset
+  var _useVisibleRange = (0, _useVisibleRange3.default)(tabOffsets,
+    // Container
+    visibleTabContentValue,
+    // Transform
+    tabPositionTopOrBottom ? transformLeft : transformTop,
+    // Tabs
+    tabContentSizeValue,
+    // Add
+    addSizeValue,
+    // Operation
+    operationSizeValue, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+      tabs: tabs
+    })),
+    _useVisibleRange2 = (0, _slicedToArray2.default)(_useVisibleRange, 2),
+    visibleStart = _useVisibleRange2[0],
+    visibleEnd = _useVisibleRange2[1];
+
+  // ========================= Scroll ========================
+  var scrollToTab = (0, _useEvent.default)(function () {
+    var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : activeKey;
+    var tabOffset = tabOffsets.get(key) || {
+      width: 0,
+      height: 0,
+      left: 0,
+      right: 0,
+      top: 0
+    };
+    if (tabPositionTopOrBottom) {
+      // ============ Align with top & bottom ============
+      var newTransform = transformLeft;
+
+      // RTL
+      if (rtl) {
+        if (tabOffset.right < transformLeft) {
+          newTransform = tabOffset.right;
+        } else if (tabOffset.right + tabOffset.width > transformLeft + visibleTabContentValue) {
+          newTransform = tabOffset.right + tabOffset.width - visibleTabContentValue;
+        }
+      }
+      // LTR
+      else if (tabOffset.left < -transformLeft) {
+        newTransform = -tabOffset.left;
+      } else if (tabOffset.left + tabOffset.width > -transformLeft + visibleTabContentValue) {
+        newTransform = -(tabOffset.left + tabOffset.width - visibleTabContentValue);
+      }
+      setTransformTop(0);
+      setTransformLeft(alignInRange(newTransform));
+    } else {
+      // ============ Align with left & right ============
+      var _newTransform = transformTop;
+      if (tabOffset.top < -transformTop) {
+        _newTransform = -tabOffset.top;
+      } else if (tabOffset.top + tabOffset.height > -transformTop + visibleTabContentValue) {
+        _newTransform = -(tabOffset.top + tabOffset.height - visibleTabContentValue);
+      }
+      setTransformLeft(0);
+      setTransformTop(alignInRange(_newTransform));
+    }
+  });
+
+  // ========================= Focus =========================
+  var _useState11 = (0, _react.useState)(),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    focusKey = _useState12[0],
+    setFocusKey = _useState12[1];
+  var _useState13 = (0, _react.useState)(false),
+    _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+    isMouse = _useState14[0],
+    setIsMouse = _useState14[1];
+  var enabledTabs = tabs.filter(function (tab) {
+    return !tab.disabled;
+  }).map(function (tab) {
+    return tab.key;
+  });
+  var onOffset = function onOffset(offset) {
+    var currentIndex = enabledTabs.indexOf(focusKey || activeKey);
+    var len = enabledTabs.length;
+    var nextIndex = (currentIndex + offset + len) % len;
+    var newKey = enabledTabs[nextIndex];
+    setFocusKey(newKey);
+  };
+  var handleRemoveTab = function handleRemoveTab(removalTabKey, e) {
+    var removeIndex = enabledTabs.indexOf(removalTabKey);
+    var removeTab = tabs.find(function (tab) {
+      return tab.key === removalTabKey;
+    });
+    var removable = (0, _util.getRemovable)(removeTab === null || removeTab === void 0 ? void 0 : removeTab.closable, removeTab === null || removeTab === void 0 ? void 0 : removeTab.closeIcon, editable, removeTab === null || removeTab === void 0 ? void 0 : removeTab.disabled);
+    if (removable) {
+      e.preventDefault();
+      e.stopPropagation();
+      editable.onEdit('remove', {
+        key: removalTabKey,
+        event: e
+      });
+
+      // when remove last tab, focus previous tab
+      if (removeIndex === enabledTabs.length - 1) {
+        onOffset(-1);
+      } else {
+        onOffset(1);
+      }
+    }
+  };
+  var handleMouseDown = function handleMouseDown(key, e) {
+    setIsMouse(true);
+    // Middle mouse button
+    if (e.button === 1) {
+      handleRemoveTab(key, e);
+    }
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    var code = e.code;
+    var isRTL = rtl && tabPositionTopOrBottom;
+    var firstEnabledTab = enabledTabs[0];
+    var lastEnabledTab = enabledTabs[enabledTabs.length - 1];
+    switch (code) {
+      // LEFT
+      case 'ArrowLeft':
+        {
+          if (tabPositionTopOrBottom) {
+            onOffset(isRTL ? 1 : -1);
+          }
+          break;
+        }
+
+      // RIGHT
+      case 'ArrowRight':
+        {
+          if (tabPositionTopOrBottom) {
+            onOffset(isRTL ? -1 : 1);
+          }
+          break;
+        }
+
+      // UP
+      case 'ArrowUp':
+        {
+          e.preventDefault();
+          if (!tabPositionTopOrBottom) {
+            onOffset(-1);
+          }
+          break;
+        }
+
+      // DOWN
+      case 'ArrowDown':
+        {
+          e.preventDefault();
+          if (!tabPositionTopOrBottom) {
+            onOffset(1);
+          }
+          break;
+        }
+
+      // HOME
+      case 'Home':
+        {
+          e.preventDefault();
+          setFocusKey(firstEnabledTab);
+          break;
+        }
+
+      // END
+      case 'End':
+        {
+          e.preventDefault();
+          setFocusKey(lastEnabledTab);
+          break;
+        }
+
+      // Enter & Space
+      case 'Enter':
+      case 'Space':
+        {
+          e.preventDefault();
+          onTabClick(focusKey !== null && focusKey !== void 0 ? focusKey : activeKey, e);
+          break;
+        }
+      // Backspace
+      case 'Backspace':
+      case 'Delete':
+        {
+          handleRemoveTab(focusKey, e);
+          break;
+        }
+    }
+  };
+
+  // ========================== Tab ==========================
+  var tabNodeStyle = {};
+  if (tabPositionTopOrBottom) {
+    tabNodeStyle[rtl ? 'marginRight' : 'marginLeft'] = tabBarGutter;
+  } else {
+    tabNodeStyle.marginTop = tabBarGutter;
+  }
+  var tabNodes = tabs.map(function (tab, i) {
+    var key = tab.key;
+    return /*#__PURE__*/React.createElement(_TabNode.default, {
+      id: id,
+      prefixCls: prefixCls,
+      key: key,
+      tab: tab
+      /* first node should not have margin left */,
+      style: i === 0 ? undefined : tabNodeStyle,
+      closable: tab.closable,
+      editable: editable,
+      active: key === activeKey,
+      focus: key === focusKey,
+      renderWrapper: children,
+      removeAriaLabel: locale === null || locale === void 0 ? void 0 : locale.removeAriaLabel,
+      tabCount: enabledTabs.length,
+      currentPosition: i + 1,
+      onClick: function onClick(e) {
+        onTabClick(key, e);
+      },
+      onKeyDown: handleKeyDown,
+      onFocus: function onFocus() {
+        if (!isMouse) {
+          setFocusKey(key);
+        }
+        scrollToTab(key);
+        doLockAnimation();
+        if (!tabsWrapperRef.current) {
+          return;
+        }
+        // Focus element will make scrollLeft change which we should reset back
+        if (!rtl) {
+          tabsWrapperRef.current.scrollLeft = 0;
+        }
+        tabsWrapperRef.current.scrollTop = 0;
+      },
+      onBlur: function onBlur() {
+        setFocusKey(undefined);
+      },
+      onMouseDown: function onMouseDown(e) {
+        return handleMouseDown(key, e);
+      },
+      onMouseUp: function onMouseUp() {
+        setIsMouse(false);
+      }
+    });
+  });
+
+  // Update buttons records
+  var updateTabSizes = function updateTabSizes() {
+    return setTabSizes(function () {
+      var _tabListRef$current;
+      var newSizes = new Map();
+      var listRect = (_tabListRef$current = tabListRef.current) === null || _tabListRef$current === void 0 ? void 0 : _tabListRef$current.getBoundingClientRect();
+      tabs.forEach(function (_ref2) {
+        var _tabListRef$current2;
+        var key = _ref2.key;
+        var btnNode = (_tabListRef$current2 = tabListRef.current) === null || _tabListRef$current2 === void 0 ? void 0 : _tabListRef$current2.querySelector("[data-node-key=\"".concat((0, _util.genDataNodeKey)(key), "\"]"));
+        if (btnNode) {
+          var _getTabSize = getTabSize(btnNode, listRect),
+            _getTabSize2 = (0, _slicedToArray2.default)(_getTabSize, 4),
+            width = _getTabSize2[0],
+            height = _getTabSize2[1],
+            left = _getTabSize2[2],
+            top = _getTabSize2[3];
+          newSizes.set(key, {
+            width: width,
+            height: height,
+            left: left,
+            top: top
+          });
+        }
+      });
+      return newSizes;
+    });
+  };
+  (0, _react.useEffect)(function () {
+    updateTabSizes();
+  }, [tabs.map(function (tab) {
+    return tab.key;
+  }).join('_')]);
+  var onListHolderResize = (0, _useUpdate.default)(function () {
+    // Update wrapper records
+    var containerSize = getSize(containerRef);
+    var extraLeftSize = getSize(extraLeftRef);
+    var extraRightSize = getSize(extraRightRef);
+    setContainerExcludeExtraSize([containerSize[0] - extraLeftSize[0] - extraRightSize[0], containerSize[1] - extraLeftSize[1] - extraRightSize[1]]);
+    var newAddSize = getSize(innerAddButtonRef);
+    setAddSize(newAddSize);
+    var newOperationSize = getSize(operationsRef);
+    setOperationSize(newOperationSize);
+
+    // Which includes add button size
+    var tabContentFullSize = getSize(tabListRef);
+    setTabContentSize([tabContentFullSize[0] - newAddSize[0], tabContentFullSize[1] - newAddSize[1]]);
+
+    // Update buttons records
+    updateTabSizes();
+  });
+
+  // ======================== Dropdown =======================
+  var startHiddenTabs = tabs.slice(0, visibleStart);
+  var endHiddenTabs = tabs.slice(visibleEnd + 1);
+  var hiddenTabs = [].concat((0, _toConsumableArray2.default)(startHiddenTabs), (0, _toConsumableArray2.default)(endHiddenTabs));
+
+  // =================== Link & Operations ===================
+  var activeTabOffset = tabOffsets.get(activeKey);
+  var _useIndicator = (0, _useIndicator2.default)({
+      activeTabOffset: activeTabOffset,
+      horizontal: tabPositionTopOrBottom,
+      indicator: indicator,
+      rtl: rtl
+    }),
+    indicatorStyle = _useIndicator.style;
+
+  // ========================= Effect ========================
+  (0, _react.useEffect)(function () {
+    scrollToTab();
+  }, [activeKey, transformMin, transformMax, (0, _util.stringify)(activeTabOffset), (0, _util.stringify)(tabOffsets), tabPositionTopOrBottom]);
+
+  // Should recalculate when rtl changed
+  (0, _react.useEffect)(function () {
+    onListHolderResize();
+    // eslint-disable-next-line
+  }, [rtl]);
+
+  // ========================= Render ========================
+  var hasDropdown = !!hiddenTabs.length;
+  var wrapPrefix = "".concat(prefixCls, "-nav-wrap");
+  var pingLeft;
+  var pingRight;
+  var pingTop;
+  var pingBottom;
+  if (tabPositionTopOrBottom) {
+    if (rtl) {
+      pingRight = transformLeft > 0;
+      pingLeft = transformLeft !== transformMax;
+    } else {
+      pingLeft = transformLeft < 0;
+      pingRight = transformLeft !== transformMin;
+    }
+  } else {
+    pingTop = transformTop < 0;
+    pingBottom = transformTop !== transformMin;
+  }
+  return /*#__PURE__*/React.createElement(_rcResizeObserver.default, {
+    onResize: onListHolderResize
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: (0, _ref3.useComposeRef)(ref, containerRef),
+    role: "tablist",
+    "aria-orientation": tabPositionTopOrBottom ? 'horizontal' : 'vertical',
+    className: (0, _classnames.default)("".concat(prefixCls, "-nav"), className),
+    style: style,
+    onKeyDown: function onKeyDown() {
+      // No need animation when use keyboard
+      doLockAnimation();
+    }
+  }, /*#__PURE__*/React.createElement(_ExtraContent.default, {
+    ref: extraLeftRef,
+    position: "left",
+    extra: extra,
+    prefixCls: prefixCls
+  }), /*#__PURE__*/React.createElement(_rcResizeObserver.default, {
+    onResize: onListHolderResize
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)(wrapPrefix, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(wrapPrefix, "-ping-left"), pingLeft), "".concat(wrapPrefix, "-ping-right"), pingRight), "".concat(wrapPrefix, "-ping-top"), pingTop), "".concat(wrapPrefix, "-ping-bottom"), pingBottom)),
+    ref: tabsWrapperRef
+  }, /*#__PURE__*/React.createElement(_rcResizeObserver.default, {
+    onResize: onListHolderResize
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: tabListRef,
+    className: "".concat(prefixCls, "-nav-list"),
+    style: {
+      transform: "translate(".concat(transformLeft, "px, ").concat(transformTop, "px)"),
+      transition: lockAnimation ? 'none' : undefined
+    }
+  }, tabNodes, /*#__PURE__*/React.createElement(_AddButton.default, {
+    ref: innerAddButtonRef,
+    prefixCls: prefixCls,
+    locale: locale,
+    editable: editable,
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, tabNodes.length === 0 ? undefined : tabNodeStyle), {}, {
+      visibility: hasDropdown ? 'hidden' : null
+    })
+  }), /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)("".concat(prefixCls, "-ink-bar"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-ink-bar-animated"), animated.inkBar)),
+    style: indicatorStyle
+  }))))), /*#__PURE__*/React.createElement(_OperationNode.default, (0, _extends2.default)({}, props, {
+    removeAriaLabel: locale === null || locale === void 0 ? void 0 : locale.removeAriaLabel,
+    ref: operationsRef,
+    prefixCls: prefixCls,
+    tabs: hiddenTabs,
+    className: !hasDropdown && operationsHiddenClassName,
+    tabMoving: !!lockAnimation
+  })), /*#__PURE__*/React.createElement(_ExtraContent.default, {
+    ref: extraRightRef,
+    position: "right",
+    extra: extra,
+    prefixCls: prefixCls
+  })));
+  /* eslint-enable */
+});
+var _default = exports.default = TabNavList;
--- a/frontend/node_modules/rc-tabs/lib/TabPanelList/TabPane.d.ts
+++ b/frontend/node_modules/rc-tabs/lib/TabPanelList/TabPane.d.ts
@@ -0,0 +1,20 @@
+import * as React from 'react';
+export interface TabPaneProps {
+    tab?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+    children?: React.ReactNode;
+    forceRender?: boolean;
+    closable?: boolean;
+    closeIcon?: React.ReactNode;
+    icon?: React.ReactNode;
+    prefixCls?: string;
+    tabKey?: string;
+    id?: string;
+    animated?: boolean;
+    active?: boolean;
+    destroyInactiveTabPane?: boolean;
+}
+declare const TabPane: React.ForwardRefExoticComponent<TabPaneProps & React.RefAttributes<HTMLDivElement>>;
+export default TabPane;
--- a/frontend/node_modules/rc-tabs/lib/TabPanelList/TabPane.js
+++ b/frontend/node_modules/rc-tabs/lib/TabPanelList/TabPane.js
@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var TabPane = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var prefixCls = props.prefixCls,
+    className = props.className,
+    style = props.style,
+    id = props.id,
+    active = props.active,
+    tabKey = props.tabKey,
+    children = props.children;
+  return /*#__PURE__*/React.createElement("div", {
+    id: id && "".concat(id, "-panel-").concat(tabKey),
+    role: "tabpanel",
+    tabIndex: active ? 0 : -1,
+    "aria-labelledby": id && "".concat(id, "-tab-").concat(tabKey),
+    "aria-hidden": !active,
+    style: style,
+    className: (0, _classnames.default)(prefixCls, active && "".concat(prefixCls, "-active"), className),
+    ref: ref
+  }, children);
+});
+if (process.env.NODE_ENV !== 'production') {
+  TabPane.displayName = 'TabPane';
+}
+var _default = exports.default = TabPane;
--- a/frontend/node_modules/rc-tabs/lib/TabPanelList/index.d.ts
+++ b/frontend/node_modules/rc-tabs/lib/TabPanelList/index.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { AnimatedConfig, TabPosition } from '../interface';
+export interface TabPanelListProps {
+    activeKey: string;
+    id: string;
+    animated?: AnimatedConfig;
+    tabPosition?: TabPosition;
+    destroyInactiveTabPane?: boolean;
+}
+declare const TabPanelList: React.FC<TabPanelListProps>;
+export default TabPanelList;
--- a/frontend/node_modules/rc-tabs/lib/TabPanelList/index.js
+++ b/frontend/node_modules/rc-tabs/lib/TabPanelList/index.js
@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _rcMotion = _interopRequireDefault(require("rc-motion"));
+var React = _interopRequireWildcard(require("react"));
+var _TabContext = _interopRequireDefault(require("../TabContext"));
+var _TabPane = _interopRequireDefault(require("./TabPane"));
+var _excluded = ["key", "forceRender", "style", "className", "destroyInactiveTabPane"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var TabPanelList = function TabPanelList(props) {
+  var id = props.id,
+    activeKey = props.activeKey,
+    animated = props.animated,
+    tabPosition = props.tabPosition,
+    destroyInactiveTabPane = props.destroyInactiveTabPane;
+  var _React$useContext = React.useContext(_TabContext.default),
+    prefixCls = _React$useContext.prefixCls,
+    tabs = _React$useContext.tabs;
+  var tabPaneAnimated = animated.tabPane;
+  var tabPanePrefixCls = "".concat(prefixCls, "-tabpane");
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)("".concat(prefixCls, "-content-holder"))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)("".concat(prefixCls, "-content"), "".concat(prefixCls, "-content-").concat(tabPosition), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-content-animated"), tabPaneAnimated))
+  }, tabs.map(function (item) {
+    var key = item.key,
+      forceRender = item.forceRender,
+      paneStyle = item.style,
+      paneClassName = item.className,
+      itemDestroyInactiveTabPane = item.destroyInactiveTabPane,
+      restTabProps = (0, _objectWithoutProperties2.default)(item, _excluded);
+    var active = key === activeKey;
+    return /*#__PURE__*/React.createElement(_rcMotion.default, (0, _extends2.default)({
+      key: key,
+      visible: active,
+      forceRender: forceRender,
+      removeOnLeave: !!(destroyInactiveTabPane || itemDestroyInactiveTabPane),
+      leavedClassName: "".concat(tabPanePrefixCls, "-hidden")
+    }, animated.tabPaneMotion), function (_ref, ref) {
+      var motionStyle = _ref.style,
+        motionClassName = _ref.className;
+      return /*#__PURE__*/React.createElement(_TabPane.default, (0, _extends2.default)({}, restTabProps, {
+        prefixCls: tabPanePrefixCls,
+        id: id,
+        tabKey: key,
+        animated: tabPaneAnimated,
+        active: active,
+        style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, paneStyle), motionStyle),
+        className: (0, _classnames.default)(paneClassName, motionClassName),
+        ref: ref
+      }));
+    });
+  })));
+};
+var _default = exports.default = TabPanelList;
--- a/frontend/node_modules/rc-tabs/lib/Tabs.d.ts
+++ b/frontend/node_modules/rc-tabs/lib/Tabs.d.ts
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import type { GetIndicatorSize } from './hooks/useIndicator';
+import type { AnimatedConfig, EditableConfig, MoreProps, OnTabScroll, RenderTabBar, Tab, TabBarExtraContent, TabPosition, TabsLocale } from './interface';
+export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
+    prefixCls?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    id?: string;
+    items?: Tab[];
+    activeKey?: string;
+    defaultActiveKey?: string;
+    direction?: 'ltr' | 'rtl';
+    animated?: boolean | AnimatedConfig;
+    renderTabBar?: RenderTabBar;
+    tabBarExtraContent?: TabBarExtraContent;
+    tabBarGutter?: number;
+    tabBarStyle?: React.CSSProperties;
+    tabPosition?: TabPosition;
+    destroyInactiveTabPane?: boolean;
+    onChange?: (activeKey: string) => void;
+    onTabClick?: (activeKey: string, e: React.KeyboardEvent | React.MouseEvent) => void;
+    onTabScroll?: OnTabScroll;
+    editable?: EditableConfig;
+    getPopupContainer?: (node: HTMLElement) => HTMLElement;
+    locale?: TabsLocale;
+    more?: MoreProps;
+    /** @private Internal usage. Not promise will rename in future */
+    popupClassName?: string;
+    indicator?: {
+        size?: GetIndicatorSize;
+        align?: 'start' | 'center' | 'end';
+    };
+}
+declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+export default Tabs;
--- a/frontend/node_modules/rc-tabs/lib/Tabs.js
+++ b/frontend/node_modules/rc-tabs/lib/Tabs.js
@@ -0,0 +1,188 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _useMergedState5 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
+var _isMobile = _interopRequireDefault(require("rc-util/lib/isMobile"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _TabContext = _interopRequireDefault(require("./TabContext"));
+var _Wrapper = _interopRequireDefault(require("./TabNavList/Wrapper"));
+var _TabPanelList = _interopRequireDefault(require("./TabPanelList"));
+var _useAnimateConfig = _interopRequireDefault(require("./hooks/useAnimateConfig"));
+var _excluded = ["id", "prefixCls", "className", "items", "direction", "activeKey", "defaultActiveKey", "editable", "animated", "tabPosition", "tabBarGutter", "tabBarStyle", "tabBarExtraContent", "locale", "more", "destroyInactiveTabPane", "renderTabBar", "onChange", "onTabClick", "onTabScroll", "getPopupContainer", "popupClassName", "indicator"]; // Accessibility https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * Should added antd:
+ * - type
+ *
+ * Removed:
+ * - onNextClick
+ * - onPrevClick
+ * - keyboard
+ */
+
+// Used for accessibility
+var uuid = 0;
+var Tabs = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var id = props.id,
+    _props$prefixCls = props.prefixCls,
+    prefixCls = _props$prefixCls === void 0 ? 'rc-tabs' : _props$prefixCls,
+    className = props.className,
+    items = props.items,
+    direction = props.direction,
+    activeKey = props.activeKey,
+    defaultActiveKey = props.defaultActiveKey,
+    editable = props.editable,
+    animated = props.animated,
+    _props$tabPosition = props.tabPosition,
+    tabPosition = _props$tabPosition === void 0 ? 'top' : _props$tabPosition,
+    tabBarGutter = props.tabBarGutter,
+    tabBarStyle = props.tabBarStyle,
+    tabBarExtraContent = props.tabBarExtraContent,
+    locale = props.locale,
+    more = props.more,
+    destroyInactiveTabPane = props.destroyInactiveTabPane,
+    renderTabBar = props.renderTabBar,
+    onChange = props.onChange,
+    onTabClick = props.onTabClick,
+    onTabScroll = props.onTabScroll,
+    getPopupContainer = props.getPopupContainer,
+    popupClassName = props.popupClassName,
+    indicator = props.indicator,
+    restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var tabs = React.useMemo(function () {
+    return (items || []).filter(function (item) {
+      return item && (0, _typeof2.default)(item) === 'object' && 'key' in item;
+    });
+  }, [items]);
+  var rtl = direction === 'rtl';
+  var mergedAnimated = (0, _useAnimateConfig.default)(animated);
+
+  // ======================== Mobile ========================
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    mobile = _useState2[0],
+    setMobile = _useState2[1];
+  (0, _react.useEffect)(function () {
+    // Only update on the client side
+    setMobile((0, _isMobile.default)());
+  }, []);
+
+  // ====================== Active Key ======================
+  var _useMergedState = (0, _useMergedState5.default)(function () {
+      var _tabs$;
+      return (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.key;
+    }, {
+      value: activeKey,
+      defaultValue: defaultActiveKey
+    }),
+    _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
+    mergedActiveKey = _useMergedState2[0],
+    setMergedActiveKey = _useMergedState2[1];
+  var _useState3 = (0, _react.useState)(function () {
+      return tabs.findIndex(function (tab) {
+        return tab.key === mergedActiveKey;
+      });
+    }),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    activeIndex = _useState4[0],
+    setActiveIndex = _useState4[1];
+
+  // Reset active key if not exist anymore
+  (0, _react.useEffect)(function () {
+    var newActiveIndex = tabs.findIndex(function (tab) {
+      return tab.key === mergedActiveKey;
+    });
+    if (newActiveIndex === -1) {
+      var _tabs$newActiveIndex;
+      newActiveIndex = Math.max(0, Math.min(activeIndex, tabs.length - 1));
+      setMergedActiveKey((_tabs$newActiveIndex = tabs[newActiveIndex]) === null || _tabs$newActiveIndex === void 0 ? void 0 : _tabs$newActiveIndex.key);
+    }
+    setActiveIndex(newActiveIndex);
+  }, [tabs.map(function (tab) {
+    return tab.key;
+  }).join('_'), mergedActiveKey, activeIndex]);
+
+  // ===================== Accessibility ====================
+  var _useMergedState3 = (0, _useMergedState5.default)(null, {
+      value: id
+    }),
+    _useMergedState4 = (0, _slicedToArray2.default)(_useMergedState3, 2),
+    mergedId = _useMergedState4[0],
+    setMergedId = _useMergedState4[1];
+
+  // Async generate id to avoid ssr mapping failed
+  (0, _react.useEffect)(function () {
+    if (!id) {
+      setMergedId("rc-tabs-".concat(process.env.NODE_ENV === 'test' ? 'test' : uuid));
+      uuid += 1;
+    }
+  }, []);
+
+  // ======================== Events ========================
+  function onInternalTabClick(key, e) {
+    onTabClick === null || onTabClick === void 0 || onTabClick(key, e);
+    var isActiveChanged = key !== mergedActiveKey;
+    setMergedActiveKey(key);
+    if (isActiveChanged) {
+      onChange === null || onChange === void 0 || onChange(key);
+    }
+  }
+
+  // ======================== Render ========================
+  var sharedProps = {
+    id: mergedId,
+    activeKey: mergedActiveKey,
+    animated: mergedAnimated,
+    tabPosition: tabPosition,
+    rtl: rtl,
+    mobile: mobile
+  };
+  var tabNavBarProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, sharedProps), {}, {
+    editable: editable,
+    locale: locale,
+    more: more,
+    tabBarGutter: tabBarGutter,
+    onTabClick: onInternalTabClick,
+    onTabScroll: onTabScroll,
+    extra: tabBarExtraContent,
+    style: tabBarStyle,
+    panes: null,
+    getPopupContainer: getPopupContainer,
+    popupClassName: popupClassName,
+    indicator: indicator
+  });
+  return /*#__PURE__*/React.createElement(_TabContext.default.Provider, {
+    value: {
+      tabs: tabs,
+      prefixCls: prefixCls
+    }
+  }, /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
+    ref: ref,
+    id: id,
+    className: (0, _classnames.default)(prefixCls, "".concat(prefixCls, "-").concat(tabPosition), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-mobile"), mobile), "".concat(prefixCls, "-editable"), editable), "".concat(prefixCls, "-rtl"), rtl), className)
+  }, restProps), /*#__PURE__*/React.createElement(_Wrapper.default, (0, _extends2.default)({}, tabNavBarProps, {
+    renderTabBar: renderTabBar
+  })), /*#__PURE__*/React.createElement(_TabPanelList.default, (0, _extends2.default)({
+    destroyInactiveTabPane: destroyInactiveTabPane
+  }, sharedProps, {
+    animated: mergedAnimated
+  }))));
+});
+if (process.env.NODE_ENV !== 'production') {
+  Tabs.displayName = 'Tabs';
+}
+var _default = exports.default = Tabs;
--- a/frontend/node_modules/rc-tabs/lib/hooks/useAnimateConfig.d.ts
+++ b/frontend/node_modules/rc-tabs/lib/hooks/useAnimateConfig.d.ts
@@ -0,0 +1,3 @@
+import type { TabsProps } from '..';
+import type { AnimatedConfig } from '../interface';
+export default function useAnimateConfig(animated?: TabsProps['animated']): AnimatedConfig;
--- a/frontend/node_modules/rc-tabs/lib/hooks/useAnimateConfig.js
+++ b/frontend/node_modules/rc-tabs/lib/hooks/useAnimateConfig.js
@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useAnimateConfig;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
+function useAnimateConfig() {
+  var animated = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+    inkBar: true,
+    tabPane: false
+  };
+  var mergedAnimated;
+  if (animated === false) {
+    mergedAnimated = {
+      inkBar: false,
+      tabPane: false
+    };
+  } else if (animated === true) {
+    mergedAnimated = {
+      inkBar: true,
+      tabPane: false
+    };
+  } else {
+    mergedAnimated = (0, _objectSpread2.default)({
+      inkBar: true
+    }, (0, _typeof2.default)(animated) === 'object' ? animated : {});
+  }
+
+  // Enable tabPane animation if provide motion
+  if (mergedAnimated.tabPaneMotion && mergedAnimated.tabPane === undefined) {
+    mergedAnimated.tabPane = true;
+  }
+  if (!mergedAnimated.tabPaneMotion && mergedAnimated.tabPane) {
+    if (process.env.NODE_ENV !== 'production') {
+      (0, _warning.default)(false, '`animated.tabPane` is true but `animated.tabPaneMotion` is not provided. Motion will not work.');
+    }
+    mergedAnimated.tabPane = false;
+  }
+  return mergedAnimated;
+}
--- a/frontend/node_modules/rc-tabs/lib/hooks/useIndicator.d.ts
+++ b/frontend/node_modules/rc-tabs/lib/hooks/useIndicator.d.ts
@@ -0,0 +1,16 @@
+import React from 'react';
+import type { TabOffset } from '../interface';
+export type GetIndicatorSize = number | ((origin: number) => number);
+interface UseIndicatorOptions {
+    activeTabOffset: TabOffset;
+    horizontal: boolean;
+    rtl: boolean;
+    indicator?: {
+        size?: GetIndicatorSize;
+        align?: 'start' | 'center' | 'end';
+    };
+}
+declare const useIndicator: (options: UseIndicatorOptions) => {
+    style: React.CSSProperties;
+};
+export default useIndicator;
--- a/frontend/node_modules/rc-tabs/lib/hooks/useIndicator.js
+++ b/frontend/node_modules/rc-tabs/lib/hooks/useIndicator.js
@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _raf = _interopRequireDefault(require("rc-util/lib/raf"));
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var useIndicator = function useIndicator(options) {
+  var activeTabOffset = options.activeTabOffset,
+    horizontal = options.horizontal,
+    rtl = options.rtl,
+    _options$indicator = options.indicator,
+    indicator = _options$indicator === void 0 ? {} : _options$indicator;
+  var size = indicator.size,
+    _indicator$align = indicator.align,
+    align = _indicator$align === void 0 ? 'center' : _indicator$align;
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    inkStyle = _useState2[0],
+    setInkStyle = _useState2[1];
+  var inkBarRafRef = (0, _react.useRef)();
+  var getLength = _react.default.useCallback(function (origin) {
+    if (typeof size === 'function') {
+      return size(origin);
+    }
+    if (typeof size === 'number') {
+      return size;
+    }
+    return origin;
+  }, [size]);
+
+  // Delay set ink style to avoid remove tab blink
+  function cleanInkBarRaf() {
+    _raf.default.cancel(inkBarRafRef.current);
+  }
+  (0, _react.useEffect)(function () {
+    var newInkStyle = {};
+    if (activeTabOffset) {
+      if (horizontal) {
+        newInkStyle.width = getLength(activeTabOffset.width);
+        var key = rtl ? 'right' : 'left';
+        if (align === 'start') {
+          newInkStyle[key] = activeTabOffset[key];
+        }
+        if (align === 'center') {
+          newInkStyle[key] = activeTabOffset[key] + activeTabOffset.width / 2;
+          newInkStyle.transform = rtl ? 'translateX(50%)' : 'translateX(-50%)';
+        }
+        if (align === 'end') {
+          newInkStyle[key] = activeTabOffset[key] + activeTabOffset.width;
+          newInkStyle.transform = 'translateX(-100%)';
+        }
+      } else {
+        newInkStyle.height = getLength(activeTabOffset.height);
+        if (align === 'start') {
+          newInkStyle.top = activeTabOffset.top;
+        }
+        if (align === 'center') {
+          newInkStyle.top = activeTabOffset.top + activeTabOffset.height / 2;
+          newInkStyle.transform = 'translateY(-50%)';
+        }
+        if (align === 'end') {
+          newInkStyle.top = activeTabOffset.top + activeTabOffset.height;
+          newInkStyle.transform = 'translateY(-100%)';
+        }
+      }
+    }
+    cleanInkBarRaf();
+    inkBarRafRef.current = (0, _raf.default)(function () {
+      // Avoid jitter caused by tiny numerical differences
+      // fix https://github.com/ant-design/ant-design/issues/53378
+      var isEqual = inkStyle && newInkStyle && Object.keys(newInkStyle).every(function (key) {
+        var newValue = newInkStyle[key];
+        var oldValue = inkStyle[key];
+        return typeof newValue === 'number' && typeof oldValue === 'number' ? Math.round(newValue) === Math.round(oldValue) : newValue === oldValue;
+      });
+      if (!isEqual) {
+        setInkStyle(newInkStyle);
+      }
+    });
+    return cleanInkBarRaf;
+  }, [JSON.stringify(activeTabOffset), horizontal, rtl, align, getLength]);
+  return {
+    style: inkStyle
+  };
+};
+var _default = exports.default = useIndicator;
--- a/frontend/node_modules/rc-tabs/lib/hooks/useOffsets.d.ts
+++ b/frontend/node_modules/rc-tabs/lib/hooks/useOffsets.d.ts
@@ -0,0 +1,2 @@
+import type { Tab, TabOffsetMap, TabSizeMap } from '../interface';
+export default function useOffsets(tabs: Tab[], tabSizes: TabSizeMap, holderScrollWidth: number): TabOffsetMap;
--- a/frontend/node_modules/rc-tabs/lib/hooks/useOffsets.js
+++ b/frontend/node_modules/rc-tabs/lib/hooks/useOffsets.js
@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useOffsets;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _react = require("react");
+var DEFAULT_SIZE = {
+  width: 0,
+  height: 0,
+  left: 0,
+  top: 0
+};
+function useOffsets(tabs, tabSizes, holderScrollWidth) {
+  return (0, _react.useMemo)(function () {
+    var _tabs$;
+    var map = new Map();
+    var lastOffset = tabSizes.get((_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.key) || DEFAULT_SIZE;
+    var rightOffset = lastOffset.left + lastOffset.width;
+    for (var i = 0; i < tabs.length; i += 1) {
+      var key = tabs[i].key;
+      var data = tabSizes.get(key);
+
+      // Reuse last one when not exist yet
+      if (!data) {
+        var _tabs;
+        data = tabSizes.get((_tabs = tabs[i - 1]) === null || _tabs === void 0 ? void 0 : _tabs.key) || DEFAULT_SIZE;
+      }
+      var entity = map.get(key) || (0, _objectSpread2.default)({}, data);
+
+      // Right
+      entity.right = rightOffset - entity.left - entity.width;
+
+      // Update entity
+      map.set(key, entity);
+    }
+    return map;
+  }, [tabs.map(function (tab) {
+    return tab.key;
+  }).join('_'), tabSizes, holderScrollWidth]);
+}
--- a/frontend/node_modules/rc-tabs/lib/hooks/useSyncState.d.ts
+++ b/frontend/node_modules/rc-tabs/lib/hooks/useSyncState.d.ts
@@ -0,0 +1,3 @@
+type Updater<T> = (prev: T) => T;
+export default function useSyncState<T>(defaultState: T, onChange: (newValue: T, prevValue: T) => void): [T, (updater: T | Updater<T>) => void];
+export {};
--- a/frontend/node_modules/rc-tabs/lib/hooks/useSyncState.js
+++ b/frontend/node_modules/rc-tabs/lib/hooks/useSyncState.js
@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useSyncState;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function useSyncState(defaultState, onChange) {
+  var stateRef = React.useRef(defaultState);
+  var _React$useState = React.useState({}),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    forceUpdate = _React$useState2[1];
+  function setState(updater) {
+    var newValue = typeof updater === 'function' ? updater(stateRef.current) : updater;
+    if (newValue !== stateRef.current) {
+      onChange(newValue, stateRef.current);
+    }
+    stateRef.current = newValue;
+    forceUpdate({});
+  }
+  return [stateRef.current, setState];
+}
--- a/frontend/node_modules/rc-tabs/lib/hooks/useTouchMove.d.ts
+++ b/frontend/node_modules/rc-tabs/lib/hooks/useTouchMove.d.ts
@@ -0,0 +1,2 @@
+import * as React from 'react';
+export default function useTouchMove(ref: React.RefObject<HTMLDivElement>, onOffset: (offsetX: number, offsetY: number) => boolean): void;
--- a/frontend/node_modules/rc-tabs/lib/hooks/useTouchMove.js
+++ b/frontend/node_modules/rc-tabs/lib/hooks/useTouchMove.js
@@ -0,0 +1,165 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useTouchMove;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var MIN_SWIPE_DISTANCE = 0.1;
+var STOP_SWIPE_DISTANCE = 0.01;
+var REFRESH_INTERVAL = 20;
+var SPEED_OFF_MULTIPLE = Math.pow(0.995, REFRESH_INTERVAL);
+
+// ================================= Hook =================================
+function useTouchMove(ref, onOffset) {
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    touchPosition = _useState2[0],
+    setTouchPosition = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    lastTimestamp = _useState4[0],
+    setLastTimestamp = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    lastTimeDiff = _useState6[0],
+    setLastTimeDiff = _useState6[1];
+  var _useState7 = (0, _react.useState)(),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    lastOffset = _useState8[0],
+    setLastOffset = _useState8[1];
+  var motionRef = (0, _react.useRef)();
+
+  // ========================= Events =========================
+  // >>> Touch events
+  function onTouchStart(e) {
+    var _e$touches$ = e.touches[0],
+      screenX = _e$touches$.screenX,
+      screenY = _e$touches$.screenY;
+    setTouchPosition({
+      x: screenX,
+      y: screenY
+    });
+    window.clearInterval(motionRef.current);
+  }
+  function onTouchMove(e) {
+    if (!touchPosition) return;
+
+    // e.preventDefault();
+    var _e$touches$2 = e.touches[0],
+      screenX = _e$touches$2.screenX,
+      screenY = _e$touches$2.screenY;
+    setTouchPosition({
+      x: screenX,
+      y: screenY
+    });
+    var offsetX = screenX - touchPosition.x;
+    var offsetY = screenY - touchPosition.y;
+    onOffset(offsetX, offsetY);
+    var now = Date.now();
+    setLastTimestamp(now);
+    setLastTimeDiff(now - lastTimestamp);
+    setLastOffset({
+      x: offsetX,
+      y: offsetY
+    });
+  }
+  function onTouchEnd() {
+    if (!touchPosition) return;
+    setTouchPosition(null);
+    setLastOffset(null);
+
+    // Swipe if needed
+    if (lastOffset) {
+      var distanceX = lastOffset.x / lastTimeDiff;
+      var distanceY = lastOffset.y / lastTimeDiff;
+      var absX = Math.abs(distanceX);
+      var absY = Math.abs(distanceY);
+
+      // Skip swipe if low distance
+      if (Math.max(absX, absY) < MIN_SWIPE_DISTANCE) return;
+      var currentX = distanceX;
+      var currentY = distanceY;
+      motionRef.current = window.setInterval(function () {
+        if (Math.abs(currentX) < STOP_SWIPE_DISTANCE && Math.abs(currentY) < STOP_SWIPE_DISTANCE) {
+          window.clearInterval(motionRef.current);
+          return;
+        }
+        currentX *= SPEED_OFF_MULTIPLE;
+        currentY *= SPEED_OFF_MULTIPLE;
+        onOffset(currentX * REFRESH_INTERVAL, currentY * REFRESH_INTERVAL);
+      }, REFRESH_INTERVAL);
+    }
+  }
+
+  // >>> Wheel event
+  var lastWheelDirectionRef = (0, _react.useRef)();
+  function onWheel(e) {
+    var deltaX = e.deltaX,
+      deltaY = e.deltaY;
+
+    // Convert both to x & y since wheel only happened on PC
+    var mixed = 0;
+    var absX = Math.abs(deltaX);
+    var absY = Math.abs(deltaY);
+    if (absX === absY) {
+      mixed = lastWheelDirectionRef.current === 'x' ? deltaX : deltaY;
+    } else if (absX > absY) {
+      mixed = deltaX;
+      lastWheelDirectionRef.current = 'x';
+    } else {
+      mixed = deltaY;
+      lastWheelDirectionRef.current = 'y';
+    }
+    if (onOffset(-mixed, -mixed)) {
+      e.preventDefault();
+    }
+  }
+
+  // ========================= Effect =========================
+  var touchEventsRef = (0, _react.useRef)(null);
+  touchEventsRef.current = {
+    onTouchStart: onTouchStart,
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd,
+    onWheel: onWheel
+  };
+  React.useEffect(function () {
+    function onProxyTouchStart(e) {
+      touchEventsRef.current.onTouchStart(e);
+    }
+    function onProxyTouchMove(e) {
+      touchEventsRef.current.onTouchMove(e);
+    }
+    function onProxyTouchEnd(e) {
+      touchEventsRef.current.onTouchEnd(e);
+    }
+    function onProxyWheel(e) {
+      touchEventsRef.current.onWheel(e);
+    }
+    document.addEventListener('touchmove', onProxyTouchMove, {
+      passive: false
+    });
+    document.addEventListener('touchend', onProxyTouchEnd, {
+      passive: true
+    });
+
+    // No need to clean up since element removed
+    ref.current.addEventListener('touchstart', onProxyTouchStart, {
+      passive: true
+    });
+    ref.current.addEventListener('wheel', onProxyWheel, {
+      passive: false
+    });
+    return function () {
+      document.removeEventListener('touchmove', onProxyTouchMove);
+      document.removeEventListener('touchend', onProxyTouchEnd);
+    };
+  }, []);
+}
--- a/frontend/node_modules/rc-tabs/lib/hooks/useUpdate.d.ts
+++ b/frontend/node_modules/rc-tabs/lib/hooks/useUpdate.d.ts
@@ -0,0 +1,8 @@
+/**
+ * Help to merge callback with `useLayoutEffect`.
+ * One time will only trigger once.
+ */
+export default function useUpdate(callback: VoidFunction): () => void;
+type Callback<T> = (ori: T) => T;
+export declare function useUpdateState<T>(defaultState: T | (() => T)): [T, (updater: Callback<T>) => void];
+export {};
--- a/frontend/node_modules/rc-tabs/lib/hooks/useUpdate.js
+++ b/frontend/node_modules/rc-tabs/lib/hooks/useUpdate.js
@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useUpdate;
+exports.useUpdateState = useUpdateState;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _useLayoutEffect = require("rc-util/lib/hooks/useLayoutEffect");
+var _react = require("react");
+/**
+ * Help to merge callback with `useLayoutEffect`.
+ * One time will only trigger once.
+ */
+function useUpdate(callback) {
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    count = _useState2[0],
+    setCount = _useState2[1];
+  var effectRef = (0, _react.useRef)(0);
+  var callbackRef = (0, _react.useRef)();
+  callbackRef.current = callback;
+
+  // Trigger on `useLayoutEffect`
+  (0, _useLayoutEffect.useLayoutUpdateEffect)(function () {
+    var _callbackRef$current;
+    (_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 || _callbackRef$current.call(callbackRef);
+  }, [count]);
+
+  // Trigger to update count
+  return function () {
+    if (effectRef.current !== count) {
+      return;
+    }
+    effectRef.current += 1;
+    setCount(effectRef.current);
+  };
+}
+function useUpdateState(defaultState) {
+  var batchRef = (0, _react.useRef)([]);
+  var _useState3 = (0, _react.useState)({}),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    forceUpdate = _useState4[1];
+  var state = (0, _react.useRef)(typeof defaultState === 'function' ? defaultState() : defaultState);
+  var flushUpdate = useUpdate(function () {
+    var current = state.current;
+    batchRef.current.forEach(function (callback) {
+      current = callback(current);
+    });
+    batchRef.current = [];
+    state.current = current;
+    forceUpdate({});
+  });
+  function updater(callback) {
+    batchRef.current.push(callback);
+    flushUpdate();
+  }
+  return [state.current, updater];
+}
--- a/frontend/node_modules/rc-tabs/lib/hooks/useVisibleRange.d.ts
+++ b/frontend/node_modules/rc-tabs/lib/hooks/useVisibleRange.d.ts
@@ -0,0 +1,6 @@
+import type { Tab, TabOffsetMap } from '../interface';
+import type { TabNavListProps } from '../TabNavList';
+export type ContainerSizeInfo = [width: number, height: number, left: number, top: number];
+export default function useVisibleRange(tabOffsets: TabOffsetMap, visibleTabContentValue: number, transform: number, tabContentSizeValue: number, addNodeSizeValue: number, operationNodeSizeValue: number, { tabs, tabPosition, rtl }: {
+    tabs: Tab[];
+} & TabNavListProps): [visibleStart: number, visibleEnd: number];
--- a/frontend/node_modules/rc-tabs/lib/hooks/useVisibleRange.js
+++ b/frontend/node_modules/rc-tabs/lib/hooks/useVisibleRange.js
@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useVisibleRange;
+var _react = require("react");
+var DEFAULT_SIZE = {
+  width: 0,
+  height: 0,
+  left: 0,
+  top: 0,
+  right: 0
+};
+function useVisibleRange(tabOffsets, visibleTabContentValue, transform, tabContentSizeValue, addNodeSizeValue, operationNodeSizeValue, _ref) {
+  var tabs = _ref.tabs,
+    tabPosition = _ref.tabPosition,
+    rtl = _ref.rtl;
+  var charUnit;
+  var position;
+  var transformSize;
+  if (['top', 'bottom'].includes(tabPosition)) {
+    charUnit = 'width';
+    position = rtl ? 'right' : 'left';
+    transformSize = Math.abs(transform);
+  } else {
+    charUnit = 'height';
+    position = 'top';
+    transformSize = -transform;
+  }
+  return (0, _react.useMemo)(function () {
+    if (!tabs.length) {
+      return [0, 0];
+    }
+    var len = tabs.length;
+    var endIndex = len;
+    for (var i = 0; i < len; i += 1) {
+      var offset = tabOffsets.get(tabs[i].key) || DEFAULT_SIZE;
+      if (Math.floor(offset[position] + offset[charUnit]) > Math.floor(transformSize + visibleTabContentValue)) {
+        endIndex = i - 1;
+        break;
+      }
+    }
+    var startIndex = 0;
+    for (var _i = len - 1; _i >= 0; _i -= 1) {
+      var _offset = tabOffsets.get(tabs[_i].key) || DEFAULT_SIZE;
+      if (_offset[position] < transformSize) {
+        startIndex = _i + 1;
+        break;
+      }
+    }
+    return startIndex > endIndex ? [0, -1] : [startIndex, endIndex];
+  }, [tabOffsets, visibleTabContentValue, tabContentSizeValue, addNodeSizeValue, operationNodeSizeValue, transformSize, tabPosition, tabs.map(function (tab) {
+    return tab.key;
+  }).join('_'), rtl]);
+}
--- a/frontend/node_modules/rc-tabs/lib/index.d.ts
+++ b/frontend/node_modules/rc-tabs/lib/index.d.ts
@@ -0,0 +1,4 @@
+import type { TabsProps } from './Tabs';
+import Tabs from './Tabs';
+export type { TabsProps };
+export default Tabs;
--- a/frontend/node_modules/rc-tabs/lib/index.js
+++ b/frontend/node_modules/rc-tabs/lib/index.js
@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Tabs = _interopRequireDefault(require("./Tabs"));
+var _default = exports.default = _Tabs.default;
--- a/frontend/node_modules/rc-tabs/lib/interface.d.ts
+++ b/frontend/node_modules/rc-tabs/lib/interface.d.ts
@@ -0,0 +1,77 @@
+import type { CSSMotionProps } from 'rc-motion';
+import type React from 'react';
+import type { TabNavListProps } from './TabNavList';
+import type { TabPaneProps } from './TabPanelList/TabPane';
+import type { DropdownProps } from 'rc-dropdown/lib/Dropdown';
+export type TriggerProps = {
+    trigger?: 'hover' | 'click';
+};
+export type moreIcon = React.ReactNode;
+export type MoreProps = {
+    icon?: moreIcon;
+} & Omit<DropdownProps, 'children'>;
+export type SizeInfo = [width: number, height: number];
+export type TabSizeMap = Map<React.Key, {
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+}>;
+export interface TabOffset {
+    width: number;
+    height: number;
+    left: number;
+    right: number;
+    top: number;
+}
+export type TabOffsetMap = Map<React.Key, TabOffset>;
+export type TabPosition = 'left' | 'right' | 'top' | 'bottom';
+export interface Tab extends Omit<TabPaneProps, 'tab'> {
+    key: string;
+    label: React.ReactNode;
+}
+type RenderTabBarProps = {
+    id: string;
+    activeKey: string;
+    animated: AnimatedConfig;
+    tabPosition: TabPosition;
+    rtl: boolean;
+    mobile: boolean;
+    editable: EditableConfig;
+    locale: TabsLocale;
+    more: MoreProps;
+    tabBarGutter: number;
+    onTabClick: (key: string, e: React.MouseEvent | React.KeyboardEvent) => void;
+    onTabScroll: OnTabScroll;
+    extra: TabBarExtraContent;
+    style: React.CSSProperties;
+    /** @deprecated It do not pass real TabPane node. Only for compatible usage.  */
+    panes: React.ReactNode;
+};
+export type RenderTabBar = (props: RenderTabBarProps, DefaultTabBar: React.ComponentType<TabNavListProps>) => React.ReactElement;
+export interface TabsLocale {
+    dropdownAriaLabel?: string;
+    removeAriaLabel?: string;
+    addAriaLabel?: string;
+}
+export interface EditableConfig {
+    onEdit: (type: 'add' | 'remove', info: {
+        key?: string;
+        event: React.MouseEvent | React.KeyboardEvent;
+    }) => void;
+    showAdd?: boolean;
+    removeIcon?: React.ReactNode;
+    addIcon?: React.ReactNode;
+}
+export interface AnimatedConfig {
+    inkBar?: boolean;
+    tabPane?: boolean;
+    tabPaneMotion?: CSSMotionProps;
+}
+export type OnTabScroll = (info: {
+    direction: 'left' | 'right' | 'top' | 'bottom';
+}) => void;
+export type TabBarExtraPosition = 'left' | 'right';
+export type TabBarExtraMap = Partial<Record<TabBarExtraPosition, React.ReactNode>>;
+export type TabBarExtraContent = React.ReactNode | TabBarExtraMap;
+export {};
--- a/frontend/node_modules/rc-tabs/lib/interface.js
+++ b/frontend/node_modules/rc-tabs/lib/interface.js
@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
--- a/frontend/node_modules/rc-tabs/lib/util.d.ts
+++ b/frontend/node_modules/rc-tabs/lib/util.d.ts
@@ -0,0 +1,10 @@
+import type React from 'react';
+import type { ReactNode } from 'react';
+import type { EditableConfig } from './interface';
+/**
+ * We trade Map as deps which may change with same value but different ref object.
+ * We should make it as hash for deps
+ * */
+export declare function stringify<K extends PropertyKey, V>(obj: Record<K, V> | Map<K, V>): string;
+export declare function genDataNodeKey(key: React.Key): string;
+export declare function getRemovable(closable?: boolean, closeIcon?: ReactNode, editable?: EditableConfig, disabled?: boolean): boolean;
--- a/frontend/node_modules/rc-tabs/lib/util.js
+++ b/frontend/node_modules/rc-tabs/lib/util.js
@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.genDataNodeKey = genDataNodeKey;
+exports.getRemovable = getRemovable;
+exports.stringify = stringify;
+/**
+ * We trade Map as deps which may change with same value but different ref object.
+ * We should make it as hash for deps
+ * */
+function stringify(obj) {
+  var tgt;
+  if (obj instanceof Map) {
+    tgt = {};
+    obj.forEach(function (v, k) {
+      tgt[k] = v;
+    });
+  } else {
+    tgt = obj;
+  }
+  return JSON.stringify(tgt);
+}
+var RC_TABS_DOUBLE_QUOTE = 'TABS_DQ';
+function genDataNodeKey(key) {
+  return String(key).replace(/"/g, RC_TABS_DOUBLE_QUOTE);
+}
+function getRemovable(closable, closeIcon, editable, disabled) {
+  if (
+  // Only editable tabs can be removed
+  !editable ||
+  // Tabs cannot be removed when disabled
+  disabled ||
+  // closable is false
+  closable === false ||
+  // If closable is undefined, the remove button should be hidden when closeIcon is null or false
+  closable === undefined && (closeIcon === false || closeIcon === null)) {
+    return false;
+  }
+  return true;
+}
--- a/frontend/node_modules/rc-tabs/package.json
+++ b/frontend/node_modules/rc-tabs/package.json
@@ -0,0 +1,101 @@
+{
+  "name": "rc-tabs",
+  "version": "15.7.0",
+  "description": "tabs ui component for react",
+  "keywords": [
+    "react",
+    "react-component",
+    "react-tabs"
+  ],
+  "homepage": "http://github.com/react-component/tabs",
+  "bugs": {
+    "url": "http://github.com/react-component/tabs/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:react-component/tabs.git"
+  },
+  "license": "MIT",
+  "author": "yiminghe@gmail.com",
+  "main": "./lib/index",
+  "module": "./es/index",
+  "files": [
+    "lib",
+    "es",
+    "assets/index.css"
+  ],
+  "scripts": {
+    "build": "dumi build",
+    "compile": "father build && npm run compile:style",
+    "compile:style": "lessc --js assets/index.less assets/index.css",
+    "coverage": "father test --coverage",
+    "docs:deploy": "gh-pages -d .doc",
+    "lint": "eslint src/ docs/examples/ --ext .tsx,.ts,.jsx,.js",
+    "now-build": "npm run build",
+    "prepublishOnly": "npm run lint && npm run test && npm run compile && np --yolo --no-publish --branch=antd-5.x",
+    "start": "dumi dev",
+    "test": "rc-test",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.11.2",
+    "classnames": "2.x",
+    "rc-dropdown": "~4.2.0",
+    "rc-menu": "~9.16.0",
+    "rc-motion": "^2.6.2",
+    "rc-resize-observer": "^1.0.0",
+    "rc-util": "^5.34.1"
+  },
+  "devDependencies": {
+    "@rc-component/father-plugin": "^1.0.0",
+    "@rc-component/trigger": "^2.0.0",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/classnames": "^2.2.10",
+    "@types/enzyme": "^3.10.5",
+    "@types/jest": "^29.4.0",
+    "@types/keyv": "4.2.0",
+    "@types/react": "^18.2.42",
+    "@types/react-dom": "^18.0.11",
+    "@umijs/fabric": "^4.0.1",
+    "coveralls": "^3.0.6",
+    "cross-env": "^7.0.2",
+    "dumi": "^2.0.0",
+    "eslint": "^8.54.0",
+    "eslint-plugin-jest": "^28.9.0",
+    "eslint-plugin-unicorn": "^56.0.1",
+    "fastclick": "~1.0.6",
+    "father": "^4.0.0",
+    "gh-pages": "^6.1.0",
+    "history": "^5.3.0",
+    "husky": "^9.1.7",
+    "immutability-helper": "^3.0.1",
+    "less": "^4.1.3",
+    "lint-staged": "^15.5.1",
+    "np": "^10.0.2",
+    "preact-compat": "^3.16.0",
+    "prettier": "^3.5.3",
+    "rc-test": "^7.0.14",
+    "react": "^18.0.0",
+    "react-dnd": "^10.0.0",
+    "react-dnd-html5-backend": "^10.0.0",
+    "react-dom": "^18.0.0",
+    "react-sticky": "^6.0.3",
+    "sortablejs": "^1.7.0",
+    "typescript": "^5.3.2"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  },
+  "engines": {
+    "node": ">=8.x"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  }
+}