Added graph of total publications by community

dbs/social.trace.db

@@ -3011,3 +3011,21 @@ select * from netuno_app where uid = 'social-netuno'  [22018-198]
 2021-04-04 12:05:53 jdbc[3]: exception
 org.h2.jdbc.JdbcSQLDataException: Data conversion error converting "social-netuno"; SQL statement:
 select * from netuno_app where uid = 'social-netuno'  [22018-198]
+2021-04-05 12:10:56 jdbc[3]: exception
+org.h2.jdbc.JdbcSQLDataException: Data conversion error converting "social-netuno"; SQL statement:
+select * from netuno_app where uid = 'social-netuno'  [22018-198]
+2021-04-05 12:17:24 jdbc[3]: exception
+org.h2.jdbc.JdbcSQLSyntaxErrorException: Syntax error in SQL statement "DESCRIBE[*] pessoa"; expected "DELETE, DROP, DECLARE, DEALLOCATE"; SQL statement:
+DESCRIBE pessoa [42001-198]
+2021-04-05 12:17:40 jdbc[3]: exception
+org.h2.jdbc.JdbcSQLSyntaxErrorException: Syntax error in SQL statement "DESCRIBE[*] * pessoa"; expected "DELETE, DROP, DECLARE, DEALLOCATE"; SQL statement:
+DESCRIBE * pessoa [42001-198]
+2021-04-05 12:17:49 jdbc[3]: exception
+org.h2.jdbc.JdbcSQLSyntaxErrorException: Syntax error in SQL statement "DESCRIBE[*] * pessoa"; expected "DELETE, DROP, DECLARE, DEALLOCATE"; SQL statement:
+DESCRIBE * pessoa [42001-198]
+2021-04-05 12:19:14 jdbc[3]: exception
+org.h2.jdbc.JdbcSQLSyntaxErrorException: Syntax error in SQL statement "DESCRIBE[*] cidade"; expected "DELETE, DROP, DECLARE, DEALLOCATE"; SQL statement:
+DESCRIBE cidade [42001-198]
+2021-04-05 12:19:16 jdbc[3]: exception
+org.h2.jdbc.JdbcSQLSyntaxErrorException: Syntax error in SQL statement "DESCRIBE[*] cidade"; expected "DELETE, DROP, DECLARE, DEALLOCATE"; SQL statement:
+DESCRIBE cidade [42001-198]

public/scripts/main.js

@@ -244087,6 +244087,85 @@ var GraficoPublicacoesDiariasPorComunidade = function GraficoPublicacoesDiariasP
 
 /***/ }),
 
