- \n {routes.map((prop, key) => {\n var activePro = \" \";\n var listItemClasses;\n listItemClasses = classNames({\n [\" \" + classes[color]]: activeRoute(prop.layout + prop.path)\n });\n const whiteFontClasses = classNames({\n [\" \" + classes.whiteFont]: activeRoute(prop.layout + prop.path)\n });\n return (\n
\n \n {/*
\n );\n return (\n \n 
\n
*/}\n {logoText}\n \n \n \n \n {brand}\n \n \n \n {brand}\n \n
\n );\n}\n\nSidebar.propTypes = {\n rtlActive: PropTypes.bool,\n handleDrawerToggle: PropTypes.func,\n bgColor: PropTypes.oneOf([\"purple\", \"blue\", \"green\", \"orange\", \"red\"]),\n logo: PropTypes.string,\n image: PropTypes.string,\n logoText: PropTypes.string,\n routes: PropTypes.arrayOf(PropTypes.object),\n open: PropTypes.bool\n};\n","import React from \"react\";\n// nodejs library to set properties for components\nimport PropTypes from \"prop-types\";\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport Grid from \"@material-ui/core/Grid\";\n\nconst styles = {\n grid: {\n padding: \"0 15px !important\"\n }\n};\n\nconst useStyles = makeStyles(styles);\n\nexport default function GridItem(props) {\n const classes = useStyles();\n const { children, ...rest } = props;\n return (\n \n {links}\n
\n {image !== undefined ? (\n {links}
\n {image !== undefined ? (\n \n {children}\n
\n );\n}\n\nCard.propTypes = {\n className: PropTypes.string,\n plain: PropTypes.bool,\n profile: PropTypes.bool,\n chart: PropTypes.bool,\n children: PropTypes.node\n};\n","import {\n warningCardHeader,\n successCardHeader,\n dangerCardHeader,\n infoCardHeader,\n primaryCardHeader,\n roseCardHeader,\n whiteColor\n} from \"assets/jss/material-dashboard-react.js\";\n\nconst cardHeaderStyle = {\n cardHeader: {\n padding: \"0.75rem 1.25rem\",\n marginBottom: \"0\",\n borderBottom: \"none\",\n background: \"transparent\",\n zIndex: \"3 !important\",\n \"&$cardHeaderPlain,&$cardHeaderIcon,&$cardHeaderStats,&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader\": {\n margin: \"0 15px\",\n padding: \"0\",\n position: \"relative\",\n color: whiteColor\n },\n \"&:first-child\": {\n borderRadius: \"calc(.25rem - 1px) calc(.25rem - 1px) 0 0\"\n },\n \"&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader\": {\n \"&:not($cardHeaderIcon)\": {\n borderRadius: \"3px\",\n marginTop: \"-20px\",\n padding: \"15px\"\n }\n },\n \"&$cardHeaderStats svg\": {\n fontSize: \"36px\",\n lineHeight: \"56px\",\n textAlign: \"center\",\n width: \"36px\",\n height: \"36px\",\n margin: \"10px 10px 4px\"\n },\n \"&$cardHeaderStats i,&$cardHeaderStats .material-icons\": {\n fontSize: \"36px\",\n lineHeight: \"56px\",\n width: \"56px\",\n height: \"56px\",\n textAlign: \"center\",\n overflow: \"unset\",\n marginBottom: \"1px\"\n },\n \"&$cardHeaderStats$cardHeaderIcon\": {\n textAlign: \"right\"\n }\n },\n cardHeaderPlain: {\n marginLeft: \"0px !important\",\n marginRight: \"0px !important\"\n },\n cardHeaderStats: {\n \"& $cardHeaderIcon\": {\n textAlign: \"right\"\n },\n \"& h1,& h2,& h3,& h4,& h5,& h6\": {\n margin: \"0 !important\"\n }\n },\n cardHeaderIcon: {\n \"&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader\": {\n background: \"transparent\",\n boxShadow: \"none\"\n },\n \"& i,& .material-icons\": {\n width: \"33px\",\n height: \"33px\",\n textAlign: \"center\",\n lineHeight: \"33px\"\n },\n \"& svg\": {\n width: \"24px\",\n height: \"24px\",\n textAlign: \"center\",\n lineHeight: \"33px\",\n margin: \"5px 4px 0px\"\n }\n },\n warningCardHeader: {\n color: whiteColor,\n \"&:not($cardHeaderIcon)\": {\n ...warningCardHeader\n }\n },\n successCardHeader: {\n color: whiteColor,\n \"&:not($cardHeaderIcon)\": {\n ...successCardHeader\n }\n },\n dangerCardHeader: {\n color: whiteColor,\n \"&:not($cardHeaderIcon)\": {\n ...dangerCardHeader\n }\n },\n infoCardHeader: {\n color: whiteColor,\n \"&:not($cardHeaderIcon)\": {\n ...infoCardHeader\n }\n },\n primaryCardHeader: {\n color: whiteColor,\n \"&:not($cardHeaderIcon)\": {\n ...primaryCardHeader\n }\n },\n roseCardHeader: {\n color: whiteColor,\n \"&:not($cardHeaderIcon)\": {\n ...roseCardHeader\n }\n }\n};\n\nexport default cardHeaderStyle;\n","import React from \"react\";\n// nodejs library that concatenates classes\nimport classNames from \"classnames\";\n// nodejs library to set properties for components\nimport PropTypes from \"prop-types\";\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\n// @material-ui/icons\n\n// core components\nimport styles from \"assets/jss/material-dashboard-react/components/cardHeaderStyle.js\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function CardHeader(props) {\n const classes = useStyles();\n const { className, children, color, plain, stats, icon, ...rest } = props;\n const cardHeaderClasses = classNames({\n [classes.cardHeader]: true,\n [classes[color + \"CardHeader\"]]: color,\n [classes.cardHeaderPlain]: plain,\n [classes.cardHeaderStats]: stats,\n [classes.cardHeaderIcon]: icon,\n [className]: className !== undefined\n });\n return (\n \n {children}\n
\n );\n}\n\nCardHeader.propTypes = {\n className: PropTypes.string,\n color: PropTypes.oneOf([\n \"warning\",\n \"success\",\n \"danger\",\n \"info\",\n \"primary\",\n \"rose\"\n ]),\n plain: PropTypes.bool,\n stats: PropTypes.bool,\n icon: PropTypes.bool,\n children: PropTypes.node\n};\n","const cardBodyStyle = {\n cardBody: {\n padding: \"0.9375rem 20px\",\n flex: \"1 1 auto\",\n WebkitBoxFlex: \"1\",\n position: \"relative\"\n },\n cardBodyPlain: {\n paddingLeft: \"5px\",\n paddingRight: \"5px\"\n },\n cardBodyProfile: {\n marginTop: \"15px\"\n }\n};\n\nexport default cardBodyStyle;\n","import React from \"react\";\n// nodejs library that concatenates classes\nimport classNames from \"classnames\";\n// nodejs library to set properties for components\nimport PropTypes from \"prop-types\";\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\n// @material-ui/icons\n\n// core components\nimport styles from \"assets/jss/material-dashboard-react/components/cardBodyStyle.js\";\n\nconst useStyles = makeStyles(styles);\n\nexport default function CardBody(props) {\n const classes = useStyles();\n const { className, children, plain, profile, ...rest } = props;\n const cardBodyClasses = classNames({\n [classes.cardBody]: true,\n [classes.cardBodyPlain]: plain,\n [classes.cardBodyProfile]: profile,\n [className]: className !== undefined\n });\n return (\n \n {children}\n
\n );\n}\n\nCardBody.propTypes = {\n className: PropTypes.string,\n plain: PropTypes.bool,\n profile: PropTypes.bool,\n children: PropTypes.node\n};\n","import React from 'react';\nimport { Link, useRouteMatch } from 'react-router-dom';\nimport { v4 as uuidv4 } from 'uuid';\n\n// services\nimport authService from 'components/api-authorization/AuthorizeService';\n\n// @material-ui/core components\nimport { makeStyles } from '@material-ui/core/styles';\nimport Button from '@material-ui/core/Button';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport Slide from '@material-ui/core/Slide';\nimport Fab from '@material-ui/core/Fab';\n\n// @material-ui/icon components\nimport AddIcon from '@material-ui/icons/Add';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport PersonIcon from '@material-ui/icons/Person';\nimport DescriptionIcon from '@material-ui/icons/Description';\n\n// core components\nimport GridItem from 'components/Grid/GridItem.js';\nimport GridContainer from 'components/Grid/GridContainer.js';\nimport MaterialTable from 'material-table';\nimport Card from 'components/Card/Card.js';\nimport CardHeader from 'components/Card/CardHeader.js';\nimport CardBody from 'components/Card/CardBody.js';\n\nconst styles = {\n fabMargin: {\n margin: '2px',\n },\n cardCategoryWhite: {\n '&,& a,& a:hover,& a:focus': {\n color: 'rgba(255,255,255,.62)',\n margin: '0',\n fontSize: '14px',\n marginTop: '0',\n marginBottom: '0',\n },\n '& a,& a:hover,& a:focus': {\n color: '#FFFFFF',\n },\n },\n cardTitleWhite: {\n color: '#FFFFFF',\n marginTop: '0px',\n minHeight: 'auto',\n fontWeight: '300',\n fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\n marginBottom: '3px',\n textDecoration: 'none',\n '& small': {\n color: '#777',\n fontSize: '65%',\n fontWeight: '400',\n lineHeight: '1',\n },\n },\n};\n\nconst useStyles = makeStyles(styles);\n\nconst Transition = React.forwardRef(function Transition(props, ref) {\n return Customers
\n\n {rowData.firstName} {rowData.lastName}
(\n {rowData.businessName})\n
\n ),\n },\n { title: 'Email', field: 'email' },\n { title: 'Phone Number', field: 'phoneNumber' },\n {\n title: 'Address',\n render: (rowData) => (\n (\n {rowData.businessName})\n
\n {rowData.streetAddress}, {rowData.city}, {rowData.state},{' '}\n {rowData.postalCode}\n
\n ),\n },\n {\n title: '',\n render: (rowData) => (\n \n \n \n \n \n \n \n \n \n \n \n handleDeleteClickOpen(rowData.customerId, e)\n }\n size=\"small\"\n color=\"secondary\"\n className={classes.fabMargin}\n >\n \n
\n ),\n },\n ]}\n data={(query) => populateData(query)}\n actions={[\n {\n icon: 'refresh',\n tooltip: 'Refresh Data',\n isFreeAction: true,\n onClick: () => refreshTable(),\n },\n ]}\n title=\"\"\n />\n Assignments
\n{rowData.clientName}
,\n },\n {\n title: 'Address',\n render: (rowData) => {rowData.fullAddress}
,\n },\n { title: 'Inspection Date', field: 'inspectionDate' },\n { title: 'Completed', field: 'isCompleted' },\n { title: 'Complettion Date', field: 'completedOnDate' },\n {\n title: '',\n render: (rowData) => (\n \n \n \n \n \n \n \n \n \n \n \n \n handleDeleteClickOpen(\n rowData.customerId,\n rowData.assignmentId,\n e\n )\n }\n size=\"small\"\n color=\"secondary\"\n className={classes.fabMargin}\n >\n \n
\n ),\n },\n ]}\n data={(query) => populateData(query)}\n actions={[\n {\n icon: 'refresh',\n tooltip: 'Refresh Data',\n isFreeAction: true,\n onClick: () =>\n tableRef.current && tableRef.current.onQueryChange(),\n },\n ]}\n title=\"\"\n />\n {errorMessage}
\n \n ) : success ? (\n\n {children}\n
\n );\n}\n\nCardFooter.propTypes = {\n className: PropTypes.string,\n plain: PropTypes.bool,\n profile: PropTypes.bool,\n stats: PropTypes.bool,\n chart: PropTypes.bool,\n children: PropTypes.node\n};\n","import React, { useState, useEffect } from \"react\";\nimport { useParams, useHistory } from \"react-router-dom\";\nimport { useForm } from \"react-hook-form\";\n\nimport { v4 as uuidv4 } from \"uuid\";\n\n// services\nimport authService from \"components/api-authorization/AuthorizeService\";\n\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport CircularProgress from \"@material-ui/core/CircularProgress\";\n\n// core components\nimport GridItem from \"components/Grid/GridItem.js\";\nimport GridContainer from \"components/Grid/GridContainer.js\";\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\nimport Button from \"components/CustomButtons/Button.js\";\nimport Card from \"components/Card/Card.js\";\nimport CardHeader from \"components/Card/CardHeader.js\";\nimport CardBody from \"components/Card/CardBody.js\";\nimport CardFooter from \"components/Card/CardFooter.js\";\nimport { Grid } from \"@material-ui/core\";\n\nconst styles = {\n cardCategoryWhite: {\n color: \"rgba(255,255,255,.62)\",\n margin: \"0\",\n fontSize: \"14px\",\n marginTop: \"0\",\n marginBottom: \"0\",\n },\n cardTitleWhite: {\n color: \"#FFFFFF\",\n marginTop: \"0px\",\n minHeight: \"auto\",\n fontWeight: \"300\",\n fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\n marginBottom: \"3px\",\n textDecoration: \"none\",\n },\n};\n\nconst useStyles = makeStyles(styles);\n\nconst populateData = async (customerId) => {\n await authService.validateAccessToken();\n const response = await fetch(`customers/${customerId}`, {});\n const data = await response.json();\n return data;\n};\n\nconst saveData = async (object) => {\n await authService.validateAccessToken();\n const body = JSON.stringify(object);\n let myHeaders = new Headers();\n myHeaders.append(\"Content-Type\", \"application/json\");\n\n const request = await fetch(`customers/create`, {\n headers: myHeaders,\n method: \"POST\",\n body,\n });\n const data = await request.json();\n return data;\n};\n\nexport default function CustomerDetails(props) {\n const classes = useStyles();\n const history = useHistory();\n const { customerId } = useParams();\n const [isLoading, setIsLoading] = useState(false);\n const {\n register,\n handleSubmit,\n errors,\n reset,\n formState: { isSubmitting },\n } = useForm({\n defaultValues: {\n state: \"Florida\",\n country: \"USA\",\n },\n });\n\n useEffect(() => {\n const fetchData = async () => {\n setIsLoading(true);\n const result = await populateData(customerId);\n reset({\n firstName: result.firstName || \"\",\n lastName: result.lastName || \"\",\n businessName: result.businessName || \"\",\n email: result.email || \"\",\n phoneNumber: result.phoneNumber || \"\",\n secondaryPhoneNumber: result.secondaryPhoneNumber || \"\",\n streetAddress: result.streetAddress || \"\",\n city: result.city || \"\",\n state: result.state || \"\",\n postalCode: result.postalCode || \"\",\n country: result.country || \"\",\n });\n\n setIsLoading(false);\n };\n if (customerId) {\n fetchData();\n }\n }, [customerId, reset]);\n\n const isNewCustomer = customerId === undefined;\n\n const handleSave = async (data) => {\n data.customerId = customerId;\n const modifiedEntity = await saveData(data);\n if (isNewCustomer) {\n history.push(`/admin/customers/details/${modifiedEntity.customerId}`);\n }\n };\n\n const handleSaveAndNext = async (data) => {\n data.customerId = customerId;\n const modifiedEntity = await saveData(data);\n history.push(\n `/admin/assignments/create/${modifiedEntity.customerId}/${uuidv4()}`\n );\n };\n\n const handleGoBack = async () => {\n history.push(`/admin/customers`);\n };\n\n return (\n \n \n \n \n \n \n
\n );\n}\n","// services\nimport authService from 'components/api-authorization/AuthorizeService';\n\nexport const saveStepData = async (stepId, payload) => {\n await authService.validateAccessToken();\n const body = JSON.stringify(payload);\n const myHeaders = new Headers();\n myHeaders.append('Content-Type', 'application/json');\n const request = await fetch(`assignments/saveStep/${stepId}`, {\n headers: myHeaders,\n method: 'POST',\n body,\n });\n const data = await request.json();\n return data;\n};\n\nexport const populateStepData = async (stepId, customerId, assignmentId) => {\n await authService.validateAccessToken();\n const response = await fetch(\n `assignments/${stepId}/${customerId}/${assignmentId || ''}`,\n {}\n );\n const data = await response.json();\n return data;\n};\n\nexport const uploadAssignmentFile = async (file) => {\n const formData = new FormData();\n formData.append('file', file);\n const myHeaders = new Headers();\n await authService.validateAccessToken();\n\n const fileUploadRequest = await fetch('assignments/UploadAssignmentFiles', {\n headers: myHeaders,\n method: 'POST',\n body: formData,\n });\n const uploadResponse = await fileUploadRequest.json();\n return uploadResponse;\n};\n\nexport const uploadAssignmentImage = async (file) => {\n const formData = new FormData();\n formData.append('file', file);\n const myHeaders = new Headers();\n await authService.validateAccessToken();\n\n const fileUploadRequest = await fetch('assignments/UploadAssignmentImages', {\n headers: myHeaders,\n method: 'POST',\n body: formData,\n });\n const uploadResponse = await fileUploadRequest.json();\n return uploadResponse;\n};\n\nexport const getAvailableTemplates = async () => {\n await authService.validateAccessToken();\n const response = await fetch(`templates`, {});\n const data = await response.json();\n return data;\n};\n\nexport const addNewReport = async (payload) => {\n await authService.validateAccessToken();\n const body = JSON.stringify(payload);\n const myHeaders = new Headers();\n myHeaders.append('Content-Type', 'application/json');\n\n const request = await fetch(`reports/create`, {\n headers: myHeaders,\n method: 'POST',\n body,\n });\n const data = await request.json();\n return data;\n};\n","import React, { useState, useEffect } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { DropzoneArea } from 'material-ui-dropzone';\n\n// assets\nimport imageNotFound from 'assets/img/image-not-found.png';\n\nimport {\n saveStepData,\n populateStepData,\n uploadAssignmentImage,\n} from 'services/dataServices.js';\n\n// @material-ui/core components\nimport { makeStyles } from '@material-ui/core/styles';\nimport FormLabel from '@material-ui/core/FormLabel';\nimport CircularProgress from '@material-ui/core/CircularProgress';\n\nimport Card from '@material-ui/core/Card';\nimport CardActionArea from '@material-ui/core/CardActionArea';\nimport CardContent from '@material-ui/core/CardContent';\nimport CardMedia from '@material-ui/core/CardMedia';\n\n// core components\nimport GridItem from 'components/Grid/GridItem.js';\nimport GridContainer from 'components/Grid/GridContainer.js';\nimport CustomInput from 'components/CustomInput/CustomInput.js';\nimport Button from 'components/CustomButtons/Button.js';\n\nconst useStyles = makeStyles((theme) => ({\n media: {\n width: '50%',\n height: 300,\n }\n}));\n\nexport default function Step0(props) {\n const classes = useStyles();\n const { customerId, assignmentId } = props;\n const [isLoading, setIsLoading] = useState(false);\n const [frontHouseImageURL, setFrontHouseImageURL] = useState(imageNotFound);\n const [sketchImageURL, setSketchImageURL] = useState(imageNotFound);\n\n const {\n control,\n register,\n handleSubmit,\n errors,\n reset,\n setValue,\n formState: { isSubmitting },\n } = useForm({\n defaultValues: {\n clientName: \"\",\n fullAddress: \"\",\n inspectionDate: \"\",\n outsideTemperature: \"\",\n outsideHumidity: \"\",\n outsideConditions: \"\",\n frontHouseImage: \"\",\n sketchImage: \"\",\n structureType: \"\",\n claim: \"\",\n preparedFor: \"\",\n inspectedBy: \"\",\n },\n });\n const todateDate = new Date();\n const todaydd = String(todateDate.getDate()).padStart(2, '0');\n const todaymm = String(todateDate.getMonth() + 1).padStart(2, '0'); //January is 0!\n const todayyyyy = todateDate.getFullYear();\n\n const formattedToday = todayyyyy + '-' + todaymm + '-' + todaydd ;\n\n useEffect(() => {\n const fetchData = async () => {\n setIsLoading(true);\n\n const result = await populateStepData(0, customerId, assignmentId);\n reset({\n clientName: result.clientName || \"\",\n fullAddress: result.fullAddress || \"\",\n inspectionDate: result.inspectionDate || formattedToday,\n outsideTemperature: result.outsideTemperature || \"\",\n outsideHumidity: result.outsideHumidity || \"\",\n outsideConditions: result.outsideConditions || \"\",\n frontHouseImage: result.frontHouseImage || \"\",\n sketchImage: result.sketchImage || \"\",\n structureType: result.structureType || \"\",\n claim: result.claim || \"\",\n preparedFor: result.preparedFor || \"\",\n inspectedBy: result.inspectedBy || \"\",\n });\n setFrontHouseImageURL(result.frontHouseImage || imageNotFound);\n setSketchImageURL(result.sketchImage || imageNotFound);\n setIsLoading(false);\n };\n if (customerId) {\n fetchData();\n }\n }, [customerId, assignmentId, reset]);\n\n const outsideConditionOptions = [\n { value: '', label: 'Select an Option' },\n { value: 'Clear', label: 'Clear' },\n { value: 'Partly Cloudy', label: 'Partly Cloudy' },\n { value: 'Overcast', label: 'Overcast' },\n { value: 'Light Rain', label: 'Light Rain' },\n { value: 'Rain', label: 'Rain' },\n { value: 'Storming', label: 'Storming' },\n { value: 'Snow', label: 'Snow' },\n ];\n\n const structureTypeOptions = [\n { value: '', label: 'Select an Option' },\n { value: 'Single-family Home', label: 'Single-family Home' },\n { value: 'Apartment', label: 'Apartment' },\n { value: 'Town-house', label: 'Town-house' },\n { value: 'Commercial Building', label: 'Commercial Building' },\n ];\n const { activeStep, handleBack, handleNext } = props;\n const onSubmit = async (data) => {\n data.customerId = customerId;\n data.assignmentId = assignmentId;\n await saveStepData(0, data);\n handleNext();\n };\n\n const handleHouseFrontFilesDrop = async (file) => {\n const uploadResponse = await uploadAssignmentImage(file);\n setValue('frontHouseImage', uploadResponse.fileUrl);\n setFrontHouseImageURL(uploadResponse.fileUrl);\n };\n\n const handleHouseFrontFilesDelete = async (file) => {\n setValue('frontHouseImage', '');\n setFrontHouseImageURL(imageNotFound);\n };\n\n const handleSketchImageFilesDrop = async (file) => {\n const uploadResponse = await uploadAssignmentImage(file);\n setValue(\"sketchImage\", uploadResponse.fileUrl);\n setSketchImageURL(uploadResponse.fileUrl);\n };\n\n const handleSketchImageFilesDelete = async (file) => {\n setValue(\"sketchImage\", \"\");\n setSketchImageURL(imageNotFound);\n };\n\n if (isLoading) return {errorMessage}
\n \n ) : success ? (\n\n \n \n \n \n \n \n \n \n \n Go Back\n \n \n \n \n \n
\n );\n}\n","import React, { useEffect } from 'react';\nimport { Link, useParams } from 'react-router-dom';\nimport { useForm } from 'react-hook-form';\n\n// services\nimport authService from 'components/api-authorization/AuthorizeService';\nimport { getAvailableTemplates, addNewReport } from 'services/dataServices.js';\n\n// @material-ui/core components\nimport { makeStyles } from '@material-ui/core/styles';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport Slide from '@material-ui/core/Slide';\nimport Fab from '@material-ui/core/Fab';\n\n// @material-ui/icon components\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport EditIcon from '@material-ui/icons/Edit';\nimport AddIcon from '@material-ui/icons/Add';\nimport RegenerateIcon from '@material-ui/icons/RestorePage';\n\n// core components\nimport GridItem from 'components/Grid/GridItem.js';\nimport GridContainer from 'components/Grid/GridContainer.js';\nimport MaterialTable from 'material-table';\nimport Card from 'components/Card/Card.js';\nimport CardHeader from 'components/Card/CardHeader.js';\nimport CardBody from 'components/Card/CardBody.js';\nimport CardFooter from 'components/Card/CardFooter.js';\nimport CustomInput from 'components/CustomInput/CustomInput.js';\nimport Button from 'components/CustomButtons/Button.js';\n\nconst styles = {\n fabMargin: {\n margin: '2px',\n },\n cardCategoryWhite: {\n '&,& a,& a:hover,& a:focus': {\n color: 'rgba(255,255,255,.62)',\n margin: '0',\n fontSize: '14px',\n marginTop: '0',\n marginBottom: '0',\n },\n '& a,& a:hover,& a:focus': {\n color: '#FFFFFF',\n },\n },\n cardTitleWhite: {\n color: '#FFFFFF',\n marginTop: '0px',\n minHeight: 'auto',\n fontWeight: '300',\n fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\n marginBottom: '3px',\n textDecoration: 'none',\n '& small': {\n color: '#777',\n fontSize: '65%',\n fontWeight: '400',\n lineHeight: '1',\n },\n },\n};\n\nconst useStyles = makeStyles(styles);\n\nconst Transition = React.forwardRef(function Transition(props, ref) {\n return Assignment Details
\n\n \n {steps.map((label, index) => {\n const stepProps = {};\n const buttonProps = {};\n return (\n \n \n {label}\n \n \n );\n })}\n \n
\n \n {getStepContent(\n activeStep,\n activeStep,\n handleBack,\n handleNext,\n customerId,\n assignmentId\n )}\n
\n Reports
\n{rowData.name}
,\n },\n {\n title: 'Description',\n field: 'description',\n render: (rowData) => {rowData.description}
,\n },\n {\n title: '',\n render: (rowData) => (\n \n \n \n \n \n \n \n \n \n handleRegenerateClickOpen(\n rowData.assignmentId,\n rowData.reportId,\n rowData.customerId,\n rowData.templateId,\n e\n )\n }\n size=\"small\"\n color=\"secondary\"\n className={classes.fabMargin}\n >\n \n \n \n handleDeleteClickOpen(\n rowData.assignmentId,\n rowData.reportId,\n e\n )\n }\n size=\"small\"\n color=\"secondary\"\n className={classes.fabMargin}\n >\n \n
\n ),\n },\n ]}\n data={tableData}\n title=\"\"\n />\n \n
\n );\n}\n","import React, { useEffect, useState } from 'react';\nimport { Link, useParams } from 'react-router-dom';\n\n// import styles\nimport ReactSummernote from 'react-summernote';\nimport 'react-summernote/dist/react-summernote.css';\nimport 'bootstrap/js/src/modal';\nimport 'bootstrap/js/src/dropdown';\nimport 'bootstrap/js/src/tooltip';\nimport 'bootstrap/dist/css/bootstrap.css';\nimport 'paper-css/paper.css';\nimport 'assets/css/printstyles.min.css';\n\n// services\nimport authService from 'components/api-authorization/AuthorizeService';\n\n// @material-ui/core components\nimport { makeStyles } from '@material-ui/core/styles';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Fab from '@material-ui/core/Fab';\nimport CircularProgress from '@material-ui/core/CircularProgress';\n\n// @material-ui/icon components\nimport SaveIcon from '@material-ui/icons/Save';\nimport FindInPageIcon from '@material-ui/icons/FindInPage';\n\n// core components\nimport GridItem from 'components/Grid/GridItem.js';\nimport GridContainer from 'components/Grid/GridContainer.js';\nimport Card from 'components/Card/Card.js';\nimport CardHeader from 'components/Card/CardHeader.js';\nimport CardBody from 'components/Card/CardBody.js';\nimport CardFooter from 'components/Card/CardFooter.js';\n\nconst styles = {\n fabMargin: {\n margin: '2px',\n },\n cardCategoryWhite: {\n '&,& a,& a:hover,& a:focus': {\n color: 'rgba(255,255,255,.62)',\n margin: '0',\n fontSize: '14px',\n marginTop: '0',\n marginBottom: '0',\n },\n '& a,& a:hover,& a:focus': {\n color: '#FFFFFF',\n },\n },\n cardTitleWhite: {\n color: '#FFFFFF',\n marginTop: '0px',\n minHeight: 'auto',\n fontWeight: '300',\n fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\n marginBottom: '3px',\n textDecoration: 'none',\n '& small': {\n color: '#777',\n fontSize: '65%',\n fontWeight: '400',\n lineHeight: '1',\n },\n },\n};\n\nconst useStyles = makeStyles(styles);\n\nconst populateData = async (assignmentId, reportId) => {\n await authService.validateAccessToken();\n const response = await fetch(`reports/${assignmentId}/${reportId}`, {\n \n });\n const text = await response.json();\n return text;\n};\n\nconst saveReportResult = async (assignmentId, reportId, type, content) => {\n await authService.validateAccessToken();\n const body = JSON.stringify(content);\n let myHeaders = new Headers();\n myHeaders.append('Content-Type', 'application/json');\n \n const request = await fetch(\n `reports/save/${assignmentId}/${reportId}/${type}`,\n {\n headers: myHeaders,\n method: 'POST',\n body,\n }\n );\n const data = await request.json();\n return data;\n};\n\nexport default function ReportEditor() {\n const classes = useStyles();\n const { assignmentId, reportId } = useParams();\n const [isLoading, setIsLoading] = useState(false);\n const [editorContent, setEditorContent] = useState('');\n const [customerId, setCustomerId] = useState('');\n\n useEffect(() => {\n const fetchData = async () => {\n document.body.className += ' A4';\n setIsLoading(true);\n\n const reportDetails = await populateData(assignmentId, reportId);\n setEditorContent(reportDetails.content);\n\n setCustomerId(reportDetails.customerId);\n setIsLoading(false);\n };\n fetchData();\n return function cleanup() {\n document.body.className = document.body.className.replace(' A4', '');\n };\n }, [assignmentId, reportId]);\n\n const onEditorChange = (content) => {\n setEditorContent(content);\n };\n\n const onSaveReport = async () => {\n await saveReportResult(assignmentId, reportId, 'final', editorContent);\n };\n const onPreviewReport = async () => {\n const fileDetails = await saveReportResult(\n assignmentId,\n reportId,\n 'preview',\n editorContent\n );\n window.open(fileDetails.fileUrl);\n };\n\n return (\n \n
\n \n
\n {switchRoutes}
\n