Revert "Revert "Release/2026 02 27 (pull request #3070)" (pull request #3080)"

client/src/components/parts-order-list-table/parts-order-list-table-drawer.component.jsx

@@ -1,7 +1,8 @@
 import { DeleteFilled } from "@ant-design/icons";
 import { PageHeader } from "@ant-design/pro-layout";
 import { useLazyQuery, useMutation } from "@apollo/client/react";
-import { Button, Drawer, Grid, Popconfirm, Space, Table } from "antd";
+import { Button, Drawer, Grid, Popconfirm, Space } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import queryString from "query-string";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -65,9 +66,7 @@ export function PartsOrderListTableDrawerComponent({
   setTaskUpsertContext,
   isPartsEntry
 }) {
-  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
-    .filter((screen) => !!screen[1])
-    .slice(-1)[0];
+  const screens = Grid.useBreakpoint();
 
   const bpoints = {
     xs: "100%",
@@ -77,7 +76,14 @@ export function PartsOrderListTableDrawerComponent({
     xl: "75%",
     xxl: "65%"
   };
-  const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";
+
+  let drawerPercentage = "100%";
+  if (screens.xxl) drawerPercentage = bpoints.xxl;
+  else if (screens.xl) drawerPercentage = bpoints.xl;
+  else if (screens.lg) drawerPercentage = bpoints.lg;
+  else if (screens.md) drawerPercentage = bpoints.md;
+  else if (screens.sm) drawerPercentage = bpoints.sm;
+  else if (screens.xs) drawerPercentage = bpoints.xs;
   const responsibilityCenters = bodyshop.md_responsibility_centers;
   const Templates = TemplateList("partsorder", { job });
 
@@ -187,6 +193,7 @@ export function PartsOrderListTableDrawerComponent({
               actions: { refetch: refetch },
               context: {
                 job: job,
+                parts_order: { id: record.id },
                 bill: {
                   vendorid: record.vendor.id,
                   is_credit_memo: record.return,
@@ -362,11 +369,12 @@ export function PartsOrderListTableDrawerComponent({
           }
           extra={recordActions(record)}
         />
-        <Table
+        <ResponsiveTable
           scroll={{
             x: true //y: "50rem"
           }}
           columns={columns}
+          mobileColumnKeys={["status", "line_desc", "actions", "quantity"]}
           rowKey="id"
           dataSource={record.parts_order_lines}
           onChange={handleTableChange}

client/src/components/parts-order-list-table/parts-order-list-table.component.jsx

@@ -1,6 +1,6 @@
 import { DeleteFilled, EyeFilled, SyncOutlined } from "@ant-design/icons";
 import { useMutation } from "@apollo/client/react";
-import { Button, Card, Checkbox, Input, Popconfirm, Space, Table } from "antd";
+import { Button, Card, Checkbox, Input, Popconfirm, Space } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FaTasks } from "react-icons/fa";
@@ -21,6 +21,7 @@ import PrintWrapper from "../print-wrapper/print-wrapper.component";
 import PartsOrderDrawer from "./parts-order-list-table-drawer.component";
 import ShareToTeamsButton from "../share-to-teams/share-to-teams.component.jsx";
 import { bodyshopHasDmsKey } from "../../utils/dmsUtils.js";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 
 const mapStateToProps = createStructuredSelector({
   jobRO: selectJobReadOnly,
@@ -162,6 +163,7 @@ export function PartsOrderListTableComponent({
               actions: { refetch: refetch },
               context: {
                 job: job,
+                parts_order: { id: record.id },
                 bill: {
                   vendorid: record.vendor.id,
                   is_credit_memo: record.return,
@@ -308,13 +310,14 @@ export function PartsOrderListTableComponent({
         setPartsReceiveContext={setPartsReceiveContext}
         setTaskUpsertContext={setTaskUpsertContext}
       />
-      <Table
+      <ResponsiveTable
         loading={billsQuery.loading}
         scroll={{
           x: true
           //y: "50rem"
         }}
         columns={columns}
+        mobileColumnKeys={["vendorname", "order_number", "order_date", "actions"]}
         rowKey="id"
         dataSource={filteredPartsOrders}
         onChange={handleTableChange}