@plusscommunities/pluss-maintenance-web-forms 1.1.35-beta.2 → 1.2.4-beta.0

package/src/screens/Job.js

@@ -1,1271 +1,1531 @@
-import React, { Component } from 'react';
-import { withRouter } from 'react-router';
-import { Link } from 'react-router-dom';
-import moment from 'moment';
-import _ from 'lodash';
-import FontAwesome from 'react-fontawesome';
-import Textarea from 'react-textarea-autosize';
-import { connect } from 'react-redux';
-import { jobsLoaded, jobStatusesUpdate } from '../actions';
-import Config, { PlussCore } from '../feature.config';
-import { maintenanceActions, reactionActions } from '../apis';
-import { STATUS_NOT_ACTIONED, jobPriorityOptions, getJobPriority } from '../helper';
-import { values } from '../values.config';
+import React, { Component } from "react";
+import { withRouter } from "react-router";
+import { Link } from "react-router-dom";
+import moment from "moment";
+import _ from "lodash";
+import FontAwesome from "react-fontawesome";
+import Textarea from "react-textarea-autosize";
+import { connect } from "react-redux";
+import { jobsLoaded, jobStatusesUpdate } from "../actions";
+import Config, { PlussCore } from "../feature.config";
+import { maintenanceActions, reactionActions } from "../apis";
+import {
+	STATUS_NOT_ACTIONED,
+	jobPriorityOptions,
+	getJobPriority,
+} from "../helper";
+import { values } from "../values.config";
 
 const { Apis, Helper, Session, Colours, Components } = PlussCore;
 const IMAGE_SIZE_NOTE = 72;
 
 class Job extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      jobId: Helper.safeReadParams(props, 'jobId') ? props.match.params.jobId : null,
