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

client/src/pages/bills/bills.page.component.jsx

@@ -1,5 +1,5 @@
 import { EditFilled, SyncOutlined } from "@ant-design/icons";
-import { Button, Card, Checkbox, Input, Space, Table, Typography } from "antd";
+import { Button, Card, Checkbox, Input, Space, Typography } from "antd";
 import { useQuery } from "@apollo/client/react";
 import axios from "axios";
 import queryString from "query-string";
@@ -18,6 +18,7 @@ import { pageLimit } from "../../utils/config";
 import { alphaSort, dateSort } from "../../utils/sorters";
 import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import ResponsiveTable from "../../components/responsive-table/responsive-table.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setBillEnterContext: (context) => dispatch(setModalContext({ context: context, modal: "billEnter" }))
@@ -229,7 +230,7 @@ export function BillsListPage({ loading, data, refetch, total, setBillEnterConte
     >
       <PartsOrderModalContainer />
 
-      <Table
+      <ResponsiveTable
         loading={loading || searchLoading}
         // scroll={{
         //   x: "50%", // y: "40rem"
@@ -249,6 +250,7 @@ export function BillsListPage({ loading, data, refetch, total, setBillEnterConte
               }
         }
         columns={columns}
+        mobileColumnKeys={["vendorname", "invoice_number", "ro_number", "total", "actions"]}
         rowKey="id"
         dataSource={search?.search ? openSearchResults : data}
         onChange={handleTableChange}

client/src/pages/export-logs/export-logs.page.component.jsx

@@ -1,6 +1,6 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { useQuery } from "@apollo/client/react";
-import { Button, Card, Checkbox, Input, Space, Table, Typography } from "antd";
+import { Button, Card, Checkbox, Input, Space, Typography } from "antd";
 import _ from "lodash";
 import queryString from "query-string";
 import { useTranslation } from "react-i18next";
@@ -8,6 +8,7 @@ import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
+import ResponsiveTable from "../../components/responsive-table/responsive-table.component";
 import { QUERY_EXPORT_LOG_PAGINATED } from "../../graphql/accounting.queries";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { pageLimit } from "../../utils/config";
@@ -186,7 +187,7 @@ export function ExportLogsPageComponent() {
         </Space>
       }
     >
-      <Table
+      <ResponsiveTable
         loading={loading}
         pagination={{
           placement: "top",
@@ -195,6 +196,7 @@ export function ExportLogsPageComponent() {
           total: data && data.search_exportlog_aggregate.aggregate.count
         }}
         columns={columns}
+        mobileColumnKeys={["created_at", "ro_number", "successful", "message"]}
         rowKey="id"
         dataSource={data?.search_exportlog}
         style={{ height: "100%" }}

client/src/pages/phonebook/phonebook.page.component.jsx

@@ -1,6 +1,6 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { useQuery } from "@apollo/client/react";
-import { Button, Card, Input, Space, Table, Typography } from "antd";
+import { Button, Card, Input, Space, Typography } from "antd";
 import _ from "lodash";
 import queryString from "query-string";
 import { useTranslation } from "react-i18next";
@@ -8,6 +8,7 @@ import { connect } from "react-redux";
 import { useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
+import ResponsiveTable from "../../components/responsive-table/responsive-table.component";
 import { QUERY_PHONEBOOK_PAGINATED } from "../../graphql/phonebook.queries";
 import { selectAuthLevel, selectBodyshop } from "../../redux/user/user.selectors";
 import ChatOpenButton from "../../components/chat-open-button/chat-open-button.component";
@@ -172,7 +173,7 @@ export function PhonebookPageComponent({ bodyshop, authLevel }) {
         </Space>
       }
     >
-      <Table
+      <ResponsiveTable
         loading={loading}
         pagination={{
           placement: "top",
@@ -181,6 +182,7 @@ export function PhonebookPageComponent({ bodyshop, authLevel }) {
           total: data && data.search_phonebook_aggregate.aggregate.count
         }}
         columns={columns}
+        mobileColumnKeys={["firstname", "lastname", "company", "phone1", "phone2"]}
         rowKey="id"
         dataSource={data?.search_phonebook}
         //scroll={{ x: true }}

client/src/pages/tech-assigned-prod-jobs/tech-assigned-prod-jobs.component.jsx

@@ -1,6 +1,7 @@
 import { useQuery } from "@apollo/client/react";
 import { useState } from "react";
-import { Button, Card, Input, Space, Table } from "antd";
+import { Button, Card, Input, Space } from "antd";
+import ResponsiveTable from "../../components/responsive-table/responsive-table.component";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { QUERY_JOBS_TECH_ASIGNED_TO_BY_TEAM } from "../../graphql/jobs.queries";
@@ -188,10 +189,11 @@ export function TechAssignedProdJobs({ setTimeTicketTaskContext, technician, bod
         </Space>
       }
     >
-      <Table
+      <ResponsiveTable
         loading={loading}
         pagination={false}
         columns={columns}
+        mobileColumnKeys={["ro_number", "owner", "status", "vehicle", "plate_no"]}
         rowKey="id"
         dataSource={jobs}
         scroll={{ x: true }}

client/src/pages/tech-dispatched-parts/tech-dispatched-parts.page.jsx

@@ -1,6 +1,7 @@
 import { MinusCircleTwoTone, PlusCircleTwoTone, SyncOutlined } from "@ant-design/icons";
 import { useQuery } from "@apollo/client/react";
-import { Button, Card, Space, Table } from "antd";
+import { Button, Card, Space } from "antd";
+import ResponsiveTable from "../../components/responsive-table/responsive-table.component";
 import queryString from "query-string";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -108,7 +109,7 @@ export function TechDispatchedParts({ technician, bodyshop }) {
         </Space>
       }
     >
-      <Table
+      <ResponsiveTable
         loading={loading}
         pagination={{
           pageSize: 25,
@@ -117,6 +118,7 @@ export function TechDispatchedParts({ technician, bodyshop }) {
           showSizeChanger: false
         }}
         columns={columns}
+        mobileColumnKeys={["ro_number", "status", "vehicle", "actions"]}
         rowKey="id"
         dataSource={parts_dispatch}
         scroll={{ x: true }}