WIP Styling Changes

2021-03-26 12:32:17 -07:00
parent 6688121b21
commit 89d4eb28b6
30 changed files with 486 additions and 498 deletions
--- a/client/src/components/breadcrumbs/breadcrumbs.styles.scss
+++ b/client/src/components/breadcrumbs/breadcrumbs.styles.scss
@@ -1,3 +1,3 @@
 .breadcrumb-container {
-  margin: 0.5rem 4rem;
+  margin: 0.2rem 0.2rem 0.8rem 0.2rem;
 }
--- a/client/src/components/chat-open-button/chat-open-button.component.jsx
+++ b/client/src/components/chat-open-button/chat-open-button.component.jsx
@@ -1,10 +1,10 @@
-import { MessageFilled } from "@ant-design/icons";
 import { notification } from "antd";
 import parsePhoneNumber from "libphonenumber-js";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { openChatByPhone } from "../../redux/messaging/messaging.actions";
+import PhoneNumberFormatter from "../../utils/PhoneFormatter";

 const mapDispatchToProps = (dispatch) => ({
  openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
@@ -12,16 +12,13 @@ const mapDispatchToProps = (dispatch) => ({

 export function ChatOpenButton({ phone, jobid, openChatByPhone }) {
  const { t } = useTranslation();
+  if (!phone) return <></>;
  return (
-    <MessageFilled
-      style={{ margin: 4 }}
+    <a
+      href="# "
      onClick={(e) => {
        e.stopPropagation();
        const p = parsePhoneNumber(phone, "CA");
-        console.log(
-          "🚀  ~ file: chat-open-button.component.jsx  ~ line 21  ~ p",
-          p
-        );

        if (p && p.isValid()) {
          openChatByPhone({ phone_num: p.formatInternational(), jobid: jobid });
@@ -29,7 +26,9 @@ export function ChatOpenButton({ phone, jobid, openChatByPhone }) {
          notification["error"]({ message: t("messaging.error.invalidphone") });
        }
      }}
-    />
+    >
+      <PhoneNumberFormatter>{phone}</PhoneNumberFormatter>
+    </a>
  );
 }
 export default connect(null, mapDispatchToProps)(ChatOpenButton);
--- a/client/src/components/data-label/data-label.component.jsx
+++ b/client/src/components/data-label/data-label.component.jsx
@@ -1,3 +1,4 @@
+import { Typography } from "antd";
 import React from "react";

 export default function DataLabel({
@@ -11,14 +12,28 @@ export default function DataLabel({
  if (!visible || (hideIfNull && !!!children)) return null;

  return (
-    <div {...props}>
+    <div {...props} style={{ display: "flex" }}>
      <div
        style={{
-          display: vertical ? "block" : "inline-block",
+          flex: 2,
          marginRight: ".2rem",
-        }}>{`${label}: `}</div>
-      <div style={{ display: vertical ? "block" : "inline-block" }}>
-        {children}
+        }}
+      >
+        <Typography.Text type="secondary">{`${label}:`}</Typography.Text>
+      </div>
+      <div
+        style={{
+          flex: 4,
+          marginLeft: ".3rem",
+          fontWeight: "bolder",
+          wordWrap: "break-word",
+        }}
+      >
+        {typeof children === "string" ? (
+          <Typography.Text>{children}</Typography.Text>
+        ) : (
+          children
+        )}
      </div>
    </div>
  );
--- a/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx
+++ b/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx
@@ -13,10 +13,7 @@ export default function FormsFieldChanged({ form }) {
  const loc = useLocation();

  return (
-    <Form.Item
-      shouldUpdate
-      //style={{ margin: 0, padding: 0 }}
-    >
+    <Form.Item shouldUpdate style={{ margin: 0, padding: 0 }}>
      {() => {
        if (form.isFieldsTouched())
          return (
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -14,7 +14,7 @@ import Icon, {
  UnorderedListOutlined,
  UserOutlined,
 } from "@ant-design/icons";
-import { Avatar, Menu } from "antd";
+import { Menu } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { BsKanban } from "react-icons/bs";
@@ -67,10 +67,10 @@ function Header({
  const { t } = useTranslation();

  return (
-    <div style={{ display: "flex", alignItems: "center" }}>
+    <div style={{ display: "flex", alignContent: "center" }}>
      <Menu
        mode="horizontal"
-        theme="dark"
+        theme="light"
        style={{ flex: 5 }}
        selectedKeys={[selectedHeader]}
        onClick={handleMenuClick}
@@ -297,38 +297,15 @@ function Header({
            <Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>
          </Menu.Item>
        </Menu.SubMenu>
-      </Menu>
-      <GlobalSearch />
-      <Menu
-        mode="horizontal"
-        theme="dark"
-        selectedKeys={[selectedHeader]}
-        onClick={handleMenuClick}
-      >
+
+        <Menu.Item>
+          <GlobalSearch />
+        </Menu.Item>
        <Menu.SubMenu
          title={
-            <div>
-              {currentUser.photoURL ? (
-                <Avatar
-                  src={currentUser.photoURL}
-                  style={{
-                    margin: "10px",
-                  }}
-                />
-              ) : (
-                <Avatar
-                  style={{
-                    backgroundColor: "#87d068",
-                    margin: "10px",
-                  }}
-                  icon={<UserOutlined />}
-                />
-              )}
-
-              {currentUser.displayName ||
-                currentUser.email ||
-                t("general.labels.unknown")}
-            </div>
+            currentUser.displayName ||
+            currentUser.email ||
+            t("general.labels.unknown")
          }
        >
          <Menu.Item danger onClick={() => signOutStart()}>
--- a/client/src/components/jira-support-widget/jira-support-widget.component.jsx
+++ b/client/src/components/jira-support-widget/jira-support-widget.component.jsx
@@ -8,17 +8,8 @@ export default function JiraSupportComponent() {

 const useScript = () => {
  useEffect(() => {
-    console.log("Creating JIRA widget.");
    const script = document.createElement("script");
    script.src = "https://jsd-widget.atlassian.com/assets/embed.js";
-    // script["data-jsd-embedded"] = true;
-    // script["data-key"] = "d69bb65c-1dd3-483f-b109-66a970d03f44";
-    // script["data-base-url"] = "https://jsd-widget.atlassian.com";
-
-    // script.attributes.setNamedItem("data-jsd-embedded");
-    // script.attributes.setNamedItem("data-key");
-    // script.attributes.setNamedItem("data-base-url");
-
    script.setAttribute("data-jsd-embedded", true);
    script.setAttribute("data-key", "d69bb65c-1dd3-483f-b109-66a970d03f44");
    script.setAttribute("data-base-url", "https://jsd-widget.atlassian.com");
--- a/client/src/components/job-costing-modal/job-costing-modal.component.jsx
+++ b/client/src/components/job-costing-modal/job-costing-modal.component.jsx
@@ -136,7 +136,7 @@ export function JobCostingModalComponent({ bodyshop, job }) {

    let gppercentFormatted;
    if (isNaN(gppercent)) gppercentFormatted = "0%";
-    else if (!isFinite(gppercent)) gppercentFormatted = "-∞";
+    else if (!isFinite(gppercent)) gppercentFormatted = "- ∞";
    else {
      gppercentFormatted = `${gppercent}%`;
    }
--- a/client/src/components/job-detail-cards/job-detail-cards.component.jsx
+++ b/client/src/components/job-detail-cards/job-detail-cards.component.jsx
@@ -1,6 +1,6 @@
 import { PrinterFilled } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
-import { Button, Col, Drawer, Grid, PageHeader, Row, Space, Tag } from "antd";
+import { Button, Card, Drawer, Grid, PageHeader, Space, Tag } from "antd";
 import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -25,15 +25,6 @@ const mapDispatchToProps = (dispatch) => ({
    dispatch(setModalContext({ context: context, modal: "printCenter" })),
 });

-const colBreakPoints = {
-  xs: {
-    span: 24,
-  },
-  sm: {
-    span: 12,
-  },
-};
-
 export function JobDetailCards({ setPrintCenterContext }) {
  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
    .filter((screen) => !!screen[1])
@@ -69,20 +60,23 @@ export function JobDetailCards({ setPrintCenterContext }) {
      }),
    });
  };
-
+  const gridStyle = {
+    width: "25%",
+    textAlign: "center",
+  };
  return (
    <Drawer
      visible={!!selected}
      destroyOnClose
-      width={drawerPercentage}
-      placement="right"
+      height={drawerPercentage}
+      placement="top"
      onClose={handleDrawerClose}
    >
      {loading ? <LoadingSpinner /> : null}
      {error ? <AlertComponent message={error.message} type="error" /> : null}
      {data ? (
        <PageHeader
-          ghost={true}
+          // ghost={true}
          tags={[
            <OwnerTagPopoverComponent key="owner" job={data.jobs_by_pk} />,
            <VehicleTagPopoverComponent key="vehicle" job={data.jobs_by_pk} />,
@@ -99,79 +93,80 @@ export function JobDetailCards({ setPrintCenterContext }) {
              {t("jobs.labels.inproduction")}
            </Tag>,
          ]}
-          title={
-            <Link to={`/manage/jobs/${data.jobs_by_pk.id}`}>
-              {data.jobs_by_pk.ro_number || t("general.labels.na")}
-            </Link>
-          }
          subTitle={data.jobs_by_pk.status}
-          extra={
-            <Space>
-              <Button
-                onClick={() => {
-                  setPrintCenterContext({
-                    actions: { refetch: refetch },
-                    context: {
-                      id: data.jobs_by_pk.id,
-                      job: data.jobs_by_pk,
-                      type: "job",
-                    },
-                  });
-                }}
-              >
-                <PrinterFilled />
-                {t("jobs.actions.printCenter")}
-              </Button>
-              <Link to={`/manage/jobs/${data.jobs_by_pk.id}?tab=repairdata`}>
-                <Button>{t("parts.actions.order")}</Button>
-              </Link>
-            </Space>
-          }
        >
-          <Row gutter={[16, 16]}>
-            <Col {...colBreakPoints}>
+          <Card
+            title={
+              <Link to={`/manage/jobs/${data.jobs_by_pk.id}`}>
+                {data.jobs_by_pk.ro_number || t("general.labels.na")}
+              </Link>
+            }
+            extra={
+              <Space>
+                <Button
+                  onClick={() => {
+                    setPrintCenterContext({
+                      actions: { refetch: refetch },
+                      context: {
+                        id: data.jobs_by_pk.id,
+                        job: data.jobs_by_pk,
+                        type: "job",
+                      },
+                    });
+                  }}
+                >
+                  <PrinterFilled />
+                  {t("jobs.actions.printCenter")}
+                </Button>
+                <Link to={`/manage/jobs/${data.jobs_by_pk.id}?tab=repairdata`}>
+                  <Button>{t("parts.actions.order")}</Button>
+                </Link>
+              </Space>
+            }
+          >
+            <Card.Grid style={gridStyle}>
              <JobDetailCardsInsuranceComponent
                loading={loading}
                data={data ? data.jobs_by_pk : null}
              />
-            </Col>
-            <Col {...colBreakPoints}>
+            </Card.Grid>
+            <Card.Grid style={gridStyle}>
              <JobDetailCardsTotalsComponent
                loading={loading}
                data={data ? data.jobs_by_pk : null}
              />
-            </Col>
-            <Col {...colBreakPoints}>
+            </Card.Grid>
+            <Card.Grid style={gridStyle}>
              <JobDetailCardsDatesComponent
                loading={loading}
                data={data ? data.jobs_by_pk : null}
              />
-            </Col>
-            <Col {...colBreakPoints}>
+            </Card.Grid>
+            <Card.Grid style={gridStyle}>
              <JobDetailCardsPartsComponent
                loading={loading}
                data={data ? data.jobs_by_pk : null}
              />
-            </Col>
-            <Col {...colBreakPoints}>
+            </Card.Grid>
+            <Card.Grid style={gridStyle}>
              <JobDetailCardsNotesComponent
                loading={loading}
                data={data ? data.jobs_by_pk : null}
              />
-            </Col>
-            <Col {...colBreakPoints}>
+            </Card.Grid>
+            <Card.Grid style={gridStyle}>
              <JobDetailCardsDocumentsComponent
                loading={loading}
                data={data ? data.jobs_by_pk : null}
              />
-            </Col>
-            <Col {...colBreakPoints}>
+            </Card.Grid>
+            <Card.Grid style={gridStyle}>
              <JobDetailCardsDamageComponent
                loading={loading}
                data={data ? data.jobs_by_pk : null}
              />
-            </Col>
-          </Row>
+            </Card.Grid>
+          </Card>
        </PageHeader>
      ) : null}
    </Drawer>
--- a/client/src/components/jobs-available-table/jobs-available-table.container.jsx
+++ b/client/src/components/jobs-available-table/jobs-available-table.container.jsx
@@ -246,10 +246,6 @@ export function JobsAvailableContainer({ bodyshop, currentUser }) {
      const newTotals = await Axios.post("/job/totalsssu", {
        id: selectedJob,
      });
-      console.log(
-        "🚀  ~ file: jobs-available-table.container.jsx  ~ line 247  ~ newTotals",
-        newTotals
-      );

      if (newTotals.status !== 200) {
        notification["error"]({
--- a/client/src/components/jobs-change-status/jobs-change-status.component.jsx
+++ b/client/src/components/jobs-change-status/jobs-change-status.component.jsx
@@ -1,7 +1,7 @@
 import { DownCircleFilled } from "@ant-design/icons";
+import { useMutation } from "@apollo/client";
 import { Button, Dropdown, Menu, notification } from "antd";
 import React, { useEffect, useState } from "react";
-import { useMutation } from "@apollo/client";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -90,14 +90,15 @@ export function JobsChangeStatus({ job, bodyshop, jobRO }) {

  return (
    <Dropdown
-      className="imex-flex-row__margin"
      overlay={statusmenu}
      trigger={["click"]}
      key="changestatus"
      disabled={jobRO || !job.converted}
    >
-      <Button>
-        {t("jobs.actions.changestatus")} <DownCircleFilled />
+      <Button shape="round">
+        <span>{job.status}</span>
+
+        <DownCircleFilled />
      </Button>
    </Dropdown>
  );
--- a/client/src/components/jobs-convert-button/jobs-convert-button.component.jsx
+++ b/client/src/components/jobs-convert-button/jobs-convert-button.component.jsx
@@ -110,13 +110,14 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO }) {
    </div>
  );

+  if (job.converted) return <></>;
+
  return (
    <Popover visible={visible} content={popMenu}>
      <Button
        key="convert"
-        className="imex-flex-row__margin"
        type="danger"
-        style={{ display: job.converted ? "none" : "" }}
+        // style={{ display: job.converted ? "none" : "" }}
        disabled={job.converted || jobRO}
        onClick={() => setVisible(true)}
      >
--- a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
+++ b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
@@ -390,14 +390,11 @@ export function JobsDetailHeaderActions({
    </Menu>
  );
  return (
-    <Dropdown
-      className="imex-flex-row__margin"
-      overlay={statusmenu}
-      trigger={["click"]}
-      key="changestatus"
-    >
+    <Dropdown overlay={statusmenu} trigger={["click"]} key="changestatus">
      <Button>
-        {t("general.labels.actions")} <DownCircleFilled />
+        <span>{t("general.labels.actions")}</span>
+
+        <DownCircleFilled />
      </Button>
    </Dropdown>
  );
--- a/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
+++ b/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
@@ -1,21 +1,15 @@
-import { PrinterFilled } from "@ant-design/icons";
-import { Button, Divider, PageHeader, Tag } from "antd";
+import { Card, Col, Row, Tag } from "antd";
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
+import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import JobEmployeeAssignments from "../job-employee-assignments/job-employee-assignments.container";
-import JobSyncButton from "../job-sync-button/job-sync-button.component";
-import JobsChangeStatus from "../jobs-change-status/jobs-change-status.component";
-import JobsConvertButton from "../jobs-convert-button/jobs-convert-button.component";
-import JobsDetailHeaderActions from "../jobs-detail-header-actions/jobs-detail-header-actions.component";
-import OwnerTagPopoverComponent from "../owner-tag-popover/owner-tag-popover.component";
-import ProductionListColumnProductionNote from "../production-list-columns/production-list-columns.productionnote.component";
-import VehicleTagPopoverComponent from "../vehicle-tag-popover/vehicle-tag-popover.component";
+import ChatOpenButton from "../chat-open-button/chat-open-button.component";
+import DataLabel from "../data-label/data-label.component";
 import "./jobs-detail-header.styles.scss";

 const mapStateToProps = createStructuredSelector({
@@ -45,80 +39,127 @@ export function JobsDetailHeader({
    );
  }, [job.status, bodyshop.md_ro_statuses.post_production_statuses]);

-  const menuExtra = (
-    <div className="imex-flex-row">
-      <JobsChangeStatus job={job} />
-      <JobSyncButton job={job} />
-      <Button
-        className="imex-flex-row__margin"
-        onClick={() => {
-          setPrintCenterContext({
-            actions: { refetch: refetch },
-            context: {
-              id: job.id,
-              job: job,
-              type: "job",
-            },
-          });
-        }}
-        key="printing"
-      >
-        <PrinterFilled />
-        {t("jobs.actions.printCenter")}
-      </Button>
-      <JobsConvertButton job={job} refetch={refetch} />
-      <JobsDetailHeaderActions key="actions" job={job} refetch={refetch} />
-      <Button
-        type="primary"
-        loading={loading}
-        disabled={jobRO}
-        className="imex-flex-row__margin"
-        onClick={() => form.submit()}
-      >
-        {t("general.actions.save")}
-      </Button>
-    </div>
-  );
+  const gridStyle = {
+    flex: 1,
+    //textAlign: "center",
+  };

  return (
-    <PageHeader
-      title={job.ro_number || t("general.labels.na")}
-      subTitle={job.status}
-      tags={[
-        <OwnerTagPopoverComponent key="owner" job={job} />,
-        <VehicleTagPopoverComponent key="vehicle" job={job} />,
-        <Tag
-          color="#f50"
-          key="production"
-          style={{ display: job.inproduction ? "" : "none" }}
-        >
-          {t("jobs.labels.inproduction")}
-        </Tag>,
-        <Tag title={t("jobs.fields.repairtotal")} key="total" color="green">
-          <CurrencyFormatter>{job.clm_total}</CurrencyFormatter>
-          <span style={{ margin: "0rem .5rem" }}>/</span>
-          <CurrencyFormatter>{job.owner_owing}</CurrencyFormatter>
-        </Tag>,
-      ]}
-      extra={menuExtra}
-    >
-      <div style={{ display: "flex", justifyContent: "flex-end" }}>
-        {(job.inproduction || jobInPostProduction) && (
-          <>
-            <div style={{ display: "flex", flex: 1 }}>
-              <div style={{ marginRight: "2rem" }}>
-                {t("jobs.fields.production_vars.note")}
-              </div>
-              <ProductionListColumnProductionNote record={job} />
+    <Row gutter={16} style={{ alignItems: "stretch" }}>
+      <Col span={8}>
+        <Card title="Job Status" style={{ height: "100%" }}>
+          <div>
+            <DataLabel label={t("jobs.fields.status")}>
+              {job.status}
+              {job.inproduction && (
+                <span style={{ marginLeft: ".5rem" }}>
+                  <Tag color="#f50" key="production">
+                    {t("jobs.labels.inproduction")}
+                  </Tag>
+                </span>
+              )}
+            </DataLabel>
+            <DataLabel label={t("jobs.fields.ins_co_nm_short")}>
+              {job.ins_co_nm}
+            </DataLabel>
+            <DataLabel label={t("jobs.fields.clm_no")}>{job.clm_no}</DataLabel>
+            <DataLabel label={t("jobs.fields.repairtotal")}>
+              <CurrencyFormatter>{job.clm_total}</CurrencyFormatter>
+              <span style={{ margin: "0rem .5rem" }}>/</span>
+              <CurrencyFormatter>{job.owner_owing}</CurrencyFormatter>
+            </DataLabel>
+          </div>
+        </Card>
+      </Col>
+      <Col span={8}>
+        <Link to={`/manage/owners/${job.owner.id}`}>
+          <Card
+            className="ant-card-grid-hoverable"
+            style={{ height: "100%" }}
+            title={`${job.ownr_fn || ""} ${job.ownr_ln || ""} ${
+              job.ownr_co_nm || ""
+            }`}
+          >
+            <div>
+              <DataLabel key="2" label={t("jobs.fields.ownr_ph1")}>
+                <ChatOpenButton>{job.ownr_ph1 || ""}</ChatOpenButton>
+              </DataLabel>
+              <DataLabel key="3" label={t("owners.fields.address")}>
+                {`${job.ownr_addr1 || ""} ${job.ownr_addr2 || ""} ${
+                  job.ownr_city || ""
+                } ${job.ownr_st || ""} ${job.ownr_zip || ""}`}
+              </DataLabel>
+              <DataLabel key="4" label={t("owners.fields.ownr_ea")}>
+                {job.ownr_ea || ""}
+              </DataLabel>
            </div>
-            <Divider type="vertical" />
-          </>
-        )}
-
-        <JobEmployeeAssignments job={job} />
-      </div>
-    </PageHeader>
+          </Card>
+        </Link>
+      </Col>
+      <Col span={8}>
+        <Link to={`/manage/vehicles/${job.vehicle.id}`}>
+          <Card
+            className="ant-card-grid-hoverable"
+            style={{ height: "100%" }}
+            title={`${job.v_model_yr || ""} ${job.v_color || ""} 
+        ${job.v_make_desc || ""} 
+        ${job.v_model_desc || ""}`}
+          >
+            <div>
+              <DataLabel key="2" label={t("vehicles.fields.plate_no")}>
+                {`${job.plate_no || t("general.labels.na")} (${`${
+                  job.plate_st || t("general.labels.na")
+                }`})`}
+              </DataLabel>
+              <DataLabel key="4" label={t("vehicles.fields.v_vin")}>
+                {`${job.v_vin || t("general.labels.na")}`}
+              </DataLabel>
+            </div>
+          </Card>
+        </Link>
+      </Col>
+    </Row>
  );
+
+  // return (
+  //   <PageHeader
+  //     title={job.ro_number || t("general.labels.na")}
+  //     subTitle={job.status}
+  //     tags={[
+  //       <OwnerTagPopoverComponent key="owner" job={job} />,
+  //       <VehicleTagPopoverComponent key="vehicle" job={job} />,
+  //       <Tag
+  //         color="#f50"
+  //         key="production"
+  //         style={{ display: job.inproduction ? "" : "none" }}
+  //       >
+  //         {t("jobs.labels.inproduction")}
+  //       </Tag>,
+  //       <Tag title={t("jobs.fields.repairtotal")} key="total" color="green">
+  //         <CurrencyFormatter>{job.clm_total}</CurrencyFormatter>
+  //         <span style={{ margin: "0rem .5rem" }}>/</span>
+  //         <CurrencyFormatter>{job.owner_owing}</CurrencyFormatter>
+  //       </Tag>,
+  //     ]}
+  //     extra={menuExtra}
+  //   >
+  //     <div style={{ display: "flex", justifyContent: "flex-end" }}>
+  //       {(job.inproduction || jobInPostProduction) && (
+  //         <>
+  //           <div style={{ display: "flex", flex: 1 }}>
+  //             <div style={{ marginRight: "2rem" }}>
+  //               {t("jobs.fields.production_vars.note")}
+  //             </div>
+  //             <ProductionListColumnProductionNote record={job} />
+  //           </div>
+  //           <Divider type="vertical" />
+  //         </>
+  //       )}
+
+  //       <JobEmployeeAssignments job={job} />
+  //     </div>
+  //   </PageHeader>
+  // );
 }

 export default connect(mapStateToProps, mapDispatchToProps)(JobsDetailHeader);
--- a/client/src/components/jobs-list/jobs-list.component.jsx
+++ b/client/src/components/jobs-list/jobs-list.component.jsx
@@ -1,6 +1,6 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
-import { Button, Input, Table } from "antd";
+import { Button, Card, Input, Space, Table } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -11,7 +11,6 @@ import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { onlyUnique } from "../../utils/arrayHelper";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import PhoneFormatter from "../../utils/PhoneFormatter";
 import { alphaSort } from "../../utils/sorters";
 import AlertComponent from "../alert/alert.component";
 import StartChatButton from "../chat-open-button/chat-open-button.component";
@@ -130,14 +129,10 @@ export function JobsList({ bodyshop }) {
      dataIndex: "ownr_ph1",
      key: "ownr_ph1",
      ellipsis: true,
-      render: (text, record) => {
-        return record.ownr_ph1 ? (
-          <span>
-            <PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>
-            <StartChatButton phone={record.ownr_ph1} jobid={record.id} />
-          </span>
-        ) : null;
-      },
+      responsive: ["md"],
+      render: (text, record) => (
+        <StartChatButton phone={record.ownr_ph1} jobid={record.id} />
+      ),
    },

    {
@@ -160,9 +155,6 @@ export function JobsList({ bodyshop }) {
            })) ||
        [],
      onFilter: (value, record) => value.includes(record.status),
-      render: (text, record) => {
-        return record.status || t("general.labels.na");
-      },
    },

    {
@@ -188,28 +180,20 @@ export function JobsList({ bodyshop }) {
      title: t("vehicles.fields.plate_no"),
      dataIndex: "plate_no",
      key: "plate_no",
+      responsive: ["md"],
      sorter: (a, b) => alphaSort(a.plate_no, b.plate_no),
      sortOrder:
        state.sortedInfo.columnKey === "plate_no" && state.sortedInfo.order,
-      render: (text, record) => {
-        return record.plate_no ? record.plate_no : "";
-      },
    },
    {
      title: t("jobs.fields.clm_no"),
      dataIndex: "clm_no",
      key: "clm_no",
      ellipsis: true,
+      responsive: ["md"],
      sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
      sortOrder:
        state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order,
-      render: (text, record) => {
-        return record.clm_no ? (
-          <span>{record.clm_no}</span>
-        ) : (
-          t("general.labels.unknown")
-        );
-      },
    },
    {
      title: t("jobs.fields.ins_co_nm"),
@@ -224,68 +208,65 @@ export function JobsList({ bodyshop }) {
      sorter: (a, b) => a.clm_total - b.clm_total,
      sortOrder:
        state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
-      render: (text, record) => {
-        return record.clm_total ? (
-          <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>
-        ) : (
-          t("general.labels.unknown")
-        );
-      },
-    },
-    {
-      title: t("jobs.fields.owner_owing"),
-      dataIndex: "owner_owing",
-      key: "owner_owing",
      render: (text, record) => (
-        <CurrencyFormatter>{record.owner_owing}</CurrencyFormatter>
+        <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>
      ),
    },
+    // {
+    //   title: t("jobs.fields.owner_owing"),
+    //   dataIndex: "owner_owing",
+    //   key: "owner_owing",
+    //   responsive: ["md"],
+    //   render: (text, record) => (
+    //     <CurrencyFormatter>{record.owner_owing}</CurrencyFormatter>
+    //   ),
+    // },
  ];

  return (
-    <Table
-      loading={loading}
-      size="small"
-      pagination={false}
-      columns={columns}
-      rowKey="id"
-      dataSource={jobs}
-      style={{ height: "100%" }}
-      scroll={{ x: true }}
-      title={() => {
-        return (
-          <div className="imex-table-header">
-            <Button onClick={() => refetch()}>
-              <SyncOutlined />
-            </Button>
-            <Input.Search
-              className="imex-table-header__search"
-              placeholder={t("general.labels.search")}
-              onChange={(e) => {
-                setSearchText(e.target.value);
-              }}
-              value={searchText}
-              enterButton
-            />
-          </div>
-        );
-      }}
-      rowSelection={{
-        onSelect: (record) => {
-          handleOnRowClick(record);
-        },
-        selectedRowKeys: [selected],
-        type: "radio",
-      }}
-      onChange={handleTableChange}
-      onRow={(record, rowIndex) => {
-        return {
-          onClick: (event) => {
+    <Card
+      title={t("titles.bc.jobs-active")}
+      extra={
+        <Space wrap>
+          <Button onClick={() => refetch()}>
+            <SyncOutlined />
+          </Button>
+          <Input.Search
+            placeholder={t("general.labels.search")}
+            onChange={(e) => {
+              setSearchText(e.target.value);
+            }}
+            value={searchText}
+            enterButton
+          />
+        </Space>
+      }
+    >
+      <Table
+        loading={loading}
+        size="small"
+        pagination={false}
+        columns={columns}
+        rowKey="id"
+        dataSource={jobs}
+        // scroll={{ x: true }}
+        rowSelection={{
+          onSelect: (record) => {
            handleOnRowClick(record);
          },
-        };
-      }}
-    />
+          selectedRowKeys: [selected],
+          type: "radio",
+        }}
+        onChange={handleTableChange}
+        onRow={(record, rowIndex) => {
+          return {
+            onClick: (event) => {
+              handleOnRowClick(record);
+            },
+          };
+        }}
+      />
+    </Card>
  );
 }

--- a/client/src/components/rbac-wrapper/rbac-wrapper.component.jsx
+++ b/client/src/components/rbac-wrapper/rbac-wrapper.component.jsx
@@ -35,7 +35,8 @@ function RbacWrapper({
      authLevel ||
    (!bodyshop.md_rbac && rbacDefaults[action] <= authLevel)
  )
-    return <div>{React.cloneElement(children, restProps)}</div>;
+    return children;
+  //return <div>{React.cloneElement(children, restProps)}</div>;

  return (
    noauth || (