\n {!editable ? <>\n {/* Edit button */}\n {!referenceImage && signedLockedAccess(assessmentDetails?.assessmentStage) && hideIt &&
{setEditable(true);} \n }>\n
Edit\n
}\n\n {assessmentDetails?.touchView === null ? 'Touch & View details not found. Click edit to start adding details.'\n\n :\n\n
\n\n {/* Reference image component */}\n {referenceImage &&
}\n\n {!referenceImage && <>\n\n {/* Reference images button */}\n \n
setReferenceImage(true)}\n >\n \n {/* \n Reference Images\n \n\n\n {/* Saved data */}\n Are There Any Open Areas? {assessmentDetails?.touchView?.openAreas === 1 ? 'Yes' : 'No'}
\n\n {assessmentDetails?.touchView?.openAreas === 1 && <>\n Is Yellow Fibrin present in the wound? {assessmentDetails?.touchView?.yellowFibrin === 1 ? 'Yes' : 'No'}
\n Is Biofilm present in the wound? {assessmentDetails?.touchView?.bioFilm === 1 ? 'Yes' : 'No'}
\n }\n\n {allNullCheck(assessmentDetails?.touchView?.tissueTemperature) ?\n Tissue Temperature: \n {tissueTemperature && tissueTemperature.length > 0 && tissueTemperature.map((data) => {\n if (assessmentDetails?.touchView?.tissueTemperature === data.key) {\n return data.value\n }\n })}\n
\n : ''\n }\n\n {allNullCheck(assessmentDetails?.touchView?.tissueFirmness) ?\n Tissue Firmness: \n {tissueFirmness && tissueFirmness.length > 0 && tissueFirmness.map((data) => {\n if (assessmentDetails?.touchView?.tissueFirmness === data.key) {\n return data.value\n }\n })}\n
\n : ''\n }\n\n {allNullCheck(assessmentDetails?.touchView?.painLevel) ?\n Pain Level: \n {painLevel && painLevel.length > 0 && painLevel.map((data) => {\n if (assessmentDetails?.touchView?.painLevel === data.key) {\n return data.value\n }\n })}\n
\n : ''\n }\n\n {allNullCheck(assessmentDetails?.touchView?.blanchTest) ?\n Blanch Test: Capillary Refill of Intact Skin: \n {blanchTest && blanchTest.length > 0 && blanchTest.map((data) => {\n if (assessmentDetails?.touchView?.blanchTest === data.key) {\n return data.value\n }\n })}\n
\n : ''\n }\n\n {allNullCheck(assessmentDetails?.touchView?.periwoundCondition) ?\n Periwound Skin Condition: \n {periwoundCondition && periwoundCondition.length > 0 && periwoundCondition.map((data) => {\n if (assessmentDetails?.touchView?.periwoundCondition === data.key) {\n return data.value\n }\n })}\n
\n : ''\n }\n {allNullCheck(assessmentDetails?.touchView?.evidenceOfInfection) ?\n Evidence of Infection: {assessmentDetails?.touchView?.evidenceOfInfection === 1 ? 'Yes' : 'No'}
\n :\n ''}\n\n Exudate Type: \n {assessmentDetails?.touchView?.exudateType && assessmentDetails?.touchView?.exudateType.length > 0 && assessmentDetails?.touchView?.exudateType.map((data) => {\n exudateTypeOption && exudateTypeOption.length > 0 && exudateTypeOption.map((item) => {\n if (item.key === data) {\n exudateTypeDisplay.push(item.value)\n }\n })\n })}\n {exudateTypeDisplay && exudateTypeDisplay.length > 0 ? exudateTypeDisplay.join(', ') : '-'}\n
\n\n {assessmentDetails?.touchView?.exudateType &&Array.isArray(exudateType)&& exudateType.indexOf('none') === -1&&assessmentDetails?.touchView?.exudateAmount&& assessmentDetails?.touchView?.exudateType.length > 0 &&\n Exudate Amount: \n {exudateAmount && exudateAmount.length > 0 && exudateAmount.map((data) => {\n if (assessmentDetails?.touchView?.exudateAmount === data.key) {\n return data.value\n }\n })}\n
}\n\n {allNullCheck(assessmentDetails?.touchView?.woundOdor) ?\n Wound Odor: {assessmentDetails?.touchView?.woundOdor === 1 ? 'Yes' : 'No'}
\n : ''\n }\n\n\n {allNullCheck(assessmentDetails?.touchView?.woundEdges) ?\n Wound Edges: \n {woundEdges && woundEdges.length > 0 && woundEdges.map((data) => {\n if (assessmentDetails?.touchView?.woundEdges === data.key) {\n return data.value\n }\n })}\n
\n :\n ''\n }\n\n {allNullCheck(assessmentDetails?.touchView?.skinColorAroundWound) ?\n Skin Color Surrounding Wound: \n {skinColorAroundWound && skinColorAroundWound.length > 0 && skinColorAroundWound.map((data) => {\n if (assessmentDetails?.touchView?.skinColorAroundWound === data.key) {\n return data.value\n }\n })}\n
\n :\n ''\n }\n\n {allNullCheck(assessmentDetails?.touchView?.induration) ?\n Induration: \n {induration && induration.length > 0 && induration.map((data) => {\n if (assessmentDetails?.touchView?.induration === data.key) {\n return data.value\n }\n })}\n
\n :\n ''\n }\n\n {allNullCheck(assessmentDetails?.touchView?.edema) ?\n Edema: \n {edema && edema.length > 0 && edema.map((data) => {\n if (assessmentDetails?.touchView?.edema === data.key) {\n return data.value\n }\n })}\n
\n :\n ''\n }\n\n {allNullCheck(assessmentDetails?.touchView?.granulationTissue) ?\n Granulation Tissue: \n {granulationTissue && granulationTissue.length > 0 && granulationTissue.map((data) => {\n if (assessmentDetails?.touchView?.granulationTissue === data.key) {\n return data.value\n }\n })}\n
\n :\n ''\n }\n\n {allNullCheck(assessmentDetails?.touchView?.epithelialization) ?\n Epithelialization: \n {epithelialization && epithelialization.length > 0 && epithelialization.map((data) => {\n if (assessmentDetails?.touchView?.epithelialization === data.key) {\n return data.value\n }\n })}\n
\n :\n ''\n }\n\n }\n\n \n }\n \n\n :\n\n <>\n {/* On close warning */}\n {closeWarning &&
\n }\n\n {/* Form field */}\n
\n )\n}\n","import React,{useState, useEffect} from 'react';\nimport style from './assessmentNotes.module.scss';\nimport { Button, Form, TextArea } from '../../primary';\nimport { useForm } from 'react-hook-form';\nimport { useParams } from 'react-router';\nimport { CANCEL_BTN, SAVE_BTN } from '../../../constants';\nimport { fullMonthFormatDate } from '../../../utils';\nimport {allowEnterData} from '../../../utils/patientsHelper';\nimport Loader from '../../../static/images/spinner.svg';\nexport const AssessmentNotes = ({ notes, postNotes, detailAssessment, hideIt }) => {\n const { patientId } = useParams();\n const { assessmentId } = useParams();\n const { register, handleSubmit, reset } = useForm();\n const clearField = () => {\n reset();\n }\n const doSubmit = (data) => {\n if (data.notes !== '') {\n const payload = {\n \"assessmentId\": assessmentId,\n \"patientId\": patientId,\n \"notes\": data.notes\n }\n postNotes(payload);\n }\n reset();\n }\n const allowEnter = (e) => {\n allowEnterData(e)\n // if (e.key === 'Enter') {\n // e.stopPropagation();\n // }\n }\n\n\n // <-----ZoomIn/Out OPtion----->\nconst [initalState, setInitalState] = useState(0);\nconst [zoomClick, setZoomClick] = useState(false);\n \n const zoomInAction = (direction) => {\n if(initalState <= 8){\n setZoomClick(true)\n setInitalState(initalState + 1) \n }\n else{\n setZoomClick(true)\n setInitalState(9)\n }\n\n // const delta = 10 * direction;\n // const element = document.getElementById('patient_wound');\n // const positionInfo = element.getBoundingClientRect();\n // element.style.width = positionInfo.width+delta+'px';\n // element.style.height = positionInfo.height+(delta-1)+'px';\n }\n\n\n const zoomOutAction = (direction) => {\n if(initalState >= 1 && initalState <= 9) {\n setZoomClick(true)\n setInitalState(initalState - 1)\n }\n \n if(initalState === 0){\n setZoomClick(true)\n setInitalState(0)\n } \n if (initalState < 0){\n setZoomClick(true)\n setInitalState(0)\n } \n } \n\n const reSizeAction = () => {\n setZoomClick(true)\n setInitalState(0) \n }\n\n useEffect(()=>{\n if(initalState === 0){\n setZoomClick(true)\n setInitalState(0)\n } \n },[initalState])\n// <-----ZoomIn/Out OPtion----->\n\nconst [tinyDelay, setTinyDelay] = useState(false)\n\nuseEffect(() => {\n setTimeout(() => {\n setTinyDelay(true)\n }, 2500)\n}, [])\n \n return
\n{!tinyDelay ?
\n\t\t\t\t
\n\t\t\t
:\n <>\n
\n\n
\n
\n {/*
*/}\n
\n
\n {detailAssessment?.isWoundWithoutPhoto === 0 &&\n
\n
\n
\n
\n
\n
\n
\n
\n }\n
\n\n
\n
\n {hideIt &&
\n
Notes: (Optional)
\n
\n
}\n {notes&&Array.isArray(notes)&¬es?.length !== 0 &&
\n {notes&&Array.isArray(notes) && notes.map((data, index) => {\n return
\n
\n {data.createdBy} | {fullMonthFormatDate(data.createdDate)} | {data.createdByRole} \n
\n
{data?.notes === '' ? 'Unknown' : data?.notes?.split('\\n').map(str =>
{str}
)}
\n
\n })}\n
}\n
\n
\n\n
}\n
\n}\n","import React, { useEffect, useState } from 'react'\nimport { CANCEL_ID, CANCEL_BTN, SUBMIT_ID, SAVE_BTN } from '../../../constants/index';\nimport { Form, Button, SelectBox, DropDownItems } from '../../primary'\nimport { useForm } from 'react-hook-form';\nimport { useSelector } from 'react-redux';\nimport { useParams } from 'react-router';\nimport { postRiskAssessmentsAsync, setRiskAssessmentResponseScore } from '../../../app/patientSlice'\nimport { RiskAssessmentScale } from './riskAssessmentScale';\nexport function CreateRiskAssessmentFormView({ styles, dispatch, checkRiskAssessmentScale, handleCancel }) {\n const ERR_MSG=\"Please select the field\";\n const [modalShowRiskScale, setModalShowRiskScale] = useState(false);\n /* Use hook form */\n const { reset, register, handleSubmit, control, errors } = useForm({\n mode: 'all'\n });\n const { patientId } = useParams();\n // Get API fetch loading\n const loading = useSelector(state => state.app.loading);\n const bradenSensoryPerception = useSelector(state => state.patient.bradenSensoryPerception);\n const bradenMoisture = useSelector(state => state.patient.bradenMoisture);\n const bradenActivity = useSelector(state => state.patient.bradenActivity);\n const bradenMobility = useSelector(state => state.patient.bradenMobility);\n const bradenNutrition = useSelector(state => state.patient.bradenNutrition);\n const bradenFrictionShear = useSelector(state => state.patient.bradenFrictionShear);\n const nortonPhysicalCondition = useSelector(state => state.patient.nortonPhysicalCondition);\n const nortonMentalCondition = useSelector(state => state.patient.nortonMentalCondition);\n const nortonActivity = useSelector(state => state.patient.nortonActivity);\n const nortonMobility = useSelector(state => state.patient.nortonMobility);\n const nortonIncontinence = useSelector(state => state.patient.nortonIncontinence);\n const riskAssessmentResponseScore = useSelector(state => state.patient.riskAssessmentResponseScore);\n useEffect(() => {\n dispatch(setRiskAssessmentResponseScore(''));\n }, [dispatch]);\n\n useEffect(() => {\n if (riskAssessmentResponseScore) {\n setModalShowRiskScale(true);\n } else {\n setModalShowRiskScale(false);\n }\n\n }, [riskAssessmentResponseScore]);\n /* Handle submit */\n const onSubmit = (data) => {\n let payload;\n if (checkRiskAssessmentScale === 'norton') {\n const norton_payload = {\n \"physicalCondition\": data.physicalCondition,\n \"mentalCondtion\": data.mentalCondition,\n \"activity\": data.activity,\n \"mobility\": data.mobility,\n \"incontinence\": data.incontinence,\n\n };\n payload = {\n \"type\": \"norton\",\n \"norton\": norton_payload,\n \"braden\": null\n }\n }\n else {\n const braden_payload = {\n \"sensoryPerception\": data.sensoryPerception,\n \"moisture\": data.moisture,\n \"activity\": data.activity,\n \"mobility\": data.mobility,\n \"nutrition\": data.nutrition,\n \"frictionShear\": data.frictionShear,\n\n };\n payload = {\n \"type\": \"braden\",\n \"braden\": braden_payload,\n \"norton\": null\n }\n }\n if (payload) {\n dispatch(postRiskAssessmentsAsync(patientId, payload));\n }\n }\n return (\n <>\n {!modalShowRiskScale &&
\n {/* Form */}\n {!modalShowRiskScale && checkRiskAssessmentScale && checkRiskAssessmentScale === 'norton' &&
} \n {!modalShowRiskScale && checkRiskAssessmentScale && checkRiskAssessmentScale === 'braden' &&
\n }\n
\n }\n {/*Modal Scale*/}\n {modalShowRiskScale &&\n
\n }\n \n )\n}\n","import React, { useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { EditFilter, EditListViewMenu, EditCrad, EditMarketingBannerView } from '../Layouts';\nimport { withRouter, useParams } from 'react-router-dom';\nimport { layoutDetailsAsync } from '../../../app/layoutsSlice';\nimport { connect, useSelector } from 'react-redux';\n\nexport let LayoutsDetail = ({ dispatch,history }) => {\n\n const { layoutId } = useParams();\n const layoutData = useSelector(state => state.layouts.deatilLayout);\n useEffect(() => {\n if (layoutId) {\n dispatch(layoutDetailsAsync(layoutId,history))\n }\n }, [layoutId, dispatch]);\n const detailView = {\n 'listviewmenu':
,\n 'filter':
,\n 'card':
,\n 'marketingbanner':
,\n }\n return
\n {detailView && detailView[layoutData.type]}\n
\n}\n\nLayoutsDetail.propTypes = {\n layoutRowData: PropTypes.any,\n}\n\nLayoutsDetail = connect()(withRouter(LayoutsDetail));\n","import React, { useEffect, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { connect, useSelector } from \"react-redux\";\nimport { withRouter } from \"react-router\";\nimport { LIST_VIEW_LIMIT, NEW_ADMISSION_POA } from \"../../../constants\";\nimport { getBiReportsListAsync } from \"../../../app/patientSlice\";\nimport { DataTable, Pagination } from \"../../secondary\";\nimport { Sorting, Pagination as assignedPagination } from \"../../../utils\";\nimport { Header } from \"../../secondary/Header\";\nimport style from \"./biReportsList.module.scss\";\nimport Spreadsheet from \"../../../static/images/ExportSpredsheet.svg\";\nimport { CSVLink } from \"react-csv\";\nimport { format } from \"date-fns\";\n\nexport let BiReportsList = ({ dispatch, history, setDownloadDataValue }) => { //NOSONAR\n const biReportsListData = useSelector((state) => state.patient.biReportsList);\n const biReportSummaryCsvData = useSelector(\n (state) => state.patient.biReportSummaryCsv\n );\n const biReportDetailCsvData = useSelector(\n (state) => state.patient.biReportDetailCsv\n );\n const customerName = useSelector((state) => state.user.customerName);\n\n const columns = [\n {\n Header: \"Wound photo\",\n accessor: \"woundImage\",\n imageData: \"picture\",\n disableSortBy: true,\n },\n {\n Header: \"Wound Id\",\n accessor: \"woundId\",\n },\n {\n Header: \"Wound acquired\",\n accessor: \"woundAcquired\",\n restWidth: \"200px\",\n },\n {\n Header: \"Re-eval ID\",\n accessor: \"revalId\",\n restWidth: \"120px\",\n },\n {\n Header: \"Patient\\'s name\",\n accessor: \"patientName\",\n restWidth: \"200px\",\n },\n {\n Header: \"DOB\",\n accessor: \"dob\",\n restWidth: \"150px\",\n },\n {\n Header: \"Facility/Location\",\n accessor: \"facilityLocation\",\n restWidth: \"150px\",\n },\n {\n Header: \"Admission date\",\n accessor: \"admissionDate\",\n restWidth: \"150px\",\n },\n\n {\n Header: \"Discharge date\",\n accessor: \"dischargeDate\",\n restWidth: \"150px\",\n },\n {\n Header: \"Wound photo taken by\",\n accessor: \"woundPhotoTakenBy\",\n restWidth: \"180px\",\n },\n {\n Header: \"Wound photo taken on \",\n accessor: \"woundPhotoTakenOn\",\n restWidth: \"190px\",\n },\n {\n Header: \"Last assessed \",\n accessor: \"lastAssessed\",\n restWidth: \"170px\",\n },\n {\n Header: \"Surface area\",\n accessor: \"surfaceArea\",\n restWidth: \"150px\",\n },\n {\n Header: \"Length\",\n accessor: \"length\",\n restWidth: \"150px\",\n },\n\n {\n Header: \"Width\",\n accessor: \"width\",\n restWidth: \"150px\",\n },\n\n {\n Header: \"Depth\",\n accessor: \"depth\",\n restWidth: \"150px\",\n },\n {\n Header: \"Tuneling\",\n accessor: \"tuneling\",\n restWidth: \"150px\",\n },\n {\n Header: \"Undermining\",\n accessor: \"undermining\",\n restWidth: \"150px\",\n },\n {\n Header: \"HPR 1\",\n accessor: \"hpr1\",\n restWidth: \"150px\",\n },\n {\n Header: \"HPR 2\",\n accessor: \"hpr2\",\n restWidth: \"150px\",\n },\n {\n Header: \"HPR 3\",\n accessor: \"hpr3\",\n restWidth: \"150px\",\n },\n {\n Header: \"History/Cause\",\n accessor: \"historyCause\",\n restWidth: \"150px\",\n },\n {\n Header: \"Anatomy\",\n accessor: \"anatomy\",\n restWidth: \"150px\",\n },\n {\n Header: \"Condition POA \",\n accessor: \"conditionPOA\",\n restWidth: \"150px\",\n },\n {\n Header: \"Photo type \",\n accessor: \"photoType\",\n restWidth: \"150px\",\n },\n {\n Header: \"Documentation type\",\n accessor: \"documentationType\",\n restWidth: \"170px\",\n },\n {\n Header: \"Wound age\",\n accessor: \"woundAge\",\n restWidth: \"150px\",\n },\n {\n Header: \"Tissue type\",\n accessor: \"tissueType\",\n restWidth: \"150px\",\n },\n {\n Header: \"Are there any open areas \",\n accessor: \"areThereAnyOpenAreas\",\n restWidth: \"200px\",\n },\n {\n Header: \"Wound at risk of infection\",\n accessor: \"woundAtRiskOfInfection\",\n restWidth: \"200px\",\n },\n {\n Header: \"Exudate type\",\n accessor: \"exudateType\",\n restWidth: \"150px\",\n },\n {\n Header: \"Exudate amount\",\n accessor: \"exudateAmount\",\n restWidth: \"150px\",\n },\n {\n Header: \"Wound bed identified \",\n accessor: \"woundbedIdentified\",\n restWidth: \"180px\",\n },\n {\n Header: \"Wound classification \",\n accessor: \"woundClassification\",\n restWidth: \"180px\",\n },\n {\n Header: \"Wound progress\",\n accessor: \"woundProgress\",\n restWidth: \"150px\",\n },\n {\n Header: \"Intervention name\",\n accessor: \"interventionName\",\n restWidth: \"170px\",\n },\n {\n Header: \"Last updated by\",\n accessor: \"lastUpdatedBy\",\n restWidth: \"150px\",\n },\n {\n Header: \"Last updated on\",\n accessor: \"lastUpdatedOn\",\n restWidth: \"150px\",\n },\n {\n Header: \"Dressing appearance\",\n accessor: \"dressingAppearance\",\n restWidth: \"180px\",\n },\n {\n Header: \"Debridement\",\n accessor: \"debridement\",\n restWidth: \"150px\",\n },\n {\n Header: \"Wound cleanser\",\n accessor: \"woundCleanser\",\n restWidth: \"150px\",\n },\n {\n Header: \"Skin protectant\",\n accessor: \"skinProtectant\",\n restWidth: \"150px\",\n },\n {\n Header: \"Primary dressing\",\n accessor: \"primaryDressing\",\n restWidth: \"150px\",\n },\n {\n Header: \"Secondary dressing\",\n accessor: \"secondaryDressing\",\n restWidth: \"170px\",\n },\n {\n Header: \"Compression\",\n accessor: \"compression\",\n restWidth: \"150px\",\n },\n {\n Header: \"Modalities\",\n accessor: \"modalities\",\n restWidth: \"150px\",\n },\n {\n Header: \"Additional care\",\n accessor: \"additionalCare\",\n restWidth: \"160px\",\n },\n {\n Header: \"Dressing change frequency\",\n accessor: \"dressingChangeFrequency\",\n restWidth: \"210px\",\n },\n ];\n\n const downloadDate = format(new Date(), \"MM.dd.yyyy-hh.mm.aaa\");\n\n //redirect\n const getSelectedRowData = (data) => {\n if (data) {\n history.push(\n `/${\"patients\"}/${data.ne1Id}/${\"assessment\"}/${data.woundId}`\n );\n }\n };\n\n const deleteDataList = () => {};\n\n const selectRowCount = () => {};\n\n\n\n const fileHeaders = [\n { label: \"Wound Id\", key: \"woundId\" },\n { label: \"Ne1 Id\", key: \"ne1Id\" },\n { label: \"Wound acquired\", key: \"woundAcquired\" },\n { label: \"Re-eval Id\", key: \"revalId\" },\n { label: \"Patient\\'s name\", key: \"patientName\" },\n { label: \"DOB\", key: \"dob\" },\n { label: \"Facility/Location\", key: \"facilityLocation\" },\n { label: \"Admission date\", key: \"admissionDate\" },\n { label: \"Discharge date\", key: \"dischargeDate\" },\n { label: \"Wound photo taken by\", key: \"woundPhotoTakenBy\" },\n { label: \"Wound photo taken on\", key: \"woundPhotoTakenOn\" },\n { label: \"Last assessed\", key: \"lastAssessed\" },\n { label: \"Surface area\", key: \"surfaceArea\" },\n { label: \"Length\", key: \"length\" },\n { label: \"Width\", key: \"width\" },\n { label: \"Depth\", key: \"depth\" },\n { label: \"Tuneling\", key: \"tuneling\" },\n { label: \"Undermining\", key: \"undermining\" },\n { label: \"HPR 1\", key: \"hpr1\" },\n { label: \"HPR 2\", key: \"hpr2\" },\n { label: \"HPR 3\", key: \"hpr3\" },\n { label: \"History/Cause\", key: \"historyCause\" },\n { label: \"Anatomy\", key: \"anatomy\" },\n { label: \"Condition POA\", key: \"conditionPOA\" },\n { label: \"Photo type\", key: \"photoType\" },\n { label: \"Documentation type\", key: \"documentationType\" },\n { label: \"Wound age\", key: \"woundAge\" },\n { label: \"Tissue type\", key: \"tissueType\" },\n { label: \"Are there any open areas\", key: \"areThereAnyOpenAreas\" },\n { label: \"Wound at risk of infection\", key: \"woundAtRiskOfInfection\" },\n { label: \"Exudate type\", key: \"exudateType\" },\n { label: \"Exudate amount\", key: \"exudateAmount\" },\n { label: \"Wound bed identified\", key: \"woundbedIdentified\" },\n { label: \"Wound classification\", key: \"woundClassification\" },\n { label: \"Wound progress\", key: \"woundProgress\" },\n { label: \"Intervention name\", key: \"interventionName\" },\n { label: \"Last updated by\", key: \"lastUpdatedBy\" },\n { label: \"Last updated on\", key: \"lastUpdatedOn\" },\n { label: \"Dressing appearance\", key: \"dressingAppearance\" },\n { label: \"Debridement\", key: \"debridement\" },\n { label: \"Wound cleanser\", key: \"woundCleanser\" },\n { label: \"Skin protectant\", key: \"skinProtectant\" },\n { label: \"Primary dressing\", key: \"primaryDressing\" },\n { label: \"Secondary dressing\", key: \"secondaryDressing\" },\n { label: \"Compression\", key: \"compression\" },\n { label: \"Modalities\", key: \"modalities\" },\n { label: \"Additional care\", key: \"additionalCare\" },\n { label: \"Dressing change frequency\", key: \"dressingChangeFrequency\" },\n ];\n\n const [csvHeader, setCsvHeader] = useState([\n { label: \"Wound Id\", key: \"woundId\" },\n { label: \"Ne1 Id\", key: \"ne1Id\" },\n { label: \"Wound acquired\", key: \"woundAcquired\" },\n { label: \"Re-eval Id\", key: \"revalId\" },\n { label: \"Patient\\'s name\", key: \"patientName\" },\n { label: \"DOB\", key: \"dob\" },\n { label: \"Facility/Location\", key: \"facilityLocation\" },\n { label: \"Admission date\", key: \"admissionDate\" },\n { label: \"Discharge date\", key: \"dischargeDate\" },\n { label: \"Wound photo taken by\", key: \"woundPhotoTakenBy\" },\n { label: \"Wound photo taken on\", key: \"woundPhotoTakenOn\" },\n { label: \"Last assessed\", key: \"lastAssessed\" },\n { label: \"Last updated by\", key: \"lastUpdatedBy\" },\n { label: \"Last updated on\", key: \"lastUpdatedOn\" },\n { label: \"Surface area\", key: \"surfaceArea\" },\n { label: \"Length\", key: \"length\" },\n { label: \"Width\", key: \"width\" },\n { label: \"Depth\", key: \"depth\" },\n { label: \"Tuneling\", key: \"tuneling\" },\n { label: \"Undermining\", key: \"undermining\" },\n { label: \"HPR 1\", key: \"hpr1\" },\n { label: \"HPR 2\", key: \"hpr2\" },\n { label: \"HPR 3\", key: \"hpr3\" },\n { label: \"History/Cause\", key: \"historyCause\" },\n { label: \"Anatomy\", key: \"anatomy\" },\n { label: \"Condition POA\", key: \"conditionPOA\" },\n { label: \"Photo type\", key: \"photoType\" },\n { label: \"Documentation type\", key: \"documentationType\" },\n { label: \"Wound age\", key: \"woundAge\" },\n { label: \"Tissue type\", key: \"tissueType\" },\n { label: \"Are there any open areas\", key: \"areThereAnyOpenAreas\" },\n { label: \"Wound at risk of infection\", key: \"woundAtRiskOfInfection\" },\n { label: \"Exudate type\", key: \"exudateType\" },\n { label: \"Exudate amount\", key: \"exudateAmount\" },\n { label: \"Wound bed identified\", key: \"woundbedIdentified\" },\n { label: \"Wound classification\", key: \"woundClassification\" },\n { label: \"Wound progress\", key: \"woundProgress\" },\n ]);\n\n // pagination\n const [activePage, setActivePage] = useState(1);\n const [csvData, setCsvData] = useState(null);\n const [offSet, setOffSet] = useState(0)\n const [sortType, setSortType] = useState('')\n const [numberOfintervention, setNumberOfintervention] = useState(0); // State for mainaining number of intervention each row has\n\n const getActivePage = (data) => {\n setOffSet((((data * LIST_VIEW_LIMIT) - LIST_VIEW_LIMIT) < LIST_VIEW_LIMIT) ? 0 : (data * LIST_VIEW_LIMIT) - LIST_VIEW_LIMIT)\n assignedPagination(\n data,\n setActivePage,\n \"/reports/dashboard\",\n \"POST\",\n LIST_VIEW_LIMIT,\n dispatch,\n getBiReportsListAsync,\n \"\",\n biReportsListData?.Postdata,\n sortType\n );\n };\n const handleSort = (data) => {\n let sortingColumn = data.sortBy[0]\n let sortingType = sortingColumn ? (sortingColumn.desc) ? ':DESC' : ':ASC' : ''\n setSortType((sortingColumn) && sortingColumn.id + sortingType)\n let sortingList = {};\n sortingList['url'] = \"/reports/dashboard\"\n sortingList['method'] = \"POST\"\n sortingList['queryParam'] = { limit: LIST_VIEW_LIMIT, offSet: isNaN(offSet)===true?0:offSet,sort: (sortingColumn) && sortingColumn.id + sortingType }\n sortingList['reportData'] = biReportsListData?.Postdata\n dispatch(getBiReportsListAsync(sortingList))\n };\n \n useEffect(() => {\n if (\n biReportDetailCsvData &&\n biReportDetailCsvData?.reports &&\n biReportDetailCsvData?.reports?.length > 0\n ) {\n const temp = [...biReportDetailCsvData.reports];\n const res = [];\n let max = 0;\n biReportDetailCsvData?.reports?.forEach((data, i) => { //NOSONAR\n const test = { ...temp[i] };\n // We need to pass header dynamically\n if (data?.interventions?.length > max) {\n max = data.interventions.length;\n }\n data.interventions &&\n data.interventions.length > 0 &&\n data.interventions.forEach((data, qi) => { //NOSONAR\n test[\"additionalCare \" + (qi + 1)] = data.additionalCare;\n test[\"compression\" + (qi + 1)] = data.compression;\n test[\"debridement\" + (qi + 1)] = data.debridement;\n test[\"dressingAppearance\" + (qi + 1)] = data.dressingAppearance;\n test[\"dressingChangeFrequency\" + (qi + 1)] =\n data.dressingChangeFrequency;\n test[\"interventionName\" + (qi + 1)] = data.interventionName;\n test[\"modalities\" + (qi + 1)] = data.modalities;\n test[\"primaryDressing\" + (qi + 1)] = data.secondaryDressing;\n test[\"secondaryDressing\" + (qi + 1)] = data.compression;\n test[\"skinProtectant\" + (qi + 1)] = data.skinProtectant;\n test[\"woundCleanser\" + (qi + 1)] = data.woundCleanser;\n })//NOSONAR\n res.push(test);\n })//NOSONAR\n if (max >= 6) {\n setNumberOfintervention(6);\n } else {\n setNumberOfintervention(max);\n }\n setCsvData([...res]);\n }\n }, [biReportDetailCsvData]);\n\n useEffect(() => {\n if (numberOfintervention > 0) {\n const temp = [];\n for (let i = 1; i <= numberOfintervention; i++) {\n temp.push({ label: \"Additional Care\" + i, key: \"additionalCare\" + i });\n temp.push({ label: \"Compression\" + i, key: \"compression\" + i });\n temp.push({ label: \"Debridement\" + i, key: \"debridement\" + i });\n temp.push({\n label: \"Dressing Appearance\" + i,\n key: \"dressingAppearance\" + i,\n });\n temp.push({\n label: \"Dressing Change Frequency\" + i,\n key: \"dressingChangeFrequency\" + i,\n });\n temp.push({\n label: \"Intervention Name\" + i,\n key: \"interventionName\" + i,\n });\n temp.push({ label: \"Modalities\" + i, key: \"modalities\" + i });\n temp.push({\n label: \"Primary Dressing\" + i,\n key: \"primaryDressing\" + i,\n });\n temp.push({\n label: \"Secondary Dressing\" + i,\n key: \"secondaryDressing\" + i,\n });\n temp.push({ label: \"Skin Protectant\" + i, key: \"skinProtectant\" + i });\n temp.push({ label: \"Wound Cleanser\" + i, key: \"woundCleanser\" + i });\n }\n setCsvHeader([...csvHeader, ...temp]);\n }\n }, [numberOfintervention]);\n\n\n return (\n <>\n
\n
\n\n {biReportSummaryCsvData && biReportSummaryCsvData?.reports?.length > 0 ? (\n <>\n
\n
\n
\n \n ) : (\n
\n There are no records matching your report criteria.\n
\n )}\n \n );\n}//NOSONAR\nBiReportsList.propTypes = {\n dispatch: PropTypes.func,\n history: PropTypes.object,\n};\nBiReportsList = connect()(withRouter(BiReportsList));\n","import React, { useEffect, useState } from 'react';\nimport { connect, useDispatch, useSelector } from 'react-redux';\nimport { withRouter } from 'react-router-dom';\nimport logo from '../../../static/images/skin-health-logo.png';\nimport html2canvas from 'html2canvas';\nimport { jsPDF } from \"jspdf\";\nimport Loader from '../../../static/images/spinner.svg';\nimport { Button } from '../../primary';\nimport { Header } from '../../secondary/Header';\nimport styles from \"./platformAnalytics.module.scss\";\nimport { useLocation } from \"react-router-dom\";\nimport { allNullCheck } from '../../../utils';\nimport { handleClickMove } from '../../../utils/platformHelper';\n\nexport function PlatformAnalyticsPdf({ props, history }) {\n\n const location = useLocation();\n\n const platformOverview = location.state;\n\n // For scrolling the page to top\n useEffect(() => {\n window.scrollTo(0, 0)\n }, [])\n\n // Getting loader \n const loading = useSelector(state => state.app.loading);\n const customerName = useSelector(state => state.user.customerName);\n\n // States\n const [canvases, setCanvases] = useState([])\n const [header, setHeader] = useState({})\n const [started, setStarted] = useState(false) // To avoid multiple html2canvas promises\n const [pdfGeneration, setPdfGeneration] = useState(false) // State for end of html2canvas process\n const [message, setMessage] = useState(false)\n\n\n useEffect(() => {\n if (!loading) {\n setTimeout(() => {\n setMessage(true)\n }, 10000)\n }\n }, [loading])\n\n // Getting header, finding the size, converting the code and pushing it into a state\n useEffect(() => {\n async function run() {\n const header = document.getElementById('header')\n const imageWidth = 210;\n await html2canvas(header).then(function (canvas) {\n setHeader({ height: canvas.height * imageWidth / canvas.width, imgData: canvas.toDataURL('image/png') })\n })\n }\n // We are starting above canvasing process after loading the html file with a delay\n if (!loading) {\n if (!started) {\n setTimeout(() => {\n run();\n }, 5000)\n setStarted(true)\n }\n else {\n return\n }\n }\n }, [loading])\n\n\n // Getting all the elements with the tag name 'article'. Capturing screenshot, finding height and converting it into base code.\n // Pushing all those into an array of object\n useEffect(() => {\n async function run() {\n const allDivs = document.getElementsByTagName('article')\n const divsArray = Array.from(allDivs)\n const can = []\n const imageWidth = 210;\n // Creating screenshot for each section\n for (let i = 0; i < divsArray.length; i++) {\n await html2canvas(divsArray[i], { allowTaint: true, useCORS: true }).then(function (canvas) {\n can.push({ id: i, height: canvas.height * imageWidth / canvas.width, imgData: canvas.toDataURL('image/png') })\n setCanvases([...can])\n }).finally(() => {\n if (i === divsArray.length - 1) {\n setPdfGeneration(true)\n }\n })\n }\n }\n // We are starting above canvasing process after loading the html file with a delay\n if (!loading) {\n if (!started) {\n setTimeout(() => {\n run();\n }, 5000)\n setStarted(true)\n }\n else {\n return\n }\n }\n }, [loading])\n\n\n \n\n\n // On click, generating pdf by putting all the above images into a document. We are using jsPDF to generate pdf.\n // If we can't fit image into same page, we are moving the image into next page. It is done automatically.\n const handleClick = () => {\n handleClickMove(html2canvas, jsPDF, canvases, header, customerName)\n }\n\n\n return (\n <>\n
\n
\n\n {!loading &&
\n {!pdfGeneration && <>\n {!message &&
We are generating PDF. Please wait. }\n {message && We are almost done. Few more seconds. }\n }\n {pdfGeneration && <>\n {/* Your PDF is ready. */}\n \n Download PDF\n \n }\n }\n\n {loading &&
\n
We are gathering data. Please wait. \n
\n
}\n\n {!loading &&
\n\n \n \n
\n \n\n \n
\n
\n
\n Clinical Support\n
\n
\n {platformOverview?.supportInfo?.clinicalSupportInfo?.clinicalSupport?.count}\n
\n
\n {allNullCheck(platformOverview?.supportInfo?.clinicalSupportInfo?.clinicalSupport?.percent) ? platformOverview?.supportInfo?.clinicalSupportInfo?.clinicalSupport?.percent + '%' : 'Unknown'}\n
\n
\n
\n
\n # of Tickets\n
\n
\n {platformOverview?.supportInfo?.clinicalSupportInfo?.numberOfTickets?.count}\n
\n
\n {allNullCheck(platformOverview?.supportInfo?.clinicalSupportInfo?.numberOfTickets?.percent) ? platformOverview?.supportInfo?.clinicalSupportInfo?.numberOfTickets?.percent + '%' : 'Unknown'}\n
\n
\n\n
\n
\n
\n
\n Application Support\n
\n
\n {platformOverview?.supportInfo?.applicationSupportInfo?.applicationSupport?.count}\n
\n
\n {allNullCheck(platformOverview?.supportInfo?.applicationSupportInfo?.applicationSupport?.percent) ? platformOverview?.supportInfo?.applicationSupportInfo?.applicationSupport?.percent + '%' : 'Unknown'}\n
\n
\n
\n
\n # of Tickets\n
\n
\n {platformOverview?.supportInfo?.applicationSupportInfo?.numberOfTickets?.count}\n
\n
\n {allNullCheck(platformOverview?.supportInfo?.applicationSupportInfo?.numberOfTickets?.percent) ? platformOverview?.supportInfo?.applicationSupportInfo?.numberOfTickets?.percent + '%' : 'Unknown'}\n
\n
\n\n
\n
\n\n
\n \n
NE1 WMS (Paid customers)
\n
\n
\n
\n
\n Acute\n
\n
\n {platformOverview?.ne1wmsPaidCustomer?.acute?.count}\n
\n
\n {allNullCheck(platformOverview?.ne1wmsPaidCustomer?.acute?.percent) ? platformOverview?.ne1wmsPaidCustomer?.acute?.percent + '%' : 'Unknown'}\n
\n
\n\n
\n
\n
\n
\n Post Acute\n
\n
\n {platformOverview?.ne1wmsPaidCustomer?.postAcute?.count}\n
\n
\n {allNullCheck(platformOverview?.ne1wmsPaidCustomer?.postAcute?.percent) ? platformOverview?.ne1wmsPaidCustomer?.postAcute?.percent + '%' : 'Unknown'}\n
\n
\n\n
\n
\n\n
\n \n\n \n
\n
Advanced Skin Care \n \n
\n\n
\n
\n Active\n
\n
\n {platformOverview?.productMaster?.advancedSkinCare?.active?.count}\n
\n
\n {allNullCheck(platformOverview?.productMaster?.advancedSkinCare?.active?.percent) ? platformOverview?.productMaster?.advancedSkinCare?.active?.percent + '%': 'Unknown'}\n
\n
\n\n
\n
\n
\n
\n Inactive\n
\n
\n {platformOverview?.productMaster?.advancedSkinCare?.inActive?.count}\n
\n
\n {allNullCheck(platformOverview?.productMaster?.advancedSkinCare?.inActive?.percent) ? platformOverview?.productMaster?.advancedSkinCare?.inActive?.percent + '%': 'Unknown'}\n
\n
\n\n
\n
\n
\n
Advanced Wound Care \n \n
\n\n
\n
\n Active\n
\n
\n {platformOverview?.productMaster?.advancedWoundCare?.active?.count}\n
\n
\n {allNullCheck(platformOverview?.productMaster?.advancedWoundCare?.active?.percent) ? platformOverview?.productMaster?.advancedWoundCare?.active?.percent + '%': 'Unknown'}\n
\n
\n\n
\n
\n
\n
\n Inactive\n
\n
\n {platformOverview?.productMaster?.advancedWoundCare?.inActive?.count}\n
\n
\n {allNullCheck(platformOverview?.productMaster?.advancedWoundCare?.inActive?.percent) ? platformOverview?.productMaster?.advancedWoundCare?.inActive?.percent + '%': 'Unknown'}\n
\n
\n\n
\n
\n
\n
Nutrition and Pharmaceuticals \n \n
\n\n
\n
\n Active\n
\n
\n {platformOverview?.productMaster?.nutritionandPharmaceuticals?.active?.count}\n
\n
\n {allNullCheck(platformOverview?.productMaster?.nutritionandPharmaceuticals?.active?.percent) ? platformOverview?.productMaster?.nutritionandPharmaceuticals?.active?.percent + '%': 'Unknown'}\n
\n
\n\n
\n
\n
\n
\n Inactive\n
\n
\n {platformOverview?.productMaster?.nutritionandPharmaceuticals?.inActive?.count}\n
\n
\n {allNullCheck(platformOverview?.productMaster?.nutritionandPharmaceuticals?.inActive?.percent) ? platformOverview?.productMaster?.nutritionandPharmaceuticals?.inActive?.percent + '%': 'Unknown'}\n
\n
\n\n
\n
\n
\n
Repositioning and Offloading \n \n
\n\n
\n
\n Active\n
\n
\n {platformOverview?.productMaster?.repositioningandOffloading?.active?.count}\n
\n
\n {allNullCheck(platformOverview?.productMaster?.repositioningandOffloading?.active?.percent) ? platformOverview?.productMaster?.repositioningandOffloading?.active?.percent + '%': 'Unknown'}\n
\n
\n\n
\n
\n
\n
\n Inactive\n
\n
\n {platformOverview?.productMaster?.repositioningandOffloading?.inActive?.count}\n
\n
\n {allNullCheck(platformOverview?.productMaster?.repositioningandOffloading?.inActive?.percent) ? platformOverview?.productMaster?.repositioningandOffloading?.inActive?.percent + '%': 'Unknown'}\n
\n
\n\n
\n
\n\n
\n \n
\n
\n
Acute Customers \n
\n {platformOverview?.acuteCustomers?.count} \n {allNullCheck(platformOverview?.acuteCustomers?.percent) ? platformOverview?.acuteCustomers?.percent + '%': '-'} \n
\n
\n
\n
Post Acute Customers \n
\n {platformOverview?.postAcuteCustomers?.count} \n {allNullCheck(platformOverview?.postAcuteCustomers?.percent) ? platformOverview?.postAcuteCustomers?.percent + '%': '-'} \n
\n
\n
\n
Most Active Customers \n
\n {platformOverview?.mostActiveCustomers?.count} \n {allNullCheck(platformOverview?.mostActiveCustomers?.percent) ? platformOverview?.mostActiveCustomers?.percent + '%': '-'} \n
\n
\n
\n
NE1 WMS Paid Customers \n
\n {platformOverview?.ne1wmsPaidCustomers?.count} \n {allNullCheck(platformOverview?.ne1wmsPaidCustomers?.percent) ? platformOverview?.ne1wmsPaidCustomers?.percent + '%': '-'} \n
\n
\n
\n
Customers with Formulary \n
\n {platformOverview?.customersWithFormulary?.count} \n {allNullCheck(platformOverview?.customersWithFormulary?.percent) ? platformOverview?.customersWithFormulary?.percent + '%': '-'} \n
\n
\n
\n
Customers without Formulary \n
\n {platformOverview?.customersWithoutFormulary?.count} \n {allNullCheck(platformOverview?.customersWithoutFormulary?.percent) ? platformOverview?.customersWithoutFormulary?.percent + '%': '-'} \n
\n
\n
\n
\n \n\n\n
}\n \n )\n}\n\nPlatformAnalyticsPdf = connect()(withRouter(PlatformAnalyticsPdf));","export default __webpack_public_path__ + \"static/media/1.1ad5850c.jpg\";","export default __webpack_public_path__ + \"static/media/2.c7d57418.jpg\";","export default __webpack_public_path__ + \"static/media/3.5b9f0c82.jpg\";","export default __webpack_public_path__ + \"static/media/1.55cebc47.jpg\";","export default __webpack_public_path__ + \"static/media/2.89f4c044.jpg\";","export default __webpack_public_path__ + \"static/media/3.7bb6172b.jpg\";","export default __webpack_public_path__ + \"static/media/1.7b447c53.jpg\";","export default __webpack_public_path__ + \"static/media/2.e0492882.jpg\";","export default __webpack_public_path__ + \"static/media/3.f696a838.jpg\";","export default __webpack_public_path__ + \"static/media/1.5cb8c08f.jpg\";","export default __webpack_public_path__ + \"static/media/2.0df1cf7d.jpg\";","export default __webpack_public_path__ + \"static/media/3.95478fd0.jpg\";","export default __webpack_public_path__ + \"static/media/1.c1315024.jpg\";","export default __webpack_public_path__ + \"static/media/2.20f49e2f.jpg\";","export default __webpack_public_path__ + \"static/media/3.cd5393ff.jpg\";","export default __webpack_public_path__ + \"static/media/1.b652bbd3.jpg\";","export default __webpack_public_path__ + \"static/media/2.421add9d.jpg\";","export default __webpack_public_path__ + \"static/media/3.63fa9e5b.jpg\";","export default __webpack_public_path__ + \"static/media/1.8bde6bf9.jpg\";","export default __webpack_public_path__ + \"static/media/2.2836a39d.jpg\";","export default \"data:image/jpeg;base64,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\"","export default __webpack_public_path__ + \"static/media/1.7b6c8598.jpg\";","export default __webpack_public_path__ + \"static/media/2.1f0665c5.jpg\";","export default __webpack_public_path__ + \"static/media/3.9bdee90e.jpg\";","export default __webpack_public_path__ + \"static/media/1.ebe90a39.jpg\";","export default __webpack_public_path__ + \"static/media/2.ff828f86.jpg\";","export default __webpack_public_path__ + \"static/media/3.c197ab03.jpg\";","export default __webpack_public_path__ + \"static/media/1.5233b0ea.jpg\";","export default __webpack_public_path__ + \"static/media/2.c7d57418.jpg\";","export default __webpack_public_path__ + \"static/media/3.563a8192.jpg\";","export default __webpack_public_path__ + \"static/media/4.5b9f0c82.jpg\";","export default __webpack_public_path__ + \"static/media/5.367fed49.jpg\";","export default __webpack_public_path__ + \"static/media/6.b467d23e.jpg\";","export default __webpack_public_path__ + \"static/media/1.55cebc47.jpg\";","export default __webpack_public_path__ + \"static/media/2.89f4c044.jpg\";","export default __webpack_public_path__ + \"static/media/3.7bb6172b.jpg\";","export default __webpack_public_path__ + \"static/media/4.7b447c53.jpg\";","export default __webpack_public_path__ + \"static/media/5.e0492882.jpg\";","export default __webpack_public_path__ + \"static/media/6.f696a838.jpg\";","export default __webpack_public_path__ + \"static/media/1.5cb8c08f.jpg\";","export default __webpack_public_path__ + \"static/media/2.0df1cf7d.jpg\";","export default __webpack_public_path__ + \"static/media/3.95478fd0.jpg\";","export default __webpack_public_path__ + \"static/media/4.07a7c92c.jpg\";","export default __webpack_public_path__ + \"static/media/5.633cfafc.jpg\";","export default __webpack_public_path__ + \"static/media/6.a5a302d0.jpg\";","export default __webpack_public_path__ + \"static/media/1.20f49e2f.jpg\";","export default __webpack_public_path__ + \"static/media/2.567ab552.jpg\";","export default __webpack_public_path__ + \"static/media/3.0c325d68.jpg\";","export default __webpack_public_path__ + \"static/media/4.c1315024.jpg\";","export default __webpack_public_path__ + \"static/media/5.63fa9e5b.jpg\";","export default __webpack_public_path__ + \"static/media/6.8bde6bf9.jpg\";","import React, { useEffect, useState,useRef } from 'react'\nimport { toast } from 'react-toastify';\nimport { Button, Form, RadioButton, SelectBox } from '../../primary'\nimport editIcon from '../../../static/images/edit-icon.png'\nimport { woundClassificationAsync, woundAssessmentUpdateAsync, patientAssessmentAsyncOverride } from '../../../app/patientSlice'\nimport { CloseWarning } from '../../secondary'\nimport { useForm } from 'react-hook-form'\nimport { useSelector } from 'react-redux'\nimport { allNullCheck, signedLockedAccess, ServiceError } from '../../../utils'\nimport { enableCheckerMove, handleFirstMove } from '../../../utils/productsHelper'\nimport infoIcon from '../../../static/images/info.svg';\n\n/* Import PI Images */\nimport classificationPiClosed1 from '../../../static/images/classification_PI_Images/closed/1.jpg'\nimport classificationPiClosed2 from '../../../static/images/classification_PI_Images/closed/2.jpg'\nimport classificationPiClosed3 from '../../../static/images/classification_PI_Images/closed/3.jpg'\nimport classificationPiPrestage1 from '../../../static/images/classification_PI_Images/prestage1/1.jpg'\nimport classificationPiPrestage2 from '../../../static/images/classification_PI_Images/prestage1/2.jpg'\nimport classificationPiPrestage3 from '../../../static/images/classification_PI_Images/prestage1/3.jpg'\nimport classificationPiStageFirst1 from '../../../static/images/classification_PI_Images/stage1/1.jpg'\nimport classificationPiStageFirst2 from '../../../static/images/classification_PI_Images/stage1/2.jpg'\nimport classificationPiStageFirst3 from '../../../static/images/classification_PI_Images/stage1/3.jpg'\nimport classificationPiStageSecond1 from '../../../static/images/classification_PI_Images/stage2/1.jpg'\nimport classificationPiStageSecond2 from '../../../static/images/classification_PI_Images/stage2/2.jpg'\nimport classificationPiStageSecond3 from '../../../static/images/classification_PI_Images/stage2/3.jpg'\nimport classificationPiStageThird1 from '../../../static/images/classification_PI_Images/stage3/1.jpg'\nimport classificationPiStageThird2 from '../../../static/images/classification_PI_Images/stage3/2.jpg'\nimport classificationPiStageThird3 from '../../../static/images/classification_PI_Images/stage3/3.jpg'\nimport classificationPiStageFourth1 from '../../../static/images/classification_PI_Images/stage4/1.jpg'\nimport classificationPiStageFourth2 from '../../../static/images/classification_PI_Images/stage4/2.jpg'\nimport classificationPiStageFourth3 from '../../../static/images/classification_PI_Images/stage4/3.jpg'\nimport classificationPiDtpi1 from '../../../static/images/classification_PI_Images/dtpi/1.jpg'\nimport classificationPiDtpi2 from '../../../static/images/classification_PI_Images/dtpi/2.jpg'\nimport classificationPiDtpi3 from '../../../static/images/classification_PI_Images/dtpi/3.jpg'\nimport classificationPiUnstageable1 from '../../../static/images/classification_PI_Images/unsatgeable/1.jpg'\nimport classificationPiUnstageable2 from '../../../static/images/classification_PI_Images/unsatgeable/2.jpg'\nimport classificationPiUnstageable3 from '../../../static/images/classification_PI_Images/unsatgeable/3.jpg'\nimport classificationPiMmpi1 from '../../../static/images/classification_PI_Images/mmpi/1.jpg'\nimport classificationPiMmpi2 from '../../../static/images/classification_PI_Images/mmpi/2.jpg'\nimport classificationPiMmpi3 from '../../../static/images/classification_PI_Images/mmpi/3.jpg'\n\n/* Import Other Images */\nimport classiOtherClosed1 from '../../../static/images/classification_Other_Images/Closed/1.jpg'\nimport classiOtherClosed2 from '../../../static/images/classification_Other_Images/Closed/2.jpg'\nimport classiOtherClosed3 from '../../../static/images/classification_Other_Images/Closed/3.jpg'\nimport classiOtherClosed4 from '../../../static/images/classification_Other_Images/Closed/4.jpg'\nimport classiOtherClosed5 from '../../../static/images/classification_Other_Images/Closed/5.jpg'\nimport classiOtherClosed6 from '../../../static/images/classification_Other_Images/Closed/6.jpg'\nimport classiOtherSuperFicial1 from '../../../static/images/classification_Other_Images/Superficial/1.jpg'\nimport classiOtherSuperFicial2 from '../../../static/images/classification_Other_Images/Superficial/2.jpg'\nimport classiOtherSuperFicial3 from '../../../static/images/classification_Other_Images/Superficial/3.jpg'\nimport classiOtherSuperFicial4 from '../../../static/images/classification_Other_Images/Superficial/4.jpg'\nimport classiOtherSuperFicial5 from '../../../static/images/classification_Other_Images/Superficial/5.jpg'\nimport classiOtherSuperFicial6 from '../../../static/images/classification_Other_Images/Superficial/6.jpg'\nimport classiOtherParitcalThick1 from '../../../static/images/classification_Other_Images/ParticalThickness/1.jpg'\nimport classiOtherParitcalThick2 from '../../../static/images/classification_Other_Images/ParticalThickness/2.jpg'\nimport classiOtherParitcalThick3 from '../../../static/images/classification_Other_Images/ParticalThickness/3.jpg'\nimport classiOtherParitcalThick4 from '../../../static/images/classification_Other_Images/ParticalThickness/4.jpg'\nimport classiOtherParitcalThick5 from '../../../static/images/classification_Other_Images/ParticalThickness/5.jpg'\nimport classiOtherParitcalThick6 from '../../../static/images/classification_Other_Images/ParticalThickness/6.jpg'\nimport classiOtherFullThick1 from '../../../static/images/classification_Other_Images/FullThickness/1.jpg'\nimport classiOtherFullThick2 from '../../../static/images/classification_Other_Images/FullThickness/2.jpg'\nimport classiOtherFullThick3 from '../../../static/images/classification_Other_Images/FullThickness/3.jpg'\nimport classiOtherFullThick4 from '../../../static/images/classification_Other_Images/FullThickness/4.jpg'\nimport classiOtherFullThick5 from '../../../static/images/classification_Other_Images/FullThickness/5.jpg'\nimport classiOtherFullThick6 from '../../../static/images/classification_Other_Images/FullThickness/6.jpg'\n\n\nexport function CharacteristicClassification({ index, updateDone, patientId, assessmentId, dispatch, selectedIndex, assessmentDetails,\n getCharDetails, styles, hideIt, overrideToggle }) {\n\n\n // For default values\n let defaultTemp = { ...assessmentDetails?.classification }\n defaultTemp['woundBedIdentifiable'] = defaultTemp?.woundBedIdentifiable === 1 ? 'Yes' : defaultTemp?.woundBedIdentifiable === 0 ? 'No' : null\n\n /* Hook form */\n const { register, errors, handleSubmit, setError, reset, getValues, watch,setValue } = useForm({\n mode: 'onSubmit',\n defaultValues: assessmentDetails?.classification ? defaultTemp : {}\n })\n\n const ErrorState = ServiceError(); // without TT selected if goes to Classification show error message\n\n const [editable, setEditable] = useState(false) // Edit view\n const [closeWarning, setCloseWarning] = useState(false) // Close warning\n const [displayFirst, setDisplayFirst] = useState(false) // State for displaying first field\n const [enabled, setEnabled] = useState(false) // If dropdown has enabled value, need that to be selected\n const [noTissueTypes, setNoTissueTypes] = useState(false) // If tissue types is not selected, display message on submit\n\n const woundClassificationOptions = useSelector(state => state.patient.woundClassificationOptions) // Get wound classification select box options\n // If the API get call has classification data, then show 'view' screen else show edit screen directly\n useEffect(() => {\n if(signedLockedAccess(assessmentDetails?.assessmentStage)){\n if (assessmentDetails?.classification?.woundBedIdentifiable===null&&assessmentDetails?.classification?.woundClassification === 'Unknown') {\n setEditable(true)\n setTimeout(() => {\n // if(document.getElementById('woundClassification')){\n // document.getElementById('woundClassification').value=''\n // }\n if(getValue){ // New UI Classification\n setGetValue('')\n }\n }, 100)\n } \n if (assessmentDetails?.classification?.woundBedIdentifiable===null&&assessmentDetails?.classification?.woundClassification === 'unknown') {\n setEditable(true)\n setTimeout(() => {\n // if(document.getElementById('woundClassification')){\n // document.getElementById('woundClassification').value=''\n // }\n if(getValue){ // New UI Classification\n setGetValue('')\n }\n }, 100)\n } \n }\n \n }, [assessmentDetails])\n\n // Is selected tissue type is follwing, only then display the \"can the wound bed be identified\"\n // const selectedCondition = [1, 2, 3, 4, 5, 6, 7, 8]\n const selectedCondition = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33] // New UI Classification\n useEffect(() => {\n // If the selected tissue type belongs to above code, set the wound bed field state to true\n assessmentDetails?.tissueTypes?.map((data) => { //NOSONAR\n if (selectedCondition.includes(data.id)) {\n setDisplayFirst(true)\n }\n })//NOSONAR\n }, [])\n\n\n //Wound classification dropdown while override toggle click it will enable all options..\n const [toggleOn, setToggleOn] = useState(false)\n const toggleChange =() => {\n if(toggleOn === false){\n setToggleOn(true)\n }else{\n setToggleOn(false)\n }\n }\n\n /* Warning functions Yes and no */\n const handleYes = () => {\n // reset({});\n setCloseWarning(false)\n setEditable(false)\n }\n /* No fn */\n const handleNo = () => {\n setCloseWarning(false)\n }\n\n \n //const dispatcher = (identifiable, classifiable, config) => { \n const dispatcher = (identifiable, config) => {\n // When woundbed is selected as 'no' we still need to display dropdown for 'wound classification'\n const payload = {\n patientId,\n assessmentId,\n data: {\n woundBedIdentifiable: identifiable,\n configurationRequest: config\n },\n overrideenable : toggleOn === true ? true : false \n } \n dispatch(woundClassificationAsync(payload))\n }\n\n // First dispatch for new classification and edit mode\n useEffect(() => {\n if (assessmentDetails?.classification === null) {\n dispatcher(null, 1)\n }\n if (assessmentDetails?.classification !== null) {\n dispatcher(assessmentDetails?.classification?.woundBedIdentifiable, 0)\n }\n }, [assessmentDetails])\n\n const [showState, setShowState] = useState(false) // New UI Classification\n\n // Handle first field\n const handleFirst = (e) => {\n if(e.target.value !== ''){ // New UI Classification\n setShowState(true)\n }\n handleFirstMove(e.target.value, reset, getValues, dispatcher)\n }\n\n // This below function check wheater dropdown value is selected if atlest one is enabled.\n function enabledChecker() {\n enableCheckerMove(woundClassificationOptions?.result, setEnabled)\n }\n\n // Run the above function everytime the wound classification option dropdown value changes\n useEffect(() => {\n enabledChecker()\n }, [woundClassificationOptions?.result])\n\n // Classification no/non checker\n const selectedClassification = watch(['woundClassification'])\n\n\n useEffect(() => {\n // If selected option is 'nonremovable' then disable all fields.\n if (selectedClassification?.woundClassification === 'nonremovabledressingdevice') {\n if (document.getElementById('woundClassification')) {\n if (document.getElementById('woundClassification').getElementsByTagName('option')) {\n const selectItems = document.getElementById('woundClassification').getElementsByTagName('option')\n for (let i = 0; i < selectItems.length; i++) {\n // Disable all items except non 'removable dressing'\n if (selectItems[i].value.toLowerCase() !== \"nonremovabledressingdevice\" && selectItems[i].value.toLowerCase() !== \"\") {\n selectItems[i].disabled = true\n } else {\n selectItems[i].disabled = false\n }\n }\n }\n }\n }\n // Else enable based on API\n if (selectedClassification?.woundClassification !== 'nonremovabledressingdevice') {\n if (document.getElementById('woundClassification')) {\n if (document.getElementById('woundClassification').getElementsByTagName('option')) {\n const selectItems = document.getElementById('woundClassification').getElementsByTagName('option')\n for (let i = 0; i < selectItems.length; i++) {\n // Disable all items except non 'removable dressing'\n if (woundClassificationOptions?.result && woundClassificationOptions?.result?.length > 0) {\n if (woundClassificationOptions?.result[i - 1]?.enable === 1) {\n selectItems[i].disabled = false;\n }\n else if (woundClassificationOptions?.result[i - 1]?.enable === 0) {\n // selectItems[i].disabled = false\n if(toggleOn === false){ // added for override option\n selectItems[i].disabled = true\n }\n if(toggleOn === true){\n selectItems[i].disabled = false \n } // \n }\n }\n }\n }\n }\n }\n\n }, [selectedClassification, woundClassificationOptions?.result, toggleOn])\n\n \n // Display no selected error for woundClassification\n useEffect(() => {\n if (Object.keys(errors).length > 0) {\n // if (enabled && getValues('woundClassification') === '') {\n // setError('woundClassification', {\n // type: \"manual\",\n // message: \"Please select wound classification\"\n // })\n // }\n // if (enabled && (getValues(getValue) === undefined || getValues(getValue) === '')) { // New UI Classification\n // setError('woundClassification', {\n // type: \"manual\",\n // message: \"Please select wound stage\"\n // })\n // }\n }\n }, [errors])\n const charStatus = useSelector(state => state.patient.charStatus)\n\n const [errorShowing, setErrorShowing] = useState(false)\n\n //call the API for Update the data\n useEffect(()=>{\n toast.dismiss('success1')\n let payload = { patientId, assessmentId, type: 'tissuetypes'} \n dispatch(patientAssessmentAsyncOverride(payload)) \n },[dispatch])\n\n const onSubmit = (data) => {\n if (assessmentDetails?.tissueTypes === null) {\n setNoTissueTypes(true)\n setTimeout(() => {\n setNoTissueTypes(false)\n }, 5000)\n return;\n }\n // if (enabled && data.woundClassification === '') {\n if(enabled && (getValue === undefined || getValue === '')){ // New UI Classification\n // If wound classificaion is not selected set error\n // setError('woundClassification', { type: 'Manual', message: 'Please select wound stage' })\n setErrorShowing(true)\n }\n else {\n setErrorShowing(false)\n const navigate = () => {\n updateDone(index)\n if(Array.isArray(charStatus)&&charStatus[index]===1){\n setEditable(false)\n }else{\n selectedIndex(index + 1) /* user will get navigated to next tab */\n }\n }\n // Temp assessment with submitted data\n const tempAssessment = {\n classification: {\n woundBedIdentifiable: data.woundBedIdentifiable ? data.woundBedIdentifiable === 'Yes' ? 1 : 0 : null,\n // woundClassification: data.woundClassification ? data.woundClassification : null\n woundClassification: getValue ? getValue : null // New UI Classification\n }\n }\n // Merging our temp assessment with assessment details and dispatching\n const assessment = { ...assessmentDetails, ...tempAssessment }\n const payload = {\n patientId,\n assessmentId,\n assessment,\n navigate,\n getCharDetails,\n overrideenable : overrideToggle ? true : false\n }\n dispatch(woundAssessmentUpdateAsync(payload))\n \n }\n \n }\n\n\n\n //added for New UI Classification\n\n const [hovercard, setCardhover] = useState(false)\n const [selectOne, setSelectOne] = useState(false)\n const [selectTwo, setSelectTwo] = useState(false)\n const [selectThree, setSelectThree] = useState(false)\n const [selectFour, setSelectFour] = useState(false)\n const [noBackground, setNoBackground] = useState(false)\n const [keyValue, setKeyValue] = useState()\n const [getValue, setGetValue] = useState();\n const [counter, setCounter] = useState(0);\n const [woState, setWoState] = useState(assessmentDetails?.classification?.woundClassification)\n const prevCount = useRef();\n const [makeCounter, setMakeCounter] = useState(false)\n\n useEffect(() => {\n prevCount.current = getValue;\n }, [getValue]); \n\n const handleCategoryChange = (eve, data, index) => {\n let val = data.key\n setKeyValue(val)\n\n setCounter(counter+1)\n let counterDivide = (counter % 2===0 ? true : false);\n setMakeCounter(counter % 2===0 ? true : false)\n\n if(selectOne === false){\n setSelectOne(true)\n setSelectTwo(false)\n setSelectThree(false)\n setSelectFour(false)\n setGetValue(data.key)\n setNoBackground(false)\n }\n \n \n //double click should be unselect\n if((selectOne===true&&keyValue===prevCount.current)){\n setGetValue(\"\")\n setNoBackground(true)\n }\n \n if(selectOne===true&&keyValue===assessmentDetails?.classification?.woundClassification&&noBackground===true){\n setGetValue(data.key)\n setNoBackground(false)\n setSelectTwo(false)\n setSelectThree(false)\n setSelectFour(false)\n }\n\n if(selectOne===true&&!keyValue&&noBackground===true){\n setGetValue(data.key)\n setNoBackground(false)\n setSelectTwo(false)\n setSelectThree(false)\n setSelectFour(false)\n }\n }\n \n const handleRadioChangeOne = (e,data,index) => {\n let val = data.key\n setKeyValue(val)\n\n if(selectTwo === false){\n setSelectTwo(true)\n setSelectOne(false)\n setSelectThree(false)\n setSelectFour(false)\n setGetValue(data.key)\n setMakeCounter(false)\n }\n \n }\n\n const handleRadioChangeTwo = (e,data,index) => {\n let valtwo = data.key\n setKeyValue(valtwo)\n \n if(selectThree === false){\n setSelectThree(true)\n setSelectFour(false)\n setSelectTwo(false)\n setSelectOne(false)\n setGetValue(data.key)\n setMakeCounter(false)\n } \n\n }\n\n const handleRadioChangeThree = (e,data,index) => {\n let valthree = data.key\n setKeyValue(valthree)\n \n if(selectFour === false){\n setSelectFour(true)\n setSelectOne(false)\n setSelectTwo(false)\n setSelectThree(false)\n setGetValue(data.key)\n setMakeCounter(false)\n } \n\n }\n\n useEffect(()=>{\n if(makeCounter===true && selectOne===true && (woundClassificationOptions?.result?.map(item=>item===keyValue)) && prevCount.current === ''){\n setNoBackground(false)\n setGetValue(keyValue)\n setSelectTwo(false)\n setSelectThree(false)\n setSelectFour(false)\n }\n },[makeCounter])\n\n useEffect(()=>{ \n // if(assessmentDetails?.historyCause?.causeCategory === 'pi'){ \n // if(selectTwo===false && assessmentDetails?.classification?.woundClassification === \"nonremovabledressingdevice\"){\n // setSelectTwo(true)\n // }\n // if(selectThree===false && assessmentDetails?.classification?.woundClassification === \"unabletodeterminewoundclassification\"){\n // setSelectThree(true)\n // setSelectTwo(false) \n // }\n // }\n // if(assessmentDetails?.historyCause?.causeCategory === 'other'){\n // if(selectTwo===false && assessmentDetails?.classification?.woundClassification === \"nonremovabledressingdevice\"){\n // console.log('comingsecond');\n // setSelectTwo(true)\n // }\n // if(selectThree===false && assessmentDetails?.classification?.woundClassification === \"unabletodeterminewoundclassification\"){\n // console.log('comingsecond3');\n // setSelectThree(true)\n // setSelectTwo(false)\n // }\n // }\n\n if(selectTwo===false && assessmentDetails?.classification?.woundClassification === \"nonremovabledressingdevice\"){\n setSelectTwo(true)\n }\n if(selectThree===false && assessmentDetails?.classification?.woundClassification === \"unabletodeterminewoundclassification\"){\n setSelectThree(true)\n setSelectTwo(false) \n }\n if(selectFour===false && assessmentDetails?.classification?.woundClassification === \"woundcannotbestaged\"){\n setSelectFour(true)\n setSelectTwo(false) \n setSelectThree(false) \n }\n \n },[])\n\n useEffect(()=>{\n if((selectOne===false&&assessmentDetails?.classification?.woundClassification==='closed')||\n (selectOne===false&&assessmentDetails?.classification?.woundClassification==='prestage1blanchableerythemia')||\n (selectOne===false&&assessmentDetails?.classification?.woundClassification==='stage1')||\n (selectOne===false&&assessmentDetails?.classification?.woundClassification==='stage2')||\n (selectOne===false&&assessmentDetails?.classification?.woundClassification==='stage3')||\n (selectOne===false&&assessmentDetails?.classification?.woundClassification==='stage4')||\n (selectOne===false&&assessmentDetails?.classification?.woundClassification==='dtpideeptissuepressureinjuryulcermayevolveorresolve')||\n (selectOne===false&&assessmentDetails?.classification?.woundClassification==='unstageable')||\n (selectOne===false&&assessmentDetails?.classification?.woundClassification==='mmpimucosal')){ \n if(selectTwo===true || selectThree=== true || selectFour === true){\n setNoBackground(true)\n } \n }\n },[selectTwo, selectThree, selectFour])\n\n useEffect(()=>{ \n if((keyValue!==assessmentDetails?.classification?.woundClassification && selectOne===true)){\n setWoState('')\n setGetValue(keyValue)\n setNoBackground(false)\n } \n \n },[keyValue])\n\n useEffect(()=>{\n if((selectOne===true)&&(assessmentDetails?.classification?.woundClassification==='closed'||assessmentDetails?.classification?.woundClassification==='prestage1blanchableerythemia'||\n assessmentDetails?.classification?.woundClassification==='stage1'||assessmentDetails?.classification?.woundClassification==='stage2'||\n assessmentDetails?.classification?.woundClassification==='stage3'||assessmentDetails?.classification?.woundClassification==='stage4'||\n assessmentDetails?.classification?.woundClassification==='dtpideeptissuepressureinjuryulcermayevolveorresolve'||assessmentDetails?.classification?.woundClassification==='unstageable'||\n assessmentDetails?.classification?.woundClassification==='mmpimucosal'|| assessmentDetails?.classification?.woundClassification==='superficial'|| assessmentDetails?.classification?.woundClassification==='partialthickness'\n || assessmentDetails?.classification?.woundClassification==='fullthickness')){\n if(keyValue===woState){\n setWoState('')\n setGetValue('')\n setNoBackground(true)\n }\n }\n },[keyValue])\n\n \n //added for PI Images\n const PiImage = [\n {\n key : 'closed',\n 'referenceImage' : [\n classificationPiClosed1,\n classificationPiClosed2,\n classificationPiClosed3,\n ]\n },\n {\n key : 'prestage1blanchableerythemia',\n 'referenceImage' : [\n classificationPiPrestage1,\n classificationPiPrestage2,\n classificationPiPrestage3,\n ]\n },\n {\n key : 'stage1',\n 'referenceImage' : [\n \n classificationPiStageFirst1,\n classificationPiStageFirst2,\n classificationPiStageFirst3,\n ]\n },\n {\n key : 'stage2',\n 'referenceImage' : [\n \n classificationPiStageSecond1,\n classificationPiStageSecond2,\n classificationPiStageSecond3,\n ]\n },\n {\n key : 'stage3',\n 'referenceImage' : [\n \n classificationPiStageThird1,\n classificationPiStageThird2,\n classificationPiStageThird3,\n ]\n },\n {\n key : 'stage4',\n 'referenceImage' : [\n \n classificationPiStageFourth1,\n classificationPiStageFourth2,\n classificationPiStageFourth3,\n ]\n },\n {\n key : 'dtpideeptissuepressureinjuryulcermayevolveorresolve',\n 'referenceImage' : [\n \n classificationPiDtpi1,\n classificationPiDtpi2,\n classificationPiDtpi3,\n ]\n },\n {\n key : 'unstageable',\n 'referenceImage' : [\n \n classificationPiUnstageable1,\n classificationPiUnstageable2,\n classificationPiUnstageable3,\n ]\n },{\n key : 'mmpimucosal',\n 'referenceImage' : [\n \n classificationPiMmpi1,\n classificationPiMmpi2,\n classificationPiMmpi3,\n ]\n }\n ]\n\n\n //added for Other Images First_3\n const OtherImageFirstRow = [\n {\n key : 'closed',\n 'referenceImage' : [\n classiOtherClosed1,\n classiOtherClosed2,\n classiOtherClosed3,\n ]\n },\n {\n key : 'superficial',\n 'referenceImage' : [\n classiOtherSuperFicial1,\n classiOtherSuperFicial2,\n classiOtherSuperFicial3,\n ]\n },\n {\n key : 'partialthickness',\n 'referenceImage' : [\n \n classiOtherParitcalThick1,\n classiOtherParitcalThick2,\n classiOtherParitcalThick3,\n ]\n },\n {\n key : 'fullthickness',\n 'referenceImage' : [\n \n classiOtherFullThick1,\n classiOtherFullThick2,\n classiOtherFullThick3,\n ]\n } \n ]\n\n //added for Other Images Another_3\n const OtherImageSecondRow = [\n {\n key : 'closed',\n 'referenceImage' : [\n classiOtherClosed4,\n classiOtherClosed5,\n classiOtherClosed6\n ]\n },\n {\n key : 'superficial',\n 'referenceImage' : [\n classiOtherSuperFicial4,\n classiOtherSuperFicial5,\n classiOtherSuperFicial6\n ]\n },\n {\n key : 'partialthickness',\n 'referenceImage' : [\n classiOtherParitcalThick4,\n classiOtherParitcalThick5,\n classiOtherParitcalThick6\n ]\n },\n {\n key : 'fullthickness',\n 'referenceImage' : [ \n classiOtherFullThick4,\n classiOtherFullThick5,\n classiOtherFullThick6\n ]\n } \n ]\n \n //added for Sub Title\n const subtitlePI = [\n {\n key : 'closed',\n value : \"\"\n },\n {\n key : 'prestage1blanchableerythemia',\n value : \"(Blanchable Skin)\"\n },\n {\n key : 'stage1',\n value : \"(Non-Blanchable Skin)\"\n },\n {\n key : 'stage2',\n value : \"\"\n },\n {\n key : 'stage3',\n value : \"\"\n },\n {\n key : 'stage4',\n value : \"\"\n },\n {\n key : 'dtpideeptissuepressureinjuryulcermayevolveorresolve',\n value : \"(Deep Tissue Pressure Injury)\"\n },\n {\n key : 'unstageable',\n value : \"\"\n },\n {\n key : 'mmpimucosal',\n value : \"(Mucosal Membrane Pressure Injury)\"\n }\n\n ]\n \n const onClickAvailabilityOne = (e) =>{\n if(e.target.checked && !selectTwo){\n setSelectTwo(true) \n }\n else if(e.target.checked && selectTwo){\n setSelectTwo(false)\n } \n }\n \n\n const onClickAvailabilityTwo = (e) =>{ \n if(e.target.checked && selectThree===false){\n setSelectThree(true)\n }\n else if(e.target.checked && selectThree===true){\n setSelectThree(false)\n }\n }\n\n const onClickAvailabilityThree = (e) =>{ \n if(e.target.checked && selectFour===false){\n setSelectFour(true)\n }\n else if(e.target.checked && selectFour===true){\n setSelectFour(false)\n }\n }\n\n const [disableAboveGrid, setDisableAboveGrid] = useState(false)\n const [checkedState, setCheckedState] = useState(false)\n\n useEffect(()=>{ \n let getval = document.getElementById('toggleSwitch')?.value\n \n if(selectTwo===true||selectThree===true || selectFour===true){\n setDisableAboveGrid(true) \n setGetValue(getValue)//NOSONAR \n setCheckedState(false) \n }\n else if(selectTwo===false||selectThree===false || selectFour===false){\n setDisableAboveGrid(false)\n setGetValue(\"\") \n setCheckedState(true) \n }\n },[selectTwo,selectThree, selectFour])\n\n \n\n useEffect(()=>{ \n if(disableAboveGrid===true){\n setWoState(\"\")\n setCheckedState(false) \n setToggleOn(false) \n }\n else if(disableAboveGrid===false){\n setWoState(assessmentDetails?.classification?.woundClassification)\n }\n },[disableAboveGrid])\n\n // const [errorShowing, setErrorShowing] = useState(false)\n useEffect(()=>{\n if(getValue!==\"\" || getValue !== undefined){\n setErrorShowing(false)\n } \n },[getValue])\n\n \n return (\n
\n\n
\n {!editable ? <>\n\n {/* Edit button */}\n {signedLockedAccess(assessmentDetails?.assessmentStage) && hideIt &&
{\n setEditable(true);\n setTimeout(() => {\n //woundBedIdentifiable\n if(assessmentDetails?.classification?.woundBedIdentifiable){\n handleFirstMove(assessmentDetails?.classification?.woundBedIdentifiable === 1 ? 'Yes' : 'No', reset, getValues, dispatcher)\n }\n setValue(\"woundBedIdentifiable\",assessmentDetails?.classification?.woundBedIdentifiable === 1 ? 'Yes' : 'No')\n setValue(\"woundClassification\", assessmentDetails?.classification?.woundClassification?assessmentDetails?.classification?.woundClassification:'');\n if (assessmentDetails?.classification?.woundClassification === 'Unknown'||assessmentDetails?.classification?.woundClassification === 'unknown') {\n // if(document.getElementById('woundClassification')){\n // document.getElementById('woundClassification').value=''\n // }\n if(getValue){ // New UI Classification\n setGetValue('')\n }\n }\n }, 100)\n }}>\n
Edit\n
}\n\n {/* Saved data */}\n {woundClassificationOptions?.isWoundBedIdentifiedQuestionShow ===1 &&
\n Can the wound bed be identified? \n \n {assessmentDetails?.classification?.woundBedIdentifiable === 1 ? 'Yes' : 'No'}\n {/* {assessmentDetails?.classification?.woundBedIdentifiable === 1 ? 'Yes' : 'No'} */}\n \n
\n }\n\n {/* {allNullCheck(assessmentDetails?.classification?.woundClassifiable) ?
\n Unable to classify the wound? * \n \n {classifiableOptions && classifiableOptions.length > 0 && classifiableOptions?.map((data) => {\n if (data.key === assessmentDetails?.classification?.woundClassifiable) {\n return data.value\n }\n })}\n \n
: ''} */}\n\n {allNullCheck(assessmentDetails?.classification?.woundClassification) ?
\n Wound stage: \n \n {woundClassificationOptions && woundClassificationOptions?.result?.length > 0 && woundClassificationOptions?.result?.map((data) => {\n if (data.key === assessmentDetails?.classification?.woundClassification) {\n return data.value\n }\n })\n }\n \n
: \n
\n Wound stage: \n \n {'-'}\n \n
\n }\n\n \n\n :\n\n <>\n\n {/* Close warning */}\n {closeWarning &&
\n }\n\n {/* Form field */}\n
\n }\n
\n
\n )\n}\n","export default __webpack_public_path__ + \"static/media/measurements_loader.cae98ddd.gif\";","import React, { useEffect, useState } from 'react';\nimport ReactImageAnnotate from \"react-wound-image-annotate\";\nimport style from './measurement.module.scss';\nimport { Button, TextField, Form, AccessErrorModal } from '../../primary';\nimport { Modal } from '../../secondary/Modal';\nimport './measurement.css';\nimport { connect, useDispatch, useSelector } from 'react-redux';\nimport PropTypes from 'prop-types';\nimport { checkAutoMeasurementStatusAsync, setAutoMeasurementStatus, setWoundMeasurementData, woundEvalAsync, woundMeasurementUpdateAsync,detailSnakeAlgorithmAsync } from '../../../app/patientSlice';\nimport { withRouter, useParams } from 'react-router-dom';\nimport editIcon from '../../../static/images/edit-icon-blue.png';\nimport { useForm } from 'react-hook-form';\nimport Loader from '../../../static/images/spinner.svg';\nimport measurements_loader from '../../../static/images/measurements_loader.gif';\nimport { measurementNumber, fullMonthFormatDate, prefixO, signedLockedAccess } from '../../../utils';\nimport iconDanger from '../../../static/images/icon-check-danger.png'\nimport {\n EDIT,\n CANCEL_BTN,\n SAVE_BTN\n} from '../../../constants';\nimport {\n btn_custom,\n btn_small,\n btn_small_cancel\n} from '../../../styles/common.module.scss';\nimport { clearError } from '../../../app/appSlice';\nimport infoIcon from '../../../static/images/info.svg';\n\nexport let Measurement = ({ detailAssessment, hideIt }) => {\n \n const { patientId } = useParams()\n const { assessmentId } = useParams()\n const { register, handleSubmit, errors } = useForm();\n const dispatch = useDispatch();\n\n const [assessmentDetail, setAssessmentDetail] = useState();\n\n const [measurementModal, setMeasurementModal] = useState(false);\n const [annotationView, setAnnotationView] = useState(false);\n const [measurementForm, setMeasurementForm] = useState(false);\n const [systemMeasured, setSystemMeasured] = useState(false);\n const [confirm, setConfirm] = useState(false)\n\n // measured annotate value function\n const measurementData = useSelector(state => state.patient.measurementData);\n const autoMeasurementStatus = useSelector(state => state.patient.autoMeasurementStatus);\n const loading = useSelector(state => state.app.loading);\n const [assessedPicture, setAssessedPicture] = useState();\n const [surfaceArea, setSurfaceArea] = useState('');\n const [length, setLength] = useState('');\n const [width, setWidth] = useState('');\n /* For set interval timer */\n const [intervalId, setIntervalId] = useState([])\n\n const errorMessage = useSelector(state => state.app.errorMessage)\n const isSnakeAlgorithms = useSelector(state => state.patient.isSnakeAlgorithms);\n //check SnakeAlgorith\n useEffect(() => {\n //detailAssessment?.measurement?.isSnakeAlgorithmsuccessful\n if(isSnakeAlgorithms===2&&detailAssessment?.isWoundWithoutPhoto === 0&&detailAssessment?.measurement?.isStickerAvailable === 1){\n setTimeout(() => {\n dispatch(detailSnakeAlgorithmAsync({ patientId, assessmentId }))\n }, 10000)\n }\n }, [isSnakeAlgorithms,detailAssessment]);\n\n /* auto measurement modal */\n const showMeasurementModal = (type) => {\n setMeasurementModal(true);\n if (type === 'Dimensions') {\n setAnnotationView(false);\n setMeasurementForm(true);\n } else {\n setAnnotationView(true);\n setMeasurementForm(false);\n }\n setAssessedPicture(undefined)\n }\n\n // confirmation modal\n const confirmation = () => {\n if(document?.querySelector('.fullscreen')&&document?.querySelector('.fullscreen svg > polygon')){\n setConfirm(true);\n }else{\n assessModalClose();\n }\n \n }\n\n const assessModalClose = () => {\n setMeasurementModal(false);\n setAnnotationView(false);\n setConfirm(false);\n setMeasurementForm(false);\n dispatch(clearError())\n }\n\n const confirmationClose = () => {\n setConfirm(false);\n }\n\n useEffect(() => {\n setAssessmentDetail(null);\n setAssessedPicture(null);\n setSurfaceArea('');\n setLength('');\n setWidth('');\n dispatch(setAutoMeasurementStatus(''));\n dispatch(setWoundMeasurementData(null));\n dispatch(clearError());\n }, [dispatch, patientId, assessmentId]);\n\n useEffect(() => {\n if (measurementData?.assessedPicture) {\n setAssessedPicture(`data:image/jpeg;base64,${measurementData.assessedPicture}`);\n setAnnotationView(false);\n if (measurementData.isStickerAvailable === 0 || isNaN(measurementData.surfaceArea) || isNaN(measurementData.length) || isNaN(measurementData.width)) {\n setSystemMeasured(false);\n } else {\n setMeasurementForm(true);\n setSurfaceArea(measurementData.surfaceArea);\n setLength(measurementData.length);\n setWidth(measurementData.width);\n setSystemMeasured(true);\n }\n } else {\n setAssessedPicture(null);\n setSurfaceArea('');\n setLength('');\n setWidth('');\n }\n }, [measurementData]);\n\n const [saveClicked, setSaveClicked] = useState(false)\n\n\n useEffect(() => {\n setAssessmentDetail(detailAssessment);\n if (measurementData?.assessedPicture && saveClicked) {\n let _assessment = { ...detailAssessment };\n _assessment.measurement = { ..._assessment.measurement, assessedPicture, surfaceArea, length, width };\n setAssessmentDetail(_assessment)\n }\n if (detailAssessment?.measurement) {\n setSystemMeasured(detailAssessment?.measurement?.systemMeasured === 1 && assessmentDetail?.measurement?.isStickerAvailable===1 ? true : false);\n if (autoMeasurementStatus === 'inprogress' && detailAssessment?.measurement?.isStickerAvailable === 1 && !detailAssessment?.measurement?.surfaceArea > 0) {\n if (intervalId.length === 0) {\n let _intervalId = setInterval(() => {\n dispatch(checkAutoMeasurementStatusAsync(patientId, assessmentId))\n }, process.env.REACT_APP_UPLOADING_CHECK_INTERVAL)\n setIntervalId([...intervalId, _intervalId]);\n }\n } else {\n intervalId.forEach(clearInterval);\n }\n }\n }, [dispatch, patientId, assessmentId, detailAssessment, saveClicked, autoMeasurementStatus, intervalId, measurementData, assessedPicture, surfaceArea, length, width]);\n\n const addMeasurementForm = () => {\n setAnnotationView(false);\n setMeasurementForm(true);\n }\n\n let evalWound = (annotation) => {\n setAnnotationView(false);\n const { regions } = annotation.images[0];\n /*let woundSvgElement = document.getElementById('wound').querySelector('canvas').parentElement.querySelector('svg');\n const { pixelSize, regions } = annotation.images[0];\n let canvas = document.createElement('canvas');\n canvas.width = pixelSize.w;\n canvas.height = pixelSize.h;\n let context = canvas.getContext('2d');\n let woundImage = new Image();\n woundImage.crossOrigin = \"anonymous\";\n let picture = \"\";\n woundImage.onload = function () {\n try {\n context.drawImage(woundImage, 0, 0, pixelSize.w, pixelSize.h);\n picture = canvas.toDataURL(\"image/jpeg\");\n const payload = { \n \"id\": assessmentId, \n \"picture\": picture.replace('data:image/jpeg;base64,', ''), \n \"tracing\": \"Manual\", \n \"coordinates\": regions[0]?.points,\n \"channel\": \"web\",\n \"stickerArea\" : assessmentDetail?.measurement?.stickerArea,\n \"stickerLength\" : assessmentDetail?.measurement?.stickerLength\n }\n dispatch(woundEvalAsync(payload));\n let woundSvgXml = new XMLSerializer().serializeToString(woundSvgElement).replaceAll('rgba(255,0,0,0.75)', 'rgb(0,255,0)').replaceAll('255,0,0,0.25', '0,255,0,0');\n const URL = window.URL || window.webkitURL || window;\n const woundSvgUrl = URL.createObjectURL(new Blob([woundSvgXml], { type: 'image/svg+xml;charset=utf-8' }));\n let woundLocationSVG = new Image();\n woundLocationSVG.crossOrigin = \"anonymous\";\n woundLocationSVG.onload = function () {\n context.drawImage(woundLocationSVG, 0, 0, pixelSize.w, pixelSize.h);\n const annotatedPicture = canvas.toDataURL(\"image/png\");\n const payload = { \n \"id\": assessmentId, \n \"picture\": picture.replace('data:image/jpeg;base64,', ''), \n \"annotatedPicture\": annotatedPicture.replace('data:image/png;base64,', ''), \n \"tracing\": assessmentType, \n \"coordinates\": autoMeasure ? {x: regions[0]?.x, y: regions[0]?.y, w: regions[0]?.w, h: regions[0]?.h} : regions[0]?.points,\n \"channel\": \"web\" \n }\n dispatch(woundEvalAsync(payload))\n URL.revokeObjectURL(woundSvgUrl)\n };\n woundLocationSVG.src = woundSvgUrl; \n } catch (e) {\n console.log(e);\n }\n };\n woundImage.src = assessmentDetail?.picture;*/\n\n const payload = {\n \"id\": assessmentId,\n //\"picture\": picture.replace('data:image/jpeg;base64,', ''), \n \"picture\": assessmentDetail&&assessmentDetail?.picture,//NOSONAR\n \"tracing\": \"Manual\",\n \"coordinates\": regions[0]?.points,\n \"channel\": \"web\",\n \"stickerArea\": assessmentDetail&&assessmentDetail?.measurement?.stickerArea,//NOSONAR\n \"stickerLength\":assessmentDetail&& assessmentDetail?.measurement?.stickerLength //NOSONAR\n }\n dispatch(woundEvalAsync(payload,patientId,assessmentId));\n //if(patientId&&assessmentId)\n //dispatch(detailSnakeAlgorithmAsync({ patientId, assessmentId }))\n }\n\n\n const doSubmit = (data) => {\n let surFaceFinal=data?.surfaceArea?prefixO(data.surfaceArea):assessmentDetail?.measurement?.surfaceArea?assessmentDetail?.measurement?.surfaceArea: 0;\n // if((assessmentDetail?.woundStage!=='resolve'||surFaceFinal===0)&&(assessmentDetail?.measurement?.isStickerAvailable===0||assessmentDetail?.isWoundWithoutPhoto===1)&&(data?.length&&data?.width)){\n // surFaceFinal=prefixO(data.length*data.width)\n // }\n if((assessmentDetail?.isWoundWithoutPhoto === 0 && assessmentDetail?.woundStage==='resolve'&&assessmentDetail?.measurement?.isStickerAvailable===1&&assessmentDetail?.measurement?.isMeasurementResolved===1) ){\n surFaceFinal=data?.surfaceArea?prefixO(data.surfaceArea):assessmentDetail?.measurement?.surfaceArea?assessmentDetail?.measurement?.surfaceArea: 0;\n }\n else if((assessmentDetail?.measurement?.isStickerAvailable===0||assessmentDetail?.isWoundWithoutPhoto===1)&&(data?.length&&data?.width)){\n surFaceFinal=prefixO(data.length*data.width)\n }\n const payload = Object.assign({}, detailAssessment, {\n measurement: {\n assessedPicture: measurementData?.assessedPicture || assessmentDetail && assessmentDetail?.measurement?.assessedPicture || assessmentDetail&&assessmentDetail?.picture,\n isStickerAvailable: assessmentDetail && assessmentDetail?.measurement?.isStickerAvailable,\n stickerArea: assessmentDetail && assessmentDetail?.measurement?.stickerArea,\n stickerLength: assessmentDetail && assessmentDetail?.measurement?.stickerLength, \n surfaceArea:surFaceFinal,\n //surfaceArea: data?.surfaceArea?prefixO(data.surfaceArea):assessmentDetail?.measurement?.surfaceArea?assessmentDetail?.measurement?.surfaceArea: 0,\n length: data?.length?prefixO(data.length):assessmentDetail?.measurement?.length?assessmentDetail?.measurement?.length: 0,\n width: data?.width?prefixO(data.width):assessmentDetail?.measurement?.width?assessmentDetail?.measurement?.width: 0,\n tunneling: prefixO(data?.tunneling),\n depth: prefixO(data?.depth),\n undermining: prefixO(data?.undermining),\n systemMeasured: systemMeasured ? 1 : 0,\n isMeasurementResolved:assessmentDetail?.measurement?.isMeasurementResolved\n }\n });\n dispatch(woundMeasurementUpdateAsync(patientId, payload))\n setMeasurementForm(false);\n setMeasurementModal(false);\n if (editable) {\n setEditable(false);\n setEditBtn(true)\n }\n }\n\n\n /* State to check editable forms */\n const [editable, setEditable] = useState(false)\n const [editBtn, setEditBtn] = useState(true)\n const handleEdit = (edit) => {\n if (edit === 'editable') {\n setEditable(true)\n setEditBtn(false)\n } else {\n setEditable(false);\n setEditBtn(true)\n }\n }\n\n let btnLabel = 'Dimensions';\n let insrTxt=''\n \n if (assessmentDetail?.measurement?.isStickerAvailable === 1) {\n if (autoMeasurementStatus === 'inprogress') {\n btnLabel = '';\n insrTxt = 'We are still processing the wound photo. Once completed, the AI will auto-detect the wound edges and calculate the surface area, length, and width';\n \n } else if (autoMeasurementStatus&&autoMeasurementStatus !== 'inprogress') {\n btnLabel = 'Start Measurement';\n insrTxt = 'No measurement data found. Click \\'Start Measurement\\' button to calculate dimensions';\n }\n }else if (assessmentDetail?.measurement&&assessmentDetail?.measurement?.isStickerAvailable !== 1) {\n insrTxt = 'No measurement data found. Wound photo was taken without a sticker. Click \\'Dimensions\\' button to enter dimensions manually';\n \n }\n const [tinyDelay, setTinyDelay] = useState(true)\n\n useEffect(() => {\n setTimeout(() => {\n setTinyDelay(false)\n }, 500)\n }, [dispatch,autoMeasurementStatus])\n\n const nextDrawCall = () => {\n if(document?.querySelector('.next_draw')){\n document.querySelector('.next_draw').click()\n }\n}\nconst clearDrawCall = () => {\n if(document?.querySelector('.clear_draw')){\n document.querySelector('.clear_draw').click()\n }\n}\n\n /* useEffect(() => {\n if(assessmentDetail?.isWoundWithoutPhoto===1){\nif(assessmentDetail?.length||assessmentDetail?.surfaceArea||assessmentDetail?.width){\n setEditable(false);\n setEditBtn(true)\n }else{\n setEditable(true);\n setEditBtn(false)\n }\n\n }\n}, [assessmentDetail])*/\n\n\n// <-----ZoomIn/Out OPtion----->\nconst [initalState, setInitalState] = useState(0);\nconst [zoomClick, setZoomClick] = useState(false);\n \n const zoomInAction = (direction) => {\n if(initalState <= 8){\n setZoomClick(true)\n setInitalState(initalState + 1) \n }\n else{\n setZoomClick(true)\n setInitalState(9)\n }\n\n // const delta = 10 * direction;\n // const element = document.getElementById('patient_wound');\n // const positionInfo = element.getBoundingClientRect();\n // element.style.width = positionInfo.width+delta+'px';\n // element.style.height = positionInfo.height+(delta-1)+'px';\n }\n\n\n const zoomOutAction = (direction) => { \n if(initalState >= 1 && initalState <= 9) {\n setZoomClick(true)\n setInitalState(initalState - 1)\n }\n \n if(initalState === 0){\n setZoomClick(true)\n setInitalState(0)\n } \n if (initalState < 0){\n setZoomClick(true)\n setInitalState(0)\n } \n } \n\n const reSizeAction = () => {\n setZoomClick(true)\n setInitalState(0) \n }\n\n useEffect(()=>{\n if(initalState === 0){\n setZoomClick(true)\n setInitalState(0)\n } \n },[initalState])\n// <-----ZoomIn/Out OPtion----->\n\n\n// <----Measurement Gif Loader when tracing without form populate----->\nconst [retrace, setRetrace] = useState(false)\nuseEffect(()=>{\n if(retrace===true && measurementData!==null){\n setSaveClicked(true)\n const payload = Object.assign({}, detailAssessment, {\n measurement: {\n assessedPicture: measurementData?.assessedPicture || assessmentDetail && assessmentDetail?.measurement?.assessedPicture || assessmentDetail&&assessmentDetail?.picture,\n isStickerAvailable: assessmentDetail && assessmentDetail?.measurement?.isStickerAvailable,\n stickerArea: assessmentDetail && assessmentDetail?.measurement?.stickerArea,\n stickerLength: assessmentDetail && assessmentDetail?.measurement?.stickerLength, \n \n surfaceArea: measurementData?.surfaceArea? measurementData?.surfaceArea : 0,\n length: measurementData?.length? measurementData?.length : 0,\n width: measurementData?.width? measurementData?.width: 0,\n tunneling: measurementData?.tunneling,\n depth: measurementData?.depth,\n undermining: measurementData?.undermining,\n\n // surfaceArea: measurementData?.surfaceArea?prefixO(measurementData.surfaceArea):assessmentDetail?.measurement?.surfaceArea?assessmentDetail?.measurement?.surfaceArea: 0,\n // length: measurementData?.length?prefixO(measurementData.length):assessmentDetail?.measurement?.length?assessmentDetail?.measurement?.length: 0,\n // width: measurementData?.width?prefixO(measurementData.width):assessmentDetail?.measurement?.width?assessmentDetail?.measurement?.width: 0,\n // tunneling: prefixO(measurementData?.tunneling),\n // depth: prefixO(measurementData?.depth),\n // undermining: prefixO(measurementData?.undermining),\n\n systemMeasured: systemMeasured ? 1 : 0\n }\n });\n // dispatch(woundMeasurementUpdateAsync(patientId, payload))\n setMeasurementForm(false);\n setMeasurementModal(false);\n if (editable) {\n setEditable(false);\n setEditBtn(true)\n }\n }\n},[retrace, measurementData])\n// <----Measurement Gif Loader----->\n\nconst [tinyDelayLoad, setTinyDelayLoad] = useState(false)\n\nuseEffect(() => {\n setTimeout(() => {\n setTinyDelayLoad(true)\n }, 2500)\n}, [])\n\n return(<> \n {!tinyDelayLoad ?
\n
\n
:\n <>
\n \n
\n\n {`${assessmentDetail?.id}` === assessmentId &&\n
\n
\n { \n (detailAssessment?.isWoundWithoutPhoto === 0)&&(isSnakeAlgorithms===2||isSnakeAlgorithms === '')&&assessmentDetail?.measurement?.isStickerAvailable === 1 ?
\n
Measuring the wound \n
This won't take long
\n
\n
:\n \n
\n
\n {/*
*/}\n
\n
\n {assessmentDetail?.isWoundWithoutPhoto === 0 &&\n
\n
\n
\n
\n
\n
\n
\n
\n }\n
}\n {\n signedLockedAccess(assessmentDetail?.assessmentStage) && hideIt && assessmentDetail?.isWoundWithoutPhoto===0&&isSnakeAlgorithms!==2&& isSnakeAlgorithms!==''&&<>\n {(autoMeasurementStatus !== 'inprogress' && (assessmentDetail?.measurement?.isStickerAvailable === 1 || !assessmentDetail?.measurement?.surfaceArea > 0)) &&\n <>\n {/*{(assessmentDetail?.measurement?.assessedPicture || assessedPicture) && assessmentDetail?.measurement?.isStickerAvailable === 1 ?<>*/}\n {assessmentDetail?.measurement?.isStickerAvailable === 1 &&assessmentDetail?.measurement?.surfaceArea!==''?<>\n
\n Click {showMeasurementModal('Retrace Wound Edges'); setRetrace(true)}}\n /> to adjust wound edges\n
\n :''\n }\n }\n \n }\n
\n {/*
\n \n
\n
\n
\n {\n signedLockedAccess(assessmentDetail?.assessmentStage) && hideIt && assessmentDetail?.isWoundWithoutPhoto!==1 && <>\n {(autoMeasurementStatus !== 'inprogress' && (assessmentDetail?.measurement?.isStickerAvailable === 1 || !assessmentDetail?.measurement?.surfaceArea > 0)) &&\n
\n {(assessmentDetail?.measurement?.assessedPicture || assessedPicture) && assessmentDetail?.measurement?.isStickerAvailable === 1 ? showMeasurementModal('Retrace Wound Edges')}\n /> : showMeasurementModal(btnLabel)} />\n }\n
}\n \n }\n
*/}\n \n {\n !assessmentDetail?.measurement?.assessedPicture && !assessedPicture && !assessmentDetail?.measurement?.surfaceArea > 0 && assessmentDetail?.isWoundWithoutPhoto!==1 ?\n
\n
\n
\n {btnLabel==='Dimensions'&&assessmentDetail?.measurement?.isStickerAvailable !==1 ?\n <>\n We couldn't auto measure this wound because wound photo was taken without the sticker.
\n
Click showMeasurementModal(btnLabel)} /> to manually enter the measurements.
\n :assessmentDetail?.measurement?.isStickerAvailable === 1&&assessmentDetail?.measurement?.isSnakeAlgorithmsuccessful === 0?\n <>\n Opps, our app is feeling a bit camera-shy today!
\n
Don't worry; let's try a {showMeasurementModal('Retrace Wound Edges'); setRetrace(true)}} />
\n :''}\n
\n
\n
: \n
\n
\n
\n
{fullMonthFormatDate(assessmentDetail?.identifiedDate)}
\n
\n {\n signedLockedAccess(assessmentDetail?.assessmentStage) && hideIt && editBtn &&(isSnakeAlgorithms!==2&& isSnakeAlgorithms!==''||assessmentDetail?.isWoundWithoutPhoto === 1)&&
handleEdit('editable')}>\n
{EDIT}\n
\n }\n
\n \n
\n \n {/* editable form */}\n {!editable &&(isSnakeAlgorithms!==2&& isSnakeAlgorithms!==''||assessmentDetail?.isWoundWithoutPhoto === 1)&&
\n
\n Surface Area:\n \n
\n {/* {assessmentDetail?.measurement?.surfaceArea && {`${assessmentDetail?.measurement?.surfaceArea} cm`}2 } */}\n {assessmentDetail?.measurement?.surfaceArea && assessmentDetail?.measurement?.surfaceArea !== \"Unknown\" ? {`${assessmentDetail?.measurement?.surfaceArea} cm`}{assessmentDetail?.measurement?.isStickerAvailable ===1 &&assessmentDetail?.isWoundWithoutPhoto === 0&& 2 } \n {(assessmentDetail?.measurement?.isStickerAvailable === 0||assessmentDetail?.isWoundWithoutPhoto === 1) && \n */}\n Surface area is auto-calculated using length x width formula \n {/* */}\n } \n :{`${assessmentDetail?.measurement?.surfaceArea}`} }\n \n
\n
Length: \n {assessmentDetail?.measurement?.length && `${assessmentDetail?.measurement?.length} cm`}\n \n
\n
Width: \n {assessmentDetail?.measurement?.width && `${assessmentDetail?.measurement?.width} cm`}\n \n
\n
Depth: \n {assessmentDetail?.measurement?.depth && `${assessmentDetail?.measurement?.depth} cm`}\n \n
\n
Undermining: \n {assessmentDetail?.measurement?.undermining && `${assessmentDetail?.measurement?.undermining} cm`}\n \n
\n
Tunneling: \n {assessmentDetail?.measurement?.tunneling && `${assessmentDetail?.measurement?.tunneling} cm`}\n \n
\n
}\n {editable &&(isSnakeAlgorithms!==2&& isSnakeAlgorithms!==''||assessmentDetail?.isWoundWithoutPhoto === 1)&& \n
\n
\n \n {SAVE_BTN}\n \n handleEdit('nonEditable')}\n />\n
\n \n }\n
\n
\n }\n
}\n {/* measurement modal */}\n {\n measurementModal &&
confirmation()}\n heading={measurementForm ? \"Dimensions\" : \"Measurements\"}\n className={\"modal_box\"}\n modalSize={style.custom_modal_size}\n confirmation={confirm}\n overlay={\" \"}\n overlay_class={confirm ? style.overlay_class : \"\"}\n >\n \n {\n !loading &&\n <>\n \n {/*
\n nextDrawCall()}\n />\n clearDrawCall()}\n />\n
*/}\n\n {/* added for measurement git animation loader */}\n
\n
\n nextDrawCall()}\n />\n clearDrawCall()}\n />\n
\n
\n {/* added for measurement git animation loader */}\n\n
\n {annotationView && 'Manually trace the wound edges to calculate the dimensions'}\n
\n\n \n }\n
\n\n {\n !loading && annotationView &&
evalWound(annotation)}\n hideHeaderText\n hideNext\n hidePrev\n showTags={false}\n images={[\n {\n src: assessmentDetail?.picture,\n regions: []\n }\n ]}\n />\n }\n\n {/* added for measurement git animation loader */}\n { \n loading && \n
Measuring the wound \n
This won't take long
\n
\n
\n
\n \n clearDrawCall()}\n />\n nextDrawCall()}\n />\n\n
\n
\n
\n
\n
\n
\n
{errorMessage}
\n\n
\n\n
\n { assessModalClose(); }}\n />\n {/* { setSystemMeasured(false); addMeasurementForm(); }}\n />\n { showMeasurementModal(btnLabel) }}\n /> */}\n\n
\n
\n
\n
\n
\n
\n
addMeasurementForm()}\n />\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n setSaveClicked(true)}\n classes={{ className: `btn ${style.next_btn_sapce} ${style.btn_custom}` }}\n id=\"measurement\"\n />\n
\n \n \n }\n
\n
\n
All unsaved changes will be lost. Do you want to leave?
\n
\n assessModalClose()}\n />\n confirmationClose()}\n />\n
\n
\n