Removed job status table. Added existing appointments timeline to modal. Refetching on calendar on delete.

client/src/components/jobs-detail-header/jobs-detail-header.component.jsx

@@ -5,7 +5,8 @@ import {
   Descriptions,
   notification,
   PageHeader,
-  Tag
+  Tag,
+  Badge
 } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -60,15 +61,16 @@ export default function JobsDetailHeader({
   );
 
   const menuExtra = [
-    <Button
-      key="schedule"
-      //TODO: Enabled logic based on status.
-      onClick={() => {
-        setscheduleModalVisible(true);
-      }}
-    >
-      {t("jobs.actions.schedule")}
-    </Button>,
+    <Badge key="schedule" count={job.appointments_aggregate.aggregate.count}>
+      <Button
+        //TODO: Enabled logic based on status.
+        onClick={() => {
+          setscheduleModalVisible(true);
+        }}
+      >
+        {t("jobs.actions.schedule")}
+      </Button>
+    </Badge>,
     <Button
       key="convert"
       type="dashed"
@@ -106,9 +108,7 @@ export default function JobsDetailHeader({
       subTitle={tombstoneSubtitle}
       tags={
         <span key="job-status">
-          {job.job_status ? (
-            <Tag color="blue">{job.job_status.name}</Tag>
-          ) : null}
+          {job.status ? <Tag color="blue">{job.status}</Tag> : null}
         </span>
       }
       extra={menuExtra}