UI Updates & Bill Entering

bodyshop_translations.babel

@@ -19440,6 +19440,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>checklistdocuments</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>checklists</name>
                                         <definition_loaded>false</definition_loaded>
@@ -28469,6 +28490,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>targets</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>weeklytarget</name>
                                         <definition_loaded>false</definition_loaded>

client/src/components/bill-detail-edit/bill-detail-edit.container.jsx

@@ -1,10 +1,10 @@
 import { useMutation, useQuery } from "@apollo/client";
-import { Button, Form, PageHeader, Popconfirm } from "antd";
+import { Button, Drawer, Form, Grid, PageHeader, Popconfirm } from "antd";
 import moment from "moment";
 import queryString from "query-string";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
+import { useLocation, useHistory } from "react-router-dom";
 import {
   INSERT_NEW_BILL_LINES,
   UPDATE_BILL_LINE,
@@ -17,6 +17,7 @@ import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 
 export default function BillDetailEditcontainer() {
   const search = queryString.parse(useLocation().search);
+  const history = useHistory();
   const { t } = useTranslation();
   const [form] = Form.useForm();
   const [visible, setVisible] = useState(false);
@@ -25,6 +26,22 @@ export default function BillDetailEditcontainer() {
   const [insertBillLine] = useMutation(INSERT_NEW_BILL_LINES);
   const [updateBillLine] = useMutation(UPDATE_BILL_LINE);
 
+  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
+    .filter((screen) => !!screen[1])
+    .slice(-1)[0];
+
+  const bpoints = {
+    xs: "100%",
+    sm: "100%",
+    md: "100%",
+    lg: "80%",
+    xl: "80%",
+    xxl: "70%",
+  };
+  const drawerPercentage = selectedBreakpoint
+    ? bpoints[selectedBreakpoint[0]]
+    : "100%";
+
   const { loading, error, data, refetch } = useQuery(QUERY_BILL_BY_PK, {
     variables: { billid: search.billid },
     skip: !!!search.billid,
@@ -111,47 +128,59 @@ export default function BillDetailEditcontainer() {
   const exported = data && data.bills_by_pk && data.bills_by_pk.exported;
 
   return (
-    <LoadingSkeleton loading={loading}>
+    <Drawer
-      <PageHeader
+      width={drawerPercentage}
-        title={
+      onClose={() => {
-          data &&
+        delete search.billid;
-          `${data.bills_by_pk.invoice_number} - ${data.bills_by_pk.vendor.name}`
+        history.push({ search: queryString.stringify(search) });
-        }
+      }}
-        extra={
+      visible={search.billid}
-          <Popconfirm
+    >
-            visible={visible}
+      {loading && <LoadingSkeleton />}
-            onConfirm={() => form.submit()}
+      {!loading && (
-            onCancel={() => setVisible(false)}
+        <>
-            okButtonProps={{ loading: updateLoading }}
+          <PageHeader
-            title={t("bills.labels.editadjwarning")}
+            title={
+              data &&
+              `${data.bills_by_pk.invoice_number} - ${data.bills_by_pk.vendor.name}`
+            }
+            extra={
+              <Popconfirm
+                visible={visible}
+                onConfirm={() => form.submit()}
+                onCancel={() => setVisible(false)}
+                okButtonProps={{ loading: updateLoading }}
+                title={t("bills.labels.editadjwarning")}
+              >
+                <Button
+                  htmlType="submit"
+                  disabled={exported}
+                  onClick={handleSave}
+                  loading={updateLoading}
+                  type="primary"
+                >
+                  {t("general.actions.save")}
+                </Button>
+              </Popconfirm>
+            }
+          />
+          <Form
+            form={form}
+            onFinish={handleFinish}
+            initialValues={transformData(data)}
+            layout="vertical"
           >
-            <Button
+            <BillFormContainer form={form} billEdit disabled={exported} />
-              htmlType="submit"
+            <JobDocumentsGallery
-              disabled={exported}
+              jobId={data ? data.bills_by_pk.jobid : null}
-              onClick={handleSave}
+              billId={search.billid}
-              loading={updateLoading}
+              documentsList={data ? data.bills_by_pk.documents : []}
-              type="primary"
+              billsCallback={refetch}
-            >
+            />
-              {t("general.actions.save")}
+          </Form>
-            </Button>
+        </>
-          </Popconfirm>
+      )}
-        }
+    </Drawer>
-      />
-      <Form
-        form={form}
-        onFinish={handleFinish}
-        initialValues={transformData(data)}
-        layout="vertical"
-      >
-        <BillFormContainer form={form} billEdit disabled={exported} />
-        <JobDocumentsGallery
-          jobId={data ? data.bills_by_pk.jobid : null}
-          billId={search.billid}
-          documentsList={data ? data.bills_by_pk.documents : []}
-          billsCallback={refetch}
-        />
-      </Form>
-    </LoadingSkeleton>
   );
 }
 

client/src/components/bill-form/bill-form.component.jsx

@@ -1,16 +1,16 @@
+import { useApolloClient } from "@apollo/client";
 import {
   Button,
+  Divider,
   Form,
   Input,
   Select,
   Space,
   Statistic,
   Switch,
-  Typography,
   Upload,
 } from "antd";
 import React, { useEffect, useState } from "react";
-import { useApolloClient } from "@apollo/client";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -159,7 +159,6 @@ export function BillFormComponent({
         >
           <Input disabled={disabled || disableInvNumber} />
         </Form.Item>
-
         <Form.Item
           label={t("bills.fields.date")}
           name="date"
@@ -191,6 +190,17 @@ export function BillFormComponent({
         >
           <CurrencyInput min={0} disabled={disabled} />
         </Form.Item>
+        <Form.Item label={t("bills.fields.allpartslocation")} name="location">
+          <Select style={{ width: "10rem" }} disabled={disabled} allowClear>
+            {bodyshop.md_parts_locations.map((loc, idx) => (
+              <Select.Option key={idx} value={loc}>
+                {loc}
+              </Select.Option>
+            ))}
+          </Select>
+        </Form.Item>
+      </LayoutFormRow>
+      <LayoutFormRow>
         <Form.Item
           label={t("bills.fields.federal_tax_rate")}
           name="federal_tax_rate"
@@ -209,19 +219,8 @@ export function BillFormComponent({
         >
           <CurrencyInput min={0} />
         </Form.Item>
-        <Form.Item label={t("bills.fields.allpartslocation")} name="location">
-          <Select style={{ width: "10rem" }} disabled={disabled} allowClear>
-            {bodyshop.md_parts_locations.map((loc, idx) => (
-              <Select.Option key={idx} value={loc}>
-                {loc}
-              </Select.Option>
-            ))}
-          </Select>
-        </Form.Item>
       </LayoutFormRow>
-      <Typography.Title level={4}>
+      <Divider orientation="left">{t("bills.labels.bill_lines")}</Divider>
-        {t("bills.labels.bill_lines")}
-      </Typography.Title>
       <BillFormLines
         lineData={lineData}
         discount={discount}
@@ -264,7 +263,7 @@ export function BillFormComponent({
           if (!!totals)
             return (
               <div>
-                <Space>
+                <Space split={<Divider type="vertical" />}>
                   <Statistic
                     title={t("bills.labels.subtotal")}
                     value={totals.subtotal.toFormat()}

client/src/components/bill-form/bill-form.lines.component.jsx

@@ -1,24 +1,22 @@
-import { DeleteFilled, WarningOutlined } from "@ant-design/icons";
+import { WarningOutlined } from "@ant-design/icons";
 import {
   Button,
-  Divider,
   Form,
   Input,
   InputNumber,
   Select,
   Space,
   Switch,
+  Table,
 } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import BillLineSearchSelect from "../bill-line-search-select/bill-line-search-select.component";
-import CurrencyInput from "../form-items-formatted/currency-form-item.component";
-import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
-import LayoutFormRow from "../layout-form-row/layout-form-row.component";
-
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import BillLineSearchSelect from "../bill-line-search-select/bill-line-search-select.component";
+import CurrencyInput from "../form-items-formatted/currency-form-item.component";
+
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
@@ -38,331 +36,394 @@ export function BillEnterModalLinesComponent({
   const { t } = useTranslation();
   const { setFieldsValue, getFieldsValue, getFieldValue } = form;
 
+  const columns = [
+    {
+      title: t("billlines.fields.jobline"),
+      dataIndex: "joblineid",
+      editable: true,
+      width: "10%",
+      formItemProps: (field) => {
+        return {
+          key: `${field.index}joblinename`,
+          name: [field.name, "joblineid"],
+          rules: [
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ],
+        };
+      },
+      formInput: (record, index) => (
+        <BillLineSearchSelect
+          disabled={disabled}
+          options={lineData}
+          onSelect={(value, opt) => {
+            setFieldsValue({
+              billlines: getFieldsValue(["billlines"]).billlines.map(
+                (item, idx) => {
+                  if (idx === index) {
+                    return {
+                      ...item,
+                      line_desc: opt.line_desc,
+                      quantity: opt.part_qty || 1,
+                      actual_price: opt.cost,
+                      cost_center: opt.part_type
+                        ? responsibilityCenters.defaults.costs[opt.part_type] ||
+                          null
+                        : null,
+                    };
+                  }
+                  return item;
+                }
+              ),
+            });
+          }}
+        />
+      ),
+    },
+    {
+      title: t("billlines.fields.line_desc"),
+      dataIndex: "line_desc",
+      editable: true,
+      formItemProps: (field) => {
+        return {
+          key: `${field.index}line_desc`,
+          name: [field.name, "line_desc"],
+          rules: [
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ],
+        };
+      },
+      formInput: (record, index) => <Input disabled={disabled} />,
+    },
+    {
+      title: t("billlines.fields.quantity"),
+      dataIndex: "quantity",
+      editable: true,
+      formItemProps: (field) => {
+        return {
+          key: `${field.index}quantity`,
+          name: [field.name, "quantity"],
+          rules: [
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ],
+        };
+      },
+      formInput: (record, index) => (
+        <InputNumber precision={0} min={0} disabled={disabled} />
+      ),
+    },
+    {
+      title: t("billlines.fields.actual_price"),
+      dataIndex: "actual_price",
+      editable: true,
+      formItemProps: (field) => {
+        return {
+          key: `${field.index}actual_price`,
+          name: [field.name, "actual_price"],
+          rules: [
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ],
+        };
+      },
+      formInput: (record, index) => (
+        <CurrencyInput
+          min={0}
+          disabled={disabled}
+          onBlur={(e) => {
+            setFieldsValue({
+              billlines: getFieldsValue("billlines").billlines.map(
+                (item, idx) => {
+                  console.log("Checking", index, idx);
+                  if (idx === index) {
+                    console.log(
+                      "Found and setting.",
+                      !!item.actual_cost
+                        ? item.actual_cost
+                        : Math.round(
+                            (parseFloat(e.target.value) * (1 - discount) +
+                              Number.EPSILON) *
+                              100
+                          ) / 100
+                    );
+                    return {
+                      ...item,
+                      actual_cost: !!item.actual_cost
+                        ? item.actual_cost
+                        : Math.round(
+                            (parseFloat(e.target.value) * (1 - discount) +
+                              Number.EPSILON) *
+                              100
+                          ) / 100,
+                    };
+                  }
+                  return item;
+                }
+              ),
+            });
+          }}
+        />
+      ),
+    },
+    {
+      title: t("billlines.fields.actual_cost"),
+      dataIndex: "actual_cost",
+      editable: true,
+      formItemProps: (field) => {
+        return {
+          key: `${field.index}actual_cost`,
+          name: [field.name, "actual_cost"],
+          rules: [
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ],
+        };
+      },
+      formInput: (record, index) => (
+        <CurrencyInput min={0} disabled={disabled} />
+      ),
+      additional: (record, index) => (
+        <Form.Item shouldUpdate>
+          {() => {
+            const line = getFieldsValue(["billlines"]).billlines[index];
+            if (!!!line) return null;
+            const lineDiscount = (
+              1 -
+              Math.round((line.actual_cost / line.actual_price) * 100) / 100
+            ).toPrecision(2);
+
+            if (lineDiscount - discount === 0) return <div />;
+            return <WarningOutlined style={{ color: "red" }} />;
+          }}
+        </Form.Item>
+      ),
+    },
+    {
+      title: t("billlines.fields.cost_center"),
+      dataIndex: "cost_center",
+      editable: true,
+      formItemProps: (field) => {
+        return {
+          key: `${field.index}cost_center`,
+          name: [field.name, "cost_center"],
+          rules: [
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ],
+        };
+      },
+      formInput: (record, index) => (
+        <Select style={{ width: "150px" }} disabled={disabled}>
+          {responsibilityCenters.costs.map((item) => (
+            <Select.Option key={item.name}>{item.name}</Select.Option>
+          ))}
+        </Select>
+      ),
+    },
+    {
+      title: t("billlines.fields.federal_tax_applicable"),
+      dataIndex: "applicable_taxes.federal",
+      editable: true,
+      formItemProps: (field) => {
+        return {
+          key: `${field.index}fedtax`,
+          valuePropName: "checked",
+          initialValue: true,
+          name: [field.name, "applicable_taxes", "federal"],
+        };
+      },
+      formInput: (record, index) => <Switch disabled={disabled} />,
+    },
+    {
+      title: t("billlines.fields.state_tax_applicable"),
+      dataIndex: "applicable_taxes.state",
+      editable: true,
+      formItemProps: (field) => {
+        return {
+          key: `${field.index}statetax`,
+          valuePropName: "checked",
+          name: [field.name, "applicable_taxes", "state"],
+        };
+      },
+      formInput: (record, index) => <Switch disabled={disabled} />,
+    },
+    {
+      title: t("billlines.fields.local_tax_applicable"),
+      dataIndex: "applicable_taxes.local",
+      editable: true,
+      formItemProps: (field) => {
+        return {
+          key: `${field.index}localtax`,
+          valuePropName: "checked",
+          name: [field.name, "applicable_taxes", "local"],
+        };
+      },
+      formInput: (record, index) => <Switch disabled={disabled} />,
+    },
+
+    {
+      title: t("billlines.fields.location"),
+      dataIndex: "location",
+      editable: true,
+      formItemProps: (field) => {
+        return {
+          key: `${field.index}location`,
+          name: [field.name, "location"],
+        };
+      },
+      formInput: (record, index) => (
+        <Select style={{ width: "150px" }} disabled={disabled}>
+          {bodyshop.md_parts_locations.map((loc, idx) => (
+            <Select.Option key={idx} value={loc}>
+              {loc}
+            </Select.Option>
+          ))}
+        </Select>
+      ),
+    },
+    {
+      title: t("billlines.labels.deductedfromlbr"),
+      dataIndex: "deductedfromlbr",
+      editable: true,
+      formItemProps: (field) => {
+        return {
+          valuePropName: "checked",
+          key: `${field.index}deductedfromlbr`,
+          name: [field.name, "deductedfromlbr"],
+        };
+      },
+      formInput: (record, index) => <Switch disabled={disabled} />,
+      additional: (record, index) => (
+        <Form.Item shouldUpdate style={{ display: "inline-block" }}>
+          {() => {
+            if (getFieldValue(["billlines", record.name, "deductedfromlbr"]))
+              return (
+                <div>
+                  <Form.Item
+                    label={t("joblines.fields.mod_lbr_ty")}
+                    key={`${index}modlbrty`}
+                    rules={[
+                      {
+                        required: true,
+                        message: t("general.validation.required"),
+                      },
+                    ]}
+                    name={[record.name, "lbr_adjustment", "mod_lbr_ty"]}
+                  >
+                    <Select allowClear>
+                      <Select.Option value="LAA">
+                        {t("joblines.fields.lbr_types.LAA")}
+                      </Select.Option>
+                      <Select.Option value="LAB">
+                        {t("joblines.fields.lbr_types.LAB")}
+                      </Select.Option>
+                      <Select.Option value="LAD">
+                        {t("joblines.fields.lbr_types.LAD")}
+                      </Select.Option>
+                      <Select.Option value="LAE">
+                        {t("joblines.fields.lbr_types.LAE")}
+                      </Select.Option>
+                      <Select.Option value="LAF">
+                        {t("joblines.fields.lbr_types.LAF")}
+                      </Select.Option>
+                      <Select.Option value="LAG">
+                        {t("joblines.fields.lbr_types.LAG")}
+                      </Select.Option>
+                      <Select.Option value="LAM">
+                        {t("joblines.fields.lbr_types.LAM")}
+                      </Select.Option>
+                      <Select.Option value="LAR">
+                        {t("joblines.fields.lbr_types.LAR")}
+                      </Select.Option>
+                      <Select.Option value="LAS">
+                        {t("joblines.fields.lbr_types.LAS")}
+                      </Select.Option>
+                      <Select.Option value="LAU">
+                        {t("joblines.fields.lbr_types.LAU")}
+                      </Select.Option>
+                      <Select.Option value="LA1">
+                        {t("joblines.fields.lbr_types.LA1")}
+                      </Select.Option>
+                      <Select.Option value="LA2">
+                        {t("joblines.fields.lbr_types.LA2")}
+                      </Select.Option>
+                      <Select.Option value="LA3">
+                        {t("joblines.fields.lbr_types.LA3")}
+                      </Select.Option>
+                      <Select.Option value="LA4">
+                        {t("joblines.fields.lbr_types.LA4")}
+                      </Select.Option>
+                    </Select>
+                  </Form.Item>
+                  <Form.Item
+                    label={t("jobs.labels.adjustmentrate")}
+                    name={[record.name, "lbr_adjustment", "rate"]}
+                    initialValue={bodyshop.default_adjustment_rate}
+                    rules={[
+                      {
+                        required: true,
+                        message: t("general.validation.required"),
+                      },
+                    ]}
+                  >
+                    <InputNumber precision={2} min={0.01} />
+                  </Form.Item>
+                </div>
+              );
+            return <span />;
+          }}
+        </Form.Item>
+      ),
+    },
+  ];
+
+  const mergedColumns = columns.map((col) => {
+    if (!col.editable) return col;
+    return {
+      ...col,
+      onCell: (record) => ({
+        record,
+        formItemProps: col.formItemProps,
+        formInput: col.formInput,
+        additional: col.additional,
+        dataIndex: col.dataIndex,
+        title: col.title,
+      }),
+    };
+  });
+
   return (
     <Form.List name="billlines">
       {(fields, { add, remove, move }) => {
         return (
-          <div className="invoice-form-lines-wrapper">
+          <>
-            {fields.map((field, index) => (
+            <Table
-              <Form.Item required={false} key={field.key}>
+              components={{
-                <div>
+                body: {
-                  <div style={{ display: "flex", alignItems: "center" }}>
+                  cell: EditableCell,
-                    <LayoutFormRow style={{ flex: 1 }} grow>
+                },
-                      <Form.Item
+              }}
-                        span={8}
+              size="small"
-                        label={t("billlines.fields.jobline")}
+              bordered
-                        key={`${index}joblinename`}
+              dataSource={fields}
-                        name={[field.name, "joblineid"]}
+              columns={mergedColumns}
-                        rules={[
+              scroll={{ x: true }}
-                          {
+              rowClassName="editable-row"
-                            required: true,
+            />
-                            message: t("general.validation.required"),
-                          },
-                        ]}
-                      >
-                        <BillLineSearchSelect
-                          disabled={disabled}
-                          options={lineData}
-                          onSelect={(value, opt) => {
-                            setFieldsValue({
-                              billlines: getFieldsValue([
-                                "billlines",
-                              ]).billlines.map((item, idx) => {
-                                if (idx === index) {
-                                  return {
-                                    ...item,
-                                    line_desc: opt.line_desc,
-                                    quantity: opt.part_qty || 1,
-                                    actual_price: opt.cost,
-                                    cost_center: opt.part_type
-                                      ? responsibilityCenters.defaults.costs[
-                                          opt.part_type
-                                        ] || null
-                                      : null,
-                                  };
-                                }
-                                return item;
-                              }),
-                            });
-                          }}
-                        />
-                      </Form.Item>
-
-                      <Form.Item
-                        label={t("billlines.fields.line_desc")}
-                        key={`${index}line_desc`}
-                        name={[field.name, "line_desc"]}
-                        rules={[
-                          {
-                            required: true,
-                            message: t("general.validation.required"),
-                          },
-                        ]}
-                      >
-                        <Input disabled={disabled} />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("billlines.fields.quantity")}
-                        key={`${index}quantity`}
-                        name={[field.name, "quantity"]}
-                        rules={[
-                          {
-                            required: true,
-                            message: t("general.validation.required"),
-                          },
-                        ]}
-                      >
-                        <InputNumber
-                          precision={0}
-                          min={0}
-                          disabled={disabled}
-                        />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("billlines.fields.actual_price")}
-                        key={`${index}actual_price`}
-                        name={[field.name, "actual_price"]}
-                        rules={[
-                          {
-                            required: true,
-                            message: t("general.validation.required"),
-                          },
-                        ]}
-                      >
-                        <CurrencyInput
-                          min={0}
-                          disabled={disabled}
-                          onBlur={(e) => {
-                            setFieldsValue({
-                              billlines: getFieldsValue(
-                                "billlines"
-                              ).billlines.map((item, idx) => {
-                                if (idx === index) {
-                                  return {
-                                    ...item,
-                                    actual_cost: !!item.actual_cost
-                                      ? item.actual_cost
-                                      : Math.round(
-                                          (parseFloat(e.target.value) *
-                                            (1 - discount) +
-                                            Number.EPSILON) *
-                                            100
-                                        ) / 100,
-                                  };
-                                }
-                                return item;
-                              }),
-                            });
-                          }}
-                        />
-                      </Form.Item>
-                      <div>
-                        <Form.Item
-                          label={t("billlines.fields.actual_cost")}
-                          key={`${index}actual_cost`}
-                          name={[field.name, "actual_cost"]}
-                          rules={[
-                            {
-                              required: true,
-                              message: t("general.validation.required"),
-                            },
-                          ]}
-                        >
-                          <CurrencyInput min={0} disabled={disabled} />
-                        </Form.Item>
-                        <Form.Item shouldUpdate>
-                          {() => {
-                            const line = getFieldsValue(["billlines"])
-                              .billlines[index];
-                            if (!!!line) return null;
-                            const lineDiscount = (
-                              1 -
-                              Math.round(
-                                (line.actual_cost / line.actual_price) * 100
-                              ) /
-                                100
-                            ).toPrecision(2);
-
-                            if (lineDiscount - discount === 0) return <div />;
-                            return <WarningOutlined style={{ color: "red" }} />;
-                          }}
-                        </Form.Item>
-                      </div>
-                      <Form.Item
-                        label={t("billlines.fields.cost_center")}
-                        key={`${index}cost_center`}
-                        name={[field.name, "cost_center"]}
-                        rules={[
-                          {
-                            required: true,
-                            message: t("general.validation.required"),
-                          },
-                        ]}
-                      >
-                        <Select style={{ width: "150px" }} disabled={disabled}>
-                          {responsibilityCenters.costs.map((item) => (
-                            <Select.Option key={item.name}>
-                              {item.name}
-                            </Select.Option>
-                          ))}
-                        </Select>
-                      </Form.Item>
-                      <Space flex>
-                        <Form.Item
-                          label={t("billlines.fields.federal_tax_applicable")}
-                          key={`${index}fedtax`}
-                          initialValue={true}
-                          valuePropName="checked"
-                          name={[field.name, "applicable_taxes", "federal"]}
-                        >
-                          <Switch disabled={disabled} />
-                        </Form.Item>
-                        <Form.Item
-                          label={t("billlines.fields.state_tax_applicable")}
-                          key={`${index}statetax`}
-                          valuePropName="checked"
-                          name={[field.name, "applicable_taxes", "state"]}
-                        >
-                          <Switch disabled={disabled} />
-                        </Form.Item>
-                        <Form.Item
-                          label={t("billlines.fields.local_tax_applicable")}
-                          key={`${index}localtax`}
-                          valuePropName="checked"
-                          name={[field.name, "applicable_taxes", "local"]}
-                        >
-                          <Switch disabled={disabled} />
-                        </Form.Item>
-                      </Space>
-                      <Form.Item
-                        label={t("billlines.fields.location")}
-                        key={`${index}location`}
-                        name={[field.name, "location"]}
-                      >
-                        <Select style={{ width: "10rem" }} disabled={disabled}>
-                          {bodyshop.md_parts_locations.map((loc, idx) => (
-                            <Select.Option key={idx} value={loc}>
-                              {loc}
-                            </Select.Option>
-                          ))}
-                        </Select>
-                      </Form.Item>
-                      <Form.Item
-                        label={t("billlines.labels.deductedfromlbr")}
-                        key={`${index}deductedfromlbr`}
-                        valuePropName="checked"
-                        name={[field.name, "deductedfromlbr"]}
-                      >
-                        <Switch disabled={disabled} />
-                      </Form.Item>
-                      <Form.Item shouldUpdate>
-                        {() => {
-                          if (
-                            getFieldValue([
-                              "billlines",
-                              field.name,
-                              "deductedfromlbr",
-                            ])
-                          )
-                            return (
-                              <div>
-                                <Form.Item
-                                  label={t("joblines.fields.mod_lbr_ty")}
-                                  key={`${index}modlbrty`}
-                                  rules={[
-                                    {
-                                      required: true,
-                                      message: t("general.validation.required"),
-                                    },
-                                  ]}
-                                  name={[
-                                    field.name,
-                                    "lbr_adjustment",
-                                    "mod_lbr_ty",
-                                  ]}
-                                >
-                                  <Select allowClear>
-                                    <Select.Option value="LAA">
-                                      {t("joblines.fields.lbr_types.LAA")}
-                                    </Select.Option>
-                                    <Select.Option value="LAB">
-                                      {t("joblines.fields.lbr_types.LAB")}
-                                    </Select.Option>
-                                    <Select.Option value="LAD">
-                                      {t("joblines.fields.lbr_types.LAD")}
-                                    </Select.Option>
-                                    <Select.Option value="LAE">
-                                      {t("joblines.fields.lbr_types.LAE")}
-                                    </Select.Option>
-                                    <Select.Option value="LAF">
-                                      {t("joblines.fields.lbr_types.LAF")}
-                                    </Select.Option>
-                                    <Select.Option value="LAG">
-                                      {t("joblines.fields.lbr_types.LAG")}
-                                    </Select.Option>
-                                    <Select.Option value="LAM">
-                                      {t("joblines.fields.lbr_types.LAM")}
-                                    </Select.Option>
-                                    <Select.Option value="LAR">
-                                      {t("joblines.fields.lbr_types.LAR")}
-                                    </Select.Option>
-                                    <Select.Option value="LAS">
-                                      {t("joblines.fields.lbr_types.LAS")}
-                                    </Select.Option>
-                                    <Select.Option value="LAU">
-                                      {t("joblines.fields.lbr_types.LAU")}
-                                    </Select.Option>
-                                    <Select.Option value="LA1">
-                                      {t("joblines.fields.lbr_types.LA1")}
-                                    </Select.Option>
-                                    <Select.Option value="LA2">
-                                      {t("joblines.fields.lbr_types.LA2")}
-                                    </Select.Option>
-                                    <Select.Option value="LA3">
-                                      {t("joblines.fields.lbr_types.LA3")}
-                                    </Select.Option>
-                                    <Select.Option value="LA4">
-                                      {t("joblines.fields.lbr_types.LA4")}
-                                    </Select.Option>
-                                  </Select>
-                                </Form.Item>
-                                <Form.Item
-                                  label={t("jobs.labels.adjustmentrate")}
-                                  name={[field.name, "lbr_adjustment", "rate"]}
-                                  initialValue={
-                                    bodyshop.default_adjustment_rate
-                                  }
-                                  rules={[
-                                    {
-                                      required: true,
-                                      message: t("general.validation.required"),
-                                    },
-                                  ]}
-                                >
-                                  <InputNumber precision={2} min={0.01} />
-                                </Form.Item>
-                              </div>
-                            );
-                          return <span />;
-                        }}
-                      </Form.Item>
-                    </LayoutFormRow>
-                    <FormListMoveArrows
-                      move={move}
-                      index={index}
-                      total={fields.length}
-                    />
-                    <DeleteFilled
-                      disabled={disabled}
-                      onClick={() => {
-                        remove(field.name);
-                      }}
-                    />
-                  </div>
-                  <Divider />
-                </div>
-              </Form.Item>
-            ))}
             <Form.Item>
               <Button
                 disabled={disabled}
@@ -374,7 +435,7 @@ export function BillEnterModalLinesComponent({
                 {t("billlines.actions.newline")}
               </Button>
             </Form.Item>
-          </div>
+          </>
         );
       }}
     </Form.List>
@@ -385,3 +446,39 @@ export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(BillEnterModalLinesComponent);
+
+const EditableCell = ({
+  dataIndex,
+  title,
+  inputType,
+  record,
+  index,
+  children,
+  formInput,
+  formItemProps,
+  additional,
+  ...restProps
+}) => {
+  if (additional)
+    return (
+      <td {...restProps}>
+        <Space>
+          <Form.Item
+            name={dataIndex}
+            {...(formItemProps && formItemProps(record))}
+          >
+            {formInput && formInput(record, record.key)}
+          </Form.Item>
+          {additional && additional(record, record.key)}
+        </Space>
+      </td>
+    );
+
+  return (
+    <td {...restProps}>
+      <Form.Item name={dataIndex} {...(formItemProps && formItemProps(record))}>
+        {formInput && formInput(record, record.key)}
+      </Form.Item>
+    </td>
+  );
+};

client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx

@@ -3,6 +3,7 @@ import { Form } from "antd";
 import { useTranslation } from "react-i18next";
 import AlertComponent from "../alert/alert.component";
 import { Prompt, useLocation } from "react-router-dom";
+import "./form-fields-changed.styles.scss";
 
 export default function FormsFieldChanged({ form }) {
   const { t } = useTranslation();
@@ -11,13 +12,17 @@ export default function FormsFieldChanged({ form }) {
     form.resetFields();
   };
   const loc = useLocation();
-  if (!form.isFieldsTouched()) return <></>;
+  //if (!form.isFieldsTouched()) return <></>;
   return (
-    <Form.Item shouldUpdate style={{ margin: 0, padding: 0 }}>
+    <Form.Item
+      className="form-fields-changed"
+      shouldUpdate
+      style={{ margin: 0, padding: 0, minHeight: "unset" }}
+    >
       {() => {
         if (form.isFieldsTouched())
           return (
-            <div>
+            <span>
               <Prompt
                 when={true}
                 message={(location) => {
@@ -42,7 +47,7 @@ export default function FormsFieldChanged({ form }) {
                   </div>
                 }
               />
-            </div>
+            </span>
           );
         return <div style={{ display: "none" }}></div>;
       }}

client/src/components/form-fields-changed-alert/form-fields-changed.styles.scss

@@ -0,0 +1,7 @@
+.form-fields-changed {
+  .ant-form-item-control {
+    .ant-form-item-control-input {
+      min-height: unset !important;
+    }
+  }
+}

client/src/components/form-list-move-arrows/form-list-move-arrows.component.jsx

@@ -1,4 +1,5 @@
 import { DownOutlined, UpOutlined } from "@ant-design/icons";
+import { Space } from "antd";
 import React from "react";
 export default function FormListMoveArrows({ move, index, total }) {
   const upDisabled = index === 0;
@@ -13,9 +14,9 @@ export default function FormListMoveArrows({ move, index, total }) {
   };
 
   return (
-    <div>
+    <Space direction="vertical">
       <UpOutlined disabled={upDisabled} onClick={handleUp} />
       <DownOutlined disabled={downDisabled} onClick={handleDown} />
-    </div>
+    </Space>
   );
 }

client/src/components/job-checklist/components/job-checklist-form/job-checklist-form.component.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, Form, notification, Switch } from "antd";
+import { Button, Card, Form, notification, Switch } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -112,94 +112,98 @@ export function JobChecklistForm({
   };
 
   return (
-    <Form
+    <Card
-      form={form}
+      title={t("checklist.labels.checklist")}
-      onFinish={handleFinish}
+      extra={
-      initialValues={{
+        !readOnly && (
-        ...(type === "intake" && {
+          <Button loading={loading} onClick={() => form.submit()}>
-          addToProduction: true,
+            {t("general.actions.submit")}
-          scheduled_completion: job && job.scheduled_completion,
+          </Button>
-          scheduled_delivery: job && job.scheduled_delivery,
+        )
-        }),
+      }
-        ...(type === "deliver" && {
-          removeFromProduction: true,
-          actual_completion: job && job.actual_completion,
-        }),
-        ...formItems
-          .filter((fi) => fi.value)
-          .reduce((acc, fi) => {
-            acc[fi.name] = fi.value;
-            return acc;
-          }, {}),
-      }}
     >
-      {t("checklist.labels.checklist")}
+      <Form
+        form={form}
+        onFinish={handleFinish}
+        initialValues={{
+          ...(type === "intake" && {
+            addToProduction: true,
+            scheduled_completion: job && job.scheduled_completion,
+            scheduled_delivery: job && job.scheduled_delivery,
+          }),
+          ...(type === "deliver" && {
+            removeFromProduction: true,
+            actual_completion: job && job.actual_completion,
+          }),
+          ...formItems
+            .filter((fi) => fi.value)
+            .reduce((acc, fi) => {
+              acc[fi.name] = fi.value;
+              return acc;
+            }, {}),
+        }}
+      >
+        <ConfigFormComponents componentList={formItems} readOnly={readOnly} />
 
-      <ConfigFormComponents componentList={formItems} readOnly={readOnly} />
+        {type === "intake" && (
-
+          <div>
-      {type === "intake" && (
+            <Form.Item
-        <div>
+              name="addToProduction"
-          <Form.Item
+              valuePropName="checked"
-            name="addToProduction"
+              label={t("checklist.labels.addtoproduction")}
-            valuePropName="checked"
+              disabled={readOnly}
-            label={t("checklist.labels.addtoproduction")}
+            >
-            disabled={readOnly}
+              <Switch disabled={readOnly} />
-          >
+            </Form.Item>
-            <Switch />
+            <Form.Item
-          </Form.Item>
+              name="scheduled_completion"
-          <Form.Item
+              label={t("jobs.fields.scheduled_completion")}
-            name="scheduled_completion"
+              disabled={readOnly}
-            label={t("jobs.fields.scheduled_completion")}
+              rules={[
-            disabled={readOnly}
+                {
-            rules={[
+                  required: true,
-              {
+                  message: t("general.validation.required"),
-                required: true,
+                },
-                message: t("general.validation.required"),
+              ]}
-              },
+            >
-            ]}
+              <DateTimePicker />
-          >
+            </Form.Item>
-            <DateTimePicker />
+            <Form.Item
-          </Form.Item>
+              name="scheduled_delivery"
-          <Form.Item
+              label={t("jobs.fields.scheduled_delivery")}
-            name="scheduled_delivery"
+              disabled={readOnly}
-            label={t("jobs.fields.scheduled_delivery")}
+            >
-            disabled={readOnly}
+              <DateTimePicker />
-          >
+            </Form.Item>
-            <DateTimePicker />
+          </div>
-          </Form.Item>
+        )}
-        </div>
+        {type === "deliver" && (
-      )}
+          <div>
-      {type === "deliver" && (
+            <Form.Item
-        <div>
+              name="actual_completion"
-          <Form.Item
+              label={t("jobs.fields.actual_completion")}
-            name="actual_completion"
+              disabled={readOnly}
-            label={t("jobs.fields.actual_completion")}
+              rules={[
-            disabled={readOnly}
+                {
-            rules={[
+                  required: true,
-              {
+                  message: t("general.validation.required"),
-                required: true,
+                },
-                message: t("general.validation.required"),
+              ]}
-              },
+            >
-            ]}
+              <DateTimePicker />
-          >
+            </Form.Item>
-            <DateTimePicker />
+            <Form.Item
-          </Form.Item>
+              name="removeFromProduction"
-          <Form.Item
+              valuePropName="checked"
-            name="removeFromProduction"
+              label={t("checklist.labels.removefromproduction")}
-            valuePropName="checked"
+              disabled={readOnly}
-            label={t("checklist.labels.removefromproduction")}
+            >
-            disabled={readOnly}
+              <Switch disabled={readOnly} defaultChecked={true} />
-          >
+            </Form.Item>
-            <Switch defaultChecked={true} />
+          </div>
-          </Form.Item>
+        )}
-        </div>
+      </Form>
-      )}
+    </Card>
-      {!readOnly && (
-        <Button loading={loading} htmlType="submit">
-          {t("general.actions.submit")}
-        </Button>
-      )}
-    </Form>
   );
 }
 

client/src/components/job-checklist/components/job-checklist-template-list/job-checklist-template-list.component.jsx

@@ -1,5 +1,5 @@
 import { PrinterFilled } from "@ant-design/icons";
-import { Button, List } from "antd";
+import { Button, Card, List } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
@@ -44,10 +44,14 @@ export default function JobIntakeTemplateList({ templates }) {
   };
 
   return (
-    <div>
+    <Card
-      <Button onClick={renderAllTemplates} loading={loading}>
+      title={t("jobs.labels.checklistdocuments")}
-        {t("checklist.actions.printall")}
+      extra={
-      </Button>
+        <Button onClick={renderAllTemplates} loading={loading}>
+          {t("checklist.actions.printall")}
+        </Button>
+      }
+    >
       <List
         itemLayout="horizontal"
         dataSource={templates}
@@ -72,6 +76,6 @@ export default function JobIntakeTemplateList({ templates }) {
           </List.Item>
         )}
       />
-    </div>
+    </Card>
   );
 }

client/src/components/job-checklist/job-checklist.component.jsx

@@ -6,11 +6,11 @@ export default function JobIntakeComponent({ checklistConfig, type, job }) {
   const { form, templates } = checklistConfig;
 
   return (
-    <Row gutter={[48, 48]}>
+    <Row gutter={[16, 16]}>
-      <Col span={6}>
+      <Col sm={24} md={8}>
         <JobChecklistTemplateList templates={templates} type={type} />
       </Col>
-      <Col span={18}>
+      <Col sm={24} md={16}>
         <JobChecklistForm formItems={form} type={type} job={job} />
       </Col>
     </Row>

client/src/components/job-employee-assignments/job-employee-assignments.component.jsx

@@ -1,5 +1,5 @@
 import { DeleteFilled, PlusCircleFilled } from "@ant-design/icons";
-import { Button, Popover, Select, Spin } from "antd";
+import { Button, Col, Popover, Row, Select, Space, Spin } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -40,35 +40,42 @@ export function JobEmployeeAssignments({
   };
 
   const popContent = (
-    <div>
+    <Row gutter={[16, 16]}>
-      <Select
+      <Col span={24}>
-        id="employeeSelector"
+        <Select
-        showSearch
+          id="employeeSelector"
-        style={{ width: 200 }}
+          showSearch
-        optionFilterProp="children"
+          style={{ width: 200 }}
-        onChange={onChange}
+          optionFilterProp="children"
-        filterOption={(input, option) =>
+          onChange={onChange}
-          option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          filterOption={(input, option) =>
-        }
+            option.props.children.toLowerCase().indexOf(input.toLowerCase()) >=
-      >
+            0
-        {bodyshop.employees.map((emp) => (
+          }
-          <Select.Option value={emp.id} key={emp.id}>
+        >
-            {`${emp.first_name} ${emp.last_name}`}
+          {bodyshop.employees.map((emp) => (
-          </Select.Option>
+            <Select.Option value={emp.id} key={emp.id}>
-        ))}
+              {`${emp.first_name} ${emp.last_name}`}
-      </Select>
+            </Select.Option>
-      <Button
+          ))}
-        type="primary"
+        </Select>
-        disabled={!assignment.employeeid || jobRO}
+      </Col>
-        onClick={() => {
+      <Col span={24}>
-          handleAdd(assignment);
+        <Space wrap>
-          setVisibility(false);
+          <Button
-        }}
+            type="primary"
-      >
+            disabled={!assignment.employeeid || jobRO}
-        Assign
+            onClick={() => {
-      </Button>
+              handleAdd(assignment);
-      <Button onClick={() => setVisibility(false)}>Close</Button>
+              setVisibility(false);
-    </div>
+            }}
+          >
+            Assign
+          </Button>
+          <Button onClick={() => setVisibility(false)}>Close</Button>
+        </Space>
+      </Col>
+    </Row>
   );
 
   return (

client/src/components/jobs-convert-button/jobs-convert-button.component.jsx

@@ -1,5 +1,13 @@
 import { useMutation } from "@apollo/client";
-import { Button, Form, notification, Popover, Select, Switch } from "antd";
+import {
+  Button,
+  Form,
+  notification,
+  Popover,
+  Select,
+  Space,
+  Switch,
+} from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -100,12 +108,14 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO }) {
         >
           <Switch />
         </Form.Item>
-        <Button type="danger" htmlType="submit">
+        <Space wrap>
-          {t("jobs.actions.convert")}
+          <Button type="danger" htmlType="submit">
-        </Button>
+            {t("jobs.actions.convert")}
-        <Button onClick={() => setVisible(false)}>
+          </Button>
-          {t("general.actions.close")}
+          <Button onClick={() => setVisible(false)}>
-        </Button>
+            {t("general.actions.close")}
+          </Button>
+        </Space>
       </Form>
     </div>
   );

client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx

@@ -117,7 +117,9 @@ function JobsDocumentsComponent({
               galleryImages={galleryImages}
               deletionCallback={billsCallback || refetch}
             />
-            <JobsDocumentsGalleryReassign galleryImages={galleryImages} />
+            {!billId && (
+              <JobsDocumentsGalleryReassign galleryImages={galleryImages} />
+            )}
           </Space>
         </Col>
         <Col span={24}>

client/src/components/jobs-notes/jobs.notes.component.jsx

@@ -5,7 +5,7 @@ import {
   EyeInvisibleFilled,
   WarningFilled,
 } from "@ant-design/icons";
-import { Button, Card, Table } from "antd";
+import { Button, Card, Space, Table } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -82,7 +82,7 @@ export function JobNotesComponent({
       key: "actions",
       width: 150,
       render: (text, record) => (
-        <span>
+        <Space wrap>
           <Button
             loading={deleteLoading}
             disabled={record.audit || jobRO}
@@ -104,7 +104,7 @@ export function JobNotesComponent({
           >
             <EditFilled />
           </Button>
-        </span>
+        </Space>
       ),
     },
   ];

client/src/components/note-upsert-modal/note-upsert-modal.component.jsx

@@ -1,4 +1,4 @@
-import { Form, Input, Switch } from "antd";
+import { Col, Form, Input, Row, Switch } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import NotesPresetButton from "../notes-preset-button/notes-preset-button.component";
@@ -7,37 +7,45 @@ export default function NoteUpsertModalComponent({ form }) {
   const { t } = useTranslation();
 
   return (
-    <div>
+    <Row gutter={[16, 16]}>
-      <Form.Item
+      <Col span={8}>
-        label={t("notes.fields.critical")}
+        <Form.Item
-        name="critical"
+          label={t("notes.fields.critical")}
-        valuePropName="checked"
+          name="critical"
-      >
+          valuePropName="checked"
-        <Switch />
+        >
-      </Form.Item>
+          <Switch />
-      <Form.Item
+        </Form.Item>
-        label={t("notes.fields.private")}
+      </Col>
-        name="private"
+      <Col span={8}>
-        valuePropName="checked"
+        <Form.Item
-      >
+          label={t("notes.fields.private")}
-        <Switch />
+          name="private"
-      </Form.Item>
+          valuePropName="checked"
-      <Form.Item
+        >
-        label={t("notes.fields.text")}
+          <Switch />
-        name="text"
+        </Form.Item>
-        rules={[
+      </Col>
-          {
+      <Col span={8}>
-            required: true,
+        <NotesPresetButton form={form} />
-            message: t("general.validation.required"),
+      </Col>
-          },
+      <Col span={24}>
-        ]}
+        <Form.Item
-      >
+          label={t("notes.fields.text")}
-        <Input.TextArea
+          name="text"
-          rows={8}
+          rules={[
-          placeholder={t("notes.labels.newnoteplaceholder")}
+            {
-        />
+              required: true,
-      </Form.Item>
+              message: t("general.validation.required"),
-      <NotesPresetButton form={form} />
+            },
-    </div>
+          ]}
+        >
+          <Input.TextArea
+            rows={8}
+            placeholder={t("notes.labels.newnoteplaceholder")}
+          />
+        </Form.Item>
+      </Col>
+    </Row>
   );
 }

client/src/components/note-upsert-modal/note-upsert-modal.container.jsx

@@ -90,7 +90,12 @@ export function NoteUpsertModalContainer({
       }}
       destroyOnClose
     >
-      <Form form={form} onFinish={handleFinish} initialValues={existingNote}>
+      <Form
+        form={form}
+        onFinish={handleFinish}
+        initialValues={existingNote}
+        layout="vertical"
+      >
         <NoteUpsertModalComponent form={form} />
       </Form>
     </Modal>

client/src/components/scoreboard-chart/scoreboard-chart.component.jsx

@@ -1,3 +1,4 @@
+import { Card } from "antd";
 import moment from "moment";
 import React from "react";
 import { connect } from "react-redux";
@@ -68,7 +69,7 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
   }, []);
 
   return (
-    <div>
+    <Card>
       <ResponsiveContainer width="100%" height={475}>
         <ComposedChart
           data={data}
@@ -108,6 +109,6 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
           />
         </ComposedChart>
       </ResponsiveContainer>
-    </div>
+    </Card>
   );
 }

client/src/components/scoreboard-day-stats/scoreboard-day-stats.component.jsx

@@ -26,18 +26,22 @@ export function ScoreboardDayStats({ bodyshop, date, entries }) {
   }, 0);
 
   return (
-    <div className='imex-flex-row__margin'>
+    <Card
-      <Card title={moment(date).format("D - ddd")}>
+      title={moment(date).format("D - ddd")}
-        <Statistic
+      className="ant-card-grid-hoverable"
-          valueStyle={{ color: dailyBodyTarget > bodyHrs ? "red" : "green" }}
+      style={{ height: "100%" }}
-          value={bodyHrs.toFixed(1)}
+    >
-        />
+      <Statistic
-        <Statistic
+        valueStyle={{ color: dailyBodyTarget > bodyHrs ? "red" : "green" }}
-          valueStyle={{ color: dailyPaintTarget > paintHrs ? "red" : "green" }}
+        label="B"
-          value={paintHrs.toFixed(1)}
+        value={bodyHrs.toFixed(1)}
-        />
+      />
-      </Card>
+      <Statistic
-    </div>
+        valueStyle={{ color: dailyPaintTarget > paintHrs ? "red" : "green" }}
+        label="P"
+        value={paintHrs.toFixed(1)}
+      />
+    </Card>
   );
 }
 export default connect(mapStateToProps, mapDispatchToProps)(ScoreboardDayStats);

client/src/components/scoreboard-display/scoreboard-display.component.jsx

@@ -1,6 +1,6 @@
+import { Col, Row } from "antd";
 import React from "react";
 import ScoreboardChart from "../scoreboard-chart/scoreboard-chart.component";
-import ScoreboardJobsList from "../scoreboard-jobs-list/scoreboard-jobs-list.component";
 import ScoreboardLastDays from "../scoreboard-last-days/scoreboard-last-days.component";
 import ScoreboardTargetsTable from "../scoreboard-targets-table/scoreboard-targets-table.component";
 
@@ -20,11 +20,18 @@ export default function ScoreboardDisplayComponent({ scoreboardSubscription }) {
   });
 
   return (
-    <div>
+    <Row gutter={[16, 16]}>
-      <ScoreboardTargetsTable />
+      <Col span={24}>
-      <ScoreboardJobsList scoreBoardlist={scoreBoardlist} />
+        <ScoreboardTargetsTable scoreBoardlist={scoreBoardlist} />
-      <ScoreboardLastDays sbEntriesByDate={sbEntriesByDate} />
+      </Col>
-      <ScoreboardChart sbEntriesByDate={sbEntriesByDate} />
+
-    </div>
+      <Col span={24}>
+        <ScoreboardLastDays sbEntriesByDate={sbEntriesByDate} />
+      </Col>
+
+      <Col span={24}>
+        <ScoreboardChart sbEntriesByDate={sbEntriesByDate} />
+      </Col>
+    </Row>
   );
 }

client/src/components/scoreboard-targets-table/scoreboard-targets-table.component.jsx

@@ -1,11 +1,13 @@
 import { CalendarOutlined } from "@ant-design/icons";
-import { Col, Row, Statistic } from "antd";
+import { Card, Col, Row, Statistic } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import ScoreboardJobsList from "../scoreboard-jobs-list/scoreboard-jobs-list.component";
 import * as Util from "./scoreboard-targets-table.util";
+
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
@@ -16,11 +18,14 @@ const mapDispatchToProps = (dispatch) => ({
 const rowGutter = [16, 16];
 const statSpans = { xs: 24, sm: 6 };
 
-export function ScoreboardTargetsTable({ bodyshop }) {
+export function ScoreboardTargetsTable({ bodyshop, scoreBoardlist }) {
   const { t } = useTranslation();
 
   return (
-    <div>
+    <Card
+      title={t("scoreboard.labels.targets")}
+      extra={<ScoreboardJobsList scoreBoardlist={scoreBoardlist} />}
+    >
       <Row gutter={rowGutter}>
         <Col xs={24} sm={{ offset: 0, span: 4 }} lg={{ offset: 5, span: 4 }}>
           <Statistic
@@ -35,7 +40,7 @@ export function ScoreboardTargetsTable({ bodyshop }) {
               <Statistic
                 title={t("scoreboard.labels.dailytarget")}
                 value={bodyshop.scoreboard_target.dailyBodyTarget}
-                prefix='B'
+                prefix="B"
               />
             </Col>
             <Col {...statSpans}>
@@ -70,7 +75,7 @@ export function ScoreboardTargetsTable({ bodyshop }) {
             <Col {...statSpans}>
               <Statistic
                 value={bodyshop.scoreboard_target.dailyPaintTarget}
-                prefix='P'
+                prefix="P"
               />
             </Col>
             <Col {...statSpans}>
@@ -100,7 +105,7 @@ export function ScoreboardTargetsTable({ bodyshop }) {
           </Row>
         </Col>
       </Row>
-    </div>
+    </Card>
   );
 }
 export default connect(

client/src/components/vendors-form/vendors-form.component.jsx

@@ -1,9 +1,11 @@
 import { DeleteFilled } from "@ant-design/icons";
 import {
   Button,
+  Divider,
   Form,
   Input,
   InputNumber,
+  PageHeader,
   Select,
   Space,
   Switch,
@@ -27,18 +29,31 @@ export default function VendorsFormComponent({
   const { getFieldValue } = form;
   return (
     <div>
-      <Space>
+      <PageHeader
-        <Button
+        title={form.getFieldValue("name")}
-          onClick={() => form.submit()}
+        extra={
-          type="primary"
+          <Space>
-          loading={formLoading}
+            <Form.Item
-        >
+              label={t("vendors.fields.active")}
-          {t("general.actions.save")}
+              name="active"
-        </Button>
+              initialValue={true}
-        <Button type="danger" onClick={handleDelete} loading={formLoading}>
+              valuePropName="checked"
-          {t("general.actions.delete")}
+            >
-        </Button>
+              <Switch />
-      </Space>
+            </Form.Item>
+            <Button
+              onClick={() => form.submit()}
+              type="primary"
+              loading={formLoading}
+            >
+              {t("general.actions.save")}
+            </Button>
+            <Button type="danger" onClick={handleDelete} loading={formLoading}>
+              {t("general.actions.delete")}
+            </Button>
+          </Space>
+        }
+      />
       <FormFieldsChanged form={form} />
       <LayoutFormRow grow>
         <Form.Item
@@ -50,14 +65,7 @@ export default function VendorsFormComponent({
         >
           <Input />
         </Form.Item>
-        <Form.Item
+
-          label={t("vendors.fields.active")}
-          name="active"
-          initialValue={true}
-          valuePropName="checked"
-        >
-          <Switch />
-        </Form.Item>
         <Form.Item
           label={t("vendors.fields.email")}
           rules={[
@@ -104,7 +112,7 @@ export default function VendorsFormComponent({
           <Input />
         </Form.Item>
       </LayoutFormRow>
-      <LayoutFormRow>
+      <LayoutFormRow grow>
         <Form.Item label={t("vendors.fields.discount")} name="discount">
           <InputNumber min={0} max={1} precision={2} />
         </Form.Item>
@@ -125,16 +133,14 @@ export default function VendorsFormComponent({
           </Select>
         </Form.Item>
       </LayoutFormRow>
-      <Typography.Title level={4}>
+      <Divider align="left">{t("vendors.labels.preferredmakes")}</Divider>
-        {t("vendors.labels.preferredmakes")}
-      </Typography.Title>
       <Form.List name="favorite">
         {(fields, { add, remove }) => {
           return (
             <div>
               {fields.map((field, index) => (
                 <Form.Item key={field.key}>
-                  <div style={{ display: "flex" }}>
+                  <Space wrap>
                     <Form.Item
                       label={t("vendors.fields.make")}
                       key={`${index}make`}
@@ -154,7 +160,7 @@ export default function VendorsFormComponent({
                         remove(field.name);
                       }}
                     />
-                  </div>
+                  </Space>
                 </Form.Item>
               ))}
               <Form.Item>

client/src/components/vendors-form/vendors-form.container.jsx

@@ -119,6 +119,7 @@ function VendorsFormContainer({ refetch, bodyshop }) {
 
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type="error" />;
+
   return (
     <Form
       onFinish={handleFinish}

client/src/components/vendors-list/vendors-list.component.jsx

@@ -1,5 +1,5 @@
 import { SyncOutlined } from "@ant-design/icons";
-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";
@@ -75,47 +75,44 @@ export default function VendorsListComponent({
     : [];
 
   return (
-    <Table
+    <Card
-      loading={loading}
+      extra={
-      title={() => {
+        <Space wrap>
-        return (
+          <Button onClick={handleNewVendor}>{t("vendors.actions.new")}</Button>
-          <div className="imex-table-header">
+          <Button onClick={() => refetch()}>
-            <Button onClick={handleNewVendor}>
+            <SyncOutlined />
-              {t("vendors.actions.new")}
+          </Button>
-            </Button>
+          <Input.Search
-
+            placeholder={t("general.labels.search")}
-            <Button onClick={() => refetch()}>
+            onChange={(e) => {
-              <SyncOutlined />
+              setSearchText(e.target.value);
-            </Button>
+            }}
-            <Input.Search
+            value={searchText}
-              className="imex-table-header__search"
+            enterButton
-              placeholder={t("general.labels.search")}
+          />
-              onChange={(e) => {
+        </Space>
-                setSearchText(e.target.value);
+      }
-              }}
+    >
-              value={searchText}
+      <Table
-              enterButton
+        loading={loading}
-            />
+        pagination={{ position: "top" }}
-          </div>
+        columns={columns}
-        );
+        rowKey="id"
-      }}
+        onChange={handleTableChange}
-      pagination={{ position: "top" }}
+        dataSource={filteredVendors}
-      columns={columns}
+        rowSelection={{
-      rowKey="id"
+          onSelect: handleOnRowClick,
-      onChange={handleTableChange}
+          type: "radio",
-      dataSource={filteredVendors}
+          selectedRowKeys: [selectedvendor],
-      rowSelection={{
+        }}
-        onSelect: handleOnRowClick,
+        onRow={(record, rowIndex) => {
-        type: "radio",
+          return {
-        selectedRowKeys: [selectedvendor],
+            onClick: (event) => {
-      }}
+              handleOnRowClick(record);
-      onRow={(record, rowIndex) => {
+            },
-        return {
+          };
-          onClick: (event) => {
+        }}
-            handleOnRowClick(record);
+      />
-          },
+    </Card>
-        };
-      }}
-    />
   );
 }

client/src/components/vendors-list/vendors-list.container.jsx

@@ -1,10 +1,10 @@
-import React from "react";
 import { useQuery } from "@apollo/client";
+import queryString from "query-string";
+import React from "react";
+import { useHistory, useLocation } from "react-router-dom";
 import AlertComponent from "../../components/alert/alert.component";
 import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
 import VendorsListComponent from "./vendors-list.component";
-import queryString from "query-string";
-import { useHistory, useLocation } from "react-router-dom";
 
 export default function VendorsListContainer() {
   const { loading, error, data, refetch } = useQuery(QUERY_ALL_VENDORS);

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

@@ -1,10 +0,0 @@
-import React from "react";
-import ScoreboardDisplay from "../../components/scoreboard-display/scoreboard-display.component";
-
-export default function ProductionBoardComponent({ scoreboardSubscription }) {
-  return (
-    <div>
-      <ScoreboardDisplay scoreboardSubscription={scoreboardSubscription} />
-    </div>
-  );
-}

client/src/pages/scoreboard/scoreboard.page.container.jsx

@@ -7,7 +7,7 @@ import {
   setSelectedHeader,
 } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import ScoreboardPageComponent from "./scoreboard.page.component";
+import ScoreboardDisplay from "../../components/scoreboard-display/scoreboard-display.component";
 import { useSubscription } from "@apollo/client";
 import { SUBSCRIPTION_SCOREBOARD } from "../../graphql/scoreboard.queries";
 import moment from "moment";
@@ -45,9 +45,7 @@ export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
 
   return (
     <RbacWrapper action="scoreboard:view">
-      <ScoreboardPageComponent
+      <ScoreboardDisplay scoreboardSubscription={scoreboardSubscription} />
-        scoreboardSubscription={scoreboardSubscription}
-      />
     </RbacWrapper>
   );
 }

client/src/pages/shop-vendor/shop-vendor.page.component.jsx

@@ -1,28 +1,45 @@
-import { Col, Row } from "antd";
+import { Drawer, Grid } from "antd";
+import queryString from "query-string";
 import React from "react";
+import { useHistory, useLocation } from "react-router-dom";
 import VendorsFormContainer from "../../components/vendors-form/vendors-form.container";
 import VendorsListContainer from "../../components/vendors-list/vendors-list.container";
 
-const listSpan = {
-  md: { span: 24 },
-  lg: { span: 8 },
-};
-const formSapn = {
-  md: { span: 24 },
-  lg: { span: 16 },
-};
-
 export default function ShopVendorPageComponent() {
+  const search = queryString.parse(useLocation().search);
+  const { selectedvendor } = search;
+  const history = useHistory();
+
+  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
+    .filter((screen) => !!screen[1])
+    .slice(-1)[0];
+
+  const bpoints = {
+    xs: "100%",
+    sm: "100%",
+    md: "100%",
+    lg: "50%",
+    xl: "50%",
+    xxl: "45%",
+  };
+  const drawerPercentage = selectedBreakpoint
+    ? bpoints[selectedBreakpoint[0]]
+    : "100%";
+
   return (
     <div>
-      <Row gutter={[16, 16]}>
+      <VendorsListContainer />
-        <Col {...listSpan}>
+
-          <VendorsListContainer />
+      <Drawer
-        </Col>
+        width={drawerPercentage}
-        <Col {...formSapn}>
+        onClose={() => {
-          <VendorsFormContainer />
+          delete search.selectedvendor;
-        </Col>
+          history.push({ search: queryString.stringify(search) });
-      </Row>
+        }}
+        visible={selectedvendor}
+      >
+        <VendorsFormContainer />
+      </Drawer>
     </div>
   );
 }

client/src/pages/temporary-docs/temporary-docs.component.jsx

@@ -12,14 +12,11 @@ export default function TemporaryDocsComponent() {
   if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
-    <div>
+    <JobsDocumentsComponent
-      <div>Buttons to move and assign things.</div>
+      data={data ? data.documents : []}
-      <JobsDocumentsComponent
+      jobId={null}
-        data={data ? data.documents : []}
+      billId={null}
-        jobId={null}
+      refetch={refetch}
-        billId={null}
+    />
-        refetch={refetch}
-      />
-    </div>
   );
 }

client/src/translations/en_us/common.json

@@ -1175,6 +1175,7 @@
 				},
 				"changeclass": "Changing the job's class can have fundamental impacts to already exported accounting items. Are you sure you want to do this?",
 				"checklistcompletedby": "Checklist completed by {{by}} at {{at}}",
+				"checklistdocuments": "Checklist Documents",
 				"checklists": "Checklists",
 				"closeconfirm": "Are you sure you want to close this job? This cannot be easily undone.",
 				"cost": "Cost",
@@ -1723,6 +1724,7 @@
 				"asoftodaytarget": "As of Today",
 				"dailytarget": "Daily",
 				"monthlytarget": "Monthly",
+				"targets": "Targets",
 				"weeklytarget": "Weekly",
 				"workingdays": "Working Days / Month"
 			},

client/src/translations/es/common.json

@@ -1175,6 +1175,7 @@
 				},
 				"changeclass": "",
 				"checklistcompletedby": "",
+				"checklistdocuments": "",
 				"checklists": "",
 				"closeconfirm": "",
 				"cost": "",
@@ -1723,6 +1724,7 @@
 				"asoftodaytarget": "",
 				"dailytarget": "",
 				"monthlytarget": "",
+				"targets": "",
 				"weeklytarget": "",
 				"workingdays": ""
 			},

client/src/translations/fr/common.json

@@ -1175,6 +1175,7 @@
 				},
 				"changeclass": "",
 				"checklistcompletedby": "",
+				"checklistdocuments": "",
 				"checklists": "",
 				"closeconfirm": "",
 				"cost": "",
@@ -1723,6 +1724,7 @@
 				"asoftodaytarget": "",
 				"dailytarget": "",
 				"monthlytarget": "",
+				"targets": "",
 				"weeklytarget": "",
 				"workingdays": ""
 			},