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

client/src/components/dms-customer-selector/cdk-customer-selector.jsx

@@ -1,4 +1,5 @@
-import { Button, Checkbox, Col, Table } from "antd";
+import { Button, Checkbox, Col } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
@@ -72,7 +73,7 @@ export default function CDKCustomerSelector({ bodyshop, socket }) {
 
   return (
     <Col span={24}>
-      <Table
+      <ResponsiveTable
         title={() => (
           <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
             <Button onClick={onUseSelected} disabled={!selectedCustomer}>
@@ -86,6 +87,7 @@ export default function CDKCustomerSelector({ bodyshop, socket }) {
         )}
         pagination={{ placement: "top" }}
         columns={columns}
+        mobileColumnKeys={["id", "vinOwner", "name1", "address"]}
         rowKey={rowKey}
         dataSource={customerList}
         rowSelection={{

client/src/components/dms-customer-selector/fortellis-customer-selector.jsx

@@ -1,4 +1,5 @@
-import { Button, Checkbox, Col, Table } from "antd";
+import { Button, Checkbox, Col } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
@@ -78,7 +79,7 @@ export default function FortellisCustomerSelector({ bodyshop, jobid, socket }) {
 
   return (
     <Col span={24}>
-      <Table
+      <ResponsiveTable
         title={() => (
           <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
             <Button onClick={onUseSelected} disabled={!selectedCustomer}>
@@ -92,6 +93,7 @@ export default function FortellisCustomerSelector({ bodyshop, jobid, socket }) {
         )}
         pagination={{ placement: "top" }}
         columns={columns}
+        mobileColumnKeys={["id", "vinOwner", "firstName", "address"]}
         rowKey={(r) => r.customerId}
         dataSource={customerList}
         rowSelection={{

client/src/components/dms-customer-selector/pbs-customer-selector.jsx

@@ -1,4 +1,5 @@
-import { Button, Col, Table } from "antd";
+import { Button, Col } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
@@ -66,7 +67,7 @@ export default function PBSCustomerSelector({ bodyshop, socket }) {
 
   return (
     <Col span={24}>
-      <Table
+      <ResponsiveTable
         title={() => (
           <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
             <Button onClick={onUseSelected} disabled={!selectedCustomer}>
@@ -80,6 +81,7 @@ export default function PBSCustomerSelector({ bodyshop, socket }) {
         )}
         pagination={{ placement: "top" }}
         columns={columns}
+        mobileColumnKeys={["ContactId", "name1", "address"]}
         rowKey={(r) => r.ContactId}
         dataSource={customerList}
         rowSelection={{

client/src/components/dms-customer-selector/rr-customer-selector.jsx

@@ -1,4 +1,5 @@
-import { Alert, Button, Checkbox, message, Modal, Space, Table } from "antd";
+import { Alert, Button, Checkbox, message, Modal, Space } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
@@ -72,14 +73,14 @@ export default function RRCustomerSelector({
     if (!socket) return;
     const handleRrSelectCustomer = (list) => {
       const normalized = normalizeRrList(list);
-      
+
       // If list is empty, it means early RO exists and customer selection should be skipped
       // Don't open the modal in this case
       if (normalized.length === 0) {
         setRefreshing(false);
         return;
       }
-      
+
       setOpen(true);
       setCustomerList(normalized);
       const firstOwner = normalized.find((r) => r.vinOwner)?.custNo;
@@ -195,8 +196,8 @@ export default function RRCustomerSelector({
             description={
               <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                 <div>
-                  We created the Repair Order. Please validate the totals and taxes in the DMS system. When done,
-                  click <strong>Finished</strong> to finalize and mark this export as complete.
+                  We created the Repair Order. Please validate the totals and taxes in the DMS system. When done, click{" "}
+                  <strong>Finished</strong> to finalize and mark this export as complete.
                 </div>
                 <div>
                   <Space>
@@ -215,14 +216,8 @@ export default function RRCustomerSelector({
   }
 
   return (
-    <Modal
-      open={open}
-      onCancel={handleClose}
-      footer={null}
-      width={800}
-      title={t("dms.selectCustomer")}
-    >
-      <Table
+    <Modal open={open} onCancel={handleClose} footer={null} width={800} title={t("dms.selectCustomer")}>
+      <ResponsiveTable
         title={() => (
           <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
             {/* Open RO limit banner */}
@@ -304,6 +299,7 @@ export default function RRCustomerSelector({
         )}
         pagination={{ placement: "top" }}
         columns={columns}
+        mobileColumnKeys={["custNo", "vinOwner", "name", "address"]}
         rowKey={(r) => r.custNo}
         dataSource={customerList}
         rowSelection={{