+/***/ "./src/components/GraficoPublicacoesTotaisPorComunidade/index.jsx":
+/*!************************************************************************!*\
+  !*** ./src/components/GraficoPublicacoesTotaisPorComunidade/index.jsx ***!
+  \************************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var bizcharts__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! bizcharts */ "./node_modules/bizcharts/umd/BizCharts.js");
+/* harmony import */ var bizcharts__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(bizcharts__WEBPACK_IMPORTED_MODULE_1__);
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+
+
+
+var GraficoPublicacoesTotaisPorComunidade = function GraficoPublicacoesTotaisPorComunidade() {
+  var _useState = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      data = _useState2[0],
+      setData = _useState2[1];
+
+  Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(function () {
+    netuno.service({
+      url: "/services/publicacoes/graficos/comunidades/total",
+      method: "GET",
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      success: function success(response) {
+        if (response.json) {
+          setData(response.json);
+        } else {
+          _fail();
+        }
+      },
+      fail: function fail() {
+        _fail();
+      }
+    });
+  }, []);
+
+  var _fail = function _fail() {
+    setLoader(false);
+    notification["error"]({
+      message: 'Error',
+      description: 'Data loading error...',
+      style: {
+        marginTop: 100
+      }
+    });
+  };
+
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(bizcharts__WEBPACK_IMPORTED_MODULE_1__["Chart"], {
+    height: 300,
+    autoFit: true,
+    data: data
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(bizcharts__WEBPACK_IMPORTED_MODULE_1__["Interval"], {
+    position: "comunidade*total"
+  }));
+};
+
+/* harmony default export */ __webpack_exports__["default"] = (GraficoPublicacoesTotaisPorComunidade);
+
+/***/ }),
+
 /***/ "./src/components/MyButton/index.jsx":
 /*!*******************************************!*\
   !*** ./src/components/MyButton/index.jsx ***!
@@ -244166,7 +244245,9 @@ var Title = antd_lib_typography__WEBPACK_IMPORTED_MODULE_2___default.a.Title;
 
 var JanelaPublicacoes = function JanelaPublicacoes(_ref) {
   var ok = _ref.ok,
-      pessoa = _ref.pessoa;
+      pessoa = _ref.pessoa,
+      isVisible = _ref.isVisible,
+      cancel = _ref.cancel;
 
   var _useState = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])([]),
       _useState2 = _slicedToArray(_useState, 2),
@@ -244195,7 +244276,7 @@ var JanelaPublicacoes = function JanelaPublicacoes(_ref) {
         _fail();
       }
     });
-  }, []);
+  }, [isVisible]);
 
   var _fail = function _fail() {
     setLoader(false);
@@ -244208,16 +244289,19 @@ var JanelaPublicacoes = function JanelaPublicacoes(_ref) {
     });
   };
 
-  console.log(data);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(antd_lib_modal__WEBPACK_IMPORTED_MODULE_1___default.a, {
     title: "Publica\xE7\xF5es de ".concat(pessoa.nome, " ").concat(pessoa.sobrenome),
-    visible: true,
+    visible: isVisible,
     onOk: function onOk() {
       return ok(false);
+    },
+    onCancel: function onCancel() {
+      return cancel(false);
     }
   }, data.map(function (publicao) {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
-      className: "publicacao-container"
+      className: "publicacao-container",
+      key: publicao.uid
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("hr", null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(Title, {
       level: 5
     }, publicao.comunidade), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", null, publicao.momento.replace(":00.0", ""))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("p", null, publicao.mensagem));
@@ -244383,11 +244467,15 @@ var PessoasTabela = function PessoasTabela() {
       }, "Publica\xE7\xF5es");
     }
   }];
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, modalIsOpen && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_JanelaPublicacoes_index_jsx__WEBPACK_IMPORTED_MODULE_5__["default"], {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_JanelaPublicacoes_index_jsx__WEBPACK_IMPORTED_MODULE_5__["default"], {
     pessoa: publicacoesPessoa,
     ok: function ok() {
       return setModalIsOpen();
-    }
+    },
+    cancel: function cancel() {
+      return setModalIsOpen();
+    },
+    isVisible: modalIsOpen
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(antd_lib_table__WEBPACK_IMPORTED_MODULE_1___default.a, {
     dataSource: data,
     columns: columns
@@ -244412,12 +244500,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _components_MyButton_index_jsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../components/MyButton/index.jsx */ "./src/components/MyButton/index.jsx");
 /* harmony import */ var _components_PessoasTabela_index_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../components/PessoasTabela/index.jsx */ "./src/components/PessoasTabela/index.jsx");
