Added my shop page and ability to add, edit and delete employees.

client/src/pages/jobs/jobs.page.jsx

@@ -1,11 +1,10 @@
-import React, { useEffect, useState } from "react";
 import { useQuery } from "@apollo/react-hooks";
-import AlertComponent from "../../components/alert/alert.component";
-import { Col } from "antd";
-import { QUERY_ALL_OPEN_JOBS } from "../../graphql/jobs.queries";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import JobsList from "../../components/jobs-list/jobs-list.component";
+import AlertComponent from "../../components/alert/alert.component";
 import JobDetailCards from "../../components/job-detail-cards/job-detail-cards.component";
+import JobsList from "../../components/jobs-list/jobs-list.component";
+import { QUERY_ALL_OPEN_JOBS } from "../../graphql/jobs.queries";
 
 //TODO: Implement pagination for this.
 export default function JobsPage({ match, location }) {
@@ -21,9 +20,9 @@ export default function JobsPage({ match, location }) {
   const { hash } = location;
   const [selectedJob, setSelectedJob] = useState(hash ? hash.substr(1) : null);
 
-  if (error) return <AlertComponent message={error.message} type='error' />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
   return (
-    <Col span={22} offset={1}>
+    <div>
       <JobsList
         loading={loading}
         selectedJob={selectedJob}
@@ -31,6 +30,6 @@ export default function JobsPage({ match, location }) {
         jobs={data ? data.jobs : null}
       />
       <JobDetailCards selectedJob={selectedJob} />
-    </Col>
+    </div>
   );
 }

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

@@ -39,6 +39,8 @@ const OwnersContainer = lazy(() => import("../owners/owners.page.container"));
 const OwnersDetailContainer = lazy(() =>
   import("../owners-detail/owners-detail.page.container")
 );
+const ShopPage = lazy(() => import("../shop/shop.page.component"));
+
 const { Header, Content, Footer } = Layout;
 
 export default function Manage({ match }) {
@@ -56,7 +58,10 @@ export default function Manage({ match }) {
       <Layout>
         <ChatWindowContainer />
 
-        <Content className="content-container" style={{ margin: "0px" }}>
+        <Content
+          className="content-container"
+          style={{ padding: "0em 4em 4em" }}
+        >
           <ErrorBoundary>
             <Suspense
               fallback={
@@ -113,6 +118,8 @@ export default function Manage({ match }) {
                 path={`${match.path}/available`}
                 component={JobsAvailablePage}
               />
+
+              <Route exact path={`${match.path}/shop/`} component={ShopPage} />
             </Suspense>
           </ErrorBoundary>
         </Content>

client/src/pages/owners/owners.page.container.jsx

@@ -1,8 +1,12 @@
-import React from 'react'
-import OwnersPageComponent from './owners.page.component'
+import React, { useEffect } from "react";
+import OwnersPageComponent from "./owners.page.component";
+import { useTranslation } from "react-i18next";
 
 export default function OwnersPageContainer() {
-    return (
-<OwnersPageComponent />
-    )
+  const { t } = useTranslation();
+  useEffect(() => {
+    document.title = t("titles.owners");
+  }, [t]);
+
+  return <OwnersPageComponent />;
 }

client/src/pages/shop/shop.page.component.jsx

@@ -0,0 +1,25 @@
+import { Tabs } from "antd";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import ShopEmployeesContainer from "../../components/shop-employees/shop-employees.container";
+
+export default function ShopPage() {
+  const { t } = useTranslation();
+  useEffect(() => {
+    document.title = t("titles.shop");
+  }, [t]);
+
+  return (
+    <Tabs>
+      <Tabs.TabPane tab="Shop Info" key="info">
+        Shop INfo
+      </Tabs.TabPane>
+      <Tabs.TabPane tab="Employees" key="employees">
+        <ShopEmployeesContainer />
+      </Tabs.TabPane>
+      <Tabs.TabPane tab="Licensing" key="licensing">
+        Licensing
+      </Tabs.TabPane>
+    </Tabs>
+  );
+}

client/src/pages/vehicles/vehicles.page.container.jsx

@@ -1,6 +1,10 @@
-import React from "react";
+import React, { useEffect } from "react";
 import VehiclesPageComponent from "./vehicles.page.component";
-
+import { useTranslation } from "react-i18next";
 export default function VehiclesPageContainer() {
+  const { t } = useTranslation();
+  useEffect(() => {
+    document.title = t("titles.vehicles");
+  }, [t]);
   return <VehiclesPageComponent />;
 }