IO-3255 Initial parts management changes.

2025-06-11 10:29:58 -07:00
parent d835021069
commit 92369fceba
15 changed files with 1054 additions and 73 deletions
--- a/client/src/pages/jobs-detail/jobs-detail.page.component.jsx
+++ b/client/src/pages/jobs-detail/jobs-detail.page.component.jsx
@@ -487,7 +487,7 @@ export function JobsDetailPage({

 export default connect(mapStateToProps, mapDispatchToProps)(JobsDetailPage);

-const transformJobToForm = (job) => {
+export const transformJobToForm = (job) => {
  const transformedJob = { ...job };

  transformedJob.parts_tax_rates = Object.keys(transformedJob.parts_tax_rates).reduce((acc, parttype) => {
--- a/client/src/pages/manage/manage.page.component.jsx
+++ b/client/src/pages/manage/manage.page.component.jsx
@@ -23,7 +23,6 @@ import ShopSubStatusComponent from "../../components/shop-sub-status/shop-sub-st
 import { selectBodyshop, selectInstanceConflict } from "../../redux/user/user.selectors";
 import UpdateAlert from "../../components/update-alert/update-alert.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
-import "./manage.page.styles.scss";
 import WssStatusDisplayComponent from "../../components/wss-status-display/wss-status-display.component.jsx";
 import { selectAlerts } from "../../redux/application/application.selectors.js";
 import { addAlerts } from "../../redux/application/application.actions.js";
--- a/client/src/pages/manage/manage.page.styles.scss
+++ b/client/src/pages/manage/manage.page.styles.scss
@@ -1,8 +0,0 @@
-.content-container {
-  padding: 1rem;
-}
-
-.layout-container {
-  // height: 100vh;
-  // overflow-y: auto;
-}
--- a/client/src/pages/simplified-parts-jobs-detail/simplified-parts-jobs-detail.component.jsx
+++ b/client/src/pages/simplified-parts-jobs-detail/simplified-parts-jobs-detail.component.jsx
@@ -0,0 +1,214 @@
+import { BarsOutlined, PrinterFilled, SyncOutlined, ToolFilled } from "@ant-design/icons";
+import { PageHeader } from "@ant-design/pro-layout";
+import { useQuery } from "@apollo/client";
+import { Button, Divider, Form, Space, Tabs } from "antd";
+import Axios from "axios";
+import _ from "lodash";
+import queryString from "query-string";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+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.jsx";
+import JobsLinesContainer from "../../components/job-detail-lines/job-lines.container.jsx";
+import JobLineUpsertModalContainer from "../../components/job-lines-upsert-modal/job-lines-upsert-modal.container.jsx";
+import JobProfileDataWarning from "../../components/job-profile-data-warning/job-profile-data-warning.component.jsx";
+import JobsChangeStatus from "../../components/jobs-change-status/jobs-change-status.component.jsx";
+import JobsDetailHeaderActions from "../../components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx";
+import JobsDetailHeader from "../../components/jobs-detail-header/jobs-detail-header.component.jsx";
+import JobsDetailPliContainer from "../../components/jobs-detail-pli/jobs-detail-pli.container.jsx";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
+import { QUERY_PARTS_BILLS_BY_JOBID } from "../../graphql/bills.queries.js";
+import { insertAuditTrail } from "../../redux/application/application.actions.js";
+import { selectJobReadOnly } from "../../redux/application/application.selectors.js";
+import { setModalContext } from "../../redux/modals/modals.actions.js";
+import { selectBodyshop } from "../../redux/user/user.selectors.js";
+import AuditTrailMapping from "../../utils/AuditTrailMappings.js";
+import { DateTimeFormat } from "../../utils/DateFormatter.jsx";
+import dayjs from "../../utils/day.js";
+import UndefinedToNull from "../../utils/undefinedtonull.js";
+import { transformJobToForm } from "../jobs-detail/jobs-detail.page.component.jsx";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  jobRO: selectJobReadOnly
+});
+const mapDispatchToProps = (dispatch) => ({
+  setPrintCenterContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "printCenter"
+      })
+    ),
+  insertAuditTrail: ({ jobid, operation, type }) =>
+    dispatch(
+      insertAuditTrail({
+        jobid,
+        operation,
+        type
+      })
+    )
+});
+
+export function SimplifiedPartsJobDetailComponent({
+  bodyshop,
+  setPrintCenterContext,
+  jobRO,
+  job,
+  mutationUpdateJob,
+  insertAuditTrail,
+  refetch
+}) {
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+  const history = useNavigate();
+  const [loading, setLoading] = useState(false);
+  const search = queryString.parse(useLocation().search);
+  const formItemLayout = {
+    layout: "vertical"
+  };
+  const billsQuery = useQuery(QUERY_PARTS_BILLS_BY_JOBID, {
+    variables: { jobid: job.id },
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only"
+  });
+  const notification = useNotification();
+  const { scenarioNotificationsOn } = useSocket();
+
+  useEffect(() => {
+    //form.setFieldsValue(transormJobToForm(job));
+    form.resetFields();
+  }, [form, job]);
+
+  const handleBillOnRowClick = (record) => {
+    if (record) {
+      if (record.id) {
+        search.billid = record.id;
+        history({ search: queryString.stringify(search) });
+      }
+    } else {
+      delete search.billid;
+      history({ search: queryString.stringify(search) });
+    }
+  };
+
+  const handlePartsOrderOnRowClick = (record) => {
+    if (record) {
+      if (record.id) {
+        search.partsorderid = record.id;
+        history({ search: queryString.stringify(search) });
+      }
+    } else {
+      delete search.partsorderid;
+      history({ search: queryString.stringify(search) });
+    }
+  };
+
+  const handlePartsDispatchOnRowClick = (record) => {
+    if (record) {
+      if (record.id) {
+        search.partsdispatchid = record.id;
+        history.push({ search: queryString.stringify(search) });
+      }
+    } else {
+      delete search.partsdispatchid;
+      history.push({ search: queryString.stringify(search) });
+    }
+  };
+
+  const menuExtra = (
+    <Space wrap>
+      <Button
+        onClick={() => {
+          refetch();
+        }}
+        key="refresh"
+      >
+        <SyncOutlined />
+        {t("general.labels.refresh")}
+      </Button>
+      <JobsChangeStatus job={job} />
+      <Button
+        onClick={() => {
+          setPrintCenterContext({
+            actions: { refetch: refetch },
+            context: {
+              id: job.id,
+              job: job,
+              type: "job"
+            }
+          });
+        }}
+        key="printing"
+      >
+        <PrinterFilled />
+        {t("jobs.actions.printCenter")}
+      </Button>
+
+      <JobsDetailHeaderActions key="actions" job={job} refetch={refetch} />
+      <Button type="primary" loading={loading} disabled={jobRO} onClick={() => form.submit()}>
+        {t("general.actions.save")}
+      </Button>
+    </Space>
+  );
+
+  return (
+    <div>
+      <JobLineUpsertModalContainer />
+
+      <PageHeader title={<Space>{job.ro_number || t("general.labels.na")}</Space>} extra={menuExtra} />
+      <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" }}
+        items={[
+          {
+            key: "repairdata",
+            icon: <BarsOutlined />,
+            id: "job-details-repairdata",
+            label: t("menus.jobsdetail.repairdata"),
+            forceRender: true,
+            children: (
+              <JobsLinesContainer
+                job={job}
+                joblines={job.joblines}
+                billsQuery={billsQuery}
+                handleBillOnRowClick={handleBillOnRowClick}
+                handlePartsOrderOnRowClick={handlePartsOrderOnRowClick}
+                handlePartsDispatchOnRowClick={handlePartsDispatchOnRowClick}
+                refetch={refetch}
+                form={form}
+                simple
+              />
+            )
+          },
+
+          {
+            key: "partssublet",
+            id: "job-details-partssublet",
+            icon: <ToolFilled />,
+            label: t("menus.jobsdetail.partssublet"),
+            children: (
+              <JobsDetailPliContainer
+                job={job}
+                billsQuery={billsQuery}
+                handleBillOnRowClick={handleBillOnRowClick}
+                handlePartsOrderOnRowClick={handlePartsOrderOnRowClick}
+                handlePartsDispatchOnRowClick={handlePartsDispatchOnRowClick}
+              />
+            )
+          }
+        ]}
+      />
+    </div>
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SimplifiedPartsJobDetailComponent);
--- a/client/src/pages/simplified-parts-jobs-detail/simplified-parts-jobs-detail.container.jsx
+++ b/client/src/pages/simplified-parts-jobs-detail/simplified-parts-jobs-detail.container.jsx
@@ -0,0 +1,103 @@
+import { useQuery } from "@apollo/client";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { useParams } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+import AlertComponent from "../../components/alert/alert.component";
+import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
+import NotFound from "../../components/not-found/not-found.component";
+import { OwnerNameDisplayFunction } from "../../components/owner-name-display/owner-name-display.component";
+import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
+import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
+import {
+  addRecentItem,
+  setBreadcrumbs,
+  setJobReadOnly,
+  setSelectedHeader
+} from "../../redux/application/application.actions";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { CreateRecentItem } from "../../utils/create-recent-item";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import IsJobReadOnly from "../../utils/jobReadOnly";
+import SimplifiedPartsJobsDetailComponent from "./simplified-parts-jobs-detail.component";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  addRecentItem: (item) => dispatch(addRecentItem(item)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
+  setJobReadOnly: (bool) => dispatch(setJobReadOnly(bool))
+});
+
+function SimplifiedPartsJobsDetailContainer({ setBreadcrumbs, addRecentItem, setSelectedHeader, setJobReadOnly }) {
+  const { jobId } = useParams();
+  const { t } = useTranslation();
+
+  const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, {
+    variables: { id: jobId },
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only"
+  });
+
+  useEffect(() => {
+    setSelectedHeader("activejobs");
+    document.title = loading
+      ? InstanceRenderManager({
+          imex: t("titles.imexonline"),
+          rome: t("titles.romeonline")
+        })
+      : error
+        ? InstanceRenderManager({
+            imex: t("titles.imexonline"),
+            rome: t("titles.romeonline")
+          })
+        : t("titles.jobsdetail", {
+            app: InstanceRenderManager({
+              imex: "$t(titles.imexonline)",
+              rome: "$t(titles.romeonline)"
+            }),
+            ro_number: (data.jobs_by_pk && data.jobs_by_pk.ro_number) || t("general.labels.na")
+          });
+    setBreadcrumbs([
+      { link: "/parts/jobs", label: t("titles.bc.jobs") },
+      {
+        link: `/parts/jobs/${jobId}`,
+        label: t("titles.bc.jobs-detail", {
+          number: (data && data.jobs_by_pk && data.jobs_by_pk.ro_number) || t("general.labels.na")
+        })
+      }
+    ]);
+
+    if (data && data.jobs_by_pk) {
+      setJobReadOnly(IsJobReadOnly(data.jobs_by_pk));
+
+      addRecentItem(
+        CreateRecentItem(
+          jobId,
+          "job",
+
+          `${data.jobs_by_pk.ro_number || t("general.labels.na")} | ${OwnerNameDisplayFunction(data.jobs_by_pk)}`,
+          `/manage/jobs/${jobId}`
+        )
+      );
+    }
+  }, [loading, data, t, error, setBreadcrumbs, jobId, addRecentItem, setSelectedHeader, setJobReadOnly]);
+
+  if (loading) return <SpinComponent />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (!data.jobs_by_pk) return <NotFound />;
+
+  return data.jobs_by_pk ? (
+    <RbacWrapper action="jobs:detail">
+      <SimplifiedPartsJobsDetailComponent job={data.jobs_by_pk} refetch={refetch} />
+    </RbacWrapper>
+  ) : (
+    <AlertComponent message={t("jobs.errors.noaccess")} type="error" />
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SimplifiedPartsJobsDetailContainer);
--- a/client/src/pages/simplified-parts-jobs/simplified-parts-jobs.page.jsx
+++ b/client/src/pages/simplified-parts-jobs/simplified-parts-jobs.page.jsx
@@ -0,0 +1,36 @@
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
+import SimplifiedPartsJobsListContainer from "../../components/simplified-parts-jobs-list/simplified-parts-jobs-list.container";
+import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
+
+const mapDispatchToProps = (dispatch) => ({
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key))
+});
+
+export function SimplifiedPartsJobsPage({ setBreadcrumbs, setSelectedHeader }) {
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    document.title = t("titles.simplified-parts-jobs", {
+      app: InstanceRenderManager({
+        imex: "$t(titles.imexonline)",
+        rome: "$t(titles.romeonline)"
+      })
+    });
+    setSelectedHeader("parts-queue");
+    setBreadcrumbs([{ link: "/parts", label: t("titles.bc.simplified-parts-jobs") }]);
+  }, [setBreadcrumbs, t, setSelectedHeader]);
+
+  return (
+    <RbacWrapper action="jobs:partsqueue">
+      <SimplifiedPartsJobsListContainer />
+      {/* <PartsQueueDetailCard /> */}
+    </RbacWrapper>
+  );
+}
+
+export default connect(null, mapDispatchToProps)(SimplifiedPartsJobsPage);
--- a/client/src/pages/simplified-parts/simplified-parts.page.component.jsx
+++ b/client/src/pages/simplified-parts/simplified-parts.page.component.jsx
@@ -0,0 +1,258 @@
+import { AlertOutlined, BulbOutlined } from "@ant-design/icons";
+import * as Sentry from "@sentry/react";
+import { Button, FloatButton, Layout, Space, Spin } from "antd";
+import { 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.jsx";
+import ConflictComponent from "../../components/conflict/conflict.component.jsx";
+import ErrorBoundary from "../../components/error-boundary/error-boundary.component.jsx";
+import HeaderContainer from "../../components/header/header.container.jsx";
+import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component.jsx";
+import PrintCenterModalContainer from "../../components/print-center-modal/print-center-modal.container.jsx";
+import ShopSubStatusComponent from "../../components/shop-sub-status/shop-sub-status.component.jsx";
+import UpdateAlert from "../../components/update-alert/update-alert.component.jsx";
+import WssStatusDisplayComponent from "../../components/wss-status-display/wss-status-display.component.jsx";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
+import { addAlerts } from "../../redux/application/application.actions.js";
+import { selectAlerts } from "../../redux/application/application.selectors.js";
+import { selectBodyshop, selectInstanceConflict } from "../../redux/user/user.selectors.js";
+import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
+
+const SimplifiedPartsJobsPage = lazy(() => import("../simplified-parts-jobs/simplified-parts-jobs.page.jsx"));
+const SimplifiedPartsJobsDetailPage = lazy(
+  () => import("../simplified-parts-jobs-detail/simplified-parts-jobs-detail.container.jsx")
+);
+const ShopPage = lazy(() => import("../shop/shop.page.component.jsx"));
+const ShopVendorPageContainer = lazy(() => import("../shop-vendor/shop-vendor.page.container.jsx"));
+const EmailOverlayContainer = lazy(() => import("../../components/email-overlay/email-overlay.container.jsx"));
+const FeatureRequestPage = lazy(() => import("../feature-request/feature-request.page.jsx"));
+const JobCostingModal = lazy(() => import("../../components/job-costing-modal/job-costing-modal.container.jsx"));
+const ReportCenterModal = lazy(() => import("../../components/report-center-modal/report-center-modal.container.jsx"));
+const BillEnterModalContainer = lazy(() => import("../../components/bill-enter-modal/bill-enter-modal.container.jsx"));
+const Help = lazy(() => import("../help/help.page.jsx"));
+
+const { Content, Footer } = Layout;
+
+const mapStateToProps = createStructuredSelector({
+  conflict: selectInstanceConflict,
+  bodyshop: selectBodyshop,
+  alerts: selectAlerts
+});
+
+const ALERT_FILE_URL = InstanceRenderManager({
+  imex: "https://images.imex.online/alerts/alerts-imex.json",
+  rome: "https://images.imex.online/alerts/alerts-rome.json"
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  setAlerts: (alerts) => dispatch(addAlerts(alerts))
+});
+
+export function SimplifiedPartsPage({ conflict, bodyshop, alerts, setAlerts }) {
+  const { t } = useTranslation();
+  const { socket, clientId } = useSocket();
+  const notification = useNotification();
+
+  // State to track displayed alerts
+  const [displayedAlertIds, setDisplayedAlertIds] = useState([]);
+
+  // Fetch displayed alerts from localStorage on mount
+  useEffect(() => {
+    const displayedAlerts = JSON.parse(localStorage.getItem("displayedAlerts") || "[]");
+    setDisplayedAlertIds(displayedAlerts);
+  }, []);
+
+  // Fetch alerts from the JSON file and dispatch to Redux store
+  useEffect(() => {
+    const fetchAlerts = async () => {
+      try {
+        const response = await fetch(ALERT_FILE_URL);
+        const fetchedAlerts = await response.json();
+        setAlerts(fetchedAlerts);
+      } catch (error) {
+        console.warn("Error fetching alerts:", error.message);
+      }
+    };
+
+    fetchAlerts().catch((err) => `Error fetching Bodyshop Alerts: ${err?.message || ""}`);
+  }, [setAlerts]);
+
+  // Use useEffect to watch for new alerts
+  useEffect(() => {
+    if (alerts && Object.keys(alerts).length > 0) {
+      // Convert the alerts object into an array
+      const alertArray = Object.values(alerts);
+
+      // Filter out alerts that have already been dismissed
+      const newAlerts = alertArray.filter((alert) => !displayedAlertIds.includes(alert.id));
+
+      newAlerts.forEach((alert) => {
+        // Display the notification
+        notification.open({
+          key: "notification-alerts-" + alert.id,
+          message: alert.message,
+          description: alert.description,
+          type: alert.type || "info",
+          duration: 0,
+          closable: true,
+          onClose: () => {
+            // When the notification is closed, update displayed alerts state and localStorage
+            setDisplayedAlertIds((prevIds) => {
+              const updatedIds = [...prevIds, alert.id];
+              localStorage.setItem("displayedAlerts", JSON.stringify(updatedIds));
+              return updatedIds;
+            });
+          }
+        });
+      });
+    }
+  }, [alerts, displayedAlertIds, notification]);
+
+  useEffect(() => {
+    window.Canny("initChangelog", {
+      appID: "680bd2c7ee501290377f6686",
+      position: "top",
+      align: "left",
+      theme: "light" // options: light [default], dark, auto
+    });
+  }, []);
+
+  useEffect(() => {
+    document.title = InstanceRenderManager({
+      imex: t("titles.imexonline"),
+      rome: t("titles.romeonline")
+    });
+  }, [t]);
+
+  const AppRouteTable = (
+    <Suspense
+      fallback={
+        <LoadingSpinner
+          message={t("general.labels.loadingapp", {
+            app: InstanceRenderManager({
+              imex: "$t(titles.imexonline)",
+              rome: "$t(titles.romeonline)"
+            })
+          })}
+        />
+      }
+    >
+      <BreadCrumbs />
+      <BillEnterModalContainer />
+      <JobCostingModal />
+      <ReportCenterModal />
+      <EmailOverlayContainer />
+      <PrintCenterModalContainer />
+      <Routes>
+        <Route
+          path="/"
+          element={
+            <Suspense fallback={<Spin />}>
+              <SimplifiedPartsJobsPage />
+            </Suspense>
+          }
+        />
+        <Route
+          path="/jobs/:jobId"
+          element={
+            <Suspense fallback={<Spin />}>
+              <SimplifiedPartsJobsDetailPage />
+            </Suspense>
+          }
+        />
+        <Route
+          path="/shop/vendors"
+          element={
+            <Suspense fallback={<Spin />}>
+              <ShopVendorPageContainer />
+            </Suspense>
+          }
+        />
+        <Route
+          path="/shop"
+          element={
+            <Suspense fallback={<Spin />}>
+              <ShopPage />
+            </Suspense>
+          }
+        />
+        <Route path="/feature-request/*" index element={<FeatureRequestPage />} />
+
+        <Route
+          path="/help"
+          element={
+            <Suspense fallback={<Spin />}>
+              <Help />
+            </Suspense>
+          }
+        />
+      </Routes>
+    </Suspense>
+  );
+
+  let PageContent;
+
+  if (conflict) PageContent = <ConflictComponent />;
+  else if (bodyshop && bodyshop.sub_status !== "active") PageContent = <ShopSubStatusComponent />;
+  else PageContent = AppRouteTable;
+
+  const broadcastMessage = () => {
+    if (socket && bodyshop && bodyshop.id) {
+      console.log(`Broadcasting message to bodyshop ${bodyshop.id}:`);
+      socket.emit("broadcast-to-bodyshop", bodyshop.id, `Hello from ${clientId}`);
+    }
+  };
+
+  return (
+    <>
+      <Layout style={{ minHeight: "100vh" }} className="layout-container">
+        <UpdateAlert />
+        {/* <HeaderContainer /> */}
+        <Content className="content-container">
+          <Sentry.ErrorBoundary fallback={<ErrorBoundary />} showDialog>
+            {PageContent}
+          </Sentry.ErrorBoundary>
+          <FloatButton.BackTop style={{ right: 100, bottom: 25 }} />
+        </Content>
+        <Footer>
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+              margin: "1rem 0rem"
+            }}
+          >
+            <Link to="/manage/feature-request">
+              <Button icon={<BulbOutlined />} type="text">
+                {t("general.labels.feature-request")}
+              </Button>
+            </Link>
+            <Space>
+              <WssStatusDisplayComponent />
+              <div onClick={broadcastMessage}>
+                {`${InstanceRenderManager({
+                  imex: t("titles.imexonline"),
+                  rome: t("titles.romeonline")
+                })} - ${import.meta.env.VITE_APP_GIT_SHA_DATE}`}
+              </div>
+              <Button icon={<AlertOutlined />} data-canny-changelog type="text">
+                {t("general.labels.changelog")}
+              </Button>
+            </Space>
+            <Link to="/disclaimer" target="_blank" style={{ color: "#ccc" }}>
+              Disclaimer & Notices
+            </Link>
+          </div>
+        </Footer>
+      </Layout>
+    </>
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SimplifiedPartsPage);
--- a/client/src/pages/simplified-parts/simplified-parts.page.container.jsx
+++ b/client/src/pages/simplified-parts/simplified-parts.page.container.jsx
@@ -0,0 +1,35 @@
+import { useQuery } from "@apollo/client";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import AlertComponent from "../../components/alert/alert.component";
+import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
+import { QUERY_BODYSHOP } from "../../graphql/bodyshop.queries";
+import { setBodyshop } from "../../redux/user/user.actions";
+import SimplifiedPartsPage from "./simplified-parts.page.component";
+
+const mapDispatchToProps = (dispatch) => ({
+  setBodyshop: (bs) => dispatch(setBodyshop(bs))
+});
+
+function SimplifiedPartsPageContainer({ setBodyshop }) {
+  const { loading, error, data } = useQuery(QUERY_BODYSHOP, {
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only"
+  });
+
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (data) {
+      setBodyshop(data.bodyshops[0] || { notfound: true });
+    }
+  }, [data, setBodyshop]);
+
+  if (loading) return <LoadingSpinner message={t("general.labels.loadingshop")} />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  return <SimplifiedPartsPage />;
+}
+
+export default connect(null, mapDispatchToProps)(SimplifiedPartsPageContainer);