Fix Formatting issues

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/pages/jobs-detail/jobs-detail.page.component.jsx

@@ -8,64 +8,53 @@ import Icon, {
   SyncOutlined,
   ToolFilled
 } from "@ant-design/icons";
-import {Badge, Button, Divider, Form, notification, Space, Tabs} from "antd";
-import {PageHeader} from "@ant-design/pro-layout";
+import { Badge, Button, Divider, Form, notification, Space, Tabs } from "antd";
+import { PageHeader } from "@ant-design/pro-layout";
 
 import Axios from "axios";
 import dayjs from "../../utils/day";
 import queryString from "query-string";
-import React, {useEffect, useState} from "react";
-import {useTranslation} from "react-i18next";
-import {FaHardHat, FaRegStickyNote, FaShieldAlt, FaTasks} from "react-icons/fa";
-import {connect} from "react-redux";
-import {useLocation, useNavigate} from "react-router-dom";
-import {createStructuredSelector} from "reselect";
-import FormFieldsChanged
-  from "../../components/form-fields-changed-alert/form-fields-changed-alert.component";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { FaHardHat, FaRegStickyNote, FaShieldAlt, FaTasks } from "react-icons/fa";
+import { connect } from "react-redux";
+import { useLocation, useNavigate } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+import FormFieldsChanged from "../../components/form-fields-changed-alert/form-fields-changed-alert.component";
 import JobAuditTrail from "../../components/job-audit-trail/job-audit-trail.component";
 import JobsLinesContainer from "../../components/job-detail-lines/job-lines.container";
 import JobLifecycleComponent from "../../components/job-lifecycle/job-lifecycle.component";
-import JobLineUpsertModalContainer
-  from "../../components/job-lines-upsert-modal/job-lines-upsert-modal.container";
-import JobReconciliationModal
-  from "../../components/job-reconciliation-modal/job-reconciliation.modal.container";
+import JobLineUpsertModalContainer from "../../components/job-lines-upsert-modal/job-lines-upsert-modal.container";
+import JobReconciliationModal from "../../components/job-reconciliation-modal/job-reconciliation.modal.container";
 import JobSyncButton from "../../components/job-sync-button/job-sync-button.component";
 import JobsChangeStatus from "../../components/jobs-change-status/jobs-change-status.component";
 import JobsConvertButton from "../../components/jobs-convert-button/jobs-convert-button.component";
-import JobsDetailDatesComponent
-  from "../../components/jobs-detail-dates/jobs-detail-dates.component";
+import JobsDetailDatesComponent from "../../components/jobs-detail-dates/jobs-detail-dates.component";
 import JobsDetailGeneral from "../../components/jobs-detail-general/jobs-detail-general.component";
-import JobsDetailHeaderActions
-  from "../../components/jobs-detail-header-actions/jobs-detail-header-actions.component";
+import JobsDetailHeaderActions from "../../components/jobs-detail-header-actions/jobs-detail-header-actions.component";
 import JobsDetailHeader from "../../components/jobs-detail-header/jobs-detail-header.component";
-import JobsDetailLaborContainer
-  from "../../components/jobs-detail-labor/jobs-detail-labor.container";
+import JobsDetailLaborContainer from "../../components/jobs-detail-labor/jobs-detail-labor.container";
 import JobsDetailPliContainer from "../../components/jobs-detail-pli/jobs-detail-pli.container";
 import JobsDetailRates from "../../components/jobs-detail-rates/jobs-detail-rates.component";
 import JobsDetailTotals from "../../components/jobs-detail-totals/jobs-detail-totals.component";
-import JobsDocumentsGalleryContainer
-  from "../../components/jobs-documents-gallery/jobs-documents-gallery.container";
-import JobsDocumentsLocalGallery
-  from "../../components/jobs-documents-local-gallery/jobs-documents-local-gallery.container";
+import JobsDocumentsGalleryContainer from "../../components/jobs-documents-gallery/jobs-documents-gallery.container";
+import JobsDocumentsLocalGallery from "../../components/jobs-documents-local-gallery/jobs-documents-local-gallery.container";
 import JobNotesContainer from "../../components/jobs-notes/jobs-notes.container";
-import NoteUpsertModalComponent
-  from "../../components/note-upsert-modal/note-upsert-modal.container";
-import ScheduleJobModalContainer
-  from "../../components/schedule-job-modal/schedule-job-modal.container";
-import {insertAuditTrail} from "../../redux/application/application.actions";
-import {selectJobReadOnly} from "../../redux/application/application.selectors";
-import {setModalContext} from "../../redux/modals/modals.actions";
-import {selectBodyshop, selectCurrentUser} from "../../redux/user/user.selectors";
+import NoteUpsertModalComponent from "../../components/note-upsert-modal/note-upsert-modal.container";
+import ScheduleJobModalContainer from "../../components/schedule-job-modal/schedule-job-modal.container";
+import { insertAuditTrail } from "../../redux/application/application.actions";
+import { selectJobReadOnly } from "../../redux/application/application.selectors";
+import { setModalContext } from "../../redux/modals/modals.actions";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import UndefinedToNull from "../../utils/undefinedtonull";
 import _ from "lodash";
-import JobProfileDataWarning
-  from "../../components/job-profile-data-warning/job-profile-data-warning.component";
-import {DateTimeFormat} from "../../utils/DateFormatter";
+import JobProfileDataWarning from "../../components/job-profile-data-warning/job-profile-data-warning.component";
+import { DateTimeFormat } from "../../utils/DateFormatter";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
-import {HasFeatureAccess} from "../../components/feature-wrapper/feature-wrapper.component";
+import { HasFeatureAccess } from "../../components/feature-wrapper/feature-wrapper.component";
 import TaskListContainer from "../../components/task-list/task-list.container.jsx";
