UI Updates & Bill Entering

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
-      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;
-          }, {}),
-      }}
+    <Card
+      title={t("checklist.labels.checklist")}
+      extra={
+        !readOnly && (
+          <Button loading={loading} onClick={() => form.submit()}>
+            {t("general.actions.submit")}
+          </Button>
+        )
+      }
     >
-      {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>
-          <Form.Item
-            name="addToProduction"
-            valuePropName="checked"
-            label={t("checklist.labels.addtoproduction")}
-            disabled={readOnly}
-          >
-            <Switch />
-          </Form.Item>
-          <Form.Item
-            name="scheduled_completion"
-            label={t("jobs.fields.scheduled_completion")}
-            disabled={readOnly}
-            rules={[
-              {
-                required: true,
-                message: t("general.validation.required"),
-              },
-            ]}
-          >
-            <DateTimePicker />
-          </Form.Item>
-          <Form.Item
-            name="scheduled_delivery"
-            label={t("jobs.fields.scheduled_delivery")}
-            disabled={readOnly}
-          >
-            <DateTimePicker />
-          </Form.Item>
-        </div>
-      )}
-      {type === "deliver" && (
-        <div>
-          <Form.Item
-            name="actual_completion"
-            label={t("jobs.fields.actual_completion")}
-            disabled={readOnly}
-            rules={[
-              {
-                required: true,
-                message: t("general.validation.required"),
-              },
-            ]}
-          >
-            <DateTimePicker />
-          </Form.Item>
-          <Form.Item
-            name="removeFromProduction"
-            valuePropName="checked"
-            label={t("checklist.labels.removefromproduction")}
-            disabled={readOnly}
-          >
-            <Switch defaultChecked={true} />
-          </Form.Item>
-        </div>
-      )}
-      {!readOnly && (
-        <Button loading={loading} htmlType="submit">
-          {t("general.actions.submit")}
-        </Button>
-      )}
-    </Form>
+        {type === "intake" && (
+          <div>
+            <Form.Item
+              name="addToProduction"
+              valuePropName="checked"
+              label={t("checklist.labels.addtoproduction")}
+              disabled={readOnly}
+            >
+              <Switch disabled={readOnly} />
+            </Form.Item>
+            <Form.Item
+              name="scheduled_completion"
+              label={t("jobs.fields.scheduled_completion")}
+              disabled={readOnly}
+              rules={[
+                {
+                  required: true,
+                  message: t("general.validation.required"),
+                },
+              ]}
+            >
+              <DateTimePicker />
+            </Form.Item>
+            <Form.Item
+              name="scheduled_delivery"
+              label={t("jobs.fields.scheduled_delivery")}
+              disabled={readOnly}
+            >
+              <DateTimePicker />
+            </Form.Item>
+          </div>
+        )}
+        {type === "deliver" && (
+          <div>
+            <Form.Item
+              name="actual_completion"
+              label={t("jobs.fields.actual_completion")}
+              disabled={readOnly}
+              rules={[
+                {
+                  required: true,
+                  message: t("general.validation.required"),
+                },
+              ]}
+            >
+              <DateTimePicker />
+            </Form.Item>
+            <Form.Item
+              name="removeFromProduction"
+              valuePropName="checked"
+              label={t("checklist.labels.removefromproduction")}
+              disabled={readOnly}
+            >
+              <Switch disabled={readOnly} defaultChecked={true} />
+            </Form.Item>
+          </div>
+        )}
+      </Form>
+    </Card>
   );
 }
 

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>
-      <Button onClick={renderAllTemplates} loading={loading}>
-        {t("checklist.actions.printall")}
-      </Button>
+    <Card
+      title={t("jobs.labels.checklistdocuments")}
+      extra={
+        <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]}>
-      <Col span={6}>
+    <Row gutter={[16, 16]}>
+      <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>