feature/IO-3497-Ant-Design-v5-to-v6 - Signed off Files

2026-01-12 11:34:25 -05:00
parent c3da0d9035
commit c119a66f27
70 changed files with 442 additions and 463 deletions
--- a/client/src/components/accounting-payables-table/accounting-payables-table.component.jsx
+++ b/client/src/components/accounting-payables-table/accounting-payables-table.component.jsx
@@ -176,7 +176,7 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, bills, ref
      <Table
        loading={loading}
        dataSource={dataSource}
-        pagination={{ position: "top", pageSize: exportPageLimit }}
+        pagination={{ placement: "top", pageSize: exportPageLimit }}
        columns={columns}
        rowKey="id"
        onChange={handleTableChange}
--- a/client/src/components/accounting-payments-table/accounting-payments-table.component.jsx
+++ b/client/src/components/accounting-payments-table/accounting-payments-table.component.jsx
@@ -189,7 +189,7 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, payments,
      <Table
        loading={loading}
        dataSource={dataSource}
-        pagination={{ position: "top", pageSize: exportPageLimit }}
+        pagination={{ placement: "top", pageSize: exportPageLimit }}
        columns={columns}
        rowKey="id"
        onChange={handleTableChange}
--- a/client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx
+++ b/client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx
@@ -211,7 +211,7 @@ export function AccountingReceivablesTableComponent({ bodyshop, loading, jobs, r
      <Table
        loading={loading}
        dataSource={dataSource}
-        pagination={{ position: "top", pageSize: exportPageLimit }}
+        pagination={{ placement: "top", pageSize: exportPageLimit }}
        columns={columns}
        rowKey="id"
        onChange={handleTableChange}
--- a/client/src/components/audit-trail-list/audit-trail-list.component.jsx
+++ b/client/src/components/audit-trail-list/audit-trail-list.component.jsx
@@ -65,7 +65,7 @@ export default function AuditTrailListComponent({ loading, data }) {
    <Table
      {...formItemLayout}
      loading={loading}
-      pagination={{ position: "top", defaultPageSize: pageLimit }}
+      pagination={{ placement: "top", defaultPageSize: pageLimit }}
      columns={columns}
      rowKey="id"
      dataSource={data}
--- a/client/src/components/audit-trail-list/email-audit-trail-list.component.jsx
+++ b/client/src/components/audit-trail-list/email-audit-trail-list.component.jsx
@@ -50,7 +50,7 @@ export default function EmailAuditTrailListComponent({ loading, data }) {
    <Table
      {...formItemLayout}
      loading={loading}
-      pagination={{ position: "top", defaultPageSize: pageLimit }}
+      pagination={{ placement: "top", defaultPageSize: pageLimit }}
      columns={columns}
      rowKey="id"
      dataSource={data}
--- a/client/src/components/bill-detail-edit/bill-detail-edit-component.jsx
+++ b/client/src/components/bill-detail-edit/bill-detail-edit-component.jsx
@@ -189,7 +189,7 @@ export function BillDetailEditcontainer({ insertAuditTrail, bodyshop }) {
          />
          <Form form={form} onFinish={handleFinish} initialValues={transformData(data)} layout="vertical">
            <BillFormContainer form={form} billEdit disabled={exported} disableInHouse={isinhouse} />
-            <Divider orientation="left">{t("general.labels.media")}</Divider>
+            <Divider titlePlacement="left">{t("general.labels.media")}</Divider>
            {bodyshop.uselocalmediaserver ? (
              <JobsDocumentsLocalGallery
                job={{ id: data ? data.bills_by_pk.jobid : null }}
--- a/client/src/components/bill-form/bill-form.component.jsx
+++ b/client/src/components/bill-form/bill-form.component.jsx
@@ -429,7 +429,7 @@ export function BillFormComponent({
          }}
        </Form.Item>
      </LayoutFormRow>
-      <Divider orientation="left">{t("bills.labels.bill_lines")}</Divider>
+      <Divider titlePlacement="left">{t("bills.labels.bill_lines")}</Divider>

      {Extended_Bill_Posting.treatment === "on" ? (
        <BillFormLinesExtended
@@ -449,7 +449,7 @@ export function BillFormComponent({
          billEdit={billEdit}
        />
      )}
-      <Divider orientation="left" style={{ display: billEdit ? "none" : null }}>
+      <Divider titlePlacement="left" style={{ display: billEdit ? "none" : null }}>
        {t("documents.labels.upload")}
      </Divider>
      <Form.Item
--- a/client/src/components/bills-vendors-list/bills-vendors-list.component.jsx
+++ b/client/src/components/bills-vendors-list/bills-vendors-list.component.jsx
@@ -89,7 +89,7 @@ export default function BillsVendorsList() {
        );
      }}
      dataSource={dataSource}
-      pagination={{ position: "top" }}
+      pagination={{ placement: "top" }}
      columns={columns}
      rowKey="id"
      onChange={handleTableChange}
--- a/client/src/components/contract-cars/contract-cars.component.jsx
+++ b/client/src/components/contract-cars/contract-cars.component.jsx
@@ -104,7 +104,7 @@ export default function ContractsCarsComponent({ loading, data, selectedCarId, h
    >
      <Table
        loading={loading}
-        pagination={{ position: "top" }}
+        pagination={{ placement: "top" }}
        columns={columns}
        rowKey="id"
        dataSource={filteredData}
--- a/client/src/components/contract-jobs/contract-jobs.component.jsx
+++ b/client/src/components/contract-jobs/contract-jobs.component.jsx
@@ -128,11 +128,7 @@ export default function ContractsJobsComponent({ loading, data, selectedJob, han
    >
      <Table
        loading={loading}
-        pagination={{
-          position: "top",
-          defaultPageSize: pageLimit,
-          defaultCurrent: defaultCurrent
-        }}
+        pagination={{ placement: "top", defaultPageSize: pageLimit, defaultCurrent: defaultCurrent }}
        columns={columns}
        rowKey="id"
        dataSource={filteredData}
--- a/client/src/components/contracts-list/contracts-list.component.jsx
+++ b/client/src/components/contracts-list/contracts-list.component.jsx
@@ -172,12 +172,7 @@ export function ContractsList({ bodyshop, loading, contracts, refetch, total, se
        scroll={{
          x: "50%" //y: "40rem"
        }}
-        pagination={{
-          position: "top",
-          pageSize: pageLimit,
-          current: parseInt(page || 1, 10),
-          total: total
-        }}
+        pagination={{ placement: "top", pageSize: pageLimit, current: parseInt(page || 1, 10), total: total }}
        columns={columns}
        rowKey="id"
        dataSource={contracts}
--- a/client/src/components/courtesy-car-contract-list/courtesy-car-contract-list.component.jsx
+++ b/client/src/components/courtesy-car-contract-list/courtesy-car-contract-list.component.jsx
@@ -75,12 +75,7 @@ export default function CourtesyCarContractListComponent({ contracts, totalContr
    <Card title={t("menus.header.courtesycars-contracts")}>
      <Table
        scroll={{ x: true }}
-        pagination={{
-          position: "top",
-          pageSize: pageLimit,
-          current: parseInt(page || 1),
-          total: totalContracts
-        }}
+        pagination={{ placement: "top", pageSize: pageLimit, current: parseInt(page || 1), total: totalContracts }}
        columns={columns}
        rowKey="id"
        dataSource={contracts}
--- a/client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx
+++ b/client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx
@@ -278,7 +278,7 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
    >
      <Table
        loading={loading}
-        pagination={{ position: "top" }}
+        pagination={{ placement: "top" }}
        columns={columns}
        rowKey="id"
        dataSource={tableData}
--- a/client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx
+++ b/client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx
@@ -94,12 +94,7 @@ export default function CsiResponseListPaginated({ refetch, loading, responses,
    >
      <Table
        loading={loading}
-        pagination={{
-          position: "top",
-          pageSize: pageLimit,
-          current: parseInt(state.page || 1),
-          total: total
-        }}
+        pagination={{ placement: "top", pageSize: pageLimit, current: parseInt(state.page || 1), total: total }}
        columns={columns}
        rowKey="id"
        dataSource={responses}
--- a/client/src/components/dashboard-components/monthly-job-costing/monthly-job-costing.component.jsx
+++ b/client/src/components/dashboard-components/monthly-job-costing/monthly-job-costing.component.jsx
@@ -105,7 +105,7 @@ export default function DashboardMonthlyJobCosting({ data, ...cardProps }) {
        <div style={{ height: "100%" }}>
          <Table
            onChange={handleTableChange}
-            pagination={{ position: "top", defaultPageSize: pageLimit }}
+            pagination={{ placement: "top", defaultPageSize: pageLimit }}
            columns={columns}
            scroll={{ x: true, y: "calc(100% - 4em)" }}
            rowKey="id"
--- a/client/src/components/dashboard-grid/dashboard-grid.component.jsx
+++ b/client/src/components/dashboard-grid/dashboard-grid.component.jsx
@@ -2,14 +2,14 @@ import Icon, { SyncOutlined } from "@ant-design/icons";
 import { useMutation, useQuery } from "@apollo/client";
 import { Button, Dropdown, Space } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
-import { useMemo, useState, useEffect } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Responsive, WidthProvider } from "react-grid-layout";
 import { useTranslation } from "react-i18next";
 import { MdClose } from "react-icons/md";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
-import { UPDATE_DASHBOARD_LAYOUT, QUERY_USER_DASHBOARD_LAYOUT } from "../../graphql/user.queries";
+import { QUERY_USER_DASHBOARD_LAYOUT, UPDATE_DASHBOARD_LAYOUT } from "../../graphql/user.queries";
 import { QUERY_DASHBOARD_BODYSHOP } from "../../graphql/bodyshop.queries";
 import { selectCurrentUser } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
--- a/client/src/components/dms-allocations-summary-ap/dms-allocations-summary-ap.component.jsx
+++ b/client/src/components/dms-allocations-summary-ap/dms-allocations-summary-ap.component.jsx
@@ -112,7 +112,7 @@ export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
      }
    >
      <Table
-        pagination={{ position: "top", defaultPageSize: pageLimit }}
+        pagination={{ placement: "top", defaultPageSize: pageLimit }}
        columns={columns}
        rowKey={(record) => `${record.InvoiceNumber}${record.Account}`}
        dataSource={allocationsSummary}
--- a/client/src/components/dms-allocations-summary/dms-allocations-summary.component.jsx
+++ b/client/src/components/dms-allocations-summary/dms-allocations-summary.component.jsx
@@ -116,7 +116,7 @@ export function DmsAllocationsSummary({ mode, socket, bodyshop, jobId, title, on
      )}

      <Table
-        pagination={{ position: "top", defaultPageSize: pageLimit }}
+        pagination={{ placement: "top", defaultPageSize: pageLimit }}
        columns={columns}
        rowKey="center"
        dataSource={allocationsSummary}
--- a/client/src/components/dms-customer-selector/cdk-customer-selector.jsx
+++ b/client/src/components/dms-customer-selector/cdk-customer-selector.jsx
@@ -84,7 +84,7 @@ export default function CDKCustomerSelector({ bodyshop, socket }) {
            <Button onClick={onCreateNew}>{t("jobs.actions.dms.createnewcustomer")}</Button>
          </div>
        )}
-        pagination={{ position: "top" }}
+        pagination={{ placement: "top" }}
        columns={columns}
        rowKey={rowKey}
        dataSource={customerList}
--- a/client/src/components/dms-customer-selector/fortellis-customer-selector.jsx
+++ b/client/src/components/dms-customer-selector/fortellis-customer-selector.jsx
@@ -90,7 +90,7 @@ export default function FortellisCustomerSelector({ bodyshop, jobid, socket }) {
            <Button onClick={onCreateNew}>{t("jobs.actions.dms.createnewcustomer")}</Button>
          </div>
        )}
-        pagination={{ position: "top" }}
+        pagination={{ placement: "top" }}
        columns={columns}
        rowKey={(r) => r.customerId}
        dataSource={customerList}
--- a/client/src/components/dms-customer-selector/pbs-customer-selector.jsx
+++ b/client/src/components/dms-customer-selector/pbs-customer-selector.jsx
@@ -78,7 +78,7 @@ export default function PBSCustomerSelector({ bodyshop, socket }) {
            <Button onClick={onCreateNew}>{t("jobs.actions.dms.createnewcustomer")}</Button>
          </div>
        )}
-        pagination={{ position: "top" }}
+        pagination={{ placement: "top" }}
        columns={columns}
        rowKey={(r) => r.ContactId}
        dataSource={customerList}
--- a/client/src/components/dms-customer-selector/rr-customer-selector.jsx
+++ b/client/src/components/dms-customer-selector/rr-customer-selector.jsx
@@ -251,7 +251,7 @@ export default function RRCustomerSelector({
            )}
          </div>
        )}
-        pagination={{ position: "top" }}
+        pagination={{ placement: "top" }}
        columns={columns}
        rowKey={(r) => r.custNo}
        dataSource={customerList}
--- a/client/src/components/dms-log-events/dms-log-events.component.jsx
+++ b/client/src/components/dms-log-events/dms-log-events.component.jsx
@@ -74,13 +74,13 @@ export function DmsLogEvents({
              {/* Row 1: summary + inline "Details" toggle */}
              <Space wrap align="start">
                <Tag color={logLevelColor(level)}>{level}</Tag>
-                <Divider type="vertical" />
+                <Divider orientation="vertical" />
                <span>{dayjs(timestamp).format("MM/DD/YYYY HH:mm:ss")}</span>
-                <Divider type="vertical" />
+                <Divider orientation="vertical" />
                <span>{message}</span>
                {hasMeta && (
                  <>
-                    <Divider type="vertical" />
+                    <Divider orientation="vertical" />
                    <a
                      role="button"
                      aria-expanded={isOpen}
--- a/client/src/components/form-date-time-picker/form-date-time-picker.component.jsx
+++ b/client/src/components/form-date-time-picker/form-date-time-picker.component.jsx
@@ -131,10 +131,7 @@ const DateTimePicker = ({
                if (timeValue) {
                  // When time changes, combine it with the existing date
                  const existingDate = dayjs(value);
-                  const newDateTime = existingDate
-                    .hour(timeValue.hour())
-                    .minute(timeValue.minute())
-                    .second(0);
+                  const newDateTime = existingDate.hour(timeValue.hour()).minute(timeValue.minute()).second(0);
                  handleChange(newDateTime);
                } else {
                  // If time is cleared, just update with null time but keep date
--- a/client/src/components/global-search/global-search.component.jsx
+++ b/client/src/components/global-search/global-search.component.jsx
@@ -37,7 +37,7 @@ export default function GlobalSearch() {
              value: job.ro_number || "N/A",
              label: (
                <Link to={`/manage/jobs/${job.id}`}>
-                  <Space size="small" split={<Divider type="vertical" />}>
+                  <Space size="small" split={<Divider orientation="vertical" />}>
                    <strong>{job.ro_number || t("general.labels.na")}</strong>
                    <span>{`${job.status || ""}`}</span>
                    <span>
@@ -59,7 +59,7 @@ export default function GlobalSearch() {
              value: OwnerNameDisplayFunction(owner),
              label: (
                <Link to={`/manage/owners/${owner.id}`}>
-                  <Space size="small" split={<Divider type="vertical" />} wrap>
+                  <Space size="small" split={<Divider orientation="vertical" />} wrap>
                    <span>
                      <OwnerNameDisplay ownerObject={owner} />
                    </span>
@@ -79,7 +79,7 @@ export default function GlobalSearch() {
              value: `${vehicle.v_model_yr || ""} ${vehicle.v_make_desc || ""} ${vehicle.v_model_desc || ""}`,
              label: (
                <Link to={`/manage/vehicles/${vehicle.id}`}>
-                  <Space size="small" split={<Divider type="vertical" />}>
+                  <Space size="small" split={<Divider orientation="vertical" />}>
                    <span>
                      {`${vehicle.v_model_yr || ""} ${vehicle.v_make_desc || ""} ${vehicle.v_model_desc || ""}`}
                    </span>
@@ -101,7 +101,7 @@ export default function GlobalSearch() {
              value: `${payment.job.ro_number} ${payment.payer} ${payment.amount}`,
              label: (
                <Link to={`/manage/jobs/${payment.job.id}`}>
-                  <Space size="small" split={<Divider type="vertical" />}>
+                  <Space size="small" split={<Divider orientation="vertical" />}>
                    <span>{payment.paymentnum}</span>
                    <span>{payment.job.ro_number}</span>
                    <span>{payment.memo || ""}</span>
@@ -121,7 +121,7 @@ export default function GlobalSearch() {
              value: `${bill.invoice_number} - ${bill.vendor.name}`,
              label: (
                <Link to={`/manage/bills?billid=${bill.id}`}>
-                  <Space size="small" split={<Divider type="vertical" />}>
+                  <Space size="small" split={<Divider orientation="vertical" />}>
                    <span>{bill.invoice_number}</span>
                    <span>{bill.vendor.name}</span>
                    <span>{bill.date}</span>
@@ -139,7 +139,7 @@ export default function GlobalSearch() {
              value: `${pb.firstname || ""} ${pb.lastname || ""} ${pb.company || ""}`,
              label: (
                <Link to={`/manage/phonebook?phonebookentry=${pb.id}`}>
-                  <Space size="small" split={<Divider type="vertical" />}>
+                  <Space size="small" split={<Divider orientation="vertical" />}>
                    <span>{`${pb.firstname || ""} ${pb.lastname || ""} ${pb.company || ""}`}</span>
                    <PhoneNumberFormatter>{pb.phone1}</PhoneNumberFormatter>
                    <span>{pb.email}</span>
--- a/client/src/components/inventory-list/inventory-list.component.jsx
+++ b/client/src/components/inventory-list/inventory-list.component.jsx
@@ -183,12 +183,7 @@ export function JobsList({ refetch, loading, jobs, total, setInventoryUpsertCont
    >
      <Table
        loading={loading}
-        pagination={{
-          position: "top",
-          pageSize: pageLimit,
-          current: parseInt(page || 1),
-          total: total
-        }}
+        pagination={{ placement: "top", pageSize: pageLimit, current: parseInt(page || 1), total: total }}
        columns={columns}
        rowKey="id"
        dataSource={jobs}
--- a/client/src/components/job-bills-total/job-bills-total.component.jsx
+++ b/client/src/components/job-bills-total/job-bills-total.component.jsx
@@ -55,8 +55,9 @@ export function JobBillsTotalComponent({
        );

        if (pol.cm_received === null) {
-          return; //TODO:AIO This was previously removed. Check if functionality impacted.
+          //TODO:AIO This was previously removed. Check if functionality impacted.
          // Skip this calculation for bills posted prior to the CNR change.
+          return;
        } else {
          if (pol.cm_received === false) {
            totalReturnsMarkedNotReceived = totalReturnsMarkedNotReceived.add(
@@ -174,8 +175,10 @@ export function JobBillsTotalComponent({
              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
                <Statistic
                  title={t("bills.labels.discrepancy")}
-                  valueStyle={{
-                    color: discrepancy.getAmount() === 0 ? "green" : "red"
+                  styles={{
+                    content: {
+                      color: discrepancy.getAmount() === 0 ? "green" : "red"
+                    }
                  }}
                  value={discrepancy.toFormat()}
                />
@@ -208,8 +211,10 @@ export function JobBillsTotalComponent({
              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
                <Statistic
                  title={t("bills.labels.discrepancy")}
-                  valueStyle={{
-                    color: discrepWithLbrAdj.getAmount() === 0 ? "green" : "red"
+                  styles={{
+                    content: {
+                      color: discrepWithLbrAdj.getAmount() === 0 ? "green" : "red"
+                    }
                  }}
                  value={discrepWithLbrAdj.toFormat()}
                />
@@ -242,8 +247,10 @@ export function JobBillsTotalComponent({
              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
                <Statistic
                  title={t("bills.labels.discrepancy")}
-                  valueStyle={{
-                    color: discrepWithCms.getAmount() === 0 ? "green" : "red"
+                  styles={{
+                    content: {
+                      color: discrepWithCms.getAmount() === 0 ? "green" : "red"
+                    }
                  }}
                  value={discrepWithCms.toFormat()}
                />
@@ -290,8 +297,10 @@ export function JobBillsTotalComponent({
              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
                <Statistic
                  title={t("bills.labels.calculatedcreditsnotreceived")}
-                  valueStyle={{
-                    color: calculatedCreditsNotReceived.getAmount() <= 0 ? "green" : "red"
+                  styles={{
+                    content: {
+                      color: calculatedCreditsNotReceived.getAmount() <= 0 ? "green" : "red"
+                    }
                  }}
                  value={
                    calculatedCreditsNotReceived.getAmount() >= 0
@@ -313,8 +322,10 @@ export function JobBillsTotalComponent({
              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
                <Statistic
                  title={t("bills.labels.creditsnotreceived")}
-                  valueStyle={{
-                    color: totalReturnsMarkedNotReceived.getAmount() <= 0 ? "green" : "red"
+                  styles={{
+                    content: {
+                      color: totalReturnsMarkedNotReceived.getAmount() <= 0 ? "green" : "red"
+                    }
                  }}
                  value={
                    totalReturnsMarkedNotReceived.getAmount() >= 0
--- a/client/src/components/job-costing-parts-table/job-costing-parts-table.component.jsx
+++ b/client/src/components/job-costing-parts-table/job-costing-parts-table.component.jsx
@@ -84,7 +84,7 @@ export default function JobCostingPartsTable({ data, summaryData }) {
          x: "50%" //y: "40rem"
        }}
        onChange={handleTableChange}
-        pagination={{ position: "top", defaultPageSize: pageLimit }}
+        pagination={{ placement: "top", defaultPageSize: pageLimit }}
        columns={columns}
        rowKey="id"
        dataSource={filteredData}
--- a/client/src/components/job-detail-cards/job-detail-cards.component.jsx
+++ b/client/src/components/job-detail-cards/job-detail-cards.component.jsx
@@ -154,7 +154,7 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext, insertAuditTra
          }
        >
          <JobsDetailHeader job={data ? data.jobs_by_pk : null} />
-          <Divider type="horizontal" />
+          <Divider orientation="horizontal" />
          <Row gutter={[16, 16]}>
            <Col {...span}>
              <JobDetailCardsInsuranceComponent loading={loading} data={data ? data.jobs_by_pk : null} />
--- a/client/src/components/jobs-available-scan/jobs-available-scan.component.jsx
+++ b/client/src/components/jobs-available-scan/jobs-available-scan.component.jsx
@@ -147,7 +147,7 @@ export function JobsAvailableScan({ partnerVersion, refetch }) {
    >
      <Table
        loading={loading}
-        pagination={{ position: "top" }}
+        pagination={{ placement: "top" }}
        columns={columns}
        rowKey="id"
        dataSource={data}
--- a/client/src/components/jobs-create-owner-info/jobs-create-owner-info.search.component.jsx
+++ b/client/src/components/jobs-create-owner-info/jobs-create-owner-info.search.component.jsx
@@ -98,7 +98,7 @@ export default function JobsCreateOwnerInfoSearchComponent({ loading, owners })
      <Table
        loading={loading}
        scroll={{ x: true }}
-        pagination={{ position: "top" }}
+        pagination={{ placement: "top" }}
        columns={columns}
        rowKey="id"
        dataSource={owners}
--- a/client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.search.component.jsx
+++ b/client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.search.component.jsx
@@ -71,7 +71,7 @@ export default function JobsCreateVehicleInfoSearchComponent({ loading, vehicles
      <Table
        loading={loading}
        scroll={{ x: true }}
-        pagination={{ position: "top" }}
+        pagination={{ placement: "top" }}
        columns={columns}
        rowKey="id"
        dataSource={vehicles}
--- a/client/src/components/jobs-detail-rates/jobs-detail-rates.component.jsx
+++ b/client/src/components/jobs-detail-rates/jobs-detail-rates.component.jsx
@@ -133,7 +133,7 @@ export function JobsDetailRates({ jobRO, form, job, bodyshop }) {
          </FormRow>
        )
      })}
-      <Divider orientation="left" type="horizontal" style={{ marginTop: ".8rem", float: "right" }}>
+      <Divider titlePlacement="left" orientation="horizontal" style={{ marginTop: ".8rem", float: "right" }}>
        {t("jobs.forms.laborrates")}
      </Divider>
      <Space>
@@ -217,7 +217,7 @@ export function JobsDetailRates({ jobRO, form, job, bodyshop }) {
        imex: <JobsDetailRatesParts form={form} />,
        rome: (
          <>
-            <Divider orientation="left">Tax Profile</Divider>
+            <Divider titlePlacement="left">Tax Profile</Divider>
            <JobsDetailRatesProfileOVerride form={form} />
            <JobsDetailRatesParts form={form} />
            <JobsDetailRatesLabor form={form} />
--- a/client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.external.component.jsx
+++ b/client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.external.component.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import LocalMediaGrid from "../jobs-documents-local-gallery/local-media-grid.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
--- a/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.external.component.jsx
+++ b/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.external.component.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState, useCallback } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import LocalMediaGrid from "./local-media-grid.component";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
--- a/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.reassign.component.jsx
+++ b/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.reassign.component.jsx
@@ -60,7 +60,7 @@ export function JobsDocumentsLocalGalleryReassign({ bodyshop, jobid, allMedia, g
          ]}
          name={"jobid"}
        >
-          <JobSearchSelect notExported={false} notInvoiced={false}/>
+          <JobSearchSelect notExported={false} notInvoiced={false} />
        </Form.Item>
      </Form>
      <Space>
--- a/client/src/components/jobs-find-modal/jobs-find-modal.component.jsx
+++ b/client/src/components/jobs-find-modal/jobs-find-modal.component.jsx
@@ -190,7 +190,7 @@ export default function JobsFindModalComponent({
            />
          </div>
        )}
-        pagination={{ position: "bottom" }}
+        pagination={{ placement: "bottom" }}
        columns={columns}
        rowKey="id"
        loading={jobsListLoading}
--- a/client/src/components/layout-form-row/layout-form-row.component.jsx
+++ b/client/src/components/layout-form-row/layout-form-row.component.jsx
@@ -4,7 +4,7 @@ import "./layout-form-row.styles.scss";
 export default function LayoutFormRow({ header, children, grow = false, noDivider = false, ...restProps }) {
  const DividerHeader = () =>
    !noDivider && (
-      <Divider orientation="left" type="horizontal" style={{ marginTop: ".8rem" }}>
+      <Divider titlePlacement="left" orientation="horizontal" style={{ marginTop: ".8rem" }}>
        {header}
      </Divider>
    );
--- a/client/src/components/owner-detail-jobs/owner-detail-jobs.component.jsx
+++ b/client/src/components/owner-detail-jobs/owner-detail-jobs.component.jsx
@@ -110,7 +110,7 @@ function OwnerDetailJobsComponent({ bodyshop, owner, isPartsEntry }) {
      }
    >
      <Table
-        pagination={{ position: "bottom" }}
+        pagination={{ placement: "bottom" }}
        columns={columns}
        scroll={{ x: true }}
        rowKey="id"
--- a/client/src/components/owner-find-modal/owner-find-modal.component.jsx
+++ b/client/src/components/owner-find-modal/owner-find-modal.component.jsx
@@ -76,7 +76,7 @@ export default function OwnerFindModalComponent({
  return (
    <div>
      <Table
-        pagination={{ position: "bottom" }}
+        pagination={{ placement: "bottom" }}
        columns={columns}
        rowKey="id"
        loading={ownersListLoading}
--- a/client/src/components/owners-list/owners-list.component.jsx
+++ b/client/src/components/owners-list/owners-list.component.jsx
@@ -116,12 +116,7 @@ export default function OwnersListComponent({ loading, owners, total, refetch })
    >
      <Table
        loading={loading}
-        pagination={{
-          position: "top",
-          pageSize: pageLimit,
-          current: parseInt(page || 1, 10),
-          total: total
-        }}
+        pagination={{ placement: "top", pageSize: pageLimit, current: parseInt(page || 1, 10), total: total }}
        columns={columns}
        rowKey="id"
        scroll={{ x: true }}
--- a/client/src/components/parts-order-modal/parts-order-modal.component.jsx
+++ b/client/src/components/parts-order-modal/parts-order-modal.component.jsx
@@ -116,7 +116,7 @@ export function PartsOrderModalComponent({
          </Radio.Group>
        </Form.Item>
      </LayoutFormRow>
-      <Divider orientation="left">{t("parts_orders.labels.inthisorder")}</Divider>
+      <Divider titlePlacement="left">{t("parts_orders.labels.inthisorder")}</Divider>
      <Form.List name={["parts_order_lines", "data"]}>
        {(fields, { remove, move }) => {
          return (
--- a/client/src/components/parts-queue-card/parts-queue-card.component.jsx
+++ b/client/src/components/parts-queue-card/parts-queue-card.component.jsx
@@ -58,7 +58,7 @@ export default function PartsQueueDetailCard() {
          }
        >
          <JobsDetailHeader job={data ? data.jobs_by_pk : null} />
-          <Divider type="horizontal" />
+          <Divider orientation="horizontal" />
          <PartsQueueJobLinesComponent jobLines={data.jobs_by_pk ? data.jobs_by_pk.joblines : null} />
        </Card>
      ) : null}
--- a/client/src/components/parts-queue-list/parts-queue.list.component.jsx
+++ b/client/src/components/parts-queue-list/parts-queue.list.component.jsx
@@ -289,7 +289,7 @@ export function PartsQueueListComponent({ bodyshop }) {
      <Table
        loading={loading}
        pagination={{
-          position: "top",
+          placement: "top",
          pageSize: pageLimit
          // current: parseInt(page || 1),
          // total: data && data.jobs_aggregate.aggregate.count,
--- a/client/src/components/production-board-kanban/settings/production-board-kanban.settings.component.jsx
+++ b/client/src/components/production-board-kanban/settings/production-board-kanban.settings.component.jsx
@@ -87,7 +87,7 @@ function ProductionBoardKanbanSettings({ associationSettings, parentLoading, bod
  };

  const overlay = (
-    <Card style={{ maxWidth: "80vw", width: "100%"}}>
+    <Card style={{ maxWidth: "80vw", width: "100%" }}>
      <Form form={form} onFinish={handleFinish} layout="vertical" onValuesChange={handleValuesChange}>
        <Tabs
          defaultActiveKey="1"
--- a/client/src/components/production-list-detail/production-list-detail.component.jsx
+++ b/client/src/components/production-list-detail/production-list-detail.component.jsx
@@ -127,7 +127,7 @@ export function ProductionListDetail({ bodyshop, jobs, setPrintCenterContext, te
        />
      }
      placement="right"
-      width={"50%"}
+      width="50%"
      onClose={handleClose}
      open={selected}
    >
@@ -199,7 +199,11 @@ export function ProductionListDetail({ bodyshop, jobs, setPrintCenterContext, te
          {!bodyshop.uselocalmediaserver && (
            <>
              <div style={{ height: "8px" }} />
-              <JobDetailCardsDocumentsComponent loading={loading} data={data ? data.jobs_by_pk : null} bodyshop={bodyshop} />
+              <JobDetailCardsDocumentsComponent
+                loading={loading}
+                data={data ? data.jobs_by_pk : null}
+                bodyshop={bodyshop}
+              />
            </>
          )}
        </div>
--- a/client/src/components/report-center-modal/report-center-modal.component.jsx
+++ b/client/src/components/report-center-modal/report-center-modal.component.jsx
@@ -178,7 +178,14 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
                        <BlurWrapperComponent
                          featureName={groupExcludeKeyFilter.find((g) => g.key === key).featureName}
                        >
-                          <ul style={{ listStyleType: "none", columns: grouped[key].length > 4 ? "2 auto" : "1", padding: 0, margin: 0 }}>
+                          <ul
+                            style={{
+                              listStyleType: "none",
+                              columns: grouped[key].length > 4 ? "2 auto" : "1",
+                              padding: 0,
+                              margin: 0
+                            }}
+                          >
                            {grouped[key].map((item) => (
                              <li key={item.key}>
                                <Radio key={item.key} value={item.key}>
@@ -189,7 +196,14 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
                          </ul>
                        </BlurWrapperComponent>
                      ) : (
-                        <ul style={{ listStyleType: "none", columns: grouped[key].length > 4 ? "2 auto" : "1", padding: 0, margin: 0 }}>
+                        <ul
+                          style={{
+                            listStyleType: "none",
+                            columns: grouped[key].length > 4 ? "2 auto" : "1",
+                            padding: 0,
+                            margin: 0
+                          }}
+                        >
                          {grouped[key].map((item) =>
                            item.featureNameRestricted ? (
                              <li key={item.key}>
--- a/client/src/components/schedule-job-modal/schedule-job-modal.container.jsx
+++ b/client/src/components/schedule-job-modal/schedule-job-modal.container.jsx
@@ -224,7 +224,7 @@ export function ScheduleJobModalContainer({
          email: (job && job.ownr_ea) || "",
          // smartDates: [],
          start: context.scheduled_in,
-          scheduled_completion: context.scheduled_completion ,
+          scheduled_completion: context.scheduled_completion,
          color: context.color,
          alt_transport: context.alt_transport,
          note: context.note
--- a/client/src/components/scoreboard-day-stats/scoreboard-day-stats.component.jsx
+++ b/client/src/components/scoreboard-day-stats/scoreboard-day-stats.component.jsx
@@ -30,12 +30,12 @@ export function ScoreboardDayStats({ bodyshop, date, entries }) {
  return (
    <Card title={dayjs(date).format("D - ddd")} className="ant-card-grid-hoverable" style={{ height: "100%" }}>
      <Statistic
-        valueStyle={{ color: dailyBodyTarget > bodyHrs ? "red" : "green" }}
+        styles={{ content: { color: dailyBodyTarget > bodyHrs ? "red" : "green" } }}
        label="Body"
        value={bodyHrs.toFixed(1)}
      />
      <Statistic
-        valueStyle={{ color: dailyPaintTarget > paintHrs ? "red" : "green" }}
+        styles={{ content: { color: dailyPaintTarget > paintHrs ? "red" : "green" } }}
        label="Refinish"
        value={paintHrs.toFixed(1)}
      />
--- a/client/src/components/scoreboard-jobs-list/scoreboard-jobs-list.component.jsx
+++ b/client/src/components/scoreboard-jobs-list/scoreboard-jobs-list.component.jsx
@@ -149,7 +149,7 @@ export default function ScoreboardJobsList() {
            onClick={(e) => e.stopPropagation()}
            onChange={(tableArgs) => setState((state) => ({ ...state, ...tableArgs }))}
            pagination={{
-              position: "top",
+              placement: "top",
              pageSize: state.pageSize || pageLimit,
              current: state.current || 1,
              total: data ? data.scoreboard_aggregate.aggregate.count : 0
--- a/client/src/components/scoreboard-timetickets-stats/scoreboard-timetickets.stats.component.jsx
+++ b/client/src/components/scoreboard-timetickets-stats/scoreboard-timetickets.stats.component.jsx
@@ -1,4 +1,4 @@
-import { Card, Col, Form, Row, Space, Statistic, Switch, Typography } from "antd";
+import { Card, Col, Row, Space, Statistic, Switch, Typography } from "antd";
 import dayjs from "../../utils/day";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -41,9 +41,10 @@ export function ScoreboardTicketsStats({ data, jobData, bodyshop }) {
    <Card
      title={t("scoreboard.labels.productivestatistics")}
      extra={
-        <Form.Item label={t("general.labels.tvmode")} valuePropName="checked" name={["tvmode"]}>
+        <Space>
+          <Typography.Text>{t("general.labels.tvmode")}</Typography.Text>
          <Switch onClick={() => setIsLarge(!isLarge)} defaultChecked={isLarge} />
-        </Form.Item>
+        </Space>
      }
    >
      <Row gutter={[16, 16]}>
@@ -60,15 +61,17 @@ export function ScoreboardTicketsStats({ data, jobData, bodyshop }) {
                          <Col span={24}>
                            <Statistic
                              value={data.seperatedThisWeek[day].total}
-                              valueStyle={{
-                                color:
-                                  parseFloat(data.seperatedThisWeek[day].total) >=
-                                  bodyshop.scoreboard_target.dailyBodyTarget +
-                                    bodyshop.scoreboard_target.dailyPaintTarget
-                                    ? "green"
-                                    : "red",
-                                fontSize: statisticSize,
-                                fontWeight: statisticWeight
+                              styles={{
+                                content: {
+                                  color:
+                                    parseFloat(data.seperatedThisWeek[day].total) >=
+                                    bodyshop.scoreboard_target.dailyBodyTarget +
+                                      bodyshop.scoreboard_target.dailyPaintTarget
+                                      ? "green"
+                                      : "red",
+                                  fontSize: statisticSize,
+                                  fontWeight: statisticWeight
+                                }
                              }}
                            />
                          </Col>
@@ -78,14 +81,16 @@ export function ScoreboardTicketsStats({ data, jobData, bodyshop }) {
                            <Statistic
                              title={<Typography.Text strong>{t("scoreboard.labels.body")}</Typography.Text>}
                              value={data.seperatedThisWeek[day].lab}
-                              valueStyle={{
-                                color:
-                                  parseFloat(data.seperatedThisWeek[day].lab) >=
-                                  bodyshop.scoreboard_target.dailyBodyTarget
-                                    ? "green"
-                                    : "red",
-                                fontSize: statisticSize,
-                                fontWeight: statisticWeight
+                              styles={{
+                                content: {
+                                  color:
+                                    parseFloat(data.seperatedThisWeek[day].lab) >=
+                                    bodyshop.scoreboard_target.dailyBodyTarget
+                                      ? "green"
+                                      : "red",
+                                  fontSize: statisticSize,
+                                  fontWeight: statisticWeight
+                                }
                              }}
                            />
                          </Col>
@@ -93,14 +98,16 @@ export function ScoreboardTicketsStats({ data, jobData, bodyshop }) {
                            <Statistic
                              title={<Typography.Text strong>{t("scoreboard.labels.refinish")}</Typography.Text>}
                              value={data.seperatedThisWeek[day].lar}
-                              valueStyle={{
-                                color:
-                                  parseFloat(data.seperatedThisWeek[day].lar) >=
-                                  bodyshop.scoreboard_target.dailyPaintTarget
-                                    ? "green"
-                                    : "red",
-                                fontSize: statisticSize,
-                                fontWeight: statisticWeight
+                              styles={{
+                                content: {
+                                  color:
+                                    parseFloat(data.seperatedThisWeek[day].lar) >=
+                                    bodyshop.scoreboard_target.dailyPaintTarget
+                                      ? "green"
+                                      : "red",
+                                  fontSize: statisticSize,
+                                  fontWeight: statisticWeight
+                                }
                              }}
                            />
                          </Col>
@@ -122,25 +129,27 @@ export function ScoreboardTicketsStats({ data, jobData, bodyshop }) {
                    <Col span={24}>
                      <Statistic
                        value={data.totalThisWeek}
-                        valueStyle={{
-                          color:
-                            parseFloat(data.totalThisWeek) >=
-                            Util.WeeklyTargetHrsInPeriod(
-                              bodyshop.scoreboard_target.dailyBodyTarget,
-                              dayjs().startOf("week"),
-                              dayjs().endOf("week"),
-                              bodyshop
-                            ) +
+                        styles={{
+                          content: {
+                            color:
+                              parseFloat(data.totalThisWeek) >=
                              Util.WeeklyTargetHrsInPeriod(
-                                bodyshop.scoreboard_target.dailyPaintTarget,
+                                bodyshop.scoreboard_target.dailyBodyTarget,
                                dayjs().startOf("week"),
                                dayjs().endOf("week"),
                                bodyshop
-                              )
-                              ? "green"
-                              : "red",
-                          fontSize: statisticSize,
-                          fontWeight: statisticWeight
+                              ) +
+                                Util.WeeklyTargetHrsInPeriod(
+                                  bodyshop.scoreboard_target.dailyPaintTarget,
+                                  dayjs().startOf("week"),
+                                  dayjs().endOf("week"),
+                                  bodyshop
+                                )
+                                ? "green"
+                                : "red",
+                            fontSize: statisticSize,
+                            fontWeight: statisticWeight
+                          }
                        }}
                      />
                    </Col>
@@ -150,19 +159,21 @@ export function ScoreboardTicketsStats({ data, jobData, bodyshop }) {
                      <Statistic
                        title={<Typography.Text strong>{t("scoreboard.labels.body")}</Typography.Text>}
                        value={data.totalThisWeekLAB}
-                        valueStyle={{
-                          color:
-                            parseFloat(data.totalThisWeekLAB) >=
-                            Util.WeeklyTargetHrsInPeriod(
-                              bodyshop.scoreboard_target.dailyBodyTarget,
-                              dayjs().startOf("week"),
-                              dayjs().endOf("week"),
-                              bodyshop
-                            )
-                              ? "green"
-                              : "red",
-                          fontSize: statisticSize,
-                          fontWeight: statisticWeight
+                        styles={{
+                          content: {
+                            color:
+                              parseFloat(data.totalThisWeekLAB) >=
+                              Util.WeeklyTargetHrsInPeriod(
+                                bodyshop.scoreboard_target.dailyBodyTarget,
+                                dayjs().startOf("week"),
+                                dayjs().endOf("week"),
+                                bodyshop
+                              )
+                                ? "green"
+                                : "red",
+                            fontSize: statisticSize,
+                            fontWeight: statisticWeight
+                          }
                        }}
                      />
                    </Col>
@@ -170,19 +181,21 @@ export function ScoreboardTicketsStats({ data, jobData, bodyshop }) {
                      <Statistic
                        title={<Typography.Text strong>{t("scoreboard.labels.refinish")}</Typography.Text>}
                        value={data.totalThisWeekLAR}
-                        valueStyle={{
-                          color:
-                            parseFloat(data.totalThisWeekLAR) >=
-                            Util.WeeklyTargetHrsInPeriod(
-                              bodyshop.scoreboard_target.dailyPaintTarget,
-                              dayjs().startOf("week"),
-                              dayjs().endOf("week"),
-                              bodyshop
-                            )
-                              ? "green"
-                              : "red",
-                          fontSize: statisticSize,
-                          fontWeight: statisticWeight
+                        styles={{
+                          content: {
+                            color:
+                              parseFloat(data.totalThisWeekLAR) >=
+                              Util.WeeklyTargetHrsInPeriod(
+                                bodyshop.scoreboard_target.dailyPaintTarget,
+                                dayjs().startOf("week"),
+                                dayjs().endOf("week"),
+                                bodyshop
+                              )
+                                ? "green"
+                                : "red",
+                            fontSize: statisticSize,
+                            fontWeight: statisticWeight
+                          }
                        }}
                      />
                    </Col>
@@ -196,25 +209,27 @@ export function ScoreboardTicketsStats({ data, jobData, bodyshop }) {
                    <Col span={24}>
                      <Statistic
                        value={data.totalLastWeek}
-                        valueStyle={{
-                          color:
-                            parseFloat(data.totalLastWeek) >=
-                            Util.WeeklyTargetHrsInPeriod(
-                              bodyshop.scoreboard_target.dailyBodyTarget,
-                              dayjs().subtract(1, "week").startOf("week"),
-                              dayjs().subtract(1, "week").endOf("week"),
-                              bodyshop
-                            ) +
+                        styles={{
+                          content: {
+                            color:
+                              parseFloat(data.totalLastWeek) >=
                              Util.WeeklyTargetHrsInPeriod(
-                                bodyshop.scoreboard_target.dailyPaintTarget,
+                                bodyshop.scoreboard_target.dailyBodyTarget,
                                dayjs().subtract(1, "week").startOf("week"),
                                dayjs().subtract(1, "week").endOf("week"),
                                bodyshop
-                              )
-                              ? "green"
-                              : "red",
-                          fontSize: statisticSize,
-                          fontWeight: statisticWeight
+                              ) +
+                                Util.WeeklyTargetHrsInPeriod(
+                                  bodyshop.scoreboard_target.dailyPaintTarget,
+                                  dayjs().subtract(1, "week").startOf("week"),
+                                  dayjs().subtract(1, "week").endOf("week"),
+                                  bodyshop
+                                )
+                                ? "green"
+                                : "red",
+                            fontSize: statisticSize,
+                            fontWeight: statisticWeight
+                          }
                        }}
                      />
                    </Col>
@@ -224,19 +239,21 @@ export function ScoreboardTicketsStats({ data, jobData, bodyshop }) {
                      <Statistic
                        title={<Typography.Text strong>{t("scoreboard.labels.body")}</Typography.Text>}
                        value={data.totalLastWeekLAB}
-                        valueStyle={{
-                          color:
-                            parseFloat(data.totalLastWeekLAB) >=
-                            Util.WeeklyTargetHrsInPeriod(
-                              bodyshop.scoreboard_target.dailyBodyTarget,
-                              dayjs().subtract(1, "week").startOf("week"),
-                              dayjs().subtract(1, "week").endOf("week"),
-                              bodyshop
-                            )
-                              ? "green"
-                              : "red",
-                          fontSize: statisticSize,
-                          fontWeight: statisticWeight
+                        styles={{
+                          content: {
+                            color:
+                              parseFloat(data.totalLastWeekLAB) >=
+                              Util.WeeklyTargetHrsInPeriod(
+                                bodyshop.scoreboard_target.dailyBodyTarget,
+                                dayjs().subtract(1, "week").startOf("week"),
+                                dayjs().subtract(1, "week").endOf("week"),
+                                bodyshop
+                              )
+                                ? "green"
+                                : "red",
+                            fontSize: statisticSize,
+                            fontWeight: statisticWeight
+                          }
                        }}
                      />
                    </Col>
@@ -244,19 +261,21 @@ export function ScoreboardTicketsStats({ data, jobData, bodyshop }) {
                      <Statistic
                        title={<Typography.Text strong>{t("scoreboard.labels.refinish")}</Typography.Text>}
                        value={data.totalLastWeekLAR}
-                        valueStyle={{
-                          color:
-                            parseFloat(data.totalLastWeekLAR) >=
-                            Util.WeeklyTargetHrsInPeriod(
-                              bodyshop.scoreboard_target.dailyPaintTarget,
-                              dayjs().subtract(1, "week").startOf("week"),
-                              dayjs().subtract(1, "week").endOf("week"),
-                              bodyshop
-                            )
-                              ? "green"
-                              : "red",
-                          fontSize: statisticSize,
-                          fontWeight: statisticWeight
+                        styles={{
+                          content: {
+                            color:
+                              parseFloat(data.totalLastWeekLAR) >=
+                              Util.WeeklyTargetHrsInPeriod(
+                                bodyshop.scoreboard_target.dailyPaintTarget,
+                                dayjs().subtract(1, "week").startOf("week"),
+                                dayjs().subtract(1, "week").endOf("week"),
+                                bodyshop
+                              )
+                                ? "green"
+                                : "red",
+                            fontSize: statisticSize,
+                            fontWeight: statisticWeight
+                          }
                        }}
                      />
                    </Col>
@@ -270,25 +289,27 @@ export function ScoreboardTicketsStats({ data, jobData, bodyshop }) {
                    <Col span={24}>
                      <Statistic
                        value={data.totalPriorWeek}
-                        valueStyle={{
-                          color:
-                            parseFloat(data.totalPriorWeek) >=
-                            Util.WeeklyTargetHrsInPeriod(
-                              bodyshop.scoreboard_target.dailyBodyTarget,
-                              dayjs().subtract(2, "week").startOf("week"),
-                              dayjs().subtract(2, "week").endOf("week"),
-                              bodyshop
-                            ) +
+                        styles={{
+                          content: {
+                            color:
+                              parseFloat(data.totalPriorWeek) >=
                              Util.WeeklyTargetHrsInPeriod(
-                                bodyshop.scoreboard_target.dailyPaintTarget,
+                                bodyshop.scoreboard_target.dailyBodyTarget,
                                dayjs().subtract(2, "week").startOf("week"),
                                dayjs().subtract(2, "week").endOf("week"),
                                bodyshop
-                              )
-                              ? "green"
-                              : "red",
-                          fontSize: statisticSize,
-                          fontWeight: statisticWeight
+                              ) +
+                                Util.WeeklyTargetHrsInPeriod(
+                                  bodyshop.scoreboard_target.dailyPaintTarget,
+                                  dayjs().subtract(2, "week").startOf("week"),
+                                  dayjs().subtract(2, "week").endOf("week"),
+                                  bodyshop
+                                )
+                                ? "green"
+                                : "red",
+                            fontSize: statisticSize,
+                            fontWeight: statisticWeight
+                          }
                        }}
                      />
                    </Col>
@@ -298,19 +319,21 @@ export function ScoreboardTicketsStats({ data, jobData, bodyshop }) {
                      <Statistic
                        title={<Typography.Text strong>{t("scoreboard.labels.body")}</Typography.Text>}
                        value={data.totalPriorWeekLAB}
-                        valueStyle={{
-                          color:
-                            parseFloat(data.totalPriorWeekLAB) >=
-                            Util.WeeklyTargetHrsInPeriod(
-                              bodyshop.scoreboard_target.dailyBodyTarget,
-                              dayjs().subtract(2, "week").startOf("week"),
-                              dayjs().subtract(2, "week").endOf("week"),
-                              bodyshop
-                            )
-                              ? "green"
-                              : "red",
-                          fontSize: statisticSize,
-                          fontWeight: statisticWeight
+                        styles={{
+                          content: {
+                            color:
+                              parseFloat(data.totalPriorWeekLAB) >=
+                              Util.WeeklyTargetHrsInPeriod(
+                                bodyshop.scoreboard_target.dailyBodyTarget,
+                                dayjs().subtract(2, "week").startOf("week"),
+                                dayjs().subtract(2, "week").endOf("week"),
+                                bodyshop
+                              )
+                                ? "green"
+                                : "red",
+                            fontSize: statisticSize,
+                            fontWeight: statisticWeight
+                          }
                        }}
                      />
                    </Col>
@@ -318,19 +341,21 @@ export function ScoreboardTicketsStats({ data, jobData, bodyshop }) {
                      <Statistic
                        title={<Typography.Text strong>{t("scoreboard.labels.refinish")}</Typography.Text>}
                        value={data.totalPriorWeekLAR}
-                        valueStyle={{
-                          color:
-                            parseFloat(data.totalPriorWeekLAR) >=
-                            Util.WeeklyTargetHrsInPeriod(
-                              bodyshop.scoreboard_target.dailyPaintTarget,
-                              dayjs().subtract(2, "week").startOf("week"),
-                              dayjs().subtract(2, "week").endOf("week"),
-                              bodyshop
-                            )
-                              ? "green"
-                              : "red",
-                          fontSize: statisticSize,
-                          fontWeight: statisticWeight
+                        styles={{
+                          content: {
+                            color:
+                              parseFloat(data.totalPriorWeekLAR) >=
+                              Util.WeeklyTargetHrsInPeriod(
+                                bodyshop.scoreboard_target.dailyPaintTarget,
+                                dayjs().subtract(2, "week").startOf("week"),
+                                dayjs().subtract(2, "week").endOf("week"),
+                                bodyshop
+                              )
+                                ? "green"
+                                : "red",
+                            fontSize: statisticSize,
+                            fontWeight: statisticWeight
+                          }
                        }}
                      />
                    </Col>
@@ -347,15 +372,17 @@ export function ScoreboardTicketsStats({ data, jobData, bodyshop }) {
                    <Col span={24}>
                      <Statistic
                        value={data.totalThisMonth}
-                        valueStyle={{
-                          color:
-                            parseFloat(data.totalThisMonth) >=
-                            Util.MonthlyTargetHrs(bodyshop.scoreboard_target.dailyBodyTarget, bodyshop) +
-                              Util.MonthlyTargetHrs(bodyshop.scoreboard_target.dailyPaintTarget, bodyshop)
-                              ? "green"
-                              : "red",
-                          fontSize: statisticSize,
-                          fontWeight: statisticWeight
+                        styles={{
+                          content: {
+                            color:
+                              parseFloat(data.totalThisMonth) >=
+                              Util.MonthlyTargetHrs(bodyshop.scoreboard_target.dailyBodyTarget, bodyshop) +
+                                Util.MonthlyTargetHrs(bodyshop.scoreboard_target.dailyPaintTarget, bodyshop)
+                                ? "green"
+                                : "red",
+                            fontSize: statisticSize,
+                            fontWeight: statisticWeight
+                          }
                        }}
                      />
                    </Col>
@@ -365,14 +392,16 @@ export function ScoreboardTicketsStats({ data, jobData, bodyshop }) {
                      <Statistic
                        title={<Typography.Text strong>{t("scoreboard.labels.body")}</Typography.Text>}
                        value={data.totalThisMonthLAB}
-                        valueStyle={{
-                          color:
-                            parseFloat(data.totalThisMonthLAB) >=
-                            Util.MonthlyTargetHrs(bodyshop.scoreboard_target.dailyBodyTarget, bodyshop)
-                              ? "green"
-                              : "red",
-                          fontSize: statisticSize,
-                          fontWeight: statisticWeight
+                        styles={{
+                          content: {
+                            color:
+                              parseFloat(data.totalThisMonthLAB) >=
+                              Util.MonthlyTargetHrs(bodyshop.scoreboard_target.dailyBodyTarget, bodyshop)
+                                ? "green"
+                                : "red",
+                            fontSize: statisticSize,
+                            fontWeight: statisticWeight
+                          }
                        }}
                      />
                    </Col>
@@ -380,14 +409,16 @@ export function ScoreboardTicketsStats({ data, jobData, bodyshop }) {
                      <Statistic
                        title={<Typography.Text strong>{t("scoreboard.labels.refinish")}</Typography.Text>}
                        value={data.totalThisMonthLAR}
-                        valueStyle={{
-                          color:
-                            parseFloat(data.totalThisMonthLAR) >=
-                            Util.MonthlyTargetHrs(bodyshop.scoreboard_target.dailyPaintTarget, bodyshop)
-                              ? "green"
-                              : "red",
-                          fontSize: statisticSize,
-                          fontWeight: statisticWeight
+                        styles={{
+                          content: {
+                            color:
+                              parseFloat(data.totalThisMonthLAR) >=
+                              Util.MonthlyTargetHrs(bodyshop.scoreboard_target.dailyPaintTarget, bodyshop)
+                                ? "green"
+                                : "red",
+                            fontSize: statisticSize,
+                            fontWeight: statisticWeight
+                          }
                        }}
                      />
                    </Col>
@@ -401,15 +432,17 @@ export function ScoreboardTicketsStats({ data, jobData, bodyshop }) {
                    <Col span={24}>
                      <Statistic
                        value={data.totalLastMonth}
-                        valueStyle={{
-                          color:
-                            parseFloat(data.totalLastMonth) >=
-                            Util.LastMonthTargetHrs(bodyshop.scoreboard_target.dailyBodyTarget, bodyshop) +
-                              Util.LastMonthTargetHrs(bodyshop.scoreboard_target.dailyPaintTarget, bodyshop)
-                              ? "green"
-                              : "red",
-                          fontSize: statisticSize,
-                          fontWeight: statisticWeight
+                        styles={{
+                          content: {
+                            color:
+                              parseFloat(data.totalLastMonth) >=
+                              Util.LastMonthTargetHrs(bodyshop.scoreboard_target.dailyBodyTarget, bodyshop) +
+                                Util.LastMonthTargetHrs(bodyshop.scoreboard_target.dailyPaintTarget, bodyshop)
+                                ? "green"
+                                : "red",
+                            fontSize: statisticSize,
+                            fontWeight: statisticWeight
+                          }
                        }}
                      />
                    </Col>
@@ -419,14 +452,16 @@ export function ScoreboardTicketsStats({ data, jobData, bodyshop }) {
                      <Statistic
                        title={<Typography.Text strong>{t("scoreboard.labels.body")}</Typography.Text>}
                        value={data.totalLastMonthLAB}
-                        valueStyle={{
-                          color:
-                            parseFloat(data.totalLastMonthLAB) >=
-                            Util.LastMonthTargetHrs(bodyshop.scoreboard_target.dailyBodyTarget, bodyshop)
-                              ? "green"
-                              : "red",
-                          fontSize: statisticSize,
-                          fontWeight: statisticWeight
+                        styles={{
+                          content: {
+                            color:
+                              parseFloat(data.totalLastMonthLAB) >=
+                              Util.LastMonthTargetHrs(bodyshop.scoreboard_target.dailyBodyTarget, bodyshop)
+                                ? "green"
+                                : "red",
+                            fontSize: statisticSize,
+                            fontWeight: statisticWeight
+                          }
                        }}
                      />
                    </Col>
@@ -434,14 +469,16 @@ export function ScoreboardTicketsStats({ data, jobData, bodyshop }) {
                      <Statistic
                        title={<Typography.Text strong>{t("scoreboard.labels.refinish")}</Typography.Text>}
                        value={data.totalLastMonthLAR}
-                        valueStyle={{
-                          color:
-                            parseFloat(data.totalLastMonthLAR) >=
-                            Util.LastMonthTargetHrs(bodyshop.scoreboard_target.dailyPaintTarget, bodyshop)
-                              ? "green"
-                              : "red",
-                          fontSize: statisticSize,
-                          fontWeight: statisticWeight
+                        styles={{
+                          content: {
+                            color:
+                              parseFloat(data.totalLastMonthLAR) >=
+                              Util.LastMonthTargetHrs(bodyshop.scoreboard_target.dailyPaintTarget, bodyshop)
+                                ? "green"
+                                : "red",
+                            fontSize: statisticSize,
+                            fontWeight: statisticWeight
+                          }
                        }}
                      />
                    </Col>
@@ -455,9 +492,11 @@ export function ScoreboardTicketsStats({ data, jobData, bodyshop }) {
                    <Col span={24}>
                      <Statistic
                        value={`${data.totalEffieciencyOverPeriod || 0}%`}
-                        valueStyle={{
-                          fontSize: statisticSize,
-                          fontWeight: statisticWeight
+                        styles={{
+                          content: {
+                            fontSize: statisticSize,
+                            fontWeight: statisticWeight
+                          }
                        }}
                      />
                    </Col>
@@ -467,9 +506,11 @@ export function ScoreboardTicketsStats({ data, jobData, bodyshop }) {
                      <Statistic
                        title={<Typography.Text strong>{t("scoreboard.labels.body")}</Typography.Text>}
                        value={`${data.totalEffieciencyOverPeriodLAB || 0}%`}
-                        valueStyle={{
-                          fontSize: statisticSize,
-                          fontWeight: statisticWeight
+                        styles={{
+                          content: {
+                            fontSize: statisticSize,
+                            fontWeight: statisticWeight
+                          }
                        }}
                      />
                    </Col>
@@ -477,9 +518,11 @@ export function ScoreboardTicketsStats({ data, jobData, bodyshop }) {
                      <Statistic
                        title={<Typography.Text strong>{t("scoreboard.labels.refinish")}</Typography.Text>}
                        value={`${data.totalEffieciencyOverPeriodLAR || 0}%`}
-                        valueStyle={{
-                          fontSize: statisticSize,
-                          fontWeight: statisticWeight
+                        styles={{
+                          content: {
+                            fontSize: statisticSize,
+                            fontWeight: statisticWeight
+                          }
                        }}
                      />
                    </Col>
@@ -492,9 +535,11 @@ export function ScoreboardTicketsStats({ data, jobData, bodyshop }) {
                    <Col span={24}>
                      <Statistic
                        value={jobData.count}
-                        valueStyle={{
-                          fontSize: statisticSize,
-                          fontWeight: statisticWeight
+                        styles={{
+                          content: {
+                            fontSize: statisticSize,
+                            fontWeight: statisticWeight
+                          }
                        }}
                      />
                    </Col>
@@ -504,9 +549,11 @@ export function ScoreboardTicketsStats({ data, jobData, bodyshop }) {
                      <Statistic
                        title={<Typography.Text strong>{t("scoreboard.labels.totalhrs")}</Typography.Text>}
                        value={jobData.tthrs}
-                        valueStyle={{
-                          fontSize: statisticSize,
-                          fontWeight: statisticWeight
+                        styles={{
+                          content: {
+                            fontSize: statisticSize,
+                            fontWeight: statisticWeight
+                          }
                        }}
                      />
                    </Col>
--- a/client/src/components/shop-employees/shop-employees-list.component.jsx
+++ b/client/src/components/shop-employees/shop-employees-list.component.jsx
@@ -104,7 +104,7 @@ export default function ShopEmployeesListComponent({ loading, employees }) {
          );
        }}
        loading={loading}
-        pagination={{ position: "top" }}
+        pagination={{ placement: "top" }}
        columns={columns}
        rowKey="id"
        dataSource={employees}
--- a/client/src/components/shop-info/shop-info.scheduling.component.jsx
+++ b/client/src/components/shop-info/shop-info.scheduling.component.jsx
@@ -100,7 +100,7 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
          <Select mode="tags" />
        </Form.Item>
      </LayoutFormRow>
-      <Divider orientation="left">{t("bodyshop.labels.workingdays")}</Divider>
+      <Divider titlePlacement="left">{t("bodyshop.labels.workingdays")}</Divider>
      <Space wrap size="large" id="workingdays">
        <Form.Item label={t("general.labels.sunday")} name={["workingdays", "sunday"]} valuePropName="checked">
          <Switch />
--- a/client/src/components/shop-info/shop-info.speedprint.component.jsx
+++ b/client/src/components/shop-info/shop-info.speedprint.component.jsx
@@ -10,9 +10,7 @@ export default function ShopInfoSpeedPrint() {
  const { t } = useTranslation();
  const allTemplates = TemplateList("job");
  const TemplateListGenerated = InstanceRenderManager({
-    imex: Object.fromEntries(
-      Object.entries(allTemplates).filter(([, { enhanced_payroll }]) => !enhanced_payroll)
-    ),
+    imex: Object.fromEntries(Object.entries(allTemplates).filter(([, { enhanced_payroll }]) => !enhanced_payroll)),
    rome: allTemplates
  });

--- a/client/src/components/shop-teams/shop-employee-teams.list.jsx
+++ b/client/src/components/shop-teams/shop-employee-teams.list.jsx
@@ -42,7 +42,7 @@ export default function ShopEmployeeTeamsListComponent({ loading, employee_teams
          );
        }}
        loading={loading}
-        pagination={{ position: "top" }}
+        pagination={{ placement: "top" }}
        columns={columns}
        rowKey="id"
        dataSource={employee_teams}
--- a/client/src/components/shop-users/shop-users.component.jsx
+++ b/client/src/components/shop-users/shop-users.component.jsx
@@ -68,7 +68,7 @@ export function ShopInfoUsersComponent({ bodyshop }) {
    <div>
      <Table
        loading={loading}
-        pagination={{ position: "top" }}
+        pagination={{ placement: "top" }}
        columns={columns}
        rowKey="id"
        dataSource={data && data.associations}
--- a/client/src/components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component.jsx
+++ b/client/src/components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component.jsx
@@ -95,9 +95,9 @@ export function TechLookupJobsDrawer({ bodyshop, setPrintCenterContext }) {
          }
        >
          <JobsDetailHeader job={data.jobs_by_pk} disabled />
-          <Divider type="horizontal" />
+          <Divider orientation="horizontal" />
          <Tabs
-            size="large"
+            width="large"
            defaultActiveKey="lines"
            items={[
              {
--- a/client/src/components/tt-approvals-list/tt-approvals-list.component.jsx
+++ b/client/src/components/tt-approvals-list/tt-approvals-list.component.jsx
@@ -189,12 +189,7 @@ export function TtApprovalsListComponent({
        scroll={{
          x: true
        }}
-        pagination={{
-          position: "top",
-          pageSize: 25,
-          current: parseInt(page || 1),
-          total: total
-        }}
+        pagination={{ placement: "top", pageSize: 25, current: parseInt(page || 1), total: total }}
        dataSource={tt_approval_queue}
        onChange={handleTableChange}
        rowSelection={{
--- a/client/src/components/vehicles-list/vehicles-list.component.jsx
+++ b/client/src/components/vehicles-list/vehicles-list.component.jsx
@@ -104,12 +104,7 @@ export default function VehiclesListComponent({ loading, vehicles, total, refetc
    >
      <Table
        loading={loading}
-        pagination={{
-          position: "top",
-          pageSize: pageLimit,
-          current: parseInt(page || 1),
-          total: total
-        }}
+        pagination={{ placement: "top", pageSize: pageLimit, current: parseInt(page || 1), total: total }}
        columns={columns}
        rowKey="id"
        scroll={{ x: true }}
--- a/client/src/components/vendors-list/vendors-list.component.jsx
+++ b/client/src/components/vendors-list/vendors-list.component.jsx
@@ -89,7 +89,7 @@ export default function VendorsListComponent({ handleNewVendor, loading, handleO
    >
      <Table
        loading={loading}
-        pagination={{ position: "top" }}
+        pagination={{ placement: "top" }}
        columns={columns}
        rowKey="id"
        onChange={handleTableChange}