Added several fixes throughout for demo.

client/src/components/schedule-job-modal/schedule-job-modal.component.jsx

@@ -1,4 +1,4 @@
-import { Button, Col, Form, Row, Select, Switch } from "antd";
+import { Button, Col, Form, Row, Select, Switch, Card } from "antd";
 import axios from "axios";
 import moment from "moment";
 import React, { useState } from "react";
@@ -79,9 +79,26 @@ export function ScheduleJobModalComponent({
           >
             <DateTimePicker onBlur={handleDateBlur} />
           </Form.Item>
+          <Form.Item
+            name="scheduled_completion"
+            label={t("jobs.fields.scheduled_completion")}
+            rules={[
+              {
+                required: true,
+                message: t("general.validation.required"),
+              },
+            ]}
+          >
+            <DateTimePicker />
+          </Form.Item>
+        </LayoutFormRow>
+        <Card title={t("appointments.labels.smartscheduling")}>
           <Button onClick={handleAuto} loading={loading}>
-            {t("appointments.actions.smartscheduling")}
+            {t("appointments.actions.calculate")}
           </Button>
+          {smartOptions.length > 0 && (
+            <div>{t("appointments.labels.suggesteddates")}</div>
+          )}
           <div className="imex-flex-row imex-flex-row__flex-space-around">
             {smartOptions.map((d, idx) => (
               <Button
@@ -96,20 +113,8 @@ export function ScheduleJobModalComponent({
               </Button>
             ))}
           </div>
-        </LayoutFormRow>
+        </Card>
         <LayoutFormRow grow>
-          <Form.Item
-            name="scheduled_completion"
-            label={t("jobs.fields.scheduled_completion")}
-            rules={[
-              {
-                required: true,
-                message: t("general.validation.required"),
-              },
-            ]}
-          >
-            <DateTimePicker />
-          </Form.Item>
           <Form.Item
             name="notifyCustomer"
             valuePropName="checked"
@@ -120,6 +125,8 @@ export function ScheduleJobModalComponent({
           <Form.Item name="email" label={t("jobs.fields.ownr_ea")}>
             <EmailInput />
           </Form.Item>
+        </LayoutFormRow>
+        <LayoutFormRow grow>
           <Form.Item name="color" label={t("appointments.fields.color")}>
             <Select>
               {bodyshop.appt_colors &&