diff --git a/client/src/components/print-center-jobs/print-center-jobs-parts.component.jsx b/client/src/components/print-center-jobs/print-center-jobs-parts.component.jsx
new file mode 100644
index 000000000..ffacc7913
--- /dev/null
+++ b/client/src/components/print-center-jobs/print-center-jobs-parts.component.jsx
@@ -0,0 +1,183 @@
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
+import { Button, Card, Col, Row, Space, Tooltip, Typography } from "antd";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectPrintCenter } from "../../redux/modals/modals.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
+import { TemplateList } from "../../utils/TemplateConstants";
+import { GenerateDocument } from "../../utils/RenderTemplate";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { HistoryOutlined, MailOutlined, PrinterOutlined, UnorderedListOutlined } from "@ant-design/icons";
+
+const mapStateToProps = createStructuredSelector({
+ printCenterModal: selectPrintCenter,
+ bodyshop: selectBodyshop,
+ technician: selectTechnician
+});
+
+const mapDispatchToProps = () => ({});
+
+export function PrintCenterJobsPartsComponent({ printCenterModal, bodyshop, technician }) {
+ const { id: jobId, job } = printCenterModal.context;
+ const tempList = TemplateList("job", {});
+ const notification = useNotification();
+ const {
+ treatments: { Enhanced_Payroll }
+ } = useSplitTreatments({
+ attributes: {},
+ names: ["Enhanced_Payroll"],
+ splitKey: bodyshop.imexshopid
+ });
+
+ const Templates =
+ bodyshop.cdk_dealerid === null && bodyshop.pbs_serialnumber === null
+ ? Object.keys(tempList)
+ .map((key) => tempList[key])
+ .filter(
+ (temp) =>
+ (!temp.regions ||
+ (temp.regions && temp.regions[bodyshop.region_config]) ||
+ (temp.regions && bodyshop.region_config.includes(Object.keys(temp.regions)) === true)) &&
+ (!temp.dms || temp.dms === false)
+ )
+ : Object.keys(tempList)
+ .map((key) => tempList[key])
+ .filter(
+ (temp) =>
+ !temp.regions ||
+ (temp.regions && temp.regions[bodyshop.region_config]) ||
+ (temp.regions && bodyshop.region_config.includes(Object.keys(temp.regions)) === true)
+ );
+
+ const JobsReportsList =
+ Enhanced_Payroll.treatment === "on"
+ ? Object.keys(Templates)
+ .map((key) => Templates[key])
+ .filter((temp) => temp.enhanced_payroll === undefined || temp.enhanced_payroll === true)
+ : Object.keys(Templates)
+ .map((key) => Templates[key])
+ .filter((temp) => temp.enhanced_payroll === undefined || temp.enhanced_payroll === false);
+
+ const orderedKeys = ["parts_list", "parts_order_history"]; // explicit order
+ const cards = orderedKeys.map((k) => JobsReportsList.find((t) => t.key === k)).filter(Boolean);
+
+ const handlePrint = async (key) => {
+ await GenerateDocument(
+ {
+ name: key,
+ variables: { id: jobId }
+ },
+ {},
+ "p",
+ jobId,
+ notification
+ );
+ };
+
+ const handleEmail = async (key) => {
+ await GenerateDocument(
+ {
+ name: key,
+ variables: { id: jobId }
+ },
+ {
+ to: job && job.ownr_ea,
+ subject: cards.find((c) => c.key === key)?.subject
+ },
+ "e",
+ jobId,
+ notification
+ );
+ };
+
+ const iconForKey = (key) => {
+ switch (key) {
+ case "parts_list":
+ return