Basic working RPS with all upgrades completed.

src/components/molecules/job-group/job-group.molecule.jsx

@@ -45,11 +45,10 @@ export function JobGroupMolecule({ bodyshop, jobId, group, job }) {
   };
 
   const menu = (
-    <Menu onClick={handleMenuClick}>
-      {bodyshop.groups.map((g, idx) => (
-        <Menu.Item key={g}>{g}</Menu.Item>
-      ))}
-    </Menu>
+    <Menu
+      onClick={handleMenuClick}
+      items={bodyshop.groups.map((g, idx) => ({ key: g, title: g, label: g }))}
+    ></Menu>
   );
 
   return (

src/components/molecules/jobs-group-modal/jobs-group-modal.molecule.jsx

@@ -286,7 +286,7 @@ export default function JobsGroupModalMolecule() {
   return (
     <div style={{ margin: ".2rem" }}>
       <Modal
-        visible={visible}
+        open={visible}
         onCancel={() => setVisible(false)}
         onOk={() => setVisible(false)}
         width="90%"

src/components/molecules/release-notes/release-notes.molecule.jsx

@@ -28,7 +28,7 @@ export function ReleaseNotes({ releaseNotes, setReleaseNotes }) {
 
   return (
     <Modal
-      visible={!!releaseNotes}
+      open={!!releaseNotes}
       onOk={handleOk}
       onCancel={handleOk}
       cancelButtonProps={{ style: { display: "none" } }}

src/components/molecules/sider-sign-out/sider-sign-out.molecule.jsx

@@ -1,5 +1,3 @@
-import { LogoutOutlined } from "@ant-design/icons";
-import { Menu } from "antd";
 import React from "react";
 import { connect } from "react-redux";
 import { signOutStart } from "../../../redux/user/user.actions";
@@ -9,14 +7,6 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export function SiderSignOut({ signOutStart, ...restProps }) {
-  return (
-    <Menu.Item
-      icon={<LogoutOutlined />}
-      {...restProps}
-      onClick={() => signOutStart()}
-    >
-      Sign Out
-    </Menu.Item>
-  );
+  return <span onClick={() => signOutStart()}>Sign Out</span>;
 }
 export default connect(null, mapDispatchToProps)(SiderSignOut);

src/components/organisms/sider-menu/sider-menu.organism.jsx

@@ -4,6 +4,7 @@ import {
   CloseOutlined,
   BarChartOutlined,
   FileAddFilled,
+  LogoutOutlined,
 } from "@ant-design/icons";
 import { Menu } from "antd";
 import React from "react";
@@ -17,31 +18,51 @@ export default function SiderMenuOrganism() {
   const { pathname } = useLocation();
 
   return (
-    <Menu defaultSelectedKeys={[`/`]} selectedKeys={[pathname]} mode="inline">
-      <Menu.Item key="/" icon={<PieChartOutlined />}>
-        <Link to="/">Jobs</Link>
-      </Menu.Item>
-      <Menu.Item key="/scan" icon={<FileAddFilled />}>
-        <Link to="/scan">File Scan</Link>
-      </Menu.Item>
-      <Menu.Item key="/reporting" icon={<BarChartOutlined />}>
-        <Link to="/reporting">Reporting</Link>
-      </Menu.Item>
-      <Menu.Item key="/settings" icon={<SettingFilled />}>
-        <Link to="/settings">Settings</Link>
-      </Menu.Item>
-
-      <Menu.Divider />
-      <SiderSignOut style={{ color: "tomato" }} />
-      <Menu.Item
-        key="3" style={{ color: "tomato" }}
-        icon={<CloseOutlined style={{ color: "tomato" }}/>}
-        onClick={() => {
-          ipcRenderer.send(ipcTypes.default.quit);
-        }}
-      >
-        Quit
-      </Menu.Item>
-    </Menu>
+    <Menu
+      defaultSelectedKeys={[`/`]}
+      selectedKeys={[pathname]}
+      mode="inline"
+      items={[
+        {
+          key: "/",
+          icon: <PieChartOutlined />,
+          label: <Link to="/">Jobs</Link>,
+        },
+        {
+          key: "/scan",
+          icon: <FileAddFilled />,
+          label: <Link to="/scan">File Scan</Link>,
+        },
+        {
+          key: "/reporting",
+          icon: <BarChartOutlined />,
+          label: <Link to="/reporting">Reporting</Link>,
+        },
+        {
+          key: "/settings",
+          icon: <SettingFilled />,
+          label: <Link to="/settings">Settings</Link>,
+        },
+        { type: "divider" },
+        {
+          key: "signout",
+          icon: <LogoutOutlined style={{ color: "tomato" }} />,
+          label: <SiderSignOut />,
+        },
+        {
+          key: "quit",
+          icon: <CloseOutlined style={{ color: "tomato" }} />,
+          label: (
+            <span
+              onClick={() => {
+                ipcRenderer.send(ipcTypes.default.quit);
+              }}
+            >
+              Quit
+            </span>
+          ),
+        },
+      ]}
+    />
   );
 }

src/components/pages/jobs/jobs.page.jsx

@@ -26,14 +26,24 @@ export default function JobsPage() {
     <div style={{ height: "100%" }}>
       <Row gutter={[16, 16]} style={{ height: "100%" }}>
         <Col span={selectedSpans.l} style={{ height: "100%" }}>
-          <Tabs defaultActiveKey="latest" style={{ height: "100%" }}>
-            <Tabs.TabPane key="latest" tab="Latest" style={{ height: "100%" }}>
-              <JobsListOrganism />
-            </Tabs.TabPane>
-            <Tabs.TabPane key="search" tab="Search" style={{ height: "100%" }}>
-              <JobsListSearchOrganism />
-            </Tabs.TabPane>
-          </Tabs>
+          <Tabs
+            style={{ height: "100%" }}
+            defaultActiveKey="latest"
+            items={[
+              {
+                key: "latest",
+                label: "Latest",
+                children: <JobsListOrganism />,
+                style: { height: "100%" },
+              },
+              {
+                key: "search",
+                label: "Search",
+                children: <JobsListSearchOrganism />,
+                style: { height: "100%" },
+              },
+            ]}
+          ></Tabs>
         </Col>
         <Col span={selectedSpans.r} style={{ height: "100%" }}>
           <JobsDetailOrganism />