-/* harmony import */ var _components_GraficoPublicacoesDiariasPorComunidade_index_jsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../components/GraficoPublicacoesDiariasPorComunidade/index.jsx */ "./src/components/GraficoPublicacoesDiariasPorComunidade/index.jsx");
-/* harmony import */ var antd_lib_tabs__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! antd/lib/tabs */ "./node_modules/antd/lib/tabs/index.js");
-/* harmony import */ var antd_lib_tabs__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(antd_lib_tabs__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var react_icons_ai__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react-icons/ai */ "./node_modules/react-icons/ai/index.esm.js");
-/* harmony import */ var _index_less__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./index.less */ "./src/containers/DashboardContainer/index.less");
-/* harmony import */ var _index_less__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_index_less__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var _components_GraficoPublicacoesTotaisPorComunidade_index_jsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../components/GraficoPublicacoesTotaisPorComunidade/index.jsx */ "./src/components/GraficoPublicacoesTotaisPorComunidade/index.jsx");
+/* harmony import */ var _components_GraficoPublicacoesDiariasPorComunidade_index_jsx__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../components/GraficoPublicacoesDiariasPorComunidade/index.jsx */ "./src/components/GraficoPublicacoesDiariasPorComunidade/index.jsx");
+/* harmony import */ var antd_lib_tabs__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! antd/lib/tabs */ "./node_modules/antd/lib/tabs/index.js");
+/* harmony import */ var antd_lib_tabs__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(antd_lib_tabs__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var react_icons_ai__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react-icons/ai */ "./node_modules/react-icons/ai/index.esm.js");
+/* harmony import */ var _index_less__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./index.less */ "./src/containers/DashboardContainer/index.less");
+/* harmony import */ var _index_less__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_index_less__WEBPACK_IMPORTED_MODULE_7__);
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -244447,7 +244536,8 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 
 
-var TabPane = antd_lib_tabs__WEBPACK_IMPORTED_MODULE_4___default.a.TabPane;
+
+var TabPane = antd_lib_tabs__WEBPACK_IMPORTED_MODULE_5___default.a.TabPane;
 
 var DashboardContainer = /*#__PURE__*/function (_Component) {
   _inherits(DashboardContainer, _Component);
@@ -244504,12 +244594,12 @@ var DashboardContainer = /*#__PURE__*/function (_Component) {
           data = _this$state.data;
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
         className: "my-dashboard"
-      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(antd_lib_tabs__WEBPACK_IMPORTED_MODULE_4___default.a, {
+      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(antd_lib_tabs__WEBPACK_IMPORTED_MODULE_5___default.a, {
         defaultActiveKey: "1"
       }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(TabPane, {
         tab: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", {
           className: "tab-name"
-        }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_icons_ai__WEBPACK_IMPORTED_MODULE_5__["AiOutlineUser"], {
+        }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_icons_ai__WEBPACK_IMPORTED_MODULE_6__["AiOutlineUser"], {
           size: 24,
           color: "#444",
           style: {
@@ -244520,18 +244610,18 @@ var DashboardContainer = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_PessoasTabela_index_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], null)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(TabPane, {
         tab: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", {
           className: "tab-name"
-        }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_icons_ai__WEBPACK_IMPORTED_MODULE_5__["AiOutlineBarChart"], {
+        }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_icons_ai__WEBPACK_IMPORTED_MODULE_6__["AiOutlineBarChart"], {
           size: 24,
           color: "#444",
           style: {
             marginRight: 5
           }
-        }), "Gr\xE1fico de barras"),
+        }), "Publica\xE7\xF5es totais"),
         key: "2"
-      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, "Gr\xE1fico")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(TabPane, {
+      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_GraficoPublicacoesTotaisPorComunidade_index_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], null)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(TabPane, {
         tab: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", {
           className: "tab-name"
-        }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_icons_ai__WEBPACK_IMPORTED_MODULE_5__["AiOutlineLineChart"], {
+        }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_icons_ai__WEBPACK_IMPORTED_MODULE_6__["AiOutlineLineChart"], {
           size: 24,
           color: "#444",
           style: {
@@ -244539,7 +244629,7 @@ var DashboardContainer = /*#__PURE__*/function (_Component) {
           }
         }), "Publica\xE7\xF5es di\xE1rias"),
         key: "3"
-      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_GraficoPublicacoesDiariasPorComunidade_index_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], null))));
+      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_GraficoPublicacoesDiariasPorComunidade_index_jsx__WEBPACK_IMPORTED_MODULE_4__["default"], null))));
     }
   }]);
 

ui/src/components/GraficoPublicacoesTotaisPorComunidade/index.jsx

