preparing new settings page

ui/src/components/navigation/Navigation.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Nav } from '@douyinfe/semi-ui';
-import { IconUser, IconStar, IconSetting, IconTerminal, IconUserSetting } from '@douyinfe/semi-icons';
+import { IconStar, IconSetting, IconTerminal } from '@douyinfe/semi-icons';
 import logoWhite from '../../assets/logo_white.png';
 import Logout from '../logout/Logout.jsx';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -17,13 +17,20 @@ export default function Navigation({ isAdmin }) {
 
   const items = [
     { itemKey: '/jobs', text: 'Jobs', icon: <IconTerminal /> },
-    { itemKey: '/listings', text: 'Found Listings', icon: <IconStar /> },
+    { itemKey: '/listings', text: 'Listings', icon: <IconStar /> },
   ];
 
   if (isAdmin) {
-    items.push({ itemKey: '/users', text: 'User Management', icon: <IconUser /> });
-    items.push({ itemKey: '/listingSettings', text: 'Listing Management', icon: <IconSetting /> });
-    items.push({ itemKey: '/generalSettings', text: 'General Settings', icon: <IconUserSetting /> });
+    items.push({
+      itemKey: 'settings',
+      text: 'Settings',
+      icon: <IconSetting />,
+      items: [
+        { itemKey: '/users', text: 'User Management' },
+        { itemKey: '/listingManagement', text: 'Listing Management' },
+        { itemKey: '/generalSettings', text: 'General Settings' },
+      ],
+    });
   }
 
   function parsePathName(name) {

ui/src/components/table/listings/ListingsTable.jsx

@@ -23,6 +23,7 @@ import './ListingsTable.less';
 import { format } from '../../../services/time/timeService.js';
 import { IllustrationNoResult, IllustrationNoResultDark } from '@douyinfe/semi-illustrations';
 import { xhrDelete, xhrPost } from '../../../services/xhr.js';
+import { useNavigate } from 'react-router-dom';
 
 const getColumns = (provider, setProviderFilter, jobs, setJobNameFilter) => {
   return [
@@ -100,9 +101,9 @@ const getColumns = (provider, setProviderFilter, jobs, setJobNameFilter) => {
       },
     },
     {
-      title: 'State',
+      title: 'Active',
       dataIndex: 'is_active',
-      width: 105,
+      width: 110,
       sorter: true,
       filters: [
         {
@@ -236,6 +237,7 @@ export default function ListingsTable() {
   const tableData = useSelector((state) => state.listingsTable);
   const provider = useSelector((state) => state.provider);
   const jobs = useSelector((state) => state.jobs.jobs);
+  const navigate = useNavigate();
 
   const actions = useActions();
   const [page, setPage] = useState(1);
@@ -348,6 +350,14 @@ export default function ListingsTable() {
         placeholder="Search"
         onChange={handleFilterChange}
       />
+      <Button
+        className="listingsTable__setupButton"
+        onClick={() => {
+          navigate('/listingManagement');
+        }}
+      >
+        Setup notification on listing changes
+      </Button>
       <Table
         rowKey="id"
         empty={empty}

ui/src/components/table/listings/ListingsTable.less

@@ -11,4 +11,8 @@
   &__toolbar {
     margin-bottom: 1rem;
   }
+
+  &__setupButton {
+    margin-bottom: 1rem;
+  }
 }