Further UI Updates.

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

@@ -1,5 +1,5 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { Button, Checkbox, Input, Space, Table, Typography } from "antd";
+import { Button, Card, Checkbox, Input, Space, Table } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -201,37 +201,39 @@ export function BillsListPage({
   };
 
   return (
-    <div>
+    <Card
+      title={t("bills.labels.bills")}
+      extra={
+        <Space wrap>
+          <Button onClick={() => refetch()}>
+            <SyncOutlined />
+          </Button>
+          <Button
+            onClick={() => {
+              setBillEnterContext({
+                actions: { refetch: refetch },
+                context: {},
+              });
+            }}
+          >
+            {t("jobs.actions.postbills")}
+          </Button>
+          <div className="imex-table-header__search">
+            <Input.Search
+              placeholder={t("general.labels.search")}
+              onSearch={(value) => {
+                search.search = value;
+                history.push({ search: queryString.stringify(search) });
+              }}
+            />
+          </div>
+        </Space>
+      }
+    >
       <PartsOrderModalContainer />
-      <Typography.Title level={4}>{t("bills.labels.bills")}</Typography.Title>
+
       <Table
         loading={loading}
-        title={() => (
-          <div className="imex-table-header">
-            <Button onClick={() => refetch()}>
-              <SyncOutlined />
-            </Button>
-            <Button
-              onClick={() => {
-                setBillEnterContext({
-                  actions: { refetch: refetch },
-                  context: {},
-                });
-              }}
-            >
-              {t("jobs.actions.postbills")}
-            </Button>
-            <div className="imex-table-header__search">
-              <Input.Search
-                placeholder={t("general.labels.search")}
-                onSearch={(value) => {
-                  search.search = value;
-                  history.push({ search: queryString.stringify(search) });
-                }}
-              />
-            </div>
-          </div>
-        )}
         scroll={{ x: "50%", y: "40rem" }}
         pagination={{
           position: "top",
@@ -244,7 +246,7 @@ export function BillsListPage({
         dataSource={data}
         onChange={handleTableChange}
       />
-    </div>
+    </Card>
   );
 }
 export default connect(null, mapDispatchToProps)(BillsListPage);

client/src/pages/contract-create/contract-create.page.component.jsx

@@ -1,4 +1,4 @@
-import { Button } from "antd";
+import { Button, Col, PageHeader, Row } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import ContractCarsContainer from "../../components/contract-cars/contract-cars.container";
@@ -25,22 +25,31 @@ export default function ContractCreatePageComponent({
 
   return (
     <div>
-      {CreateButton}
-      <ContractJobsContainer selectedJobState={selectedJobState} />
-      <ContractCarsContainer selectedCarState={selectedCarState} form={form} />
-
-      <div
-        style={{
-          display: selectedJobState[0] && selectedCarState[0] ? "" : "none",
-        }}
-      >
-        <ContractFormComponent
-          create
-          form={form}
-          selectedJobState={selectedJobState}
-        />
-      </div>
-      {CreateButton}
+      <Row gutter={[16, 16]}>
+        <Col span={24}>
+          <ContractJobsContainer selectedJobState={selectedJobState} />
+        </Col>
+        <Col span={24}>
+          <ContractCarsContainer
+            selectedCarState={selectedCarState}
+            form={form}
+          />
+        </Col>
+        <Col span={24}>
+          <div
+            style={{
+              display: selectedJobState[0] && selectedCarState[0] ? "" : "none",
+            }}
+          >
+            <ContractFormComponent
+              create
+              form={form}
+              selectedJobState={selectedJobState}
+            />
+          </div>
+        </Col>
+      </Row>
+      <PageHeader extra={CreateButton} />
     </div>
   );
 }

client/src/pages/contract-detail/contract-detail.page.component.jsx

@@ -1,4 +1,4 @@
-import { Button, Col, Row, Space, Typography, Form } from "antd";
+import { Button, Col, Row, Space, Typography, Form, PageHeader } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -28,17 +28,14 @@ export function ContractDetailPage({
   return (
     <div>
       <Row align="middle">
-        <Typography.Title>{`Agreement ${
-          (contract && contract.agreementnumber) || ""
-        } - ${t((contract && contract.status) || "")}`}</Typography.Title>
+        <Typography.Title></Typography.Title>
       </Row>
-
-      <Row>
-        <Col span={4} offset={1}>
-          <ContractJobBlock job={job} />
-          <ContractCourtesyCarBlock courtesyCar={courtesyCar} />
-        </Col>
-        <Col span={18} offset={1}>
+      <PageHeader
+        title={t("contracts.labels.agreement", {
+          agreement_num: contract && contract.agreementnumber,
+          status: t(contract && contract.status),
+        })}
+        extra={
           <Form.Item shouldUpdate>
             {() => {
               return (
@@ -94,6 +91,16 @@ export function ContractDetailPage({
               );
             }}
           </Form.Item>
+        }
+      />
+      <Row gutter={[16, 16]}>
+        <Col sm={24} md={12}>
+          <ContractJobBlock job={job} />
+        </Col>
+        <Col sm={24} md={12}>
+          <ContractCourtesyCarBlock courtesyCar={courtesyCar} />
+        </Col>
+        <Col span={24}>
           <ContractFormComponent form={form} />
         </Col>
       </Row>

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

@@ -8,13 +8,11 @@ export default function ContractsPageComponent({
   total,
 }) {
   return (
-    <div>
-      <ContractsList
-        loading={loading}
-        contracts={data}
-        refetch={refetch}
-        total={total}
-      />
-    </div>
+    <ContractsList
+      loading={loading}
+      contracts={data}
+      refetch={refetch}
+      total={total}
+    />
   );
 }

client/src/pages/jobs-checklist-view/jobs-checklist-view.page.jsx

@@ -72,7 +72,7 @@ export function JobsChecklistViewContainer({
 
   return (
     <RbacWrapper action="jobs:checklist-view">
-      <Row gutter={[32, 32]}>
+      <Row gutter={[16, 16]}>
         <Col span={12}>
           <Typography.Title level={4}>
             {t("jobs.labels.intakechecklist")}

client/src/pages/jobs-create/jobs-create.component.jsx

@@ -1,4 +1,4 @@
-import { Button, Result, Steps } from "antd";
+import { Button, PageHeader, Result, Space, Steps } from "antd";
 import React, { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -44,36 +44,68 @@ export default function JobsCreateComponent({ form }) {
   };
   const { Step } = Steps;
 
-  const ProgressButtons = () => {
+  const ProgressButtons = ({ top }) => {
     return (
-      <div style={{ margin: "1rem" }}>
-        {pageIndex > 0 && <Button onClick={() => prev()}>Previous</Button>}
-        {pageIndex < steps.length - 1 && (
-          <Button
-            type="primary"
-            onClick={() => {
-              form
-                .validateFields()
-                .then((r) => {
-                  if (steps[pageIndex].validation) {
-                    setErrorMessage(null);
-                    next();
-                  } else {
-                    setErrorMessage(steps[pageIndex].error);
-                  }
-                })
-                .catch((error) => console.log("error", error));
-            }}
-          >
-            Next
-          </Button>
+      <PageHeader
+        extra={
+          <Space wrap>
+            {pageIndex > 0 && <Button onClick={() => prev()}>Previous</Button>}
+            {pageIndex < steps.length - 1 && (
+              <Button
+                type="primary"
+                onClick={() => {
+                  form
+                    .validateFields()
+                    .then((r) => {
+                      if (steps[pageIndex].validation) {
+                        setErrorMessage(null);
+                        next();
+                      } else {
+                        setErrorMessage(steps[pageIndex].error);
+                      }
+                    })
+                    .catch((error) => console.log("error", error));
+                }}
+              >
+                Next
+              </Button>
+            )}
+            {pageIndex === steps.length - 1 && (
+              <Button type="primary" htmlType="submit">
+                Done
+              </Button>
+            )}
+          </Space>
+        }
+      >
+        {top && (
+          <Steps current={pageIndex}>
+            {steps.map((item, idx) => (
+              <Step
+                key={item.title}
+                title={item.title}
+                style={{
+                  cursor: "pointer",
+                  fontWeight: idx === pageIndex && "bolder",
+                }}
+                onClick={() => {
+                  form
+                    .validateFields()
+                    .then((r) => {
+                      if (steps[pageIndex].validation) {
+                        setErrorMessage(null);
+                        setPageIndex(idx);
+                      } else {
+                        setErrorMessage(steps[pageIndex].error);
+                      }
+                    })
+                    .catch((error) => console.log("error", error));
+                }}
+              />
+            ))}
+          </Steps>
         )}
-        {pageIndex === steps.length - 1 && (
-          <Button type="primary" htmlType="submit">
-            Done
-          </Button>
-        )}
-      </div>
+      </PageHeader>
     );
   };
 
@@ -96,29 +128,7 @@ export default function JobsCreateComponent({ form }) {
         </div>
       ) : (
         <div>
-          <Steps current={pageIndex}>
-            {steps.map((item, idx) => (
-              <Step
-                key={item.title}
-                title={item.title}
-                style={{ cursor: "pointer" }}
-                onClick={() => {
-                  form
-                    .validateFields()
-                    .then((r) => {
-                      if (steps[pageIndex].validation) {
-                        setErrorMessage(null);
-                        setPageIndex(idx);
-                      } else {
-                        setErrorMessage(steps[pageIndex].error);
-                      }
-                    })
-                    .catch((error) => console.log("error", error));
-                }}
-              />
-            ))}
-          </Steps>
-          <ProgressButtons />
+          <ProgressButtons top />
 
           {errorMessage ? (
             <div>

client/src/pages/jobs-create/jobs-create.container.jsx

@@ -149,6 +149,7 @@ function JobsCreateContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
     <JobCreateContext.Provider value={contextState}>
       <RbacWrapper action="jobs:create">
         <Form
+          scrollToFirstError
           form={form}
           onFinish={handleFinish}
           layout="vertical"

client/src/pages/production-list/production-list.component.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import ProductionListTable from "../../components/production-list-table/production-list-table.container";
 
-export default function ProductionListComponent({ columnState }) {
+export default function ProductionListComponent() {
   return <ProductionListTable />;
 }

client/src/pages/production-list/production-list.container.jsx

@@ -1,18 +1,12 @@
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
+import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import {
   setBreadcrumbs,
   setSelectedHeader,
 } from "../../redux/application/application.actions";
-import { selectBodyshop } from "../../redux/user/user.selectors";
 import ProductionListComponent from "./production-list.component";
-import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
-
-const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop,
-});
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -21,7 +15,7 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function ProductionListContainer({
   setBreadcrumbs,
-  bodyshop,
+
   setSelectedHeader,
 }) {
   const { t } = useTranslation();
@@ -40,7 +34,4 @@ export function ProductionListContainer({
     </RbacWrapper>
   );
 }
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ProductionListContainer);
+export default connect(null, mapDispatchToProps)(ProductionListContainer);