Created sider for Chat messages.

client/src/components/chat-window/chat-window.component.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-
-export default function ChatWindowComponent() {
-  return <div>Chat Windows and more</div>;
+import { Drawer } from "antd";
+export default function ChatWindowComponent({ ...drawerProps }) {
+  return <Drawer {...drawerProps}>Chat Windows and more</Drawer>;
 }

client/src/components/chat-window/chat-window.container.jsx

@@ -6,7 +6,7 @@ import { createStructuredSelector } from "reselect";
 import { selectCurrentUser } from "../../redux/user/user.selectors";
 
 const mapStateToProps = createStructuredSelector({
-  currentUser: selectCurrentUser
+  //currentUser: selectCurrentUser
 });
 
 const mapDispatchToProps = dispatch => ({
@@ -16,18 +16,17 @@ const mapDispatchToProps = dispatch => ({
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(function ChatWindowContainer({ currentUser }) {
+)(function ChatWindowContainer() {
   const [visible, setVisible] = useState(false);
   return (
-    <div style={{ position: "absolute", zIndex: 1000 }}>
-      {visible ? <ChatWindowComponent /> : null}
-      <Button
-        onClick={() => {
-          setVisible(!visible);
-        }}
-      >
-        Open!
-      </Button>
+    <div>
+      <Button onClick={() => setVisible(!visible)}>Drawer!</Button>
+      <ChatWindowComponent
+        mask={false}
+        maskClosable={false}
+        visible={visible}
+        zIndex={0}
+      />
     </div>
   );
 });

client/src/components/jobs-list/jobs-list.component.jsx

@@ -28,7 +28,7 @@ export default withRouter(function JobsList({
       width: "8%",
       // onFilter: (value, record) => record.ro_number.includes(value),
       // filteredValue: state.filteredInfo.text || null,
-      sorter: (a, b) => alphaSort(a, b),
+      sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
       sortOrder:
         state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
 
@@ -74,7 +74,7 @@ export default withRouter(function JobsList({
             <PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>
             <Icon
               style={{ margin: 4 }}
-              type='message'
+              type="message"
               onClick={() => {
                 alert("SMSing will happen here.");
               }}
@@ -91,7 +91,7 @@ export default withRouter(function JobsList({
       key: "status",
       width: "10%",
       ellipsis: true,
-      sorter: (a, b) => alphaSort(a, b),
+      sorter: (a, b) => alphaSort(a.status, b.status),
       sortOrder:
         state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
       render: (text, record) => {
@@ -122,7 +122,7 @@ export default withRouter(function JobsList({
       key: "plate_no",
       width: "8%",
       ellipsis: true,
-      sorter: (a, b) => alphaSort(a, b),
+      sorter: (a, b) => alphaSort(a.vehicle?.plate_no, b.vehicle?.plate_no),
       sortOrder:
         state.sortedInfo.columnKey === "plate_no" && state.sortedInfo.order,
       render: (text, record) => {
@@ -139,7 +139,7 @@ export default withRouter(function JobsList({
       key: "clm_no",
       width: "12%",
       ellipsis: true,
-      sorter: (a, b) => alphaSort(a, b),
+      sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
       sortOrder:
         state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order,
       render: (text, record) => {
@@ -155,11 +155,9 @@ export default withRouter(function JobsList({
       dataIndex: "clm_total",
       key: "clm_total",
       width: "8%",
-      // sorter: (a, b) => {
-      //   return a > b;
-      // },
-      // sortOrder:
-      //   state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
+      sorter: (a, b) => a.clm_total - b.clm_total,
+      sortOrder:
+        state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
       render: (text, record) => {
         return record.clm_total ? (
           <span>{record.clm_total}</span>
@@ -196,7 +194,6 @@ export default withRouter(function JobsList({
     if (record) {
       if (record.id) {
         setSelectedJob(record.id);
-        history.push(`#${record.id}`);
         return;
       }
     }
@@ -210,7 +207,7 @@ export default withRouter(function JobsList({
         title={() => {
           return (
             <Input.Search
-              placeholder='Search...'
+              placeholder="Search..."
               onSearch={value => {
                 console.log(value);
               }}
@@ -218,10 +215,10 @@ export default withRouter(function JobsList({
             />
           );
         }}
-        size='small'
+        size="small"
         pagination={{ position: "top" }}
         columns={columns.map(item => ({ ...item }))}
-        rowKey='id'
+        rowKey="id"
         dataSource={jobs}
         rowSelection={{ selectedRowKeys: [selectedJob] }}
         onChange={handleTableChange}

client/src/pages/manage/manage.page.jsx

@@ -10,7 +10,6 @@ import HeaderContainer from "../../components/header/header.container";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import "./manage.page.styles.scss";
 
-
 //const WhiteBoardPage = lazy(() => import("../white-board/white-board.page"));
 const ManageRootPage = lazy(() =>
   import("../manage-root/manage-root.page.container")
@@ -27,7 +26,7 @@ const JobsAvailablePage = lazy(() =>
   import("../jobs-available/jobs-available.page.container")
 );
 
-const { Header, Content, Footer } = Layout;
+const { Header, Content, Footer, Sider } = Layout;
 //This page will handle all routing for the entire application.
 export default function Manage({ match }) {
   const { t } = useTranslation();
@@ -37,49 +36,58 @@ export default function Manage({ match }) {
   }, [t]);
 
   return (
-    <Layout>
+    <Layout style={{ minHeight: "100vh" }}>
       <Header>
         <HeaderContainer />
       </Header>
+      <Layout>
+        <Sider
+          collapsible
+          defaultCollapsed
+          theme="light"
+          collapsedWidth={0}
+          width={300}
+        >
+          <chatWindowContainer />
+        </Sider>
 
-      <Content className="content-container">
-        <ErrorBoundary>
-          <Suspense
-            fallback={
-              <LoadingSpinner message={t("general.labels.loadingapp")} />
-            }
-          >
-            <Route exact path={`${match.path}`} component={ManageRootPage} />
+        <Content className="content-container" style={{ margin: "50px" }}>
+          <ErrorBoundary>
+            <Suspense
+              fallback={
+                <LoadingSpinner message={t("general.labels.loadingapp")} />
+              }
+            >
+              <Route exact path={`${match.path}`} component={ManageRootPage} />
 
-            <Route exact path={`${match.path}/jobs`} component={JobsPage} />
+              <Route exact path={`${match.path}/jobs`} component={JobsPage} />
 
-            <Route
-              exact
-              path={`${match.path}/jobs/:jobId`}
-              component={JobsDetailPage}
-            />
-            <Route
-              exact
-              path={`${match.path}/jobs/:jobId/documents`}
-              component={JobsDocumentsPage}
-            />
-            <Route
-              exact
-              path={`${match.path}/profile`}
-              component={ProfilePage}
-            />
-
-            <Route
-              exact
-              path={`${match.path}/available`}
-              component={JobsAvailablePage}
-            />
-          </Suspense>
-        </ErrorBoundary>
-      </Content>
+              <Route
+                exact
+                path={`${match.path}/jobs/:jobId`}
+                component={JobsDetailPage}
+              />
+              <Route
+                exact
+                path={`${match.path}/jobs/:jobId/documents`}
+                component={JobsDocumentsPage}
+              />
+              <Route
+                exact
+                path={`${match.path}/profile`}
+                component={ProfilePage}
+              />
 
+              <Route
+                exact
+                path={`${match.path}/available`}
+                component={JobsAvailablePage}
+              />
+            </Suspense>
+          </ErrorBoundary>
+        </Content>
+      </Layout>
       <Footer>
-        <ChatWindowContainer />
         <FooterComponent />
       </Footer>
       <BackTop />