-import {QUERY_JOB_TASKS_PAGINATED} from "../../graphql/tasks.queries.js";
+import { QUERY_JOB_TASKS_PAGINATED } from "../../graphql/tasks.queries.js";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -73,29 +62,35 @@ const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser
 });
 const mapDispatchToProps = (dispatch) => ({
-  setPrintCenterContext: (context) => dispatch(setModalContext({
-    context: context,
-    modal: "printCenter"
-  })),
-  insertAuditTrail: ({jobid, operation, type}) => dispatch(insertAuditTrail({
-    jobid,
-    operation,
-    type
-  }))
+  setPrintCenterContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "printCenter"
+      })
+    ),
+  insertAuditTrail: ({ jobid, operation, type }) =>
+    dispatch(
+      insertAuditTrail({
+        jobid,
+        operation,
+        type
+      })
+    )
 });
 
 export function JobsDetailPage({
-                                 bodyshop,
-                                 setPrintCenterContext,
-                                 jobRO,
-                                 job,
-                                 mutationUpdateJob,
-                                 handleSubmit,
-                                 currentUser,
-                                 insertAuditTrail,
-                                 refetch
-                               }) {
-  const {t} = useTranslation();
+  bodyshop,
+  setPrintCenterContext,
+  jobRO,
+  job,
+  mutationUpdateJob,
+  handleSubmit,
+  currentUser,
+  insertAuditTrail,
+  refetch
+}) {
+  const { t } = useTranslation();
   const [form] = Form.useForm();
   const history = useNavigate();
   const [loading, setLoading] = useState(false);
@@ -111,13 +106,13 @@ export function JobsDetailPage({
 
   useEffect(() => {
     const handleTaskUpdated = async (event) => {
-      await refetch().catch(e => `Something went wrong fetching tasks: ${e.message || ''}`);
+      await refetch().catch((e) => `Something went wrong fetching tasks: ${e.message || ""}`);
     };
-    window.addEventListener('taskUpdated', handleTaskUpdated);
+    window.addEventListener("taskUpdated", handleTaskUpdated);
 
     // Clean up the event listener when the component is unmounted.
     return () => {
-      window.removeEventListener('taskUpdated', handleTaskUpdated);
+      window.removeEventListener("taskUpdated", handleTaskUpdated);
     };
   }, [refetch]);
 
@@ -156,7 +151,7 @@ export function JobsDetailPage({
             };
             return acc;
           }, {}),
-          cieca_pfo: {...job.cieca_pfo, ...values.cieca_pfo}
+          cieca_pfo: { ...job.cieca_pfo, ...values.cieca_pfo }
         }
       }
     });
@@ -251,15 +246,15 @@ export function JobsDetailPage({
         }}
         key="refresh"
       >
-        <SyncOutlined/>
+        <SyncOutlined />
         {t("general.labels.refresh")}
       </Button>
