feature/feature/IO-3554-Form-Row-Layout - Responsive overhaul

client/src/components/dms-allocations-summary-ap/dms-allocations-summary-ap.component.jsx

@@ -1,5 +1,6 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { Button, Card, Form, Input, Table } from "antd";
+import { Button, Card, Form, Input } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -78,7 +79,7 @@ export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
       dataIndex: "Lines",
       key: "Lines",
       render: (text, record) => (
-        <table style={{ tableLayout: "auto", width: "100%" }}>
+        <ResponsiveTable style={{ tableLayout: "auto", width: "100%" }}>
           <tr>
             <th>{t("bills.fields.invoice_number")}</th>
             <th>{t("bodyshop.fields.dms.dms_acctnumber")}</th>
@@ -91,7 +92,7 @@ export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
               <td>{l.Amount}</td>
             </tr>
           ))}
-        </table>
+        </ResponsiveTable>
       )
     }
   ];
@@ -115,9 +116,10 @@ export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
         />
       }
     >
-      <Table
+      <ResponsiveTable
         pagination={{ placement: "top", defaultPageSize: pageLimit }}
         columns={columns}
+        mobileColumnKeys={["status", "reference", "Lines"]}
         rowKey={(record) => `${record.InvoiceNumber}${record.Account}`}
         dataSource={allocationsSummary}
         locale={{ emptyText: t("dms.labels.refreshallocations") }}