IO-843 Admin Page Updates

client/src/components/jobs-admin-class/jobs-admin-class.component.jsx

@@ -6,7 +6,6 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -55,26 +54,24 @@ export function JobsAdminClass({ bodyshop, job }) {
         layout="vertical"
         initialValues={job}
       >
-        <LayoutFormRow>
+        <Form.Item
-          <Form.Item
+          name={["class"]}
-            name={["class"]}
+          label={t("jobs.fields.class")}
-            label={t("jobs.fields.class")}
+          rules={[
-            rules={[
+            {
-              {
+              required: bodyshop.enforce_class,
-                required: bodyshop.enforce_class,
+              message: t("general.validation.required"),
-                message: t("general.validation.required"),
+            },
-              },
+          ]}
-            ]}
+        >
-          >
+          <Select>
-            <Select>
+            {bodyshop.md_classes.map((s) => (
-              {bodyshop.md_classes.map((s) => (
+              <Select.Option key={s} value={s}>
-                <Select.Option key={s} value={s}>
+                {s}
-                  {s}
+              </Select.Option>
-                </Select.Option>
+            ))}
-              ))}
+          </Select>
-            </Select>
+        </Form.Item>
-          </Form.Item>
-        </LayoutFormRow>
       </Form>
 
       <Popconfirm

client/src/components/jobs-admin-dates/jobs-admin-dates.component.jsx

@@ -38,7 +38,6 @@ export default function JobsAdminDatesChange({ job }) {
 
   return (
     <div>
-      <div>{t("jobs.labels.ownerassociation")}</div>
       <Form
         onFinish={handleFinish}
         autoComplete={"off"}

client/src/components/jobs-admin-delete-intake/jobs-admin-delete-intake.component.jsx

@@ -38,12 +38,8 @@ export default function JobAdminDeleteIntake({ job }) {
   };
 
   return (
-    <div>
+    <Button loading={loading} onClick={handleDelete}>
-      <div>{t("jobs.labels.deleteintake")}</div>
+      {t("jobs.labels.deleteintake")}
-
+    </Button>
-      <Button loading={loading} onClick={handleDelete}>
-        {t("general.actions.delete")}
-      </Button>
-    </div>
   );
 }

client/src/pages/jobs-admin/jobs-admin.page.jsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@apollo/client";
-import { Result } from "antd";
+import { Card, Col, Result, Row, Space } from "antd";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -12,7 +12,6 @@ import JobsAdminDatesChange from "../../components/jobs-admin-dates/jobs-admin-d
 import JobsAdminDeleteIntake from "../../components/jobs-admin-delete-intake/jobs-admin-delete-intake.component";
 import JobAdminOwnerReassociate from "../../components/jobs-admin-owner-reassociate/jobs-admin-owner-reassociate.component";
 import JobAdminVehicleReassociate from "../../components/jobs-admin-vehicle-reassociate/jobs-admin-vehicle-reassociate.component";
-import LayoutFormRow from "../../components/layout-form-row/layout-form-row.component";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import NotFound from "../../components/not-found/not-found.component";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
@@ -27,6 +26,13 @@ const mapDispatchToProps = (dispatch) => ({
   setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
 });
 
+const colSpan = {
+  sm: { span: 24 },
+  md: { span: 12 },
+  lg: { span: 8 },
+  xl: { span: 6 },
+};
+
 export function JobsCloseContainer({ setBreadcrumbs, setSelectedHeader }) {
   const { jobId } = useParams();
   const { loading, error, data } = useQuery(GET_JOB_BY_PK, {
@@ -70,18 +76,37 @@ export function JobsCloseContainer({ setBreadcrumbs, setSelectedHeader }) {
 
   return (
     <RbacWrapper action="jobs:admin">
-      <div>
+      <Row gutter={[16, 16]}>
-        <ScoreboardAddButton job={data ? data.jobs_by_pk : {}} />
+        <Col {...colSpan}>
-        <LayoutFormRow grow>
+          <Card>
-          <JobAdminOwnerReassociate job={data ? data.jobs_by_pk : {}} />
+            <Space wrap>
-          <JobAdminVehicleReassociate job={data ? data.jobs_by_pk : {}} />
+              <ScoreboardAddButton job={data ? data.jobs_by_pk : {}} />
-        </LayoutFormRow>
+              <JobsAdminDeleteIntake job={data ? data.jobs_by_pk : {}} />
-        <LayoutFormRow>
+            </Space>
-          <JobsAdminDeleteIntake job={data ? data.jobs_by_pk : {}} />
+          </Card>
-        </LayoutFormRow>
+        </Col>
-        <JobsAdminDatesChange job={data ? data.jobs_by_pk : {}} />
+        <Col {...colSpan}>
-        <JobsAdminClass job={data ? data.jobs_by_pk : {}} />
+          <Card>
-      </div>
+            <JobsAdminClass job={data ? data.jobs_by_pk : {}} />
+          </Card>
+        </Col>
+        <Col {...colSpan}>
+          <Card>
+            <JobAdminOwnerReassociate job={data ? data.jobs_by_pk : {}} />
+          </Card>
+        </Col>
+        <Col {...colSpan}>
+          <Card>
+            <JobAdminVehicleReassociate job={data ? data.jobs_by_pk : {}} />
+          </Card>
+        </Col>
+
+        <Col span={24}>
+          <Card>
+            <JobsAdminDatesChange job={data ? data.jobs_by_pk : {}} />
+          </Card>
+        </Col>
+      </Row>
     </RbacWrapper>
   );
 }