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

import { BackTop, Layout } from "antd";
import React, { lazy, Suspense, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { Route, Switch } from "react-router-dom";
import ErrorBoundary from "../../components/error-boundary/error-boundary.component";
import FooterComponent from "../../components/footer/footer.component";
//Component Imports
import HeaderContainer from "../../components/header/header.container";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
import "./manage.page.styles.scss";
import BreadCrumbs from "../../components/breadcrumbs/breadcrumbs.component";
import PrintCenterModalContainer from "../../components/print-center-modal/print-center-modal.container";
import ChatAffixContainer from "../../components/chat-affix/chat-affix.container";
import FcmNotification from "../../components/fcm-notification/fcm-notification.component";
const ManageRootPage = lazy(() =>
  import("../manage-root/manage-root.page.container")
);
const JobsPage = lazy(() => import("../jobs/jobs.page"));
const JobsDetailPage = lazy(() =>
  import("../jobs-detail/jobs-detail.page.container")
);
const ProfilePage = lazy(() => import("../profile/profile.container.page"));
const JobsAvailablePage = lazy(() =>
  import("../jobs-available/jobs-available.page.container")
);
const ScheduleContainer = lazy(() =>
  import("../schedule/schedule.page.container")
);
const VehiclesContainer = lazy(() =>
  import("../vehicles/vehicles.page.container")
);
const VehiclesDetailContainer = lazy(() =>
  import("../vehicles-detail/vehicles-detail.page.container")
);
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 ShopVendorPageContainer = lazy(() =>
  import("../shop-vendor/shop-vendor.page.container")
);
const EmailOverlayContainer = lazy(() =>
  import("../../components/email-overlay/email-overlay.container.jsx")
);
const JobsCreateContainerPage = lazy(() =>
  import("../jobs-create/jobs-create.container")
);
const CourtesyCarCreateContainer = lazy(() =>
  import("../courtesy-car-create/courtesy-car-create.page.container")
);
const CourtesyCarDetailContainer = lazy(() =>
  import("../courtesy-car-detail/courtesy-car-detail.page.container")
);
const CourtesyCarsPage = lazy(() =>
  import("../courtesy-cars/courtesy-cars.page.container")
);
const ContractCreatePage = lazy(() =>
  import("../contract-create/contract-create.page.container")
);
const ContractDetailPage = lazy(() =>
  import("../contract-detail/contract-detail.page.container")
);
const ContractsList = lazy(() =>
  import("../contracts/contracts.page.container")
);
const InvoicesListPage = lazy(() =>
  import("../invoices/invoices.page.container")
);
const InvoiceDetailPage = lazy(() =>
  import("../invoice-detail/invoice-detail.page.container")
);
const EnterInvoiceModalContainer = lazy(() =>
  import("../../components/invoice-enter-modal/invoice-enter-modal.container")
);
const TimeTicketModalContainer = lazy(() =>
  import("../../components/time-ticket-modal/time-ticket-modal.container")
);
const ProductionListPage = lazy(() =>
  import("../production-list/production-list.container")
);
const ProductionBoardPage = lazy(() =>
  import("../production-board/production-board.container")
);
const { Header, Content, Footer } = Layout;

export default function Manage({ match }) {
  const { t } = useTranslation();

  useEffect(() => {
    document.title = t("titles.app");
  }, [t]);

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Header>
        <HeaderContainer />
      </Header>
      <Layout>
        <Content
          className='content-container'
          style={{ padding: "0em 4em 4em" }}>
          <FcmNotification />
          <ErrorBoundary>
            <Suspense
              fallback={
                <LoadingSpinner message={t("general.labels.loadingapp")} />
              }>
              <BreadCrumbs />
              <EnterInvoiceModalContainer />
              <EmailOverlayContainer />
              <TimeTicketModalContainer />
              <PrintCenterModalContainer />
              <Route exact path={`${match.path}`} component={ManageRootPage} />
              <Route exact path={`${match.path}/jobs`} component={JobsPage} />
              <Switch>
                <Route
                  exact
                  path={`${match.path}/jobs/new`}
                  component={JobsCreateContainerPage}
                />
                <Route
                  exact
                  path={`${match.path}/jobs/:jobId`}
                  component={JobsDetailPage}
                />
              </Switch>
              <Route
                exact
                path={`${match.path}/courtesycars/`}
                component={CourtesyCarsPage}
              />
              <Switch>
                <Route
                  exact
                  path={`${match.path}/courtesycars/new`}
                  component={CourtesyCarCreateContainer}
                />

                <Route
                  exact
                  path={`${match.path}/courtesycars/contracts`}
                  component={ContractsList}
                />

                <Route
                  exact
                  path={`${match.path}/courtesycars/contracts/new`}
                  component={ContractCreatePage}
                />
                <Route
                  exact
                  path={`${match.path}/courtesycars/contracts/:contractId`}
                  component={ContractDetailPage}
                />

                <Route
                  exact
                  path={`${match.path}/courtesycars/:ccId`}
                  component={CourtesyCarDetailContainer}
                />
              </Switch>
              <Route
                exact
                path={`${match.path}/profile`}
                component={ProfilePage}
              />
              <Route
                exact
                path={`${match.path}/vehicles`}
                component={VehiclesContainer}
              />
              <Route
                exact
                path={`${match.path}/production/list`}
                component={ProductionListPage}
              />
              <Route
                exact
                path={`${match.path}/production/board`}
                component={ProductionBoardPage}
              />
              <Route
                exact
                path={`${match.path}/vehicles/:vehId`}
                component={VehiclesDetailContainer}
              />

              <Route
                exact
                path={`${match.path}/invoices`}
                component={InvoicesListPage}
              />
              <Route
                exact
                path={`${match.path}/invoices/:invoiceId`}
                component={InvoiceDetailPage}
              />

              <Route
                exact
                path={`${match.path}/owners`}
                component={OwnersContainer}
              />
              <Route
                exact
                path={`${match.path}/owners/:ownerId`}
                component={OwnersDetailContainer}
              />
              <Route
                exact
                path={`${match.path}/schedule`}
                component={ScheduleContainer}
              />
              <Route
                exact
                path={`${match.path}/available`}
                component={JobsAvailablePage}
              />
              <Route exact path={`${match.path}/shop/`} component={ShopPage} />
              <Route
                exact
                path={`${match.path}/shop/vendors`}
                component={ShopVendorPageContainer}
              />
            </Suspense>
          </ErrorBoundary>
        </Content>
      </Layout>
      <Footer>
        <FooterComponent />
      </Footer>
      <ChatAffixContainer />
      <BackTop />
    </Layout>
  );
}