\n {label === 'Site Contact:' ? (\n \n {value.name ?? ''} {value.phone ?? ''}\n \n ) : (\n value\n )}\n
\n \n );\n};\n\nconst Construction = (props) => {\n const { me, hasClaim } = useAuth();\n\n const [tags, setTags] = useState([]); // we'll use this for which ones are selected\n const [categories, setCategories] = useState([]); // we'll use to for which ones are available\n const [construction, setConstruction] = useState(null);\n const [fieldTask, setFieldTask] = useState(null);\n const [images, setImages] = useState([]);\n const [nonImages, setNonImages] = useState([]);\n const [docTree, setDocTree] = useState([]);\n const [expandedRows, setExpandedRows] = useState([]);\n const [groups, setGroups] = useState([]);\n const [rejectTask, setRejectTask] = useState([]);\n const [imageDetails, setImageDetails] = useState(null);\n const [isStructuredAddress, setIsStructuredAddress] = useState(false);\n const [optionalFields, setOptionalFields] = useState([]);\n const [statusSettings, setStatusSettings] = useState([]);\n const [editJobStatus, setEditJobStatus] = useState(null);\n const [editDeveloperAndContact, setEditDeveloperAndContact] = useState(null);\n const [canEditDeveloper, setCanEditDeveloper] = useState(false);\n const [canEditSiteContact, setCanEditSiteContact] = useState(null);\n const [schedulerDisplayName, setSchedulerDisplayName] = useState('Scheduler');\n const [developerDisplayName, setDeveloperDisplayName] = useState('Developer');\n const [builderList, setBuilderList] = useState([]);\n const [isAuthed, setIsAuthed] = useState(false);\n const [hasScopingBonus, setHasScopingBonus] = useState(false);\n\n const { loading, data, refetch, error } = useQuery(GET_CONSTRUCTION, {\n fetchPolicy: 'cache-and-network',\n variables: { constructionId: props.match.params.constructionId }\n });\n\n const [settingsQuery, { data: systemSettings }] = useLazyQuery(GET_FIELD_WORK_TASK_SETTINGS, {\n fetchPolicy: 'no-cache'\n });\n\n // Field Items - the fetching of this shouldn't effect the loading of the page\n const [fieldItemsQuery, { data: fieldItems }] = useLazyQuery(GET_FIELD_ITEMS, {\n fetchPolicy: 'no-cache'\n });\n\n const [updateConstructionAddBOQAndItem] = useMutation(ADD_BOQ_AND_ITEM);\n const [updateConstructionScheduleItemCompletion] = useMutation(UPDATE_SCHEDULE_ITEM_COMPLETION);\n const [updateConstructionTaskAccepted] = useMutation(UPDATE_TASKACCEPTED);\n const [updateConstructionTaskDeclined] = useMutation(UPDATE_TASKDECLINED);\n const [updateTaskUserOnSite] = useMutation(UPDATE_TASKUSERONSITE);\n const [updateTaskUserOffSite] = useMutation(UPDATE_TASKUSEROFFSITE);\n const [updateTaskUserComplete] = useMutation(UPDATE_TASKUSERCOMPLETE);\n const [updateTaskUserConfirmQty] = useMutation(UPDATE_CONFIRMQTY);\n const [updateTaskUserComments] = useMutation(UPDATE_TASKUSER_COMMENTS);\n const [updateTaskSubmitted] = useMutation(UPDATE_TASKSUBMITTED);\n const [resetTicketOfWork] = useMutation(UPDATE_TICKETOFWORK);\n const [updateJobStatus] = useMutation(UPDATE_JOB_STATUS);\n const [updateFieldComment] = useMutation(UPDATE_FIELD_COMMENT);\n const [deleteFieldComment] = useMutation(DELETE_FIELD_COMMENT);\n const [updateDeveloperAndSiteContact] = useMutation(UPDATE_DEVELOPER_AND_SITE_CONTACT);\n\n const history = useHistory();\n\n const taskId = parseInt(props.match.params.taskId);\n\n useEffect(() => {\n if (data?.construction) {\n const updatedConstruction = { ...data.construction };\n\n const scheduleIndex = updatedConstruction.schedules.findIndex((schedule) => schedule.id === taskId);\n if (scheduleIndex !== -1) {\n const updatedSchedule = { ...updatedConstruction.schedules[scheduleIndex] };\n\n if (updatedSchedule.fieldComments && updatedSchedule.fieldComments.length > 0) {\n updatedSchedule.fieldComments = updatedSchedule.fieldComments.sort(\n (a, b) => new Date(b.createdUtc) - new Date(a.createdUtc)\n );\n }\n\n updatedConstruction.schedules[scheduleIndex] = updatedSchedule;\n }\n\n setConstruction(updatedConstruction);\n\n settingsQuery({\n variables: { workType: data.construction.workType }\n });\n\n fieldItemsQuery({\n variables: { taskId }\n });\n }\n\n if (data?.groups) {\n setGroups(data.groups);\n }\n\n if (data?.addressTypeSetting?.length) {\n const workTypeAddressTypeData = data.addressTypeSetting.find((x) => x.workType === data.construction.workType);\n if (workTypeAddressTypeData) {\n const config = JSON.parse(workTypeAddressTypeData.config);\n setIsStructuredAddress(config?.addressSetting?.addressType === 'structured');\n setHasScopingBonus(config?.addressSetting?.hasScopingBonus);\n }\n }\n }, [data, taskId, settingsQuery, fieldItemsQuery]);\n\n useEffect(() => {\n if (systemSettings?.optionalFields?.length) {\n const _optionalFields = getFields('Constructions')\n .concat(getFields('Tasks'))\n .filter((f) => f.isOptionalFieldWorkTask)\n .map((f) => ({\n fieldName: f.fieldName,\n show: true\n }));\n\n const storedFields = JSON.parse(systemSettings.optionalFields[0].config).fields;\n _optionalFields.forEach((field) => {\n const storedField = storedFields.find((x) => x.fieldName === field.fieldName);\n if (storedField) {\n field.show = storedField.show;\n }\n });\n\n setOptionalFields(_optionalFields.filter((f) => f.show).map((f) => f.fieldName));\n }\n\n if (systemSettings?.fieldWorkList?.length) {\n const fieldList = JSON.parse(systemSettings.fieldWorkList[0].config).fields;\n const _canEditDeveloper = fieldList.some((f) => f.canEdit && f.fieldName === 'developer');\n setCanEditDeveloper(_canEditDeveloper);\n const _canEditSiteContact = fieldList.some((f) => f.canEdit && f.fieldName === 'siteContact');\n setCanEditSiteContact(_canEditSiteContact);\n }\n\n if (systemSettings?.jobStatusSettings?.length) {\n const storedStatuses = JSON.parse(systemSettings.jobStatusSettings[0].config).statuses;\n setStatusSettings(storedStatuses);\n }\n\n if (systemSettings?.customDisplayNames?.length) {\n const customfields = JSON.parse(systemSettings.customDisplayNames[0].config)?.fields;\n\n if (customfields) {\n const customScheduler = customfields.find((x) => x.fieldName === 'scheduler');\n if (customScheduler) {\n setSchedulerDisplayName(customScheduler.displayName);\n }\n\n const customDeveloper = customfields.find((x) => x.fieldName === 'developer');\n if (customDeveloper) {\n setDeveloperDisplayName(customDeveloper.displayName);\n }\n }\n }\n\n if (systemSettings?.builders) {\n const builderLookup = systemSettings.builders[0];\n setBuilderList(builderLookup?.data);\n }\n }, [systemSettings]);\n\n useEffect(() => {\n const temp = [];\n if (construction) {\n data.construction.attachments.forEach((a) => {\n if (a.tags) {\n a.tags.split(';').forEach((t) => {\n if (!temp.includes(t)) {\n temp.push(t);\n }\n });\n }\n });\n\n setCategories(temp);\n\n setImages(\n data.construction.attachments.filter(\n (a) => a.key.endsWith('.jpg') || a.key.endsWith('.png') || (a.key.endsWith('.jpeg') && !a.isDocAttachment)\n )\n );\n setNonImages(\n data.construction.attachments.filter(\n (a) => (!a.key.endsWith('.jpg') && !a.key.endsWith('.png') && !a.key.endsWith('.jpeg')) || a.isDocAttachment\n )\n );\n\n const _fieldTask = construction.schedules.find((x) => x.id === taskId);\n setFieldTask(_fieldTask);\n\n if (me && (hasClaim('CAN_VIEW_ALL_GROUPS') || me.groupUsers.some((x) => x.group.id === _fieldTask.groupId))) {\n setIsAuthed(true);\n }\n setRejectTask(_fieldTask.items.some((i) => !!i.rejectedDate));\n }\n }, [construction, groups, me, data]);\n\n useEffect(() => {\n setDocTree(getDocTree(nonImages));\n }, [nonImages]);\n\n const shortToast = (message, props) => {\n toast(message, { ...props, toastId: 'success1', autoClose: 1500 });\n };\n\n const toggleStatus = (tag) => {\n if (tags.includes(tag)) {\n setTags(tags.filter((t) => t !== tag));\n } else {\n setTags(tags.concat(tag));\n }\n };\n\n const addBoqAndItem = useCallback(\n async (scheduleId, item) => {\n const fieldBoqItem = {\n scheduleId,\n itemId: item.itemId,\n quantity: item.variationQty,\n reason: item.reason\n };\n try {\n const result = await updateConstructionAddBOQAndItem({ variables: { fieldBoqItem: fieldBoqItem } });\n if (result && result.data?.updateConstructionAddBOQAndItem) {\n shortToast('Added new item to construction', { type: 'success' });\n setConstruction(result.data.updateConstructionAddBOQAndItem);\n } else {\n toast('Failed to retrieve updated construction - try refresh', { type: 'error' });\n }\n } catch (error) {\n toast('Error adding new item to construction', { type: 'error' });\n }\n },\n [updateConstructionAddBOQAndItem]\n );\n\n const updateScheduleItemCompletion = useCallback(\n async (item) => {\n const { code, unitOfMeasure, name, description, ...itemWithoutExtraFields } = item;\n try {\n const result = await updateConstructionScheduleItemCompletion({ variables: { item: itemWithoutExtraFields } });\n if (result && result.data?.updateConstructionScheduleItemCompletion) {\n shortToast('Changed item completion', { type: 'success' });\n setConstruction(result.data.updateConstructionScheduleItemCompletion);\n } else {\n toast('Failed to retrieve updated construction - try refresh', { type: 'error' });\n }\n } catch (error) {\n toast('Error updating completion of item', { type: 'error' });\n }\n },\n [updateConstructionScheduleItemCompletion]\n );\n\n const handleTaskAccepted = useCallback(\n async (scheduleId) => {\n try {\n const result = await updateConstructionTaskAccepted({ variables: { scheduleId } });\n if (result && result.data?.updateConstructionTaskAccepted) {\n shortToast('Accepted Task', { type: 'success' });\n setConstruction(result.data.updateConstructionTaskAccepted);\n } else {\n toast('Failed to retrieve updated construction - try refresh', { type: 'error' });\n }\n } catch (error) {\n toast('Error Accepting Task', { type: 'error' });\n }\n },\n [updateConstructionTaskAccepted]\n );\n\n const handleTaskDeclined = useCallback(\n async (scheduleId) => {\n try {\n const result = await updateConstructionTaskDeclined({ variables: { scheduleId } });\n if (result && result.data?.updateConstructionTaskDeclined) {\n shortToast('Declined Task', { type: 'success' });\n setConstruction(result.data.updateConstructionTaskDeclined);\n } else {\n toast('Failed to retrieve updated construction - try refresh', { type: 'error' });\n }\n } catch (error) {\n toast('Error Declining Task', { type: 'error' });\n }\n },\n [updateConstructionTaskDeclined]\n );\n\n const handleTaskUserOnSite = useCallback(\n async (scheduleId, taskUser) => {\n let _taskUser = taskUser;\n if (!taskUser) {\n _taskUser = {\n id: 0,\n userId: me.id,\n scheduleId: scheduleId,\n onSiteUtc: null,\n offSiteUtc: null,\n completedUtc: null,\n confirmItemQtys: false\n };\n }\n try {\n const result = await updateTaskUserOnSite({\n variables: { taskUser: _taskUser }\n });\n if (result && result.data?.updateTaskUserOnSite) {\n //shortToast('Set Onsite', { type: 'success' });\n setConstruction(result.data.updateTaskUserOnSite);\n } else {\n toast('Failed to retrieve updated construction - try refresh', { type: 'error' });\n }\n } catch (error) {\n toast('Error Setting Onsite', { type: 'error' });\n }\n },\n [updateTaskUserOnSite]\n );\n\n const handleTaskUserOffSite = useCallback(\n async (taskUser) => {\n try {\n const result = await updateTaskUserOffSite({\n variables: { taskUser }\n });\n if (result && result.data?.updateTaskUserOffSite) {\n shortToast('Set Offsite', { type: 'success' });\n setConstruction(result.data.updateTaskUserOffSite);\n } else {\n toast('Failed to retrieve updated construction - try refresh', { type: 'error' });\n }\n } catch (error) {\n toast('Error Setting Offsite', { type: 'error' });\n }\n },\n [updateTaskUserOffSite]\n );\n\n const handleTaskUserComplete = useCallback(\n async (taskUser, partial) => {\n try {\n const result = await updateTaskUserComplete({ variables: { taskUser, partial } });\n if (result && result.data?.updateTaskUserComplete) {\n shortToast('Task Complete', { type: 'success' });\n setConstruction(result.data.updateTaskUserComplete);\n } else {\n toast('Failed to retrieve updated construction - try refresh', { type: 'error' });\n }\n } catch (error) {\n toast('Error Completing Task', { type: 'error' });\n }\n },\n [updateTaskUserComplete]\n );\n\n const handleTaskSubmitted = useCallback(\n async (scheduleId) => {\n try {\n const result = await updateTaskSubmitted({ variables: { scheduleId } });\n if (result && result.data?.updateTaskSubmitted) {\n shortToast('Task Submitted', { type: 'success' });\n setConstruction(result.data.updateTaskSubmitted);\n history.push('/field/construction');\n } else {\n toast('Failed to retrieve updated construction - try refresh', { type: 'error' });\n }\n } catch (error) {\n toast('Error Setting Submitted', { type: 'error' });\n }\n },\n [updateTaskSubmitted]\n );\n\n const handleTaskUserConfirmQty = useCallback(\n async (taskUser) => {\n try {\n const result = await updateTaskUserConfirmQty({ variables: { taskUser } });\n if (result && result.data?.updateTaskUserConfirmQty) {\n shortToast('Item QTYs Confirmed', { type: 'success' });\n setConstruction(result.data.updateTaskUserConfirmQty);\n } else {\n toast('Failed to retrieve updated Task User - try refresh', { type: 'error' });\n }\n } catch (error) {\n toast('Error Updating Task', { type: 'error' });\n }\n },\n [updateTaskUserConfirmQty]\n );\n\n const handleTaskUserComments = useCallback(\n async (taskUser) => {\n try {\n const result = await updateTaskUserComments({ variables: { taskUser } });\n if (result && result.data?.updateTaskUserComments) {\n shortToast('Task User Comments Updated', { type: 'success' });\n setConstruction(result.data.updateTaskUserComments);\n } else {\n toast('Failed to retrieve updated Task User - try refresh', { type: 'error' });\n }\n } catch (error) {\n toast('Error Updating Task', { type: 'error' });\n }\n },\n [updateTaskUserComments]\n );\n\n const handleResetTicketOfWork = useCallback(\n async (scheduleId) => {\n try {\n const result = await resetTicketOfWork({ variables: { id: scheduleId, ticketOfWork: JSON.stringify({}) } });\n if (result && result.data?.updateTicketOfWork) {\n shortToast('Ticket of Work reset successfully', { type: 'success' });\n } else {\n toast('Failed to retrieve ticket of work - try refresh', { type: 'error' });\n }\n } catch (error) {\n toast('Error resetting Ticket of Work', { type: 'error' });\n }\n },\n [resetTicketOfWork]\n );\n\n const handleUpdateJobStatus = useCallback(\n async (jobId, status) => {\n try {\n const result = await updateJobStatus({\n variables: {\n id: jobId,\n status: status\n }\n });\n if (result && result.data?.updateJobStatus) {\n shortToast('Job Status updated successfully', { type: 'success' });\n setEditJobStatus(null);\n setConstruction(\n (prevJob) =>\n (prevJob = {\n ...prevJob,\n status: status\n })\n );\n } else {\n toast('Failed to update Job Status - try refresh', { type: 'error' });\n }\n } catch (error) {\n toast('Error updating Job Status', { type: 'error' });\n }\n },\n [updateJobStatus]\n );\n\n const handleUpdateDeveloperAndContact = useCallback(\n async (jobId, developer, siteContact, siteContactPhone) => {\n try {\n const result = await updateDeveloperAndSiteContact({\n variables: {\n id: jobId,\n developer: developer,\n siteContact: siteContact,\n siteContactPhone: siteContactPhone\n }\n });\n if (result && result.data?.updateDeveloperAndSiteContact) {\n shortToast('Developer and Site Contact updated successfully', { type: 'success' });\n setEditDeveloperAndContact(null);\n setConstruction((prevJob) => ({\n ...prevJob,\n developer: developer,\n siteContact: siteContact,\n siteContactPhone: siteContactPhone\n }));\n } else {\n toast('Failed to update - try refresh', { type: 'error' });\n }\n } catch (error) {\n toast('Error updating', { type: 'error' });\n }\n },\n [updateDeveloperAndSiteContact]\n );\n\n const handleUpdateFieldComment = useCallback(\n async (fieldCommentToUpdate) => {\n try {\n const { createdUtc, user, ...fieldComment } = fieldCommentToUpdate;\n const updateData = {\n ...fieldComment,\n userId: me.id\n };\n\n const result = await updateFieldComment({\n variables: { fieldComment: updateData },\n operationName: 'UpdateFieldComment'\n });\n\n if (result && result.data?.updateFieldComment) {\n const updatedComment = {\n ...result.data.updateFieldComment,\n createdUtc: result.data.updateFieldComment.createdUtc.endsWith('Z')\n ? result.data.updateFieldComment.createdUtc.slice(0, -1)\n : result.data.updateFieldComment.createdUtc\n };\n\n setConstruction((prevConstruction) => {\n const schedules = [...prevConstruction.schedules];\n const scheduleIndex = schedules.findIndex((schedule) => schedule.id === taskId);\n\n if (scheduleIndex !== -1) {\n const updatedSchedule = { ...schedules[scheduleIndex] };\n\n const commentIndex = updatedSchedule.fieldComments.findIndex(\n (comment) => comment.id === updatedComment.id\n );\n if (commentIndex !== -1) {\n updatedSchedule.fieldComments[commentIndex] = updatedComment;\n } else {\n updatedSchedule.fieldComments.push(updatedComment);\n }\n updatedSchedule.fieldComments.sort((a, b) => new Date(b.createdUtc) - new Date(a.createdUtc));\n\n schedules[scheduleIndex] = updatedSchedule;\n }\n\n return { ...prevConstruction, schedules };\n });\n } else {\n toast('Failed to update field comment - try refresh', { type: 'error' });\n }\n } catch (error) {\n toast('Error updating field comment', { type: 'error' });\n }\n },\n [updateFieldComment, taskId]\n );\n\n const handleDeleteFieldComment = useCallback(\n async (fieldCommentId) => {\n try {\n const result = await deleteFieldComment({\n variables: { id: fieldCommentId }\n });\n\n if (result) {\n setConstruction((prevConstruction) => {\n const schedules = [...prevConstruction.schedules];\n const scheduleIndex = schedules.findIndex((schedule) => schedule.id === taskId);\n\n if (scheduleIndex !== -1) {\n const updatedSchedule = { ...schedules[scheduleIndex] };\n updatedSchedule.fieldComments = updatedSchedule.fieldComments.filter(\n (comment) => comment.id !== fieldCommentId\n );\n schedules[scheduleIndex] = updatedSchedule;\n }\n\n return { ...prevConstruction, schedules };\n });\n } else {\n toast('Failed to delete field comment - try refresh', { type: 'error' });\n }\n } catch (error) {\n toast('Error deleting field comment', { type: 'error' });\n }\n },\n [deleteFieldComment, taskId]\n );\n\n const checkIsSubcontractor = (groupId) => {\n const group = groups.find((x) => x.id === groupId);\n return !!group?.isSubcontractor;\n };\n\n const onImageEdit = (newImageDetails) => {\n const image = images.filter((x) => x.id === newImageDetails.id)[0];\n image.title = newImageDetails.title;\n image.url = newImageDetails.url;\n image.comments = newImageDetails.comments;\n setImages([...images]);\n };\n\n const toggleRowExpand = (id) => {\n const index = expandedRows.indexOf(id);\n if (index !== -1) {\n expandedRows.splice(index, 1);\n } else {\n expandedRows.push(id);\n }\n\n setExpandedRows([...expandedRows]);\n };\n\n const FileRow = ({ branch, depth = 0 }) => {\n const doc = branch.doc;\n const leftPadding = depth * 10;\n return (\n \n \n {doc.title}\n \n
\n )}\n {!doc && (\n \n
\n {editJobStatus && (\n \n
\n \n
\n\n \n
\n {construction.workOrder}
\n\n
\n \n \n Back to task list\n {' '}\n {hasClaim('CAN_RESET_CONSTRUCTION') && (\n \n Full Construction Job\n \n )}\n
\n \n \n status.fieldEdit)\n ? () => setEditJobStatus(construction)\n : undefined\n }\n icon={statusSettings?.some((status) => status.fieldEdit) ? : null}\n />\n {optionalFields.includes('description') && (\n setEditDeveloperAndContact(construction)\n : undefined\n }\n icon={canEditDeveloper || canEditSiteContact ? : null}\n />\n )}\n {optionalFields.includes('buildType') && (\n setEditDeveloperAndContact(construction)\n : undefined\n }\n icon={canEditDeveloper || canEditSiteContact ? : null}\n />\n )}\n {optionalFields.includes('customerRef') && (\n
\n {hasScopingBonus && (\n \n \n {construction.developer && construction.siteContactPhone\n ? 'Scoping complete'\n : 'To claim a scoping bonus, please ensure Developer and Site Contact Phone number are updated.'}\n \n
\n )}\n {isStructuredAddress ? getAddress(editJobStatus) : <>{editJobStatus.address}}
\n \n
\n setEditJobStatus({ ...editJobStatus, status: e.target.value })}\n >\n {statusSettings\n .filter((x) => x.fieldEdit)\n .map((status) => (\n \n ))}\n \n
\n \n {isStructuredAddress ? getAddress(editDeveloperAndContact) : editDeveloperAndContact.address}\n
\n \n
\n \n \n setEditDeveloperAndContact({\n ...editDeveloperAndContact,\n developer: e.target.value\n })\n }\n >\n \n {builderList.map((builder) => (\n \n ))}\n \n
\n \n \n \n setEditDeveloperAndContact({\n ...editDeveloperAndContact,\n siteContact: e.target.value\n })\n }\n />\n
\n \n \n \n setEditDeveloperAndContact({\n ...editDeveloperAndContact,\n siteContactPhone: e.target.value\n })\n }\n />\n
\n \n
\n )}\n\n \n {rejectTask ? 'Scheduled Task has rejected item quantities' : 'Scheduled Task'}\n
\n \n
\n \n
\n \n )}\n {imageDetails && (\n Attachments
\n \n
\n \n {categories.map((category, index) => {\n return (\n toggleStatus(category)}\n >\n {category}\n \n );\n })}\n
\n\n {docTree &&\n docTree.map((doc, index) => {\n const aTags = doc.tags ? doc.tags.split(';') : [];\n var selected = false;\n\n aTags.forEach((t) => {\n if (tags.includes(t)) {\n selected = true;\n }\n });\n return selected ? FileRow({ key: index, branch: doc }) : null;\n })}\n\n {images && (\n \n {images.map((image, index) => {\n const aTags = image.tags ? image.tags.split(';') : [];\n var selected = false;\n\n aTags.forEach((t) => {\n if (tags.includes(t)) {\n selected = true;\n }\n });\n return selected ? (\n
\n )}\n \n {/* 
*/}\n {\n setImageDetails(image);\n }}\n />\n
\n ) : null;\n })}\n \n {image.comments}\n
\n \n
\n {!!schedule.comments && schedule.comments !== '' && (\n \n {schedule.name}\n
\n \n {!(schedule.acceptedDate || schedule.declinedDate) && !schedule.completedDate && isSubcontractor && (\n <>\n {' '}\n \n \n )}\n {schedule.acceptedDate &&
\n Date Accepted: {schedule.acceptedDate.substr(0, 10)}
}\n {schedule.declinedDate && Date Declined: {schedule.declinedDate.substr(0, 10)}
}\n \n {(!isSubcontractor || schedule.acceptedDate) && schedule.completedDate && !schedule.submittedDate && (\n \n )}{' '}\n {(!isSubcontractor || schedule.acceptedDate) && (\n <>\n {showComplete ? (\n <>\n {' '}\n {' '}\n {' '}\n {schedule.externalJobLink && (\n \n )}\n \n ) : (\n showOnSite &&\n !schedule.completedDate && (\n {\n handleTaskUserOnSite(schedule.id, taskUser);\n if (schedule.externalJobLink) {\n setShowOnsiteModel(true);\n }\n }}\n >\n I'm Onsite\n \n )\n )}\n\n
\n \n \n Capture Images\n {' '}\n \n Upload files\n \n
\n \n )}\n \n
\n )}\n\n {!!scheduleItems && scheduleItems.length > 0 && (\n \n
\n \n Comments: {schedule.comments}\n
\n \n
\n )}\n\n \n
\n \n
\n \n \n \n {schedule.fieldComments && schedule.fieldComments.length > 0 ? (\n
\n \n {schedule.fieldComments.map((comment, index) => {\n const isCommentOwner = me.id === comment.user?.id;\n\n return (\n
\n ) : (\n \n
\n );\n })}\n \n {isCommentOwner ? (\n setEditFieldComment(comment)}\n style={{\n background: 'none',\n border: 'none',\n color: 'black',\n padding: 0,\n margin: 0,\n textDecoration: 'none',\n boxShadow: 'none',\n cursor: 'pointer'\n }}\n className=\"text-left font-weight-bold p-0\"\n >\n {formatDateTime(comment.createdUtc) + ': '}\n \n ) : (\n {formatDateTime(comment.createdUtc) + ': '}\n )}{' '}\n {comment.comments}\n
\n No Field Comments
\n )}\n {schedule.completedDate && !schedule.submittedDate ? (\n \n ) : (\n <>{taskUserComments && taskUserComments.length > 0 && Completions Comment
}\n )}\n {taskUserComments &&\n taskUserComments.length > 0 &&\n taskUserComments.map((tuc, index) => {\n return (\n\n
\n );\n })}\n \n \n {formatDate(tuc.onSiteUtc) + ' - '} {tuc.user?.displayName + ': '}\n \n {tuc.comments}\n
\n \n \n setEditFieldComment({\n ...editFieldComment,\n comments: e.target.value\n })\n }\n />\n
\n Partially Complete Reason
\n \n
\n {schedule.externalJobLink && (\n \n Start Card\n \n )}\n \n Click the Start Card button below\n
\n This will take you to the Novus Login page\n
\n After logging in it will redirect to the job page\n
\n 1) First click the yellow \"Enroute\" button, it will then change to \"Onsite\"\n
\n 2) Click the Onsite button\n
\n 3) Then click the \"Forms\" tab\n
\n 4) Click the \"SJLR iStart Card\" (most recent if more than one)\n
\n 5) On the Start Card form:\n
- Fill in First and Last name\n
- Click \"Today\" and \"Now\" For the Date and Time\n
- Sign at the bottom and click \"Submit\"\n
Items
\n \n \n \n \n
\n \n \n \n \n
\n \n
\n {canEditItems && (\n \n )}{' '}\n {canConfirm && (\n \n )}{' '}\n \n \n {' '}\n {hasClaim('CAN_RESET_TICKET_OF_WORK') && (\n \n )}\n {!!addItem && (\n | \n {/* Code/Type */}\n Code\n \n Qty/UOM\n {isFinanceOrSub && (\n <>\n \n Rate\n \n Total\n \n )}\n | \n Description | \nVariation Reason | \nComments | \n
|---|---|---|---|
| \n {item.code}\n {/* \n {boq.itemType} */}\n \n \n {item.completedQty ?? item.quantity ?? 0} {item.unitOfMeasure}\n \n {isFinanceOrSub && (\n <>\n \n \n {Intl.NumberFormat('en-AU', { style: 'currency', currency: 'AUD' }).format(item.rate)}\n \n \n {Intl.NumberFormat('en-AU', { style: 'currency', currency: 'AUD' }).format(\n calcTotal(item)\n )}\n \n \n )}\n \n {(canEditItems || (isReject && item.rejectedDate)) && (\n | \n {item.description} | \n{item.variationReason} | \n{getComments(item)} | \n
| Code | \n {/*Type | */}\nQty/UOM | \n {isFinanceOrSub &&Rate | }\n {isFinanceOrSub &&Total | }\nDescription | \nVariation Reason | \nComments | \n
|---|---|---|---|---|---|---|---|
| {item.code} | \n {/*{boq.itemType} | */}\n\n \n {item.completedQty ?? item.quantity ?? 0} {item.unitOfMeasure}\n \n \n {(canEditItems || (isReject && item.rejectedDate)) && (\n | \n {isFinanceOrSub && (\n {Intl.NumberFormat('en-AU', { style: 'currency', currency: 'AUD' }).format(item.rate)} | \n )}\n {isFinanceOrSub && (\n\n {Intl.NumberFormat('en-AU', { style: 'currency', currency: 'AUD' }).format(calcTotal(item))}\n | \n )}\n{item.name} | \n{item.variationReason} | \n{getComments(item)} | \n
\n
\n \n
\n \n \n {\n var i = fieldItems.find((i) => i.id == e.value);\n setSelectedCode(i);\n setNewItem({\n ...newItem,\n code: i.code,\n description: i.description ?? i.name ?? '',\n unitOfMeasure: i.unitOfMeasure ?? '',\n itemId: i.id\n });\n }}\n />\n
\n \n \n
\n {selectedCode?.description}
\n \n \n
\n {selectedCode?.unitOfMeasure}
\n \n \n setNewItem({ ...newItem, variationQty: parseFloat(e.target.value) })}\n />\n
\n \n \n setNewItem({ ...newItem, reason: e.target.value })}\n />\n
\n \n
\n \n
\n \n \n
\n {item.code}
\n \n \n
\n {item.description}
\n \n \n
\n \n {childCode ? item.quantity : boq?.variationQty ?? boq?.quantity} {boq?.unitOfMeasure}\n
\n \n \n
\n \n setChangedValues({ ...changedValues, completedQty: parseFloat(e.target.value) })}\n />\n
\n \n \n
\n \n setChangedValues({ ...changedValues, variationReason: e.target.value })}\n />\n
\n \n \n {\n setEditingTitle(e.target.value)}\n type=\"text\"\n className=\"form-control\"\n />\n }\n
\n \n \n setComments(e.target.value)}\n type=\"text\"\n className=\"form-control\"\n />\n
\n {selectedJobsData.addressText}
\n| Address | \nWork Order | \n{job.address} | \n{job.workOrder} | \n \n ))}\n
|---|
\n {selectedJobsData.jobs.filter((job) => job.selected).length > 0 && (\n <>\n {/* Desktop */}\n
\n 900 ? 'block' : 'none' }}>\n
\n {/* Mobile */}\n \n \n Scan the QR code below with your phone to copy an approval request message ready to send to{' '}\n {selectedJobsData.siteContact}.\n
\n \n
\n \n )}\n {selectedJobsData.jobs.filter((job) => job.selected).length == 0 && (\n \n )}\n \n \n
\n \n \n
\n \n
\n );\n return (\n <>\n {isPotentialJob ? (\n // New layout for potential jobs\n \n
\n \n
\n \n \n
\n \n
\n\n \n
\n \n \n
\n \n
\n\n \n
\n\n \n \n {\n setFileName(e.target.value === '' ? null : e.target.value);\n setImageNumber(1);\n }}\n />\n
\n \n
\n \n \n {\n if (!isNaN(parseInt(e.target.value))) {\n setImageNumber(parseInt(e.target.value ?? 1));\n } else {\n setImageNumber(1);\n }\n }}\n />\n
\n \n
\n \n
\n \n \n setComments(e.target.value)}\n />\n
\n \n \n
\n\n \n\n \n
\n {CaptureForm}
\n\n {/* Buttons and preview */}\n \n \n \n
\n )}\n
\n \n ) : (\n // Original layout for normal jobs\n \n
\n\n {capturedImage && (\n \n
\n \n \n
\n\n \n \n
\n | \n | \n \n |
\n \n
\n\n \n\n \n
\n \n {CaptureForm}\n
\n\n {/* Buttons and preview */}\n \n \n \n
\n )}\n
\n \n )}\n \n );\n};\n\nexport default Capture;\n","import React from 'react';\nimport { Spinner } from 'reactstrap';\n\nexport const Loading = () => {\n return (\n \n
\n\n {capturedImage && (\n \n
\n \n \n
\n\n \n \n
\n | \n | \n \n |
\n
\n );\n};\n","import React, { useState } from 'react';\n\nimport { Container, Col, Row, Table, Button, Badge } from 'reactstrap';\nimport { useAuth } from '../../auth/AuthProvider';\n\nimport 'react-dropzone-uploader/dist/styles.css';\nimport Dropzone from 'react-dropzone-uploader';\n\nimport moment from 'moment';\nimport 'moment-timezone';\nimport { getDroppedOrSelectedFiles } from 'html5-file-selector';\n\nexport const FileUpload = ({ onFileUploaded, onFileFailed, ...props }) => {\n const taskId = props.taskId ? parseInt(props.taskId) : null;\n const projectId = props.projectId ? parseInt(props.projectId) : null;\n const constructionId = props.constructionId ? parseInt(props.constructionId) : null;\n const groupAccommodationId = props.groupAccommodationId ? parseInt(props.groupAccommodationId) : null;\n const tags = props.tags ? props.tags : [];\n const auth = useAuth();\n const isDocAttachment = props.isDocAttachment ? true : false;\n\n let filePaths = [];\n\n const getPresignedUploadParams = (fullPath, size) => {\n return fetch('/api/attachments/getPresignedUploadParams', {\n method: 'POST',\n body: JSON.stringify({\n name: fullPath,\n sizeBytes: size,\n taskId: isNaN(taskId) ? undefined : taskId,\n tags: tags,\n projectId: isNaN(projectId) ? undefined : projectId,\n constructionId: isNaN(constructionId) ? undefined : constructionId,\n groupAccommodationId: isNaN(groupAccommodationId) ? undefined : groupAccommodationId,\n isDocAttachment: isDocAttachment\n }),\n headers: { 'Content-Type': 'application/json', authorization: `Bearer ${auth.token}` }\n }).then((res) => res.json());\n };\n\n const removeFailedAttachment = (id) => {\n return fetch('/api/attachments/' + id, {\n method: 'DELETE',\n headers: { 'Content-Type': 'application/json', authorization: `Bearer ${auth.token}` }\n }).then((res) => res.json());\n };\n\n const getUploadParams = async ({ file, meta }) => {\n //const {uploadUrl, fileUrl} = await getPresignedUploadParams();\n //return { body: file, meta: { fileUrl }, url: uploadUrl }\n const filePath = filePaths.filter((x) => x.endsWith(meta.name))[0];\n const path = file.webkitRelativePath ? '/' + file.webkitRelativePath : filePath;\n\n const { attachment, uploadUrl } = await getPresignedUploadParams(path, meta.size);\n filePaths = filePaths.filter((x) => x !== filePath);\n return { body: file, meta: { attachment }, url: uploadUrl, method: 'PUT' };\n };\n\n const handleChangeStatus = ({ meta, remove }, status) => {\n //console.log({status, meta});\n if (status === 'headers_received') {\n //toast(`${meta.name} uploaded!`)\n if (onFileUploaded) {\n onFileUploaded(meta);\n }\n remove();\n } else if (status === 'aborted' || status === 'exception_upload') {\n //toast(`${meta.name}, upload failed...`)\n if (onFileFailed) {\n onFileFailed(meta);\n }\n removeFailedAttachment(meta.attachment.id);\n }\n };\n\n const getFilesFromEvent = (e) => {\n return new Promise((resolve) => {\n getDroppedOrSelectedFiles(e).then((chosenFiles) => {\n chosenFiles.forEach((x) => {\n filePaths.push(x.fullPath);\n });\n resolve(chosenFiles.map((f) => f.fileObject));\n });\n });\n };\n\n return (\n | Title | \nTags | \nSize | \nUploaded | \nSync | \nActions | \n
|---|---|---|---|---|---|
| \n \n {a.title || GetFilename(a.url)}\n \n | \n{a.tags ? | \n {humanFileSize(a.sizeBytes)} | \n{moment.utc(a.createdUtc).tz(moment.tz.guess()).format('DD MMM YYYY hh:mm A')} | \n{a.syncStatus ? | \n \n {allowDelete && a.syncStatus !== 'synced' ? (\n | \n
| Address | \nBuilder | \nSite Contact | \n
|---|---|---|
| {job.needsOfficeApproval ? job.addressFromField : getAddress(job)} | \n{job.builder} | \n{(job.siteContactName ?? '') + ' ' + (job.siteContactPhone ?? '')} | \n
\n
\n \n {!selectedJobsData && !fullAddressOnly && !jobData && (\n {\n const showFullAddressNewValue = !showFullAddress;\n setShowFullAddress(showFullAddressNewValue);\n setNewPotentialJob({ ...newPotentialJob, needsOfficeApproval: !showFullAddressNewValue });\n }}\n >\n {showFullAddress ? 'Hide Detailed Address Fields' : 'Show Detailed Address Fields'}\n \n )}\n
\n \n setShowPotentialJobModal(!showPotentialJobModal)}\n >\n {selectedJobsData ? 'Done' : 'Cancel'}\n \n {!selectedJobsData && (\n <>\n {!jobData && !showFullAddress && (\n \n Take Photo\n \n )}\n \n {!!jobData ? 'Submit' : 'Save'}\n \n \n )}\n {selectedJobsData && isValidPhoneNumber && !jobData && !fullAddressOnly && (\n \n )}\n
\n \n
\n );\n};\n","import React, { useState, useMemo } from 'react';\nimport { Container, Col, Row, Table, Button } from 'reactstrap';\nimport { Link } from 'react-router-dom';\nimport { getAddress } from '../../utils/utilFunctions';\nimport { useCompletedWork } from './DataHooks';\nimport { useAuth } from '../../auth/AuthProvider';\n\nconst TaskHistory = ({ structuredAddressWorkTypes, groupId }) => {\n const { me, hasClaim } = useAuth();\n const [expandedRows, setExpandedRows] = useState([]);\n const [pastMonths, setPastMonths] = useState('1');\n const [searchFilter, setSearchFilter] = useState(null);\n\n const isFinanceOrSub = me.isSubcontractor || hasClaim('CAN_VIEW_FINANCIAL_INFORMATION');\n\n const { completedWork, loading } = useCompletedWork(groupId, pastMonths);\n\n const getDisplayStatus = (task) => {\n if (task.paid) return 'Paid';\n if (task.approved) return 'Approve for Payment';\n return 'Completed';\n };\n\n const toggleRowExpand = (id) => {\n const index = expandedRows.indexOf(id);\n if (index !== -1) {\n expandedRows.splice(index, 1);\n } else {\n expandedRows.push(id);\n }\n\n setExpandedRows([...expandedRows]);\n };\n\n const getTotal = (item) => {\n return item.completedQty\n ? item.completedQty * (item.rate ?? 0)\n : item.quantity\n ? item.quantity * (item.rate ?? 0)\n : 0;\n };\n\n const isSubcontractor = useMemo(() => {\n return completedWork.tasks?.[0]?.isSubcontractor ?? false;\n }, [completedWork.tasks]);\n\n const filteredTasks = useMemo(() => {\n if (!completedWork || !completedWork.tasks) return;\n\n let tasks = completedWork.tasks;\n\n // Filter task items based on isSubcontractor\n tasks = tasks.map((task) => ({\n ...task,\n items: task.items.filter((item) => (isSubcontractor ? !!item.childCode : !item.childCode))\n }));\n\n const lowerCaseSearchFilter = searchFilter?.toLowerCase();\n if (lowerCaseSearchFilter) {\n tasks = tasks.filter((task) => {\n const taskName = task.name.toLowerCase();\n const taskAddress = structuredAddressWorkTypes?.includes(task.workType)\n ? getAddress(task)?.toLowerCase()\n : task.address?.toLowerCase();\n const taskWorkOrder = task.workOrder?.toLowerCase();\n const displayStatus = getDisplayStatus(task).toLowerCase();\n\n return (\n taskName?.includes(lowerCaseSearchFilter) ||\n taskAddress?.includes(lowerCaseSearchFilter) ||\n taskWorkOrder?.includes(lowerCaseSearchFilter) ||\n displayStatus?.includes(lowerCaseSearchFilter)\n );\n });\n }\n\n return tasks;\n }, [completedWork, searchFilter, isSubcontractor]);\n\n const getComments = (task, item) => {\n const payment = task.payments.find((x) => x.name === task.name && x.owner === task.resource);\n return payment?.paymentItems?.find((x) => x.itemCode === item.childCode)?.comments;\n };\n\n if (loading) {\n return Loading...
;\n }\n\n return (\n <>\n \n {' '}\n {task.dp} -{' '}\n {task.workOrder} (\n {getDisplayStatus(task)}) -{' '}\n {structuredAddressWorkTypes?.includes(task.workType) ? getAddress(task) : task.address} -{' '}\n {isFinanceOrSub &&\n Intl.NumberFormat('en-AU', { style: 'currency', currency: 'AUD' }).format(\n task.items.reduce((p, c) => p + getTotal(c), 0)\n )}\n - {task.name} - {task.completedDate.substr(0, 10)}\n
\n \n| Code | \nType | \nQty/UOM | \nDescription | \nRate | \nTotal | \nVariation Reason | \nComments | \n
|---|---|---|---|---|---|---|---|
| {item.childCode} | \n{boq?.itemType} | \n\n {item.completedQty ?? item.quantity ?? 0} {boq.unitOfMeasure}\n | \n{boq.description} | \n\n {isFinanceOrSub &&\n Intl.NumberFormat('en-AU', { style: 'currency', currency: 'AUD' }).format(item.rate)}\n | \n\n {isFinanceOrSub &&\n Intl.NumberFormat('en-AU', { style: 'currency', currency: 'AUD' }).format(\n getTotal(item)\n )}\n | \n{item.variationReason} | \n{getComments(task, item)} | \n
| \n | \n {Intl.NumberFormat('en-AU', { style: 'currency', currency: 'AUD' }).format(\n task.items.filter((x) => !!x.childCode).reduce((p, c) => p + getTotal(c), 0)\n )}\n | \n
{grouping.title + (grouping.date !== undefined ? ' - ' + formatDate(grouping.date) : '')}
\n\n Office Comment: \n {task.comments}\n
\n \n
\n \n \n setEditFieldComment({\n ...editFieldComment,\n scheduleId: task.id,\n groupingName: groupingName\n })\n }\n size=\"sm\"\n className=\"mr-2\"\n >\n Add Field Comment\n \n {/* Show Builder Approval button or status based on priority */}\n {task.builderApprovedDate ? (\n
\n \n Builder Approved: {formatDate(task.builderApprovedDate)}\n
\n ) : task.builderApprovalSentDate ? (\n \n Builder Approval Sent: {formatDate(task.builderApprovalSentDate)}\n
\n ) : (\n task.streetName &&\n task.suburb &&\n task.siteContact &&\n task.siteContactPhone &&\n task.developer && (\n \n )\n )}\n \n {task.attachmentCount > 0 && {task.attachmentCount} Attachments }\n
\n \n \n isCommentOwner && setEditFieldComment({ ...fieldComment, groupingName: groupingName })\n }\n style={{\n background: 'none',\n border: 'none',\n color: 'black',\n padding: 0,\n margin: 0,\n textDecoration: 'none',\n boxShadow: 'none',\n cursor: isCommentOwner ? 'pointer' : 'default'\n }}\n className=\"p-0 text-left font-weight-bold\"\n disabled={!isCommentOwner}\n >\n {isCommentOwner && }{' '}\n {formatDateTime(fieldComment.createdUtc) + ': '}\n {' '}\n {fieldComment.comments}\n
\n \n
\n {structuredAddressWorkTypes && fieldwork.rejectedSchedules && fieldwork.rejectedSchedules.length > 0 && (\n \n setSearchData(e.target.value)}\n onKeyPress={(e) => {\n if (e.key === 'Enter') {\n setSearchFilter(e.target.value);\n }\n }}\n />\n
\n \n {\n setSearchFilter(searchData);\n }}\n >\n Search\n \n
\n \n {filteredTasks && exportData && (\n \n Export\n \n )}\n
\n \n {\n setShowPotentialJobModal(true);\n }}\n >\n Add Potential Job\n \n
\n \n 0 || searchFilter !== '' ? 'btn-warning' : 'btn-secondary'\n } ml-2`}\n onClick={() => {\n setColumnSearchFilter({});\n setSearchFilter('');\n setInputKey((prevKey) => prevKey + 1);\n }}\n disabled={Object.keys(columnSearchFilter).length === 0 && searchFilter === ''}\n >\n Clear Filters\n \n
\n \n \n
\n
\n )}\n {filteredTasks && Object.keys(filteredTasks).length > 0 && (\n <>\n \n
\n Please correct item quantities for the following tasks
\n\n \n
\n
\n {filteredTasks.nextWeek.length > 0 && (\n Current
\n\n \n
\n
\n )}\n {filteredTasks.nextMonth.length > 0 && (\n Next Week
\n\n \n
\n
\n )}\n {filteredTasks.onHold.length > 0 && (\n Next Month
\n\n \n
\n
\n )}\n \n )}\n {editCustomTask && (\n On Hold
\n{editCustomTask.name}
\n \n
\n setEditCustomTask({ ...editCustomTask, isCompleted: e.target.checked })}\n />{' '}\n \n
\n \n {structuredAddressWorkTypes?.includes(editJobStatus.workType) ? (\n getAddress(editJobStatus)\n ) : (\n <>{editJobStatus.address}\n )}\n
\n \n
\n setEditJobStatus({ ...editJobStatus, status: e.target.value })}\n >\n {getStatusOptions()}\n \n
\n \n {structuredAddressWorkTypes?.includes(editDeveloperAndContact.workType) ? (\n getAddress(editDeveloperAndContact)\n ) : (\n <>{editDeveloperAndContact.address}\n )}\n
\n \n {canEditDeveloper.includes(editDeveloperAndContact.workType) && (\n
\n \n \n setEditDeveloperAndContact({\n ...editDeveloperAndContact,\n developer: e.target.value\n })\n }\n >\n \n {builderList.map((builder) => (\n \n ))}\n \n
\n )}\n {canEditSiteContact.includes(editDeveloperAndContact.workType) && (\n <>\n \n \n \n setEditDeveloperAndContact({\n ...editDeveloperAndContact,\n siteContact: e.target.value\n })\n }\n />\n
\n \n \n \n setEditDeveloperAndContact({\n ...editDeveloperAndContact,\n siteContactPhone: e.target.value\n })\n }\n />\n
\n \n )}\n \n \n setEditFieldComment({\n ...editFieldComment,\n comments: e.target.value\n })\n }\n />\n
\n Loading...
;\n\n return (\n <>\n \n
\n {(tab === 'cards' || tab === 'construction') && settings && structuredAddressWorkTypes && (\n \n
\n - \n
- \n
- \n
\n setSelectedGroup(e.target.value)}\n >\n \n {auth.hasClaim('CAN_VIEW_ALL_GROUPS') && }\n {fieldGroups?.map((g) => {\n return (\n \n );\n })}\n \n
\n \n \n \n \n \n\n \n \n
\n \n
\n\n \n {!isIOS &&\n setFlash(!flash)}\n >\n {flash ? 'Flash:ON' : 'Flash:OFF'}\n \n }\n \n \n
\n \n {(showTitle || useMulti) && filename && (\n \n {filename} #{imageNumber} - [{tags.join(', ').trim()}]\n \n )}\n
\n \n
\n\n {showTitle && (\n \n capture(e.target)}\n >\n Take {(!showTitle && !useMulti) && 'Single '}Picture\n \n
\n \n
\n \n )}\n {preview && (\n \n
\n Multiple Images
\n\n
\n \n Take multiple images quickly by providing the title and starting number. Each time you click Take\n Picture the image number will increment.\n
\n \n
\n \n \n {\n setFileName(e.target.value === '' ? null : e.target.value);\n setImageNumber(1);\n }}\n />\n
\n\n \n \n {\n if (!isNaN(parseInt(e.target.value))) {\n setImageNumber(parseInt(e.target.value ?? 1));\n } else {\n setImageNumber(1);\n }\n }}\n />\n
\n \n {comments === '' && storedComment && (\n setComments(storedComment)}\n style={{\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n maxWidth: '100%',\n display: 'block'\n }}\n >\n {storedComment}\n \n )}\n
\n \n \n setComments(e.target.value)}\n />\n
\n\n \n {\n sessionStorage.setItem(\n 'last-image-comment',\n JSON.stringify({ taskId: taskId, comments: comments })\n );\n if (filename) {\n setUseMulti(true);\n }\n setShowTitle(false);\n }}\n >\n Ok\n {' '}\n {filename ? (\n {\n setUseMulti(false);\n setShowTitle(false);\n setFileName(null);\n setImageNumber(1);\n }}\n >\n Clear\n \n ) : (\n \n )}\n
\n It appears there maybe an issue with this image
\n \n 
\n
\n Error while saving image:
\n {captureError}
\n \n \n\n {image && (\n 
\n
\n \n );\n};\n\nexport default Capture;\n","import React, { useEffect, useState, useMemo, useRef, useCallback } from 'react';\n\nconst Photos = () => {};\n\nexport default Photos;\n","import React, { useState, useEffect } from 'react';\nimport { Button } from 'reactstrap';\nimport { FileUpload } from '../../components/Files/FileAttachments';\nimport moment from 'moment';\nimport 'moment-timezone';\nimport { useQuery, useMutation } from '@apollo/react-hooks';\nimport gql from 'graphql-tag';\nimport { Link } from 'react-router-dom';\n\nconst GET_CONSTRUCTION = gql`\n query ConstructionQuery($constructionId: ID) {\n construction(id: $constructionId) {\n id\n status\n comments\n workOrder\n releaseDate\n projectFSAM\n description\n address\n contactDetails\n buildType\n workType\n premises\n deliveryPartner\n deliveryPartnerPm\n adtechPm\n scheduler\n originalDueDate\n updatedDueDate\n dbydExpiryDate\n startDueDate\n laseDate\n onsiteDate\n crqDate\n integrationDate\n acceleratedJob\n siteContact\n bomComments\n contract\n region\n developer\n quoteNumber\n prePaymentNumber\n checklist\n schedules {\n id\n name\n owner\n resource\n groupId\n issuedDate\n dueDate\n completedDate\n comments\n initial\n ignored\n isPayment\n onsiteDate\n }\n attachments(orderBy: { path: \"createdUtc\", descending: true }) {\n id\n title\n url\n sizeBytes\n tags\n createdUtc\n modifiedUtc\n comments\n }\n }\n users(claim: \"IS_CONSTRUCTION_USER\") {\n id\n email\n firstName\n lastName\n }\n }\n`;\n\nconst REMOVE_ATTACHMENT = gql`\n mutation RemoveAttachment($id: ID!) {\n removeAttachment(id: $id) {\n id\n title\n }\n }\n`;\n\nconst Attachments = (props) => {\n let { id, taskId } = props.match.params;\n\n const { data, refetch } = useQuery(GET_CONSTRUCTION, {\n fetchPolicy: 'no-cache',\n variables: { constructionId: id }\n });\n\n const [construction, setConstruction] = useState({});\n const [tags, setTags] = useState([]);\n\n const [removeAttachment] = useMutation(REMOVE_ATTACHMENT);\n\n useEffect(() => {\n if (data) {\n setConstruction(data.construction);\n setTags([...data.construction.schedules.filter((s) => s.id == taskId).map((s) => s.name)]);\n }\n }, [data]);\n\n const [documents, setDocuments] = useState([]);\n\n const [filter, setFilter] = useState('');\n const [withoutCategory, setWithoutCategory] = useState(false);\n\n const [modal, setModal] = useState(false);\n\n const toggle = () => {\n setModal(!modal);\n };\n\n useEffect(() => {\n refetch();\n }, [documents]);\n\n const handleChange = (id, e) => {\n let newDocuments = documents.map((d) => {\n if (d.id === id) {\n d[e.target.name] = e.target.value;\n }\n return d;\n });\n setDocuments([...newDocuments]);\n };\n\n const removeItem = (document, id) => {\n removeAttachment({ variables: { id: document.id } })\n .then(() => {\n refetch();\n })\n .catch((err) => {});\n };\n\n const onFileUploaded = (attachment) => {\n var docTemp = [...documents];\n docTemp.unshift({\n id: attachment.attachment.id,\n tags: tags.join(';'),\n title: attachment.attachment.title,\n sizeBytes: attachment.attachment.sizeBytes,\n url: attachment.attachment.url\n });\n setDocuments(docTemp);\n };\n\n function humanFileSize(bytes, si = false, dp = 1) {\n const thresh = si ? 1000 : 1024;\n\n if (Math.abs(bytes) < thresh) {\n return bytes + ' B';\n }\n\n const units = si\n ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']\n : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];\n let u = -1;\n const r = 10 ** dp;\n\n do {\n bytes /= thresh;\n ++u;\n } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);\n\n return bytes.toFixed(dp) + ' ' + units[u];\n }\n\n return (\n <>\n {documents && (\n <>\n \n
\n )}\n\n \n \n setFileName(e.target.value === '' ? null : e.target.value)}\n />\n
\n\n {/* \n \n
*/}\n\n \n { statuses.map((status, index) => {\n return \n })}\n
\n \n {comments === '' && storedComment && (\n setComments(storedComment)}\n style={{\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n maxWidth: '100%',\n display: 'block'\n }}\n >\n {storedComment}\n \n )}\n
\n \n \n setComments(e.target.value)}\n />\n
\n\n \n {\n saveImage(image, filename);\n sessionStorage.setItem('last-image-comment', JSON.stringify({ taskId: taskId, comments: comments }));\n }}\n >\n Save\n {' '}\n \n
\n \n
\n\n {withoutCategory && (\n \n
\n \n \n Back\n \n
\n \n There are documents without categories... Please choose a category and save.\n
\n )}\n\n {construction &&\n construction.attachments &&\n construction.attachments.map((doc, index) => (\n \n
\n \n ))}\n \n )}\n \n );\n};\n\nexport default Attachments;\n","import React from 'react';\n\nimport FieldWork from './views/FieldWork/FieldWork';\nimport FieldConstruction from './views/FieldWork/Construction';\nimport FieldCapture from './views/FieldWork/Capture';\nimport FieldCapture2 from './views/FieldWork/Capture2';\nimport FieldConstructionPhotos from './views/FieldWork/Photos';\nimport FieldAttachments from './views/FieldWork/Attachments';\n\nconst Breadcrumbs = React.lazy(() => import('./views/Base/Breadcrumbs'));\nconst Cards = React.lazy(() => import('./views/Base/Cards'));\nconst Carousels = React.lazy(() => import('./views/Base/Carousels'));\nconst Collapses = React.lazy(() => import('./views/Base/Collapses'));\nconst Dropdowns = React.lazy(() => import('./views/Base/Dropdowns'));\nconst Forms = React.lazy(() => import('./views/Base/Forms'));\nconst Jumbotrons = React.lazy(() => import('./views/Base/Jumbotrons'));\nconst ListGroups = React.lazy(() => import('./views/Base/ListGroups'));\nconst Navbars = React.lazy(() => import('./views/Base/Navbars'));\nconst Navs = React.lazy(() => import('./views/Base/Navs'));\nconst Paginations = React.lazy(() => import('./views/Base/Paginations'));\nconst Popovers = React.lazy(() => import('./views/Base/Popovers'));\nconst ProgressBar = React.lazy(() => import('./views/Base/ProgressBar'));\nconst Switches = React.lazy(() => import('./views/Base/Switches'));\nconst Tables = React.lazy(() => import('./views/Base/Tables'));\nconst Tabs = React.lazy(() => import('./views/Base/Tabs'));\nconst Tooltips = React.lazy(() => import('./views/Base/Tooltips'));\nconst BrandButtons = React.lazy(() => import('./views/Buttons/BrandButtons'));\nconst ButtonDropdowns = React.lazy(() => import('./views/Buttons/ButtonDropdowns'));\nconst ButtonGroups = React.lazy(() => import('./views/Buttons/ButtonGroups'));\nconst Buttons = React.lazy(() => import('./views/Buttons/Buttons'));\nconst Charts = React.lazy(() => import('./views/Charts'));\nconst Dashboard = React.lazy(() => import('./views/Dashboard'));\nconst CoreUIIcons = React.lazy(() => import('./views/Icons/CoreUIIcons'));\nconst Flags = React.lazy(() => import('./views/Icons/Flags'));\nconst FontAwesome = React.lazy(() => import('./views/Icons/FontAwesome'));\nconst SimpleLineIcons = React.lazy(() => import('./views/Icons/SimpleLineIcons'));\nconst Alerts = React.lazy(() => import('./views/Notifications/Alerts'));\nconst Badges = React.lazy(() => import('./views/Notifications/Badges'));\nconst Modals = React.lazy(() => import('./views/Notifications/Modals'));\nconst Colors = React.lazy(() => import('./views/Theme/Colors'));\nconst Typography = React.lazy(() => import('./views/Theme/Typography'));\nconst Widgets = React.lazy(() => import('./views/Widgets/Widgets'));\nconst Users = React.lazy(() => import('./views/Users/View'));\nconst User = React.lazy(() => import('./views/Users/User'));\nconst EditUser = React.lazy(() => import('./views/Users/EditUser'));\nconst Logs = React.lazy(() => import('./views/Logging/Logs'));\nconst Projects = React.lazy(() => import('./views/Projects/Projects'));\nconst Project = React.lazy(() => import('./views/Projects/Project'));\nconst Tasks = React.lazy(() => import('./views/Tasks/Tasks'));\nconst Task = React.lazy(() => import('./views/Tasks/Task'));\nconst FinanceView = React.lazy(() => import('./views/Finance/FinanceView'));\nconst ItemCodes = React.lazy(() => import('./views/ItemCodes/ItemCodes'));\nconst Lookups = React.lazy(() => import('./views/Lookups/Lookups'));\nconst Groups = React.lazy(() => import('./views/Groups/Groups'));\nconst Group = React.lazy(() => import('./views/Groups/Group'));\nconst EditGroup = React.lazy(() => import('./views/Groups/EditGroup'));\nconst IndependentContractors = React.lazy(() => import('./views/IndependentContractors/IndependentContractors'));\nconst Constructions = React.lazy(() => import('./views/Construction/Search'));\nconst ConstructionItemCodes = React.lazy(() => import('./views/Construction/ItemCodes'));\nconst SubcontractorCodes = React.lazy(() => import('./views/Construction/ItemChildCodes'));\nconst ConstructionEdit = React.lazy(() => import('./views/Construction/Edit'));\nconst ConstructionView = React.lazy(() => import('./views/Construction/View'));\nconst ConstructionBulkImport = React.lazy(() => import('./views/Construction/BulkImport'));\nconst Reports = React.lazy(() => import('./views/Reports/Reports'));\nconst ConstructionDailyRun = React.lazy(() => import('./views/Reports/ConstructionDailyRun'));\nconst ConstructionClaims = React.lazy(() => import('./views/Reports/ConstructionClaims'));\nconst ConstructionInvoicing = React.lazy(() => import('./views/Reports/ConstructionInvoicing'));\nconst ConstructionPayment = React.lazy(() => import('./views/Reports/ConstructionPayment'));\nconst SchedulingTool = React.lazy(() => import('./views/SchedulingTool/SchedulingTool'));\nconst SchedulingToolOld = React.lazy(() => import('./views/SchedulingTool/SchedulingToolOld'));\nconst ScheduleOverview = React.lazy(() => import('./views/SchedulingTool/ScheduleOverview'));\nconst TicketOfWork = React.lazy(() => import('./views/FieldWork/TicketOfWork'));\nconst SystemSettings = React.lazy(() => import('./views/SystemSettings/View'));\nconst DashboardSchedule = React.lazy(() => import('./views/Dashboard/Schedule'));\nconst BuilderApprovals = React.lazy(() => import('./views/BuilderApprovals/BuilderApprovals'));\nconst PotentialJobsView = React.lazy(() => import('./views/PotentialJobs/PotentialJobsView'));\nconst AdminTasks = React.lazy(() => import('./views/AdminTasks/AdminTasks'));\n\n// https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config\nconst routes = [\n { path: '/', exact: true, name: 'Home' },\n { path: '/dashboard', exact: true, name: 'Dashboard', component: Dashboard, claims: ['CAN_VIEW_DASHBOARD'] },\n {\n path: '/dashboard/schedule',\n exact: true,\n name: 'Schedule',\n component: DashboardSchedule,\n layout: 'NoChrome',\n claims: ['CAN_VIEW_DASHBOARD']\n },\n {\n path: '/dashboard/schedule/:groupid',\n exact: true,\n name: 'Schedule',\n component: DashboardSchedule,\n layout: 'NoChrome',\n claims: ['CAN_VIEW_DASHBOARD']\n },\n { path: '/field/:tab', exact: true, name: 'Field Work', component: FieldWork, claims: ['CAN_ACCESS_FIELD_WORK'] },\n { path: '/field/cards', name: 'Field Work', component: FieldWork, claims: ['CAN_ACCESS_FIELD_WORK'] },\n\n {\n path: '/field/construction/:constructionId/:taskId',\n exact: true,\n name: 'Construction',\n component: FieldConstruction,\n claims: ['CAN_ACCESS_FIELD_WORK']\n },\n {\n path: '/field/construction/:id/capture/:taskId',\n exact: true,\n name: 'Capture',\n component: FieldCapture,\n claims: ['CAN_ACCESS_FIELD_WORK'],\n layout: 'NoChrome'\n },\n {\n path: '/field/construction/:id/capture2/:taskId',\n exact: true,\n name: 'Capture2',\n component: FieldCapture2,\n claims: ['CAN_ACCESS_FIELD_WORK'],\n layout: 'NoChrome'\n },\n {\n path: '/field/construction/:id/:taskId/attachments',\n exact: true,\n name: 'Attachments',\n component: FieldAttachments,\n claims: ['CAN_ACCESS_FIELD_WORK']\n },\n {\n path: '/field/construction/:id/photos',\n exact: true,\n name: 'Photos',\n component: FieldConstructionPhotos,\n claims: ['CAN_ACCESS_FIELD_WORK'],\n layout: 'NoChrome'\n },\n {\n path: '/field/task/:constructionId/:taskId/ticket-of-work',\n exact: true,\n name: 'Ticket of Work',\n component: TicketOfWork,\n claims: ['CAN_ACCESS_TICKET_OF_WORK'],\n layout: 'NoChrome'\n },\n { path: '/theme', exact: true, name: 'Theme', component: Colors, claims: ['CAN_VIEW_STYLES'] },\n { path: '/theme/colors', name: 'Colors', component: Colors, claims: ['CAN_VIEW_STYLES'] },\n { path: '/theme/typography', name: 'Typography', component: Typography, claims: ['CAN_VIEW_STYLES'] },\n { path: '/base', exact: true, name: 'Base', component: Cards, claims: ['CAN_VIEW_STYLES'] },\n { path: '/base/cards', name: 'Cards', component: Cards, claims: ['CAN_VIEW_STYLES'] },\n { path: '/base/forms', name: 'Forms', component: Forms, claims: ['CAN_VIEW_STYLES'] },\n { path: '/base/switches', name: 'Switches', component: Switches, claims: ['CAN_VIEW_STYLES'] },\n { path: '/base/tables', name: 'Tables', component: Tables, claims: ['CAN_VIEW_STYLES'] },\n { path: '/base/tabs', name: 'Tabs', component: Tabs, claims: ['CAN_VIEW_STYLES'] },\n { path: '/base/breadcrumbs', name: 'Breadcrumbs', component: Breadcrumbs, claims: ['CAN_VIEW_STYLES'] },\n { path: '/base/carousels', name: 'Carousel', component: Carousels, claims: ['CAN_VIEW_STYLES'] },\n { path: '/base/collapses', name: 'Collapse', component: Collapses, claims: ['CAN_VIEW_STYLES'] },\n { path: '/base/dropdowns', name: 'Dropdowns', component: Dropdowns, claims: ['CAN_VIEW_STYLES'] },\n { path: '/base/jumbotrons', name: 'Jumbotrons', component: Jumbotrons, claims: ['CAN_VIEW_STYLES'] },\n { path: '/base/list-groups', name: 'List Groups', component: ListGroups, claims: ['CAN_VIEW_STYLES'] },\n { path: '/base/navbars', name: 'Navbars', component: Navbars, claims: ['CAN_VIEW_STYLES'] },\n { path: '/base/navs', name: 'Navs', component: Navs, claims: ['CAN_VIEW_STYLES'] },\n { path: '/base/paginations', name: 'Paginations', component: Paginations, claims: ['CAN_VIEW_STYLES'] },\n { path: '/base/popovers', name: 'Popovers', component: Popovers, claims: ['CAN_VIEW_STYLES'] },\n { path: '/base/progress-bar', name: 'Progress Bar', component: ProgressBar, claims: ['CAN_VIEW_STYLES'] },\n { path: '/base/tooltips', name: 'Tooltips', component: Tooltips, claims: ['CAN_VIEW_STYLES'] },\n { path: '/buttons', exact: true, name: 'Buttons', component: Buttons, claims: ['CAN_VIEW_STYLES'] },\n { path: '/buttons/buttons', name: 'Buttons', component: Buttons, claims: ['CAN_VIEW_STYLES'] },\n {\n path: '/buttons/button-dropdowns',\n name: 'Button Dropdowns',\n component: ButtonDropdowns,\n claims: ['CAN_VIEW_STYLES']\n },\n { path: '/buttons/button-groups', name: 'Button Groups', component: ButtonGroups, claims: ['CAN_VIEW_STYLES'] },\n { path: '/buttons/brand-buttons', name: 'Brand Buttons', component: BrandButtons, claims: ['CAN_VIEW_STYLES'] },\n { path: '/icons', exact: true, name: 'Icons', component: CoreUIIcons, claims: ['CAN_VIEW_STYLES'] },\n { path: '/icons/coreui-icons', name: 'CoreUI Icons', component: CoreUIIcons, claims: ['CAN_VIEW_STYLES'] },\n { path: '/icons/flags', name: 'Flags', component: Flags, claims: ['CAN_VIEW_STYLES'] },\n { path: '/icons/font-awesome', name: 'Font Awesome', component: FontAwesome, claims: ['CAN_VIEW_STYLES'] },\n {\n path: '/icons/simple-line-icons',\n name: 'Simple Line Icons',\n component: SimpleLineIcons,\n claims: ['CAN_VIEW_STYLES']\n },\n { path: '/notifications', exact: true, name: 'Notifications', component: Alerts, claims: ['CAN_VIEW_STYLES'] },\n { path: '/notifications/alerts', name: 'Alerts', component: Alerts, claims: ['CAN_VIEW_STYLES'] },\n { path: '/notifications/badges', name: 'Badges', component: Badges, claims: ['CAN_VIEW_STYLES'] },\n { path: '/notifications/modals', name: 'Modals', component: Modals, claims: ['CAN_VIEW_STYLES'] },\n { path: '/widgets', name: 'Widgets', component: Widgets, claims: ['CAN_VIEW_STYLES'] },\n { path: '/charts', name: 'Charts', component: Charts, claims: ['CAN_VIEW_STYLES'] },\n {\n path: '/admin/manage-users/users',\n exact: true,\n name: 'Users',\n component: Users,\n claims: ['CAN_MANAGE_USERS', 'CAN_MANAGE_ROLE_CLAIMS']\n },\n {\n path: '/admin/manage-users/rolePermissions',\n exact: true,\n name: 'Users',\n component: Users,\n claims: ['CAN_MANAGE_ROLE_CLAIMS']\n },\n {\n path: '/admin/manage-users/users/:id',\n exact: true,\n name: 'User Details',\n component: User,\n claims: ['CAN_MANAGE_USERS']\n },\n { path: '/admin/manage-users/users/:id/edit', name: 'Edit User', component: EditUser, claims: ['CAN_MANAGE_USERS'] },\n\n // Not in use\n // { path: '/orders', exact: true, name: 'Orders', component: Orders, role: 'Administrator' },\n // { path: '/orders/:id', exact: true, name: 'Order Details', component: Order },\n // { path: '/orders/:id/edit', exact: true, name: 'Edit Order', component: EditOrder, role: 'Administrator' },\n\n { path: '/logs', exact: true, name: 'Logs', component: Logs, claims: ['CAN_VIEW_LOGS'] },\n { path: '/projects', exact: true, name: 'Projects', component: Projects },\n { path: '/project/:id', name: 'Project Details', component: Project },\n { path: '/tasks', exact: true, name: 'Tasks', component: Tasks },\n { path: '/tasks/:id', name: 'Task', component: Task },\n\n // Not in use\n // { path: '/emails', exact: true, name: 'Emails', component: Emails, role: 'Administrator' },\n // { path: '/emails/:id', exact: true, name: 'Email Details', component: Email, role: 'Administrator' },\n // { path: '/emails/:id/attachments', exact: true, name: 'Tag Attachments', component: EmailTagAttachments },\n\n { path: '/finance', exact: true, name: 'Finance', component: FinanceView, claims: ['CAN_ACCESS_FINANCE'] },\n { path: '/finance/:tab', exact: true, name: 'Finance', component: FinanceView, claims: ['CAN_ACCESS_FINANCE'] },\n\n { path: '/admin', exact: true, name: 'Admin', claims: ['CAN_ACCESS_ADMINISTRATION'] },\n {\n path: '/admin/itemcodes',\n exact: true,\n name: 'Pre-install Item Codes',\n component: ItemCodes,\n claims: ['CAN_MANAGE_ITEM_CODES']\n },\n { path: '/admin/groups', exact: true, name: 'Groups', component: Groups, claims: ['CAN_MANAGE_GROUPS'] },\n { path: '/admin/groups/:id', exact: true, name: 'Group Details', component: Group, claims: ['CAN_MANAGE_GROUPS'] },\n {\n path: '/admin/groups/:id/edit',\n exact: true,\n name: 'Edit Group',\n component: EditGroup,\n claims: ['CAN_MANAGE_GROUPS']\n },\n {\n path: '/admin/independent-contractors',\n exact: true,\n name: 'Independent Contractors',\n component: IndependentContractors,\n claims: ['CAN_MANAGE_INDEPENDENT_CONTRACTORS']\n },\n { path: '/admin/lookups', exact: true, name: 'Lookups', component: Lookups, claims: ['CAN_MANAGE_LOOKUPS'] },\n {\n path: '/admin/settings',\n exact: true,\n name: 'System Settings',\n component: SystemSettings,\n claims: ['CAN_MANAGE_SYSTEM_SETTINGS']\n },\n {\n path: '/admin/settings/:tab',\n exact: true,\n name: 'System Settings',\n component: SystemSettings,\n claims: ['CAN_MANAGE_SYSTEM_SETTINGS']\n },\n {\n path: '/admin/settings/jobSettings/:tab/:worktype',\n exact: true,\n name: 'jobSettings',\n component: SystemSettings,\n claims: ['CAN_MANAGE_SYSTEM_SETTINGS']\n },\n // temp, this is a way to reference the old data\n {\n path: '/admin/settings/jobSettings/:tab',\n exact: true,\n name: 'jobSettings',\n component: SystemSettings,\n claims: ['CAN_MANAGE_SYSTEM_SETTINGS']\n },\n {\n path: '/jobs',\n exact: true,\n name: 'Construction Search',\n component: Constructions,\n claim: ['CAN_ACCESS_CONSTRUCTION']\n },\n {\n path: '/potentialjobs',\n exact: true,\n name: 'Potential Jobs',\n component: PotentialJobsView,\n claims: ['CAN_ACCESS_POTENTIAL_JOBS']\n },\n {\n path: '/potentialjobs/:tab',\n exact: true,\n name: 'Potential Jobs',\n component: PotentialJobsView,\n claims: ['CAN_ACCESS_POTENTIAL_JOBS']\n },\n {\n path: '/scheduling-tool',\n exact: true,\n name: 'Scheduling Tool',\n component: SchedulingTool,\n claims: ['CAN_ACCESS_SCHEDULE']\n },\n {\n path: '/scheduling-tool/:date',\n exact: true,\n name: 'Scheduling Tool',\n component: SchedulingTool,\n claims: ['CAN_ACCESS_SCHEDULE']\n },\n {\n path: '/scheduling-tool-old',\n exact: true,\n name: 'Scheduling Tool Old',\n component: SchedulingToolOld,\n claims: ['CAN_ACCESS_OLD_SCHEDULE']\n },\n {\n path: '/scheduling-tool-old/:date',\n exact: true,\n name: 'Scheduling Tool Old',\n component: SchedulingToolOld,\n claims: ['CAN_ACCESS_OLD_SCHEDULE']\n },\n {\n path: '/schedule-overview',\n exact: true,\n name: 'Schedule Overview',\n component: ScheduleOverview,\n claims: ['CAN_ACCESS_SCHEDULE']\n },\n {\n path: '/admin/constructioncodes',\n exact: true,\n name: 'Construction Item Codes',\n component: ConstructionItemCodes,\n claims: ['CAN_MANAGE_CONSTRUCTION_CODES']\n },\n {\n path: '/admin/constructioncodes/:id',\n exact: true,\n name: 'Construction Item Codes',\n component: ConstructionItemCodes,\n claims: ['CAN_MANAGE_CONSTRUCTION_CODES']\n },\n {\n path: '/admin/childcodes',\n exact: true,\n name: 'Subcontractor Codes',\n component: SubcontractorCodes,\n claims: ['CAN_MANAGE_SUBCONTRACTOR_CODES']\n },\n {\n path: '/admin/childcodes/:id',\n exact: true,\n name: 'Subcontractor Codes',\n component: SubcontractorCodes,\n claims: ['CAN_MANAGE_SUBCONTRACTOR_CODES']\n },\n {\n path: '/builderapprovals',\n exact: true,\n name: 'Builder Approvals',\n component: BuilderApprovals,\n claims: ['CAN_ACCESS_BUILDER_APPROVALS']\n },\n {\n path: '/builderapprovals/:tab',\n exact: true,\n name: 'Builder Approvals',\n component: BuilderApprovals,\n claims: ['CAN_ACCESS_BUILDER_APPROVALS']\n },\n {\n path: '/admin/admintasks',\n exact: true,\n name: 'Admin Tasks',\n component: AdminTasks,\n claims: ['CAN_ACCESS_ADMINISTRATOR_TASKS']\n },\n {\n path: '/construction/:id/edit',\n exact: true,\n name: 'Construction Edit',\n component: ConstructionEdit,\n claim: ['CAN_ACCESS_CONSTRUCTION']\n },\n // { path: '/construction/:id/ticket-of-work', exact: true, name: 'Ticket of Work', component: TicketOfWork, role: 'Program: Construction', layout: 'NoChrome' },\n {\n path: '/construction/:id',\n exact: true,\n name: 'Construction View',\n component: ConstructionView,\n claim: ['CAN_ACCESS_CONSTRUCTION']\n },\n {\n path: '/construction/:id/:tab',\n exact: true,\n name: 'Construction View',\n component: ConstructionView,\n claim: ['CAN_ACCESS_CONSTRUCTION']\n },\n {\n path: '/construction-bulk-import',\n exact: true,\n name: 'Construction Bulk Import',\n component: ConstructionBulkImport,\n claim: ['CAN_ACCESS_CONSTRUCTION']\n },\n { path: '/reports', exact: true, name: 'Reports', component: Reports, claims: ['CAN_VIEW_REPORTS'] },\n {\n path: '/reports/construction-daily-run',\n exact: true,\n name: 'Construction: Daily Run',\n component: ConstructionDailyRun,\n claim: ['CAN_ACCESS_CONSTRUCTION']\n },\n {\n path: '/reports/construction-claims',\n exact: true,\n name: 'Construction: Claims',\n component: ConstructionClaims,\n claim: ['CAN_ACCESS_CONSTRUCTION']\n },\n {\n path: '/reports/construction-invoicing',\n exact: true,\n name: 'Construction: Invoicing',\n component: ConstructionInvoicing,\n claim: ['CAN_ACCESS_CONSTRUCTION']\n },\n {\n path: '/reports/construction-payment',\n exact: true,\n name: 'Construction: Payment',\n component: ConstructionPayment,\n claim: ['CAN_ACCESS_CONSTRUCTION']\n }\n];\n\nexport default routes;\n","import React, { useState, useEffect, useContext, createContext } from 'react';\nimport * as firebase from 'firebase/app';\nimport 'firebase/auth';\nimport { isMobile } from 'react-device-detect';\n\nvar config = {\n apiKey: 'AIzaSyAPm1NxO4NqAPVQH5uNT63gR0oKmZTF3jU',\n authDomain: 'lequinn-ce0b2.firebaseapp.com',\n databaseURL: 'https://lequinn-ce0b2.firebaseio.com',\n projectId: 'lequinn-ce0b2',\n storageBucket: 'lequinn-ce0b2.appspot.com',\n messagingSenderId: '308383702687',\n appId: '1:308383702687:web:9514608070a4f3d1bb8caa',\n measurementId: 'G-YRB6V94H9Y'\n};\n\nfirebase.initializeApp(config);\n\nconst authContext = createContext();\n\nexport function ProvideAuth({ children }) {\n const auth = useProvideAuth();\n return \n \n {doc.title}\n \n
\n \n {moment.utc(doc.createdUtc).tz(moment.tz.guess()).format('DD MMM YYYY hh:mm A')} -{' '}\n {humanFileSize(doc.sizeBytes)}\n
\n \n \n
\n {doc.tags}
\n