-      job: null,
-      showingSelector: false,
-      updating: false,
-      comments: [],
-      commentInput: '',
-      loadingComments: false,
-      priorityChangerOpen: false,
-      statusChangerOpen: false,
-      addNoteOpen: false,
-      noteAttachments: [],
-      noteInput: '',
-      noteImages: [],
-      assignees: [],
-      externalSync: null,
-      loadingExternalSync: false,
-      retryingSync: false,
-      retrySyncError: null,
-      retrySyncInitiated: false,
-    };
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    Session.checkLoggedIn(this, this.props.auth);
-  }
-
-  componentDidMount() {
-    this.props.jobStatusesUpdate(this.props.auth.site);
-    if (this.state.jobId) {
-      this.getJob();
-      this.getComments();
-      this.getAssignees();
-      this.getExternalSync();
-    }
-  }
-
-  getJob = async () => {
-    try {
-      const res = await maintenanceActions.getJob(this.props.auth.site, this.state.jobId);
-      this.setState({ updating: false });
-      res.data.location = res.data.site;
-      this.setJob(res.data);
-    } catch (error) {
-      console.error('getJob', error);
-    }
-  };
-
-  getAssignees = async () => {
-    try {
-      const res = await maintenanceActions.getAssignees(this.props.auth.site);
-      this.setState({ assignees: res.data.Users });
-    } catch (error) {
-      console.error('getAssignees', error);
-    }
-  };
-
-  getExternalSync = async () => {
-    try {
-      this.setState({ loadingExternalSync: true });
-      const res = await maintenanceActions.getExternalSync(this.state.jobId);
-      this.setState({ externalSync: res.data, loadingExternalSync: false });
-    } catch (error) {
-      // 404 is expected if no sync - don't show error
-      if (error && error.response && error.response.status !== 404) {
-        console.error('getExternalSync', error);
-      }
-      this.setState({ loadingExternalSync: false });
-    }
-  };
-
-  onRetrySync = async () => {
-    const { job } = this.state;
-    if (!job || this.state.retryingSync) return;
-
-    this.setState({ retryingSync: true, retrySyncError: null });
-
-    try {
-      await maintenanceActions.retrySync(job.id);
-      // Refresh job data to get updated history
-      await this.getJob();
-      this.setState({ retryingSync: false, retrySyncInitiated: true });
-    } catch (error) {
-      console.error('onRetrySync', error);
-      const errorMessage =
-        (error && error.response && error.response.data && error.response.data.error) || 'Failed to retry sync. Please try again.';
-      this.setState({ retryingSync: false, retrySyncError: errorMessage });
-    }
-  };
-
-  getStatusType = (status) => {
-    const { statusTypes } = this.props;
-    let statusType = statusTypes.find((s) => s.text === status);
-    if (!statusType) {
-      const defaultStatus = statusTypes.find((s) => s.category === STATUS_NOT_ACTIONED);
-      statusType = { ...defaultStatus, text: status };
-    }
-    return statusType;
-  };
-
-  setJob = (job) => {
-    if (_.isEmpty(job.lastActivity)) {
-      job.lastActivity = '-- --';
-      job.noActivity = true;
-    }
-    if (_.isEmpty(job.status)) {
-      job.status = 'Unassigned';
-      job.notStatus = true;
-    }
-    if (_.isEmpty(job.audience)) {
-      job.audience = [{ displayName: 'Unassigned', isEmpty: true }];
-    }
-    let needToMarkSeen = false;
-    if (!job.seen) {
-      job.seen = true;
-      needToMarkSeen = true;
-    }
-    this.setState({ job }, () => {
-      if (needToMarkSeen) this.markSeen();
-    });
-    this.props.jobsLoaded([job]);
-  };
-
-  editJob = () => {};
-
-  isReadyToSaveNote = () => {
-    const { noteAttachments, noteInput, noteImages } = this.state;
-    if (_.some(noteAttachments, (n) => n.Uploading)) return false;
-    return !_.isEmpty(noteInput) || !_.isEmpty(noteAttachments) || !_.isEmpty(noteImages);
-  };
-
-  onOpenAddNote = () => {
-    this.setState({ addNoteOpen: true, editingNote: null });
-  };
-
-  onCloseAddNote = () => {
-    const newState = { addNoteOpen: false, editingNote: null };
-    if (!!this.state.editingNote) {
-      newState.noteInput = '';
-      newState.noteAttachments = [];
-      newState.noteImages = [];
-    }
-    this.setState(newState);
-  };
-
-  onOpenNoteMenu = (index) => {
-    if (this.state.noteMenuOpen === index) {
-      this.setState({ noteMenuOpen: null });
-    } else {
-      this.setState({ noteMenuOpen: index });
-    }
-  };
-
-  onHandlePDFFileChange = (event) => {
-    const file = event.target.files[0];
-    if (!file || this.state.uploadingNoteAttachment) return;
-    const noteAttachments = [...this.state.noteAttachments];
-    const newAttachment = {
-      Uploading: true,
-      Title: file.name,
-    };
-    noteAttachments.push(newAttachment);
-    this.setState({
-      noteAttachments,
-    });
-    Apis.fileActions
-      .uploadMediaAsync(file, file.name)
-      .then((fileRes) => {
-        newAttachment.Source = fileRes;
-        newAttachment.Uploading = false;
-        this.setState({
-          noteAttachments: [...this.state.noteAttachments],
-        });
-      })
-      .catch((uploadErrorRes) => {
-        console.log(uploadErrorRes);
-        newAttachment.Uploading = false;
-        this.setState({
-          noteAttachments: [...this.state.noteAttachments],
-        });
-      });
-    event.target.value = '';
-  };
-
-  onRemoveAttachment = (a) => {
-    const index = this.state.noteAttachments.indexOf(a);
-    if (index > -1) {
-      const newAttachments = [...this.state.noteAttachments];
-      newAttachments.splice(index, 1);
-      this.setState({
-        noteAttachments: newAttachments,
-      });
-    }
-  };
-
-  onShowSelectAssignee = () => {
-    this.setState({
-      showingAssigneeSelector: true,
-    });
-  };
-
-  onCloseSelectAssignee = () => {
-    this.setState({
-      showingAssigneeSelector: false,
-    });
-  };
-
-  onSelectAssignee = (user) => {
-    this.setState({
-      selectedAssignee: user,
-    });
-  };
-
-  onConfirmAssignee = async () => {
-    this.setState({
-      confirmingAssignee: true,
-    });
-    try {
-      if (this.state.selectedAssignee) {
-        await this.onAssignUser(this.state.selectedAssignee.id);
-      }
-      this.onCloseSelectAssignee();
-    } catch (error) {
-      console.error('onConfirmAssignee', error);
-    }
-    this.setState({
-      confirmingAssignee: false,
-    });
-  };
-
-  // Method to handle user assignment
-  onAssignUser = async (userId) => {
-    try {
-      const res = await maintenanceActions.assignJob(this.state.jobId, userId);
-      this.getJob();
-    } catch (err) {
-      console.error('onAssignUser', err);
-    }
-  };
-
-  onConfirmAddNote = async () => {
-    if (!this.isReadyToSaveNote()) return;
-
-    try {
-      this.setState({ submittingNote: true });
-      const res = await (this.state.editingNote
-        ? maintenanceActions.editNote(
-            this.state.jobId,
-            this.state.editingNote,
-            this.state.noteInput,
-            this.state.noteAttachments.map((a) => {
-              return {
-                Title: a.Title,
-                Source: a.Source,
-              };
-            }),
-            this.state.noteImages,
-          )
-        : maintenanceActions.addNote(
-            this.state.jobId,
-            this.state.noteInput,
-            this.state.noteAttachments.map((a) => {
-              return {
-                Title: a.Title,
-                Source: a.Source,
-              };
-            }),
-            this.state.noteImages,
-          ));
-      this.setState(
-        {
-          job: res.data.job,
-          submittingNote: false,
-          addNoteOpen: false,
-          noteInput: '',
-          noteAttachments: [],
-          noteImages: [],
-          editingNote: null,
-        },
-        () => {
-          this.props.jobsLoaded([this.state.job]);
-        },
-      );
-    } catch (err) {
-      console.error('onConfirmAddNote', err);
-    }
-  };
-
-  onDeleteNote = (n) => {
-    if (!window.confirm(values.textAreYouSureYouWantToDeleteNote)) {
-      this.setState({ noteMenuOpen: null });
-      return;
-    }
-
-    maintenanceActions.deleteNote(this.state.jobId, n.Id);
-    const newNotes = _.filter(this.state.job.Notes, (note) => note.Id !== n.Id);
-    const newJob = { ...this.state.job };
-    newJob.Notes = newNotes;
-    this.setState({ job: newJob, noteMenuOpen: null });
-  };
-
-  onOpenEditNote = (n) => {
-    this.setState(
-      {
-        noteAttachments: n.Attachments || [],
-        noteImages: n.Images || [],
-        noteInput: n.Note || '',
-        addNoteOpen: true,
-        editingNote: n.Id,
-        noteMenuOpen: null,
-      },
-      this.checkSetImage,
-    );
-  };
-
-  markSeen = () => {
-    const { job } = this.state;
-    const { auth } = this.props;
-    // Must have maintenance permission and not the requester
-    if (!Session.validateAccess(auth.site, values.permissionMaintenanceTracking, auth)) return;
-    if (auth.user.Id === job.userID) return;
-
-    this.setState({ updating: true }, async () => {
-      try {
-        const update = {
-          id: job.id,
-          seen: true,
-          status: job.status || 'Unassigned',
-        };
-
-        await maintenanceActions.editJob(update, auth.site);
-      } catch (error) {
-        this.setState({ updating: false });
-        console.log('markSeen error', error);
-        alert('Something went wrong with the request. Please try again.');
-      }
-    });
-  };
-
-  getComments = () => {
-    reactionActions.getComments(this.state.jobId, values.commentKey, 0).then((res) => {
-      this.setState({ comments: res.data });
-    });
-  };
-
-  checkSetImage() {
-    if (this.imageInput && !_.isEmpty(this.state.noteImages)) {
-      this.imageInput.getWrappedInstance().setValue(this.state.noteImages);
-    } else {
-      setTimeout(this.checkSetImage, 100);
-    }
-  }
-
-  onAddComment = async () => {
-    const { commentInput, jobId, job, comments } = this.state;
-    try {
-      this.setState({ commentInput: '' });
-      const res = await reactionActions.addComment(jobId, values.commentKey, job.title, job.site, commentInput);
-      this.setState({ comments: [...comments, res.data] });
-    } catch (error) {
-      console.error('onAddComment', error);
-    }
-  };
-
-  onHandleChange = (event) => {
-    var stateChange = {};
-    stateChange[event.target.getAttribute('id')] = event.target.value;
-    this.setState(stateChange);
-  };
-
-  onTogglePriorityChanger = () => {
-    this.setState({ priorityChangerOpen: !this.state.priorityChangerOpen });
-  };
-
-  onSelectPriority = async (priority) => {
-    this.setState({
-      job: { ...this.state.job, priority },
-      priorityChangerOpen: false,
-    });
-
-    try {
-      const res = await maintenanceActions.editJobPriority(this.state.job.id, priority);
-      const { job } = res.data;
-      this.props.jobsLoaded([job]);
-      this.setState({ job });
-    } catch (error) {
-      console.error('onSelectPriority', error);
-    }
-  };
-
-  onToggleStatusChanger = () => {
-    this.setState({ statusChangerOpen: !this.state.statusChangerOpen });
-  };
-
-  onSelectStatus = async (status) => {
-    this.setState({
-      job: {
-        ...this.state.job,
-        status: status,
-      },
-      statusChangerOpen: false,
-    });
-
-    try {
-      const res = await maintenanceActions.editJobStatus(this.state.job.id, status);
-      const { job } = res.data;
-      this.props.jobsLoaded([job]);
-      this.setState({ job });
-    } catch (error) {
-      console.error('onSelectStatus', error);
-    }
-  };
-
-  renderPriorityChanger() {
-    if (!this.state.priorityChangerOpen) return null;
-    return (
-      <div className="statusChanger statusChanger-priority">
-        {jobPriorityOptions.map((p) => {
-          return (
-            <div key={p.name} className="statusLabel" onClick={() => this.onSelectPriority(p.name)} style={{ backgroundColor: p.color }}>
-              <span className="statusLabel_text">{p.name}</span>
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-
-  renderPriorityLabel() {
-    const { auth } = this.props;
-    if (!Session.validateAccess(auth.site, values.permissionMaintenanceTracking, auth)) return null;
-
-    const { job } = this.state;
-    if (!job) return null;
-
-    const selectedPriority = getJobPriority(job.priority);
-    return (
-      <div
-        className="statusLabel marginTop-5 pointer"
-        onClick={this.onTogglePriorityChanger}
-        style={{ backgroundColor: selectedPriority.color }}
-      >
-        <span className="statusLabel_text">{job.priority || selectedPriority.name}</span>
-        {this.renderPriorityChanger()}
-      </div>
-    );
-  }
-
-  renderStatusLabel() {
-    if (!this.state.job.status) return null;
-    const statusType = this.getStatusType(this.state.job.status);
-    const { auth } = this.props;
-    if (Session.validateAccess(auth.site, values.permissionMaintenanceTracking, auth)) {
-      return (
-        <div className="statusLabel pointer" onClick={this.onToggleStatusChanger} style={{ backgroundColor: statusType.color }}>
-          <span className="statusLabel_text">{statusType.text}</span>
-          {this.renderStatusChanger()}
-        </div>
-      );
-    }
-    return (
-      <div className="statusLabel" style={{ backgroundColor: statusType.color }}>
-        <span className="statusLabel_text">{statusType.text}</span>
-      </div>
-    );
-  }
-
-  renderNotesButton() {
-    const { auth } = this.props;
-    if (!Session.validateAccess(auth.site, values.permissionMaintenanceTracking, auth)) return null;
-    return (
-      <div
-        className="statusLabel pointer"
-        onClick={this.onOpenAddNote}
-        style={{ backgroundColor: Config.env.colourBrandingMain, marginLeft: 8 }}
-      >
-        <span className="statusLabel_text">Add Note</span>
-      </div>
-    );
-  }
-
-  renderAssignButton() {
-    const { auth } = this.props;
-    if (!Session.validateAccess(auth.site, values.permissionMaintenanceTracking, auth)) return null;
-    return (
-      <div
-        className="statusLabel pointer"
-        onClick={this.onShowSelectAssignee}
-        style={{ backgroundColor: Config.env.colourBrandingMain, marginLeft: 8 }}
-      >
-        <span className="statusLabel_text">Assign</span>
-      </div>
-    );
-  }
-
-  renderStatusChanger() {
-    if (!this.state.statusChangerOpen) return null;
-    const { statusTypes } = this.props;
-
-    return (
-      <div className="statusChanger statusChanger-maintenance">
-        {statusTypes.map((status) => {
-          return (
-            <div
-              key={status.text}
-              className="statusLabel"
-              onClick={() => this.onSelectStatus(status.text)}
-              style={{ backgroundColor: status.color }}
-            >
-              <span className="statusLabel_text">{status.text}</span>
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-
-  renderComment(c) {
-    return <Components.Comment key={c.Id} comment={c} />;
-    return (
-      <div key={c.Id} className="comment">
-        <p className="comment_text">{Helper.toParagraphed(c.Comment)}</p>
-        <div className="comment_bottom">
-          <Components.ProfilePic className="comment_profilePic" size={25} image={c.User.profilePic} />
-          <p className="comment_name">{c.User.displayName}</p>
-          <p className="comment_time">{moment.utc(c.Timestamp).local().format('D MMM YYYY • h:mma')}</p>
-        </div>
-      </div>
-    );
-  }
-
-  renderCommentSection() {
-    if (this.state.loadingComments) return null;
-
-    return (
-      <div className="padding-60 paddingLeft-20">
-        <div className="newTopBar paddingLeft-40">
-          <Components.Text type="formTitleSmall" className="marginBottom-16">
-            Comments
-          </Components.Text>
-          <div className="commentSection">{this.state.comments.map((c) => this.renderComment(c))}</div>
-          <div className="commentReply">
-            <div
-              className={`commentReply_button${!_.isEmpty(this.state.commentInput) ? ' commentReply_button-active' : ''}`}
-              onClick={this.onAddComment}
-            >
-              <FontAwesome className="commentReply_icon" name="paper-plane-o" />
-            </div>
-            <Textarea
-              id="commentInput"
-              placeholder="Reply here..."
-              type="text"
-              className="commentReply_input"
-              value={this.state.commentInput}
-              onChange={(e) => this.onHandleChange(e)}
-            />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  renderImageGrid(images, size = undefined) {
-    const imagesToUse = images && images.length > 0 ? images : [];
-    return (
-      <div className="imageGrid">
-        {imagesToUse.map((image, i) => {
-          return (
-            <a href={image} target="_blank" rel="noopener noreferrer" key={i}>
-              <div
-                className="imageGrid_image"
-                style={{ backgroundImage: `url('${Helper.get1400(image)}')`, width: size, height: size }}
-              ></div>
-            </a>
-          );
-        })}
-      </div>
-    );
-  }
-
-  renderDocumentGrid(documents) {
-    const documentsToUse = documents && documents.length > 0 ? documents : [];
-    return (
-      <div className="documentGrid">
-        {documentsToUse.map((doc, index) => (
-          <Components.Attachment key={index} uploading={doc.uploading} source={doc.url} title={doc.name} />
-        ))}
-      </div>
-    );
-  }
-
-  renderImages() {
-    if (_.isEmpty(this.state.job.image) && _.isEmpty(this.state.job.images)) return null;
-
-    const imagesToUse = _.isEmpty(this.state.job.image) ? this.state.job.images : [this.state.job.image];
-    return (
-      <div className="padding-60 paddingVertical-40 bottomDivideBorder">
-        <Components.Text type="formTitleSmall" className="marginBottom-16">
-          Images
-        </Components.Text>
-        {this.renderImageGrid(imagesToUse)}
-      </div>
-    );
-  }
-
-  renderCustomFields() {
-    const { job } = this.state;
-    const { customFields } = job;
-
-    const labelClass = 'fieldLabel';
-    const answerClass = 'fontRegular fontSize-16 text-dark marginTop-5';
-
-    const renderAnswer = (field) => {
-      switch (field.type) {
-        case 'date':
-          return <div className={answerClass}>{field.answer ? moment(field.answer, 'YYYY-MM-DD').format('DD-MMM-YYYY') : ''}</div>;
-        case 'time':
-          return <div className={answerClass}>{field.answer ? moment(field.answer, 'HH:mm').format('h:mm a') : ''}</div>;
-        case 'yn':
-          return <div className={answerClass}>{field.answer ? 'Yes' : 'No'}</div>;
-        case 'checkbox':
-          return <div className={answerClass}>{field.answer && Array.isArray(field.answer) ? field.answer.join(', ') : ''}</div>;
-        case 'image':
-          return this.renderImageGrid(field.answer);
-        case 'document':
-          return this.renderDocumentGrid(field.answer);
-        default:
-          return <div className={answerClass}>{field.answer}</div>;
-      }
-    };
-
-    return (
-      <div className="padding-60 paddingVertical-40 bottomDivideBorder">
-        {customFields.map((field, index) => {
-          if (['staticTitle', 'staticText'].includes(field.type)) return null;
-          if (_.isNil(field.answer) || field.answer === '' || field.answer.length === 0) return null;
-          return (
-            <div key={index} className="marginTop-16">
-              <div className={labelClass}>{field.label}</div>
-              {renderAnswer(field)}
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-
-  renderInner() {
-    if (this.state.job == null) return null;
-    const { customFields } = this.state.job;
-    const hasCustomFields = customFields && customFields.length > 0;
-
-    return (
-      <div style={{ paddingBottom: 40 }}>
-        <div className="padding-60 paddingVertical-40 bottomDivideBorder relative">
-          <Components.Text type="formTitleLarge" className="marginBottom-8">
-            {this.state.job.title || values.textSingularName}
-          </Components.Text>
-          <Components.Text type="formTitleMedium" className="marginBottom-24">
-            {values.textEntityName} #{this.state.job.jobId}
-          </Components.Text>
-          <div className="marginTop-16">
-            <div className={'fieldLabel'}>Submission date</div>
-            <div className={'fontRegular fontSize-16 text-dark marginTop-5'}>
-              {moment.utc(this.state.job.createdTime).local().format('D MMM YY')}
-            </div>
-          </div>
-          <div className="marginTop-16">
-            <div className={'fieldLabel'}>Type</div>
-            <div className={'fontRegular fontSize-16 text-dark marginTop-5'}>{this.state.job.type}</div>
-          </div>
-          <div className="marginTop-16">
-            <div className={'fieldLabel'}>Address</div>
-            <div className={'fontRegular fontSize-16 text-dark marginTop-5'}>{this.state.job.room}</div>
-          </div>
-          {hasCustomFields ? null : (
-            <div className="marginTop-16">
-              <div className={'fieldLabel'}>Description {this.state.job.image ? '- (image supplied)' : ''}</div>
-              <div className={'fontRegular fontSize-16 text-dark marginTop-5'}>{this.state.job.description}</div>
-            </div>
-          )}
-        </div>
-        <div className="padding-60 paddingVertical-40 bottomDivideBorder">
-          <Components.Text type="formTitleSmall" className="marginBottom-16">
-            Contact Details
-          </Components.Text>
-          <div className="marginTop-16">
-            <div className={'fieldLabel'}>Name</div>
-            <div className={'fontRegular fontSize-16 text-dark marginTop-5'}>{this.state.job.userName}</div>
-          </div>
-          <div className="marginTop-16">
-            <div className={'fieldLabel'}>Contact number</div>
-            <div className={'fontRegular fontSize-16 text-dark marginTop-5'}>
-              {_.isEmpty(this.state.job.phone) ? 'No phone provided' : this.state.job.phone}
-            </div>
-          </div>
-          {hasCustomFields ? null : (
-            <div>
-              <div className="marginTop-16">
-                <div className={'fieldLabel'}>Should person be home?</div>
-                <div className={'fontRegular fontSize-16 text-dark marginTop-5'}>{this.state.job.isHome ? 'Yes' : 'No'}</div>
-              </div>
-              {this.state.job.isHome && this.state.job.homeText && (
-                <div className="marginTop-16">
-                  <div className={'fieldLabel'}>When</div>
-                  <div className={'fontRegular fontSize-16 text-dark marginTop-5'}>{this.state.job.homeText}</div>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-        {hasCustomFields ? null : this.renderImages()}
-        {hasCustomFields ? this.renderCustomFields() : null}
-        {this.renderCommentSection()}
-      </div>
-    );
-  }
-
-  renderHistoryEntry(e, i) {
-    const { job } = this.state;
-    const entryToUse = e || {
-      timestamp: job.createdTime,
-      status: 'Unassigned',
-      user: {
-        displayName: job.userName,
-        id: job.userID,
-        profilePic: job.userProfilePic,
-      },
-    };
-    const statusType = this.getStatusType(entryToUse.status);
-    return (
-      <div className="ticketHistoryEntry" key={i}>
-        <p className="ticketHistoryEntry_timestamp">{moment.utc(entryToUse.timestamp).local().format('D MMM YYYY h:mma')}</p>
-        <div className="statusLabel statusLabel-large statusLabel-full" style={{ backgroundColor: statusType.color }}>
-          <span className="statusLabel_text">
-            {e ? `${entryToUse.user.displayName} marked as ${statusType.text}` : `${values.textEntityName} opened`}
-          </span>
-        </div>
-      </div>
-    );
-  }
-
-  renderNote(note, index) {
-    return (
-      <div className="ticketHistoryEntry" key={index}>
-        <p className="ticketHistoryEntry_timestamp">{moment.utc(note.Timestamp).local().format('D MMM YYYY h:mma')}</p>
-        <div className="statusLabel statusLabel-large statusLabel-full" style={{ backgroundColor: '#6e79c5' }}>
-          <span className="statusLabel_text">Staff Notes</span>
-        </div>
-        <div className="maintenanceNote">
-          <div className="maintenanceNote_top">
-            {this.props.auth && this.props.auth.user && this.props.auth.user.Id === note.User.id && (
-              <Components.SVGIcon
-                colour={Colours.COLOUR_DUSK_LIGHT}
-                icon="more15"
-                className="maintenanceNote_moreIcon"
-                onClick={() => this.onOpenNoteMenu(index)}
-              />
-            )}
-            <p className="maintenanceNote_name">{note.User.displayName}</p>
-            {this.state.noteMenuOpen === index && (
-              <Components.MoreMenu
-                options={[
-                  {
-                    key: 'edit',
-                    text: 'Edit',
-                    onPress: () => this.onOpenEditNote(note),
-                  },
-                  {
-                    key: 'delete',
-                    text: 'Delete',
-                    onPress: () => this.onDeleteNote(note),
-                  },
-                ]}
-              />
-            )}
-          </div>
-          <p className="maintenanceNote_text">{Helper.toParagraphed(note.Note)}</p>
-          {note.Attachments.map((a, i) => this.renderAttachment(a, i))}
-          {note.Images && note.Images.length > 0 ? this.renderImageGrid(note.Images, IMAGE_SIZE_NOTE) : null}
-        </div>
-      </div>
-    );
-  }
-
-  renderAssignment() {
-    const { job } = this.state;
-    if (!job) return null;
-
-    return (
-      <div className="padding-32 paddingVertical-40 bottomDivideBorder relative">
-        <div className="newTopBar clearfix flex flex-reverse">
-          {this.renderAssignButton()}
-          <Components.Text type="formTitleSmall" className="flex-1">
-            Assignment
-          </Components.Text>
-        </div>
-        <div>
-          <div className="marginTop-16">
-            <div className={'fieldLabel'}>Assigned to</div>
-            <div className={'fontRegular fontSize-16 text-dark marginTop-5'}>
-              {job.Assignee ? <Components.UserListing user={job.Assignee} /> : 'Unassigned'}
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  renderAssignmentEntry(e, i) {
-    return (
-      <div className="ticketHistoryEntry" key={i}>
-        <p className="ticketHistoryEntry_timestamp">{moment.utc(e.timestamp).local().format('D MMM YYYY h:mma')}</p>
-        <div className="statusLabel statusLabel-large statusLabel-full" style={{ backgroundColor: Colours.COLOUR_DUSK }}>
-          <span className="statusLabel_text">
-            {e.user.displayName} assigned the {values.textSingularName} to {e.assignedUser ? e.assignedUser.displayName : 'Unassigned'}
-          </span>
-        </div>
-      </div>
-    );
-  }
-
-  renderExternalSyncEntry(e, i) {
-    const isSuccess = e.EntryType === 'ExternalIDSet';
-    const backgroundColor = isSuccess ? Colours.COLOUR_GREEN : Colours.COLOUR_RED; // Green for success, red for failure
-
-    return (
-      <div className="ticketHistoryEntry" key={i}>
-        <p className="ticketHistoryEntry_timestamp">{moment.utc(e.timestamp).local().format('D MMM YYYY h:mma')}</p>
-        <div className="statusLabel statusLabel-large statusLabel-full" style={{ backgroundColor }}>
-          <span className="statusLabel_text">
-            {isSuccess
-              ? `Synced to ${e.systemType || 'external system'}${e.externalId ? ` (ID: ${e.externalId})` : ''}`
-              : `Failed to sync to ${e.systemType || 'external system'}${e.error ? `: ${e.error}` : ''}`}
-          </span>
-        </div>
-      </div>
-    );
-  }
-
-  renderPriority() {
-    const { auth } = this.props;
-    if (!Session.validateAccess(auth.site, values.permissionMaintenanceTracking, auth)) return null;
-
-    return (
-      <div className="padding-32 paddingVertical-40 bottomDivideBorder relative">
-        <div className="newTopBar clearfix flex flex-reverse">
-          {this.renderPriorityLabel()}
-          <Components.Text type="formTitleSmall" className="flex-1">
-            Priority
-          </Components.Text>
-        </div>
-      </div>
-    );
-  }
-
-  hasSyncFailureWithoutSuccess() {
-    const { job } = this.state;
-    if (!job || !job.history) return false;
-
-    const history = job.history || [];
-    const hasSuccess = history.some((entry) => entry.EntryType === 'ExternalIDSet');
-    const hasFailure = history.some((entry) => entry.EntryType === 'ExternalIDSetFailed');
-
-    return hasFailure && !hasSuccess;
-  }
-
-  renderRetrySyncButton() {
-    const { auth } = this.props;
-    const { retryingSync, retrySyncInitiated } = this.state;
-
-    // Only show for users with maintenance tracking permission
-    if (!Session.validateAccess(auth.site, values.permissionMaintenanceTracking, auth)) return null;
-
-    // Only show if there's a failure without success and retry hasn't been initiated
-    if (!this.hasSyncFailureWithoutSuccess() || retrySyncInitiated) return null;
-
-    // Show spinner while retrying
-    if (retryingSync) {
-      return <FontAwesome style={{ fontSize: 20, color: Colours.COLOUR_DUSK_LIGHT, marginLeft: 8 }} name="spinner fa-pulse fa-fw" />;
-    }
-
-    return (
-      <div className="statusLabel pointer" onClick={this.onRetrySync} style={{ backgroundColor: Colours.COLOUR_RED, marginLeft: 8 }}>
-        <span className="statusLabel_text">Retry Sync</span>
-      </div>
-    );
-  }
-
-  renderExternalSyncStatus() {
-    const { retrySyncError, retrySyncInitiated } = this.state;
-
-    // Show error message if retry failed
-    if (retrySyncError) {
-      return (
-        <Components.Text type="body">
-          <FontAwesome className="userStatusIcon" name="times-circle" style={{ color: Colours.COLOUR_RED }} /> {retrySyncError}
-        </Components.Text>
-      );
-    }
-
-    // Show success message if retry was initiated
-    if (retrySyncInitiated) {
-      return (
-        <Components.Text type="body">
-          <FontAwesome className="userStatusIcon" name="check-circle" style={{ color: Colours.COLOUR_GREEN }} /> Sync retry initiated. Check
-          back shortly for results.
-        </Components.Text>
-      );
-    }
-
-    // Show failure message with instruction
-    if (this.hasSyncFailureWithoutSuccess()) {
-      return (
-        <Components.Text type="body">
-          <FontAwesome className="userStatusIcon" name="times-circle" style={{ color: Colours.COLOUR_RED }} /> External sync failed. Use the
-          retry button to attempt again.
-        </Components.Text>
-      );
-    }
-
-    return null;
-  }
-
-  renderExternalSync() {
-    const { externalSync, loadingExternalSync } = this.state;
-
-    // Check if we should show this section at all
-    const hasExternalSyncData = externalSync && !loadingExternalSync;
-    const hasSyncFailure = this.hasSyncFailureWithoutSuccess();
-
-    // Show section if we have sync data OR if there's a failure that can be retried
-    if (!hasExternalSyncData && !hasSyncFailure) return null;
-
-    return (
-      <div className="padding-32 paddingVertical-40 bottomDivideBorder relative">
-        <div className="newTopBar clearfix flex flex-reverse">
-          {this.renderRetrySyncButton()}
-          <Components.Text type="formTitleSmall" className="flex-1">
-            External Sync
-          </Components.Text>
-        </div>
-        <div className="marginTop-16">
-          {hasExternalSyncData ? (
-            <>
-              {externalSync.systemType && (
-                <Components.Text type="body" className="marginBottom-8">
-                  <strong>System:</strong> {externalSync.systemType}
-                </Components.Text>
-              )}
-              {externalSync.externalId && (
-                <Components.Text type="body" className="marginBottom-8">
-                  <strong>External ID:</strong> {externalSync.externalId}
-                </Components.Text>
-              )}
-              {externalSync.syncedAt && (
-                <Components.Text type="body" className="marginBottom-8">
-                  <strong>Synced:</strong> {moment.utc(externalSync.syncedAt).local().format('D MMM YYYY h:mma')}
-                </Components.Text>
-              )}
-            </>
-          ) : (
-            this.renderExternalSyncStatus()
-          )}
-        </div>
-      </div>
-    );
-  }
-
-  renderOverview() {
-    const { job } = this.state;
-    if (!job || !job.history) return null;
-
-    const source = _.sortBy(
-      [
-        ...job.history.map((e) => {
-          return { ...e, EntryType: e.EntryType || 'status' };
-        }),
-        ...(job.Notes || []).map((e) => {
-          return { ...e, timestamp: e.Timestamp, EntryType: 'note' };
-        }),
-      ],
-      'timestamp',
-    );
-
-    return (
-      <div className="padding-32 paddingVertical-40 bottomDivideBorder relative">
-        <div className="newTopBar clearfix flex flex-reverse">
-          {this.renderNotesButton()}
-          {this.renderStatusLabel()}
-          <Components.Text type="formTitleSmall" className="flex-1">
-            Status History
-          </Components.Text>
-        </div>
-        {this.renderHistoryEntry(null, -1)}
-        {_.map(source, (e, i) => {
-          switch (e.EntryType) {
-            case 'status':
-              return this.renderHistoryEntry(e, i);
-            case 'note':
-              return this.renderNote(e, i);
-            case 'assignment':
-              return this.renderAssignmentEntry(e, i);
-            case 'ExternalIDSet':
-            case 'ExternalIDSetFailed':
-              return this.renderExternalSyncEntry(e, i);
-            default:
-              break;
-          }
-        })}
-      </div>
-    );
-  }
-
-  renderButtons() {
-    return (
-      <div>
-        <Components.Button
-          inline
-          buttonType="tertiary"
-          onClick={() => {
-            window.history.back();
-          }}
-          isActive
-          style={{ marginRight: 16 }}
-        >
-          Back
-        </Components.Button>
-        {Session.validateAccess(this.props.auth.site, values.permissionMaintenanceTracking, this.props.auth) &&
-          !_.isEmpty(this.state.job) && (
-            <Link to={`${values.routeAddRequest}/${this.state.jobId}`}>
-              <Components.Button inline style={{ marginRight: 25 }} buttonType="outlined" isActive onClick={this.editJob}>
-                Edit Details
-              </Components.Button>
-            </Link>
-          )}
-      </div>
-    );
-  }
-
-  renderAttachment(attachment, index, onRemove) {
-    if (!attachment) return null;
-
-    return (
-      <Components.Attachment
-        key={index}
-        uploading={attachment.Uploading}
-        source={attachment.Source}
-        title={attachment.Title}
-        onRemove={onRemove ? () => onRemove(attachment) : undefined}
-      />
-    );
-  }
-
-  renderAddNotePopup() {
-    if (!this.state.addNoteOpen) return null;
-
-    if (this.state.submittingNote) {
-      return (
-        <Components.Popup title="Saving Note" maxWidth={600} hasPadding>
-          <div className="flex flex-center-row">
-            <FontAwesome className="spinner" name="spinner fa-pulse fa-fw" />
-          </div>
-        </Components.Popup>
-      );
-    }
-
-    return (
-      <Components.Popup
-        title={`${this.state.editingNote ? 'Edit' : 'Add'} Note`}
-        onClose={this.onCloseAddNote}
-        maxWidth={600}
-        hasPadding
-        buttons={[
-          {
-            type: 'primary',
-            onClick: this.onConfirmAddNote,
-            isActive: this.isReadyToSaveNote(),
-            text: 'Save',
-          },
-          {
-            type: 'tertiary',
-            onClick: this.onCloseAddNote,
-            isActive: true,
-            text: 'Cancel',
-          },
-        ]}
-      >
-        <Components.GenericInput
-          id="noteInput"
-          type="textarea"
-          componentClass="textarea"
-          value={this.state.noteInput}
-          placeholder="Enter note"
-          onChange={(e) => this.onHandleChange(e)}
-          inputStyle={{
-            width: 400,
-          }}
-        />
-        <Components.Text type="h5">Attachments</Components.Text>
-        {this.state.noteAttachments.map((a, i) => this.renderAttachment(a, i, this.onRemoveAttachment))}
-        <input
-          ref={(input) => (this.attachmentInput = input)}
-          id="attachmentInput"
-          type="file"
-          className="fileInput"
-          onChange={(e) => this.onHandlePDFFileChange(e)}
-          accept="application/pdf"
-        />
-        <div
-          className="iconTextButton marginBottom-16"
-          onClick={() => {
-            this.attachmentInput.click();
-          }}
-        >
-          <FontAwesome className="iconTextButton_icon" name="paperclip" />
-          <p className="iconTextButton_text">Add Attachment</p>
-        </div>
-        <Components.ImageInput
-          ref={(ref) => {
-            this.imageInput = ref;
-          }}
-          multiple
-          refreshCallback={(images) => {
-            this.setState({ noteImages: images });
-          }}
-        />
-      </Components.Popup>
-    );
-  }
-
-  renderUsers() {
-    let content = null;
-    if (this.state.confirmingAssignee) {
-      content = (
-        <div className="flex flex-center-row">
-          <FontAwesome className="spinner" name="spinner fa-pulse fa-fw" />
-        </div>
-      );
-    } else if (this.state.selectedAssignee) {
-      content = (
-        <div>
-          <Components.UserListing
-            key={this.state.selectedAssignee.id}
-            user={this.state.selectedAssignee}
-            rightContent={
-              <Components.SVGIcon
-                className="removeIcon"
-                icon="close"
-                onClick={() => {
-                  this.onSelectAssignee();
-                }}
-                colour={Colours.COLOUR_DUSK}
-              />
-            }
-          />
-        </div>
-      );
-    } else {
-      content = (
-        <div>
-          <Components.GenericInput
-            id="userSearch"
-            type="text"
-            // label="Search"
-            placeholder="Search name"
-            value={this.state.userSearch}
-            onChange={(e) => this.onHandleChange(e)}
-            alwaysShowLabel
-          />
-          {_.sortBy(this.state.assignees, (u) => u.displayName.toUpperCase())
-            .filter((u) => {
-              if (_.isEmpty(this.state.userSearch)) return true;
-              return u.displayName.toUpperCase().indexOf(this.state.userSearch.toUpperCase()) > -1;
-            })
-            .map((user) => {
-              return (
-                <Components.UserListing
-                  key={user.id}
-                  user={user}
-                  onClick={() => {
-                    this.onSelectAssignee(user);
-                  }}
-                />
-              );
-            })}
-        </div>
-      );
-    }
-    return (
-      <div className="genericInputContainer">
-        <Components.Text type="formLabel">Select User</Components.Text>
-        {content}
-      </div>
-    );
-  }
-
-  renderUserSelectionPopup() {
-    if (!this.state.showingAssigneeSelector) return null;
-    return (
-      <Components.Popup
-        title="Assign Job"
-        onClose={this.onCloseSelectAssignee}
-        maxWidth={600}
-        hasPadding
-        buttons={[
-          {
-            type: 'primary',
-            onClick: this.onConfirmAssignee,
-            isActive: !!this.state.selectedAssignee,
-            text: 'Confirm',
-          },
-          {
-            type: 'tertiary',
-            onClick: this.onCloseSelectAssignee,
-            isActive: true,
-            text: 'Cancel',
-          },
-        ]}
-      >
-        {this.renderUsers()}
-      </Components.Popup>
-    );
-  }
-
-  render() {
-    return (
-      <Components.OverlayPage>
-        {this.renderAddNotePopup()}
-        {this.renderUserSelectionPopup()}
-        <Components.OverlayPageContents>
-          <Components.OverlayPageSection className="pageSectionWrapper--fixedPopupSize">{this.renderInner()}</Components.OverlayPageSection>
-          <Components.OverlayPageSection className="pageSectionWrapper--newPopupSide pageSectionWrapper--newPopupSide-fixedWidth">
-            {this.renderAssignment()}
-            {this.renderPriority()}
-            {this.renderExternalSync()}
-            {this.renderOverview()}
-          </Components.OverlayPageSection>
-        </Components.OverlayPageContents>
-        <Components.OverlayPageBottomButtons>{this.renderButtons()}</Components.OverlayPageBottomButtons>
-      </Components.OverlayPage>
-    );
-  }
+	constructor(props) {
+		super(props);
+		this.state = {
+			jobId: Helper.safeReadParams(props, "jobId")
+				? props.match.params.jobId
+				: null,
+			job: null,
+			showingSelector: false,
+			updating: false,
+			comments: [],
+			commentInput: "",
+			loadingComments: false,
+			priorityChangerOpen: false,
+			statusChangerOpen: false,
+			addNoteOpen: false,
+			noteAttachments: [],
+			noteInput: "",
+			noteImages: [],
+			assignees: [],
+			externalSync: null,
+			loadingExternalSync: false,
+			retryingSync: false,
+			retrySyncError: null,
+			retrySyncInitiated: false,
+		};
+	}
+
+	UNSAFE_componentWillReceiveProps(nextProps) {
+		Session.checkLoggedIn(this, this.props.auth);
+	}
+
+	componentDidMount() {
+		this.props.jobStatusesUpdate(this.props.auth.site);
+		if (this.state.jobId) {
+			this.getJob();
+			this.getComments();
+			this.getAssignees();
+			this.getExternalSync();
+		}
+	}
+
+	getJob = async () => {
+		try {
+			const res = await maintenanceActions.getJob(
+				this.props.auth.site,
+				this.state.jobId,
+			);
+			this.setState({ updating: false });
+			res.data.location = res.data.site;
+			this.setJob(res.data);
+		} catch (error) {
+			console.error("getJob", error);
+		}
+	};
+
+	getAssignees = async () => {
+		try {
+			const res = await maintenanceActions.getAssignees(this.props.auth.site);
+			this.setState({ assignees: res.data.Users });
+		} catch (error) {
+			console.error("getAssignees", error);
+		}
+	};
+
+	getExternalSync = async () => {
+		try {
+			this.setState({ loadingExternalSync: true });
+			const res = await maintenanceActions.getExternalSync(this.state.jobId);
+			this.setState({ externalSync: res.data, loadingExternalSync: false });
+		} catch (error) {
+			// 404 is expected if no sync - don't show error
+			if (error && error.response && error.response.status !== 404) {
+				console.error("getExternalSync", error);
+			}
+			this.setState({ loadingExternalSync: false });
+		}
+	};
+
+	onRetrySync = async () => {
+		const { job } = this.state;
+		if (!job || this.state.retryingSync) return;
+
+		this.setState({ retryingSync: true, retrySyncError: null });
+
+		try {
+			await maintenanceActions.retrySync(job.id);
+			// Refresh job data to get updated history
+			await this.getJob();
+			this.setState({ retryingSync: false, retrySyncInitiated: true });
+		} catch (error) {
+			console.error("onRetrySync", error);
+			const errorMessage =
+				(error &&
+					error.response &&
+					error.response.data &&
+					error.response.data.error) ||
+				"Failed to retry sync. Please try again.";
+			this.setState({ retryingSync: false, retrySyncError: errorMessage });
+		}
+	};
+
+	getStatusType = (status) => {
+		const { statusTypes } = this.props;
+		let statusType = statusTypes.find((s) => s.text === status);
+		if (!statusType) {
+			const defaultStatus = statusTypes.find(
+				(s) => s.category === STATUS_NOT_ACTIONED,
+			);
+			statusType = { ...defaultStatus, text: status };
+		}
+		return statusType;
+	};
+
+	setJob = (job) => {
+		if (_.isEmpty(job.lastActivity)) {
+			job.lastActivity = "-- --";
+			job.noActivity = true;
+		}
+		if (_.isEmpty(job.status)) {
+			job.status = "Unassigned";
+			job.notStatus = true;
+		}
+		if (_.isEmpty(job.audience)) {
+			job.audience = [{ displayName: "Unassigned", isEmpty: true }];
+		}
+		let needToMarkSeen = false;
+		if (!job.seen) {
+			job.seen = true;
+			needToMarkSeen = true;
+		}
+		this.setState({ job }, () => {
+			if (needToMarkSeen) this.markSeen();
+		});
+		this.props.jobsLoaded([job]);
+	};
+
+	editJob = () => {};
+
+	isReadyToSaveNote = () => {
+		const { noteAttachments, noteInput, noteImages } = this.state;
+		if (_.some(noteAttachments, (n) => n.Uploading)) return false;
+		return (
+			!_.isEmpty(noteInput) ||
+			!_.isEmpty(noteAttachments) ||
+			!_.isEmpty(noteImages)
+		);
+	};
+
+	onOpenAddNote = () => {
+		this.setState({ addNoteOpen: true, editingNote: null });
+	};
+
+	onCloseAddNote = () => {
+		const newState = { addNoteOpen: false, editingNote: null };
+		if (!!this.state.editingNote) {
+			newState.noteInput = "";
+			newState.noteAttachments = [];
+			newState.noteImages = [];
+		}
+		this.setState(newState);
+	};
+
+	onOpenNoteMenu = (index) => {
+		if (this.state.noteMenuOpen === index) {
+			this.setState({ noteMenuOpen: null });
+		} else {
+			this.setState({ noteMenuOpen: index });
+		}
+	};
+
+	onHandlePDFFileChange = (event) => {
+		const file = event.target.files[0];
+		if (!file || this.state.uploadingNoteAttachment) return;
+		const noteAttachments = [...this.state.noteAttachments];
+		const newAttachment = {
+			Uploading: true,
+			Title: file.name,
+		};
+		noteAttachments.push(newAttachment);
+		this.setState({
+			noteAttachments,
+		});
+		Apis.fileActions
+			.uploadMediaAsync(file, file.name)
+			.then((fileRes) => {
+				newAttachment.Source = fileRes;
+				newAttachment.Uploading = false;
+				this.setState({
+					noteAttachments: [...this.state.noteAttachments],
+				});
+			})
+			.catch((uploadErrorRes) => {
+				console.log(uploadErrorRes);
+				newAttachment.Uploading = false;
+				this.setState({
+					noteAttachments: [...this.state.noteAttachments],
+				});
+			});
+		event.target.value = "";
+	};
+
+	onRemoveAttachment = (a) => {
+		const index = this.state.noteAttachments.indexOf(a);
+		if (index > -1) {
+			const newAttachments = [...this.state.noteAttachments];
+			newAttachments.splice(index, 1);
+			this.setState({
+				noteAttachments: newAttachments,
+			});
+		}
+	};
+
+	onShowSelectAssignee = () => {
+		this.setState({
+			showingAssigneeSelector: true,
+		});
+	};
+
+	onCloseSelectAssignee = () => {
+		this.setState({
+			showingAssigneeSelector: false,
+		});
+	};
+
+	onSelectAssignee = (user) => {
+		this.setState({
+			selectedAssignee: user,
+		});
+	};
+
+	onConfirmAssignee = async () => {
+		this.setState({
+			confirmingAssignee: true,
+		});
+		try {
+			if (this.state.selectedAssignee) {
+				await this.onAssignUser(this.state.selectedAssignee.id);
+			}
+			this.onCloseSelectAssignee();
+		} catch (error) {
+			console.error("onConfirmAssignee", error);
+		}
+		this.setState({
+			confirmingAssignee: false,
+		});
+	};
+
+	// Method to handle user assignment
+	onAssignUser = async (userId) => {
+		try {
+			const res = await maintenanceActions.assignJob(this.state.jobId, userId);
+			this.getJob();
+		} catch (err) {
+			console.error("onAssignUser", err);
+		}
+	};
+
+	onConfirmAddNote = async () => {
+		if (!this.isReadyToSaveNote()) return;
+
+		try {
+			this.setState({ submittingNote: true });
+			const res = await (this.state.editingNote
+				? maintenanceActions.editNote(
+						this.state.jobId,
+						this.state.editingNote,
+						this.state.noteInput,
+						this.state.noteAttachments.map((a) => {
+							return {
+								Title: a.Title,
+								Source: a.Source,
+							};
+						}),
+						this.state.noteImages,
+					)
+				: maintenanceActions.addNote(
+						this.state.jobId,
+						this.state.noteInput,
+						this.state.noteAttachments.map((a) => {
+							return {
+								Title: a.Title,
+								Source: a.Source,
+							};
+						}),
+						this.state.noteImages,
+					));
+			this.setState(
+				{
+					job: res.data.job,
+					submittingNote: false,
+					addNoteOpen: false,
+					noteInput: "",
+					noteAttachments: [],
+					noteImages: [],
+					editingNote: null,
+				},
+				() => {
+					this.props.jobsLoaded([this.state.job]);
+				},
+			);
+		} catch (err) {
+			console.error("onConfirmAddNote", err);
+		}
+	};
+
+	onDeleteNote = (n) => {
+		if (!window.confirm(values.textAreYouSureYouWantToDeleteNote)) {
+			this.setState({ noteMenuOpen: null });
+			return;
+		}
+
+		maintenanceActions.deleteNote(this.state.jobId, n.Id);
+		const newNotes = _.filter(this.state.job.Notes, (note) => note.Id !== n.Id);
+		const newJob = { ...this.state.job };
+		newJob.Notes = newNotes;
+		this.setState({ job: newJob, noteMenuOpen: null });
+	};
+
+	onOpenEditNote = (n) => {
+		this.setState(
+			{
+				noteAttachments: n.Attachments || [],
+				noteImages: n.Images || [],
+				noteInput: n.Note || "",
+				addNoteOpen: true,
+				editingNote: n.Id,
+				noteMenuOpen: null,
+			},
+			this.checkSetImage,
+		);
+	};
+
+	markSeen = () => {
+		const { job } = this.state;
+		const { auth } = this.props;
+		// Must have maintenance permission and not the requester
+		if (
+			!Session.validateAccess(
+				auth.site,
+				values.permissionMaintenanceTracking,
+				auth,
+			)
+		)
+			return;
+		if (auth.user.Id === job.userID) return;
+
+		this.setState({ updating: true }, async () => {
+			try {
+				const update = {
+					id: job.id,
+					seen: true,
+					status: job.status || "Unassigned",
+				};
+
+				await maintenanceActions.editJob(update, auth.site);
+			} catch (error) {
+				this.setState({ updating: false });
+				console.log("markSeen error", error);
+				alert("Something went wrong with the request. Please try again.");
+			}
+		});
+	};
+
+	getComments = () => {
+		reactionActions
+			.getComments(this.state.jobId, values.commentKey, 0)
+			.then((res) => {
+				this.setState({ comments: res.data });
+			});
+	};
+
+	checkSetImage() {
+		if (this.imageInput && !_.isEmpty(this.state.noteImages)) {
+			this.imageInput.setValue(this.state.noteImages);
+		} else {
+			setTimeout(this.checkSetImage, 100);
+		}
+	}
+
+	onAddComment = async () => {
+		const { commentInput, jobId, job, comments } = this.state;
+		try {
+			this.setState({ commentInput: "" });
+			const res = await reactionActions.addComment(
+				jobId,
+				values.commentKey,
+				job.title,
+				job.site,
+				commentInput,
+			);
+			this.setState({ comments: [...comments, res.data] });
+		} catch (error) {
+			console.error("onAddComment", error);
+		}
+	};
+
+	onHandleChange = (event) => {
+		var stateChange = {};
+		stateChange[event.target.getAttribute("id")] = event.target.value;
+		this.setState(stateChange);
+	};
+
+	onTogglePriorityChanger = () => {
+		this.setState({ priorityChangerOpen: !this.state.priorityChangerOpen });
+	};
+
+	onSelectPriority = async (priority) => {
+		this.setState({
+			job: { ...this.state.job, priority },
+			priorityChangerOpen: false,
+		});
+
+		try {
+			const res = await maintenanceActions.editJobPriority(
+				this.state.job.id,
+				priority,
+			);
+			const { job } = res.data;
+			this.props.jobsLoaded([job]);
+			this.setState({ job });
+		} catch (error) {
+			console.error("onSelectPriority", error);
+		}
+	};
+
+	onToggleStatusChanger = () => {
+		this.setState({ statusChangerOpen: !this.state.statusChangerOpen });
+	};
+
+	onSelectStatus = async (status) => {
+		this.setState({
+			job: {
+				...this.state.job,
+				status: status,
+			},
+			statusChangerOpen: false,
+		});
+
+		try {
+			const res = await maintenanceActions.editJobStatus(
+				this.state.job.id,
+				status,
+			);
+			const { job } = res.data;
+			this.props.jobsLoaded([job]);
+			this.setState({ job });
+		} catch (error) {
+			console.error("onSelectStatus", error);
+		}
+	};
+
+	renderPriorityChanger() {
+		if (!this.state.priorityChangerOpen) return null;
+		return (
+			<div className="statusChanger statusChanger-priority">
+				{jobPriorityOptions.map((p) => {
+					return (
+						<div
+							key={p.name}
+							className="statusLabel"
+							onClick={() => this.onSelectPriority(p.name)}
+							style={{ backgroundColor: p.color }}
+						>
+							<span className="statusLabel_text">{p.name}</span>
+						</div>
+					);
+				})}
+			</div>
+		);
+	}
+
+	renderPriorityLabel() {
+		const { auth } = this.props;
+		if (
+			!Session.validateAccess(
+				auth.site,
+				values.permissionMaintenanceTracking,
+				auth,
+			)
+		)
+			return null;
+
+		const { job } = this.state;
+		if (!job) return null;
+
+		const selectedPriority = getJobPriority(job.priority);
+		return (
+			<div
+				className="statusLabel marginTop-5 pointer"
+				onClick={this.onTogglePriorityChanger}
+				style={{ backgroundColor: selectedPriority.color }}
+			>
+				<span className="statusLabel_text">
+					{job.priority || selectedPriority.name}
+				</span>
+				{this.renderPriorityChanger()}
+			</div>
+		);
+	}
+
+	renderStatusLabel() {
+		if (!this.state.job.status) return null;
+		const statusType = this.getStatusType(this.state.job.status);
+		const { auth } = this.props;
+		if (
+			Session.validateAccess(
+				auth.site,
+				values.permissionMaintenanceTracking,
+				auth,
+			)
+		) {
+			return (
+				<div
+					className="statusLabel pointer"
+					onClick={this.onToggleStatusChanger}
+					style={{ backgroundColor: statusType.color }}
+				>
+					<span className="statusLabel_text">{statusType.text}</span>
+					{this.renderStatusChanger()}
+				</div>
+			);
+		}
+		return (
+			<div
+				className="statusLabel"
+				style={{ backgroundColor: statusType.color }}
+			>
+				<span className="statusLabel_text">{statusType.text}</span>
+			</div>
+		);
+	}
+
+	renderNotesButton() {
+		const { auth } = this.props;
+		if (
+			!Session.validateAccess(
+				auth.site,
+				values.permissionMaintenanceTracking,
+				auth,
+			)
+		)
+			return null;
+		return (
+			<div
+				className="statusLabel pointer"
+				onClick={this.onOpenAddNote}
+				style={{
+					backgroundColor: Config.env.colourBrandingMain,
+					marginLeft: 8,
+				}}
+			>
+				<span className="statusLabel_text">Add Note</span>
+			</div>
+		);
+	}
+
+	renderAssignButton() {
+		const { auth } = this.props;
+		if (
+			!Session.validateAccess(
+				auth.site,
+				values.permissionMaintenanceTracking,
+				auth,
+			)
+		)
+			return null;
+		return (
+			<div
+				className="statusLabel pointer"
+				onClick={this.onShowSelectAssignee}
+				style={{
+					backgroundColor: Config.env.colourBrandingMain,
+					marginLeft: 8,
+				}}
+			>
+				<span className="statusLabel_text">Assign</span>
+			</div>
+		);
+	}
+
+	renderStatusChanger() {
+		if (!this.state.statusChangerOpen) return null;
+		const { statusTypes } = this.props;
+
+		return (
+			<div className="statusChanger statusChanger-maintenance">
+				{statusTypes.map((status) => {
+					return (
+						<div
+							key={status.text}
+							className="statusLabel"
+							onClick={() => this.onSelectStatus(status.text)}
+							style={{ backgroundColor: status.color }}
+						>
+							<span className="statusLabel_text">{status.text}</span>
+						</div>
+					);
+				})}
+			</div>
+		);
+	}
+
+	renderComment(c) {
+		return <Components.Comment key={c.Id} comment={c} />;
+		return (
+			<div key={c.Id} className="comment">
+				<p className="comment_text">{Helper.toParagraphed(c.Comment)}</p>
+				<div className="comment_bottom">
+					<Components.ProfilePic
+						className="comment_profilePic"
+						size={25}
+						image={c.User.profilePic}
+					/>
+					<p className="comment_name">{c.User.displayName}</p>
+					<p className="comment_time">
+						{moment.utc(c.Timestamp).local().format("D MMM YYYY • h:mma")}
+					</p>
+				</div>
+			</div>
+		);
+	}
+
+	renderCommentSection() {
+		if (this.state.loadingComments) return null;
+
+		return (
+			<div className="padding-60 paddingLeft-20">
+				<div className="newTopBar paddingLeft-40">
+					<Components.Text type="formTitleSmall" className="marginBottom-16">
+						Comments
+					</Components.Text>
+					<div className="commentSection">
+						{this.state.comments.map((c) => this.renderComment(c))}
+					</div>
+					<div className="commentReply">
+						<div
+							className={`commentReply_button${!_.isEmpty(this.state.commentInput) ? " commentReply_button-active" : ""}`}
+							onClick={this.onAddComment}
+						>
+							<FontAwesome className="commentReply_icon" name="paper-plane-o" />
+						</div>
+						<Textarea
+							id="commentInput"
+							placeholder="Reply here..."
+							type="text"
+							className="commentReply_input"
+							value={this.state.commentInput}
+							onChange={(e) => this.onHandleChange(e)}
+						/>
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	renderImageGrid(images, size = undefined) {
+		const imagesToUse = images && images.length > 0 ? images : [];
+		return (
+			<div className="imageGrid">
+				{imagesToUse.map((image, i) => {
+					return (
+						<a href={image} target="_blank" rel="noopener noreferrer" key={i}>
+							<div
+								className="imageGrid_image"
+								style={{
+									backgroundImage: `url('${Helper.get1400(image)}')`,
+									width: size,
+									height: size,
+								}}
+							></div>
+						</a>
+					);
+				})}
+			</div>
+		);
+	}
+
+	renderDocumentGrid(documents) {
+		const documentsToUse = documents && documents.length > 0 ? documents : [];
+		return (
+			<div className="documentGrid">
+				{documentsToUse.map((doc, index) => (
+					<Components.Attachment
+						key={index}
+						uploading={doc.uploading}
+						source={doc.url}
+						title={doc.name}
+					/>
+				))}
+			</div>
+		);
+	}
+
+	renderImages() {
+		if (_.isEmpty(this.state.job.image) && _.isEmpty(this.state.job.images))
+			return null;
+
+		const imagesToUse = _.isEmpty(this.state.job.image)
+			? this.state.job.images
+			: [this.state.job.image];
+		return (
+			<div className="padding-60 paddingVertical-40 bottomDivideBorder">
+				<Components.Text type="formTitleSmall" className="marginBottom-16">
+					Images
+				</Components.Text>
+				{this.renderImageGrid(imagesToUse)}
+			</div>
+		);
+	}
+
+	renderCustomFields() {
+		const { job } = this.state;
+		const { customFields } = job;
+
+		const labelClass = "fieldLabel";
+		const answerClass = "fontRegular fontSize-16 text-dark marginTop-5";
+
+		const renderAnswer = (field) => {
+			switch (field.type) {
+				case "date":
+					return (
+						<div className={answerClass}>
+							{field.answer
+								? moment(field.answer, "YYYY-MM-DD").format("DD-MMM-YYYY")
+								: ""}
+						</div>
+					);
+				case "time":
+					return (
+						<div className={answerClass}>
+							{field.answer
+								? moment(field.answer, "HH:mm").format("h:mm a")
+								: ""}
+						</div>
+					);
+				case "yn":
+					return (
+						<div className={answerClass}>{field.answer ? "Yes" : "No"}</div>
+					);
+				case "checkbox":
+					return (
+						<div className={answerClass}>
+							{field.answer && Array.isArray(field.answer)
+								? field.answer.join(", ")
+								: ""}
+						</div>
+					);
+				case "image":
+					return this.renderImageGrid(field.answer);
+				case "document":
+					return this.renderDocumentGrid(field.answer);
+				default:
+					return <div className={answerClass}>{field.answer}</div>;
+			}
+		};
+
+		return (
+			<div className="padding-60 paddingVertical-40 bottomDivideBorder">
+				{customFields.map((field, index) => {
+					if (["staticTitle", "staticText"].includes(field.type)) return null;
+					if (
+						_.isNil(field.answer) ||
+						field.answer === "" ||
+						field.answer.length === 0
+					)
+						return null;
+					return (
+						<div key={index} className="marginTop-16">
+							<div className={labelClass}>{field.label}</div>
+							{renderAnswer(field)}
+						</div>
+					);
+				})}
+			</div>
+		);
+	}
+
+	renderInner() {
+		if (this.state.job == null) return null;
+		const { customFields } = this.state.job;
+		const hasCustomFields = customFields && customFields.length > 0;
+
+		return (
+			<div style={{ paddingBottom: 40 }}>
+				<div className="padding-60 paddingVertical-40 bottomDivideBorder relative">
+					<Components.Text type="formTitleLarge" className="marginBottom-8">
+						{this.state.job.title || values.textSingularName}
+					</Components.Text>
+					<Components.Text type="formTitleMedium" className="marginBottom-24">
+						{values.textEntityName} #{this.state.job.jobId}
+					</Components.Text>
+					<div className="marginTop-16">
+						<div className={"fieldLabel"}>Submission date</div>
+						<div className={"fontRegular fontSize-16 text-dark marginTop-5"}>
+							{moment
+								.utc(this.state.job.createdTime)
+								.local()
+								.format("D MMM YY")}
+						</div>
+					</div>
+					<div className="marginTop-16">
+						<div className={"fieldLabel"}>Type</div>
+						<div className={"fontRegular fontSize-16 text-dark marginTop-5"}>
+							{this.state.job.type}
+						</div>
+					</div>
+					<div className="marginTop-16">
+						<div className={"fieldLabel"}>Address</div>
+						<div className={"fontRegular fontSize-16 text-dark marginTop-5"}>
+							{this.state.job.room}
+						</div>
+					</div>
+					{hasCustomFields ? null : (
+						<div className="marginTop-16">
+							<div className={"fieldLabel"}>
+								Description {this.state.job.image ? "- (image supplied)" : ""}
+							</div>
+							<div className={"fontRegular fontSize-16 text-dark marginTop-5"}>
+								{this.state.job.description}
+							</div>
+						</div>
+					)}
+				</div>
+				<div className="padding-60 paddingVertical-40 bottomDivideBorder">
+					<Components.Text type="formTitleSmall" className="marginBottom-16">
+						Contact Details
+					</Components.Text>
+					<div className="marginTop-16">
+						<div className={"fieldLabel"}>Name</div>
+						<div className={"fontRegular fontSize-16 text-dark marginTop-5"}>
+							{this.state.job.userName}
+						</div>
+					</div>
+					<div className="marginTop-16">
+						<div className={"fieldLabel"}>Contact number</div>
+						<div className={"fontRegular fontSize-16 text-dark marginTop-5"}>
+							{_.isEmpty(this.state.job.phone)
+								? "No phone provided"
+								: this.state.job.phone}
+						</div>
+					</div>
+					{hasCustomFields ? null : (
+						<div>
+							<div className="marginTop-16">
+								<div className={"fieldLabel"}>Should person be home?</div>
+								<div
+									className={"fontRegular fontSize-16 text-dark marginTop-5"}
+								>
+									{this.state.job.isHome ? "Yes" : "No"}
+								</div>
+							</div>
+							{this.state.job.isHome && this.state.job.homeText && (
+								<div className="marginTop-16">
+									<div className={"fieldLabel"}>When</div>
+									<div
+										className={"fontRegular fontSize-16 text-dark marginTop-5"}
+									>
+										{this.state.job.homeText}
+									</div>
+								</div>
+							)}
+						</div>
+					)}
+				</div>
+				{hasCustomFields ? null : this.renderImages()}
+				{hasCustomFields ? this.renderCustomFields() : null}
+				{this.renderCommentSection()}
+			</div>
+		);
+	}
+
+	renderHistoryEntry(e, i) {
+		const { job } = this.state;
+		const entryToUse = e || {
+			timestamp: job.createdTime,
+			status: "Unassigned",
+			user: {
+				displayName: job.userName,
+				id: job.userID,
+				profilePic: job.userProfilePic,
+			},
+		};
+		const statusType = this.getStatusType(entryToUse.status);
+		return (
+			<div className="ticketHistoryEntry" key={i}>
+				<p className="ticketHistoryEntry_timestamp">
+					{moment.utc(entryToUse.timestamp).local().format("D MMM YYYY h:mma")}
+				</p>
+				<div
+					className="statusLabel statusLabel-large statusLabel-full"
+					style={{ backgroundColor: statusType.color }}
+				>
+					<span className="statusLabel_text">
+						{e
+							? `${entryToUse.user.displayName} marked as ${statusType.text}`
+							: `${values.textEntityName} opened`}
+					</span>
+				</div>
+			</div>
+		);
+	}
+
+	renderNote(note, index) {
+		return (
+			<div className="ticketHistoryEntry" key={index}>
+				<p className="ticketHistoryEntry_timestamp">
+					{moment.utc(note.Timestamp).local().format("D MMM YYYY h:mma")}
+				</p>
+				<div
+					className="statusLabel statusLabel-large statusLabel-full"
+					style={{ backgroundColor: "#6e79c5" }}
+				>
+					<span className="statusLabel_text">Staff Notes</span>
+				</div>
+				<div className="maintenanceNote">
+					<div className="maintenanceNote_top">
+						{this.props.auth &&
+							this.props.auth.user &&
+							this.props.auth.user.Id === note.User.id && (
+								<Components.SVGIcon
+									colour={Colours.COLOUR_DUSK_LIGHT}
+									icon="more15"
+									className="maintenanceNote_moreIcon"
+									onClick={() => this.onOpenNoteMenu(index)}
+								/>
+							)}
+						<p className="maintenanceNote_name">{note.User.displayName}</p>
+						{this.state.noteMenuOpen === index && (
+							<Components.MoreMenu
+								options={[
+									{
+										key: "edit",
+										text: "Edit",
+										onPress: () => this.onOpenEditNote(note),
+									},
+									{
+										key: "delete",
+										text: "Delete",
+										onPress: () => this.onDeleteNote(note),
+									},
+								]}
+							/>
+						)}
+					</div>
+					<p className="maintenanceNote_text">
+						{Helper.toParagraphed(note.Note)}
+					</p>
+					{note.Attachments.map((a, i) => this.renderAttachment(a, i))}
+					{note.Images && note.Images.length > 0
+						? this.renderImageGrid(note.Images, IMAGE_SIZE_NOTE)
+						: null}
+				</div>
+			</div>
+		);
+	}
+
+	renderAssignment() {
+		const { job } = this.state;
+		if (!job) return null;
+
+		return (
+			<div className="padding-32 paddingVertical-40 bottomDivideBorder relative">
+				<div className="newTopBar clearfix flex flex-reverse">
+					{this.renderAssignButton()}
+					<Components.Text type="formTitleSmall" className="flex-1">
+						Assignment
+					</Components.Text>
+				</div>
+				<div>
+					<div className="marginTop-16">
+						<div className={"fieldLabel"}>Assigned to</div>
+						<div className={"fontRegular fontSize-16 text-dark marginTop-5"}>
+							{job.Assignee ? (
+								<Components.UserListing user={job.Assignee} />
+							) : (
+								"Unassigned"
+							)}
+						</div>
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	renderAssignmentEntry(e, i) {
+		return (
+			<div className="ticketHistoryEntry" key={i}>
+				<p className="ticketHistoryEntry_timestamp">
+					{moment.utc(e.timestamp).local().format("D MMM YYYY h:mma")}
+				</p>
+				<div
+					className="statusLabel statusLabel-large statusLabel-full"
+					style={{ backgroundColor: Colours.COLOUR_DUSK }}
+				>
+					<span className="statusLabel_text">
+						{e.user.displayName} assigned the {values.textSingularName} to{" "}
+						{e.assignedUser ? e.assignedUser.displayName : "Unassigned"}
+					</span>
+				</div>
+			</div>
+		);
+	}
+
+	renderExternalSyncEntry(e, i) {
+		const isSuccess = e.EntryType === "ExternalIDSet";
+		const backgroundColor = isSuccess
+			? Colours.COLOUR_GREEN
+			: Colours.COLOUR_RED; // Green for success, red for failure
+
+		return (
+			<div className="ticketHistoryEntry" key={i}>
+				<p className="ticketHistoryEntry_timestamp">
+					{moment.utc(e.timestamp).local().format("D MMM YYYY h:mma")}
+				</p>
+				<div
+					className="statusLabel statusLabel-large statusLabel-full"
+					style={{ backgroundColor }}
+				>
+					<span className="statusLabel_text">
+						{isSuccess
+							? `Synced to ${e.systemType || "external system"}${e.externalId ? ` (ID: ${e.externalId})` : ""}`
+							: `Failed to sync to ${e.systemType || "external system"}${e.error ? `: ${e.error}` : ""}`}
+					</span>
+				</div>
+			</div>
+		);
+	}
+
+	renderPriority() {
+		const { auth } = this.props;
+		if (
+			!Session.validateAccess(
+				auth.site,
+				values.permissionMaintenanceTracking,
+				auth,
+			)
+		)
+			return null;
+
+		return (
+			<div className="padding-32 paddingVertical-40 bottomDivideBorder relative">
+				<div className="newTopBar clearfix flex flex-reverse">
+					{this.renderPriorityLabel()}
+					<Components.Text type="formTitleSmall" className="flex-1">
+						Priority
+					</Components.Text>
+				</div>
+			</div>
+		);
+	}
+
+	hasSyncFailureWithoutSuccess() {
+		const { job } = this.state;
+		if (!job || !job.history) return false;
+
+		const history = job.history || [];
+		const hasSuccess = history.some(
+			(entry) => entry.EntryType === "ExternalIDSet",
+		);
+		const hasFailure = history.some(
+			(entry) => entry.EntryType === "ExternalIDSetFailed",
+		);
+
+		return hasFailure && !hasSuccess;
+	}
+
+	renderRetrySyncButton() {
+		const { auth } = this.props;
+		const { retryingSync, retrySyncInitiated } = this.state;
+
+		// Only show for users with maintenance tracking permission
+		if (
+			!Session.validateAccess(
+				auth.site,
+				values.permissionMaintenanceTracking,
+				auth,
+			)
+		)
+			return null;
+
+		// Only show if there's a failure without success and retry hasn't been initiated
+		if (!this.hasSyncFailureWithoutSuccess() || retrySyncInitiated) return null;
+
+		// Show spinner while retrying
+		if (retryingSync) {
+			return (
+				<FontAwesome
+					style={{
+						fontSize: 20,
+						color: Colours.COLOUR_DUSK_LIGHT,
+						marginLeft: 8,
+					}}
+					name="spinner fa-pulse fa-fw"
+				/>
+			);
+		}
+
+		return (
+			<div
+				className="statusLabel pointer"
+				onClick={this.onRetrySync}
+				style={{ backgroundColor: Colours.COLOUR_RED, marginLeft: 8 }}
+			>
+				<span className="statusLabel_text">Retry Sync</span>
+			</div>
+		);
+	}
+
+	renderExternalSyncStatus() {
+		const { retrySyncError, retrySyncInitiated } = this.state;
+
+		// Show error message if retry failed
+		if (retrySyncError) {
+			return (
+				<Components.Text type="body">
+					<FontAwesome
+						className="userStatusIcon"
+						name="times-circle"
+						style={{ color: Colours.COLOUR_RED }}
+					/>{" "}
+					{retrySyncError}
+				</Components.Text>
+			);
+		}
+
+		// Show success message if retry was initiated
+		if (retrySyncInitiated) {
+			return (
+				<Components.Text type="body">
+					<FontAwesome
+						className="userStatusIcon"
+						name="check-circle"
+						style={{ color: Colours.COLOUR_GREEN }}
+					/>{" "}
+					Sync retry initiated. Check back shortly for results.
+				</Components.Text>
+			);
+		}
+
+		// Show failure message with instruction
+		if (this.hasSyncFailureWithoutSuccess()) {
+			return (
+				<Components.Text type="body">
+					<FontAwesome
+						className="userStatusIcon"
+						name="times-circle"
+						style={{ color: Colours.COLOUR_RED }}
+					/>{" "}
+					External sync failed. Use the retry button to attempt again.
+				</Components.Text>
+			);
+		}
+
+		return null;
+	}
+
+	renderExternalSync() {
+		const { externalSync, loadingExternalSync } = this.state;
+
+		// Check if we should show this section at all
+		const hasExternalSyncData = externalSync && !loadingExternalSync;
+		const hasSyncFailure = this.hasSyncFailureWithoutSuccess();
+
+		// Show section if we have sync data OR if there's a failure that can be retried
+		if (!hasExternalSyncData && !hasSyncFailure) return null;
+
+		return (
+			<div className="padding-32 paddingVertical-40 bottomDivideBorder relative">
+				<div className="newTopBar clearfix flex flex-reverse">
+					{this.renderRetrySyncButton()}
+					<Components.Text type="formTitleSmall" className="flex-1">
+						External Sync
+					</Components.Text>
+				</div>
+				<div className="marginTop-16">
+					{hasExternalSyncData ? (
+						<>
+							{externalSync.systemType && (
+								<Components.Text type="body" className="marginBottom-8">
+									<strong>System:</strong> {externalSync.systemType}
+								</Components.Text>
+							)}
+							{externalSync.externalId && (
+								<Components.Text type="body" className="marginBottom-8">
+									<strong>External ID:</strong> {externalSync.externalId}
+								</Components.Text>
+							)}
+							{externalSync.syncedAt && (
+								<Components.Text type="body" className="marginBottom-8">
+									<strong>Synced:</strong>{" "}
+									{moment
+										.utc(externalSync.syncedAt)
+										.local()
+										.format("D MMM YYYY h:mma")}
+								</Components.Text>
+							)}
+						</>
+					) : (
+						this.renderExternalSyncStatus()
+					)}
+				</div>
+			</div>
+		);
+	}
+
+	renderOverview() {
+		const { job } = this.state;
+		if (!job || !job.history) return null;
+
+		const source = _.sortBy(
+			[
+				...job.history.map((e) => {
+					return { ...e, EntryType: e.EntryType || "status" };
+				}),
+				...(job.Notes || []).map((e) => {
+					return { ...e, timestamp: e.Timestamp, EntryType: "note" };
+				}),
+			],
+			"timestamp",
+		);
+
+		return (
+			<div className="padding-32 paddingVertical-40 bottomDivideBorder relative">
+				<div className="newTopBar clearfix flex flex-reverse">
+					{this.renderNotesButton()}
+					{this.renderStatusLabel()}
+					<Components.Text type="formTitleSmall" className="flex-1">
+						Status History
+					</Components.Text>
+				</div>
+				{this.renderHistoryEntry(null, -1)}
+				{_.map(source, (e, i) => {
+					switch (e.EntryType) {
+						case "status":
+							return this.renderHistoryEntry(e, i);
+						case "note":
+							return this.renderNote(e, i);
+						case "assignment":
+							return this.renderAssignmentEntry(e, i);
+						case "ExternalIDSet":
+						case "ExternalIDSetFailed":
+							return this.renderExternalSyncEntry(e, i);
+						default:
+							break;
+					}
+				})}
+			</div>
+		);
+	}
+
+	renderButtons() {
+		return (
+			<div>
+				<Components.Button
+					inline
+					buttonType="tertiary"
+					onClick={() => {
+						window.history.back();
+					}}
+					isActive
+					style={{ marginRight: 16 }}
+				>
+					Back
+				</Components.Button>
+				{Session.validateAccess(
+					this.props.auth.site,
+					values.permissionMaintenanceTracking,
+					this.props.auth,
+				) &&
+					!_.isEmpty(this.state.job) && (
+						<Link to={`${values.routeAddRequest}/${this.state.jobId}`}>
+							<Components.Button
+								inline
+								style={{ marginRight: 25 }}
+								buttonType="outlined"
+								isActive
+								onClick={this.editJob}
+							>
+								Edit Details
+							</Components.Button>
+						</Link>
+					)}
+			</div>
+		);
+	}
+
+	renderAttachment(attachment, index, onRemove) {
+		if (!attachment) return null;
+
+		return (
+			<Components.Attachment
+				key={index}
+				uploading={attachment.Uploading}
+				source={attachment.Source}
+				title={attachment.Title}
+				onRemove={onRemove ? () => onRemove(attachment) : undefined}
+			/>
+		);
+	}
+
+	renderAddNotePopup() {
+		if (!this.state.addNoteOpen) return null;
+
+		if (this.state.submittingNote) {
+			return (
+				<Components.Popup title="Saving Note" maxWidth={600} hasPadding>
+					<div className="flex flex-center-row">
+						<FontAwesome className="spinner" name="spinner fa-pulse fa-fw" />
+					</div>
+				</Components.Popup>
+			);
+		}
+
+		return (
+			<Components.Popup
+				title={`${this.state.editingNote ? "Edit" : "Add"} Note`}
+				onClose={this.onCloseAddNote}
+				maxWidth={600}
+				hasPadding
+				buttons={[
+					{
+						type: "primary",
+						onClick: this.onConfirmAddNote,
+						isActive: this.isReadyToSaveNote(),
+						text: "Save",
+					},
+					{
+						type: "tertiary",
+						onClick: this.onCloseAddNote,
+						isActive: true,
+						text: "Cancel",
+					},
+				]}
+			>
+				<Components.GenericInput
+					id="noteInput"
+					type="textarea"
+					componentClass="textarea"
+					value={this.state.noteInput}
+					placeholder="Enter note"
+					onChange={(e) => this.onHandleChange(e)}
+					inputStyle={{
+						width: 400,
+					}}
+				/>
+				<Components.Text type="h5">Attachments</Components.Text>
+				{this.state.noteAttachments.map((a, i) =>
+					this.renderAttachment(a, i, this.onRemoveAttachment),
+				)}
+				<input
+					ref={(input) => (this.attachmentInput = input)}
+					id="attachmentInput"
+					type="file"
+					className="fileInput"
+					onChange={(e) => this.onHandlePDFFileChange(e)}
+					accept="application/pdf"
+				/>
+				<div
+					className="iconTextButton marginBottom-16"
+					onClick={() => {
+						this.attachmentInput.click();
+					}}
+				>
+					<FontAwesome className="iconTextButton_icon" name="paperclip" />
+					<p className="iconTextButton_text">Add Attachment</p>
+				</div>
+				<Components.ImageInput
+					ref={(ref) => {
+						this.imageInput = ref;
+					}}
+					multiple
+					refreshCallback={(images) => {
+						this.setState({ noteImages: images });
+					}}
+				/>
+			</Components.Popup>
+		);
+	}
+
+	renderUsers() {
+		let content = null;
+		if (this.state.confirmingAssignee) {
+			content = (
+				<div className="flex flex-center-row">
+					<FontAwesome className="spinner" name="spinner fa-pulse fa-fw" />
+				</div>
+			);
+		} else if (this.state.selectedAssignee) {
+			content = (
+				<div>
+					<Components.UserListing
+						key={this.state.selectedAssignee.id}
+						user={this.state.selectedAssignee}
+						rightContent={
+							<Components.SVGIcon
+								className="removeIcon"
+								icon="close"
+								onClick={() => {
+									this.onSelectAssignee();
+								}}
+								colour={Colours.COLOUR_DUSK}
+							/>
+						}
+					/>
+				</div>
+			);
+		} else {
+			content = (
+				<div>
+					<Components.GenericInput
+						id="userSearch"
+						type="text"
+						// label="Search"
+						placeholder="Search name"
+						value={this.state.userSearch}
+						onChange={(e) => this.onHandleChange(e)}
+						alwaysShowLabel
+					/>
+					{_.sortBy(this.state.assignees, (u) => u.displayName.toUpperCase())
+						.filter((u) => {
+							if (_.isEmpty(this.state.userSearch)) return true;
+							return (
+								u.displayName
+									.toUpperCase()
+									.indexOf(this.state.userSearch.toUpperCase()) > -1
+							);
+						})
+						.map((user) => {
+							return (
+								<Components.UserListing
+									key={user.id}
+									user={user}
+									onClick={() => {
+										this.onSelectAssignee(user);
+									}}
+								/>
+							);
+						})}
+				</div>
+			);
+		}
+		return (
+			<div className="genericInputContainer">
+				<Components.Text type="formLabel">Select User</Components.Text>
+				{content}
+			</div>
+		);
+	}
+
+	renderUserSelectionPopup() {
+		if (!this.state.showingAssigneeSelector) return null;
+		return (
+			<Components.Popup
+				title="Assign Job"
+				onClose={this.onCloseSelectAssignee}
+				maxWidth={600}
+				hasPadding
+				buttons={[
+					{
+						type: "primary",
+						onClick: this.onConfirmAssignee,
+						isActive: !!this.state.selectedAssignee,
+						text: "Confirm",
+					},
+					{
+						type: "tertiary",
+						onClick: this.onCloseSelectAssignee,
+						isActive: true,
+						text: "Cancel",
+					},
+				]}
+			>
+				{this.renderUsers()}
+			</Components.Popup>
+		);
+	}
+
+	render() {
+		return (
+			<Components.OverlayPage>
+				{this.renderAddNotePopup()}
+				{this.renderUserSelectionPopup()}
+				<Components.OverlayPageContents>
+					<Components.OverlayPageSection className="pageSectionWrapper--fixedPopupSize">
+						{this.renderInner()}
+					</Components.OverlayPageSection>
+					<Components.OverlayPageSection className="pageSectionWrapper--newPopupSide pageSectionWrapper--newPopupSide-fixedWidth">
+						{this.renderAssignment()}
+						{this.renderPriority()}
+						{this.renderExternalSync()}
+						{this.renderOverview()}
+					</Components.OverlayPageSection>
+				</Components.OverlayPageContents>
+				<Components.OverlayPageBottomButtons>
+					{this.renderButtons()}
+				</Components.OverlayPageBottomButtons>
+			</Components.OverlayPage>
+		);
+	}
 }
 
 const mapStateToProps = (state) => {
-  const { auth } = state;
-  return { auth, statusTypes: state[values.reducerKey].jobstatuses };
+	const { auth } = state;
+	return { auth, statusTypes: state[values.reducerKey].jobstatuses };
 };
 
-export default connect(mapStateToProps, { jobsLoaded, jobStatusesUpdate })(withRouter(Job));
+export default connect(mapStateToProps, { jobsLoaded, jobStatusesUpdate })(
+	withRouter(Job),
+);