@@ -0,0 +1,43 @@
+import React, {useEffect, useState} from 'react';
+import { Chart, Interval } from 'bizcharts';
+
+const GraficoPublicacoesTotaisPorComunidade = () => {
+    const [data, setData] = useState([])
+    useEffect(() => {
+        netuno.service({
+            url: "/services/publicacoes/graficos/comunidades/total",
+            method: "GET",
+            credentials: 'include',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            success: (response)=> {
+                if (response.json) {
+                    setData(response.json)
+                } else {
+                    fail();
+                }
+            },
+            fail: ()=> {
+                fail();
+            }
+        })
+    }, [])
+    const fail = ()=> {
+        setLoader(false)
+        notification["error"]({
+            message: 'Error',
+            description: 'Data loading error...',
+            style: {
+                marginTop: 100,
+            }
+        });
+    };
+    return (
+        <Chart height={300} autoFit data={data} >
+            <Interval position="comunidade*total"  />
+        </Chart>
+    )
+}
+
+export default GraficoPublicacoesTotaisPorComunidade;

ui/src/components/PessoasTabela/JanelaPublicacoes/index.jsx

@@ -3,9 +3,9 @@ import Modal from 'antd/lib/modal'
 import Typography from 'antd/lib/typography';
 import "./styles.less"
 
-const { Title,  } = Typography;
+const { Title  } = Typography;
 
-const JanelaPublicacoes = ({ok, pessoa}) => {
+const JanelaPublicacoes = ({ok, pessoa, isVisible, cancel}) => {
     const [data, setData] = useState([])
     useEffect(() => {
         netuno.service({
@@ -29,7 +29,7 @@ const JanelaPublicacoes = ({ok, pessoa}) => {
                 fail();
             }
         });
-    }, [])
+    }, [isVisible])
     const fail = ()=> {
         setLoader(false)
         notification["error"]({
@@ -40,15 +40,15 @@ const JanelaPublicacoes = ({ok, pessoa}) => {
             }
         });
     };
-    console.log(data)
     return(
         <Modal
             title={`Publicações de ${pessoa.nome} ${pessoa.sobrenome}`}
-            visible={true}
-            onOk={() => ok(false)}>
+            visible={isVisible}
+            onOk={() => ok(false)}
+            onCancel={() => cancel(false)}>
             {data.map((publicao) => {
                 return(
-                    <div className="publicacao-container">
+                    <div className="publicacao-container" key={publicao.uid}>
                         <hr />
                         <div>
                             <Title level={5}>{publicao.comunidade}</Title>

ui/src/components/PessoasTabela/index.jsx

@@ -79,7 +79,12 @@ const PessoasTabela = () => {
       ];
     return (
         <div>
-            {modalIsOpen && <JanelaPublicacoes pessoa={publicacoesPessoa} ok={() => setModalIsOpen()}/>}
+            <JanelaPublicacoes
+                pessoa={publicacoesPessoa}
+                ok={() => setModalIsOpen()}
+                cancel={() => setModalIsOpen()}
+                isVisible={modalIsOpen}
+            />
             <Table dataSource={data} columns={columns} />    
         </div>
     )

ui/src/containers/DashboardContainer/index.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import MyButton from "../../components/MyButton/index.jsx";
 import PessoasTabela from "../../components/PessoasTabela/index.jsx";
+import GraficoPublicacoesTotaisPorComunidade from "../../components/GraficoPublicacoesTotaisPorComunidade/index.jsx"
 import GraficoPublicacoesDiariasPorComunidade from "../../components/GraficoPublicacoesDiariasPorComunidade/index.jsx"
 import  Tabs  from 'antd/lib/tabs';
 import {AiOutlineUser, AiOutlineBarChart, AiOutlineLineChart} from 'react-icons/ai'
@@ -59,10 +60,10 @@ export default class DashboardContainer extends Component {
                     <TabPane tab={
                         <span className="tab-name">
                             <AiOutlineBarChart size={24} color="#444" style={{marginRight: 5}} />
-                            Gráfico de barras
+                            Publicações totais
                         </span>
                     } key="2">
-                        <>Gráfico</>
+                        <GraficoPublicacoesTotaisPorComunidade />
                     </TabPane>
                     <TabPane tab={
                         <span className="tab-name">