dashboard/src/App.jsx

import './App.css';
import React, { useContext } from 'react';
import {
  HomeOutlined,
  TeamOutlined,
  DashboardOutlined,
  FileProtectOutlined,
  CustomerServiceTwoTone,
  SnippetsTwoTone,
  DollarOutlined,
  AreaChartOutlined,
  WechatOutlined,
  UserOutlined, FlagOutlined, PieChartOutlined, BarChartOutlined
} from '@ant-design/icons';
import { Layout, Menu, Image, Badge } from 'antd';
import { BrowserRouter, Route, Routes, NavLink } from 'react-router-dom';
import Home from './views/Home';
import Dashboard from './views/Dashboard';
import Orders from './views/Orders';
import Orders_sub from './views/Orders_sub';
import ProtectedRoute from './views/ProtectedRoute';
import Customer_care_inchina from './charts/Customer_care_inchina';
import Customer_care_potential from './charts/Customer_care_potential';
import Customer_care_regular from './charts/Customer_care_regular';
import Wechat_session from './charts/Wechat_session';
import WhatsApp_session from './charts/WhatsApp_session';
import AgentGroupCount from './views/AgentGroupCount';
import AgentGroupList from './views/AgentGroupList';
import DestinationGroupCount from './views/DestinationGroupCount';
import DestinationGroupList from './views/DestinationGroupList';
import Credit_card_bill from './views/Credit_card_bill';
import Sale from './views/Sale';
import Sale_sub from './views/Sale_sub';
import Sale_KPI from './views/Sale_KPI';
import Logo from './logo.png';
import { stores_Context } from './config';
import { observer } from 'mobx-react';
import ExchangeRate from './charts/ExchangeRate';
import KPI from './views/KPI';
import Distribution from './views/Distribution';
import Detail from './views/Detail';

const App = () => {
  const { Content, Footer, Sider } = Layout;
  const { auth_store } = useContext(stores_Context);

  const menu_items = [
    { key: 1, label: <NavLink to="/">主页</NavLink>, icon: <HomeOutlined /> },
    {
      key: 2,
      label: '市场',
      icon: <AreaChartOutlined />,
      children: [
        {
          key: 21,
          label: <NavLink to="/orders">订单数据</NavLink>,
          icon: <FileProtectOutlined />,
        },
        {
          key: 22,
          label: <NavLink to="/dashboard">仪表盘</NavLink>,
          icon: <DashboardOutlined />,
        },
      ],
    },
    {
      key: 5,
      label: '销售',
      icon: <SnippetsTwoTone />,
      children: [
        { key: 51, label: <NavLink to="/sale">业绩数据</NavLink> },
        { key: 52, label: <NavLink to="/sale_kpi">销售进度</NavLink> },
        { key: 'distribution', label: <NavLink to="/distribution">统计分布</NavLink> },
      ],
    },
    {
      key: 3,
      label: '客运',
      icon: <WechatOutlined />,
      children: [
        {
          key: 31,
          label: <NavLink to="/customer_care_potential">潜力客户</NavLink>,
        },
        {
          key: 32,
          label: <NavLink to="/customer_care_regular">老客户</NavLink>,
        },
        {
          key: 33,
          label: <NavLink to="/customer_care_inchina">在华客户</NavLink>,
        },
        {
          key: 34,
          label: <NavLink to="/wechat_session">微信会话存档</NavLink>,
        },
        {
          key: 35,
          label: <NavLink to="/whatsapp_session">WhatsApp会话存档</NavLink>,
        },
      ],
    },
    {
      key: 4,
      label: '财务',
      icon: <DollarOutlined />,
      children: [
        {
          key: 41,
          label: <NavLink to="/credit_card_bill">信用卡账单</NavLink>,
        },
        { key: 42, label: <NavLink to="/exchange_rate">汇率</NavLink> },
      ],
    },
    {
      key: 6,
      label: '客服',
      icon: <WechatOutlined />,
      children: [
        {
          key: 61,
          label: <NavLink to="/agent/group/count">地接社接团</NavLink>,
        },
        {
          key: 62,
          label: <NavLink to="/destination/group/count">目的地接团</NavLink>,
        },
      ],
    },
    { key: 'kpi', label: <NavLink to="/kpi">目标配置</NavLink>, icon: <FlagOutlined /> },
    // {
    //   key: 'detail',
    //   label: (
    //     <NavLink to="/detail">
    //       <Badge.Ribbon text="Beta">统计分析</Badge.Ribbon>
    //     </NavLink>
    //   ),
    //   icon: <BarChartOutlined />,
    // },
  ];

  return (
    <BrowserRouter>
      <Layout
        hasSider
        style={{
          minHeight: '100vh',
        }}
      >
        <Sider
          collapsible={true}
          breakpoint="lg"
          style={{
            overflow: 'auto',
            height: '100vh',
            position: 'sticky',
            left: 0,
            top: 0,
            bottom: 0,
          }}
        >
          <Image src={Logo} preview={false} />
          <Menu
            theme="dark"
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['2', '5']}
            mode="inline"
            items={menu_items}
          />
        </Sider>
        <Layout className="site-layout">
          <Content
            style={{
              padding: 16,
              minHeight: 480,
            }}
          >
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/detail" element={<Detail />} />
              <Route element={<ProtectedRoute auth={['admin', 'director_bu', 'marketing']} />}>
                <Route path="/orders" element={<Orders />} />
                <Route path="/orders_sub/:ordertype/:ordertype_sub/:ordertype_title" element={<Orders_sub />} />
                <Route path="/dashboard" element={<Dashboard />} />
              </Route>
              <Route element={<ProtectedRoute auth={['admin', 'director_bu', 'customer_care']} />}>
                <Route path="/customer_care_inchina" element={<Customer_care_inchina />} />
                <Route path="/customer_care_regular" element={<Customer_care_regular />} />
                <Route path="/customer_care_potential" element={<Customer_care_potential />} />
                <Route path="/whatsapp_session" element={<WhatsApp_session />} />
                <Route path="/wechat_session" element={<Wechat_session />} />
                <Route path="/agent/group/count" element={<AgentGroupCount />} />
                <Route path="/destination/group/count" element={<DestinationGroupCount />} />
                <Route path="/agent/:agentId/group/list" element={<AgentGroupList />} />
                <Route path="/destination/:destinationId/group/list" element={<DestinationGroupList />} />
              </Route>
              <Route element={<ProtectedRoute auth={['admin', 'director_bu', 'financial']} />}>
                <Route path="/credit_card_bill" element={<Credit_card_bill />} />
                <Route path="/exchange_rate" element={<ExchangeRate />} />
              </Route>
              <Route element={<ProtectedRoute auth={['admin', 'director_bu']} />}>
                <Route path="/kpi" element={<KPI />} />
              </Route>
              <Route element={<ProtectedRoute auth={['admin', 'director_bu', 'sale']} />}>
                <Route path="/sale" element={<Sale />} />
                <Route path="/sale_sub/:type_sub" element={<Sale_sub />} />
                <Route path="/sale_kpi" element={<Sale_KPI />} />
                <Route path="/distribution" element={<Distribution />} />
              </Route>
            </Routes>
          </Content>
          <Footer
            style={{
              textAlign: 'center',
            }}
          >
            <UserOutlined /> {auth_store.user.name} ({auth_store.user.userid})
            <br />
            Hainatravel Dashboard ©2022 Created by IT
          </Footer>
        </Layout>
      </Layout>
    </BrowserRouter>
  );
};

export default observer(App);