UI Updates.

client/src/components/schedule-calendar/schedule-calendar.component.jsx

@@ -1,5 +1,5 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { Button } from "antd";
+import { Button, Col, PageHeader, Row, Space } from "antd";
 import React from "react";
 import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component";
 import ScheduleModal from "../schedule-job-modal/schedule-job-modal.container";
@@ -7,23 +7,29 @@ import ScheduleProductionList from "../schedule-production-list/schedule-product
 
 export default function ScheduleCalendarComponent({ data, refetch }) {
   return (
-    <div>
-      <div className="imex-flex-row">
-        <Button
-          className="imex-flex-row__margin"
-          onClick={() => {
-            refetch();
-          }}
-        >
-          <SyncOutlined />
-        </Button>
-
-        <ScheduleProductionList />
-      </div>
-
+    <Row gutter={[16, 16]}>
       <ScheduleModal />
+      <Col span={24}>
+        <PageHeader
+          extra={
+            <Space wrap>
+              <Button
+                onClick={() => {
+                  refetch();
+                }}
+              >
+                <SyncOutlined />
+              </Button>
 
-      <ScheduleCalendarWrapperComponent data={data} refetch={refetch} />
-    </div>
+              <ScheduleProductionList />
+            </Space>
+          }
+        />
+      </Col>
+
+      <Col span={24}>
+        <ScheduleCalendarWrapperComponent data={data} refetch={refetch} />
+      </Col>
+    </Row>
   );
 }

client/src/components/schedule-calendar/schedule-calendar.container.jsx

@@ -50,7 +50,7 @@ export function ScheduleCalendarContainer({ calculateScheduleLoad }) {
   return (
     <ScheduleCalendarComponent
       refetch={refetch}
-      data={data ? normalizedData : null}
+      data={data ? normalizedData : []}
     />
   );
 }