-      <JobsChangeStatus job={job}/>
-      <JobSyncButton job={job}/>
+      <JobsChangeStatus job={job} />
+      <JobSyncButton job={job} />
       <Button
         onClick={() => {
           setPrintCenterContext({
-            actions: {refetch: refetch},
+            actions: { refetch: refetch },
             context: {
               id: job.id,
               job: job,
@@ -269,12 +264,11 @@ export function JobsDetailPage({
         }}
         key="printing"
       >
-        <PrinterFilled/>
+        <PrinterFilled />
         {t("jobs.actions.printCenter")}
       </Button>
-      <JobsConvertButton job={job} refetch={refetch}
-                         parentFormIsFieldsTouched={form.isFieldsTouched}/>
-      <JobsDetailHeaderActions key="actions" job={job} refetch={refetch}/>
+      <JobsConvertButton job={job} refetch={refetch} parentFormIsFieldsTouched={form.isFieldsTouched} />
+      <JobsDetailHeaderActions key="actions" job={job} refetch={refetch} />
       <Button type="primary" loading={loading} disabled={jobRO} onClick={() => form.submit()}>
         {t("general.actions.save")}
       </Button>
@@ -283,10 +277,10 @@ export function JobsDetailPage({
 
   return (
     <div>
-      <ScheduleJobModalContainer/>
-      <JobReconciliationModal/>
-      <JobLineUpsertModalContainer/>
-      <NoteUpsertModalComponent/>
+      <ScheduleJobModalContainer />
+      <JobReconciliationModal />
+      <JobLineUpsertModalContainer />
+      <NoteUpsertModalComponent />
       <Form
         form={form}
         name="JobDetailForm"
@@ -300,120 +294,128 @@ export function JobsDetailPage({
           title={job.ro_number || t("general.labels.na")}
           extra={menuExtra}
         />
-        <JobsDetailHeader job={job}/>
-        <Divider type="horizontal"/>
-        <JobProfileDataWarning job={job}/>
-        <FormFieldsChanged form={form}/>
+        <JobsDetailHeader job={job} />
+        <Divider type="horizontal" />
+        <JobProfileDataWarning job={job} />
+        <FormFieldsChanged form={form} />
         <Tabs
           defaultActiveKey={search.tab}
-          onChange={(key) => history({search: `?tab=${key}`})}
-          tabBarStyle={{fontWeight: "bold", borderBottom: "10px"}}
+          onChange={(key) => history({ search: `?tab=${key}` })}
+          tabBarStyle={{ fontWeight: "bold", borderBottom: "10px" }}
           items={[
             {
               key: "general",
-              icon: <Icon component={FaShieldAlt}/>,
+              icon: <Icon component={FaShieldAlt} />,
               label: t("menus.jobsdetail.general"),
               forceRender: true,
-              children: <JobsDetailGeneral job={job} form={form}/>
+              children: <JobsDetailGeneral job={job} form={form} />
             },
             {
               key: "repairdata",
-              icon: <BarsOutlined/>,
+              icon: <BarsOutlined />,
               label: t("menus.jobsdetail.repairdata"),
               forceRender: true,
-              children: <JobsLinesContainer job={job} joblines={job.joblines} refetch={refetch}
-                                            form={form}/>
+              children: <JobsLinesContainer job={job} joblines={job.joblines} refetch={refetch} form={form} />
             },
             {
               key: "rates",
-              icon: <DollarCircleOutlined/>,
+              icon: <DollarCircleOutlined />,
               label: t("menus.jobsdetail.rates"),
               forceRender: true,
-              children: <JobsDetailRates job={job} form={form}/>
+              children: <JobsDetailRates job={job} form={form} />
             },
             {
               key: "totals",
-              icon: <DollarCircleOutlined/>,
+              icon: <DollarCircleOutlined />,
               label: t("menus.jobsdetail.totals"),
-              children: <JobsDetailTotals job={job} refetch={refetch}/>
+              children: <JobsDetailTotals job={job} refetch={refetch} />
             },
             {
               key: "partssublet",
-              icon: <ToolFilled/>,
-              label: HasFeatureAccess({featureName: "bills", bodyshop})
+              icon: <ToolFilled />,
+              label: HasFeatureAccess({ featureName: "bills", bodyshop })
                 ? t("menus.jobsdetail.partssublet")
                 : t("menus.jobsdetail.parts"),
-              children: <JobsDetailPliContainer job={job}/>
+              children: <JobsDetailPliContainer job={job} />
             },
             ...(InstanceRenderManager({
               imex: true,
               rome: true,
-              promanager: HasFeatureAccess({featureName: "timetickets", bodyshop})
+              promanager: HasFeatureAccess({ featureName: "timetickets", bodyshop })
             })
               ? [
-                {
-                  key: "labor",
-                  icon: <Icon component={FaHardHat}/>,
-                  label: t("menus.jobsdetail.labor"),
-                  children: <JobsDetailLaborContainer job={job} jobId={job.id}/>
-                }
-              ]
+                  {
+                    key: "labor",
+                    icon: <Icon component={FaHardHat} />,
+                    label: t("menus.jobsdetail.labor"),
+                    children: <JobsDetailLaborContainer job={job} jobId={job.id} />
+                  }
+                ]
               : []),
             {
               key: "lifecycle",
-              icon: <BarsOutlined/>,
+              icon: <BarsOutlined />,
               label: t("menus.jobsdetail.lifecycle"),
-              children: <JobLifecycleComponent job={job} statuses={bodyshop.md_ro_statuses}/>
+              children: <JobLifecycleComponent job={job} statuses={bodyshop.md_ro_statuses} />
             },
             {
               key: "dates",
-              icon: <CalendarFilled/>,
+              icon: <CalendarFilled />,
               label: t("menus.jobsdetail.dates"),
               forceRender: true,
-              children: <JobsDetailDatesComponent job={job}/>
+              children: <JobsDetailDatesComponent job={job} />
             },
             ...(InstanceRenderManager({
               imex: true,
               rome: true,
-              promanager: HasFeatureAccess({featureName: "media", bodyshop})
+              promanager: HasFeatureAccess({ featureName: "media", bodyshop })
             })
               ? [
-                {
-                  key: "documents",
-                  icon: <FileImageFilled/>,
-                  label: t("jobs.labels.documents"),
-                  children: bodyshop.uselocalmediaserver ? (
-                    <JobsDocumentsLocalGallery job={job}/>
-                  ) : (
-                    <JobsDocumentsGalleryContainer jobId={job.id}/>
-                  )
-                }
-              ]
+                  {
+                    key: "documents",
+                    icon: <FileImageFilled />,
+                    label: t("jobs.labels.documents"),
+                    children: bodyshop.uselocalmediaserver ? (
+                      <JobsDocumentsLocalGallery job={job} />
+                    ) : (
+                      <JobsDocumentsGalleryContainer jobId={job.id} />
+                    )
+                  }
+                ]
               : []),
             {
               key: "notes",
-              icon: <Icon component={FaRegStickyNote}/>,
+              icon: <Icon component={FaRegStickyNote} />,
               label: t("jobs.labels.notes"),
-              children: <JobNotesContainer jobId={job.id}/>
+              children: <JobNotesContainer jobId={job.id} />
             },
             {
               key: "audit",
-              icon: <HistoryOutlined/>,
+              icon: <HistoryOutlined />,
               label: t("jobs.labels.audit"),
-              children: <JobAuditTrail jobId={job.id}/>
+              children: <JobAuditTrail jobId={job.id} />
             },
             {
-              key: 'tasks',
-              icon: <FaTasks/>,
-              label: <Space direction='horizontal'>
-                {t("jobs.labels.tasks")}{job.tasks_aggregate.aggregate.count > 0 &&
-                <Badge count={job.tasks_aggregate.aggregate.count}/>}
-              </Space>,
-              children: <TaskListContainer currentUser={currentUser} bodyshop={bodyshop}
-                                           relationshipType={'jobid'} relationshipId={job.id}
-                                           query={QUERY_JOB_TASKS_PAGINATED}
-                                           titleTranslation='tasks.titles.job_tasks' showRo={false}/>
-            },
+              key: "tasks",
+              icon: <FaTasks />,
+              label: (
+                <Space direction="horizontal">
+                  {t("jobs.labels.tasks")}
+                  {job.tasks_aggregate.aggregate.count > 0 && <Badge count={job.tasks_aggregate.aggregate.count} />}
+                </Space>
+              ),
+              children: (
+                <TaskListContainer
+                  currentUser={currentUser}
+                  bodyshop={bodyshop}
+                  relationshipType={"jobid"}
+                  relationshipId={job.id}
+                  query={QUERY_JOB_TASKS_PAGINATED}
+                  titleTranslation="tasks.titles.job_tasks"
+                  showRo={false}
+                />
+              )
+            }
           ]}
         />
       </Form>
@@ -424,7 +426,7 @@ export function JobsDetailPage({
 export default connect(mapStateToProps, mapDispatchToProps)(JobsDetailPage);
 
 const transformJobToForm = (job) => {
-  const transformedJob = {...job};
+  const transformedJob = { ...job };
 
   transformedJob.parts_tax_rates = Object.keys(transformedJob.parts_tax_rates).reduce((acc, parttype) => {
     acc[parttype] = Object.keys(transformedJob.parts_tax_rates[parttype]).reduce((innerAcc, key) => {

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

@@ -1,10 +1,10 @@
-import {Button, Collapse, FloatButton, Layout, Space, Spin, Tag} from "antd";
+import { Button, Collapse, FloatButton, Layout, Space, Spin, Tag } from "antd";
 // import preval from "preval.macro";
-import React, {lazy, Suspense, useEffect, useState} from "react";
-import {useTranslation} from "react-i18next";
-import {connect} from "react-redux";
-import {Link, Route, Routes} from "react-router-dom";
-import {createStructuredSelector} from "reselect";
+import React, { lazy, Suspense, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { Link, Route, Routes } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
 import BreadCrumbs from "../../components/breadcrumbs/breadcrumbs.component";
 import ChatAffixContainer from "../../components/chat-affix/chat-affix.container";
 import ConflictComponent from "../../components/conflict/conflict.component";
@@ -17,26 +17,21 @@ import TestComponent from "../../components/_test/test.page";
 import HeaderContainer from "../../components/header/header.container";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import PartnerPingComponent from "../../components/partner-ping/partner-ping.component";
-import PrintCenterModalContainer
-  from "../../components/print-center-modal/print-center-modal.container";
+import PrintCenterModalContainer from "../../components/print-center-modal/print-center-modal.container";
 import ShopSubStatusComponent from "../../components/shop-sub-status/shop-sub-status.component";
-import {requestForToken} from "../../firebase/firebase.utils";
-import {selectBodyshop, selectInstanceConflict} from "../../redux/user/user.selectors";
+import { requestForToken } from "../../firebase/firebase.utils";
+import { selectBodyshop, selectInstanceConflict } from "../../redux/user/user.selectors";
 
 import UpdateAlert from "../../components/update-alert/update-alert.component";
-import {setJoyRideFinished} from "../../redux/application/application.actions.js";
-import {
-  selectEnableJoyRide,
-  selectJoyRideSteps
-} from "../../redux/application/application.selectors.js";
+import { setJoyRideFinished } from "../../redux/application/application.actions.js";
+import { selectEnableJoyRide, selectJoyRideSteps } from "../../redux/application/application.selectors.js";
 import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
 import "./manage.page.styles.scss";
 
-
 const JobsPage = lazy(() => import("../jobs/jobs.page"));
 
-const CardPaymentModalContainer = lazy(() =>
-  import("../../components/card-payment-modal/card-payment-modal.container.")
+const CardPaymentModalContainer = lazy(
+  () => import("../../components/card-payment-modal/card-payment-modal.container.")
 );
 
 const JobsDetailPage = lazy(() => import("../jobs-detail/jobs-detail.page.container"));
@@ -64,8 +59,8 @@ const JobCostingModal = lazy(() => import("../../components/job-costing-modal/jo
 const ReportCenterModal = lazy(() => import("../../components/report-center-modal/report-center-modal.container"));
 const BillEnterModalContainer = lazy(() => import("../../components/bill-enter-modal/bill-enter-modal.container"));
 const TimeTicketModalContainer = lazy(() => import("../../components/time-ticket-modal/time-ticket-modal.container"));
-const TimeTicketModalTask = lazy(() =>
-  import("../../components/time-ticket-task-modal/time-ticket-task-modal.container")
+const TimeTicketModalTask = lazy(
+  () => import("../../components/time-ticket-task-modal/time-ticket-task-modal.container")
 );
 const PaymentModalContainer = lazy(() => import("../../components/payment-modal/payment-modal.container"));
 const ProductionListPage = lazy(() => import("../production-list/production-list.container"));
@@ -106,7 +101,7 @@ const MyTasksPage = lazy(() => import("../tasks/myTasksPageContainer.jsx"));
 const AllTasksPage = lazy(() => import("../tasks/allTasksPageContainer.jsx"));
 
 const TaskUpsertModalContainer = lazy(() => import("../../components/task-upsert-modal/task-upsert-modal.container"));
-const {Content, Footer} = Layout;
+const { Content, Footer } = Layout;
 
 const mapStateToProps = createStructuredSelector({
   conflict: selectInstanceConflict,
@@ -119,8 +114,8 @@ const mapDispatchToProps = (dispatch) => ({
   setJoyRideFinished: (steps) => dispatch(setJoyRideFinished(steps))
 });
 
-export function Manage({conflict, bodyshop, enableJoyRide, joyRideSteps, setJoyRideFinished}) {
-  const {t} = useTranslation();
+export function Manage({ conflict, bodyshop, enableJoyRide, joyRideSteps, setJoyRideFinished }) {
+  const { t } = useTranslation();
   const [chatVisible] = useState(false);
   const [tours, setTours] = useState([]);
 
@@ -156,264 +151,266 @@ export function Manage({conflict, bodyshop, enableJoyRide, joyRideSteps, setJoyR
         />
       }
     >
-      <PaymentModalContainer/>
+      <PaymentModalContainer />
 
-      <CardPaymentModalContainer/>
-      <TaskUpsertModalContainer/>
-      <BreadCrumbs/>
-      <BillEnterModalContainer/>
-      <JobCostingModal/>
-      <ReportCenterModal/>
-      <EmailOverlayContainer/>
-      <TimeTicketModalContainer/>
-      <TimeTicketModalTask/>
-      <PrintCenterModalContainer/>
+      <CardPaymentModalContainer />
+      <TaskUpsertModalContainer />
+      <BreadCrumbs />
+      <BillEnterModalContainer />
+      <JobCostingModal />
+      <ReportCenterModal />
+      <EmailOverlayContainer />
+      <TimeTicketModalContainer />
+      <TimeTicketModalTask />
+      <PrintCenterModalContainer />
       <Routes>
-        <Route path="/_test" element={<TestComponent/>}/>
-        <Route path="/" element={<ManageRootPage/>}/>
+        <Route path="/_test" element={<TestComponent />} />
+        <Route path="/" element={<ManageRootPage />} />
         <Route
           path="/jobs"
           element={
-            <Suspense fallback={<Spin/>}>
-              <JobsPage/>
+            <Suspense fallback={<Spin />}>
+              <JobsPage />
             </Suspense>
           }
         />
         <Route
           path="/jobs/:jobId/intake"
           element={
-            <Suspense fallback={<Spin/>}>
-              <JobIntake/>
+            <Suspense fallback={<Spin />}>
+              <JobIntake />
             </Suspense>
           }
         />
         <Route
           path="/jobs/:jobId/deliver"
           element={
-            <Suspense fallback={<Spin/>}>
-              <JobDeliver/>
+            <Suspense fallback={<Spin />}>
+              <JobDeliver />
             </Suspense>
           }
         />
         <Route
           path="/jobs/:jobId/checklist"
           element={
-            <Suspense fallback={<Spin/>}>
-              <JobChecklistView/>
+            <Suspense fallback={<Spin />}>
+              <JobChecklistView />
             </Suspense>
           }
         />
         <Route
           path="/jobs/:jobId/close"
           element={
-            <Suspense fallback={<Spin/>}>
-              <JobsClose/>
+            <Suspense fallback={<Spin />}>
+              <JobsClose />
             </Suspense>
           }
         />
         <Route
           path="/jobs/:jobId/admin"
           element={
-            <Suspense fallback={<Spin/>}>
-              <JobsAdmin/>
+            <Suspense fallback={<Spin />}>
+              <JobsAdmin />
             </Suspense>
           }
         />
         <Route
           path="/jobs/all"
           element={
-            <Suspense fallback={<Spin/>}>
-              <AllJobs/>
+            <Suspense fallback={<Spin />}>
+              <AllJobs />
             </Suspense>
           }
         />
         <Route
           path="/jobs/ready"
           element={
-            <Suspense fallback={<Spin/>}>
-              <ReadyJobs/>
+            <Suspense fallback={<Spin />}>
+              <ReadyJobs />
             </Suspense>
           }
         />
         <Route
           path="/jobs/new"
           element={
-            <Suspense fallback={<Spin/>}>
-              <JobsCreateContainerPage/>
+            <Suspense fallback={<Spin />}>
+              <JobsCreateContainerPage />
             </Suspense>
           }
         />
         <Route
           path="/jobs/:jobId"
           element={
-            <Suspense fallback={<Spin/>}>
-              <JobsDetailPage/>
+            <Suspense fallback={<Spin />}>
+              <JobsDetailPage />
             </Suspense>
           }
         />
         <Route
           path="/temporarydocs/"
           element={
-            <Suspense fallback={<Spin/>}>
-              <TempDocs/>
+            <Suspense fallback={<Spin />}>
+              <TempDocs />
             </Suspense>
           }
         />
         <Route
-          path='/tasks/mytasks'
+          path="/tasks/mytasks"
           element={
-            <Suspense fallback={<Spin/>}>
-              <MyTasksPage/>
-            </Suspense>}
+            <Suspense fallback={<Spin />}>
+              <MyTasksPage />
+            </Suspense>
+          }
         />
         <Route
-          path='/tasks/alltasks'
+          path="/tasks/alltasks"
           element={
-            <Suspense fallback={<Spin/>}>
-              <AllTasksPage/>
-            </Suspense>}
+            <Suspense fallback={<Spin />}>
+              <AllTasksPage />
+            </Suspense>
+          }
         />
         <Route
           path="/inventory/"
           element={
-            <Suspense fallback={<Spin/>}>
-              <InventoryListPage/>
+            <Suspense fallback={<Spin />}>
+              <InventoryListPage />
             </Suspense>
           }
         />
         <Route
           path="/courtesycars/"
           element={
-            <Suspense fallback={<Spin/>}>
-              <CourtesyCarsPage/>
+            <Suspense fallback={<Spin />}>
+              <CourtesyCarsPage />
             </Suspense>
           }
         />
         <Route
           path="/courtesycars/new"
           element={
-            <Suspense fallback={<Spin/>}>
-              <CourtesyCarCreateContainer/>
+            <Suspense fallback={<Spin />}>
+              <CourtesyCarCreateContainer />
             </Suspense>
           }
         />
         <Route
           path="/courtesycars/contracts"
           element={
-            <Suspense fallback={<Spin/>}>
-              <ContractsList/>
+            <Suspense fallback={<Spin />}>
+              <ContractsList />
             </Suspense>
           }
         />
         <Route
           path="/courtesycars/contracts/new"
           element={
-            <Suspense fallback={<Spin/>}>
-              <ContractCreatePage/>
+            <Suspense fallback={<Spin />}>
+              <ContractCreatePage />
             </Suspense>
           }
         />
         <Route
           path="/courtesycars/contracts/:contractId"
           element={
-            <Suspense fallback={<Spin/>}>
-              <ContractDetailPage/>
+            <Suspense fallback={<Spin />}>
+              <ContractDetailPage />
             </Suspense>
           }
         />
         <Route
           path="/courtesycars/:ccId"
           element={
-            <Suspense fallback={<Spin/>}>
-              <CourtesyCarDetailContainer/>
+            <Suspense fallback={<Spin />}>
+              <CourtesyCarDetailContainer />
             </Suspense>
           }
         />
         <Route
           path="/profile"
           element={
-            <Suspense fallback={<Spin/>}>
-              <ProfilePage/>
+            <Suspense fallback={<Spin />}>
+              <ProfilePage />
             </Suspense>
           }
         />
         <Route
           path="/vehicles"
           element={
-            <Suspense fallback={<Spin/>}>
-              <VehiclesContainer/>
+            <Suspense fallback={<Spin />}>
+              <VehiclesContainer />
             </Suspense>
           }
         />
         <Route
           path="/production/list"
           element={
-            <Suspense fallback={<Spin/>}>
-              <ProductionListPage/>
+            <Suspense fallback={<Spin />}>
+              <ProductionListPage />
             </Suspense>
           }
         />
         <Route
           path="/production/board"
           element={
-            <Suspense fallback={<Spin/>}>
-              <ProductionBoardPage/>
+            <Suspense fallback={<Spin />}>
+              <ProductionBoardPage />
             </Suspense>
           }
         />
         <Route
           path="/vehicles/:vehId"
           element={
-            <Suspense fallback={<Spin/>}>
-              <VehiclesDetailContainer/>
+            <Suspense fallback={<Spin />}>
+              <VehiclesDetailContainer />
             </Suspense>
           }
         />
         <Route
           path="/bills"
           element={
-            <Suspense fallback={<Spin/>}>
-              <BillsListPage/>
+            <Suspense fallback={<Spin />}>
+              <BillsListPage />
             </Suspense>
           }
         />
         <Route
           path="/owners"
           element={
-            <Suspense fallback={<Spin/>}>
-              <OwnersContainer/>
+            <Suspense fallback={<Spin />}>
+              <OwnersContainer />
             </Suspense>
           }
         />
         <Route
           path="/owners/:ownerId"
           element={
-            <Suspense fallback={<Spin/>}>
-              <OwnersDetailContainer/>
+            <Suspense fallback={<Spin />}>
+              <OwnersDetailContainer />
             </Suspense>
           }
         />
         <Route
           path="/schedule"
           element={
-            <Suspense fallback={<Spin/>}>
-              <ScheduleContainer/>
+            <Suspense fallback={<Spin />}>
+              <ScheduleContainer />
             </Suspense>
           }
         />
         <Route
           path="/available"
           element={
-            <Suspense fallback={<Spin/>}>
-              <JobsAvailablePage/>
+            <Suspense fallback={<Spin />}>
+              <JobsAvailablePage />
             </Suspense>
           }
         />
         <Route
           path="/shop"
           element={
-            <Suspense fallback={<Spin/>}>
-              <ShopPage/>
+            <Suspense fallback={<Spin />}>
+              <ShopPage />
             </Suspense>
           }
         />
@@ -426,16 +423,16 @@ export function Manage({conflict, bodyshop, enableJoyRide, joyRideSteps, setJoyR
         <Route
           path="/shop/vendors"
           element={
-            <Suspense fallback={<Spin/>}>
-              <ShopVendorPageContainer/>
+            <Suspense fallback={<Spin />}>
+              <ShopVendorPageContainer />
             </Suspense>
           }
         />
         <Route
           path="/shop/csi"
           element={
-            <Suspense fallback={<Spin/>}>
-              <ShopCsiPageContainer/>
+            <Suspense fallback={<Spin />}>
+              <ShopCsiPageContainer />
             </Suspense>
           }
         />
@@ -443,8 +440,8 @@ export function Manage({conflict, bodyshop, enableJoyRide, joyRideSteps, setJoyR
         <Route
           path="/accounting/qbo"
           element={
-            <Suspense fallback={<Spin/>}>
-              <AccountingQboCallback/>
+            <Suspense fallback={<Spin />}>
+              <AccountingQboCallback />
             </Suspense>
           }
         />
@@ -452,56 +449,56 @@ export function Manage({conflict, bodyshop, enableJoyRide, joyRideSteps, setJoyR
         <Route
           path="/accounting/receivables"
           element={
-            <Suspense fallback={<Spin/>}>
-              <AccountingReceivables/>
+            <Suspense fallback={<Spin />}>
+              <AccountingReceivables />
             </Suspense>
           }
         />
         <Route
           path="/accounting/payables"
           element={
-            <Suspense fallback={<Spin/>}>
-              <AccountingPayables/>
+            <Suspense fallback={<Spin />}>
+              <AccountingPayables />
             </Suspense>
           }
         />
         <Route
           path="/accounting/payments"
           element={
-            <Suspense fallback={<Spin/>}>
-              <AccountingPayments/>
+            <Suspense fallback={<Spin />}>
+              <AccountingPayments />
             </Suspense>
           }
         />
         <Route
           path="/accounting/exportlogs"
           element={
-            <Suspense fallback={<Spin/>}>
-              <ExportLogs/>
+            <Suspense fallback={<Spin />}>
+              <ExportLogs />
             </Suspense>
           }
         />
         <Route
           path="/ttapprovals"
           element={
-            <Suspense fallback={<Spin/>}>
-              <TtApprovals/>
+            <Suspense fallback={<Spin />}>
+              <TtApprovals />
             </Suspense>
           }
         />
         <Route
           path="/partsqueue"
           element={
-            <Suspense fallback={<Spin/>}>
-              <PartsQueue/>
+            <Suspense fallback={<Spin />}>
+              <PartsQueue />
             </Suspense>
           }
         />
         <Route
           path="/phonebook"
           element={
-            <Suspense fallback={<Spin/>}>
-              <Phonebook/>
+            <Suspense fallback={<Spin />}>
+              <Phonebook />
             </Suspense>
           }
         />
@@ -509,65 +506,65 @@ export function Manage({conflict, bodyshop, enableJoyRide, joyRideSteps, setJoyR
         <Route
           path="/payments"
           element={
-            <Suspense fallback={<Spin/>}>
-              <PaymentsAll/>
+            <Suspense fallback={<Spin />}>
+              <PaymentsAll />
             </Suspense>
           }
         />
         <Route
           path="/shiftclock"
           element={
-            <Suspense fallback={<Spin/>}>
-              <ShiftClock/>
+            <Suspense fallback={<Spin />}>
+              <ShiftClock />
             </Suspense>
           }
         />
         <Route
           path="/scoreboard"
           element={
-            <Suspense fallback={<Spin/>}>
-              <Scoreboard/>
+            <Suspense fallback={<Spin />}>
+              <Scoreboard />
             </Suspense>
           }
         />
         <Route
           path="/timetickets"
           element={
-            <Suspense fallback={<Spin/>}>
-              <TimeTicketsAll/>
+            <Suspense fallback={<Spin />}>
+              <TimeTicketsAll />
             </Suspense>
           }
         />
         <Route
           path="/help"
           element={
-            <Suspense fallback={<Spin/>}>
-              <Help/>
+            <Suspense fallback={<Spin />}>
+              <Help />
             </Suspense>
           }
         />
-        <Route path="/emailtest" element={<EmailTest/>}/>
+        <Route path="/emailtest" element={<EmailTest />} />
         <Route
           path="/dashboard"
           element={
-            <Suspense fallback={<Spin/>}>
-              <Dashboard/>
+            <Suspense fallback={<Spin />}>
+              <Dashboard />
             </Suspense>
           }
         />
         <Route
           path="/dms"
           element={
-            <Suspense fallback={<Spin/>}>
-              <Dms/>
+            <Suspense fallback={<Spin />}>
+              <Dms />
             </Suspense>
           }
         />
         <Route
           path="/dmsap"
           element={
-            <Suspense fallback={<Spin/>}>
-              <DmsPayables/>
+            <Suspense fallback={<Spin />}>
+              <DmsPayables />
             </Suspense>
           }
         />
@@ -577,16 +574,16 @@ export function Manage({conflict, bodyshop, enableJoyRide, joyRideSteps, setJoyR
 
   let PageContent;
 
-  if (conflict) PageContent = <ConflictComponent/>;
-  else if (bodyshop && bodyshop.sub_status !== "active") PageContent = <ShopSubStatusComponent/>;
+  if (conflict) PageContent = <ConflictComponent />;
+  else if (bodyshop && bodyshop.sub_status !== "active") PageContent = <ShopSubStatusComponent />;
   else PageContent = AppRouteTable;
 
   return (
     <>
-      <ChatAffixContainer bodyshop={bodyshop} chatVisible={chatVisible}/>
-      <Layout style={{minHeight: "100vh"}} className="layout-container">
-        <UpdateAlert/>
-        <HeaderContainer/>
+      <ChatAffixContainer bodyshop={bodyshop} chatVisible={chatVisible} />
+      <Layout style={{ minHeight: "100vh" }} className="layout-container">
+        <UpdateAlert />
+        <HeaderContainer />
         <Content className="content-container">
           <Joyride
             debug
@@ -603,12 +600,12 @@ export function Manage({conflict, bodyshop, enableJoyRide, joyRideSteps, setJoyR
               }
             }}
           />
-          <PartnerPingComponent/>
-          <Sentry.ErrorBoundary fallback={<ErrorBoundary/>} showDialog>
+          <PartnerPingComponent />
+          <Sentry.ErrorBoundary fallback={<ErrorBoundary />} showDialog>
             {PageContent}
           </Sentry.ErrorBoundary>
 
-          <FloatButton.BackTop style={{right: 100, bottom: 25}}/>
+          <FloatButton.BackTop style={{ right: 100, bottom: 25 }} />
         </Content>
         <Footer>
           <div
@@ -620,7 +617,7 @@ export function Manage({conflict, bodyshop, enableJoyRide, joyRideSteps, setJoyR
               margin: "1rem 0rem"
             }}
           >
-            <div style={{display: "flex"}}>
+            <div style={{ display: "flex" }}>
               <div>
                 {`${InstanceRenderManager({
                   imex: t("titles.imexonline"),
@@ -628,9 +625,9 @@ export function Manage({conflict, bodyshop, enableJoyRide, joyRideSteps, setJoyR
                   promanager: t("titles.promanager")
                 })} - ${import.meta.env.VITE_APP_GIT_SHA_DATE}`}
               </div>
-              <div id="noticeable-widget" style={{marginLeft: "1rem"}}/>
+              <div id="noticeable-widget" style={{ marginLeft: "1rem" }} />
             </div>
-            <Link to="/disclaimer" target="_blank" style={{color: "#ccc"}}>
+            <Link to="/disclaimer" target="_blank" style={{ color: "#ccc" }}>
               Disclaimer & Notices
             </Link>
           </div>
@@ -647,8 +644,7 @@ export function Manage({conflict, bodyshop, enableJoyRide, joyRideSteps, setJoyR
                       Get Tours
                     </Button>
                     {tours.map((tour) => (
-                      <Tag key={tour.id}
-                           onClick={() => window.productFruits.api.tours.tryStartTour(tour.id)}>
+                      <Tag key={tour.id} onClick={() => window.productFruits.api.tours.tryStartTour(tour.id)}>
                         {tour.name}
                       </Tag>
                     ))}

client/src/pages/tasks/allTasksPageContainer.jsx

@@ -1,75 +1,70 @@
-import React, {useEffect} from "react";
-import {useTranslation} from "react-i18next";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import TasksPageComponent from "./tasks.page.component";
 import queryString from "query-string";
 
-import {connect} from "react-redux";
-import {createStructuredSelector} from "reselect";
-import {setBreadcrumbs, setSelectedHeader} from "../../redux/application/application.actions";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
 import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
-import {selectBodyshop, selectCurrentUser} from "../../redux/user/user.selectors.js";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js";
 import TaskPageTypes from "./taskPageTypes.jsx";
-import {setModalContext} from "../../redux/modals/modals.actions.js";
-import {useLocation} from "react-router-dom";
+import { setModalContext } from "../../redux/modals/modals.actions.js";
+import { useLocation } from "react-router-dom";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
-  currentUser: selectCurrentUser,
+  currentUser: selectCurrentUser
 });
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
   setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
-  setTaskUpsertContext: (context) => dispatch(setModalContext({context, modal: 'taskUpsert'})),
+  setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
 });
 
 export function MyTasksPageContainer({
-                                       bodyshop,
-                                       currentUser,
-                                       setBreadcrumbs,
-                                       setSelectedHeader,
-                                       setTaskUpsertContext
-                                     }) {
-  const {t} = useTranslation();
-  const searchParams = queryString.parse((useLocation().search));
+  bodyshop,
+  currentUser,
+  setBreadcrumbs,
+  setSelectedHeader,
+  setTaskUpsertContext
+}) {
+  const { t } = useTranslation();
+  const searchParams = queryString.parse(useLocation().search);
   useEffect(() => {
     document.title = t("titles.all_tasks", {
       app: InstanceRenderManager({
-        imex: '$t(titles.imexonline)',
-        rome: '$t(titles.romeonline)',
-        promanager: '$t(titles.promanager)'
+        imex: "$t(titles.imexonline)",
+        rome: "$t(titles.romeonline)",
+        promanager: "$t(titles.promanager)"
       })
     });
     setSelectedHeader("all_tasks");
     setBreadcrumbs([
       {
         link: "/manage/tasks/alltasks",
-        label: t("titles.bc.all_tasks"),
-      },]);
+        label: t("titles.bc.all_tasks")
+      }
+    ]);
   }, [t, setBreadcrumbs, setSelectedHeader]);
 
   // This takes care of the ability to deep link a task from the URL (Dispatches the modal)
   useEffect(() => {
     // Check for a query string in the URL
     const urlParams = new URLSearchParams(searchParams);
-    const taskId = urlParams.get('taskid');
+    const taskId = urlParams.get("taskid");
     if (taskId) {
       setTaskUpsertContext({
         context: {
-          taskId,
-        },
+          taskId
+        }
       });
-      urlParams.delete('taskid');
+      urlParams.delete("taskid");
     }
   }, [setTaskUpsertContext]);
 
-  return (
-    <TasksPageComponent type={TaskPageTypes.ALL_TASKS} currentUser={currentUser}
-                        bodyshop={bodyshop}/>
-  );
+  return <TasksPageComponent type={TaskPageTypes.ALL_TASKS} currentUser={currentUser} bodyshop={bodyshop} />;
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(MyTasksPageContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(MyTasksPageContainer);

client/src/pages/tasks/myTasksPageContainer.jsx

@@ -1,49 +1,44 @@
-import React, {useEffect} from "react";
-import {useTranslation} from "react-i18next";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import TasksPageComponent from "./tasks.page.component";
 
-import {connect} from "react-redux";
-import {createStructuredSelector} from "reselect";
-import {setBreadcrumbs, setSelectedHeader} from "../../redux/application/application.actions";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
 import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
-import {selectBodyshop, selectCurrentUser} from "../../redux/user/user.selectors.js";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js";
 import TaskPageTypes from "./taskPageTypes.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
-  currentUser: selectCurrentUser,
+  currentUser: selectCurrentUser
 });
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
-  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key))
 });
 
-export function MyTasksPageContainer({bodyshop, currentUser, setBreadcrumbs, setSelectedHeader}) {
-  const {t} = useTranslation();
+export function MyTasksPageContainer({ bodyshop, currentUser, setBreadcrumbs, setSelectedHeader }) {
+  const { t } = useTranslation();
   useEffect(() => {
     document.title = t("titles.my_tasks", {
       app: InstanceRenderManager({
-        imex: '$t(titles.imexonline)',
-        rome: '$t(titles.romeonline)',
-        promanager: '$t(titles.promanager)'
+        imex: "$t(titles.imexonline)",
+        rome: "$t(titles.romeonline)",
+        promanager: "$t(titles.promanager)"
       })
     });
     setSelectedHeader("my_tasks");
     setBreadcrumbs([
       {
         link: "/manage/tasks/mytasks",
-        label: t("titles.bc.my_tasks"),
-      },]);
+        label: t("titles.bc.my_tasks")
+      }
+    ]);
   }, [t, setBreadcrumbs, setSelectedHeader]);
 
-  return (
-    <TasksPageComponent type={TaskPageTypes.MY_TASKS} currentUser={currentUser}
-                        bodyshop={bodyshop}/>
-  );
+  return <TasksPageComponent type={TaskPageTypes.MY_TASKS} currentUser={currentUser} bodyshop={bodyshop} />;
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(MyTasksPageContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(MyTasksPageContainer);

client/src/pages/tasks/taskPageTypes.jsx

@@ -1,6 +1,6 @@
 export const TaskPageTypes = {
-  MY_TASKS: 'myTasks',
-  ALL_TASKS: 'allTasks',
+  MY_TASKS: "myTasks",
+  ALL_TASKS: "allTasks"
 };
 
 export default TaskPageTypes;

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

@@ -1,21 +1,32 @@
 import React from "react";
 import TaskListContainer from "../../components/task-list/task-list.container.jsx";
-import {QUERY_ALL_TASKS_PAGINATED, QUERY_MY_TASKS_PAGINATED} from "../../graphql/tasks.queries.js";
+import { QUERY_ALL_TASKS_PAGINATED, QUERY_MY_TASKS_PAGINATED } from "../../graphql/tasks.queries.js";
 import taskPageTypes from "./taskPageTypes.jsx";
 
-export default function TasksPageComponent({bodyshop, currentUser, type}) {
+export default function TasksPageComponent({ bodyshop, currentUser, type }) {
   switch (type) {
     case taskPageTypes.MY_TASKS:
-      return <TaskListContainer onlyMine={true} relationshipId={currentUser.email}
-                                relationshipType={'user'} query={QUERY_MY_TASKS_PAGINATED}
-                                bodyshop={bodyshop} titleTranslation={'tasks.titles.my_tasks'}
-                                currentUser={currentUser}/>
+      return (
+        <TaskListContainer
+          onlyMine={true}
+          relationshipId={currentUser.email}
+          relationshipType={"user"}
+          query={QUERY_MY_TASKS_PAGINATED}
+          bodyshop={bodyshop}
+          titleTranslation={"tasks.titles.my_tasks"}
+          currentUser={currentUser}
+        />
+      );
     case taskPageTypes.ALL_TASKS:
-      return <TaskListContainer query={QUERY_ALL_TASKS_PAGINATED} bodyshop={bodyshop}
-                                titleTranslation={'tasks.titles.all_tasks'}
-                                currentUser={currentUser}/>
+      return (
+        <TaskListContainer
+          query={QUERY_ALL_TASKS_PAGINATED}
+          bodyshop={bodyshop}
+          titleTranslation={"tasks.titles.all_tasks"}
+          currentUser={currentUser}
+        />
+      );
     default:
-      return <></>
+      return <></>;
   }
-
 }